提交 2c05f6dd authored 作者: 龙菲's avatar 龙菲

修改按钮间隙、未选中按钮字体颜色

上级 5f6fa9cb
...@@ -52,7 +52,7 @@ export default { ...@@ -52,7 +52,7 @@ export default {
transform: rotate(45deg); transform: rotate(45deg);
position: absolute; position: absolute;
right: -2px; right: -2px;
top: -3px; top: -5px;
} }
} }
</style> </style>
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
:src="$getFullUrl(CRDetail.imagesVo[0].pressUrl)" :src="$getFullUrl(CRDetail.imagesVo[0].pressUrl)"
/> />
<img <img
id="faceImage" id="faceImage"
v-else-if="CRDetail.faceImagePressUrl" v-else-if="CRDetail.faceImagePressUrl"
class="animate__animated animate__fadeInDownBig" class="animate__animated animate__fadeInDownBig"
:src="CRDetail.faceImagePressUrl" :src="CRDetail.faceImagePressUrl"
...@@ -427,8 +427,10 @@ export default { ...@@ -427,8 +427,10 @@ export default {
} }
}, },
handleToDetail(crId) { handleToDetail(crId) {
console.log(crId); const newPage = this.$router.resolve({
this.$router.replace({ name: "culturalRelicDetail", params: { crId } }); path: `culturalReli/${crId}`,
});
window.open(newPage.href, "_blank");
}, },
// 点击音频 // 点击音频
handleClickAudio() { handleClickAudio() {
...@@ -812,11 +814,11 @@ $blue: #2069c4; ...@@ -812,11 +814,11 @@ $blue: #2069c4;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition: all ease 0.5s; transition: all ease 0.5s;
background-image: linear-gradient( // background-image: linear-gradient(
to top, // to top,
rgba(0, 0, 0, 0.8), // rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.1) // rgba(0, 0, 0, 0.1)
); // );
.cr-name { .cr-name {
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
...@@ -824,6 +826,7 @@ $blue: #2069c4; ...@@ -824,6 +826,7 @@ $blue: #2069c4;
text-align: center; text-align: center;
margin-bottom: 40px; margin-bottom: 40px;
transition: all 0.5s ease; transition: all 0.5s ease;
opacity: 0;
} }
.cr-intro { .cr-intro {
font-size: 16px; font-size: 16px;
...@@ -845,11 +848,16 @@ $blue: #2069c4; ...@@ -845,11 +848,16 @@ $blue: #2069c4;
} }
&:first-child { &:first-child {
.cr-name-intro { .cr-name-intro {
background-image: linear-gradient( &:hover {
to top, background-image: linear-gradient(
rgba(0, 0, 0, 0.8), to top,
rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.8),
); rgba(0, 0, 0, 0.1)
);
.cr-name {
opacity: 1;
}
}
} }
} }
&:not(&:first-child) { &:not(&:first-child) {
......
...@@ -615,6 +615,8 @@ $text-indent: 16px; ...@@ -615,6 +615,8 @@ $text-indent: 16px;
border-radius: 50%; border-radius: 50%;
background: #2069c4; background: #2069c4;
min-width: 0; min-width: 0;
margin: 0 10px;
color: #b7b7b7;
} }
.active { .active {
color: #fff; color: #fff;
......
...@@ -536,6 +536,8 @@ $text-indent: 16px; ...@@ -536,6 +536,8 @@ $text-indent: 16px;
border-radius: 50%; border-radius: 50%;
background: #2069c4; background: #2069c4;
min-width: 0; min-width: 0;
margin: 0 10px;
color: #b7b7b7;
} }
.active { .active {
color: #fff; color: #fff;
......
...@@ -177,7 +177,8 @@ $blue: #2069c4; ...@@ -177,7 +177,8 @@ $blue: #2069c4;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
padding: 16px; padding: 16px;
background-color: rgba($color: #000000, $alpha: 0.1); // background-color: rgba($color: #000000, $alpha: 0.2);
background-image: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.2));
color: #fff; color: #fff;
transform: translateY(100px); transform: translateY(100px);
text-align: right; text-align: right;
......
...@@ -7,9 +7,9 @@ ...@@ -7,9 +7,9 @@
<span>返回上页 </span> <span>返回上页 </span>
</div> </div>
<el-row class="detail-container" :gutter="10"> <el-row class="detail-container" :gutter="10">
<el-col class="cr-images" :span="18"> <el-col class="cr-images" :span="24">
<el-image <el-image
style="width: 100%; height:400px" style="width: 100%; height:600px"
:src="$getFullUrl(museumDetail.faceImagePressUrl || museumDetail.faceImageUrl)" :src="$getFullUrl(museumDetail.faceImagePressUrl || museumDetail.faceImageUrl)"
fit="contain" fit="contain"
></el-image> ></el-image>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<img src="@/assets/imgs/enlarge-s.png" alt="" /> <img src="@/assets/imgs/enlarge-s.png" alt="" />
</div> </div>
</el-col> </el-col>
<el-col class="relic-info" :span="8"> <el-col class="relic-info" :span="24">
<div class="info-title"> <div class="info-title">
<div <div
style=" style="
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0" v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
/> --> /> -->
</div> </div>
<div class="intro"> {{ museumDetail.intro }}</div> <div class="intro" v-html="museumDetail.intro"></div>
<!-- <div class="info-body"> <!-- <div class="info-body">
<div class="basic-info"> <div class="basic-info">
<div class="body-item"> <div class="body-item">
...@@ -127,7 +127,8 @@ export default { ...@@ -127,7 +127,8 @@ export default {
}, },
handleBack() { handleBack() {
this.$router.go(-1); // this.$router.go(-1);
this.$router.push({path:'/museum'})
}, },
closeImgViewer() { closeImgViewer() {
...@@ -138,10 +139,7 @@ export default { ...@@ -138,10 +139,7 @@ export default {
this.imgViewerVisible = true; this.imgViewerVisible = true;
this.imgList = [this.$getFullUrl(this.museumDetail.faceImageUrl)]; this.imgList = [this.$getFullUrl(this.museumDetail.faceImageUrl)];
}, },
handleToDetail(crId) {
console.log(crId);
this.$router.replace({ name: "culturalRelicDetail", params: { crId } });
},
}, },
}; };
</script> </script>
...@@ -183,9 +181,10 @@ $label: #9f9c9a; ...@@ -183,9 +181,10 @@ $label: #9f9c9a;
height: auto; height: auto;
} }
.cr-images { .cr-images {
width: 700px; // width: 700px;
margin-right: 32px; // margin-right: 32px;
position: relative; position: relative;
margin-bottom: 20px;
.el-image { .el-image {
background-color: #f5f5f9; background-color: #f5f5f9;
} }
...@@ -213,8 +212,9 @@ $label: #9f9c9a; ...@@ -213,8 +212,9 @@ $label: #9f9c9a;
.relic-info { .relic-info {
.info-title { .info-title {
display: flex; display: flex;
justify-content: center;
// align-items: center; // align-items: center;
flex-direction: column; // flex-direction: column;
margin-bottom: 10px; margin-bottom: 10px;
} }
.info-body { .info-body {
...@@ -237,9 +237,9 @@ $label: #9f9c9a; ...@@ -237,9 +237,9 @@ $label: #9f9c9a;
} }
} }
// .intro{ .intro{
// text-indent: 32px; text-indent: 32px;
// } }
} }
.title-container { .title-container {
......
...@@ -41,9 +41,10 @@ ...@@ -41,9 +41,10 @@
v-for="(item, index) in list.records" v-for="(item, index) in list.records"
:key="index" :key="index"
> >
<!-- id为1 的是文旅厅 -->
<div <div
class="container wow animate__animated animate__fadeInUp" class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1" v-if="item.status == 1 && item.id != '1'"
> >
<div class="img-container"> <div class="img-container">
<img <img
...@@ -207,9 +208,11 @@ export default { ...@@ -207,9 +208,11 @@ export default {
e.target.src = require("@/assets/404_images/no-pic.png"); e.target.src = require("@/assets/404_images/no-pic.png");
}, },
handleClick(item) { handleClick(item) {
this.$router.push({ const { id } = item;
path: "museum/" + item.id, const newPage = this.$router.resolve({
path: `museum/${id}`,
}); });
window.open(newPage.href, "_blank");
}, },
handleTypeChange(value) { handleTypeChange(value) {
...@@ -379,7 +382,7 @@ $text-indent: 16px; ...@@ -379,7 +382,7 @@ $text-indent: 16px;
padding: 36px 30px; padding: 36px 30px;
transition: all 0.5s ease; transition: all 0.5s ease;
background: #fff; background: #fff;
.name { .name {
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
color: #2069c4; color: #2069c4;
...@@ -442,6 +445,8 @@ $text-indent: 16px; ...@@ -442,6 +445,8 @@ $text-indent: 16px;
border-radius: 50%; border-radius: 50%;
background: #2069c4; background: #2069c4;
min-width: 0; min-width: 0;
margin: 0 10px;
color: #b7b7b7;
} }
.active { .active {
color: #fff; color: #fff;
......
...@@ -478,6 +478,8 @@ $text-indent: 16px; ...@@ -478,6 +478,8 @@ $text-indent: 16px;
border-radius: 50%; border-radius: 50%;
background: #2069c4; background: #2069c4;
min-width: 0; min-width: 0;
margin: 0 10px;
color: #b7b7b7;
} }
.active { .active {
color: #fff; color: #fff;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论