diff --git a/acupuncture-前台/src/assets/images/dangan_n@1x.png b/acupuncture-前台/src/assets/images/dangan_n@1x.png new file mode 100644 index 00000000..77180f6a Binary files /dev/null and b/acupuncture-前台/src/assets/images/dangan_n@1x.png differ diff --git a/acupuncture-前台/src/assets/images/dangan_s@1x.png b/acupuncture-前台/src/assets/images/dangan_s@1x.png new file mode 100644 index 00000000..4fc6a3b8 Binary files /dev/null and b/acupuncture-前台/src/assets/images/dangan_s@1x.png differ diff --git a/acupuncture-前台/src/assets/images/home_N@1x.png b/acupuncture-前台/src/assets/images/home_N@1x.png new file mode 100644 index 00000000..dfba626e Binary files /dev/null and b/acupuncture-前台/src/assets/images/home_N@1x.png differ diff --git a/acupuncture-前台/src/assets/images/home_S@1x.png b/acupuncture-前台/src/assets/images/home_S@1x.png new file mode 100644 index 00000000..cc1f490a Binary files /dev/null and b/acupuncture-前台/src/assets/images/home_S@1x.png differ diff --git a/acupuncture-前台/src/assets/images/logo@1x.png b/acupuncture-前台/src/assets/images/logo@1x.png new file mode 100644 index 00000000..85cc2a1b Binary files /dev/null and b/acupuncture-前台/src/assets/images/logo@1x.png differ diff --git a/acupuncture-前台/src/assets/images/me_n@1x.png b/acupuncture-前台/src/assets/images/me_n@1x.png new file mode 100644 index 00000000..4ff22087 Binary files /dev/null and b/acupuncture-前台/src/assets/images/me_n@1x.png differ diff --git a/acupuncture-前台/src/assets/images/me_s@1x.png b/acupuncture-前台/src/assets/images/me_s@1x.png new file mode 100644 index 00000000..4d351538 Binary files /dev/null and b/acupuncture-前台/src/assets/images/me_s@1x.png differ diff --git a/acupuncture-前台/src/assets/images/suifang_n@1x.png b/acupuncture-前台/src/assets/images/suifang_n@1x.png new file mode 100644 index 00000000..890ff718 Binary files /dev/null and b/acupuncture-前台/src/assets/images/suifang_n@1x.png differ diff --git a/acupuncture-前台/src/assets/images/suifang_s@1x.png b/acupuncture-前台/src/assets/images/suifang_s@1x.png new file mode 100644 index 00000000..c87e8197 Binary files /dev/null and b/acupuncture-前台/src/assets/images/suifang_s@1x.png differ diff --git a/acupuncture-前台/src/assets/images/zhenliao_n@1x.png b/acupuncture-前台/src/assets/images/zhenliao_n@1x.png new file mode 100644 index 00000000..a0e06256 Binary files /dev/null and b/acupuncture-前台/src/assets/images/zhenliao_n@1x.png differ diff --git a/acupuncture-前台/src/assets/images/zhenliao_s@1x.png b/acupuncture-前台/src/assets/images/zhenliao_s@1x.png new file mode 100644 index 00000000..cb95c7a1 Binary files /dev/null and b/acupuncture-前台/src/assets/images/zhenliao_s@1x.png differ diff --git a/acupuncture-前台/src/assets/styles/sidebar.scss b/acupuncture-前台/src/assets/styles/sidebar.scss index abe5b631..9cd64dc2 100644 --- a/acupuncture-前台/src/assets/styles/sidebar.scss +++ b/acupuncture-前台/src/assets/styles/sidebar.scss @@ -1,18 +1,17 @@ #app { - .main-container { height: 100%; - transition: margin-left .28s; + transition: margin-left 0.28s; margin-left: $base-sidebar-width; position: relative; } .sidebarHide { - margin-left: 0!important; + margin-left: 0 !important; } .sidebar-container { - -webkit-transition: width .28s; + -webkit-transition: width 0.28s; transition: width 0.28s; width: $base-sidebar-width !important; background-color: $base-menu-background; @@ -24,12 +23,17 @@ left: 0; z-index: 1001; overflow: hidden; - -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); - box-shadow: 2px 0 6px rgba(0,21,41,.35); + -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); + box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); // reset element-ui css .horizontal-collapse-transition { - transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; + transition: 0s width ease-in-out, 0s padding-left ease-in-out, + 0s padding-right ease-in-out; + -webkit-transition: 0s width ease-in-out, 0s padding-left ease-in-out; + -moz-transition: 0s width ease-in-out, 0s padding-left ease-in-out; + -ms-transition: 0s width ease-in-out, 0s padding-left ease-in-out; + -o-transition: 0s width ease-in-out, 0s padding-left ease-in-out; } .scrollbar-wrapper { @@ -70,17 +74,26 @@ width: 100% !important; } - .el-menu-item, .el-submenu__title { + .el-menu-item, + .el-submenu__title { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } - + .el-menu-item { + height: 90px; + line-height: 26px !important; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { - background-color: rgba(0, 0, 0, 0.06) !important; + background-color: rgba(0, 0, 0, 0.2) !important; + color: #fff !important; } } @@ -88,7 +101,7 @@ color: $base-menu-color-active !important; } - & .nest-menu .el-submenu>.el-submenu__title, + & .nest-menu .el-submenu > .el-submenu__title, & .el-submenu .el-menu-item { min-width: $base-sidebar-width !important; @@ -97,7 +110,7 @@ } } - & .theme-dark .nest-menu .el-submenu>.el-submenu__title, + & .theme-dark .nest-menu .el-submenu > .el-submenu__title, & .theme-dark .el-submenu .el-menu-item { background-color: $base-sub-menu-background !important; @@ -132,20 +145,19 @@ .el-submenu { overflow: hidden; - &>.el-submenu__title { + & > .el-submenu__title { padding: 0 !important; .svg-icon { margin-left: 20px; } - } } .el-menu--collapse { .el-submenu { - &>.el-submenu__title { - &>span { + & > .el-submenu__title { + & > span { height: 0; width: 0; overflow: hidden; @@ -168,7 +180,7 @@ } .sidebar-container { - transition: transform .28s; + transition: transform 0.28s; width: $base-sidebar-width !important; } @@ -182,7 +194,6 @@ } .withoutAnimation { - .main-container, .sidebar-container { transition: none; @@ -192,13 +203,13 @@ // when menu collapsed .el-menu--vertical { - &>.el-menu { + & > .el-menu { .svg-icon { margin-right: 16px; } } - .nest-menu .el-submenu>.el-submenu__title, + .nest-menu .el-submenu > .el-submenu__title, .el-menu-item { &:hover { // you can use $subMenuHover @@ -207,7 +218,7 @@ } // the scroll bar appears when the subMenu is too long - >.el-menu--popup { + > .el-menu--popup { max-height: 100vh; overflow-y: auto; diff --git a/acupuncture-前台/src/assets/styles/variables.scss b/acupuncture-前台/src/assets/styles/variables.scss index 34484d47..aa313a41 100644 --- a/acupuncture-前台/src/assets/styles/variables.scss +++ b/acupuncture-前台/src/assets/styles/variables.scss @@ -1,25 +1,25 @@ // base color -$blue:#324157; -$light-blue:#3A71A8; -$red:#C03639; -$pink: #E65D6E; -$green: #30B08F; -$tiffany: #4AB7BD; -$yellow:#FEC171; -$panGreen: #30B08F; +$blue: #324157; +$light-blue: #3a71a8; +$red: #c03639; +$pink: #e65d6e; +$green: #30b08f; +$tiffany: #4ab7bd; +$yellow: #fec171; +$panGreen: #30b08f; // 默认菜单主题风格 -$base-menu-color:#bfcbd9; -$base-menu-color-active:#f4f4f5; -$base-menu-background:#304156; +$base-menu-color: #c7bdb1; +$base-menu-color-active: #f4f4f5; +$base-menu-background: #70483e; $base-logo-title-color: #ffffff; -$base-menu-light-color:rgba(0,0,0,.70); -$base-menu-light-background:#ffffff; +$base-menu-light-color: rgba(0, 0, 0, 0.7); +$base-menu-light-background: #ffffff; $base-logo-light-title-color: #001529; -$base-sub-menu-background:#1f2d3d; -$base-sub-menu-hover:#001528; +$base-sub-menu-background: #1f2d3d; +$base-sub-menu-hover: #001528; // 自定义暗色菜单风格 /** @@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17; $base-sub-menu-hover:#001528; */ -$base-sidebar-width: 200px; +$base-sidebar-width: 120px; // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass @@ -50,5 +50,5 @@ $base-sidebar-width: 200px; subMenuHover: $base-sub-menu-hover; sideBarWidth: $base-sidebar-width; logoTitleColor: $base-logo-title-color; - logoLightTitleColor: $base-logo-light-title-color + logoLightTitleColor: $base-logo-light-title-color; } diff --git a/acupuncture-前台/src/components/TopNav/index.vue b/acupuncture-前台/src/components/TopNav/index.vue index e27a12f6..22df92e6 100644 --- a/acupuncture-前台/src/components/TopNav/index.vue +++ b/acupuncture-前台/src/components/TopNav/index.vue @@ -5,25 +5,38 @@ @select="handleSelect" > - + @@ -36,7 +49,7 @@ import { constantRoutes } from "@/router"; import { isHttp } from "@/utils/validate"; // 隐藏侧边栏路由 -const hideList = ['/index', '/user/profile']; +const hideList = ["/index", "/user/profile"]; export default { data() { @@ -44,7 +57,7 @@ export default { // 顶部栏初始数 visibleNumber: 5, // 当前激活菜单的 index - currentIndex: undefined + currentIndex: undefined, }; }, computed: { @@ -76,11 +89,12 @@ export default { this.routers.map((router) => { for (var item in router.children) { if (router.children[item].parentPath === undefined) { - if(router.path === "/") { + if (router.path === "/") { router.children[item].path = "/" + router.children[item].path; } else { - if(!isHttp(router.children[item].path)) { - router.children[item].path = router.path + "/" + router.children[item].path; + if (!isHttp(router.children[item].path)) { + router.children[item].path = + router.path + "/" + router.children[item].path; } } router.children[item].parentPath = router.path; @@ -94,25 +108,29 @@ export default { activeMenu() { const path = this.$route.path; let activePath = path; - if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) { + if ( + path !== undefined && + path.lastIndexOf("/") > 0 && + hideList.indexOf(path) === -1 + ) { const tmpPath = path.substring(1, path.length); if (!this.$route.meta.link) { activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); - this.$store.dispatch('app/toggleSideBarHide', false); + this.$store.dispatch("app/toggleSideBarHide", false); } - } else if(!this.$route.children) { + } else if (!this.$route.children) { activePath = path; - this.$store.dispatch('app/toggleSideBarHide', true); + this.$store.dispatch("app/toggleSideBarHide", true); } this.activeRoutes(activePath); return activePath; }, }, beforeMount() { - window.addEventListener('resize', this.setVisibleNumber) + window.addEventListener("resize", this.setVisibleNumber); }, beforeDestroy() { - window.removeEventListener('resize', this.setVisibleNumber) + window.removeEventListener("resize", this.setVisibleNumber); }, mounted() { this.setVisibleNumber(); @@ -126,24 +144,24 @@ export default { // 菜单选择事件 handleSelect(key, keyPath) { this.currentIndex = key; - const route = this.routers.find(item => item.path === key); + const route = this.routers.find((item) => item.path === key); if (isHttp(key)) { // http(s):// 路径新窗口打开 window.open(key, "_blank"); } else if (!route || !route.children) { // 没有子路由路径内部打开 - const routeMenu = this.childrenMenus.find(item => item.path === key); + const routeMenu = this.childrenMenus.find((item) => item.path === key); if (routeMenu && routeMenu.query) { let query = JSON.parse(routeMenu.query); this.$router.push({ path: key, query: query }); } else { this.$router.push({ path: key }); } - this.$store.dispatch('app/toggleSideBarHide', true); + this.$store.dispatch("app/toggleSideBarHide", true); } else { // 显示左侧联动菜单 this.activeRoutes(key); - this.$store.dispatch('app/toggleSideBarHide', false); + this.$store.dispatch("app/toggleSideBarHide", false); } }, // 当前激活的路由 @@ -156,36 +174,35 @@ export default { } }); } - if(routes.length > 0) { + if (routes.length > 0) { this.$store.commit("SET_SIDEBAR_ROUTERS", routes); } else { - this.$store.dispatch('app/toggleSideBarHide', true); + this.$store.dispatch("app/toggleSideBarHide", true); } - } + }, }, }; diff --git a/acupuncture-前台/src/store/modules/settings.js b/acupuncture-前台/src/store/modules/settings.js index 2455a1e2..7c9c58ca 100644 --- a/acupuncture-前台/src/store/modules/settings.js +++ b/acupuncture-前台/src/store/modules/settings.js @@ -5,7 +5,7 @@ const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dyn const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' const state = { title: '', - theme: storageSetting.theme || '#409EFF', + theme: storageSetting.theme || '#70483E', sideTheme: storageSetting.sideTheme || sideTheme, showSettings: showSettings, topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,