样式修改

src/assets/styles/element-ui.scss

@@ -58,7 +58,6 @@
 .upload-container {
   .el-upload {
     width: 100%;
-
     .el-upload-dragger {
       width: 100%;
       height: 200px;
@@ -84,9 +83,35 @@
 }
 
 .el-menu--collapse
-  > div
-  > .el-submenu
-  > .el-submenu__title
-  .el-submenu__icon-arrow {
+> div
+> .el-submenu
+> .el-submenu__title
+.el-submenu__icon-arrow {
   display: none;
-}
+}
+
+
+
+.el-carousel__indicators--horizontal{
+  left: 8% !important;
+}
+.el-carousel__button{
+  position: relative;
+  overflow: hidden;
+  opacity: 1;
+  height: 4px !important;
+}
+.el-carousel__button::after{
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height:100%;
+  top:0;
+  left:-100%;
+  background: #ff0000;
+}
+.is-active .el-carousel__button::after{
+  transition: left 6000ms;
+  left: 0;
+}

src/assets/styles/element-variables.scss

@@ -17,7 +17,7 @@ $--button-font-weight: 400;
 $--border-color-light: #dfe4ed;
 $--border-color-lighter: #e6ebf5;
 
-$--table-border:1px solid#dfe6ec;
+$--table-border: 1px solid #dfe6ec;
 
 /* icon font path, required */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';

src/assets/styles/index.scss

@@ -180,12 +180,3 @@ aside {
     margin-bottom: 10px;
   }
 }
-
-//refine vue-multiselect plugin
-.multiselect {
-  line-height: 16px;
-}
-
-.multiselect--active {
-  z-index: 1000 !important;
-}

src/assets/styles/ruoyi.scss

@@ -1,125 +1,143 @@
- /**
- * 通用css样式布局处理
- * Copyright (c) 2019 ruoyi
- */
+/**
+* 通用css样式布局处理
+* Copyright (c) 2019 ruoyi
+*/
 
- /** 基础通用 **/
+/** 基础通用 **/
 .pt5 {
-	padding-top: 5px;
+  padding-top: 5px;
 }
+
 .pr5 {
-	padding-right: 5px;
+  padding-right: 5px;
 }
+
 .pb5 {
-	padding-bottom: 5px;
+  padding-bottom: 5px;
 }
+
 .mt5 {
-	margin-top: 5px;
+  margin-top: 5px;
 }
+
 .mr5 {
-	margin-right: 5px;
+  margin-right: 5px;
 }
+
 .mb5 {
-	margin-bottom: 5px;
+  margin-bottom: 5px;
 }
+
 .mb8 {
-	margin-bottom: 8px;
+  margin-bottom: 8px;
 }
+
 .ml5 {
-	margin-left: 5px;
+  margin-left: 5px;
 }
+
 .mt10 {
-	margin-top: 10px;
+  margin-top: 10px;
 }
+
 .mr10 {
-	margin-right: 10px;
+  margin-right: 10px;
 }
+
 .mb10 {
-	margin-bottom: 10px;
+  margin-bottom: 10px;
 }
-.ml0 {
-	margin-left: 10px;
+.ml10 {
+  margin-left: 10px;
 }
+
 .mt20 {
-	margin-top: 20px;
+  margin-top: 20px;
 }
+
 .mr20 {
-	margin-right: 20px;
+  margin-right: 20px;
 }
+
 .mb20 {
-	margin-bottom: 20px;
+  margin-bottom: 20px;
 }
-.m20 {
-	margin-left: 20px;
+.ml20 {
+  margin-left: 20px;
 }
 
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
-	font-family: inherit;
-	font-weight: 500;
-	line-height: 1.1;
-	color: inherit;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+}
+
+.el-message-box__status + .el-message-box__message{
+  word-break: break-word;
 }
 
 .el-dialog:not(.is-fullscreen) {
-	margin-top: 6vh !important;
+  margin-top: 6vh !important;
 }
 
 .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
-    overflow: auto;
-	overflow-x: hidden;
-	max-height: 70vh;
-	padding: 10px 20px 0;
+  overflow: auto;
+  overflow-x: hidden;
+  max-height: 70vh;
+  padding: 10px 20px 0;
 }
 
 .el-table {
-	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
-		th {
-			word-break: break-word;
-			background-color: #f8f8f9;
-			color: #515a6e;
-			height: 40px;
-			font-size: 13px;
-		}
-	}
-	.el-table__body-wrapper {
-		.el-button [class*="el-icon-"] + span {
-			margin-left: 1px;
-		}
-	}
+  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
+    th {
+      word-break: break-word;
+      background-color: #f8f8f9;
+      color: #515a6e;
+      height: 40px;
+      font-size: 13px;
+    }
+  }
+
+  .el-table__body-wrapper {
+    .el-button [class*="el-icon-"] + span {
+      margin-left: 1px;
+    }
+  }
 }
 
 /** 表单布局 **/
 .form-header {
-    font-size:15px;
-	color:#6379bb;
-	border-bottom:1px solid #ddd;
-	margin:8px 10px 25px 10px;
-	padding-bottom:5px
+  font-size: 15px;
+  color: #6379bb;
+  border-bottom: 1px solid #ddd;
+  margin: 8px 10px 25px 10px;
+  padding-bottom: 5px
 }
 
 /** 表格布局 **/
 .pagination-container {
-	position: relative;
-	height: 25px;
-	margin-bottom: 10px;
-	margin-top: 15px;
-	padding: 10px 20px !important;
+  position: relative;
+  height: 25px;
+  margin-bottom: 10px;
+  margin-top: 15px;
+  padding: 10px 20px !important;
 }
 
 /* tree border */
 .tree-border {
-    margin-top: 5px;
-    border: 1px solid #e5e6e7;
-    background: #FFFFFF none;
-    border-radius:4px;
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  background: #FFFFFF none;
+  border-radius: 4px;
 }
 
 .pagination-container .el-pagination {
-	right: 0;
-	position: absolute;
+  right: 0;
+  position: absolute;
 }
 
-@media ( max-width : 768px) {
+@media (max-width: 768px) {
   .pagination-container .el-pagination > .el-pagination__jump {
     display: none !important;
   }
@@ -129,64 +147,63 @@
 }
 
 .el-table .fixed-width .el-button--mini {
-	padding-left: 0;
-	padding-right: 0;
-	width: inherit;
+  padding-left: 0;
+  padding-right: 0;
+  width: inherit;
 }
 
 /** 表格更多操作下拉样式 */
-.el-table .el-dropdown-link {
-	cursor: pointer;
-	color: #409EFF;
-	margin-left: 5px;
+.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
+  cursor: pointer;
+  margin-left: 5px;
 }
 
 .el-table .el-dropdown, .el-icon-arrow-down {
-	font-size: 12px;
+  font-size: 12px;
 }
 
 .el-tree-node__content > .el-checkbox {
-	margin-right: 8px;
+  margin-right: 8px;
 }
 
 .list-group-striped > .list-group-item {
-	border-left: 0;
-	border-right: 0;
-	border-radius: 0;
-	padding-left: 0;
-	padding-right: 0;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .list-group {
-	padding-left: 0px;
-	list-style: none;
+  padding-left: 0px;
+  list-style: none;
 }
 
 .list-group-item {
-	border-bottom: 1px solid #e7eaec;
-	border-top: 1px solid #e7eaec;
-	margin-bottom: -1px;
-	padding: 11px 0px;
-	font-size: 13px;
+  border-bottom: 1px solid #e7eaec;
+  border-top: 1px solid #e7eaec;
+  margin-bottom: -1px;
+  padding: 11px 0px;
+  font-size: 13px;
 }
 
 .pull-right {
-	float: right !important;
+  float: right !important;
 }
 
 .el-card__header {
-	padding: 14px 15px 7px;
-	min-height: 40px;
+  padding: 14px 15px 7px;
+  min-height: 40px;
 }
 
 .el-card__body {
-	padding: 15px 20px 20px 20px;
+  padding: 15px 20px 20px 20px;
 }
 
 .card-box {
-	padding-right: 15px;
-	padding-left: 15px;
-	margin-bottom: 10px;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-bottom: 10px;
 }
 
 /* button color */
@@ -212,62 +229,63 @@
 
 /* text color */
 .text-navy {
-	color: #1ab394;
+  color: #1ab394;
 }
 
 .text-primary {
-	color: inherit;
+  color: inherit;
 }
 
 .text-success {
-	color: #1c84c6;
+  color: #1c84c6;
 }
 
 .text-info {
-	color: #23c6c8;
+  color: #23c6c8;
 }
 
 .text-warning {
-	color: #f8ac59;
+  color: #f8ac59;
 }
 
 .text-danger {
-	color: #ed5565;
+  color: #ed5565;
 }
 
 .text-muted {
-	color: #888888;
+  color: #888888;
 }
 
 /* image */
 .img-circle {
-	border-radius: 50%;
+  border-radius: 50%;
 }
 
 .img-lg {
-	width: 120px;
-	height: 120px;
+  width: 120px;
+  height: 120px;
 }
 
 .avatar-upload-preview {
-	position: absolute;
-	top: 50%;
-	transform: translate(50%, -50%);
-	width: 200px;
-	height: 200px;
-	border-radius: 50%;
-	box-shadow: 0 0 4px #ccc;
-	overflow: hidden;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
 }
 
 /* 拖拽列样式 */
-.sortable-ghost{
-	opacity: .8;
-	color: #fff!important;
-	background: #42b983!important;
+.sortable-ghost {
+  opacity: .8;
+  color: #fff !important;
+  background: #42b983 !important;
 }
 
 .top-right-btn {
-	position: relative;
-	float: right;
+  position: relative;
+  float: right;
 }

src/assets/styles/sidebar.scss

@@ -1,12 +1,16 @@
 #app {
 
   .main-container {
-    min-height: 100%;
+    height: 100%;
     transition: margin-left .28s;
     margin-left: $base-sidebar-width;
     position: relative;
   }
 
+  .sidebarHide {
+    margin-left: 0!important;
+  }
+
   .sidebar-container {
     -webkit-transition: width .28s;
     transition: width 0.28s;
@@ -20,8 +24,9 @@
     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: 0px 0 10px rgba(211, 211, 211, 0.5);
+    box-shadow: 0px 0 10px rgb(211 211 211 / 50%);
+
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -63,20 +68,45 @@
     .el-menu {
       border: none;
       height: 100%;
-      width: 100% !important;
+      //width: 100% !important;
+
+      width: 200px !important;
+      margin: auto;
     }
 
     .el-menu-item, .el-submenu__title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      height: 40px;
+      border-radius: 5px;
+      line-height: 40px;
+    }
+
+
+    .el-menu-item.is-active {
+      //color: $base-logo-light-title-color !important;
+      color: $base-menu-light-background !important;
+      background-color: $base-menu-light-color !important; // 点击菜单的颜色
+      border-radius: 5px;
+      height: 40px !important;
+      &:hover {border-radius: 10px;
+        border-radius: 5px;
+        background-color: $base-sub-menu-hover !important;
+      }
+    }
+
+
+    .el-icon-arrow-down:before {
+      color: #ffffff;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        border-radius: 5px;
+        background-color: $base-sub-menu-hover !important;
       }
     }
 
@@ -86,17 +116,23 @@
 
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
-      min-width: $base-sidebar-width !important;
-
+      min-width: 200px !important;
+      height: 40px !important;
+      line-height: 40px !important;
+      border-radius: 5px;
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: $base-sub-menu-hover !important;
       }
     }
 
     & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
-
+      border-radius: 5px;
+      height: 40px !important;
+      line-height: 40px !important;
+      // background-color: $base-sub-menu-background !important;
+      color: #333333 !important;
+      background-color: #fff;
       &:hover {
         background-color: $base-sub-menu-hover !important;
       }
@@ -115,7 +151,6 @@
     .submenu-title-noDropdown {
       padding: 0 !important;
       position: relative;
-
       .el-tooltip {
         padding: 0 !important;
 
@@ -196,6 +231,7 @@
 
   .nest-menu .el-submenu>.el-submenu__title,
   .el-menu-item {
+    border-radius: 5px;
     &:hover {
       // you can use $subMenuHover
       background-color: rgba(0, 0, 0, 0.06) !important;

src/assets/styles/transition.scss

@@ -12,6 +12,7 @@
 }
 
 /* fade-transform */
+.fade-transform--move,
 .fade-transform-leave-active,
 .fade-transform-enter-active {
   transition: all .5s;

src/assets/styles/variables.scss

@@ -9,17 +9,16 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
+$base-menu-color: hsla(0,0%,100%,.65);;  // dark主题字体色
+$base-menu-color-active: #ea6060; // dark主题父级菜单激活的字体颜色
+$base-menu-background: #5da5e8; // dark主题 菜单栏背景颜色（非激活状态）
+$base-logo-title-color: #ffffff; // dark主题 系统标题颜色
 
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
+$base-menu-light-color: rgba(255, 255, 255, 1); // 白色主题非激活字体色
+$base-menu-light-background: #2c48c2; // 白色主题默认背景
+$base-logo-light-title-color: #2c48c2 ; // 白色主题 系统标题颜色
+$base-sub-menu-background: rgba(102, 123, 208, 0.7); // 白色主题 选中颜色
+$base-sub-menu-hover: $base-sub-menu-background; // 白色主题 选中背景
 
 // 自定义暗色菜单风格
 /**
@@ -36,7 +35,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 220px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/layout/components/Navbar.vue

@@ -15,24 +15,24 @@
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+<!--        <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
+<!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
+<!--        </el-tooltip>-->
 
       </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
+          <span class="nick-name">{{ nickName }}</span>
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/user/profile">
             <el-dropdown-item>个人中心</el-dropdown-item>
           </router-link>
-          <el-dropdown-item @click.native="setting = true">
-            <span>布局设置</span>
-          </el-dropdown-item>
+<!--          <el-dropdown-item @click.native="setting = true">-->
+<!--            <span>布局设置</span>-->
+<!--          </el-dropdown-item>-->
           <el-dropdown-item divided @click.native="logout">
             <span>退出登录</span>
           </el-dropdown-item>
@@ -68,6 +68,7 @@ export default {
     ...mapGetters([
       'sidebar',
       'avatar',
+      'nickName',
       'device'
     ]),
     setting: {
@@ -107,6 +108,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "@/assets/styles/variables.scss";
 .navbar {
   height: 50px;
   overflow: hidden;
@@ -169,11 +171,20 @@ export default {
     }
 
     .avatar-container {
-      margin-right: 30px;
+      margin-right: 5px;
 
       .avatar-wrapper {
-        margin-top: 5px;
+        //margin-top: 5px;
         position: relative;
+        display: flex;
+        align-items: center;
+        .nick-name{
+          font-family: FZZhuoYTJW;
+          font-size: 16px;
+          font-weight:bold;
+          color: $base-logo-light-title-color;
+          margin-left: 5px;
+        }
 
         .user-avatar {
           cursor: pointer;

src/layout/components/Sidebar/Logo.vue

@@ -3,11 +3,11 @@
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1 v-else class="sidebar-title" :style="{ color: '#ffffff' }">{{ title }} </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1 class="sidebar-title" :style="{ color: '#ffffff' }">{{ title }} </h1>
       </router-link>
     </transition>
   </div>

src/layout/components/TagsView/index.vue

@@ -239,18 +239,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 .tags-view-container {
-  height: 34px;
+  height: 35px;
   width: 100%;
   background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  //border-bottom: 1px solid #d8dce5;
+  box-shadow: 0 0px 3px 0 rgba(73, 80, 96, 0.2);
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
       position: relative;
       cursor: pointer;
-      height: 26px;
+      border-radius: 3px;
       line-height: 26px;
       border: 1px solid #d8dce5;
       color: #495060;
@@ -258,7 +259,7 @@ export default {
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;
-      margin-top: 4px;
+      margin-top: 3px;
       &:first-of-type {
         margin-left: 15px;
       }

src/settings.js

@@ -2,7 +2,7 @@ module.exports = {
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */
-  sideTheme: 'theme-dark',
+  sideTheme: 'theme-light',
 
   /**
    * 是否系统布局配置
@@ -22,7 +22,7 @@ module.exports = {
   /**
    * 是否固定头部
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * 是否显示logo
@@ -32,7 +32,7 @@ module.exports = {
   /**
    * 是否显示动态标题
    */
-  dynamicTitle: false,
+  dynamicTitle: true,
 
   /**
    * @type {string | array} 'production' | ['production', 'development']

src/store/getters.js

@@ -6,6 +6,7 @@ const getters = {
   cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
+  nickName: state => state.user.nickName,
   name: state => state.user.name,
   postName: state => state.user.postName,
   introduction: state => state.user.introduction,

src/store/modules/settings.js

@@ -1,11 +1,12 @@
 import defaultSettings from '@/settings'
+import variables from "@/assets/styles/variables.scss";
 
 const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings
 
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 const state = {
   title: '',
-  theme: storageSetting.theme || '#409EFF',
+  theme: storageSetting.theme || variables.logoLightTitleColor,
   sideTheme: storageSetting.sideTheme || sideTheme,
   showSettings: showSettings,
   topNav:  storageSetting.topNav === undefined ? topNav : storageSetting.topNav,

src/store/modules/user.js

@@ -7,6 +7,7 @@ const user = {
     name: '',
     postName: '',
     avatar: '',
+    nickName: '',
     roles: [],
     permissions: []
   },
@@ -18,6 +19,9 @@ const user = {
     SET_NAME: (state, name) => {
       state.name = name
     },
+    SET_NICKNAME: (state, nickName) => {
+      state.nickName = nickName
+    },
     SET_POST_NAME: (state, postName) => {
       state.postName = postName
     },
@@ -63,6 +67,7 @@ const user = {
             commit('SET_ROLES', ['ROLE_DEFAULT'])
           }
           commit('SET_NAME', user.userName)
+          commit('SET_NICKNAME', user.nickName)
           commit('SET_POST_NAME', user.postName)
           commit('SET_AVATAR', avatar)
           resolve(res)