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

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

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