Browse Source

样式修改

lilei 3 years ago
parent
commit
16cfaf9a31

BIN
src/assets/lightMaxLogo.png


BIN
src/assets/lightMiniLogo.png


BIN
src/assets/logo1.png


+ 1 - 1
src/components/Menu/SideMenu.vue

@@ -65,7 +65,7 @@ export default {
         bar: {
           hoverStyle: true,
           onlyShowBarOnScroll: false, // 是否只有滚动的时候才显示滚动条
-          background: '#00557f', // 滚动条颜色
+          background: this.navTheme == 'dark' ? '#00557f' : '#9d9d9d', // 滚动条颜色
           opacity: 0.5, // 滚动条透明度
           'overflow-x': 'hidden'
         }

+ 1 - 1
src/components/SettingDrawer/SettingDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="setting-drawer" ref="settingDrawer">
+  <div class="setting-drawer" v-if="false" ref="settingDrawer">
     <a-drawer
       width="300"
       placement="right"

+ 3 - 1
src/components/global.less

@@ -470,7 +470,9 @@ body {
         color: unset;
       }
     }
-
+    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
+      background-color: #eef5ff;
+    }
     .ant-menu-light {
       border-right-color: transparent;
     }

+ 0 - 225
src/components/index.less

@@ -20,231 +20,6 @@
 .ant-input-number-handler-wrap{
   display: none;
 }
-/* 扩展ant design pro按钮组件颜色 */
-.ant-btn-primary.button-primary {
-  background-color: #39f;
-  border-color: #39f;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #52a6fb;
-    border-color: #52a6fb;
-  }
- 
-  &:active, &.active {
-    background-color: #3d80bf;
-    border-color: #3d80bf;
-  }
-}
- 
-.ant-btn-primary.button-info {
-  background-color: #2db7f5;
-  border-color: #2db7f5;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #32c8f5;
-    border-color: #32c8f5;
-  }
- 
-  &:active, &.active {
-    background-color: #27a3d8;
-    border-color: #27a3d8;
-  }
-}
- 
-.ant-btn-primary.button-success {
-  background-color: #0c6;
-  border-color: #0c6;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #01dc8c;
-    border-color: #01dc8c;
-  }
- 
-  &:active, &.active {
-    background-color: #00af57;
-    border-color: #00af57;
-  }
-}
- 
-.ant-btn-primary.button-warning {
-  background-color: #f90;
-  border-color: #f90;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #ffb60a;
-    border-color: #ffb60a;
-  }
- 
-  &:active, &.active {
-    background-color: #dd8500;
-    border-color: #dd8500;
-  }
-}
- 
-.ant-btn-primary.button-error {
-  background-color: #f30;
-  border-color: #f30;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #ff6666;
-    border-color: #ff6666;
-  }
- 
-  &:active, &.active {
-    background-color: #d62a00;
-    border-color: #d62a00;
-  }
-}
- 
-.ant-btn-primary.button-geekblue {
-  background-color: #2F54EB;
-  border-color: #2F54EB;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #1d39c4;
-    border-color: #1d39c4;
-  }
- 
-  &:active, &.active {
-    background-color: #597ef7;
-    border-color: #597ef7;
-  }
-}
- 
-.ant-btn-primary.button-purple {
-  background-color: #722ED1;
-  border-color: #722ED1;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #9254de;
-    border-color: #9254de;
-  }
- 
-  &:active, &.active {
-    background-color: #531dab;
-    border-color: #531dab;
-  }
-}
-.ant-btn-primary.button-grey {
-  background-color: #82848a;
-  border-color: #82848a;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #909399;
-    border-color: #909399;
-  }
- 
-  &:active, &.active {
-    background-color: #c8c9cc;
-    border-color: #c8c9cc;
-  }
-}
-
-// btn-link
-.ant-btn-link.button-default {
-  color: #1b1b1b;
-  &:hover, &:focus {
-    color: #66696d;
-  }
- 
-  &:active, &.active {
-    color: #8e8f91;
-  }
-}
-.ant-btn-link.button-primary {
-  color: #39f;
-  &:hover, &:focus {
-    color: #52a6fb;
-  }
- 
-  &:active, &.active {
-    color: #3d80bf;
-  }
-}
- 
-.ant-btn-link.button-info {
-  color: #2db7f5;
-  &:hover, &:focus {
-    color: #32c8f5;
-  }
- 
-  &:active, &.active {
-    color: #27a3d8;
-  }
-}
- 
-.ant-btn-link.button-success {
-  color: #0c6;
-  &:hover, &:focus {
-    color: #01dc8c;
-  }
- 
-  &:active, &.active {
-    color: #00af57;
-  }
-}
- 
-.ant-btn-link.button-warning {
-  color: #aa6a02;
-  &:hover, &:focus {
-    color: #c68d07;
-  }
- 
-  &:active, &.active {
-    color: #dd8500;
-  }
-}
- 
-.ant-btn-link.button-error {
-  color: #f30;
-  &:hover, &:focus {
-    color: #ff6666;
-  }
- 
-  &:active, &.active {
-    color: #d62a00;
-  }
-}
- 
-.ant-btn-link.button-geekblue {
-  color: #2F54EB;
-  &:hover, &:focus {
-    color: #1d39c4;
-  }
- 
-  &:active, &.active {
-    color: #597ef7;
-  }
-}
- 
-.ant-btn-link.button-purple {
-  color: #722ED1;
-  &:hover, &:focus {
-    color: #9254de;
-  }
- 
-  &:active, &.active {
-    color: #531dab;
-  }
-}
-.ant-btn-link.button-grey {
-  color: #82848a;
-  &:hover, &:focus {
-    color: #909399;
-  }
- 
-  &:active, &.active {
-    color: #c8c9cc;
-  }
-}
 // 查询条件样式
 .table-page-search-wrapper {
   .ant-form.ant-form-inline{

+ 5 - 2
src/components/tools/Logo.vue

@@ -12,6 +12,8 @@
 <script>
 import LogoMax from '@/assets/normalbtn_login.png'
 import LogoMin from '@/assets/selectedbtn_login.png'
+import LogoLightMax from '@/assets/lightMaxLogo.png'
+import LogoLightMin from '@/assets/lightMiniLogo.png'
 import { mapState } from 'vuex'
 export default {
   name: 'Logo',
@@ -38,10 +40,11 @@ export default {
   },
   computed: {
 	  ...mapState({
-		  sidebar: state => state.app.sidebar
+		  sidebar: state => state.app.sidebar,
+      navTheme: state => state.app.theme
 	  }),
 	 logo () {
-      return this.sidebar ? LogoMax : LogoMin
+      return this.sidebar ? (this.navTheme == 'light' ? LogoLightMax : LogoMax) : (this.navTheme == 'light' ? LogoLightMin : LogoMin)
 	 }
   }
 }

+ 7 - 2
src/layouts/BasicLayout.vue

@@ -70,7 +70,7 @@
       </a-layout-footer>
 
       <!-- Setting Drawer (show in development mode) -->
-      <!-- <setting-drawer v-if="!production"></setting-drawer> -->
+      <setting-drawer></setting-drawer>
     </a-layout>
   </a-layout>
 
@@ -196,7 +196,12 @@ export default {
     }
     this.collapsed = !this.sidebarOpened
     this.$store.dispatch('ToggleMultiTab', true)
-	  this.$store.dispatch('ToggleColor', '#1890FF')
+    // light
+	  // this.$store.dispatch('ToggleColor', '#2a86f4')
+    // this.$store.dispatch('ToggleTheme', 'light')
+    // dark
+    this.$store.dispatch('ToggleColor', '#f30f30')
+    this.$store.dispatch('ToggleTheme', 'dark')
   },
   mounted () {
     const userAgent = navigator.userAgent