Skip to content

E
exhibition_page
提交 0cc32421 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

优化页面

上级 00fc639a
隐藏空白字符变更
内嵌 并排
正在显示 包含 198 行增加 和 118 行删除
src/views/culturalRelic/Detail.vue
浏览文件 @ 0cc32421
...@@ -210,7 +210,7 @@ ...@@ -210,7 +210,7 @@
v-if="relateRelics.length > 0" v-if="relateRelics.length > 0"
> >
<div class="intro-title"> <div class="intro-title">
<svg-icon icon-class="glww"></svg-icon> <svg-icon icon-class="glww" style="font-size: 30px"></svg-icon>
<span>相关文物</span> <span>相关文物</span>
</div> </div>
<el-row :gutter="26"> <el-row :gutter="26">
...@@ -224,9 +224,9 @@ ...@@ -224,9 +224,9 @@
@click="handleToCr(item)" @click="handleToCr(item)"
> >
<img :src="item.faceImagePressUrl" alt="" /> <img :src="item.faceImagePressUrl" alt="" />
<div class="cr-name-intro" v-if="index == 0"> <div class="cr-name-intro">
<div class="cr-name">{{ item.name }}</div> <div class="cr-name">{{ item.name }}</div>
<div class="cr-intro">{{ item.intro }}</div> <!-- <div class="cr-intro" v-html="item.intro"></div> -->
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -458,6 +458,14 @@ export default { ...@@ -458,6 +458,14 @@ export default {
closeImgViewer() { closeImgViewer() {
this.imgViewerVisible = false; this.imgViewerVisible = false;
}, },
handleToCr(item) {
const { crId } = item;
const newPage = this.$router.resolve({
path: "/culturalRelic/" + crId,
});
window.open(newPage.href, "_blank");
},
}, },
}; };
</script> </script>
...@@ -627,6 +635,7 @@ $blue: #2069c4; ...@@ -627,6 +635,7 @@ $blue: #2069c4;
margin-right: 50px; margin-right: 50px;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
position: relative;
// .imagesVo-image-container { // .imagesVo-image-container {
// // position: relative; // // position: relative;
...@@ -782,56 +791,96 @@ $blue: #2069c4; ...@@ -782,56 +791,96 @@ $blue: #2069c4;
text-indent: 40px; text-indent: 40px;
} }
.el-col { .el-col {
&:first-child { .img-container {
.img-container { width: 100%;
width: 100%; height: 460px;
height: 460px; position: relative;
position: relative;
.cr-name-intro {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
padding: 100px 28px 50px;
background-image: linear-gradient( .cr-name-intro {
to top, width: 100%;
rgba(0, 0, 0, 0.8), height: 100%;
rgba(0, 0, 0, 0.1) position: absolute;
); left: 0;
.cr-name { top: 0;
font-size: 48px; // padding: 100px 28px 50px;
font-weight: bold; display: flex;
color: #ffffff; justify-content: center;
text-align: center; align-items: center;
margin-bottom: 40px; transition: all ease 0.5s;
} background-image: linear-gradient(
.cr-intro { to top,
font-size: 16px; rgba(0, 0, 0, 0.8),
font-weight: 400; rgba(0, 0, 0, 0.1)
color: #ccc; );
text-indent: 32px; .cr-name {
line-height: 40px; font-size: 48px;
overflow: hidden; font-weight: bold;
text-overflow: ellipsis; color: #ffffff;
display: -webkit-box; text-align: center;
-webkit-line-clamp: 5; margin-bottom: 40px;
-webkit-box-orient: vertical; transition: all 0.5s ease;
}
} }
img { .cr-intro {
width: 100%; font-size: 16px;
height: 100%; font-weight: 400;
color: #ccc;
text-indent: 32px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
} }
} }
img {
width: 100%;
height: 100%;
}
}
&:first-child {
.cr-name-intro {
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.1)
);
}
} }
&:not(&:first-child) { &:not(&:first-child) {
margin-bottom: 30px; margin-bottom: 30px;
&:hover {
.cr-name {
opacity: 1;
}
.cr-name-intro {
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.1)
);
}
}
.cr-name {
font-size: 18px;
opacity: 0;
}
.cr-intro {
display: none;
}
.img-container { .img-container {
height: 214px; height: 214px;
} }
.cr-name-intro {
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0)
);
}
} }
} }
.img-container { .img-container {
......
src/views/culturalRelic/index.vue
浏览文件 @ 0cc32421
...@@ -202,7 +202,7 @@ export default { ...@@ -202,7 +202,7 @@ export default {
return { return {
list: { list: {
records: [], records: [],
size: 20, size: 15,
current: 1, current: 1,
total: 0, total: 0,
}, },
...@@ -277,11 +277,11 @@ export default { ...@@ -277,11 +277,11 @@ export default {
}, },
handleClick(item) { handleClick(item) {
console.log(item);
const { crId } = item; const { crId } = item;
this.$router.push({ const newPage = this.$router.resolve({
path: "culturalRelic/" + crId, path: "culturalRelic/" + crId,
}); });
window.open(newPage.href, "_blank");
}, },
handleClickThreeD() { handleClickThreeD() {
this.onlyShow3d = !this.onlyShow3d; this.onlyShow3d = !this.onlyShow3d;
...@@ -391,7 +391,7 @@ $text-indent: 16px; ...@@ -391,7 +391,7 @@ $text-indent: 16px;
.search-button { .search-button {
cursor: pointer; cursor: pointer;
width: 156px; width: 156px;
height: 40px; height: 54px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -495,7 +495,7 @@ $text-indent: 16px; ...@@ -495,7 +495,7 @@ $text-indent: 16px;
transition: all 0.5s ease; transition: all 0.5s ease;
background: #fff; background: #fff;
.name { .name {
font-size: 18px; font-size: 22px;
font-weight: bold; font-weight: bold;
color: #2069c4; color: #2069c4;
margin-bottom: 18px; margin-bottom: 18px;
...@@ -590,7 +590,7 @@ $text-indent: 16px; ...@@ -590,7 +590,7 @@ $text-indent: 16px;
border-radius: 0; border-radius: 0;
background: url("@/assets/imgs/list/input-border.png"); background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%; background-size: 100% 100%;
height: 54px;
&::placeholder { &::placeholder {
text-indent: 10px; text-indent: 10px;
color: #999; color: #999;
...@@ -613,7 +613,7 @@ $text-indent: 16px; ...@@ -613,7 +613,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #77a7c9; background: #2069c4;
min-width: 0; min-width: 0;
} }
.active { .active {
......
src/views/display/components/BlueStyle.vue
浏览文件 @ 0cc32421
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> >
<el-image <el-image
:src="$getFullUrl(displayDetail.faceImagePressUrl)" :src="$getFullUrl(displayDetail.faceImageUrl)"
fit="cover" fit="cover"
></el-image> ></el-image>
</div> </div>
...@@ -337,9 +337,9 @@ ...@@ -337,9 +337,9 @@
:src="item.faceImagePressUrl || item.faceImageUrl" :src="item.faceImagePressUrl || item.faceImageUrl"
alt="" alt=""
/> />
<div class="cr-name-intro" v-if="index == 0"> <div class="cr-name-intro">
<div class="cr-name">{{ item.name }}</div> <div class="cr-name">{{ item.name }}</div>
<div class="cr-intro">{{ item.intro }}</div> <!-- <div class="cr-intro" v-html="item.intro"></div> -->
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -885,7 +885,7 @@ $blue: #2069c4; ...@@ -885,7 +885,7 @@ $blue: #2069c4;
display: flex; display: flex;
} }
.unit-content-menu { .unit-content-menu {
width:460px; width: 460px;
margin-right: 40px; margin-right: 40px;
background-image: url("@/assets/imgs/display/normal/bg.png"); background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%; background-size: 1%;
...@@ -930,53 +930,82 @@ $blue: #2069c4; ...@@ -930,53 +930,82 @@ $blue: #2069c4;
background-size: 1%; background-size: 1%;
padding: 50px 0; padding: 50px 0;
.el-col { .el-col {
&:first-child { .img-container {
.img-container { width: 100%;
width: 100%; height: 460px;
height: 460px; position: relative;
position: relative;
.cr-name-intro {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
padding: 100px 28px 50px;
// background-image: linear-gradient(
// to top,
// rgba(0, 0, 0, 0.8),
// rgba(0, 0, 0, 0.1)
// );
.cr-name {
font-size: 48px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-bottom: 40px;
transition: all 0.5s ease;
}
.cr-intro {
font-size: 16px;
font-weight: 400;
color: #ccc;
text-indent: 32px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
}
img {
width: 100%;
height: 100%;
}
}
&:first-child {
.cr-name-intro {
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.1)
);
}
}
&:not(&:first-child) {
margin-bottom: 30px;
&:hover {
.cr-name {
opacity: 1;
}
.cr-name-intro { .cr-name-intro {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
padding: 100px 28px 50px;
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 {
font-size: 48px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-bottom: 40px;
}
.cr-intro {
font-size: 16px;
font-weight: 400;
color: #ccc;
text-indent: 32px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
}
img {
width: 100%;
height: 100%;
} }
} }
} .cr-name {
&:not(&:first-child) { font-size: 18px;
margin-bottom: 30px; opacity: 0;
}
.cr-intro {
display: none;
}
// .cr-name-intro {
// background-image: none;
// }
.img-container { .img-container {
height: 214px; height: 214px;
} }
...@@ -1033,8 +1062,8 @@ $blue: #2069c4; ...@@ -1033,8 +1062,8 @@ $blue: #2069c4;
color: $blue; color: $blue;
} }
} }
.is-current{ .is-current {
.el-tree-node__content{ .el-tree-node__content {
background-color: #fff; background-color: #fff;
color: $blue; color: $blue;
} }
......
src/views/display/index.vue
浏览文件 @ 0cc32421
...@@ -52,18 +52,17 @@ ...@@ -52,18 +52,17 @@
</div> </div>
<el-row :gutter="40" class="cr-list"> <el-row :gutter="40" class="cr-list">
<el-col <el-col
:span="item.status==1?8:0" :span="item.status == 1 ? 8 : 0"
class="cr-item" class="cr-item"
@click.native="handleClick(item)" @click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)" @mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)" @mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records" v-for="(item, index) in list.records"
:key="index" :key="index"
> >
<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"
> >
<div class="img-container"> <div class="img-container">
<img <img
...@@ -179,7 +178,7 @@ export default { ...@@ -179,7 +178,7 @@ export default {
return { return {
list: { list: {
records: [], records: [],
size: 20, size: 15,
current: 1, current: 1,
total: 0, total: 0,
}, },
...@@ -243,11 +242,11 @@ export default { ...@@ -243,11 +242,11 @@ export default {
}, },
handleClick(item) { handleClick(item) {
console.log(item);
const { themeType, exhibitionId } = item; const { themeType, exhibitionId } = item;
this.$router.push({ const newPage = this.$router.resolve({
path: `display/${themeType}/${exhibitionId}`, path: `display/${themeType}/${exhibitionId}`,
}); });
window.open(newPage.href, "_blank");
}, },
defImg(e) { defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png"); e.target.src = require("@/assets/404_images/no-pic.png");
...@@ -348,7 +347,7 @@ $text-indent: 16px; ...@@ -348,7 +347,7 @@ $text-indent: 16px;
color: #444; color: #444;
font-size: 14px; font-size: 14px;
width: 156px; width: 156px;
height: 40px; height: 54px;
&:hover { &:hover {
-webkit-box-reflect: below 2px -webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3)); linear-gradient(transparent, rgba(0, 0, 0, 0.3));
...@@ -442,8 +441,8 @@ $text-indent: 16px; ...@@ -442,8 +441,8 @@ $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: 18px; font-size: 22px;
font-weight: bold; font-weight: bold;
color: #2069c4; color: #2069c4;
margin-bottom: 18px; margin-bottom: 18px;
...@@ -455,8 +454,11 @@ $text-indent: 16px; ...@@ -455,8 +454,11 @@ $text-indent: 16px;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.left { .left {
flex: 1; // flex: 1;
.deptName { .deptName {
font-size: 14px; font-size: 14px;
...@@ -510,7 +512,7 @@ $text-indent: 16px; ...@@ -510,7 +512,7 @@ $text-indent: 16px;
border-radius: 0; border-radius: 0;
background: url("@/assets/imgs/list/input-border.png"); background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%; background-size: 100% 100%;
height: 54px;
&::placeholder { &::placeholder {
text-indent: 10px; text-indent: 10px;
color: #999; color: #999;
...@@ -532,7 +534,7 @@ $text-indent: 16px; ...@@ -532,7 +534,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #77a7c9; background: #2069c4;
min-width: 0; min-width: 0;
} }
.active { .active {
......
src/views/home/components/MuseumMap.vue
浏览文件 @ 0cc32421
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
<div class="wrapper"> <div class="wrapper">
<div class="content wow animate__animated animate__fadeIn"> <div class="content wow animate__animated animate__fadeIn">
<div class="name">{{ curMuseum.name }}</div> <div class="name">{{ curMuseum.name }}</div>
<div class="intro"> <div class="intro" v-html="curMuseum.intro">
{{ curMuseum.intro }}
</div> </div>
<!-- <div <!-- <div
class="entrance" class="entrance"
......
src/views/museum/index.vue
浏览文件 @ 0cc32421
...@@ -282,7 +282,7 @@ $text-indent: 16px; ...@@ -282,7 +282,7 @@ $text-indent: 16px;
.search-button { .search-button {
cursor: pointer; cursor: pointer;
width: 156px; width: 156px;
height: 40px; height: 54px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -379,8 +379,8 @@ $text-indent: 16px; ...@@ -379,8 +379,8 @@ $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: 18px; font-size: 22px;
font-weight: bold; font-weight: bold;
color: #2069c4; color: #2069c4;
margin-bottom: 18px; margin-bottom: 18px;
...@@ -422,7 +422,7 @@ $text-indent: 16px; ...@@ -422,7 +422,7 @@ $text-indent: 16px;
border-radius: 0; border-radius: 0;
background: url("@/assets/imgs/list/input-border.png"); background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%; background-size: 100% 100%;
height: 54px;
&::placeholder { &::placeholder {
text-indent: 10px; text-indent: 10px;
color: #999; color: #999;
...@@ -440,7 +440,7 @@ $text-indent: 16px; ...@@ -440,7 +440,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #77a7c9; background: #2069c4;
min-width: 0; min-width: 0;
} }
.active { .active {
......
src/views/virtual/index.vue
浏览文件 @ 0cc32421
...@@ -306,7 +306,7 @@ $text-indent: 16px; ...@@ -306,7 +306,7 @@ $text-indent: 16px;
.search-button { .search-button {
cursor: pointer; cursor: pointer;
width: 156px; width: 156px;
height: 40px; height: 54px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -411,8 +411,8 @@ $text-indent: 16px; ...@@ -411,8 +411,8 @@ $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: 18px; font-size: 22px;
font-weight: bold; font-weight: bold;
color: #2069c4; color: #2069c4;
margin-bottom: 18px; margin-bottom: 18px;
...@@ -454,7 +454,7 @@ $text-indent: 16px; ...@@ -454,7 +454,7 @@ $text-indent: 16px;
border-radius: 0; border-radius: 0;
background: url("@/assets/imgs/list/input-border.png"); background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%; background-size: 100% 100%;
height: 54px;
&::placeholder { &::placeholder {
text-indent: 10px; text-indent: 10px;
color: #999; color: #999;
...@@ -476,7 +476,7 @@ $text-indent: 16px; ...@@ -476,7 +476,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #77a7c9; background: #2069c4;
min-width: 0; min-width: 0;
} }
.active { .active {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论