Browse Source

修改名称和样式调整

lex-xin 4 years ago
parent
commit
20e11e8dc5

+ 8 - 8
src/App.vue

@@ -44,7 +44,7 @@ export default {
   display: none !important;
 }
 body {
-  background-color: #eef4f9;
+  background-color: #eef4f9 !important;
 }
 /* 出去多选框中的关闭按钮 */
 .el-select__tags .el-tag__close.el-icon-close {
@@ -265,6 +265,9 @@ input[type="number"] {
     background-color: #fff;
     position: relative;
   }
+  // & > h2 {
+  //   display: none !important;
+  // }
   h2 {
     height: 48px;
     line-height: 48px;
@@ -296,13 +299,10 @@ input[type="number"] {
       background-color: #14928a;
     }
     .squrt {
-      // position: absolute;
-      // left: 0;
-      // top: 8px;
-      margin-right: 15px;
-      height: 34px;
-      width: 8px;
-      background-color: #14928a;
+      // margin-right: 15px;
+      // height: 34px;
+      // width: 8px;
+      // background-color: #14928a;
     }
   }
 }

File diff suppressed because it is too large
+ 0 - 0
src/assets/images/base/base-bell.svg


File diff suppressed because it is too large
+ 0 - 0
src/assets/images/base/base-home.svg


+ 1 - 1
src/layout/components/AppMain.vue

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

+ 32 - 28
src/layout/components/Navbar.vue

@@ -1,17 +1,21 @@
 <template>
   <div class="navbar">
     <!-- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
-
+    <router-link key="collapse" style="display: flex; align-items: center; padding-left: 30px;" to="/">
+      <img src="@/assets/images/base/logo.png"
+             class="sidebar-logo" style="width: 129px; height: 37px" />
+    </router-link>
     <!-- <breadcrumb class="breadcrumb-container" /> -->
     <div class="indexlayout-top-menu">
       <!-- :class="{'active': getTopMenuActive === route.path}" -->
-      <el-scrollbar class="horizontal-scrollbar">
+      <!-- el-scrollbar -->
+      <div class="horizontal-scrollbar">
           <template v-for="route in permission_routes">
             <app-link v-if="!route.hidden" :to="route.path" :key="route.path" class="indexlayout-top-menu-li" :class="{'active': getTopMenuActive === route.path}">
                 <span>{{ route.meta.title }}</span>
             </app-link>
           </template>
-      </el-scrollbar>
+      </div>
     </div>
     <!-- <div class="left-menu">
       <i class="el-icon-location-information topIcon"></i>
@@ -37,7 +41,7 @@
         <!-- <div class="active"></div> -->
       </div>
       <div class="left-menu">
-        <el-popover placement="top-start" width="300" trigger="hover" style="display: flex;height: 59px;">
+        <el-popover placement="top-start" width="300" trigger="hover" style="display: flex;height: 69px;">
           <div class="popover-container">
             <el-tag
               class="navbar_tag"
@@ -47,7 +51,7 @@
               >{{ item }}</el-tag
             >
           </div>
-          <span slot="reference" style="display: flex;align-items: center;justify-content: center;height: 59px;">
+          <span slot="reference" style="display: flex;align-items: center;justify-content: center;height: 69px;">
             <!-- {{ 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.svg" style="width: 23px;">
@@ -161,7 +165,7 @@
 
 <script>
 import qs from "qs";
-import axios from "axios";
+import Logo from './Sidebar/Logo'
 import { mapGetters } from "vuex";
 // import Breadcrumb from '@/components/Breadcrumb'
 // import Hamburger from '@/components/Hamburger'
@@ -298,37 +302,37 @@ export default {
 }
 
 .indexlayout-top-menu{
-  padding-left: 20px;
-  height: 60px;
-  line-height: 60px;
+  padding-left: 57px;
+  height: 70px;
+  line-height: 70px;
   flex: 1;
   display: flex;
   overflow: hidden;
   /* overflow-x: auto; */
   .indexlayout-top-menu-li{
     display: inline-block;
-    padding: 0 15px;
-    height: 57px;
+    padding: 0 5px;
+    height: 70px;
     text-decoration: none;
-    color: #303133;
-    font-size: 15px;
+    color: #f2f2f2;
+    font-size: 18px;
     transition: all .3s ease;
     span {
-      border-bottom: solid 3px transparent;
-      height: 57px;
-      line-height: 57px;
-      display: block;
+      // display: block;
+      transition: all .3s ease;
+      padding: 12px 16px;
     }
     &:hover,
     &.active{
-      color: #14928a;
+      color: #fff;
       span {
-        border-bottom-color: #209e91;
+        background: #14928A;
+        border-radius: 6px;
       }
     }
   }
   .breadcrumb{
-    line-height: 60px;
+    line-height: 70px;
     margin-left: 10px;
     .el-breadcrumb__item{
       display: inline-block;
@@ -344,19 +348,19 @@ export default {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  height: 60px;
+  height: 70px;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  background: #363D55;
   box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
   h2 {
     font-size: 18px;
-    line-height: 60px;
+    line-height: 70px;
     margin: 0 0 0 30px;
     display: inline-block;
   }
   .hamburger-container {
-    line-height: 60px;
+    line-height: 70px;
     height: 100%;
     float: left;
     cursor: pointer;
@@ -372,7 +376,7 @@ export default {
     float: left;
   }
   .left-menu {
-    line-height: 60px;
+    line-height: 70px;
     padding-right: 22px;
     font-size: 16px;
     color: #fff;
@@ -385,7 +389,7 @@ export default {
     min-width: 154px;
     float: right;
     height: 100%;
-    line-height: 60px;
+    line-height: 70px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -433,7 +437,7 @@ export default {
     }
 
     .avatar-container {
-      height: 60px;
+      height: 70px;
       margin-right: 42px;
       cursor: pointer;
 
@@ -448,7 +452,7 @@ export default {
           font-size: 14px;
           font-weight: 500;
           // color: rgba(68, 68, 68, 1);
-          color: #444;
+          color: #fff;
         }
 
         .user-avatar {

+ 65 - 4
src/layout/components/Sidebar/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo"
-          :collapse="false" />
+    <!-- <logo v-if="showLogo"
+          :collapse="false" /> -->
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <!--    -->
       <el-menu :default-active="activeMenu"
@@ -9,7 +9,7 @@
                 :background-color="variables.menuBg"
                :text-color="variables.menuText"
                :unique-opened="true"
-               :active-text-color="variables.menuActiveText"
+               :active-text-color="variables.menuActiveText2"
                :collapse-transition="true"
                mode="vertical">
         <template v-for="route in permission_routes">
@@ -81,6 +81,49 @@ export default {
       // console.log(getBelongTopMenuPath(route))
       return getBelongTopMenuPath(route);
     }
+  },
+  mounted() {
+    // console.log(this.permission_routes)
+    this.menuIsShow(this.$route)
+  },
+  watch: {
+    $route() {
+      this.menuIsShow(this.$route)
+    }
+  },
+  methods: {
+    menuIsShow(route) {
+      let activeTopMenu
+      const { meta } = route;
+      if (meta.belongTopMenu) {
+          activeTopMenu = meta.belongTopMenu;
+      }
+      let permissions = this.permission_routes || []
+      let childList = []
+      permissions.forEach(item => {
+        if(item.path == activeTopMenu) {
+          childList = item
+        }
+      });
+      let index = this.menuOperation(childList.children)
+      // console.log(index)
+      let status = index > 1 ? true : false
+      this.$emit('childStatus', status)
+    },
+    menuOperation(arr) {
+      let index = 0;
+      for(let i = 0; i < arr.length; i++) {
+        if(arr[i].hidden) {
+          continue
+        }
+        if(arr[i].children && arr[i].children.length > 0) {
+          index += this.menuOperation(arr[i].children)
+        } else {
+          index++
+        }
+      }
+      return index
+    }
   }
 }
 </script>
@@ -91,7 +134,25 @@ export default {
   }
 }
 
+/deep/.el-submenu__title, /deep/.el-menu-item {
+  font-size: 16px;
+}
+
 /deep/.el-menu-item.is-active {
-    background-color: #13817A !important;
+    background-color: #EEF4F4 !important;
+    position: relative;
+    &::after{
+      position: absolute;
+      top: 0; 
+      right: 0;
+      content: ' ';
+      width: 6px;
+      background-color: #14928a;
+      display: block;
+      height: 100%;
+    }
+}
+/deep/.el-menu .menu-wrapper .el-menu-item {
+  color: #666666;
 }
 </style>

+ 2 - 2
src/layout/components/TagsView.vue

@@ -192,8 +192,8 @@ export default {
     openMenu(tag, e) {
       this.visible = true;
       this.selectedTag = tag;
-      this.left = e.clientX - 165;
-      this.top = e.clientY + 15;
+      this.left = e.clientX - 200;
+      this.top = e.clientY - 55;
     },
     closeMenu() {
       this.visible = false;

+ 26 - 5
src/layout/index.vue

@@ -4,10 +4,13 @@
     <div v-if="device==='mobile'&&sidebar.opened"
          class="drawer-bg"
          @click="handleClickOutside" />
-    <sidebar class="sidebar-container" />
-    <div class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
+    <div :class="{'fixed-header':fixedHeader}" style="width: 100%;">
         <navbar />
+    </div>
+    <sidebar class="sidebar-container" @childStatus="childStatus" v-show="onlyStatus" />
+    <div class="main-container" :class="[ onlyStatus ? null : 'noContainer' ]">
+      <div :class="{'fixed-header':fixedHeader, 'noTagView': !onlyStatus}" style="top: 70px;" >
+        <!-- <navbar /> -->
         <tags-view></tags-view>
       </div>
 
@@ -19,7 +22,6 @@
 <script>
 import { Navbar, Sidebar, AppMain, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
-
 export default {
   name: 'Layout',
   components: {
@@ -48,9 +50,16 @@ export default {
       }
     }
   },
-  mounted () {
+  data() {
+    return {
+      onlyStatus: true
+    }
   },
   methods: {
+    childStatus(status) {
+      // console.log(status)
+      this.onlyStatus = status
+    },
     handleClickOutside () {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     }
@@ -62,6 +71,11 @@ export default {
 @import "~@/styles/mixin.scss";
 @import "~@/styles/variables.scss";
 
+#app .sidebar-container {
+  top: 70px;
+  background-color: #fff;
+
+}
 .app-wrapper {
   @include clearfix;
   position: relative;
@@ -104,4 +118,11 @@ export default {
   // background-color: #fff;
   box-sizing: border-box;
 }
+
+.noContainer {
+  margin-left: 0 !important;
+}
+.noTagView {
+  width: 100% !important;
+}
 </style>

+ 60 - 1
src/styles/sidebar.scss

@@ -77,11 +77,23 @@
 
       &:hover {
         background-color: $menuHover !important;
+        color: #14928A !important;
+        position: relative;
+        &::after{
+          position: absolute;
+          top: 0;
+          right: 0;
+          content: ' ';
+          width: 6px;
+          background-color: $menuActiveText2;
+          display: block;
+          height: 100%;
+        }
       }
     }
 
     .is-active>.el-submenu__title {
-      i{color: #fff;}
+      i{color: #909399;}
       color: $subMenuActiveText !important;
     }
 
@@ -92,16 +104,51 @@
 
       &:hover {
         background-color: $subMenuHover!important;
+        color: #14928A !important;
+        position: relative;
+        &::after{
+          position: absolute;
+          top: 0;
+          right: 0;
+          content: ' ';
+          width: 6px;
+          background-color: $menuActiveText2;
+          display: block;
+          height: 100%;
+        }
       }
     }
     & .el-menu-item {
       &:hover {
         background-color: $subMenuHover!important;
+        color: #14928A !important;
+        position: relative;
+        &::after{
+          position: absolute;
+          top: 0;
+          right: 0;
+          content: ' ';
+          width: 6px;
+          background-color: $menuActiveText2;
+          display: block;
+          height: 100%;
+        }
       }
     }
   }
   .el-submenu .el-menu-item.is-active {
     background-color: $subMenuActiveBg!important;
+    position: relative;
+    &::after{
+      position: absolute;
+      top: 0; 
+      right: 0;
+      content: ' ';
+      width: 6px;
+      background-color: $menuActiveText2;
+      display: block;
+      height: 100%;
+    }
  }
   .hideSidebar {
     .sidebar-container {
@@ -203,6 +250,18 @@
     &:hover {
       // you can use $subMenuHover
       background-color: $menuHover !important;
+      color: #14928A !important;
+      position: relative;
+      &::after{
+        position: absolute;
+        top: 0;
+        right: 0;
+        content: ' ';
+        width: 6px;
+        background-color: $menuActiveText2;
+        display: block;
+        height: 100%;
+      }
     }
     .is-active {
       background-color:$subMenuActiveBg !important;

+ 9 - 7
src/styles/variables.scss

@@ -1,14 +1,15 @@
 // sidebar
-$menuText:#CBCBCB;    // #000
+$menuText:#1a1a1a;    // #000
 $menuActiveText:#fff;
-$subMenuActiveText:#fff; //https://github.com/ElemeFE/element/issues/12951
+$menuActiveText2:#14928A;
+$subMenuActiveText:#1a1a1a; //https://github.com/ElemeFE/element/issues/12951
 // :#13817A;
-$menuBg:#363D55;
-$menuHover:#13817A;
+$menuBg:#fff;
+$menuHover: #EEF4F4;
 
-$subMenuBg:#2C3246;
-$subMenuHover:#13817A;
-$subMenuActiveBg:#13817A;
+$subMenuBg:#fff;
+$subMenuHover:#EEF4F4;
+$subMenuActiveBg:#EEF4F4;
 
 $sideBarWidth: 210px;
 /* 改变主题色变量 */
@@ -18,6 +19,7 @@ $--color-primary: rgb(19, 129, 122);
 :export {
   menuText: $menuText;
   menuActiveText: $menuActiveText;
+  menuActiveText2: $menuActiveText2;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;

+ 1 - 1
src/views/app/suggestion.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='m-container'>
     <h2>
-      <div class="squrt"></div>意见反馈管理
+      <div class="squrt"></div>意见反馈
     </h2>
     <div class="m-core">
       <div class="tableWrap">

+ 1 - 1
src/views/businessManager/orderManager/businessStatement.vue

@@ -382,7 +382,7 @@ export default {
     },
     lookDetail(row) {
       this.$router.push({
-        path: "/financialManager/orderManager/businessStatementDetail",
+        path: "/orderManager/businessStatementDetail",
         query: {
           organId: row.organId,
           organName: row.organName,

+ 1 - 1
src/views/businessManager/orderManager/businessStatementDetail.vue

@@ -346,7 +346,7 @@ export default {
       // searchForm: this.searchForm,
       // pageInfo: this.pageInfo
        this.$store.dispatch('delVisitedViews', this.$route)
-      this.$router.push({ path: '/financialManager/orderManager/businessStatement' })
+      this.$router.push({ path: '/orderManager/businessStatement' })
     }
   }
 }

+ 1 - 1
src/views/categroyManager/generalSettings/vipParameterManager.vue

@@ -2,7 +2,7 @@
   <div class="m-container">
     <h2>
       <div class="squrt"></div>
-      VIP/乐理课参数设置
+      课参数
     </h2>
     <div class="m-core">
         <tab-router v-model.trim="activeIndex" type="card" @tab-click="handleClick">

+ 3 - 4
src/views/categroyManager/globalConfig.vue

@@ -99,7 +99,6 @@
           >
             <overallManagerTwo v-if="activeIndex == 7" />
           </el-tab-pane>
-          <!-- holiday_setting -->
           <el-tab-pane
             label="节假日设置"
             lazy
@@ -180,7 +179,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/.m-container {
-  padding: 0 10px 40px;
-}
+// /deep/.m-container {
+//   padding: 0 10px 40px;
+// }
 </style>

+ 1 - 1
src/views/categroyManager/globalMusicGroup.vue

@@ -2,7 +2,7 @@
   <div class="m-container">
     <h2>
       <div class="squrt"></div>
-      乐团参数
+      乐团参数
     </h2>
     <div class="m-core">
       <!-- navMenu -->

+ 1 - 1
src/views/categroyManager/insideSetting/adminManager.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='m-container'>
     <h2>
-      <div class="squrt"></div>系统角色权限管理
+      <div class="squrt"></div>系统权限管理
     </h2>
     <div class="m-core">
       <div @click="onAdminOperation('create')"

+ 1 - 1
src/views/categroyManager/insideSetting/branchActive.vue

@@ -2,7 +2,7 @@
   <div class="m-container">
     <h2>
       <div class="squrt"></div>
-      VIP/乐理课分部活动列表
+      阶梯奖励
     </h2>
     <div class="m-core">
       <el-button

+ 1 - 1
src/views/categroyManager/specialSetup/branchSetting.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='m-container'>
     <h2>
-      <div class="squrt"></div>分部设置
+      <div class="squrt"></div>分部管理
     </h2>
     <div class="m-core">
       <div @click="onBranchOperation('create')"

+ 1 - 1
src/views/categroyManager/vipActiveList.vue

@@ -2,7 +2,7 @@
   <div class="m-container">
     <h2>
       <div class="squrt"></div>
-      VIP/乐理课活动方案
+      VIP活动管理
     </h2>
 
     <div class="m-core">

+ 1 - 1
src/views/categroyManager/vipChargeSeting.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="m-container">
     <h2>
-      <div class="squrt"></div>VIP/乐理课程收费设置
+      <div class="squrt"></div>课程收费设置
     </h2>
     <div class="m-core">
       <save-form :inline="true"

+ 1 - 1
src/views/editionManager/editionList.vue

@@ -2,7 +2,7 @@
   <div class="m-container">
     <h2>
       <div class="squrt"></div>
-      版本控制
+      APP版本控制
     </h2>
     <div class="m-core">
       <!--   -->

+ 1 - 1
src/views/levelManager/levelManager.vue

@@ -3,7 +3,7 @@
   <div class="m-container">
     <h2>
       <div class="squrt"></div>
-      考级报名列表
+      考级报名
     </h2>
     <div class="m-core">
       <!-- 搜索标题 -->

+ 1 - 1
src/views/main/index.vue

@@ -2,7 +2,7 @@
   <div class="m-container">
     <h2>
       <div class="squrt"></div>
-      控制
+      工作
       <filter-search
         v-if="$route.query.tabrouter === 'teamSchedule'"
         :keys="['searchType']"

+ 1 - 1
src/views/repairManager/repairList.vue

@@ -3,7 +3,7 @@
   <div class="m-container">
     <h2>
       <div class="squrt"></div>
-      维修单列表
+      维修单管理
     </h2>
     <div class="m-core">
       <save-form

+ 1 - 1
src/views/teacherManager/teacherList.vue

@@ -2,7 +2,7 @@
   <div class="m-container">
     <h2>
       <div class="squrt"></div>
-      老师列表
+      老师管理
     </h2>
     <div class="m-core">
       <div class="hanlderWrap">

+ 1 - 1
src/views/teamDetail/teamList.vue

@@ -2,7 +2,7 @@
   <div class="m-container">
     <h2>
       <div class="squrt"></div>
-      乐团列表 <filter-search @reload="getList" :moreKeys="['organId']" />
+      乐团管理 <filter-search @reload="getList" :moreKeys="['organId']" />
     </h2>
     <div class="m-core">
       <div class="btnList" style="margin-bottom: 20px">

+ 1 - 1
src/views/withdrawal-application/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="m-container">
     <h2>
-      <div class="squrt"></div>退团申请列表 <filter-search @reload="FetchList" :keys="['visitFlag']" :moreKeys="['organId']"/>
+      <div class="squrt"></div>退团申请 <filter-search @reload="FetchList" :keys="['visitFlag']" :moreKeys="['organId']"/>
     </h2>
     <div class="m-core">
       <save-form

+ 1 - 1
src/views/workBenchManager/classFeesIsOk.vue

@@ -3,7 +3,7 @@
   <div class="m-container">
     <h2>
       <div class="squrt"></div>
-      课酬确认
+      课酬列表
     </h2>
     <div class="m-core">
       <auth

Some files were not shown because too many files changed in this diff