菜单图标样式

src/views/system/route/components/list.vue

@@ -156,13 +156,13 @@
       title="设置图标"
       width="40%"
       @close="iconDialog.visible = false">
-      <div>
+      <div class="link">
         <a href="https://iconpark.oceanengine.com/official" target="_blank">
           点击此处
         </a>
         查看所有图标
       </div>
-      <div class="mt">
+      <div>
         <el-form label-width="80px">
           <el-row>
             <el-col :span="12">
@@ -179,8 +179,8 @@
         </el-form>
       </div>
       <div class="icon_container">
-        <div v-for="(item, index) in iconDialog.svgList" :key="index">
-          <el-tooltip :content="item.title">
+        <template v-for="(item, index) in iconDialog.svgList">
+          <el-tooltip :content="item.title" :key="index">
             <div
               :class="{ active: iconDialog.iconIndex === index }"
               class="item"
@@ -190,22 +190,20 @@
                 :is="'icon-' + item.name"
                 :stroke-width="3"
                 theme="outline"
-                fill="#fff"
+                fill="#a5b2c2"
                 size="38"
               />
             </div>
           </el-tooltip>
-        </div>
-      </div>
-      <div class="mt flex-end">
-        <pagination
-          :total="iconDialog.pagination.total"
-          :page.sync="iconDialog.pagination.currentPage"
-          :limit.sync="iconDialog.pagination.pageSize"
-          small
-          layout="total, sizes, prev, pager, next, jumper"
-          @pagination="fnSearchIcon" />
+        </template>
       </div>
+      <pagination
+        :total="iconDialog.pagination.total"
+        :page.sync="iconDialog.pagination.currentPage"
+        :limit.sync="iconDialog.pagination.pageSize"
+        small
+        layout="total, sizes, prev, pager, next, jumper"
+        @pagination="fnSearchIcon" />
       <template #footer>
         <el-button type="primary" @click="confirmIcon">保存</el-button>
         <el-button @click="iconDialog.visible = false">关闭</el-button>
@@ -566,13 +564,20 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.link{
+  margin-bottom: 10px;
+  a{
+    color: #409EFF;
+  }
+}
   .icon_container {
     display: flex;
     flex-wrap: wrap;
+    margin-bottom: 10px;
 
     .item {
-      flex-basis: calc(5% - 10px);
-      border: 1px solid #fff;
+      flex-basis: calc(10% - 13px);
+      border: 1px solid #ccc;
       display: flex;
       justify-content: center;
       align-items: center;