提交 77b2b159 authored 作者: 龙菲's avatar 龙菲

修改首页为蓝色,其他页为绿色

上级 b6285e7e
差异被折叠。
$themeColor:#223e36;
// $themeColor:#223e36;
// $themeColor: #2069c4;
$themeColor:#132c33;
$puHuiTi: "Alibaba-PuHuiTi";
$siyuanSongBold: "SourceHanSerifCN-Bold";
\ No newline at end of file
......@@ -3,6 +3,7 @@
<div
:class="{
footer: true,
isHome:isHome,
isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4',
......@@ -63,8 +64,10 @@ export default {
computed: {
...mapGetters(["curPath", "navbarStyle"]),
},
watch: {
curPath: {
handler: function (value) {
this.isHome = value.name == "home";
if (value.params.themeType) {
this.$store.commit("app/CHANGE_NAV_COLOR", value.params.themeType);
} else {
......@@ -73,8 +76,20 @@ export default {
},
immediate: true,
},
},
// curPath: {
// handler: function (value) {
// if (value.params.themeType) {
// this.$store.commit("app/CHANGE_NAV_COLOR", value.params.themeType);
// } else {
// this.$store.commit("app/CHANGE_NAV_COLOR", "1");
// }
// },
// immediate: true,
// },
data() {
return {
isHome: true,
mapData: [
{
title: "首页",
......@@ -147,6 +162,9 @@ export default {
</script>
<style lang="scss" scoped>
.isHome {
background-color: #2069c4 !important;
}
.footer {
display: flex;
// height: 200px;
......
......@@ -10,8 +10,11 @@
<div class="total-title">目前共有藏品</div>
<div class="amount">12,313件</div>
</div>
<div class="img-container">
<img src="@/assets/imgs/list/banner2.png" alt=""></img>
<!-- <div class="banner-1">
<img src="@/assets/imgs/list/banner3.png" alt="" />
</div> -->
<div class="banner-2">
<img src="@/assets/imgs/list/banner2.png" alt="" />
</div>
</div>
</template>
......@@ -34,6 +37,10 @@ export default {
height: 360px;
position: relative;
background-color: rgba($themeColor, 0.9);
padding: 0 13%;
display: flex;
align-items: center;
justify-content: space-between;
// height: 222px;
// background-image: url("@/assets/imgs/list/banner2.png");
// background-size:100% 100%;
......@@ -43,26 +50,38 @@ export default {
// background-position: 0 -100px;
.total {
width: 400px;
position: absolute;
left: 200px;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-family: $puHuiTi;
// position: absolute;
// left: 200px;
// top: 50%;
// transform: translateY(-50%);
.total-title {
font-size: 28px;
}
.amount{
.amount {
font-size: 56px;
font-weight: bold;
}
}
.img-container {
position: absolute;
right: 200px;
top: 61%;
transform: translateY(-50%);
width: 800px;
// .banner-1 {
// position: absolute;
// left: 620px;
// top: 54%;
// transform: translateY(-50%);
// width: 280px;
// img {
// width: 100%;
// height: 100%;
// }
// }
.banner-2 {
// position: absolute;
// right: 320px;
// top: 54%;
transform: translateY(20px);
width: 520px;
img {
width: 100%;
height: 100%;
......
......@@ -4,6 +4,7 @@
nav: true,
'header-fixed ': isFixed,
'home-nav': isHome,
'show-themeColor':isFixed&&isHome,
isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4',
......@@ -518,8 +519,7 @@ export default {
</script>
<style lang="scss" scoped>
// $themeColor: $themeColor;
$themeColor: $themeColor;
// #2069c4: #2069c4;
.home-nav {
position: absolute;
......@@ -534,6 +534,10 @@ $themeColor: $themeColor;
z-index: 99;
top: 0;
}
.show-themeColor{
background-color: #2069c4 !important;
}
.isChStyle {
background-color: #892325 !important;
}
......@@ -674,14 +678,16 @@ $themeColor: $themeColor;
}
.submenu {
background: #f8f8f8;
// background: #f8f8f8;
background-color: rgba(0,0,0,0.4);
color: #fff;
height: 50px;
display: flex;
justify-content: center;
position: absolute;
width: 100%;
z-index: 99;
border-bottom: 1px solid #f2f2f2;
// border-bottom: 1px solid #f2f2f2;
ul {
display: flex;
align-items: center;
......@@ -691,7 +697,7 @@ $themeColor: $themeColor;
cursor: pointer;
&:hover {
span {
color: $themeColor;
color: #2069c4;
}
}
.svg-icon {
......@@ -773,7 +779,7 @@ $themeColor: $themeColor;
font-size: 14px;
cursor: pointer;
&:hover {
color: $themeColor;
color: #2069c4;
}
}
}
......@@ -796,12 +802,12 @@ $themeColor: $themeColor;
padding: 16px !important;
border-radius: 0 !important;
width: 100%;
background-color: $themeColor;
background-color: #2069c4;
color: #fff;
font-size: 14px;
&:hover {
filter: brightness(0.9) !important;
background-color: $themeColor;
background-color: #2069c4;
color: #fff;
border: none;
border-radius: 0 !important;
......@@ -843,17 +849,17 @@ $themeColor: $themeColor;
cursor: pointer;
position: relative;
&:hover {
color: $themeColor;
color: #2069c4;
}
}
.active {
color: $themeColor;
color: #2069c4;
}
.line {
width: 18px;
height: 4px;
background-color: $themeColor;
background-color: #2069c4;
// border-radius: 4px;
position: absolute;
left: 24px;
......
......@@ -83,9 +83,9 @@
</el-scrollbar>
</div>
</transition>
<div class="total">
<!-- <div class="total">
<span>{{list.total}}件文物</span>
</div>
</div> -->
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40" class="cr-list">
......
......@@ -212,7 +212,7 @@ export default {
}
li:hover,
.active {
background: $themeColor;
background: #2069c4;
color: #fff;
}
}
......
......@@ -266,6 +266,7 @@ export default {
borderColor: "#fff", // 边框颜色
// areaColor: "#2759af", // 区域颜色
areaColor: "rgba(32, 105, 196, .8)",
// areaColor:'#294046',
color: "#ff5555",
// shadowBlur: 10, // 图形阴影的模糊大小
// shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
......@@ -273,6 +274,7 @@ export default {
emphasis: {
// areaColor: "#7b39e2",
areaColor: "#2759af",
// areaColor:'#5e5314',
color: "#fff",
shadowColor: "#182f68",
shadowOffsetX: 0,
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论