update 主题色调整,白色头部导航、红色头部导航区分

This commit is contained in:
赵霄
2023-11-30 09:38:47 +08:00
parent 0ced43397a
commit f0e71e0bac
7 changed files with 84 additions and 66 deletions
+31 -19
View File
@@ -2,6 +2,7 @@
<div id="app">
<van-nav-bar
v-if="hasNavBar"
:class="{'white-style': isWhiteNavBar}"
:title="pageTitle"
:left-text="hasBack ? $t('back') : ''"
:left-arrow="hasBack"
@@ -55,6 +56,10 @@ export default {
return ''
}
return this.$t('pageTitle.' + this.$route.meta.pageTitle)
},
// 是否白色头部导航
isWhiteNavBar () {
return !!this.$route.meta.isWhiteNavBar
}
},
methods: {
@@ -81,34 +86,41 @@ export default {
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.van-nav-bar__content {
height: 0.88rem;
}
/deep/ .van-nav-bar__left, /deep/ .van-nav-bar__right, /deep/ .van-nav-bar__arrow {
/*头部导航字号处理*/
/deep/ .van-nav-bar__left, /deep/ .van-nav-bar__right, /deep/ .van-nav-bar__arrow, /deep/ .van-nav-bar__title {
font-size: 0.36rem;
}
@font-color: #34383F;
/deep/ .van-nav-bar {
background-color: #FFFFFF;
.van-nav-bar__title {
color: @font-color;
font-size: 0.36rem;
}
.van-nav-bar__text {
color: @font-color;
}
.van-icon {
color: @font-color;
}
}
/*头部导航固定*/
.scroll-box {
height: calc(100vh - 0.88rem);
overflow: auto;
}
/*处理白色头部导航样式*/
.white-style {
background-color: #FFFFFF !important;
/deep/ .van-nav-bar__title {
color: @font-color !important;
}
/deep/ .van-nav-bar__text {
color: @font-color !important;
}
/deep/ .van-icon {
color: @font-color !important;
}
}
/deep/ .van-hairline--bottom::after {
border: none;
}
</style>
+3 -1
View File
@@ -1 +1,3 @@
@primary-color: '#D52C26';
@primary-color: #E63636;
@font-color: #1D2129;
@label-font-color: #767676;
+3 -1
View File
@@ -32,7 +32,9 @@ const routes = [
name: 'NoMobile',
meta: {
hasNavBar: true,
hasBack: true
hasBack: true,
// 是否白色头部导航
isWhiteNavBar: true
},
component: () => import('@/views/exception/NoMobile')
},
+1 -1
View File
@@ -130,7 +130,7 @@ export default {
margin: 20px 0;
}
.login-btn {
background-color: #D52C26;
background-color: @primary-color;
}
}
</style>