fix: problem of component style in night mode; 🐛

修复：夜晚模式下组件样式问题；
5 years ago · 719dba0bd9
parent 32577b038a
commit 719dba0bd9
24 changed files with 86 additions and 187 deletions
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -1,113 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
--- a/src/components/card/ChartCard.vue
+++ b/src/components/card/ChartCard.vue
@ -37,7 +37,7 @@ export default {
    position: relative;
    overflow: hidden;
    width: 100%;
-    color: rgba(0,0,0,.45);
+    color: @text-color-second;
    font-size: 14px;
    line-height: 22px;
  }
@ -59,7 +59,7 @@ export default {
    height: 38px;
  }
  .chart-card-footer{
-    border-top: 1px solid #e8e8e8;
+    border-top: 1px solid @border-color-base;
    padding-top: 9px;
    margin-top: 8px;
  }
--- a/src/components/chart/MiniProgress.vue
+++ b/src/components/chart/MiniProgress.vue
@ -25,7 +25,7 @@ export default {
    position: relative;
    width: 100%;
    .wrap {
-      background-color: #f5f5f5;
+      background-color: @bg-color;
      position: relative;
    }
    .progress {
--- a/src/components/chart/Trend.vue
+++ b/src/components/chart/Trend.vue
@ -69,10 +69,10 @@ export default {
    .chart-trend-icon{
      font-size: 12px;
      &.up{
-        color: #f5222d;
+        color: @red-6;
      }
      &.down{
-        color: #52c41a;
+        color: @green-6;
      }
    }
  }
--- a/src/components/exception/ExceptionPage.vue
+++ b/src/components/exception/ExceptionPage.vue
@ -51,7 +51,7 @@ export default {
        margin-bottom: 24px;
      }
      .desc{
-        color: rgba(0,0,0,.45);
+        color: @text-color-second;
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 16px;
--- a/src/components/form/FormRow.vue
+++ b/src/components/form/FormRow.vue
@ -19,10 +19,10 @@ export default {
 <style lang="less" scoped>
  .form-row{
    display: flex;
-    border-bottom: 1px dashed #e8e8e8;
+    border-bottom: 1px dashed @border-color-base;
    margin-bottom: 16px;
    .label {
-      color: rgba(0, 0, 0, 0.85);
+      color: @title-color;
      font-size: 14px;
      margin-right: 24px;
      flex: 0 0 auto;
--- a/src/components/menu/Contextmenu.vue
+++ b/src/components/menu/Contextmenu.vue
@ -66,6 +66,6 @@ export default {
    z-index: 1;

    border-radius: 4px;
-    box-shadow: -4px 4px 16px 1px #e6e6e6 !important;
+    box-shadow: -4px 4px 16px 1px @shadow-color !important;
  }
 </style>
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@ -97,7 +97,7 @@ export default {
    return {
      animate: this.$store.state.setting.animate.name,
      direction: this.$store.state.setting.animate.direction,
-      colors: ['#f5222d', '#fa541c', '#fadb14', '#49aa19', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
+      colors: ['#f5222d', '#fa541c', '#fadb14', '#42b983', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
    }
  },
  computed: {
--- a/src/components/setting/SettingItem.vue
+++ b/src/components/setting/SettingItem.vue
@ -17,7 +17,7 @@ export default {
    margin-bottom: 24px;
    .title{
      font-size: 14px;
-      color: rgba(0,0,0,.85);
+      color: @title-color;
      line-height: 22px;
      margin-bottom: 12px;
    }
--- a/src/components/task/TaskGroup.vue
+++ b/src/components/task/TaskGroup.vue
@ -62,7 +62,7 @@ export default {
          margin: 0 8px;
          font-size: 12px;
          padding: 2px 6px;
-          background-color: rgba(27,31,35,0.15);
+          background-color: @base-bg-color;
        }
      }
      .actions{
--- a/src/components/task/TaskItem.vue
+++ b/src/components/task/TaskItem.vue
@ -14,11 +14,11 @@ export default {
 <style lang="less" scoped>
  .task-item{
    margin-bottom: 16px;
-    box-shadow: 0 1px 1px rgba(27,31,35,0.1);
+    box-shadow: 0 1px 1px @shadow-color;
    border-radius: 6px;
    & :hover{
      cursor: move;
-      box-shadow: 0 1px 1px rgba(27,31,35,0.15);
+      box-shadow: 0 1px 2px @shadow-color;
      border-radius: 6px;
    }
  }
--- a/src/components/tool/AStepItem.vue
+++ b/src/components/tool/AStepItem.vue
@ -52,7 +52,7 @@ export default {
  :global{
    .ant-steps-item-process{
      .linkable{
-        color: #40a9ff;
+        color: @primary-color;
      }
    }
  }
--- a/src/components/tool/AvatarList.vue
+++ b/src/components/tool/AvatarList.vue
@ -1,9 +1,7 @@
 <template>
  <div class="avatar-list">
-    <ul>
-      <slot>
-      </slot>
-    </ul>
+    <slot>
+    </slot>
  </div>
 </template>

@ -47,10 +45,9 @@ export default {
 }
 </script>

-<style lang="less">
+<style lang="less" scoped>
  .avatar-list {
    display: inline-block;
-    ul {
      display: inline-block;
      margin-left: 8px;
      font-size: 0;
@ -68,6 +65,5 @@ export default {
          }
        }
      }
-    }
  }
 </style>
--- a/src/components/tool/Drawer.vue
+++ b/src/components/tool/Drawer.vue
@ -95,7 +95,7 @@ export default {
      left: 0px;
      &.open{
        .content{
-          box-shadow: 2px 0 8px rgba(0,0,0,.15);
+          box-shadow: 2px 0 8px @shadow-color;
        }
      }
      &.close{
@ -109,7 +109,7 @@ export default {
      }
      &.open{
        .content{
-          box-shadow: -2px 0 8px rgba(0,0,0,.15);
+          box-shadow: -2px 0 8px @shadow-color;
        }
      }
      &.close{
--- a/src/components/tool/FooterToolBar.vue
+++ b/src/components/tool/FooterToolBar.vue
@ -21,7 +21,7 @@ export default {
    width: 100%;
    bottom: 0;
    right: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
+    box-shadow: 0 -1px 2px @shadow-color;
    background: @base-bg-color;
    border-top: 1px solid @border-color-split;
    padding: 12px 24px;
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@ -112,7 +112,7 @@ export default {
      font-size: 22px;
      width: 40px;
      height: 40px;
-      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+      box-shadow: -2px 0 8px @shadow-color;
    }
  }
 </style>
--- a/src/layouts/footer/PageFooter.vue
+++ b/src/layouts/footer/PageFooter.vue
@ -24,7 +24,7 @@ export default {
    margin: 48px 0 24px;
    text-align: center;
    .copyright{
-      color: rgba(0,0,0,.45);
+      color: @text-color-second;
      font-size: 14px;
    }
    .links{
@ -33,7 +33,7 @@ export default {
        margin-right: 40px;
      }
      a{
-        color: rgba(0,0,0,.45);
+        color: @text-color-second;
        -webkit-transition: all .3s;
        transition: all .3s;
      }
--- a/src/layouts/header/HeaderSearch.vue
+++ b/src/layouts/header/HeaderSearch.vue
@ -41,7 +41,7 @@ export default {
    }
    .search-input{
      border: 0;
-      border-bottom: 1px rgba(3, 5, 6, 0.23) solid;
+      border-bottom: 1px solid @border-color-split;
      transition: width 0.3s ease-in-out;
      input{
        border: 0;
--- a/src/pages/list/search/ApplicationList.vue
+++ b/src/pages/list/search/ApplicationList.vue
@ -81,7 +81,7 @@ export default {
        margin: 0;
      }
      p:first-child {
-        color: rgba(0,0,0,.45);
+        color: @text-color-second;
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 4px;
--- a/src/pages/list/search/ArticleList.vue
+++ b/src/pages/list/search/ArticleList.vue
@ -51,7 +51,7 @@ export default {
      max-width: 720px;
    }
    .author {
-      color: rgba(0,0,0,.45);
+      color: @text-color-second;
      margin-top: 16px;
      line-height: 22px;
      & > :global(.ant-avatar) {
@ -63,7 +63,7 @@ export default {
          top: 1px;
        }
      & > em {
-          color: rgba(0,0,0,.25);
+          color: @disabled-color;
          font-style: normal;
          margin-left: 16px;
        }
--- a/src/pages/list/search/ProjectList.vue
+++ b/src/pages/list/search/ProjectList.vue
@ -47,7 +47,7 @@ export default {
    line-height: 20px;
    height: 20px;
    & > span {
-      color: rgba(0,0,0,.45);
+      color: @text-color-second;
      flex: 1;
      font-size: 12px;
    }
--- a/src/pages/result/Error.vue
+++ b/src/pages/result/Error.vue
@ -1,5 +1,5 @@
 <template>
-    <a-card :bordered="false">
+    <a-card class="result-error" :bordered="false">
      <result style="margin-bottom: 16px; margin-top: 48px" :is-success="false" :title="title" :description="description">
        <template slot="action">
          <a-button type="primary" >返回修改</a-button>
@ -9,12 +9,12 @@
            您提交的内容有如下错误：
          </div>
          <div style="margin-bottom: 16px">
-            <a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
+            <a-icon class="error-icon" type="close-circle-o"/>
            您的账户已被冻结
            <a style="margin-left: 16px">立即解冻 <a-icon type="right" /></a>
          </div>
          <div>
-            <a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
+            <a-icon class="error-icon" type="close-circle-o"/>
            您的账户还不具备申请资格
            <a style="margin-left: 16px">立即升级 <a-icon type="right" /></a>
          </div>
@ -24,7 +24,7 @@
 </template>

 <script>
-import Result from '../../components/result/Result'
+import Result from '@/components/result/Result'
 export default {
  name: 'Error',
  components: {Result},
@ -37,6 +37,11 @@ export default {
 }
 </script>

-<style scoped>
-
+<style scoped lang="less">
+.result-error{
+  .error-icon{
+    color: @red-6;
+    margin-right: 8px
+  }
+}
 </style>
--- a/src/pages/result/Success.vue
+++ b/src/pages/result/Success.vue
@ -1,37 +1,37 @@
 <template>
-    <a-card :bordered="false">
-      <result :is-success="true" :description="description" :title="title">
-        <template slot="action">
-          <a-button type="primary">返回列表</a-button>
-          <a-button style="margin-left: 8px">查看项目</a-button>
-          <a-button style="margin-left: 8px" @click="print">打印</a-button>
-        </template>
-        <div>
-          <div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">项目名称</div>
-          <detail-list size="small" style="max-width: 800px; margin-bottom: 8px">
-            <detail-list-item term="项目ID">20180724089</detail-list-item>
-            <detail-list-item term="负责人">曲丽丽</detail-list-item>
-            <detail-list-item term="生效时间">016-12-12 ~ 2017-12-12</detail-list-item>
-          </detail-list>
-          <a-steps :current="1" progressDot>
-            <a-step title="创建项目">
-              <a-step-item-group slot="description">
-                <a-step-item title="曲丽丽" icon="dingding-o"/>
-                <a-step-item title="2016-12-12 12:32"/>
-              </a-step-item-group>
-            </a-step>
-            <a-step title="部门初审">
-              <a-step-item-group slot="description">
-                <a-step-item title="周毛毛" icon="dingding-o" :iconStyle="{color: '#00A0E9'}"/>
-                <a-step-item title="催一下" :titleStyle="{color: '#00A0E9'}"/>
-              </a-step-item-group>
-            </a-step>
-            <a-step title="财务复核"></a-step>
-            <a-step title="完成" ></a-step>
-          </a-steps>
-        </div>
-      </result>
-    </a-card>
+  <a-card class="result-success" :bordered="false">
+    <result :is-success="true" :description="description" :title="title">
+      <template slot="action">
+        <a-button class="action" type="primary">返回列表</a-button>
+        <a-button class="action" >查看项目</a-button>
+        <a-button class="action" @click="print">打印</a-button>
+      </template>
+      <div>
+        <div class="project-name">项目名称</div>
+        <detail-list size="small" style="max-width: 800px; margin-bottom: 8px">
+          <detail-list-item term="项目ID">20180724089</detail-list-item>
+          <detail-list-item term="负责人">曲丽丽</detail-list-item>
+          <detail-list-item term="生效时间">016-12-12 ~ 2017-12-12</detail-list-item>
+        </detail-list>
+        <a-steps :current="1" progressDot>
+          <a-step title="创建项目">
+            <a-step-item-group slot="description">
+              <a-step-item title="曲丽丽" icon="dingding-o"/>
+              <a-step-item title="2016-12-12 12:32"/>
+            </a-step-item-group>
+          </a-step>
+          <a-step title="部门初审">
+            <a-step-item-group slot="description">
+              <a-step-item title="周毛毛" icon="dingding-o" :iconStyle="{color: '#00A0E9'}"/>
+              <a-step-item title="催一下" :titleStyle="{color: '#00A0E9'}"/>
+            </a-step-item-group>
+          </a-step>
+          <a-step title="财务复核"></a-step>
+          <a-step title="完成" ></a-step>
+        </a-steps>
+      </div>
+    </result>
+  </a-card>
 </template>

 <script>
@ -61,6 +61,16 @@ export default {
 }
 </script>

-<style scoped>
-
+<style scoped lang="less">
+.result-success{
+  .action:not(:first-child){
+    margin-left: 8px;
+  }
+  .project-name{
+    font-size: 16px;
+    color: @title-color;
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+}
 </style>
--- a/src/theme/default/color.less
+++ b/src/theme/default/color.less
@ -25,6 +25,7 @@
@hover-bg-color-dark: @primary-7;
@hover-bg-color-night: rgba(255, 255, 255, 0.025);
@header-bg-color-dark: @layout-header-background;
+@border-color: @border-color-base;

@shadow-down: @shadow-1-down;
@shadow-up: @shadow-1-up;