侧边栏改造

src/api/receiptConfirmation/index.js

@@ -66,47 +66,3 @@ export function updateInConfirm(data) {
         data,
     })
 }
-
-// ---------------------------------利息维护------------------------------------------
-// 查询利息维护信息列表
-export function maintainGelList(query) {
-    return request({
-        url: `${depot_intelligent}/business-fs-interest-maintain/getList`,
-        method: "get",
-        params: query || {},
-    })
-}
-
-// 利息维护详情
-export function maintainGetById(id) {
-    return request({
-        url: `${depot_intelligent}/business-fs-interest-maintain/getById/${id}`,
-        method: 'get',
-    })
-}
-
-// 利息维护新增
-export function maintainSave(data) {
-    return request({
-        url: `${depot_intelligent}/business-fs-interest-maintain/save`,
-        method: "post",
-        data: data,
-    })
-}
-
-// 利息维护修改
-export function maintainUpdate(data) {
-    return request({
-        url: `${depot_intelligent}/business-fs-interest-maintain/update`,
-        method: 'put',
-        data,
-    })
-}
-
-// 利息维护删除
-export function maintainDelete(id) {
-    return request({
-        url: `${depot_intelligent}/business-fs-interest-maintain/delete/${id}`,
-        method: 'delete',
-    })
-}

src/page/Layout/layout.vue

@@ -10,7 +10,12 @@
       <!-- <div class="project-title iconfont iconchubeiliangguanli"> 储备粮管理</div> -->
     </el-row>
     <el-row>
-      <el-col :span="4" :style="{ height: wrapHeight + 'px' }" id="nav">
+      <el-col
+        :span="4"
+        :style="{ height: wrapHeight + 'px' }"
+        id="nav"
+        class="menuList-wrap"
+      >
         <MenuList></MenuList>
       </el-col>
       <el-col :span="20" id="main" :style="{ height: wrapHeight + 'px' }">
@@ -65,7 +70,7 @@ export default {
     const isProd = process.env.NODE_ENV === "production";
     // let url;
     if (!isProd) {
-      this.url = `http://101.36.160.210:31055/crk/?k_username=${u}&k_password=${p}`;
+      this.url = `http://101.36.160.210:31055/crk/#/welcome/?username=${u}&password=${p}`;
     } else {
       this.url = `http://172.18.93.228:80/#/welcome?username=${u}&password=${p}`;
     }

src/page/Layout/menuList/menuItem.vue

@@ -6,7 +6,7 @@
       :item="firstItem"
       :index="firstIndex + ''"
       @handle-select="handleSelect"
-      />
+    />
   </div>
 </template>
 
@@ -19,36 +19,34 @@ export default {
   name: "menuItem",
   props: {
     routeList: {
-      type: Array
-    }
+      type: Array,
+    },
   },
-  components: {MyMenuItem},
+  components: { MyMenuItem },
   data() {
     return {};
   },
-  created() {
-
-  },
+  created() {},
   methods: {
     handleSelect(item) {
       sessionStorage.setItem("searchData", null);
       sessionStorage.setItem("searchDataTab1", null);
       sessionStorage.setItem("pageData", null);
       sessionStorage.setItem("resourceCode", item.resourceCode);
-    }
-  }
+    },
+  },
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .router-link-active {
   text-decoration: none;
 }
 .el-menu-item,
 .el-submenu /deep/ .el-submenu__title {
   margin: 1px 0;
-  background: url("../../../assets/wisdom_images/menuBottomLine.png") no-repeat
-    bottom;
+  /* background: url("../../../assets/wisdom_images/menuBottomLine.png") no-repeat
+    bottom; */
 }
 .iconStyle {
   color: #0357ab !important;
@@ -64,7 +62,6 @@ export default {
   padding-left: 55px !important;
 }
 .menuSecondary2 {
-
 }
 
 .menuSecondaryWrap2:before {

src/page/Layout/menuList/menuList.vue

@@ -4,13 +4,22 @@
       <el-menu
         router
         :default-active="defaultActive"
+        :default-openeds="defaultOpened"
+        :background-color="theme.menuBg"
+        :text-color="theme.menuText"
+        :unique-opened="false"
+        active-text-color="#fff"
+      >
+        <!-- <el-menu
+        router
+        :default-active="defaultActive"
         class="el-menu-vertical-demo"
         background-color="#F4F5F8"
         text-color="#797979"
         active-text-color="#fff"
         :default-openeds="defaultOpened"
         :unique-opened="true"
-      >
+      > -->
         <Menu-item :routeList="routeList"></Menu-item>
       </el-menu>
     </el-scrollbar>
@@ -20,6 +29,7 @@
 <script>
 import MenuItem from "./menuItem";
 import { mapGetters } from "vuex";
+import theme from "@/style/theme.scss";
 
 export default {
   name: "menuList",
@@ -27,37 +37,40 @@ export default {
     return {
       routeList: [],
       defaultActive: "",
-      defaultOpened: ['0'],
+      defaultOpened: ["0"],
     };
   },
   components: {
     MenuItem,
   },
   computed: {
+    theme() {
+      return theme;
+    },
     ...mapGetters({
       leftMenuList: "leftMenuList",
-      defaultActiveUrl: 'defaultActiveUrl',
+      defaultActiveUrl: "defaultActiveUrl",
     }),
-    firstLevelName () {
-      if((! this.leftMenuList) || this.leftMenuList.length <= 0) return ''
-      return this.leftMenuList[0].resourceName
-    }
+    firstLevelName() {
+      if (!this.leftMenuList || this.leftMenuList.length <= 0) return "";
+      return this.leftMenuList[0].resourceName;
+    },
   },
   watch: {
     leftMenuList(n, o) {
-      this.defaultActive = this.defaultActiveUrl
-      this.routeList = n
-      console.log('菜单修改', n, this.defaultActive)
+      this.defaultActive = this.defaultActiveUrl;
+      this.routeList = n;
+      console.log("菜单修改", n, this.defaultActive);
     },
     defaultActiveUrl(n, o) {
-      this.defaultActive = this.defaultActiveUrl
-    }
+      this.defaultActive = this.defaultActiveUrl;
+    },
   },
   created() {
     // alert("99");
     // console.log(JSON.parse(sessionStorage.getItem('leftMenuList')))
-    this.routeList = this.routes()
-    console.log('left menu list', this.routeList)
+    this.routeList = this.routes();
+    console.log("left menu list", this.routeList);
     let href = window.location.href;
     // console.log(href, "href");
     // console.log(this.$route.path, "this.$route.path");
@@ -90,14 +103,14 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style  lang="scss">
 .live-scrollbar {
   height: 100%;
 }
 
 /*   隐藏 横向滚动条*/
-.el-scrollbar /deep/ .el-scrollbar__wrap {
-  overflow-x: hidden;
+.el-scrollbar__wrap {
+  overflow-x: hidden !important;
 }
 .el-scrollbar /deep/ .is-horizontal {
   display: none;

src/page/Layout/menuList/myMenuItem.vue

@@ -36,3 +36,7 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+
+</style>

src/page/home.vue

@@ -158,7 +158,7 @@ export default {
     const isProd = process.env.NODE_ENV === "production";
     // let url;
     if (!isProd) {
-      this.url = `http://101.36.160.210:31055/crk/?k_username=${u}&k_password=${p}`;
+      this.url = `http://101.36.160.210:31055/crk/#/welcome/?username=${u}&password=${p}`;
     } else {
       this.url = `http://172.18.93.228:80/#/welcome?username=${u}&password=${p}`;
     }

src/style/common/variables.scss

@@ -26,4 +26,5 @@ $dialog-header:#006bd5!default;
 $dialog-tit-color:#ffffff!default;
 $dialog-con-color:#525357!default;
 $breadcrumb-bg:#49a2fa!default;
-$breadcrumb-color:#ffffff!default;
+// $breadcrumb-bg:#f5f9fe!default;
+$breadcrumb-color:#ffffff!default;

src/style/style.scss

@@ -11,10 +11,10 @@ body {
 }
 
 .el-button--default {
-  height: 34px;
-  padding: 0 10px;
-  border-radius: 4px;
-  vertical-align: middle;
+	height: 34px;
+	padding: 0 10px;
+	border-radius: 4px;
+	vertical-align: middle;
 }
 
 .el-table thead {
@@ -271,38 +271,41 @@ body {
 	margin-left: 136px;
 }
 
-.el-dialog{
-  top: 25px;
-  overflow: hidden;
-  height: calc(100vh - 60px);
+.el-dialog {
+	top: 25px;
+	overflow: hidden;
+	height: calc(100vh - 60px);
 }
+
 //普通弹窗样式
 .el-dialog .el-dialog__header {
 	background-color: $dialog-header;
 	padding: 20px 10px 9px;
 }
+
 .el-dialog .el-dialog__body {
-  height: calc(100% - 170px);
-  overflow: auto;
+	height: calc(100% - 170px);
+	overflow: auto;
 }
+
 /* 整个滚动条 */
 .el-dialog .el-dialog__body::-webkit-scrollbar {
-  width: 8px;
-  /* 设置滚动条的宽度 */
+	width: 8px;
+	/* 设置滚动条的宽度 */
 }
 
 /* 滚动条轨道 */
 .el-dialog .el-dialog__body::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
-  /* 设置轨道的背景颜色 */
+	background: #f1f1f1;
+	border-radius: 4px;
+	/* 设置轨道的背景颜色 */
 }
 
 /* 滚动条的滑块 */
 .el-dialog .el-dialog__body::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 4px;
-  /* 设置滑块的背景颜色 */
+	background: #888;
+	border-radius: 4px;
+	/* 设置滑块的背景颜色 */
 }
 
 .el-dialog .el-dialog__title {
@@ -419,36 +422,40 @@ body {
 }
 
 .static-table {
-  width: 100%;
-  //border: 1px solid #dddddd;
-  border-collapse: collapse;
-  td {
-    border: 1px solid #dddddd;
-    height: 51px;
-    text-align: center;
-    vertical-align: middle;
-  }
-  tr:nth-child(odd) {
-    background-color: #f9f9f9;
-  }
-  tr:nth-child(even) {
-    background-color: #ffffff;
-  }
-  tr:hover {
-    background-color: #ecf3f8;
-  }
+	width: 100%;
+	//border: 1px solid #dddddd;
+	border-collapse: collapse;
+
+	td {
+		border: 1px solid #dddddd;
+		height: 51px;
+		text-align: center;
+		vertical-align: middle;
+	}
+
+	tr:nth-child(odd) {
+		background-color: #f9f9f9;
+	}
+
+	tr:nth-child(even) {
+		background-color: #ffffff;
+	}
+
+	tr:hover {
+		background-color: #ecf3f8;
+	}
 }
 
 .store-static-table {
-  td {
-    height: 75px;
+	td {
+		height: 75px;
 
-    .el-form-item {
-      margin: 5px 5px;
-    }
-  }
+		.el-form-item {
+			margin: 5px 5px;
+		}
+	}
 
-  /deep/ .el-form-item__error {
-    width: 100%;
-  }
+	/deep/ .el-form-item__error {
+		width: 100%;
+	}
 }

src/style/theme.scss

@@ -0,0 +1,95 @@
+$blueColor: #295dac;
+$blueHoverColor: #3866ab;
+$whiteColor: #ffffff;
+
+$menuText: #ffffff;
+$menuActiveText: #295dac;
+$menuBg: rgba(0, 0, 0, 0);
+$subMenuActiveText: #ffffff;
+
+:export {
+    menuText: $menuText;
+    menuActiveText: $menuActiveText;
+    menuBg: $menuBg;
+    subMenuActiveText: $subMenuActiveText;
+    blueColor: $blueColor;
+}
+
+
+.menuList-wrap {
+    background: url(./../assets/theme/leftbg.png);
+
+    .el-menu-item.is-active {
+        background-color: $whiteColor !important;
+        color: $menuActiveText !important;
+    }
+
+    .router-link-active .el-menu-item {
+        color: $blueColor !important;
+        background-color: $whiteColor !important;
+    }
+
+    .navbar {
+        color: $whiteColor;
+    }
+
+    .el-menu-item {
+        font-size: 16px;
+    }
+
+    //menu
+    .el-submenu__title {
+        font-size: 16px !important;
+
+    }
+
+    .el-submenu__title i {
+        background: transparent !important;
+        color: $whiteColor;
+    }
+
+    .el-submenu__title i {
+        font-size: 16px;
+        margin-left: 13px !important;
+    }
+
+    .live-scrollbar .el-submenu .el-menu-item:hover {
+        background-color: $whiteColor !important;
+        color: $blueColor !important;
+    }
+
+    .router-link-active .el-menu-item .is-active {
+        background-color: $whiteColor !important;
+        color: $blueColor !important;
+    }
+
+    .router-link-active .el-menu-item:hover {
+        color: $blueColor !important;
+        background-color: $whiteColor !important;
+    }
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+        background: transparent !important;
+
+        &:hover {
+            background-color: rgba(20, 74, 156, 0.4) !important;
+        }
+    }
+
+    .is-active>.el-submenu__title {
+        background: transparent !important;
+        color: $whiteColor !important;
+
+    }
+
+    .el-submenu .is-active .is-opened {
+        color: $blueColor !important;
+        background-color: $whiteColor !important;
+    }
+
+    .el-submenu .el-menu-item:hover {
+        background-color: rgba(20, 74, 156, 0.4) !important;
+    }
+}