修改登录页面以及主题色

.gitignore

@@ -12,4 +12,5 @@
 # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
 hs_err_pid*
 node_modules
-dist
+dist
+epdc-admin

public/index.html

@@ -32,13 +32,13 @@
   <!-- 开发环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
   <script>
-    window.SITE_CONFIG['apiURL'] = 'http://localhost:9094'
+    window.SITE_CONFIG['apiURL'] = 'http://192.168.1.20:9094'
   </script>
   <% } %>
   <!-- 集成测试环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
   <script>
-    window.SITE_CONFIG['apiURL'] = 'http://192.168.1.20:9094'
+    window.SITE_CONFIG['apiURL'] = 'http://219.146.91.110:9094'
   </script>
   <% } %>
   <!-- 验收测试环境 -->

src/assets/scss/pages/login.scss

@@ -1,4 +1,5 @@
 .aui-page__login {
+
   &::before,
   &::after {
     position: absolute;
@@ -9,13 +10,16 @@
     z-index: -1;
     content: "";
   }
+
   &::before {
     background-image: url(~@/assets/img/login_bg.jpg);
-    background-size: cover;
+    background-size: contain;
   }
+
   &::after {
     background-color: rgba(38, 50, 56, .4);
   }
+
   .aui-content {
     display: flex;
     flex-flow: column wrap;
@@ -24,6 +28,7 @@
     min-height: 100vh;
     padding: 50px 20px 150px;
     text-align: center;
+
     &__wrapper {
       height: 100vh;
       background-color: transparent;
@@ -31,9 +36,11 @@
       overflow-y: auto;
     }
   }
+
   .login-header {
     padding: 20px;
     color: #fff;
+
     .login-brand {
       margin: 0 0 15px;
       font-size: 40px;
@@ -41,49 +48,60 @@
       letter-spacing: 2px;
       text-transform: uppercase;
     }
+
     .login-intro {
       padding: 0;
       margin: 0;
       list-style: none;
-      > li {
+
+      >li {
         font-size: 16px;
         line-height: 1.5;
         color: rgba(255, 255, 255, .6);
-        & + li {
+
+        &+li {
           margin-top: 5px;
         }
       }
     }
   }
+
   .login-body,
   .login-footer {
     width: 460px;
   }
+
   .login-body {
     padding: 20px 30px;
     background-color: #fff;
+
     .login-title {
       font-size: 18px;
       font-weight: 400;
     }
+
     .el-input__prefix .el-input__icon {
       font-size: 16px;
     }
+
     .login-captcha {
       height: $--input-height;
       line-height: $--input-height -2px;
-      > img {
+
+      >img {
         max-width: 100%;
         cursor: pointer;
       }
     }
+
     .login-shortcut {
       margin-bottom: 20px;
+
       &__title {
         position: relative;
         margin: 0 0 15px;
         font-weight: 400;
-        
+
         &::before {
           position: absolute;
           top: 50%;
@@ -96,7 +114,8 @@
           background-color: $--border-color-base;
           overflow: hidden;
         }
-        > span {
+
+        >span {
           position: relative;
           z-index: 2;
           padding: 0 20px;
@@ -104,12 +123,14 @@
           background-color: #fff;
         }
       }
+
       &__list {
         padding: 0;
         margin: 0;
         list-style: none;
         font-size: 0;
-        > li {
+
+        >li {
           display: inline-block;
           vertical-align: middle;
           margin: 0 10px;
@@ -117,27 +138,33 @@
         }
       }
     }
+
     .login-guide {
       color: rgba(0, 0, 0, .3);
     }
   }
+
   .login-footer {
     position: absolute;
     bottom: 0;
     padding: 20px;
     color: rgba(255, 255, 255, .6);
+
     p {
       margin: 10px 0;
     }
+
     a {
       padding: 0 5px;
       color: rgba(255, 255, 255, .6);
+
       &:focus,
       &:hover {
         color: #fff;
       }
     }
   }
+
   // 右侧垂直风格
   &--right-vertical {
     .aui-content {
@@ -146,6 +173,7 @@
       align-items: stretch;
       padding: 0;
     }
+
     .login-header {
       flex: 1;
       display: flex;
@@ -154,6 +182,7 @@
       padding: 30px 120px;
       text-align: left;
     }
+
     .login-body {
       position: relative;
       display: flex;
@@ -161,15 +190,19 @@
       justify-content: center;
       padding: 120px 30px 150px;
       text-align: center;
+
       .login-guide {
         margin-top: 0;
       }
     }
+
     .login-footer {
       right: 0;
       color: $--color-text-regular;
+
       a {
         color: $--color-text-regular;
+
         &:focus,
         &:hover {
           color: $--color-primary;
@@ -178,6 +211,7 @@
     }
   }
 }
+
 @media (max-width: 991px) {
   .aui-page__login {
     &--right-vertical {
@@ -187,10 +221,12 @@
     }
   }
 }
+
 @media (max-width: 767px) {
   .aui-page__login {
     &--right-vertical {
       .login-header {
+
         .login-brand,
         .login-intro {
           display: none;
@@ -199,18 +235,23 @@
     }
   }
 }
+
 @media (max-width: 575px) {
   .aui-page__login {
+
     .login-body,
     .login-footer {
       width: 100%;
     }
+
     .login-captcha {
       text-align: left;
-      > img {
+
+      >img {
         width: 136px;
       }
     }
+
     &--right-vertical {
       .login-header {
         display: none;

src/element-ui/config.js

@@ -6,18 +6,83 @@
  *  true ：已构建，不再构建
  *  false：未构建，执行命令后会自动构建
  */
-module.exports = [
-  {  name: 'default',   color: '#409EFF', desc: '默认色', hasBuild: false },
-  {  name: 'cyan',      color: '#0BB2D4', desc: '青色',   hasBuild: false },
-  {  name: 'blue',      color: '#3E8EF7', desc: '蓝色',   hasBuild: false },
-  {  name: 'green',     color: '#11C26D', desc: '绿色',   hasBuild: false },
-  {  name: 'turquoise', color: '#17B3A3', desc: '蓝绿色', hasBuild: false },
-  {  name: 'indigo',    color: '#667AFA', desc: '靛青色', hasBuild: false },
-  {  name: 'brown',     color: '#997B71', desc: '棕色',   hasBuild: false },
-  {  name: 'purple',    color: '#9463F7', desc: '紫色',   hasBuild: false },
-  {  name: 'gray',      color: '#757575', desc: '灰色',   hasBuild: false },
-  {  name: 'orange',    color: '#EB6709', desc: '橙色',   hasBuild: false },
-  {  name: 'pink',      color: '#F74584', desc: '粉红色', hasBuild: false },
-  {  name: 'yellow',    color: '#FCB900', desc: '黄色',   hasBuild: false },
-  {  name: 'red',       color: '#FF4C52', desc: '红色',   hasBuild: false }
+const colorConfig = [{
+    name: 'default',
+    color: '#409EFF',
+    desc: '默认色',
+    hasBuild: false
+  },
+  {
+    name: 'cyan',
+    color: '#0BB2D4',
+    desc: '青色',
+    hasBuild: false
+  },
+  {
+    name: 'blue',
+    color: '#3E8EF7',
+    desc: '蓝色',
+    hasBuild: false
+  },
+  {
+    name: 'green',
+    color: '#11C26D',
+    desc: '绿色',
+    hasBuild: false
+  },
+  {
+    name: 'turquoise',
+    color: '#17B3A3',
+    desc: '蓝绿色',
+    hasBuild: false
+  },
+  {
+    name: 'indigo',
+    color: '#667AFA',
+    desc: '靛青色',
+    hasBuild: false
+  },
+  {
+    name: 'brown',
+    color: '#997B71',
+    desc: '棕色',
+    hasBuild: false
+  },
+  {
+    name: 'purple',
+    color: '#9463F7',
+    desc: '紫色',
+    hasBuild: false
+  },
+  {
+    name: 'gray',
+    color: '#757575',
+    desc: '灰色',
+    hasBuild: false
+  },
+  {
+    name: 'orange',
+    color: '#EB6709',
+    desc: '橙色',
+    hasBuild: false
+  },
+  {
+    name: 'pink',
+    color: '#F74584',
+    desc: '粉红色',
+    hasBuild: false
+  },
+  {
+    name: 'yellow',
+    color: '#FCB900',
+    desc: '黄色',
+    hasBuild: false
+  },
+  {
+    name: 'red',
+    color: '#FF4C52',
+    desc: '红色',
+    hasBuild: true
+  }
 ]
+export default colorConfig

src/element-ui/theme-variables.scss

@@ -2,28 +2,38 @@
 
 /* Transition
 -------------------------- */
-$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
+$--all-transition: all .3s cubic-bezier(.645, .045, .355, 1) !default;
 $--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
 $--fade-linear-transition: opacity 200ms linear !default;
-$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
-$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
+$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--border-transition-base: border-color .2s cubic-bezier(.645, .045, .355, 1) !default;
+$--color-transition-base: color .2s cubic-bezier(.645, .045, .355, 1) !default;
 
 /* Colors
 -------------------------- */
 $--color-white: #fff !default;
 $--color-black: #000 !default;
 
-$--color-primary: #17B3A3 !default;
-$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
-$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
-$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
-$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
-$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
-$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
-$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
-$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
-$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
+$--color-primary: #FF4C52 !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default;
+/* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default;
+/* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default;
+/* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default;
+/* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default;
+/* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default;
+/* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default;
+/* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default;
+/* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default;
+/* ecf5ff */
 
 $--color-success: #67c23a !default;
 $--color-warning: #e6a23c !default;
@@ -70,8 +80,10 @@ $--border-radius-circle: 100% !default;
 
 /* Box-shadow
 -------------------------- */
-$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
-$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
+$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12),
+0 0 6px rgba(0, 0, 0, .04) !default;
+$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12),
+0 0 6px rgba(0, 0, 0, .12) !default;
 $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
 
 /* Fill
@@ -365,9 +377,11 @@ $--cascader-menu-option-color-disabled: #999 !default;
 $--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default;
 $--cascader-menu-option-empty-color: #666 !default;
 $--cascader-menu-group-color: #999 !default;
-$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default;
+$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14),
+0 0 3px rgba($--color-black, 0.14) !default;
 $--cascader-menu-option-pinyin-color: #999 !default;
-$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14) !default;
+$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14),
+1px 0 2px rgba($--color-black, 0.14) !default;
 
 /* Group
 -------------------------- */
@@ -690,16 +704,13 @@ $--md: 992px !default;
 $--lg: 1200px !default;
 $--xl: 1920px !default;
 
-$--breakpoints: (
-  'xs' : (max-width: $--sm),
+$--breakpoints: ('xs' : (max-width: $--sm),
   'sm' : (min-width: $--sm),
   'md' : (min-width: $--md),
   'lg' : (min-width: $--lg),
-  'xl' : (min-width: $--xl)
-);
+  'xl' : (min-width: $--xl));
 
-$--breakpoints-spec: (
-  'xs-only' : (max-width: $--sm - 1),
+$--breakpoints-spec: ('xs-only' : (max-width: $--sm - 1),
   'sm-and-up' : (min-width: $--sm),
   'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)",
   'sm-and-down': (max-width: $--md - 1),
@@ -710,4 +721,4 @@ $--breakpoints-spec: (
   'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)",
   'lg-and-down': (max-width: $--xl - 1),
   'xl-only' : (min-width: $--xl),
-);
+);

src/views/main-theme-tools.vue

@@ -1,21 +1,31 @@
 <template>
-  <div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
-    <div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
-      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-setting"></use></svg>
+  <div class="aui-theme-tools"
+       :class="{ 'aui-theme-tools--open': isOpen }">
+    <div class="aui-theme-tools__toggle"
+         @click="isOpen = !isOpen">
+      <svg class="icon-svg"
+           aria-hidden="true">
+        <use xlink:href="#icon-setting"></use>
+      </svg>
     </div>
     <div class="aui-theme-tools__content">
       <div class="aui-theme-tools__item">
         <h3>Navbar</h3>
-        <el-checkbox v-model="$store.state.navbarLayoutType" true-label="colorful">colorful 鲜艳</el-checkbox>
+        <el-checkbox v-model="$store.state.navbarLayoutType"
+                     true-label="colorful">colorful 鲜艳</el-checkbox>
       </div>
       <div class="aui-theme-tools__item">
         <h3>Sidebar</h3>
-        <el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark">dark 黑色</el-checkbox>
+        <el-checkbox v-model="$store.state.sidebarLayoutSkin"
+                     true-label="dark">dark 黑色</el-checkbox>
       </div>
       <div class="aui-theme-tools__item">
         <h3>Theme</h3>
-        <el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
-          <el-radio v-for="item in themeList" :key="item.name" :label="item.name">{{ `${item.name} ${item.desc}` }}</el-radio>
+        <el-radio-group v-model="themeColor"
+                        @change="themeColorChangeHandle">
+          <el-radio v-for="item in themeList"
+                    :key="item.name"
+                    :label="item.name">{{ `${item.name} ${item.desc}` }}</el-radio>
         </el-radio-group>
       </div>
     </div>
@@ -23,12 +33,13 @@
 </template>
 
 <script>
+import themeConfig from '@/element-ui/config.js'
 export default {
   data () {
     return {
       isOpen: false,
-      themeList: require('@/element-ui/config.js'),
-      themeColor: 'turquoise'
+      themeList: themeConfig,
+      themeColor: 'red'
     }
   },
   methods: {

src/views/pages/login.vue

@@ -4,7 +4,7 @@
       <main class="aui-content">
         <div class="login-header">
           <h2 class="login-brand"
-              style="text-transform: none;">{{ $t('brand.lg') }}</h2>
+              style="text-transform: none;color:#FF4C52;">{{ $t('brand.lg') }}</h2>
         </div>
         <div class="login-body">
           <h3 class="login-title">{{ $t('login.title') }}</h3>

vue.config.js

@@ -2,8 +2,10 @@
  * 配置参考: https://cli.vuejs.org/zh/config/
  */
 module.exports = {
-  baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
+  baseUrl: process.env.NODE_ENV === 'production' ? '/epdc-admin' : '/epdc-admin',
   productionSourceMap: false,
+  outputDir: 'epdc-admin',
+  assetsDir: 'static',
   devServer: {
     open: true,
     port: 8001,