更换图片

src/assets/element-variables.scss

@@ -1,10 +0,0 @@
-$--color-primary: #409EFF !default;
-// $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
-// $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
-// $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
-// $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
-// $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
-// $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
-// $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
-// $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
-// $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

src/layout/components/AppMain.vue

@@ -126,7 +126,7 @@ export default {
   margin-top: 20px;
 }
 .fixed-header + .app-main {
-  padding-top: 105px;
+  padding-top: 90px;
 }
 </style>
 

src/layout/components/Navbar.vue

@@ -28,7 +28,10 @@
             class="indexlayout-top-menu-li"
             :class="{ active: getTopMenuActive === route.path }"
           >
-            <span>{{ route.meta.title }}</span>
+            <div style="display: flex; align-items: center; justify-content: center; flex-direction: column; height: 76px;">
+              <i :class="[route.meta.icon, 'menuSize']"></i>
+              <span style="line-height: 1.2">{{ route.meta.title }}</span>
+            </div>
           </app-link>
         </template>
       </el-scrollbar>
@@ -37,92 +40,57 @@
       <el-popover
         placement="bottom"
         trigger="hover"
-        style="display: flex; height: 89px"
+        style="display: flex;"
       >
         <div class="popover-container" style="text-align: center">OA审批</div>
 
         <div
-          style="
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 89px;
-          "
-          class="msginfo"
+          class="msginfo right-position"
           @click="gotoOa"
           slot="reference"
         >
-          <img
-            src="@/assets/images/base/icon_oa.png"
-            width="24px"
-            height="24px"
-          />
-
-          <!-- <div class="active"></div> -->
+          <i class="icon_admin_oa operationSize"></i>
         </div>
       </el-popover>
       <el-popover
         v-if="isShowIns"
         placement="bottom"
         trigger="hover"
-        style="display: flex; height: 89px"
+        style="display: flex;"
       >
         <div class="popover-container" style="text-align: center">操作手册</div>
 
         <div
-          style="
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 89px;
-          "
-          class="msginfo"
+          class="msginfo right-position"
           @click="openIns"
           slot="reference"
         >
-          <img
-            src="@/assets/images/base/instruction-icon.png"
-            width="24px"
-            height="24px"
-          />
-
-          <!-- <div class="active"></div> -->
+          <i class="icon_admin_book operationSize"></i>
         </div>
       </el-popover>
 
       <el-popover
         placement="bottom"
         trigger="hover"
-        style="display: flex; height: 89px"
+        style="display: flex;"
       >
         <div class="popover-container" style="text-align: center">系统日志</div>
         <div
-          style="
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 89px;
-          "
-          class="msginfo"
+          class="msginfo right-position"
           v-permission="'/journal'"
           @click="gotoRecode"
           slot="reference"
         >
-          <img
-            src="@/assets/images/base/base-bell.png"
-            width="24px"
-            height="24px"
-          />
-          <!-- <div class="active"></div> -->
+          <i class="icon_admin_message operationSize"></i>
         </div>
       </el-popover>
 
-      <div class="left-menu">
+      <div class="left-menu" style="margin-right: 12px">
         <el-popover
           placement="top-start"
           width="300"
           trigger="hover"
-          style="display: flex; height: 89px"
+          style="display: flex;"
         >
           <div class="popover-container">
             <el-tag
@@ -135,21 +103,9 @@
           </div>
           <span
             slot="reference"
-            class="msginfo"
-            style="
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              height: 89px;
-            "
+            class="msginfo right-position"
           >
-            <!-- {{ organName.length > 10 ? organName.substr(0, 10) + "..." : organName }} -->
-            <!-- <i class="el-icon-s-home" style="font-size: 23px; color: #1A1A1A;"></i> -->
-            <img
-              src="@/assets/images/base/base-home.png"
-              width="24px"
-              height="24px"
-            />
+            <i class="icon_admin_orgin operationSize"></i>
           </span>
         </el-popover>
       </div>
@@ -171,16 +127,21 @@
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <!-- divided -->
           <el-dropdown-item v-if="tenantStatus">
-            <span style="display: block" @click="onTenantChange">{{ tenantName }} <i class="el-icon-sort"></i></span>
+            <i class="icon_admin_tenant userSize"></i>
+            <span class="dropdown-text" @click="onTenantChange">{{ tenantName }}</span>
+            <i style="margin-left: 3px" class="icon_admin_change userSize"></i>
           </el-dropdown-item>
           <el-dropdown-item>
-            <span style="display: block" @click="resetPassWord">修改密码</span>
+            <i class="icon_admin_edit userSize"></i>
+            <span class="dropdown-text" @click="resetPassWord">修改密码</span>
           </el-dropdown-item>
           <el-dropdown-item>
-            <span style="display: block" @click="accountSetting">账号设置</span>
+            <i class="icon_admin_account userSize"></i>
+            <span class="dropdown-text" @click="accountSetting">账号设置</span>
           </el-dropdown-item>
-          <el-dropdown-item>
-            <span style="display: block" @click="logout">安全退出</span>
+          <el-dropdown-item style="border-top: 1px solid #EBEEF5;">
+            <i class="icon_admin_exit userSize"></i>
+            <span class="dropdown-text" @click="logout">安全退出</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -521,16 +482,16 @@ export default {
 
 .indexlayout-top-menu {
   padding-left: 57px;
-  height: 90px;
-  line-height: 88px;
+  height: 76px;
+  line-height: 76px;
   flex: 1;
   display: flex;
   overflow: hidden;
   /* overflow-x: auto; */
   .indexlayout-top-menu-li {
-    display: inline-block;
+    display: table-cell;
     padding: 0 5px;
-    height: 90px;
+    height: 76px;
     text-decoration: none;
     color: #f2f2f2;
     font-size: 16px;
@@ -538,7 +499,8 @@ export default {
     span {
       // display: block;
       transition: all 0.3s ease;
-      padding: 10px 20px;
+      // padding: 10px 20px;
+      padding: 8px 20px 3px;
     }
     &:hover,
     &.active {
@@ -552,7 +514,7 @@ export default {
     // }
   }
   .breadcrumb {
-    line-height: 90px;
+    line-height: 76px;
     margin-left: 10px;
     .el-breadcrumb__item {
       display: inline-block;
@@ -568,7 +530,7 @@ export default {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  height: 90px;
+  height: 76px;
   overflow: hidden;
   position: relative;
   z-index: 2000;
@@ -576,12 +538,12 @@ export default {
 
   h2 {
     font-size: 18px;
-    line-height: 90px;
+    line-height: 76px;
     margin: 0 0 0 30px;
     display: inline-block;
   }
   .hamburger-container {
-    line-height: 90px;
+    line-height: 76px;
     height: 100%;
     float: left;
     cursor: pointer;
@@ -597,7 +559,7 @@ export default {
     float: left;
   }
   .left-menu {
-    line-height: 90px;
+    line-height: 76px;
     // padding-right: 22px;
     font-size: 16px;
     .topIcon {
@@ -609,7 +571,7 @@ export default {
     min-width: 154px;
     float: right;
     height: 100%;
-    line-height: 90px;
+    line-height: 76px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -627,7 +589,7 @@ export default {
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
-      padding-right: 25px;
+      padding: 0 12px;
       position: relative;
       cursor: pointer;
       img {
@@ -663,7 +625,7 @@ export default {
     }
 
     .avatar-container {
-      height: 90px;
+      height: 76px;
       margin-right: 42px;
       cursor: pointer;
 
@@ -700,4 +662,25 @@ export default {
     }
   }
 }
+.user-dropdown {
+  width: 135px;
+  .el-dropdown-menu__item {
+    display: flex;
+    align-items: center;
+    padding: 3px 17px;
+  }
+  .dropdown-text {
+    display: block;
+    width: 60px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.right-position {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 75px;
+}
 </style>

src/layout/components/TagsView.vue

@@ -268,16 +268,16 @@ export default {
   .tags-view-wrapper {
     background: #edeef0;
     height: 34px;
-    // border-bottom: 1px solid #d8dce5;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
-    // box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
+    background: linear-gradient(180deg, #F9F9F9 0%, #ECECEC 100%);
+    box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.5);
     .tags-view-item {
+      background: linear-gradient(180deg, #f6f6f6 0%, #ececec 100%);
       min-width: 120px;
       display: inline-flex;
       .icon {
-        font-size: 20px;
+        font-size: 22px;
         position: relative;
-        top: 3px;
+        top: 1px;
         float: right;
         margin-right: 5px;
       }
@@ -294,12 +294,12 @@ export default {
       // margin-left: 5px;
       margin-top: 4px;
       &:first-of-type {
-        margin-left: 15px;
+        // margin-left: 15px;
       }
       &.active {
         color: #495060;
         left: -1px;
-        background-color: #fff;
+        background: #fff;
         z-index: 2;
 
         &::before {

src/layout/index.vue

@@ -16,7 +16,7 @@
     </div>
     <sidebar class="sidebar-container" @childStatus="childStatus" :class="[onlyStatus && isCollapse ? null : 'noSide']" />
     <div class="main-container" :class="[ onlyStatus && isCollapse ? null : 'noContainer' ]">
-      <div :class="{'fixed-header':fixedHeader, 'noTagView': !(onlyStatus && isCollapse)}" style="top: 90px; z-index:999!important" >
+      <div :class="{'fixed-header':fixedHeader, 'noTagView': !(onlyStatus && isCollapse)}" style="top: 76px; z-index:999!important" >
         <!-- <navbar /> -->
         <tags-view></tags-view>
       </div>
@@ -83,7 +83,7 @@ export default {
 @import "~@/styles/variables.scss";
 
 #app .sidebar-container {
-  top: 90px;
+  top: 76px;
   background-color: #fff;
 
 }

src/styles/index.scss

@@ -8,6 +8,7 @@
 @import './theme/cloudAshes.scss';
 @import './theme/volcanicRed.scss';
 
+@import './menu.scss';
 // $--color-primary: red;
 body {
   height: 100%;

src/styles/menu.scss

@@ -0,0 +1,44 @@
+.menuSize {
+  width: 16px;
+  height: 16px;
+}
+.operationSize {
+  width: 22px;
+  height: 22px;
+}
+.userSize {
+  width: 14px;
+  height: 14px;
+}
+
+.baseCss {
+  display: inline-block;
+}
+
+$menuList: icon_admin_home, icon_admin_tenant_manager, icon_admin_charge, icon_admin_operate, icon_admin_user, icon_admin_people, icon_admin_content, icon_admin_goods, icon_admin_report, icon_admin_setting, icon_admin_platform, icon_admin_oa, icon_admin_book, icon_admin_message, icon_admin_orgin, icon_admin_tenant, icon_admin_change, icon_admin_account, icon_admin_edit, icon_admin_exit;
+
+// 开始 @each 循环遍历数组
+// $c 作为循环变量，代表了数组的元素，不是索引~！！！
+@each $c in $menuList{
+  .#{$c} {
+    @extend .baseCss;
+    background: url('~@/assets/menu/#{$c}.png') no-repeat center center;
+    background-size: cover;
+  }
+}
+
+// $operationList: icon_admin_oa, icon_admin_book, icon_admin_message, icon_admin_orgin;
+// @each $c in $operationList{
+//   .#{$c} {
+//     background: url('~@/assets/menu/#{$c}.png') no-repeat center center;
+//     background-size: cover;
+//   }
+// }
+
+// $userList: icon_admin_tenant, icon_admin_change, icon_admin_account, icon_admin_edit, icon_admin_exit;
+// @each $c in $userList{
+//   .#{$c} {
+//     background: url('~@/assets/menu/#{$c}.png') no-repeat center center;
+//     background-size: cover;
+//   }
+// }

src/views/setSilder/addSilder.vue

@@ -155,6 +155,12 @@
                       :value="1"></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="ICON名称"
+                      prop="icon"
+                      :label-width="formLabelWidth">
+          <el-input v-model.trim="form.icon"
+                    autocomplete="off"></el-input>
+        </el-form-item>
         <el-form-item label="排序"
                       :label-width="formLabelWidth">
           <el-input v-model.trim="form.sort"
@@ -194,6 +200,7 @@ export default {
         component: null,
         hid: 0,
         type: 0,
+        icon: null, // 图标名称
         parentPermission: null,
         keepAlive: 1
       },
@@ -255,6 +262,7 @@ export default {
           component: row.component,
           id: row.id,
           hid: row.hid,
+          icon: row.icon,
           type: Number(row.type),
           parentPermission: row.parentPermission,
           keepAlive: Number(row.keepAlive),
@@ -277,6 +285,7 @@ export default {
               sort: form.sort,
               parentId: form.parentId.pop(),
               hid: form.hid,
+              icon: form.icon,
               type: form.type,
               parentPermission: form.parentPermission,
               keepAlive: form.keepAlive,
@@ -334,6 +343,7 @@ export default {
           component: res.component,
           sort: res.sort,
           hid: res.hid,
+          icon: res.icon,
           type: res.type,
           keepAlive: res.keepAlive,
           parentPermission: res.parentPermission,
@@ -365,6 +375,7 @@ export default {
         component: null,
         hid: 0,
         type: 0,
+        icon: null,
         parentPermission: null,
         keepAlive: 1
       }

src/views/tenantSetting/tenantInfo.vue

@@ -10,6 +10,7 @@
         <organInfo ref="organInfo" :data="info" type="update" tenantInfo="SETTING" />
 
         <div style="display: flex;width: 100%;">
+          <i class="icon_admin_home"></i>
           <el-button type="primary"  @click="onNext">确认</el-button>
         </div>
     </div>

vue.config.js

@@ -16,17 +16,10 @@ const name = defaultSettings.title || '管乐迷后台管理系统' // page titl
 // http://47.99.212.176:8000
 // //  https://online.dayaedu.com
 // let target = 'https://online.dayaedu.com' //线上
-<<<<<<< HEAD
 // let target = 'http://192.168.3.227:8000' // 何国威
 // let target = 'http://192.168.3.250:8000' //邹璇
 // let target = 'http://192.168.3.112:8000' //勇哥
 let target = 'http://dev.dayaedu.com' // 开发环境
-=======
-// let target = 'http://192.168.3.139:8000' // 箭河
-// let target = 'http://192.168.3.124:8000' //邹璇
-let target = 'http://192.168.3.119:8000' //勇哥
-// let target = 'http://dev.dayaedu.com' // 开发环境
->>>>>>> master
 // let target = 'https://test.dayaedu.com' //测试环境
 // let target = 'http://192.168.3.134:8000' // 乔
 // All configuration item explanations can be find in https://cli.vuejs.org/config/