blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-06 04:00:06 +08:00
Code Issues Projects Releases Wiki Activity

fix: problem of component style in night mode; 🐛

Browse Source 
修复：夜晚模式下组件样式问题；
This commit is contained in:
iczer 2020-07-08 11:49:12 +08:00
parent 32577b038a
commit 719dba0bd9
24 changed files with 86 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/components/HelloWorld.vue
View File

@ -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>

4
src/components/card/ChartCard.vue
View File

@ -37,7 +37,7 @@ export default {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
color: rgba(0,0,0,.45); color: @text-color-second;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
} }
@ -59,7 +59,7 @@ export default {
height: 38px; height: 38px;
} }
.chart-card-footer{ .chart-card-footer{
border-top: 1px solid #e8e8e8; border-top: 1px solid @border-color-base;
padding-top: 9px; padding-top: 9px;
margin-top: 8px; margin-top: 8px;
} }

2
src/components/chart/MiniProgress.vue
View File

@ -25,7 +25,7 @@ export default {
position: relative; position: relative;
width: 100%; width: 100%;
.wrap { .wrap {
background-color: #f5f5f5; background-color: @bg-color;
position: relative; position: relative;
} }
.progress { .progress {

4
src/components/chart/Trend.vue
View File

@ -69,10 +69,10 @@ export default {
.chart-trend-icon{ .chart-trend-icon{
font-size: 12px; font-size: 12px;
&.up{ &.up{
color: #f5222d; color: @red-6;
} }
&.down{ &.down{
color: #52c41a; color: @green-6;
} }
} }
} }

2
src/components/exception/ExceptionPage.vue
View File

@ -51,7 +51,7 @@ export default {
margin-bottom: 24px; margin-bottom: 24px;
} }
.desc{ .desc{
color: rgba(0,0,0,.45); color: @text-color-second;
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
margin-bottom: 16px; margin-bottom: 16px;

4
src/components/form/FormRow.vue
View File

@ -19,10 +19,10 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.form-row{ .form-row{
display: flex; display: flex;
border-bottom: 1px dashed #e8e8e8; border-bottom: 1px dashed @border-color-base;
margin-bottom: 16px; margin-bottom: 16px;
.label { .label {
color: rgba(0, 0, 0, 0.85); color: @title-color;
font-size: 14px; font-size: 14px;
margin-right: 24px; margin-right: 24px;
flex: 0 0 auto; flex: 0 0 auto;

2
src/components/menu/Contextmenu.vue
View File

@ -66,6 +66,6 @@ export default {
z-index: 1; z-index: 1;
border-radius: 4px; border-radius: 4px;
box-shadow: -4px 4px 16px 1px #e6e6e6 !important; box-shadow: -4px 4px 16px 1px @shadow-color !important;
} }
</style> </style>

2
src/components/setting/Setting.vue
View File

@ -97,7 +97,7 @@ export default {
return { return {
animate: this.$store.state.setting.animate.name, animate: this.$store.state.setting.animate.name,
direction: this.$store.state.setting.animate.direction, 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: { computed: {

2
src/components/setting/SettingItem.vue
View File

@ -17,7 +17,7 @@ export default {
margin-bottom: 24px; margin-bottom: 24px;
.title{ .title{
font-size: 14px; font-size: 14px;
color: rgba(0,0,0,.85); color: @title-color;
line-height: 22px; line-height: 22px;
margin-bottom: 12px; margin-bottom: 12px;
} }

2
src/components/task/TaskGroup.vue
View File

@ -62,7 +62,7 @@ export default {
margin: 0 8px; margin: 0 8px;
font-size: 12px; font-size: 12px;
padding: 2px 6px; padding: 2px 6px;
background-color: rgba(27,31,35,0.15); background-color: @base-bg-color;
} }
} }
.actions{ .actions{

4
src/components/task/TaskItem.vue
View File

@ -14,11 +14,11 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.task-item{ .task-item{
margin-bottom: 16px; margin-bottom: 16px;
box-shadow: 0 1px 1px rgba(27,31,35,0.1); box-shadow: 0 1px 1px @shadow-color;
border-radius: 6px; border-radius: 6px;
& :hover{ & :hover{
cursor: move; cursor: move;
box-shadow: 0 1px 1px rgba(27,31,35,0.15); box-shadow: 0 1px 2px @shadow-color;
border-radius: 6px; border-radius: 6px;
} }
} }

2
src/components/tool/AStepItem.vue
View File

@ -52,7 +52,7 @@ export default {
:global{ :global{
.ant-steps-item-process{ .ant-steps-item-process{
.linkable{ .linkable{
color: #40a9ff; color: @primary-color;
} }
} }
} }

10
src/components/tool/AvatarList.vue
View File

@ -1,9 +1,7 @@
<template> <template>
<div class="avatar-list"> <div class="avatar-list">
<ul> <slot>
<slot> </slot>
</slot>
</ul>
</div> </div>
</template> </template>
@ -47,10 +45,9 @@ export default {
} }
</script> </script>
<style lang="less"> <style lang="less" scoped>
.avatar-list { .avatar-list {
display: inline-block; display: inline-block;
ul {
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: 8px;
font-size: 0; font-size: 0;
@ -68,6 +65,5 @@ export default {
} }
} }
} }
}
} }
</style> </style>

4
src/components/tool/Drawer.vue
View File

@ -95,7 +95,7 @@ export default {
left: 0px; left: 0px;
&.open{ &.open{
.content{ .content{
box-shadow: 2px 0 8px rgba(0,0,0,.15); box-shadow: 2px 0 8px @shadow-color;
} }
} }
&.close{ &.close{
@ -109,7 +109,7 @@ export default {
} }
&.open{ &.open{
.content{ .content{
box-shadow: -2px 0 8px rgba(0,0,0,.15); box-shadow: -2px 0 8px @shadow-color;
} }
} }
&.close{ &.close{

2
src/components/tool/FooterToolBar.vue
View File

@ -21,7 +21,7 @@ export default {
width: 100%; width: 100%;
bottom: 0; bottom: 0;
right: 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; background: @base-bg-color;
border-top: 1px solid @border-color-split; border-top: 1px solid @border-color-split;
padding: 12px 24px; padding: 12px 24px;

2
src/layouts/AdminLayout.vue
View File

@ -112,7 +112,7 @@ export default {
font-size: 22px; font-size: 22px;
width: 40px; width: 40px;
height: 40px; height: 40px;
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); box-shadow: -2px 0 8px @shadow-color;
} }
} }
</style> </style>

4
src/layouts/footer/PageFooter.vue
View File

@ -24,7 +24,7 @@ export default {
margin: 48px 0 24px; margin: 48px 0 24px;
text-align: center; text-align: center;
.copyright{ .copyright{
color: rgba(0,0,0,.45); color: @text-color-second;
font-size: 14px; font-size: 14px;
} }
.links{ .links{
@ -33,7 +33,7 @@ export default {
margin-right: 40px; margin-right: 40px;
} }
a{ a{
color: rgba(0,0,0,.45); color: @text-color-second;
-webkit-transition: all .3s; -webkit-transition: all .3s;
transition: all .3s; transition: all .3s;
} }

2
src/layouts/header/HeaderSearch.vue
View File

@ -41,7 +41,7 @@ export default {
} }
.search-input{ .search-input{
border: 0; 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; transition: width 0.3s ease-in-out;
input{ input{
border: 0; border: 0;

2
src/pages/list/search/ApplicationList.vue
View File

@ -81,7 +81,7 @@ export default {
margin: 0; margin: 0;
} }
p:first-child { p:first-child {
color: rgba(0,0,0,.45); color: @text-color-second;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
margin-bottom: 4px; margin-bottom: 4px;

4
src/pages/list/search/ArticleList.vue
View File

@ -51,7 +51,7 @@ export default {
max-width: 720px; max-width: 720px;
} }
.author { .author {
color: rgba(0,0,0,.45); color: @text-color-second;
margin-top: 16px; margin-top: 16px;
line-height: 22px; line-height: 22px;
& > :global(.ant-avatar) { & > :global(.ant-avatar) {
@ -63,7 +63,7 @@ export default {
top: 1px; top: 1px;
} }
& > em { & > em {
color: rgba(0,0,0,.25); color: @disabled-color;
font-style: normal; font-style: normal;
margin-left: 16px; margin-left: 16px;
} }

2
src/pages/list/search/ProjectList.vue
View File

@ -47,7 +47,7 @@ export default {
line-height: 20px; line-height: 20px;
height: 20px; height: 20px;
& > span { & > span {
color: rgba(0,0,0,.45); color: @text-color-second;
flex: 1; flex: 1;
font-size: 12px; font-size: 12px;
} }

17
src/pages/result/Error.vue
View File

@ -1,5 +1,5 @@
<template> <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"> <result style="margin-bottom: 16px; margin-top: 48px" :is-success="false" :title="title" :description="description">
<template slot="action"> <template slot="action">
<a-button type="primary" >返回修改</a-button> <a-button type="primary" >返回修改</a-button>
@ -9,12 +9,12 @@
您提交的内容有如下错误： 您提交的内容有如下错误：
</div> </div>
<div style="margin-bottom: 16px"> <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> <a style="margin-left: 16px">立即解冻 <a-icon type="right" /></a>
</div> </div>
<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> <a style="margin-left: 16px">立即升级 <a-icon type="right" /></a>
</div> </div>
@ -24,7 +24,7 @@
</template> </template>
<script> <script>
import Result from '../../components/result/Result' import Result from '@/components/result/Result'
export default { export default {
name: 'Error', name: 'Error',
components: {Result}, components: {Result},
@ -37,6 +37,11 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="less">
.result-error{
.error-icon{
color: @red-6;
margin-right: 8px
}
}
</style> </style>

80
src/pages/result/Success.vue
View File

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

1
src/theme/default/color.less
View File

@ -25,6 +25,7 @@
@hover-bg-color-dark: @primary-7; @hover-bg-color-dark: @primary-7;
@hover-bg-color-night: rgba(255, 255, 255, 0.025); @hover-bg-color-night: rgba(255, 255, 255, 0.025);
@header-bg-color-dark: @layout-header-background; @header-bg-color-dark: @layout-header-background;
@border-color: @border-color-base;
@shadow-down: @shadow-1-down; @shadow-down: @shadow-1-down;
@shadow-up: @shadow-1-up; @shadow-up: @shadow-1-up;