演示用修改logo 登录 运营

login/src/views/Login/index.vue

@@ -1,11 +1,14 @@
 <template>
     <div class="login-wrap">
         <div class="logo" :class="{ logoleave: jumpAnimate }">
-            <img src="@assets/img/icon_logo2.png" />
+            <!-- <img src="@assets/img/icon_logo2.png" /> -->
+            <!-- 演示用 -->
+            <!-- <img class="logoys" src="@assets/img/icon_logo2cs.png" /> -->
         </div>
         <div class="login-title">
-            <h1 class="title-name">智慧社区管理平台</h1>
-            <!-- <p class="title-lang">Smart community management platform</p> -->
+            <!-- <h1 class="title-name">智慧社区管理平台</h1> -->
+            <!-- 演示用 -->
+            <h1 class="title-name">智慧园区管理平台</h1>
             <p class="title-lang">SMART COMMUNITY MANAGEMENT PLATFORM</p>
         </div>
         <div class="ms-login ms-login1" :class="{ 'ms-login1leave': jumpAnimate }" v-show="!isSelectTenant">
@@ -437,345 +440,4 @@ export default {
 
 <style lang="scss" scoped>
 @import './style.scss';
-// /deep/.el-input__inner {
-//     font-family: Microsoft YaHei;
-//     height: 48px;
-//     line-height: 10px;
-//     border-radius: 6px;
-//     background: #1d212a;
-//     border: 1px solid rgba(255, 255, 255, 0.3);
-//     color: #ffffff;
-//     font-size: 16px;
-//     font-weight: 400;
-//     &:focus {
-//         border: 1px solid #0eaeff;
-//         border-radius: 6px;
-//     }
-//     // opacity: 0.3;
-// }
-// /deep/.el-form-item {
-//     margin-bottom: 30px;
-// }
-
-// /deep/.el-tabs {
-//     // position: relative;
-//     // position: absolute;
-//     // top: 10px;
-//     width: 100%;
-//     // padding: 0px 30px 30px 30px;
-//     // height: 360px;
-//     .el-tabs__header {
-//         margin: 0;
-//     }
-//     .el-tabs__content {
-//         .el-form .form-item {
-//         }
-//     }
-//     .el-tabs__nav-wrap::after {
-//         display: none;
-//     }
-//     .el-tabs__nav {
-//         width: 100%;
-//         .el-tabs__bar {
-//             height: 0;
-//         }
-//         .el-tabs__active-bar {
-//             background-color: transparent;
-//         }
-//         .el-tabs__item {
-//             width: 50%;
-//             color: #ffffff33;
-//             text-align: center;
-//             padding: 0;
-//         }
-//         .el-tabs__item.is-active {
-//             color: #ffffff;
-//             &::after {
-//                 display: block;
-//                 content: '';
-//                 position: absolute;
-//                 width: 48px;
-//                 left: 50%;
-//                 transform: translateX(-50%);
-//                 height: 2px;
-//                 background: #0eaeff;
-//                 bottom: 0;
-//             }
-//         }
-//     }
-// }
-
-// /deep/ .right-tabbox-newnotice /deep/.el-tabs__nav-wrap::after {
-//     position: static !important;
-// }
-
-// // 改版
-// // 动画
-
-// @-webkit-keyframes lightfadeout {
-//     0% {
-//         opacity: 0;
-//     }
-//     100% {
-//         opacity: 1;
-//     }
-// }
-// @keyframes lightfadeout {
-//     0% {
-//         opacity: 0;
-//     }
-//     100% {
-//         opacity: 1;
-//     }
-// }
-// @-webkit-keyframes lightfadeoutleave {
-//     0% {
-//         opacity: 1;
-//     }
-//     100% {
-//         opacity: 0;
-//     }
-// }
-// @keyframes lightfadeoutleave {
-//     0% {
-//         opacity: 1;
-//     }
-//     100% {
-//         opacity: 0;
-//     }
-// }
-
-// .login-wrap .logo {
-//     position: absolute;
-//     top: 120px;
-//     left: 130px;
-//     margin: 0;
-//     opacity: 0;
-//     animation-name: lightfadeout;
-//     animation-duration: 0.267s;
-//     animation-timing-function: linear;
-//     animation-delay: 1.267s;
-//     animation-iteration-count: 1;
-//     animation-fill-mode: forwards;
-// }
-// .login-wrap .logo > img {
-//     width: 150px;
-//     height: 40px;
-// }
-// .login-wrap .logoleave {
-//     opacity: 1;
-//     animation-name: lightfadeoutleave;
-//     animation-duration: 0.267s;
-//     animation-timing-function: linear;
-//     animation-delay: 0.3s;
-//     animation-iteration-count: 1;
-//     animation-fill-mode: forwards;
-// }
-// .ms-login1 {
-//     opacity: 0;
-//     animation-name: lightfadeout;
-//     animation-duration: 0.5s;
-//     animation-timing-function: linear;
-//     animation-delay: 0.5s;
-//     animation-iteration-count: 1;
-//     animation-fill-mode: forwards;
-// }
-// .ms-login1leave {
-//     opacity: 1;
-//     animation-name: lightfadeoutleave;
-//     animation-duration: 0.5s;
-//     animation-timing-function: linear;
-//     animation-delay: 0.5s;
-//     animation-iteration-count: 1;
-//     animation-fill-mode: forwards;
-// }
-
-// /deep/.el-input__inner {
-//     &::placeholder {
-//         font-size: 16px;
-//         font-family: Microsoft YaHei;
-//         font-weight: 400;
-//         color: #ffffff33;
-//     }
-// }
-
-// .prefix-img {
-//     height: 18px;
-//     position: absolute;
-//     top: 15px;
-//     padding: 0 10px 0 14px;
-// }
-// .center-middle {
-//     width: 1660px;
-//     height: 430px;
-//     position: absolute;
-//     top: 23%;
-//     left: 50%;
-//     transform: translate(-50%, -50%);
-// }
-
-// .suffix-img {
-//     position: absolute;
-//     top: 15px;
-//     right: 0;
-//     padding: 0 10px 0 14px;
-// }
-// /deep/.el-input--prefix .el-input__inner {
-//     padding-left: 44px;
-// }
-// .login-wrap .ms-main .form-item .codeImg-item {
-//     width: 110px;
-//     height: 34px;
-//     background: #97a3c1;
-//     opacity: 0.8;
-//     border-radius: 4px;
-// }
-// .login-wrap .ms-main .form-item .sms-code {
-//     border-left: 1px solid rgba(38, 133, 242, 0.3);
-//     padding-left: 26px;
-//     font-size: 16px;
-//     font-family: Microsoft YaHei;
-//     font-weight: 400;
-//     color: rgba(14, 174, 255, 1);
-// }
-// .login-wrap .ms-main .form-item .sms-code-notime {
-//     width: 110px;
-//     padding-left: 10px;
-// }
-// .login-wrap .ms-main .form-item .sms-code-istime {
-//     font-size: 16px;
-//     font-family: Microsoft YaHei;
-//     font-weight: 400;
-//     color: rgba(255, 255, 255, 0.4);
-// }
-// .login-wrap .ms-main .btn {
-//     border: none;
-// }
-
-// .define-el-select {
-//     /deep/ .el-input__suffix {
-//         display: none;
-//     }
-// }
-// .login-wrap .ms-main .form-item .btn-select {
-//     padding: 0 10px 0 20px;
-//     pointer-events: none;
-//     img {
-//         width: 18px;
-//         height: 18px;
-//     }
-// }
-
-// .login-wrap {
-//     min-width: 1280px;
-//     width: 100%;
-//     height: 100%;
-//     background: url(../../assets/img/loginPop/bg.png) center no-repeat;
-//     background-size: cover;
-//     overflow: hidden;
-//     position: relative;
-//     .ms-login {
-//         position: absolute;
-//         top: 50%;
-//         right: 215px;
-//         transform: translateY(-50%);
-//     }
-//     .login-title {
-//         position: absolute;
-//         top: 226px;
-//         left: 130px;
-//         color: white;
-//         font-family: PingFangSC-Semibold;
-//         .title-name {
-//             font-size: 60px;
-//         }
-//         .title-lang {
-//             font-size: 17.5px;
-//             display: inline-block;
-//             // margin-left: 60px;
-//             // transform: scale(1.35, 0.9);
-//             // -ms-transform: scale(1.35, 0.9);
-//             // -webkit-transform: scale(1.35, 0.9);
-//             // -moz-transform: scale(1.35, 0.9);
-//             // -o-transform: scale(1.35, 0.9);
-//             margin-left: 30px;
-//             transform: scale(1.15, 0.8);
-//             -ms-transform: scale(1.15, 0.8);
-//             -webkit-transform: scale(1.15, 0.8);
-//             -moz-transform: scale(1.15, 0.8);
-//             -o-transform: scale(1.15, 0.8);
-//         }
-//     }
-//     .ms-main {
-//         width: 400px;
-//         border: 1px solid rgba(240, 238, 241, 0.2);
-//         border-radius: 10px;
-//         opacity: 0.8;
-//         height: 468px;
-//         background: linear-gradient(0deg, #101327 0%, #29314c 100%);
-//         box-shadow: 0px 10px 80px 0px rgba(0, 0, 0, 0.15);
-//         .login-topImg,
-//         .login-buttonImg {
-//             width: 100%;
-//             text-align: center;
-//         }
-//         .login-buttonImg {
-//             position: absolute;
-//             bottom: 0;
-//         }
-//         .login-body {
-//             padding: 15px 30px 0 30px;
-//             .tips {
-//                 color: #f25050;
-//                 font-size: 14px;
-//                 display: inline-block;
-//                 margin-bottom: 10px;
-//             }
-//             .btn {
-//                 width: 100%;
-//                 background: linear-gradient(-90deg, #0098ef 0%, #0eaeff 100%);
-//                 border-radius: 6px;
-//                 height: 48px;
-//                 font-size: 20px;
-//                 font-family: Microsoft YaHei;
-//                 font-weight: 400;
-//                 color: #ffffff;
-//             }
-//             .remember {
-//                 margin-bottom: 30px;
-//             }
-//         }
-//         .form-item {
-//             margin: 24px 0;
-//             height: 48px;
-//             display: flex;
-//             align-items: center;
-//             position: relative;
-//             .codeImg {
-//                 position: absolute;
-//                 right: 10px;
-//             }
-//             .code {
-//                 border-left: 1px solid #2887f2;
-//                 height: 20px;
-//                 line-height: 0px;
-//                 padding-left: 10px;
-//             }
-//             .el-select {
-//                 width: 100%;
-//             }
-//             .icon {
-//                 position: absolute;
-//                 top: 18px;
-//                 left: 6px;
-//             }
-//         }
-//     }
-// }
-// .paTop10 {
-//     padding-top: 10px;
-// }
-// .mgTop16 {
-//     margin-top: 16px;
-// }
 </style>

login/src/views/Login/style.scss

@@ -343,3 +343,8 @@ $base_fontSize: 100;
 .mgTop16 {
   margin-top: rem(16);
 }
+
+.logoys {
+  width: rem(40) !important;
+  height: rem(40) !important;
+}

login/src/views/NewNav/index.vue

@@ -2,10 +2,14 @@
     <div class="nav-wrap">
         <div class="top">
             <div class="top_png">
-                <p>智慧社区管理平台</p>
+                <!-- <p>智慧社区管理平台</p> -->
+                <!-- 演示用 -->
+                <p>智慧园区管理平台</p>
             </div>
             <div class="lfet-right">
-                <div class="logo"></div>
+                <!-- <div class="logo"></div> -->
+                <!-- 演示用 -->
+                <div></div>
                 <div style="display: flex">
                     <div class="tenantName" @click="toggleTenant">{{ tenantName }}</div>
                     <div class="logout" @click="logout"></div>
@@ -175,292 +179,4 @@ export default {
 
 <style lang="scss" scoped>
 @import './style.scss';
-// .nav-wrap {
-//     width: 100%;
-//     height: 100%;
-//     // min-width: 1500px;
-//     background: linear-gradient(0deg, #000000 0%, #132037 100%);
-//     overflow: hidden;
-//     position: relative;
-//     .top {
-//         position: relative;
-//         z-index: 101;
-//         padding-top: 67px;
-//         .lfet-right {
-//             padding: 0 100px 0 100px;
-//             display: flex;
-//             justify-content: space-between;
-//             text-align: center;
-//             position: relative;
-//             top: -25px;
-//             .tenantName {
-//                 color: RGBA(254, 254, 254, 1);
-//                 padding: 0 20px;
-//                 height: 49px;
-//                 line-height: 49px;
-//                 font-size: 20px;
-//                 box-sizing: border-box;
-//                 border: 1px solid RGBA(71, 81, 98, 1);
-//                 border-radius: 10px;
-//                 margin-right: 20px;
-//                 cursor: pointer;
-//             }
-//         }
-//     }
-//     .logo {
-//         width: 120px;
-//         height: 36px;
-//         background: url(../../assets/img/nav/logo.png);
-//         background-size: 100% 100%;
-//         z-index: 11;
-//     }
-//     .logout {
-//         width: 49px;
-//         height: 49px;
-//         background: url(../../assets/img/btn_switch.png);
-//         background-size: 100% 100%;
-//         z-index: 11;
-//     }
-
-//     .top_png {
-//         // position: absolute;
-//         // z-index: 100;
-//         // top: 67px;
-//         // left: 50%;
-//         width: 100%;
-//         width: 1458px;
-//         margin: auto;
-//         height: 58px;
-//         // transform: translateX(-50%);
-//         animation-name: opacityAni;
-//         background: url(../../assets/img/nav/img_toubu.png);
-//         background-size: cover;
-//         opacity: 0;
-//         animation-delay: 0.668s;
-//         animation-duration: 0.834s;
-//         animation-fill-mode: forwards;
-//         p {
-//             font-size: 24px;
-//             font-family: PingFang SC;
-//             font-weight: 600;
-//             color: #ffffff;
-//             background: linear-gradient(1deg, #a8c4f5 0%, #ffffff 100%);
-//             -webkit-background-clip: text;
-//             -webkit-text-fill-color: transparent;
-//             position: relative;
-//             top: -10px;
-//             text-align: center;
-//         }
-//     }
-//     .bottom_png {
-//         position: absolute;
-//         z-index: 100;
-//         bottom: 0;
-//         width: 100%;
-//         height: 83px;
-//         height: 4.3vw;
-//         background: #010305;
-//         & > span {
-//             display: block;
-//             width: 100%;
-//             height: 83px;
-//             height: 4.3vw;
-//             animation-name: opacityAni;
-//             background: url(../../assets/img/nav/img_dibu.png);
-//             background-size: cover;
-//             opacity: 0;
-//             animation-delay: 0.668s;
-//             animation-duration: 0.834s;
-//             animation-fill-mode: forwards;
-//         }
-//     }
-//     .bg-earth {
-//         position: absolute;
-//         width: 1500px;
-//         width: 1920 / 1500;
-//         height: 600px;
-//         top: 50%;
-//         left: 50%;
-//         transform: translate(-50%, -50%);
-//         overflow-y: auto;
-
-//         &::-webkit-scrollbar {
-//             // width: 5px;
-//             display: none;
-//         }
-//         // &::-webkit-scrollbar-track {
-//         //     background-color: white;
-//         //     border-radius: 10px;
-//         // }
-//         // &::-webkit-scrollbar-thumb {
-//         //     border-radius: 10px;
-//         //     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.6, RGBA(9, 14, 25, 1)));
-//         // }
-//     }
-//     .nav-title {
-//         position: absolute;
-//         display: flex;
-//         justify-content: center;
-//         align-items: center;
-//         flex-direction: column;
-//         width: 381px;
-//         height: 153px;
-//         img {
-//             width: 150px;
-//             height: 40px;
-//         }
-//         .dot_icon {
-//             display: flex;
-//             justify-content: center;
-//             align-items: center;
-//             flex-direction: row;
-//             margin-top: 10px;
-//             p {
-//                 font-size: 36px;
-//                 font-weight: 600;
-//                 font-family: PingFang SC;
-//                 color: #ffffff;
-//                 // margin-top: 10px;
-//                 text-align: center;
-//             }
-//             .icon-blue-rect {
-//                 display: inline-block;
-//                 margin: 0 10px;
-//                 width: 6px;
-//                 height: 6px;
-//                 background: linear-gradient(-80deg, #2a68e6 0%, #2887f2 100%);
-//                 border-radius: 3px;
-//                 vertical-align: super;
-//             }
-//         }
-//     }
-//     .nav-content {
-//         display: grid;
-//         // 左右距离30 一列3等分
-//         row-gap: 30px;
-//         column-gap: 30px;
-//         grid-template-columns: repeat(3, minmax(0, 1fr));
-//         .item {
-//             width: 480px;
-//             height: 180px;
-//             background: RGBA(32, 40, 57, 1);
-//             border-radius: 10px;
-//             border: 1px solid transparent;
-//             position: relative;
-//             cursor: pointer;
-//             display: flex;
-//             justify-content: space-between;
-//             &:hover {
-//                 border-color: #ffffff;
-//                 .left-label {
-//                     opacity: 1;
-//                 }
-//                 .item-cenText .contents {
-//                     opacity: 1;
-//                     .subtitle {
-//                         color: #0eaeff;
-//                     }
-//                 }
-//                 .right-img {
-//                     opacity: 0.7;
-//                 }
-//                 .img {
-//                     display: none;
-//                 }
-//                 .imghover {
-//                     display: block;
-//                 }
-//             }
-//             .imghover {
-//                 display: none;
-//             }
-//             .item-cenText {
-//                 margin: 43px 0 0 56px;
-//                 display: flex;
-//                 .img,
-//                 .imghover {
-//                     width: 82px;
-//                     height: 92px;
-//                 }
-//                 .contents {
-//                     margin-left: 48px;
-//                     font-size: 24px;
-//                     font-family: Microsoft YaHei;
-//                     font-weight: bold;
-//                     color: #ffffff;
-//                     opacity: 0.8;
-//                     .subtitle {
-//                         font-size: 12px;
-//                         margin-top: 10px;
-//                         color: #748ba8;
-//                         white-space: nowrap;
-//                     }
-//                 }
-//             }
-//             .right-img {
-//                 background: url('../../assets/img/nav/img6.png') no-repeat;
-//                 background-size: cover;
-//                 width: 90px;
-//                 height: 180px;
-//                 opacity: 0.2;
-//             }
-
-//             .left-label {
-//                 width: 6px;
-//                 height: 50px;
-//                 background: #ffffff;
-//                 opacity: 0.3;
-//                 border-radius: 0px 4px 4px 0px;
-//                 position: absolute;
-//                 left: 0;
-//                 top: 50%;
-//                 transform: translateY(-50%);
-//             }
-//         }
-//         .item.unOwner {
-//             opacity: 0.3;
-//             cursor: no-drop;
-//             animation-name: opacityAni2;
-//             &:hover {
-//                 border-color: transparent;
-//                 .left-label {
-//                     opacity: 0.3;
-//                 }
-//                 .item-cenText .contents {
-//                     opacity: 0.8;
-//                     .subtitle {
-//                         color: #748ba8;
-//                     }
-//                 }
-//                 .right-img {
-//                     opacity: 0.2;
-//                 }
-//                 .img {
-//                     display: block;
-//                 }
-//                 .imghover {
-//                     display: none;
-//                 }
-//             }
-//         }
-//     }
-// }
-
-// @keyframes opacityAni {
-//     0% {
-//         opacity: 0;
-//     }
-//     100% {
-//         opacity: 1;
-//     }
-// }
-
-// @keyframes opacityAni2 {
-//     0% {
-//         opacity: 0;
-//     }
-//     100% {
-//         opacity: 0.3;
-//     }
-// }
 </style>

login/src/views/NewNav/style.scss

@@ -40,6 +40,13 @@ $base_fontSize: 100;
         background-size: 100% 100%;
         z-index: 11;
     }
+    // .logoys{
+    //     background: url(../../assets/img/icon_logo2cs.png);
+    //     width: rem(36);
+    //     height: rem(36);
+    //     background-size: 100% 100%;
+    //     z-index: 11;
+    // }
     .logout {
         width: rem(49);
         height: rem(49);

operationSupport/src/components/common/Sidebar.vue

@@ -1,131 +1,117 @@
 <template>
-  <div
-    class="sidebar"
-    :style="collapse ? 'width:85px' : 'width:220px'"
-  >
-    <div
-      class="logo"
-      v-if="!collapse"
-    >
-      <img
-        style="width: rem(90); height: rem(24)"
-        src="@/assets/img/img_logo2.png"
-      />
-      <div class="title"><span class="point"></span>{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
+    <div class="sidebar" :style="collapse ? 'width:85px' : 'width:220px'">
+        <div class="logo" v-if="!collapse">
+            <!-- <img style="width: rem(90); height: rem(24)" src="@/assets/img/img_logo2.png"/> -->
+            <!-- 演示用 -->
+            <img  src="@/assets/img/icon_logo2cs.png" />
+            <div class="title"><span class="point"></span>{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
+        </div>
+        <div class="logo shrink" v-else>
+            <div class="text">{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
+        </div>
+        <div class="menu-wrap no-scrollbar">
+            <el-menu
+                class="sidebar-el-menu"
+                ref="sidebarelmenu"
+                :default-active="onRoutes"
+                :collapse="collapse"
+                background-color="#171F32"
+                text-color="#aaadba"
+                active-text-color="#0EAEFF"
+                unique-opened
+                collapse-transition
+                router
+                :style="collapse ? 'width:84px' : 'width:220px'"
+            >
+                <menu-tree :menuList="menuList" :collapse="collapse" :openArray="openArray"></menu-tree>
+            </el-menu>
+        </div>
+        <div class="footer">
+            <img
+                :class="[collapse ? 'expandhover' : 'packuphover']"
+                :src="collapse ? btnCollpaseright : btnCollpaseleft"
+                @click="collapseChage"
+            />
+        </div>
     </div>
-    <div
-      class="logo shrink"
-      v-else
-    >
-      <div class="text">{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
-    </div>
-    <div class="menu-wrap no-scrollbar">
-      <el-menu
-        class="sidebar-el-menu"
-        ref="sidebarelmenu"
-        :default-active="onRoutes"
-        :collapse="collapse"
-        background-color="#171F32"
-        text-color="#aaadba"
-        active-text-color="#0EAEFF"
-        unique-opened
-        collapse-transition
-        router
-        :style="collapse ? 'width:84px' : 'width:220px'"
-      >
-        <menu-tree
-          :menuList="menuList"
-          :collapse="collapse"
-          :openArray="openArray"
-        ></menu-tree>
-      </el-menu>
-    </div>
-    <div class="footer">
-      <img
-        :class="[collapse ? 'expandhover' : 'packuphover']"
-        :src="collapse ? btnCollpaseright : btnCollpaseleft"
-        @click="collapseChage"
-      />
-    </div>
-  </div>
 </template>
 
 <script>
 import MenuTree from './MenuTree.vue';
 export default {
-  data () {
-    return {
-      btnCollpaseright: require('@assets/img/btn_collpaseright.png'),
-      btnCollpaseleft: require('@assets/img/btn_collpaseleft.png'),
-      openList: []
-    };
-  },
-  components: {
-    MenuTree
-  },
-  computed: {
-    onRoutes () {
-      return this.$route.path;
-    },
-    collapse () {
-      return this.$store.getters['getCollapse'];
+    data() {
+        return {
+            btnCollpaseright: require('@assets/img/btn_collpaseright.png'),
+            btnCollpaseleft: require('@assets/img/btn_collpaseleft.png'),
+            openList: []
+        };
     },
-    menuList () {
-      let list = this.$store.getters['getMenuList'];
-      return list;
+    components: {
+        MenuTree
     },
-    openArray () {
-      return this.openList;
+    computed: {
+        onRoutes() {
+            return this.$route.path;
+        },
+        collapse() {
+            return this.$store.getters['getCollapse'];
+        },
+        menuList() {
+            let list = this.$store.getters['getMenuList'];
+            return list;
+        },
+        openArray() {
+            return this.openList;
+        },
+        sessSetThisDetai() {
+            let text = '';
+            if (!!window.sessionStorage.getItem('setThisDetai')) {
+                text = JSON.parse(window.sessionStorage.getItem('setThisDetai')).name;
+            }
+            return text;
+        }
     },
-    sessSetThisDetai () {
-      let text = '';
-      if (!!window.sessionStorage.getItem('setThisDetai')) {
-        text = JSON.parse(window.sessionStorage.getItem('setThisDetai')).name;
-      }
-      return text;
-    }
-  },
-  methods: {
-    // 侧边栏折叠
-    collapseChage () {
-      this.$store.dispatch('collapse', !this.collapse);
+    methods: {
+        // 侧边栏折叠
+        collapseChage() {
+            this.$store.dispatch('collapse', !this.collapse);
+        },
+        thisfindMen(arr, indexPath) {
+            let status = [];
+            arr.map((v, index) => {
+                if (v.children && v.id != '405') {
+                    v.children.map((s) => {
+                        if ('/' + s.linkPath === indexPath) {
+                            status.push(v.linkPath, s.linkPath);
+                        }
+                    });
+                } else if (v.id == '405') {
+                    for (let i = 0; i < v.children[v.children.length - 1].children.length; i++) {
+                        if ('/' + v.children[v.children.length - 1].children[i].linkPath === indexPath) {
+                            status.push(v.children[v.children.length - 1].linkPath, v.children[v.children.length - 1].children[i].linkPath);
+                        }
+                    }
+                } else {
+                    if ('/' + v.linkPath === indexPath) {
+                        status.push(v.linkPath);
+                    }
+                }
+            });
+            return status;
+        }
     },
-    thisfindMen (arr, indexPath) {
-      let status = [];
-      arr.map((v, index) => {
-        if (v.children && v.id != '405') {
-          v.children.map((s) => {
-            if ('/' + s.linkPath === indexPath) {
-              status.push(v.linkPath, s.linkPath);
-            }
-          });
-        } else if (v.id == '405') {
-          for (let i = 0; i < v.children[v.children.length - 1].children.length; i++) {
-            if ('/' + v.children[v.children.length - 1].children[i].linkPath === indexPath) {
-              status.push(v.children[v.children.length - 1].linkPath, v.children[v.children.length - 1].children[i].linkPath);
-            }
-          }
-        } else {
-          if ('/' + v.linkPath === indexPath) {
-            status.push(v.linkPath);
-          }
+    watch: {
+        $route(newValue, oldValue) {
+            this.openList = this.thisfindMen(this.$store.getters['getMenuList'], newValue.path);
         }
-      });
-      return status;
-    }
-  },
-  watch: {
-    $route (newValue, oldValue) {
-      this.openList = this.thisfindMen(this.$store.getters['getMenuList'], newValue.path);
+    },
+    created() {
+        this.openList = this.thisfindMen(this.$store.getters['getMenuList'], this.$route.path);
+    },
+    mounted() {
+        // this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0;
+        // console.log((this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0));
     }
-  },
-  created () {
-    this.openList = this.thisfindMen(this.$store.getters['getMenuList'], this.$route.path);
-  },
-  mounted () {
-    // this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0;
-    // console.log((this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0));
-  }
 };
 </script>
 
@@ -146,7 +132,9 @@ export default {
         border-bottom: 1px solid #2a335c;
         margin-bottom: rem(25);
         img {
-            width: rem(90);
+            // <!-- 演示用 -->
+            width: rem(24);
+            // width: rem(90);
             height: rem(24);
             display: inline-block;
             vertical-align: middle;