haojianlong 4 лет назад
Родитель
Сommit
aa5c28f5c9

+ 582 - 53
src/assets/font/demo_index.html

@@ -23,7 +23,7 @@
         <li class="dib"><span>Symbol</span></li>
       </ul>
       
-      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2035940" target="_blank" class="nav-more">查看项目</a>
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2088866" target="_blank" class="nav-more">查看项目</a>
       
     </div>
     <div class="tab-container">
@@ -31,39 +31,177 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
-              <span class="icon iconfont">&#xe68a;</span>
+              <span class="icon iconfont">&#xe663;</span>
+                <div class="name">更多</div>
+                <div class="code-name">&amp;#xe663;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe667;</span>
+                <div class="name">关系</div>
+                <div class="code-name">&amp;#xe667;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe668;</span>
+                <div class="name">锁定</div>
+                <div class="code-name">&amp;#xe668;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe669;</span>
+                <div class="name">左对齐</div>
+                <div class="code-name">&amp;#xe669;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66a;</span>
+                <div class="name">置底</div>
+                <div class="code-name">&amp;#xe66a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66b;</span>
+                <div class="name">删除</div>
+                <div class="code-name">&amp;#xe66b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66c;</span>
+                <div class="name">置顶</div>
+                <div class="code-name">&amp;#xe66c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66d;</span>
+                <div class="name">组合</div>
+                <div class="code-name">&amp;#xe66d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66e;</span>
+                <div class="name">打散</div>
+                <div class="code-name">&amp;#xe66e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66f;</span>
+                <div class="name">粘贴</div>
+                <div class="code-name">&amp;#xe66f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe670;</span>
+                <div class="name">重做</div>
+                <div class="code-name">&amp;#xe670;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe671;</span>
+                <div class="name">撤回</div>
+                <div class="code-name">&amp;#xe671;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe672;</span>
+                <div class="name">筛选</div>
+                <div class="code-name">&amp;#xe672;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe673;</span>
+                <div class="name">复制</div>
+                <div class="code-name">&amp;#xe673;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe675;</span>
+                <div class="name">搜索</div>
+                <div class="code-name">&amp;#xe675;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe656;</span>
+                <div class="name">添加</div>
+                <div class="code-name">&amp;#xe656;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe657;</span>
                 <div class="name">箭头</div>
-                <div class="code-name">&amp;#xe68a;</div>
+                <div class="code-name">&amp;#xe657;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe639;</span>
-                <div class="name">工具</div>
-                <div class="code-name">&amp;#xe639;</div>
+              <span class="icon iconfont">&#xe658;</span>
+                <div class="name">保存</div>
+                <div class="code-name">&amp;#xe658;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe61e;</span>
-                <div class="name">空间</div>
-                <div class="code-name">&amp;#xe61e;</div>
+              <span class="icon iconfont">&#xe659;</span>
+                <div class="name">下载</div>
+                <div class="code-name">&amp;#xe659;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65a;</span>
+                <div class="name">Triangle</div>
+                <div class="code-name">&amp;#xe65a;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe689;</span>
-                <div class="name">管道</div>
-                <div class="code-name">&amp;#xe689;</div>
+              <span class="icon iconfont">&#xe65b;</span>
+                <div class="name">放大</div>
+                <div class="code-name">&amp;#xe65b;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe600;</span>
-                <div class="name">中心</div>
-                <div class="code-name">&amp;#xe600;</div>
+              <span class="icon iconfont">&#xe65c;</span>
+                <div class="name">缩小</div>
+                <div class="code-name">&amp;#xe65c;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe617;</span>
-                <div class="name">楼梯</div>
-                <div class="code-name">&amp;#xe617;</div>
+              <span class="icon iconfont">&#xe65d;</span>
+                <div class="name">发布</div>
+                <div class="code-name">&amp;#xe65d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe644;</span>
+                <div class="name">通用</div>
+                <div class="code-name">&amp;#xe644;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe645;</span>
+                <div class="name">管线</div>
+                <div class="code-name">&amp;#xe645;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe646;</span>
+                <div class="name">楼层</div>
+                <div class="code-name">&amp;#xe646;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe647;</span>
+                <div class="name">设备</div>
+                <div class="code-name">&amp;#xe647;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe648;</span>
+                <div class="name">空间</div>
+                <div class="code-name">&amp;#xe648;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe649;</span>
+                <div class="name">设备组</div>
+                <div class="code-name">&amp;#xe649;</div>
               </li>
           
           </ul>
@@ -117,56 +255,263 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
-            <span class="icon iconfont iconjiantou-copy"></span>
+            <span class="icon iconfont icon-gengduo1"></span>
+            <div class="name">
+              更多
+            </div>
+            <div class="code-name">.icon-gengduo1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guanxi"></span>
+            <div class="name">
+              关系
+            </div>
+            <div class="code-name">.icon-guanxi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-suoding"></span>
+            <div class="name">
+              锁定
+            </div>
+            <div class="code-name">.icon-suoding
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zuoduiqi"></span>
+            <div class="name">
+              左对齐
+            </div>
+            <div class="code-name">.icon-zuoduiqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhidi"></span>
+            <div class="name">
+              置底
+            </div>
+            <div class="code-name">.icon-zhidi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shanchu"></span>
+            <div class="name">
+              删除
+            </div>
+            <div class="code-name">.icon-shanchu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhiding"></span>
+            <div class="name">
+              置顶
+            </div>
+            <div class="code-name">.icon-zhiding
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zuhe"></span>
+            <div class="name">
+              组合
+            </div>
+            <div class="code-name">.icon-zuhe
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dasan"></span>
+            <div class="name">
+              打散
+            </div>
+            <div class="code-name">.icon-dasan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-niantie"></span>
+            <div class="name">
+              粘贴
+            </div>
+            <div class="code-name">.icon-niantie
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhongzuo"></span>
+            <div class="name">
+              重做
+            </div>
+            <div class="code-name">.icon-zhongzuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chehui"></span>
+            <div class="name">
+              撤回
+            </div>
+            <div class="code-name">.icon-chehui
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shaixuan"></span>
+            <div class="name">
+              筛选
+            </div>
+            <div class="code-name">.icon-shaixuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fuzhi"></span>
+            <div class="name">
+              复制
+            </div>
+            <div class="code-name">.icon-fuzhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-sousuo"></span>
+            <div class="name">
+              搜索
+            </div>
+            <div class="code-name">.icon-sousuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tianjia"></span>
+            <div class="name">
+              添加
+            </div>
+            <div class="code-name">.icon-tianjia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jiantou"></span>
             <div class="name">
               箭头
             </div>
-            <div class="code-name">.iconjiantou-copy
+            <div class="code-name">.icon-jiantou
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icongongju"></span>
+            <span class="icon iconfont icon-baocun"></span>
             <div class="name">
-              工具
+              保存
             </div>
-            <div class="code-name">.icongongju
+            <div class="code-name">.icon-baocun
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont iconkongjian"></span>
+            <span class="icon iconfont icon-xiazai"></span>
             <div class="name">
-              空间
+              下载
+            </div>
+            <div class="code-name">.icon-xiazai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-Triangle"></span>
+            <div class="name">
+              Triangle
+            </div>
+            <div class="code-name">.icon-Triangle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fangda"></span>
+            <div class="name">
+              放大
+            </div>
+            <div class="code-name">.icon-fangda
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-suoxiao"></span>
+            <div class="name">
+              缩小
+            </div>
+            <div class="code-name">.icon-suoxiao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fabu"></span>
+            <div class="name">
+              发布
+            </div>
+            <div class="code-name">.icon-fabu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tongyong"></span>
+            <div class="name">
+              通用
+            </div>
+            <div class="code-name">.icon-tongyong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guanxian"></span>
+            <div class="name">
+              管线
+            </div>
+            <div class="code-name">.icon-guanxian
             </div>
-            <div class="code-name">.iconkongjian
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-louceng"></span>
+            <div class="name">
+              楼层
+            </div>
+            <div class="code-name">.icon-louceng
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont iconguandao"></span>
+            <span class="icon iconfont icon-shebei"></span>
             <div class="name">
-              管道
+              设备
             </div>
-            <div class="code-name">.iconguandao
+            <div class="code-name">.icon-shebei
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont iconzhongxin"></span>
+            <span class="icon iconfont icon-kongjian"></span>
             <div class="name">
-              中心
+              空间
             </div>
-            <div class="code-name">.iconzhongxin
+            <div class="code-name">.icon-kongjian
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont iconlouti"></span>
+            <span class="icon iconfont icon-shebeizu"></span>
             <div class="name">
-              楼梯
+              设备组
             </div>
-            <div class="code-name">.iconlouti
+            <div class="code-name">.icon-shebeizu
             </div>
           </li>
           
@@ -188,7 +533,7 @@
 <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
 </code></pre>
         <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
-<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
 </code></pre>
         <blockquote>
           <p>"
@@ -201,50 +546,234 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#iconjiantou-copy"></use>
+                  <use xlink:href="#icon-gengduo1"></use>
+                </svg>
+                <div class="name">更多</div>
+                <div class="code-name">#icon-gengduo1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guanxi"></use>
+                </svg>
+                <div class="name">关系</div>
+                <div class="code-name">#icon-guanxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-suoding"></use>
+                </svg>
+                <div class="name">锁定</div>
+                <div class="code-name">#icon-suoding</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zuoduiqi"></use>
+                </svg>
+                <div class="name">左对齐</div>
+                <div class="code-name">#icon-zuoduiqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhidi"></use>
+                </svg>
+                <div class="name">置底</div>
+                <div class="code-name">#icon-zhidi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shanchu"></use>
+                </svg>
+                <div class="name">删除</div>
+                <div class="code-name">#icon-shanchu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhiding"></use>
+                </svg>
+                <div class="name">置顶</div>
+                <div class="code-name">#icon-zhiding</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zuhe"></use>
+                </svg>
+                <div class="name">组合</div>
+                <div class="code-name">#icon-zuhe</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dasan"></use>
+                </svg>
+                <div class="name">打散</div>
+                <div class="code-name">#icon-dasan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-niantie"></use>
+                </svg>
+                <div class="name">粘贴</div>
+                <div class="code-name">#icon-niantie</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhongzuo"></use>
+                </svg>
+                <div class="name">重做</div>
+                <div class="code-name">#icon-zhongzuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chehui"></use>
+                </svg>
+                <div class="name">撤回</div>
+                <div class="code-name">#icon-chehui</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shaixuan"></use>
+                </svg>
+                <div class="name">筛选</div>
+                <div class="code-name">#icon-shaixuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fuzhi"></use>
+                </svg>
+                <div class="name">复制</div>
+                <div class="code-name">#icon-fuzhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-sousuo"></use>
+                </svg>
+                <div class="name">搜索</div>
+                <div class="code-name">#icon-sousuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tianjia"></use>
+                </svg>
+                <div class="name">添加</div>
+                <div class="code-name">#icon-tianjia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiantou"></use>
                 </svg>
                 <div class="name">箭头</div>
-                <div class="code-name">#iconjiantou-copy</div>
+                <div class="code-name">#icon-jiantou</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icongongju"></use>
+                  <use xlink:href="#icon-baocun"></use>
                 </svg>
-                <div class="name">工具</div>
-                <div class="code-name">#icongongju</div>
+                <div class="name">保存</div>
+                <div class="code-name">#icon-baocun</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#iconkongjian"></use>
+                  <use xlink:href="#icon-xiazai"></use>
                 </svg>
-                <div class="name">空间</div>
-                <div class="code-name">#iconkongjian</div>
+                <div class="name">下载</div>
+                <div class="code-name">#icon-xiazai</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#iconguandao"></use>
+                  <use xlink:href="#icon-Triangle"></use>
                 </svg>
-                <div class="name">管道</div>
-                <div class="code-name">#iconguandao</div>
+                <div class="name">Triangle</div>
+                <div class="code-name">#icon-Triangle</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#iconzhongxin"></use>
+                  <use xlink:href="#icon-fangda"></use>
                 </svg>
-                <div class="name">中心</div>
-                <div class="code-name">#iconzhongxin</div>
+                <div class="name">放大</div>
+                <div class="code-name">#icon-fangda</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-suoxiao"></use>
+                </svg>
+                <div class="name">缩小</div>
+                <div class="code-name">#icon-suoxiao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fabu"></use>
+                </svg>
+                <div class="name">发布</div>
+                <div class="code-name">#icon-fabu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tongyong"></use>
+                </svg>
+                <div class="name">通用</div>
+                <div class="code-name">#icon-tongyong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guanxian"></use>
+                </svg>
+                <div class="name">管线</div>
+                <div class="code-name">#icon-guanxian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-louceng"></use>
+                </svg>
+                <div class="name">楼层</div>
+                <div class="code-name">#icon-louceng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shebei"></use>
+                </svg>
+                <div class="name">设备</div>
+                <div class="code-name">#icon-shebei</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-kongjian"></use>
+                </svg>
+                <div class="name">空间</div>
+                <div class="code-name">#icon-kongjian</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#iconlouti"></use>
+                  <use xlink:href="#icon-shebeizu"></use>
                 </svg>
-                <div class="name">楼梯</div>
-                <div class="code-name">#iconlouti</div>
+                <div class="name">设备组</div>
+                <div class="code-name">#icon-shebeizu</div>
             </li>
           
           </ul>

Разница между файлами не показана из-за своего большого размера
+ 112 - 19
src/assets/font/iconfont.css


BIN
src/assets/font/iconfont.eot


Разница между файлами не показана из-за своего большого размера
+ 1 - 1
src/assets/font/iconfont.js


+ 194 - 33
src/assets/font/iconfont.json

@@ -1,51 +1,212 @@
 {
-  "id": "2035940",
-  "name": "拓扑图编辑器",
+  "id": "2088866",
+  "name": "拓扑工具-普通",
   "font_family": "iconfont",
-  "css_prefix_text": "icon",
-  "description": "博瑞拓扑图编辑去",
+  "css_prefix_text": "icon-",
+  "description": "",
   "glyphs": [
     {
-      "icon_id": "16867744",
+      "icon_id": "17487441",
+      "name": "更多",
+      "font_class": "gengduo1",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "17376666",
+      "name": "关系",
+      "font_class": "guanxi",
+      "unicode": "e667",
+      "unicode_decimal": 58983
+    },
+    {
+      "icon_id": "17376667",
+      "name": "锁定",
+      "font_class": "suoding",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "17376668",
+      "name": "左对齐",
+      "font_class": "zuoduiqi",
+      "unicode": "e669",
+      "unicode_decimal": 58985
+    },
+    {
+      "icon_id": "17376669",
+      "name": "置底",
+      "font_class": "zhidi",
+      "unicode": "e66a",
+      "unicode_decimal": 58986
+    },
+    {
+      "icon_id": "17376670",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e66b",
+      "unicode_decimal": 58987
+    },
+    {
+      "icon_id": "17376671",
+      "name": "置顶",
+      "font_class": "zhiding",
+      "unicode": "e66c",
+      "unicode_decimal": 58988
+    },
+    {
+      "icon_id": "17376672",
+      "name": "组合",
+      "font_class": "zuhe",
+      "unicode": "e66d",
+      "unicode_decimal": 58989
+    },
+    {
+      "icon_id": "17376673",
+      "name": "打散",
+      "font_class": "dasan",
+      "unicode": "e66e",
+      "unicode_decimal": 58990
+    },
+    {
+      "icon_id": "17376674",
+      "name": "粘贴",
+      "font_class": "niantie",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "17376675",
+      "name": "重做",
+      "font_class": "zhongzuo",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "17376676",
+      "name": "撤回",
+      "font_class": "chehui",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    },
+    {
+      "icon_id": "17376677",
+      "name": "筛选",
+      "font_class": "shaixuan",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "17376678",
+      "name": "复制",
+      "font_class": "fuzhi",
+      "unicode": "e673",
+      "unicode_decimal": 58995
+    },
+    {
+      "icon_id": "17376680",
+      "name": "搜索",
+      "font_class": "sousuo",
+      "unicode": "e675",
+      "unicode_decimal": 58997
+    },
+    {
+      "icon_id": "17376472",
+      "name": "添加",
+      "font_class": "tianjia",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "17376473",
       "name": "箭头",
-      "font_class": "jiantou-copy",
-      "unicode": "e68a",
-      "unicode_decimal": 59018
+      "font_class": "jiantou",
+      "unicode": "e657",
+      "unicode_decimal": 58967
     },
     {
-      "icon_id": "7088035",
-      "name": "工具",
-      "font_class": "gongju",
-      "unicode": "e639",
-      "unicode_decimal": 58937
+      "icon_id": "17376474",
+      "name": "保存",
+      "font_class": "baocun",
+      "unicode": "e658",
+      "unicode_decimal": 58968
     },
     {
-      "icon_id": "10749519",
-      "name": "空间",
-      "font_class": "kongjian",
-      "unicode": "e61e",
-      "unicode_decimal": 58910
+      "icon_id": "17376475",
+      "name": "下载",
+      "font_class": "xiazai",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    },
+    {
+      "icon_id": "17376476",
+      "name": "Triangle",
+      "font_class": "Triangle",
+      "unicode": "e65a",
+      "unicode_decimal": 58970
+    },
+    {
+      "icon_id": "17376477",
+      "name": "放大",
+      "font_class": "fangda",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
     },
     {
-      "icon_id": "14402043",
-      "name": "管道",
-      "font_class": "guandao",
-      "unicode": "e689",
-      "unicode_decimal": 59017
+      "icon_id": "17376478",
+      "name": "缩小",
+      "font_class": "suoxiao",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
     },
     {
-      "icon_id": "14657079",
-      "name": "中心",
-      "font_class": "zhongxin",
-      "unicode": "e600",
-      "unicode_decimal": 58880
+      "icon_id": "17376479",
+      "name": "发布",
+      "font_class": "fabu",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "17373833",
+      "name": "通用",
+      "font_class": "tongyong",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "17373834",
+      "name": "管线",
+      "font_class": "guanxian",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "17373835",
+      "name": "楼层",
+      "font_class": "louceng",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "17373836",
+      "name": "设备",
+      "font_class": "shebei",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "17373837",
+      "name": "空间",
+      "font_class": "kongjian",
+      "unicode": "e648",
+      "unicode_decimal": 58952
     },
     {
-      "icon_id": "16452751",
-      "name": "楼梯",
-      "font_class": "louti",
-      "unicode": "e617",
-      "unicode_decimal": 58903
+      "icon_id": "17373838",
+      "name": "设备组",
+      "font_class": "shebeizu",
+      "unicode": "e649",
+      "unicode_decimal": 58953
     }
   ]
 }

Разница между файлами не показана из-за своего большого размера
+ 75 - 6
src/assets/font/iconfont.svg


BIN
src/assets/font/iconfont.ttf


BIN
src/assets/font/iconfont.woff


BIN
src/assets/font/iconfont.woff2


+ 120 - 8
src/components/homeView/topoImageCard.vue

@@ -1,17 +1,57 @@
 <!--拓扑图缩略图卡片-->
 <template>
-  <el-card class="box-card" shadow="hover">
-    <div slot="header" class="clearfix">
-      <span>卡片名称</span>
-      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+  <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px' }">
+    <img :src="data.img" class="image">
+    <div class="shadow image">
+      <el-checkbox v-model="data.checked" class="shadowCheck"></el-checkbox>
+    </div>
+    <div class="content">
+      <div>
+        <span class="title">{{data.name}}</span>
+        <div class="func">
+          <el-popover placement="top" width="200" trigger="hover" popper-class="customPop">
+            <p>版本: {{data.version}}</p>
+            <p>更新时间: {{data.updateTime}}</p>
+            <p>更新人: {{data.putUser}}</p>
+            <span slot="reference"><i class="el-icon-warning-outline"></i></span>
+          </el-popover>
+          <el-dropdown :hide-on-click="false" placement="bottom-start" trigger="click">
+            <span class="el-dropdown-link">
+              <span><i class="iconfont icon-guanxi"></i></span>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="t in moreList" :key="t.name">{{t.label}}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+      <div class="tags">
+        <span v-for="i in data.tagList" :key="i.id">{{i.name}}</span>
+      </div>
     </div>
-    <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
   </el-card>
 </template>
 <script>
 export default {
+  props:{
+    data:{
+      type: Object,
+      default: ()=>{
+        return {}
+      }
+    }
+  },
   data() {
-    return {};
+    return {
+      moreList: [
+        { name: 'rename', label: '重命名' },
+        { name: 'download', label: '下载' },
+        { name: 'editTag', label: '修改标签' },
+        { name: 'moveTo', label: '移动到' },
+        { name: 'delete', label: '删除' },
+      ],
+      checked: false
+    };
   },
 };
 </script>
@@ -19,14 +59,86 @@ export default {
 .box-card {
   position: relative;
   width: 260px;
-  height: 200px;
+  height: 193px;
   border-radius: 8px;
   margin-right: 20px;
   margin-bottom: 20px;
   cursor: pointer;
   &:hover {
-    border-color: #0091FF80;
+    border-color: #0091ff80;
     box-shadow: 0px 8px 16px 0px rgba(195, 199, 203, 0.4);
   }
+  .image {
+    width: 100%;
+    height: 120px;
+    display: block;
+  }
+  .shadow {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #8d939926;
+    .shadowCheck{
+      position: absolute;
+      top: 8px;
+      left: 12px;
+    }
+  }
+  .content {
+    padding: 8px 12px;
+    vertical-align: middle;
+    .title {
+      display: inline-block;
+      color: #1f2429;
+      margin: 0;
+      max-width: 182px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .func {
+      & > * + * {
+        margin-left: 8px;
+      }
+      display: none;
+      float: right;
+      i {
+        font-size: 12px;
+      }
+    }
+    .tags {
+      margin-top: 4px;
+      span {
+        display: inline-block;
+        padding: 1px 6px;
+        font-size: 12px;
+        color: #8d9399;
+        line-height: 18px;
+        border: 1px solid #8d9399;
+        border-radius: 3px;
+        margin-bottom: 4px;
+        & + span {
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+  &:hover {
+    .shadow {
+      display: block;
+    }
+    .func {
+      display: block;
+    }
+  }
+}
+.customPop {
+  p {
+    font-size: 12px;
+    & + p {
+      margin-top: 10px;
+    }
+  }
 }
 </style>

+ 2 - 1
src/router/index.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
 const Editer = () => import('../views/editer.vue')
+const Home = () => import('../views/home.vue')
 Vue.use(VueRouter)
 
 const routes: Array<RouteConfig> = [
@@ -12,7 +13,7 @@ const routes: Array<RouteConfig> = [
   {
     path: '/home',
     name: 'home',
-    component: () => import('../views/home.vue')
+    component: Home
   }
 ]
 

+ 88 - 69
src/views/Home.vue

@@ -2,14 +2,8 @@
   <el-container class="home">
     <!-- 顶部导航栏 -->
     <el-header class="header">
-      <Select
-        width="200"
-        radius
-        @change="testClick"
-        :selectdata="dataSelect3"
-        :placeholder="'请选择'"
-      />
-      <Button radius @click="createProject" type="primary" size="large" :text="'新建拓扑图'">primary</Button>
+      <Select width="200" radius @change="testClick" :selectdata="dataSelect3" :placeholder="'请选择'" />
+      <Button radius @click="createProject" type="primary" :text="'新建拓扑图'">primary</Button>
     </el-header>
     <!-- body部分 -->
     <el-container class="bodys">
@@ -20,56 +14,45 @@
       <!-- 展示部分 -->
       <el-main class="main">
         <div class="main-head">
-          <el-radio-group v-model="isPub" size="small">
-            <el-radio-button label="已发布">已发布</el-radio-button>
-            <el-radio-button label="未发布">未发布</el-radio-button>
-          </el-radio-group>
-          <div class="head-right">
-             <el-input placeholder="搜索" prefix-icon="el-icon-search" size="small" v-model="queryText">
-            </el-input>
-            <Dropdown class="Dropdown" v-model="selVal" :data="dataSelect">
-              <span class="drop-text">{{selText}}</span>
-            </Dropdown>
+          <div class="showType" v-show="!1">
+            <el-radio-group v-model="isPub" size="small">
+              <el-radio-button label="已发布">已发布</el-radio-button>
+              <el-radio-button label="未发布">未发布</el-radio-button>
+            </el-radio-group>
+            <div class="head-right">
+              <el-input placeholder="搜索" prefix-icon="el-icon-search" size="small" v-model="queryText">
+              </el-input>
+              <Dropdown class="Dropdown" v-model="selVal" :data="dataSelect">
+                <span class="drop-text">{{selText}}</span>
+              </Dropdown>
+            </div>
+          </div>
+          <div class="showAction" v-show="1">
+            <el-checkbox v-model="checkAll">全选</el-checkbox>
+            <span class="sum">已选择<span style="color:#252b30">{{selectCard.length}}<span>项目</span>
+                <el-button size="mini">移动到</el-button>
+                <el-button size="mini">下载</el-button>
+                <el-button size="mini">删除</el-button>
           </div>
         </div>
         <div class="main-body">
-          <topoImageCard></topoImageCard>
-          <topoImageCard></topoImageCard>
-          <topoImageCard></topoImageCard>
-          <topoImageCard></topoImageCard>
-          <topoImageCard></topoImageCard>
-          <topoImageCard></topoImageCard>
-          <topoImageCard></topoImageCard>
-          <topoImageCard></topoImageCard>
-          <topoImageCard></topoImageCard>
-          <topoImageCard></topoImageCard>
+          <template v-for="t in cardList">
+            <topoImageCard :data="t" :key="t.id"></topoImageCard>
+          </template>
         </div>
       </el-main>
     </el-container>
 
     <!-- 弹框 -->
     <el-dialog class="create-dialog" title="新建拓扑图" :visible.sync="outerVisible">
-      <el-dialog
-        class="create-dialog-inner"
-        width="30%"
-        title="所属类别"
-        :visible.sync="innerVisible"
-        append-to-body
-      >
+      <el-dialog class="create-dialog-inner" width="30%" title="所属类别" :visible.sync="innerVisible" append-to-body>
         <div class="inner-dialog-body">
           <div class="left">1</div>
           <div class="right">2</div>
         </div>
       </el-dialog>
       <div class="dialog-bodys">
-        <el-form
-          :model="ruleForm"
-          :rules="rules"
-          ref="ruleForm"
-          label-width="100px"
-          class="demo-ruleForm"
-          label-position="top"
-        >
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
           <el-form-item label="所属类别" prop="region">
             <el-button @click="getprojectType">请选择所属类别</el-button>
           </el-form-item>
@@ -77,15 +60,7 @@
             <el-input v-model="ruleForm.name"></el-input>
           </el-form-item>
           <el-form-item label="标签" prop="resource">
-            <el-select
-              v-model="value"
-              multiple
-              filterable
-              allow-create
-              default-first-option
-              width="100%"
-              placeholder="请选择文章标签"
-            ></el-select>
+            <el-select v-model="value" multiple filterable allow-create default-first-option width="100%" placeholder="请选择文章标签"></el-select>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
@@ -181,6 +156,36 @@ export default {
         desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
       },
       value: [],
+      cardList: [
+        {
+          id: 1,
+          name: '中央供冷系统中央供冷系统中央供冷系统中央供冷系统',
+          version: 'V1.2.2',
+          putUser: '六千',
+          updateTime: '2020-20-20 16:16:16',
+          tagList: [
+            { id: 1, name: '范德萨' },
+            { id: 2, name: '范333德萨' },
+            { id: 3, name: '范333德萨' }
+          ],
+          img: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
+        },
+        {
+          id: 2,
+          name: '中央供冷系456',
+          version: 'V1.2.2',
+          putUser: '六千',
+          updateTime: '2020-20-20 16:16:16',
+          tagList: [
+            { id: 1, name: '范德萨' },
+            { id: 2, name: '范333德萨' },
+            { id: 3, name: '范333德萨' }
+          ],
+          img: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
+        }
+      ],
+      checkAll: false,
+      selectCard: [],
     };
   },
   methods: {
@@ -188,7 +193,7 @@ export default {
       console.log(data);
     },
     // 创建拓扑图
-    createProject() {},
+    createProject() { },
     // 获取所属类别
     getprojectType() {
       this.innerVisible = true;
@@ -234,29 +239,43 @@ export default {
       padding: 10px 20px;
       box-sizing: border-box;
       .main-head {
+        position: relative;
         width: 100%;
         margin-bottom: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner{
-          color: #0091FF;
-          border-color: #0091FF;
-          background: #E1F2FF;
-        }
-        .head-right {
+        .showType {
+          width: 100%;
           display: flex;
           align-items: center;
-          .Dropdown {
-            min-width: 100px;
-            margin-left: 20px;
-            .drop-text {
-              font-size: 14px;
-              color: #1f2329;
-              line-height: 16px;
+          justify-content: space-between;
+          /deep/
+            .el-radio-button__orig-radio:checked
+            + .el-radio-button__inner {
+            color: #0091ff;
+            border-color: #0091ff;
+            background: #e1f2ff;
+          }
+          .head-right {
+            display: flex;
+            align-items: center;
+            .Dropdown {
+              min-width: 100px;
+              margin-left: 20px;
+              .drop-text {
+                font-size: 14px;
+                color: #1f2329;
+                line-height: 16px;
+              }
             }
           }
         }
+        .showAction {
+          span.sum {
+            border-left: 1px solid #ccc;
+            margin: 0 8px;
+            color: #778089;
+            padding-left: 14px;
+          }
+        }
       }
       .main-body {
         display: flex;