更换主题色 登录页ui

build/webpack.base.conf.js

@@ -31,8 +31,7 @@ module.exports = {
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       '@': resolve('src'),
-      'scss_vars': '@/styles/vars.scss',
-      'index_scss': '@/styles/index.scss',
+      'scss_global': '@/styles/global.scss',
       'api': '@/api',
       'utils': '@/utils',
       'components': '@/components',

config/dev.env.js

@@ -8,5 +8,6 @@ module.exports = merge(prodEnv, {
   Login:'"http://localhost:8080/login"',
   CHART_LINK:'"https://charttest.hzinsights.com/chartshow"',
   VUE_APP_HR_MANAGEMENT_SYSTEM:'"http://8.136.199.33:8391/login"',
-  VUE_APP_FINANCIAL_MANAGEMENT_SYSTEM:'"http://8.136.199.33:8618/login"'
+  VUE_APP_FINANCIAL_MANAGEMENT_SYSTEM:'"http://8.136.199.33:8618/login"',
+  VUE_APP_CRM_SYSTEM:'"http://8.136.199.33:7777/login"'
 });

config/index.js

@@ -31,7 +31,7 @@ module.exports = {
 	//	原始配置
     env: require('./dev.env'),
     host: 'newadmin.brilliantstart.cn', // can be overwritten by process.env.HOST
-    port: 8080,
+    port: '3030',
     autoOpenBrowser: false,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',

config/prod.env.js

@@ -5,5 +5,6 @@ module.exports = {
 	Login:'"https://hzeta.hzinsights.com/login"',
 	CHART_LINK:'"https://chartlib.hzinsights.com/chartshow"',
 	VUE_APP_HR_MANAGEMENT_SYSTEM:'"https://hr.hzinsights.com/login"',
-	VUE_APP_FINANCIAL_MANAGEMENT_SYSTEM:'"https://fms.hzinsights.com/login"'
+	VUE_APP_FINANCIAL_MANAGEMENT_SYSTEM:'"https://fms.hzinsights.com/login"',
+	VUE_APP_CRM_SYSTEM:'"https://hzcrm.hzinsights.com/login"'
 }

config/prod.test.env.js

@@ -6,5 +6,6 @@ module.exports = {
 	Login:'"http://8.136.199.33:7778/login"',
 	CHART_LINK:'"https://charttest.hzinsights.com/chartshow"',
 	VUE_APP_HR_MANAGEMENT_SYSTEM:'"http://8.136.199.33:8391/login"',
-  VUE_APP_FINANCIAL_MANAGEMENT_SYSTEM:'"http://8.136.199.33:8618/login"'
+  VUE_APP_FINANCIAL_MANAGEMENT_SYSTEM:'"http://8.136.199.33:8618/login"',
+	VUE_APP_CRM_SYSTEM:'"http://8.136.199.33:7777/login"'
 }

src/App.vue

@@ -31,7 +31,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "~scss_vars";
+@import "~scss_global";
 body {
   margin: 0px !important;
   padding: 0px;
@@ -102,13 +102,13 @@ iframe {
 }
 .editsty {
   font-size: 14px;
-  color: #409eff;
+  color: #0052D9;
   cursor: pointer;
   margin-right: 5px;
 }
 .deletesty {
   font-size: 14px;
-  color: red;
+  color: #C54322;
   cursor: pointer;
 }
 .disty {
@@ -134,7 +134,7 @@ iframe {
   // border: 1px solid #8F9BB3;
 }
 .el-pagination.is-background .el-pager li:not(.disabled).active {
-  border-color: #409eff;
+  border-color: #0052D9;
 }
 .el-pagination.is-background .btn-next,
 .el-pagination.is-background .btn-prev {
@@ -253,7 +253,7 @@ div::-webkit-scrollbar-corner {
   width: 280px !important;
 }
 .mx-calendar-content .cell.active {
-  background-color: #409eff !important;
+  background-color: #0052D9 !important;
 }
 .mx-datepicker .mx-input {
   height: 40px;
@@ -289,15 +289,6 @@ ul::-webkit-scrollbar-corner {
   background: #666;
 }
 
-/* reset 表格头 */
-.el-table th.is-leaf {
-  background: #f0f2f5 !important;
-}
-.el-table td,
-.el-table th.is-leaf {
-  border-color: #dcdfe6 !important;
-}
-
 textarea {
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

src/main.js

@@ -17,6 +17,9 @@ Vue.use(ElementUI);
 Vue.use(VueRouter);
 Vue.use(Vuex);
 
+import setting from '@/mixins/theme.js'
+Vue.prototype.$setting = setting;
+
 //Import Froala Editor
 import "froala-editor/js/plugins.pkgd.min.js";
 import "froala-editor/js/plugins/quick_insert.min.js";
@@ -56,8 +59,6 @@ import "@/utils/registryComponents";
 /*  */
 import Vue2OrgTree from "vue2-org-tree";
 import "./styles/org.scss";
-// 公共样式
-import "./styles/index.scss";
 
 Vue.use(Vue2OrgTree);
 

src/mixins/theme.js

@@ -1,189 +1,31 @@
-/*
- *    Copyright (c) 2018-2025, lengleng All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *
- * Redistributions of source code must retain the above copyright notice,
- * this list of conditions and the following disclaimer.
- * Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- * Neither the name of the pig4cloud.com developer nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- * Author: lengleng (wangiegie@gmail.com)
- */
 
-import { mapGetters } from "vuex";
-const version = require("element-ui/package.json").version; // element-ui version from node_modules
-const ORIGINAL_THEME = "#409EFF";  // default color
-export default function () {
-	return {
-		data() {
-			return {
-				themeVal: ORIGINAL_THEME
-			}
-		},
-		created() {
-			this.themeVal = this.$store.state.theme;
-		},
-		watch: {
-			themeVal(val, oldVal) {
-				//				console.log(val,oldVal);
-				this.$store.commit("SET_THEME", val);
-				this.updateTheme(val, oldVal);
-			}
-		},
-		computed: {
-			...mapGetters(["theme"])
-		},
-		methods: {
-			updateTheme(val, oldVal) {
-				if (typeof val !== "string") return;
-				const head = document.getElementsByTagName("head")[0];
-				const themeCluster = this.getThemeCluster(val.replace("#", ""));
-				const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
-				const getHandler = (variable, id) => {
-					return () => {
-						const originalCluster = this.getThemeCluster(
-							ORIGINAL_THEME.replace("#", "")
-						);
-						const newStyle = this.updateStyle(
-							this[variable],
-							originalCluster,
-							themeCluster
-						);
-
-						let styleTag = document.getElementById(id);
-						if (!styleTag) {
-							styleTag = document.createElement("style");
-							styleTag.setAttribute("id", id);
-							head.appendChild(styleTag);
-						}
-						styleTag.innerText = newStyle;
-					};
-				};
-
-				const chalkHandler = getHandler("chalk", "chalk-style");
-
-				if (!this.chalk) {
-					//					const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
-					const url = document.getElementsByTagName("head")[0].getElementsByTagName("link")[0].href;
-					this.getCSSString(url, chalkHandler, "chalk");
-				} else {
-					chalkHandler();
-				}
-
-				const link = [].slice.call(
-					document.getElementsByTagName("head")[0].getElementsByTagName("link")
-				);
-				for (let i = link.length - 3; i < link.length; i++) {
-					const style = link[i];
-					this.getCSSString(style.href, innerText => {
-						const originalCluster = this.getThemeCluster(
-							ORIGINAL_THEME.replace("#", "")
-						);
-						const newStyle = this.updateStyle(
-							innerText,
-							originalCluster,
-							themeCluster
-						);
-						let styleTag = document.getElementById(i);
-						if (!styleTag) {
-							styleTag = document.createElement("style");
-							styleTag.id = i;
-							styleTag.innerText = newStyle;
-							head.appendChild(styleTag);
-						}
-					});
-				}
-
-				const styles = [].slice
-					.call(document.querySelectorAll("style"))
-					.filter(style => {
-						const text = style.innerText;
-						return (
-							new RegExp(oldVal, "i").test(text) && !/Chalk Variables/.test(text)
-						);
-					});
-				styles.forEach(style => {
-					const {
-						innerText
-					} = style;
-					if (typeof innerText !== "string") return;
-					style.innerText = this.updateStyle(
-						innerText,
-						originalCluster,
-						themeCluster
-					);
-				});
-			},
-			updateStyle(style, oldCluster, newCluster) {
-				let newStyle = style;
-				oldCluster.forEach((color, index) => {
-					newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]);
-				});
-				return newStyle;
-			},
-			getCSSString(url, callback, variable) {
-				const xhr = new XMLHttpRequest();
-				xhr.onreadystatechange = () => {
-					if (xhr.readyState === 4 && xhr.status === 200) {
-						if (variable) {
-							this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
-						}
-						callback(xhr.responseText);
-					}
-				};
-				xhr.open("GET", url);
-				xhr.send();
-			},
-			getThemeCluster(theme) {
-				const tintColor = (color, tint) => {
-					let red = parseInt(color.slice(0, 2), 16);
-					let green = parseInt(color.slice(2, 4), 16);
-					let blue = parseInt(color.slice(4, 6), 16);
-
-					if (tint === 0) {
-						// when primary color is in its rgb space
-						return [red, green, blue].join(",");
-					} else {
-						red += Math.round(tint * (255 - red));
-						green += Math.round(tint * (255 - green));
-						blue += Math.round(tint * (255 - blue));
-
-						red = red.toString(16);
-						green = green.toString(16);
-						blue = blue.toString(16);
-
-						return `#${red}${green}${blue}`;
-					}
-				};
-
-				const shadeColor = (color, shade) => {
-					let red = parseInt(color.slice(0, 2), 16);
-					let green = parseInt(color.slice(2, 4), 16);
-					let blue = parseInt(color.slice(4, 6), 16);
-
-					red = Math.round((1 - shade) * red);
-					green = Math.round((1 - shade) * green);
-					blue = Math.round((1 - shade) * blue);
-
-					red = red.toString(16);
-					green = green.toString(16);
-					blue = blue.toString(16);
-
-					return `#${red}${green}${blue}`;
-				};
-
-				const clusters = [theme];
-				for (let i = 0; i <= 9; i++) {
-					clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
-				}
-				clusters.push(shadeColor(theme, 0.1));
-				return clusters;
-			}
-		}
-	}
+export default {
+	name: '后台管理系统',
+  theme_color: '#0052D9',
+  menu_bg:'#fff',//菜单栏背景色
+  //跳转外部系统
+  linkSystems: [
+    {
+      name: '财务系统',
+      path: process.env.VUE_APP_FINANCIAL_MANAGEMENT_SYSTEM,
+      key: 'fd',
+      icon: require('@/assets/img/home/fd_logo.png')
+    },
+    {
+      name: 'HR系统',
+      key: 'hr',
+      path: process.env.VUE_APP_HR_MANAGEMENT_SYSTEM,
+      icon: require('@/assets/img/home/hr_logo.png')
+    },
+    // {
+    //   name: 'CRM',
+    //   key: 'crm',
+    //   path: process.env.VUE_APP_CRM_SYSTEM,
+    //   icon: require('@/assets/img/home/logo_mini.png')
+    // },
+  ],
+  login_bg: require('@/assets/img/login_bg.png'),//登录页的大图
+  login_logo: require('@/assets/img/login_logo.png')
+  // g_logo: require('@/assets/img/home/logo.png'), //主页菜单栏logo
+  // g_mini_logo: require('@/assets/img/home/logo_mini.png'), //主页菜单栏mini-logo
 }

src/styles/element-ui.scss

@@ -0,0 +1,61 @@
+
+///* 改变主题色变量 */
+$color-primary:#0052D9;
+$--color-primary: $color-primary;
+
+$danger-btn-color: #F25454;
+// @import "~element-ui/lib/theme-chalk/index.css";
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import "~element-ui/packages/theme-chalk/src/index";
+
+
+.el-dialog__close.el-icon.el-icon-close{ color:#fff; }
+.el-dialog__close.el-icon.el-icon-close:hover{ color:#fff; }
+.color_primary{color:$color-primary};
+.el-submenu.is-opened>ul{ overflow:hidden; }
+.el-submenu.is-opened>ul li{ background:#fff; }
+.el-submenu__title>span{ font:14px "微软雅黑"; letter-spacing:1px; }
+.el-submenu__title>i:nth-of-type(1){ color:#1F2E4D; font-size:14px; }
+.el-submenu__title>i:nth-of-type(2){ line-height:16px; z-index:10; right:0; left:100px; }
+.el-submenu.item .el-submenu__title{ text-align:left; }
+.el-submenu .el-menu-item{ padding:0 70px 0 45px !important; }
+.menu-collapsed .el-submenu .el-menu-item{ padding:0 85px 0 30px !important; }
+.box-card{ margin-bottom:20px !important; padding-bottom:30px; }
+.el-dialog .el-input{ width:60%; }
+.el-dialog .el-select>.el-input{ width:100%; }
+.el-dialog .el-dialog__headerbtn{ font-size:24px; padding:10px; top:3px; right:10px; }  // 右上角X
+.el-dialog .el-dialog__header{ background:$color-primary; color:#fff; padding:15px 0 15px 25px; text-align:left; }
+.el-dialog .el-dialog__header span{ font:15px "微软雅黑"; }
+.el-dialog .el-dialog__title{ color:#fff; }
+.el-dialog .el-dialog__body{ padding-bottom:5px !important; }
+.el-checkbox__input.is-disabled input[type=checkbox]{ border-radius:100% !important; background:red; }
+.el-carousel__container{ height:100% !important; }
+.el-input-group__prepend{ width:40px; height:45px; padding:0 13px !important; box-sizing:border-box; }
+.el-input.el-input-group.el-input-group--prepend input{ width:240px; height:45px; box-sizing:border-box; }
+.editwordSty{ color:$color-primary; margin-right:10px; cursor:pointer; }
+.theme-picker-dropdown .el-color-dropdown__link-btn{ display:none; }  //颜色选择器清除按钮消失
+.el-upload-dragger{ width:360px; height:150px; margin-left:20px; }  //拖拽上传样式
+.rolemanage .el-checkbox{ margin-left:0 !important; margin-right:20px !important; }
+.fright{ float:right; margin-left:20px; }
+.el-select-dropdown__wrap{ max-height:574px; }
+.el-message-box__header .el-message-box__title{ color:$color-primary !important; } 
+
+.el-table  {
+  tr:nth-of-type(2n-1){
+    background-color: #F2F6FA;
+  }
+  tr:nth-of-type(2n) {
+    background-color: #fff;
+  }
+}
+
+.el-table th.is-leaf {
+  background: #fff !important;
+  color: #333;
+}
+.el-table td,
+.el-table th.is-leaf {
+  border-color: #DCDFE6 !important;
+}

src/styles/global.scss

@@ -0,0 +1,77 @@
+@import "./element-ui.scss";
+
+a[href="https://froala.com/wysiwyg-editor"], a[href="https://www.froala.com/wysiwyg-editor?k=u"]{ border:1px solid #eaeaea; background:#fff !important; color:#ccc !important; }
+
+body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea,th,td { margin:0; padding:0; }
+body{ font-size:12px; font-style:normal; font-family:"\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif,; }
+html{ overflow:auto; min-width:1000px; }
+small{ font-size:12px; }
+h1{ font-size:18px; }
+h2{ font-size:16px; }
+h3{ font-size:14px; }
+h4,h5,h6{ font-size:100%; }
+ul,ol{ list-style:none; }
+a{ text-decoration:none; background-color:transparent; }
+a:hover,a:active{ outline-width:0; text-decoration:none; }
+table{ border-collapse:collapse; border-spacing:0; }
+// hr{ border:0; height:1px; }
+img{ border-style:none; }
+img:not([src]){ display:none; }
+svg:not(:root){ overflow:hidden; }
+html{ -webkit-touch-callout:none; -webkit-text-size-adjust:100%; }
+input,textarea,button,a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }
+article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{ display:block; }
+audio,canvas,progress,video{ display:inline-block; }
+audio:not([controls]),video:not([controls]){ display:none; height:0; }
+progress{ vertical-align:baseline; }
+mark{ background-color:#ff0; color:#000; }
+sub,sup{ position:relative; font-size:75%; line-height:0; vertical-align:baseline; }
+sub{ bottom:-0.25em; }
+sup{ top:-0.5em; }
+button,input,select,textarea{ font-size:100%; outline:0; }
+button,input{ overflow:visible; }
+button,select{ text-transform:none; }
+textarea{ overflow:auto; }
+button,html[type="button"],[type="reset"],[type="submit"]{ -webkit-appearance:button; }
+button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{ border-style:none; padding:0; }
+button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{ outline:1px dotted ButtonText; }
+[type="checkbox"],[type="radio"]{ box-sizing:border-box; padding:0; }
+[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{ height:auto; }
+[type="search"]{ -webkit-appearance:textfield; outline-offset:-2px; }
+[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; }
+::-webkit-input-placeholder{ color:inherit; opacity:.54; }
+::-webkit-file-upload-button{ -webkit-appearance:button; font:inherit; }
+.clear:after{ display:block; height:0; content:""; clear:both; }
+
+.highcharts-range-selector-group{ display:none; }
+.highcharts-legend-item tspan{ font-size:14px; font-weight:400; color:#960000; }
+
+.highcharts-legend-item tspan{ font-size:14px; font-weight:400; color:#960000; }
+
+// 英文图表标识
+.chartEn-mark{
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-right: 25px solid transparent;
+  border-top: 21px solid $color-primary;
+  border-bottom: 21px solid transparent;
+  border-left: 25px solid $color-primary;
+  color: white;
+  height: 0;
+  width: 0;
+  white-space: nowrap;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  font-size: 16px;
+}
+
+.ficc-package {
+  display: inline-block;
+  font-size: 12px;
+  padding:0 5px;
+  border-radius: 5px;
+  color: #3994fb;
+  background-color: #dcecfc;
+}

src/styles/index.scss

@@ -1,31 +0,0 @@
-$color_red: #FF4B0C;
-$color_green:#67C23A;
-
-
-// 英文图表标识
-.chartEn-mark{
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-right: 25px solid transparent;
-  border-top: 21px solid #409EFF;
-  border-bottom: 21px solid transparent;
-  border-left: 25px solid #409EFF;
-  color: white;
-  height: 0;
-  width: 0;
-  white-space: nowrap;
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-end;
-  font-size: 16px;
-}
-
-.ficc-package {
-  display: inline-block;
-  font-size: 12px;
-  padding:0 5px;
-  border-radius: 5px;
-  color: #3994fb;
-  background-color: #dcecfc;
-}

src/styles/theme-vars.scss

@@ -0,0 +1,7 @@
+//变量
+
+//菜单栏背景色
+$menu_bg: #fff;
+//主题色
+$theme-color:#0052D9;
+

src/styles/vars.scss

@@ -1,96 +0,0 @@
-///* 改变主题色变量 */
-$color-primary:#0052D9;
-$--color-primary: $color-primary;
-
-.el-dialog__close.el-icon.el-icon-close{ color:#fff; }
-.el-dialog__close.el-icon.el-icon-close:hover{ color:#fff; }
-#positionContent .avatar {width: 100px;height: 100px;}
-.color_primary{color:$color-primary};
-.goods_box .el-card__body{padding: 10px;}
-.goods_boxs .el-card__body{padding: 10px 0;}
-.has-gutter th{ background:#f9f9f9 !important; }
-.el-submenu.is-opened>ul{ overflow:hidden; }
-.el-submenu.is-opened>ul li{ background:#fff; }
-.el-submenu__title>span{ font:14px "微软雅黑"; letter-spacing:1px; }
-.el-submenu__title>i:nth-of-type(1){ color:#1F2E4D; font-size:14px; }
-.el-submenu__title>i:nth-of-type(2){ line-height:16px; z-index:10; right:0; left:100px; }
-.el-submenu.item .el-submenu__title{ text-align:left; }
-.el-submenu .el-menu-item{ padding:0 70px 0 45px !important; }
-.menu-collapsed .el-submenu .el-menu-item{ padding:0 85px 0 30px !important; }
-.box-card{ margin-bottom:20px !important; padding-bottom:30px; }
-.el-dialog .el-input{ width:60%; }
-.el-dialog .el-select>.el-input{ width:100%; }
-.el-dialog .el-dialog__headerbtn{ font-size:24px; padding:10px; top:3px; right:10px; }  // 右上角X
-.el-dialog .el-dialog__header{ background:$color-primary; color:#fff; padding:15px 0 15px 25px; text-align:left; }
-.el-dialog .el-dialog__header span{ font:15px "微软雅黑"; }
-.el-dialog .el-dialog__title{ color:#fff; }
-.el-dialog .el-dialog__body{ padding-bottom:5px !important; }
-.el-checkbox__input.is-disabled input[type=checkbox]{ border-radius:100% !important; background:red; }
-.el-carousel__container{ height:100% !important; }
-.el-input-group__prepend{ width:40px; height:45px; padding:0 13px !important; box-sizing:border-box; }
-.el-input.el-input-group.el-input-group--prepend input{ width:240px; height:45px; box-sizing:border-box; }
-.editwordSty{ color:$color-primary; margin-right:10px; cursor:pointer; }
-.theme-picker-dropdown .el-color-dropdown__link-btn{ display:none; }  //颜色选择器清除按钮消失
-.el-upload-dragger{ width:360px; height:150px; margin-left:20px; }  //拖拽上传样式
-.rolemanage .el-checkbox{ margin-left:0 !important; margin-right:20px !important; }
-.zdy{ display:block !important; }
-.fright{ float:right; margin-left:20px; }
-.zdyDialog .el-dialog__header{ display:none; }
-.el-select-dropdown__wrap{ max-height:574px; }
-.el-message-box__header .el-message-box__title{ color:$color-primary !important; }  //确认弹窗
-.confirmButton{ margin-left:-80px !important; }
-.cancelButton{ margin-right:-80px !important; }
-// a[href="https://froala.com/wysiwyg-editor"], a[href="https://www.froala.com/wysiwyg-editor?k=u"]{ display:none !important; position:absolute; top:-99999999px; }
-// .fr-wrapper > div[style*="z-index: 9999"] {position: absolute;top: -10000px;opacity: 0;}
-// .fr-element.fr-view {position: absolute;top: 0;}
-// .fr-placeholder{margin-top: 0 !important;}
-a[href="https://froala.com/wysiwyg-editor"], a[href="https://www.froala.com/wysiwyg-editor?k=u"]{ border:1px solid #eaeaea; background:#fff !important; color:#ccc !important; }
-@charset "utf-8";
-body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea,th,td { margin:0; padding:0; }
-body{ font-size:12px; font-style:normal; font-family:"\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif,; }
-html{ overflow:auto; min-width:1000px; }
-small{ font-size:12px; }
-h1{ font-size:18px; }
-h2{ font-size:16px; }
-h3{ font-size:14px; }
-h4,h5,h6{ font-size:100%; }
-ul,ol{ list-style:none; }
-a{ text-decoration:none; background-color:transparent; }
-a:hover,a:active{ outline-width:0; text-decoration:none; }
-table{ border-collapse:collapse; border-spacing:0; }
-// hr{ border:0; height:1px; }
-img{ border-style:none; }
-img:not([src]){ display:none; }
-svg:not(:root){ overflow:hidden; }
-html{ -webkit-touch-callout:none; -webkit-text-size-adjust:100%; }
-input,textarea,button,a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }
-article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{ display:block; }
-audio,canvas,progress,video{ display:inline-block; }
-audio:not([controls]),video:not([controls]){ display:none; height:0; }
-progress{ vertical-align:baseline; }
-mark{ background-color:#ff0; color:#000; }
-sub,sup{ position:relative; font-size:75%; line-height:0; vertical-align:baseline; }
-sub{ bottom:-0.25em; }
-sup{ top:-0.5em; }
-button,input,select,textarea{ font-size:100%; outline:0; }
-button,input{ overflow:visible; }
-button,select{ text-transform:none; }
-textarea{ overflow:auto; }
-button,html[type="button"],[type="reset"],[type="submit"]{ -webkit-appearance:button; }
-button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{ border-style:none; padding:0; }
-button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{ outline:1px dotted ButtonText; }
-[type="checkbox"],[type="radio"]{ box-sizing:border-box; padding:0; }
-[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{ height:auto; }
-[type="search"]{ -webkit-appearance:textfield; outline-offset:-2px; }
-[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; }
-::-webkit-input-placeholder{ color:inherit; opacity:.54; }
-::-webkit-file-upload-button{ -webkit-appearance:button; font:inherit; }
-.clear:after{ display:block; height:0; content:""; clear:both; }
-
-.highcharts-range-selector-group{ display:none; }
-// .highcharts-credits{ display:none; }
-// .highcharts-axis-title{ display:none; }
-.highcharts-legend-item tspan{ font-size:14px; font-weight:400; color:#960000; }
-// highcharts-legend-item highcharts-spline-series highcharts-color-undefined highcharts-series-2
-
-@import "~element-ui/lib/theme-chalk/index.css";

src/views/Home.vue

@@ -23,10 +23,10 @@
           <aside class="menu-expanded">
             <!--导航菜单-->
             <el-menu
-              background-color="#323A58"
-              text-color="#fff"
+              :background-color="$setting.menu_bg"
+              text-color="#333"
               :collapse-transition="false"
-              active-text-color="#FDB863"
+              :active-text-color="$setting.theme_color"
               :default-active="$route.path.replace('/', '')"
               :collapse="isCollapse"
               theme="light"
@@ -36,38 +36,19 @@
               @select="handleselect"
               ref="expandmenu"
             >
-              <!-- <el-menu-item
-              v-if="Role!=='rai_researcher' &&
-              Role!=='ficc_researcher' &&
-              Role!=='researcher' &&
-              Role!=='compliance'&&
-              Role!=='special_researcher'"
-              :class="'/dashboard'==activePath?'active': ''"
-              path="dashboard" 
-              key="dashboard" 
-              index="dashboard"
-              :style="!isCollapse?'padding-left:0':''">
-              <a href="/dashboard" :style="`display: block;color:${'dashboard'===activePath ? '#FDB863 ' : '#fff'}`" @click="(e) => e.preventDefault() ">
-
-                <img src="~@/assets/img/home/work_ico.png" style="width:20px;height:20px;margin-right:20px;"/>
-                <span
-                    style="display:inline-block; width:96px; text-align:left; box-sizing:border-box;font-size:15px;"
-                >工作台</span>
-              </a>
-              </el-menu-item> -->
-              <template v-for="(item, index) in navlists" v-show="!item.hidden">
+              <template v-for="(item, index) in navlists">
                 <el-menu-item
                   :path="item.level_path"
                   :index="item.level_path"
                   :key="item.level_path"
                   :style="!isCollapse ? 'text-align:left' : ''"
-                  v-if="item.IsLevel === 1"
+                  v-if="item.IsLevel === 1&&!item.hidden"
                 >
                   <a
                     :href="`/${item.level_path}`"
                     class="el-level-path"
                     :style="`display: block;color:${
-                      item.level_path === activePath ? '#FDB863 ' : '#fff'
+                      item.level_path === activePath ? $setting.theme_color : '#666'
                     }`"
                     @click="(e) => e.preventDefault()"
                   >
@@ -92,7 +73,7 @@
                   </a>
                 </el-menu-item>
 
-                <el-submenu v-else :index="index + ''" :key="index">
+                <el-submenu v-else-if="item.IsLevel!==1&&!item.hidden" :index="index + ''" :key="index">
                   <template slot="title">
                     <img
                       :src="item.icon_path"
@@ -123,7 +104,7 @@
                     <a
                       :href="`/${child.path}`"
                       :style="`display: block;color:${
-                        child.path === activePath ? '#FDB863 ' : '#fff'
+                        child.path === activePath ? $setting.theme_color : '#666'
                       }`"
                       @click="(e) => e.preventDefault()"
                     >
@@ -144,11 +125,10 @@
             <div class="main_left_section" v-if="isHaveAside">
               <!-- 折叠按钮 -->
               <div class="coll_btn" @click="collapseHandle">
-                <!-- <img src="~@/assets/img/home/slide_up.png" alt="" class="coll_ico" v-if="isCollapse"> -->
                 <i class="el-icon-s-unfold coll_ico" v-if="isCollapse"></i>
                 <i class="el-icon-s-fold coll_ico" v-else></i>
-                <!-- <img src="~@/assets/img/home/slide_down.png" alt="" class="coll_ico" v-else> -->
               </div>
+              
               <!-- 面包屑 -->
               <el-breadcrumb separator="/" class="breadcrumb-inner">
                 <el-breadcrumb-item
@@ -158,7 +138,7 @@
                   <span
                     v-if="item.meta.pathFrom"
                     @click.stop="handleClickBread(item)"
-                    style="cursor: pointer; color: #4099ef; fontsize: 16px"
+                    :style="`cursor: pointer; color: ${$setting.theme_color}`"
                   >
                     <template v-if="item.meta.pathFrom == 'pickList'">
                       {{ RoleType == "ficc" ? "权益客户" : "ficc客户" }}
@@ -188,7 +168,7 @@
                   >
                   <span
                     v-if="item.parent"
-                    style="cursor: pointer; color: #4099ef; fontsize: 16px"
+                    :style="`cursor: pointer; color: ${$setting.theme_color}`"
                     @click.stop="routeClick(item)"
                   >
                     <template v-if="item.path == '/pickList'">
@@ -205,7 +185,7 @@
                       {{ item.name }}
                     </template>
                   </span>
-                  <span v-else style="fontsize: 16px">{{ item.name }}</span>
+                  <span v-else>{{ item.name }}</span>
                 </el-breadcrumb-item>
               </el-breadcrumb>
             </div>
@@ -216,7 +196,6 @@
               class="left_section_logo"
               v-else
             />
-
           </div>
 
           <div class="right_section">
@@ -240,21 +219,23 @@
                   v-if="isShowRole"
                   >帮助文档</el-button
                 >
+
+                <el-button
+                  @click="linkToOtherMS(item.path)"
+                  v-for="item in linkSystems"
+                  :key="item.path"
+                  type="text"
+                  style="margin-left: 20px;"
+                >
+                  <img :src="item.icon" v-if="item.icon" width="20" height="20" style="vertical-align: middle;">
+                  {{item.name}}
+                </el-button>
               </div>
-              <span
-                style="color: #409eff; cursor: pointer"
-                @click="linkToOtherMS('VUE_APP_HR_MANAGEMENT_SYSTEM')"
-                >HR系统</span
-              >
-              <span
-                style="color: #409eff; cursor: pointer"
-                @click="linkToOtherMS('VUE_APP_FINANCIAL_MANAGEMENT_SYSTEM')"
-                >财务报表系统</span
-              >
-              <el-dropdown trigger="click">
+
+              <el-dropdown trigger="click" style="width:130px;">
                 <span class="el-dropdown-link userinfo-inner">
                   <img src="~@/assets/img/set_m/user_img.png" />
-                  {{ sysUserName + "，欢迎您！" }}
+                  {{ sysUserName }}
                 </span>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item divided @click.native="resetpwd"
@@ -300,21 +281,28 @@
       :isShow.sync="isFeedbackDialog"
       :data="roadshowFeedbackList"
     /> -->
+    
   </div>
 </template>
 
 <script>
 import {
   checkPwd,
+  getnavlist,
+  positionlist,
   departInterence,
   customInterence,
   roadshowInterence,
 } from "api/api.js";
 import PwdDlg from "@/components/pwdDlg.vue";
+// import feedbackDialog from "@/components/todo/roadShowFeedbackDia.vue";
+import questionMsgDia from "@/components/questionMsgDia.vue";
 import EventBus from "@/api/bus.js";
 export default {
   components: {
     PwdDlg,
+    // feedbackDialog,
+    questionMsgDia,
   },
   inject: ["reload"],
   filters: {
@@ -330,20 +318,20 @@ export default {
       } else {
         this.activePath = newval.replace("/", "");
       }
-      // 用印审批页面 头部需要加上公告
-      if (newval === "/sealApprovalList") {
-        this.isShowApprovalNotice = true;
-        console.log(this.isShowApprovalNotice);
-      } else {
-        this.isShowApprovalNotice = false;
-        console.log(this.isShowApprovalNotice);
-      }
       this.sysUserName = localStorage.getItem("userName") || "";
       this.Role = localStorage.getItem("Role") || "";
       this.RoleType = localStorage.getItem("RoleType") || "";
     },
   },
   computed: {
+    done() {
+      //今日待办是否处理完
+      if (!this.todayList) {
+        return false;
+      }
+      // 之前是通过判断列表中是否都有说明,现需要判断列表中都要添加或编辑
+      return this.todayList.every((item) => item.isEdited);
+    },
     // Role() {
     //   let role = localStorage.getItem("Role") || "";
     //   return role;
@@ -375,16 +363,37 @@ export default {
   },
   data() {
     return {
+      showTodayRemark: {
+        CompanyId: 0,
+        ProductId: 0,
+        remark: "",
+        toDoRemark: "",
+        show: false,
+        index: 0,
+        new: false, //是否为新增
+        isGiveUp: false, //是否不继续跟进
+      }, //显示填写待办备注弹窗
 
       isCollapse: false, //侧边栏折叠
       breadcrumbFixed: false, //吸顶盒固定
+
       Role: "", //角色名称
       RoleType: "", //角色类型
       sysUserName: "", //登录系统用户名
       sysUserAvatar: "", //登录系统用户头像
-
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
       navlists: [],
       activePath: "",
+
       noticeList: [], //消息提醒列表
       isShowNotice: false, //显示提示红点
       currentNoticeList: [], //当前显示的消息提醒列表
@@ -419,6 +428,9 @@ export default {
         供应分析: "Sup",
         商品价格曲线: "Crv",
       },
+
+      //链接系统
+      linkSystems: this.$setting.linkSystems,
     };
   },
   created() {
@@ -452,6 +464,169 @@ export default {
         this.dialogVisiblePwd = res.Data;
       }
     },
+    // 点击导航 打开今日待办
+    // handleShowSallerTodayList() {
+    //   this.getSellerTodayList("click");
+    // },
+
+    // 点击完成 批量提交备注
+    handleTodayFinished() {
+      let arr = this.todayList.map((item) => {
+        return customInterence.sellerTodayListRemark({
+          CompanyId: item.CompanyId,
+          ProductId: item.ProductId,
+          Remark: item.RenewalReason,
+          Renew: item.isGiveUp ? 1 : 0,
+          RenewalTodo: item.RenewalTodo,
+        });
+      });
+      Promise.all(arr)
+        .then((res) => {
+          this.show = false;
+          this.getSellerFeedBackList();
+        })
+        .catch((error) => {
+          this.$message.waring("部分提交失败请重试");
+          this.getSellerTodayList();
+        });
+    },
+
+    //提交备注
+    async handleSubmitTodayRemark() {
+      if (!this.showTodayRemark.remark && !this.showTodayRemark.isGiveUp) {
+        this.$message.warning("请填写最新情况");
+        return;
+      }
+      if (!this.showTodayRemark.toDoRemark && !this.showTodayRemark.isGiveUp) {
+        this.$message.warning("请填写To Do事项");
+        return;
+      }
+      // 如果选中不再跟进,需要在备注中添加额外内容
+      const addRemark = this.showTodayRemark.isGiveUp
+        ? this.showTodayRemark.remark
+          ? "。客户无续约意向，不再跟进（转为冻结客户）"
+          : "客户无续约意向，不再跟进（转为冻结客户）"
+        : "";
+      // 自动开大的点击完成时批量更新
+      if (this.todayListOpen === "auto") {
+        this.todayList[this.showTodayRemark.index].RenewalReason =
+          this.showTodayRemark.remark + addRemark;
+        this.todayList[this.showTodayRemark.index].RenewalTodo =
+          this.showTodayRemark.toDoRemark;
+        this.todayList[this.showTodayRemark.index].isGiveUp =
+          this.showTodayRemark.isGiveUp;
+        this.$set(this.todayList[this.showTodayRemark.index], "isEdited", true);
+        this.handleTodayRemarkClose();
+      } else {
+        const res = await customInterence.sellerTodayListRemark({
+          CompanyId: this.showTodayRemark.CompanyId,
+          ProductId: this.showTodayRemark.ProductId,
+          Remark: this.showTodayRemark.remark + addRemark,
+          Renew: this.showTodayRemark.isGiveUp ? 1 : 0,
+          RenewalTodo: this.showTodayRemark.toDoRemark,
+        });
+        if (res.Ret === 200) {
+          this.todayList[this.showTodayRemark.index].RenewalReason =
+            this.showTodayRemark.remark;
+          this.todayList[this.showTodayRemark.index].RenewalTodo =
+            this.showTodayRemark.toDoRemark;
+          this.handleTodayRemarkClose();
+          this.getSellerTodayList();
+        }
+      }
+    },
+
+    handleTodayRemarkClose() {
+      this.showTodayRemark = {
+        remark: "",
+        toDoRemark: "",
+        show: false,
+        index: 0,
+        new: false,
+        ProductId: 0,
+        CompanyId: 0,
+        isGiveUp: false,
+      };
+    },
+
+    //显示填写今日待办备注
+    handleShowEditTodayRemark(e) {
+      this.showTodayRemark.remark = e.row.RenewalReason;
+      this.showTodayRemark.toDoRemark = e.row.RenewalTodo;
+      this.showTodayRemark.CompanyId = e.row.CompanyId;
+      this.showTodayRemark.ProductId = e.row.ProductId;
+      if (e.row.RenewalReason && this.todayListOpen !== "auto") {
+        // 如果有说明且不是自动弹出,则为编辑
+        this.showTodayRemark.new = false;
+      } else {
+        this.showTodayRemark.new = true;
+      }
+      this.showTodayRemark.show = true;
+      this.showTodayRemark.index = e.$index;
+    },
+
+    //获取销售今日待办
+    async getSellerTodayList(type) {
+      this.todayListOpen = type;
+      let ReasonStatus = -1;
+      if (type === "auto") {
+        ReasonStatus = -1;
+      } else {
+        ReasonStatus = 0;
+      }
+      const res = await customInterence.sellerTodayList({
+        ReasonStatus: ReasonStatus,
+        PageSize: 10000,
+        CurrentIndex: 1,
+      });
+      if (res.Ret === 200) {
+        if (type === "auto" && res.Data.Paging.Totals > 0) {
+          // 自动弹出清除上次说明
+          res.Data.List &&
+            res.Data.List.forEach((item) => (item.RenewalReason = ""));
+        }
+        if (
+          (type === "auto" && res.Data.Paging.Totals > 0) ||
+          type !== "auto"
+        ) {
+          this.show = true;
+        } else {
+          this.getSellerFeedBackList();
+        }
+
+        this.$nextTick(() => {
+          this.todayList = res.Data.List;
+        });
+      }
+    },
+
+    //获取销售代办中的历史记录
+    async getSellerTodayHistoryList(item) {
+      const res = await customInterence.sellerTodayHistoryList({
+        CompanyId: Number(item.CompanyId),
+        ProductId: Number(item.ProductId),
+      });
+      if (res.Ret === 200) {
+        this.showTodayHistoryList = true;
+        this.$nextTick(() => {
+          this.todayHistoryList = res.Data || [];
+        });
+      }
+    },
+
+    /* 获取销售路演待反馈 */
+    getSellerFeedBackList() {
+      roadshowInterence.toFeedbacklist().then((res) => {
+        if (res.Ret !== 200) return;
+
+        const { Data } = res;
+
+        if (!Data || !Data.length) return;
+
+        this.isFeedbackDialog = true;
+        this.roadshowFeedbackList = Data;
+      });
+    },
 
     // 操作指南的跳转
     toOperation(url) {
@@ -468,10 +643,8 @@ export default {
        * VUE_APP_HR_MANAGEMENT_SYSTEM -- HR管理系统
        * VUE_APP_FINANCIAL_MANAGEMENT_SYSTEM -- 财务管理系统
        */
-      console.log(process.env)
-      let href = process.env[key];
-      console.log(href);
-      window.open(href, "_blank");
+      // let href = process.env[key];
+      window.open(key, "_blank");
     },
     // 切换通知消息类型
     handleNoticeTypeChange(e) {
@@ -512,7 +685,152 @@ export default {
         }
       });
     },
-    
+    /* 待办事项列表 */
+    getNotice() {
+      customInterence.noticeList().then((res) => {
+        if (res.Ret === 200) {
+          res.Data.Company.List &&
+            res.Data.Company.List.forEach((item) => {
+              item.CreateTime = item.CreateTime.replace(/-/g, ".");
+            });
+          res.Data.Contract.List &&
+            res.Data.Contract.List.forEach((item) => {
+              item.CreateTime = item.CreateTime.replace(/-/g, ".");
+            });
+          res.Data.Seal.List &&
+            res.Data.Seal.List.forEach((item) => {
+              item.CreateTime = item.CreateTime.replace(/-/g, ".");
+            });
+          res.Data.EdbReplace.List &&
+            res.Data.EdbReplace.List.forEach(
+              (item) => (item.CreateTime = item.CreateTime.replace(/-/g, "."))
+            );
+          res.Data.BusinessTrip.List &&
+            res.Data.BusinessTrip.List.forEach(
+              (item) => (item.CreateTime = item.CreateTime.replace(/-/g, "."))
+            );
+
+          this.noticeList = res.Data;
+          this.noticeCount =
+            this.Role === "admin"
+              ? res.Data.EdbReplace.Total + res.Data.BusinessTrip.Total
+              : res.Data.Company.Total +
+                res.Data.Contract.Total +
+                res.Data.Seal.Total +
+                res.Data.EdbReplace.Total +
+                res.Data.BusinessTrip.Total;
+
+          this.noticeType = this.Role === "admin" ? "更新" : "客户";
+          // 默认显示客户
+          this.currentNoticeList =
+            this.Role === "admin"
+              ? res.Data.EdbReplace.List
+              : res.Data.Company.List;
+
+          // 检查是否有未读的
+          if (this.Role != "admin") {
+            this.flag1 = res.Data.Company.List.some((item) => {
+              return item.MessageStatus === 0;
+            });
+            this.flag2 = res.Data.Contract.List.some((item) => {
+              return item.MessageStatus === 0;
+            });
+            this.flag3 = res.Data.Seal.List.some((item) => {
+              return item.MessageStatus === 0;
+            });
+          }
+
+          this.flag5 = res.Data.ETATrial.List.some((item) => {
+            return item.MessageStatus === 0;
+          });
+          this.flag6 = res.Data.BusinessTrip.List.some((item) => {
+            return item.MessageStatus === 0;
+          });
+
+        }
+      });
+    },
+    /* 点击消息列表 跳转审批列表 */
+    noticeClick(item) {
+      customInterence
+        .readNotice({
+          Id: Number(item.Id),
+        })
+        .then((res) => {
+          if (res.Ret === 200) {
+            item.MessageStatus = 1;
+            if (this.noticeType === "客户") {
+              if (this.$route.path != "/approvalList") {
+                this.$router.push({
+                  path: "/approvalList",
+                });
+              } else {
+                window.location.reload();
+              }
+            } else if (this.noticeType === "合同") {
+              let Role = localStorage.getItem("Role");
+              // 主管跳转合同审批列表
+              if (Role === "ficc_admin" || Role === "rai_admin") {
+                if (this.$route.path != "/contractapprovallist") {
+                  this.$router.push({
+                    path: "/contractapprovallist",
+                  });
+                } else {
+                  window.location.reload();
+                }
+              } else {
+                if (this.$route.path != "/contractmanagelist") {
+                  this.$router.push({
+                    path: "/contractmanagelist",
+                  });
+                } else {
+                  window.location.reload();
+                }
+              }
+            } else if (this.noticeType === "用印") {
+              // 用印
+              if (this.$route.path != "/sealApprovalList") {
+                this.$router.push({
+                  path: "/sealApprovalList",
+                });
+              } else {
+                window.location.reload();
+              }
+            } else if (this.noticeType === "ETA试用") {
+              const path = this.$route.path;
+              let pushPath = "/etaApprovalList";
+              //非管理员:若通过跳转用户列表，若驳回跳转审批列表
+              //const etaApprovalListType = item.Content.includes('通过')?'approved':'all'
+              const etaApprovalListType =
+                item.Redirect === 1 ? "approved" : "all";
+              sessionStorage.setItem(
+                "etaApprovalListType",
+                etaApprovalListType
+              );
+              if (path == pushPath) {
+                window.location.reload();
+              } else {
+                this.$router.push(pushPath);
+              }
+            } else if (this.noticeType === "出差") {
+              const path = this.$route.path;
+              let pushPath;
+              if (item.ApprovalStatus != 1) {
+                // 跳到申请列表
+                pushPath = "/businessTripApplication";
+              } else {
+                // 跳到审批列表
+                pushPath = "/businessTripApproval";
+              }
+              if (path == pushPath) {
+                window.location.reload();
+              } else {
+                this.$router.push(pushPath);
+              }
+            }
+          }
+        });
+    },
     resetpwd() {
       //修改密码
       this.$router.push({ path: "/resetpsd" });
@@ -548,7 +866,7 @@ export default {
         })
         .catch(() => {});
     },
-    collapseHandle: function () {
+    collapseHandle () {
       //折叠导航栏
       this.isCollapse = !this.isCollapse;
       // 派发折叠导航栏事件
@@ -577,6 +895,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "../styles/theme-vars.scss";
+
 .notice_item:hover {
   color: #409eff;
 }
@@ -618,7 +938,7 @@ export default {
   #main_left {
     // width: 200px;
     height: 100%;
-    background: #323a58 !important;
+    background: $menu_bg !important;
     color: #000;
     border-bottom: 1px solid #eaeaea;
     position: fixed;
@@ -626,22 +946,23 @@ export default {
     top: 0;
     z-index: 99;
     .logo_cont {
+      height: 60px;
       box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
-      padding: 10px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-bottom: 1px solid #DCDFE6;
       .logo {
         width: 148px;
         height: 38px;
         display: block;
         overflow: hidden;
-        // margin: 0 auto;
-        margin-left: 18px;
       }
       .logo_coll {
         width: 35px;
         height: 35px;
         display: block;
         overflow: hidden;
-        margin-left: 14px;
       }
     }
     aside {
@@ -652,20 +973,13 @@ export default {
         width: 200px;
         height: 100%;
         box-sizing: border-box;
-        background: #323a58 !important;
+        /* background: #323a58 !important; */
       }
       .el-menu--collapse {
         width: 70px;
         height: 100%;
         box-sizing: border-box;
-        background: #323a58 !important;
-      }
-      .collapsed {
-        width: 59px;
-        background: #344058;
-        .item {
-          position: relative;
-        }
+        /* background: #323a58 !important; */
       }
       .menuitem {
         height: 55px;
@@ -682,18 +996,17 @@ export default {
           margin-right: 6px;
         }
       }
-      // .menuitem.active {
-      //   background: rgba($color: #FDB863, $alpha: 0.2);
-      //   color: #FDB863;
-      // }
       .el-submenu .el-menu-item {
         font-size: 15px;
         padding: 0 0 0 62px !important;
         text-align: left;
       }
       .el-menu-item.is-active {
-        background: rgba($color: #fdb863, $alpha: 0.2) !important;
-        color: #fdb863 !important;
+        background: #ECF2FE !important;
+        color: $theme-color !important;
+        a {
+          color: $theme-color !important;
+        }
       }
       .el-submenu__title {
         //padding-left: 0 !important;
@@ -748,14 +1061,13 @@ export default {
       overflow: hidden;
       overflow-y: auto;
       border-right: none;
-      // .el-submenu > .el-menu > .el-menu-item:hover {/* background-color: #5882EF !important;color: #fff !important; */}
-      .el-submenu > .el-menu > .active {
+      /* .el-submenu > .el-menu > .active {
         background: rgba($color: #fdb863, $alpha: 0.2) !important;
         color: #fdb863 !important;
-      }
+      } */
     }
     .el-submenu__title > i:nth-of-type(1) {
-      color: #fff !important;
+      color: #C0C4CC !important;
     }
   }
   .left_section_logo {
@@ -796,7 +1108,6 @@ export default {
             font-weight: 400;
             color: #ee9a34;
             line-height: 19px;
-            -webkit-background-clip: text;
           }
         }
       }
@@ -853,8 +1164,8 @@ export default {
         z-index: 10;
       }
       .userinfo {
-        min-width: 420px;
-        width: 480px;
+        /* min-width: 420px;
+        width: 480px; */
         height: 60px;
         text-align: right;
         overflow: hidden;
@@ -870,7 +1181,10 @@ export default {
           left: 0px;
         }
         .userinfo-fingerpost {
-          margin-left: 20px;
+          display: flex;
+          align-items: center;
+          margin-right: 150px;
+          color: $theme-color;
         }
         .item {
           padding: 4px;

src/views/Login.vue

@@ -1,80 +1,71 @@
 <template>
   <div id="login">
-    <div id="login_wrapper">
-      <img class="login-bg" src="../assets/img/login_bg.png" alt />
-      <img class="login-icon" src="../assets/img/login_icon.png" alt />
-      <el-form
-        :model="ruleForm"
-        :rules="rules"
-        ref="ruleForm"
-        label-position="right"
-        label-width="0px"
-        class="demo-ruleForm"
-        id="login-container"
-        @submit.native.prevent
-      >
-        <el-form-item>
-          <h1
-            style="
-              font-size: 30px;
-              text-align: center;
-              color: #3d6ff5;
-              margin-bottom: 30px;
-            "
-          >
-            弘则研究后台管理系统
-          </h1>
-        </el-form-item>
-        <el-form-item prop="account">
-          <el-input
-            type="text"
-            v-model="ruleForm.account"
-            auto-complete="off"
-            placeholder="请输入用户名"
-          >
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="checkPass" v-if="visible">
-          <el-input
-            type="password"
-            v-model="ruleForm.checkPass"
-            auto-complete="off"
-            placeholder="请输入密码"
-          >
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="checkPass" v-else>
-          <el-input
-            type="text"
-            v-model="ruleForm.checkPass"
-            auto-complete="off"
-            placeholder="请输入密码"
-          >
-          </el-input>
-        </el-form-item>
-        <div class="remember-cont">
-          <el-checkbox v-model="checked" class="remember"
-            >保持登录状态</el-checkbox
-          >
-          <div class="warn-check-tip" v-show="checked">
-            <i class="el-icon-warning" />
-            勾选表示信任此设备，系统将不会自动退出该设备，使用公用电脑请勿勾选！
-          </div>
-        </div>
-        <el-form-item>
-          <el-button
-            type="primary"
-            size="medium"
-            @click.native="handleSubmit2"
-            :loading="logining"
-            class="submit_btn"
-            >立即登录</el-button
-          >
-        </el-form-item>
-      </el-form>
-      <img class="login-r-b" src="../assets/img/login_r_b.png" alt />
-    </div>
-  </div>
+		<div id="login_wrapper">
+      
+			<img class="login-bg" :src="$setting.login_bg" alt />
+      <img class="login-icon" :src="$setting.login_logo">
+			<el-form
+				:model="ruleForm"
+				:rules="rules"
+				ref="ruleForm"
+				label-position="right"
+				label-width="0px"
+				class="demo-ruleForm"
+				id="login-container"
+				@submit.native.prevent
+			>
+				<el-form-item>
+					<span class="login-title">ETA — 让投研领先市场半步</span>
+				</el-form-item>
+				<el-form-item prop="account">
+					<el-input
+						type="text"
+						v-model="ruleForm.account"
+						auto-complete="off"
+						placeholder="请输入用户名"
+					>
+					</el-input>
+				</el-form-item>
+				<el-form-item prop="checkPass" v-if="visible">
+					<el-input
+						type="password"
+						v-model="ruleForm.checkPass"
+						auto-complete="off"
+						placeholder="请输入账号"
+					>
+					</el-input>
+				</el-form-item>
+				<el-form-item prop="checkPass" v-else>
+					<el-input
+						type="text"
+						v-model="ruleForm.checkPass"
+						auto-complete="off"
+						placeholder="请输入密码"
+					>
+					</el-input>
+				</el-form-item>
+				<div class="remember-cont">
+					<el-checkbox v-model="checked" class="remember"
+						>保持登录状态</el-checkbox
+					>
+					<div class="warn-check-tip" v-show="checked">
+						<i class="el-icon-warning"/>
+						勾选表示信任此设备，系统将不会自动退出该设备，使用公用电脑请勿勾选！
+					</div>
+				</div>
+				<el-form-item>
+					<el-button
+						type="primary"
+						size="medium"
+						@click.native="handleSubmit2"
+						:loading="logining"
+						class="submit_btn"
+						>登录</el-button
+					>
+				</el-form-item>
+			</el-form>
+		</div>
+	</div>
 </template>
 
 <script>
@@ -230,118 +221,135 @@ export default {
 
 <style lang="scss" scoped>
 #login {
-  width: 100%;
-  height: 100%;
-  background: #e6e6e6;
-  position: relative;
-  overflow: hidden;
-  #login_wrapper {
-    width: 100%;
-    height: 100%;
-    background-color: #ffffff;
-    position: relative;
+	width: 100%;
+	height: 100%;
+	background: #fff;
+	position: relative;
+	overflow: hidden;
+	#login_wrapper {
+		width: 100%;
+		height: 100%;
+		background-color: #fff;
+		position: relative;
 
-    .login-bg {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 46%;
-    }
+		.login-bg {
+			position: absolute;
+			left: 2%;
+			top: 50%;
+			object-fit: cover;
+			transform: translateY(-50%);
+			width: 46%;
+			height: 90%;
+		}
 
-    .login-icon {
-      position: absolute;
-      top: 44px;
-      right: 160px;
-      width: 16%;
-    }
+		.login-icon {
+			position: absolute;
+      top: 30px;
+			right: 30px;
+		}
+		.login-title {
+			color: #333;
+			font-size: 30px;
+			display: block;
+      text-align: center;
+			margin-bottom: 30px;
+		}
 
-    .login-r-b {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      width: 8%;
-    }
+		#login-container {
+			box-sizing: border-box;
+			border-radius: 10px;
+			position: absolute;
+			top: 31%;
+			right: 12%;
+			z-index: 100;
+			input::-webkit-input-placeholder {
+				color: #595959 !important;
+			}
+			.remember {
+				margin: 0px 0 20px;
+			}
+			.submit_btn {
+				width: 100%;
+				height: 60px;
+				background: #3654C1;
+				font-size: 20px;
+				border-radius: 5px;
+			}
+			.el-input input {
+				width: 100%;
+				height: 40px;
+				color: #333333;
+				font-size: 16px;
+			}
+			.el-input-group__append,
+			.el-input-group__prepend {
+				background-color: rgba(255, 255, 255, 0.8);
+				color: rgb(51, 51, 51);
+				border: none;
+			}
+			.el-input.el-input-group.el-input-group--prepend input {
+				background-color: rgba(255, 255, 255, 0.8);
+				color: rgb(51, 51, 51);
+				border: none;
+			}
+			.el-checkbox__label {
+				color: rgb(51, 51, 51);
+				font-size: 14px;
+			}
+			.el-checkbox__input.is-checked + .el-checkbox__label {
+				color: rgb(51, 51, 51);
+				font-size: 14px;
+			}
+			.el-form-item__content .el-input-group,
+			.el-form-item__label,
+			.el-tag .el-icon-close {
+				padding-bottom: 5px;
+				vertical-align: middle;
+				border-bottom: 1px solid #eaeaea;
+			}
+			.el-button--primary {
+				background: #3654C1 !important;
+				border: none;
+			}
+			.el-form-item__content {
+				padding-bottom: 5px;
+			}
+			.el-form-item {
+				margin-bottom: 30px;
+			}
+		}
 
-    #login-container {
-      width: 31%;
-      box-sizing: border-box;
-      border-radius: 10px;
-      position: absolute;
-      top: 31%;
-      right: 14%;
-      z-index: 100;
-      font-size: 30px;
-      input::-webkit-input-placeholder {
-        color: #595959 !important;
-      }
-      .remember {
-        margin: 0px 0 20px;
-      }
-      .submit_btn {
-        width: 100%;
-        height: 40px;
-        background: #007eff;
-        font-size: 16px;
-        border-radius: 5px;
-      }
-      .el-input input {
-        width: 100%;
-        height: 40px;
-        color: #333333;
-        font-size: 16px;
-      }
-      .el-input-group__append,
-      .el-input-group__prepend {
-        background-color: rgba(255, 255, 255, 0.8);
-        color: rgb(51, 51, 51);
-        border: none;
-      }
-      .el-input.el-input-group.el-input-group--prepend input {
-        background-color: rgba(255, 255, 255, 0.8);
-        color: rgb(51, 51, 51);
-        border: none;
-      }
-      .el-checkbox__label {
-        color: rgb(51, 51, 51);
-        font-size: 14px;
-      }
-      .el-checkbox__input.is-checked + .el-checkbox__label {
-        color: rgb(51, 51, 51);
-        font-size: 14px;
-      }
-      .el-form-item__content .el-input-group,
-      .el-form-item__label,
-      .el-tag .el-icon-close {
-        padding-bottom: 5px;
-        vertical-align: middle;
-        border-bottom: 1px solid #eaeaea;
-      }
-      .el-button--primary {
-        background: #007eff !important;
-        border: none;
-      }
-      .el-form-item__content {
-        padding-bottom: 5px;
-      }
-      .el-form-item {
-        margin-bottom: 30px;
-      }
-    }
-  }
-  .remember-cont {
-    position: relative;
-    margin-bottom: 20px;
-    .warn-check-tip {
-      position: absolute;
-      min-width: 300px;
-      left: 130px;
-      top: 0;
-      padding: 2px 10px;
-      border: 1px solid #d1433a;
-      background: #ffeae9;
-      color: #b72e18;
-      font-size: 14px;
-    }
-  }
+		@media screen and (min-width: 1201px){ 
+			.login-bg{ 
+				display: block;
+			}
+			#login-container {
+				width: 31%;
+			}
+		}
+		@media screen and (max-width: 1200px){
+			.login-bg{ 
+				display: none; 
+			}
+			#login-container {
+				width: 70%;
+			}
+		}
+	}
+	.remember-cont {
+		position: relative;
+		margin-bottom: 35px;
+		.warn-check-tip {
+			position: absolute;
+			min-width: 300px;
+			left: 130px;
+			top: 0;
+			padding: 2px 10px;
+			border: 1px solid #D1433A;
+			background: #FFEAE9;
+			color: #B72E18;
+			font-size: 14px;
+		}
+	}
 }
 </style>