Skip to content

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

图片列表增加默认边框

上级 d2f5a9ff
显示空白字符变更
内嵌 并排
正在显示 包含 260 行增加 和 31 行删除
src/views/culturalRelic/index.vue
浏览文件 @ 3649b550
...@@ -4,7 +4,10 @@ ...@@ -4,7 +4,10 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<div class="search wow animate__animated animate__fadeIn"> <div class="search wow animate__animated animate__fadeIn">
<el-row style="width: 100%;display: flex;align-items:center" :span="4"> <el-row
style="width: 100%; display: flex; align-items: center"
:span="4"
>
<el-col :span="6"> <el-col :span="6">
<el-input <el-input
class="input item" class="input item"
...@@ -70,14 +73,18 @@ ...@@ -70,14 +73,18 @@
</div> </div>
<el-row :gutter="40" class="cr-list"> <el-row :gutter="40" class="cr-list">
<el-col <el-col
:span="6" :span="8"
class="cr-item" class="cr-item"
@click.native="handleClick(item)" @click.native="handleClick(item)"
v-for="(item, index) in list.records" v-for="(item, index) in list.records"
:key="index" :key="index"
> >
<div class="container wow animate__animated animate__fadeInUp"> <div class="container wow animate__animated animate__fadeInUp">
<div class="img-container"> <div
class="img-container"
@mouseenter="handleEnterImg(item)"
@mouseleave="handleLeaveImg(item)"
>
<img <img
:src=" :src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl) $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
...@@ -87,16 +94,44 @@ ...@@ -87,16 +94,44 @@
lazy lazy
/> />
<div class="deco-left-top"> <div class="deco-left-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
<div class="deco-left-bottom"> <div class="deco-left-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
<div class="deco-right-top"> <div class="deco-right-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
<div class="deco-right-bottom"> <div class="deco-right-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
</div> </div>
<div class="showIcon" v-if="item && item.url3d"> <div class="showIcon" v-if="item && item.url3d">
...@@ -104,11 +139,31 @@ ...@@ -104,11 +139,31 @@
</div> </div>
<div class="desc"> <div class="desc">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="desc-container">
<div class="left">
<div class="deptName">
<span>关键词：</span>
<span>{{ item.keyword }}</span>
</div>
<div class="deptName"> <div class="deptName">
<span>展览单位：</span> <span>展览单位：</span>
<span>{{ item.deptName }}</span> <span>{{ item.deptName }}</span>
</div> </div>
</div> </div>
<div class="right">
<span class="collect">
<svg-icon icon-class="collect"></svg-icon>
<span>{{
item.collectCount ? item.collectCount : "收藏"
}}</span>
</span>
<span class="view">
<svg-icon icon-class="view"></svg-icon>
<span>{{ item.browseCount }}</span>
</span>
</div>
</div>
</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -161,6 +216,7 @@ export default { ...@@ -161,6 +216,7 @@ export default {
keyword: "", keyword: "",
type: "", type: "",
years: "", years: "",
currentImg: null,
}; };
}, },
computed: { computed: {
...@@ -249,6 +305,13 @@ export default { ...@@ -249,6 +305,13 @@ export default {
handleTo3D(url3d) { handleTo3D(url3d) {
window.open(url3d, "_blank"); window.open(url3d, "_blank");
}, },
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
}, },
}; };
</script> </script>
...@@ -374,7 +437,7 @@ $text-indent: 16px; ...@@ -374,7 +437,7 @@ $text-indent: 16px;
position: absolute; position: absolute;
width: 36px; width: 36px;
height: 36px; height: 36px;
display: none; // display: none;
transition: all 0.5s ease; transition: all 0.5s ease;
img { img {
width: 100%; width: 100%;
...@@ -413,12 +476,28 @@ $text-indent: 16px; ...@@ -413,12 +476,28 @@ $text-indent: 16px;
color: #2069c4; color: #2069c4;
margin-bottom: 18px; margin-bottom: 18px;
} }
.desc-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
.left {
.deptName { .deptName {
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
color: #444444; color: #444444;
} }
} }
.right {
color: #858484;
.collect {
margin-right: 10px;
}
.svg-icon {
margin-right: 4px;
}
}
}
}
.showIcon { .showIcon {
position: absolute; position: absolute;
top: 10px; top: 10px;
...@@ -490,7 +569,7 @@ $text-indent: 16px; ...@@ -490,7 +569,7 @@ $text-indent: 16px;
&::placeholder { &::placeholder {
text-indent: 10px; text-indent: 10px;
color: #666; color: #999;
} }
} }
} }
......
src/views/display/index.vue
浏览文件 @ 3649b550
...@@ -59,7 +59,11 @@ ...@@ -59,7 +59,11 @@
:key="index" :key="index"
> >
<div class="container wow animate__animated animate__fadeInUp"> <div class="container wow animate__animated animate__fadeInUp">
<div class="img-container"> <div
class="img-container"
@mouseenter="handleEnterImg(item)"
@mouseleave="handleLeaveImg(item)"
>
<img <img
:src=" :src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl) $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
...@@ -69,20 +73,50 @@ ...@@ -69,20 +73,50 @@
lazy lazy
/> />
<div class="deco-left-top"> <div class="deco-left-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
<div class="deco-left-bottom"> <div class="deco-left-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
<div class="deco-right-top"> <div class="deco-right-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
<div class="deco-right-bottom"> <div class="deco-right-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
</div> </div>
<div class="desc"> <div class="desc">
<div class="name">{{ item.title }}</div> <div class="name">{{ item.title }}</div>
<div class="desc-container">
<div class="left">
<div class="deptName"> <div class="deptName">
<span>关键词：</span> <span>关键词：</span>
<span>{{ item.keyword }}</span> <span>{{ item.keyword }}</span>
...@@ -92,6 +126,20 @@ ...@@ -92,6 +126,20 @@
<span>{{ item.deptName }}</span> <span>{{ item.deptName }}</span>
</div> </div>
</div> </div>
<div class="right">
<span class="collect">
<svg-icon icon-class="collect"></svg-icon>
<span>{{
item.collectCount ? item.collectCount : "收藏"
}}</span>
</span>
<span class="view">
<svg-icon icon-class="view"></svg-icon>
<span>{{ item.browseCount }}</span>
</span>
</div>
</div>
</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -144,6 +192,7 @@ export default { ...@@ -144,6 +192,7 @@ export default {
type: "", type: "",
regionCode: [], regionCode: [],
regionTree: [], regionTree: [],
currentImg: null,
}; };
}, },
computed: { computed: {
...@@ -235,6 +284,12 @@ export default { ...@@ -235,6 +284,12 @@ export default {
} }
}); });
}, },
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
// loadRegionData() { // loadRegionData() {
// this.$store.dispatch("org/getMuseumTreeData", false).then((res) => { // this.$store.dispatch("org/getMuseumTreeData", false).then((res) => {
// this.museumTree = res[0].children; // this.museumTree = res[0].children;
...@@ -343,7 +398,7 @@ $text-indent: 16px; ...@@ -343,7 +398,7 @@ $text-indent: 16px;
position: absolute; position: absolute;
width: 36px; width: 36px;
height: 36px; height: 36px;
display: none; // display: none;
transition: all 0.5s ease; transition: all 0.5s ease;
img { img {
width: 100%; width: 100%;
...@@ -382,12 +437,28 @@ $text-indent: 16px; ...@@ -382,12 +437,28 @@ $text-indent: 16px;
color: #2069c4; color: #2069c4;
margin-bottom: 18px; margin-bottom: 18px;
} }
.desc-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
.left {
.deptName { .deptName {
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
color: #444444; color: #444444;
} }
} }
.right {
color: #858484;
.collect {
margin-right: 10px;
}
.svg-icon {
margin-right: 4px;
}
}
}
}
} }
} }
} }
...@@ -422,7 +493,7 @@ $text-indent: 16px; ...@@ -422,7 +493,7 @@ $text-indent: 16px;
&::placeholder { &::placeholder {
text-indent: 10px; text-indent: 10px;
color: #666; color: #999;
} }
} }
} }
......
src/views/museum/index.vue
浏览文件 @ 3649b550
...@@ -40,7 +40,11 @@ ...@@ -40,7 +40,11 @@
:key="index" :key="index"
> >
<div class="container wow animate__animated animate__fadeInUp"> <div class="container wow animate__animated animate__fadeInUp">
<div class="img-container"> <div
class="img-container"
@mouseenter="handleEnterImg(item)"
@mouseleave="handleLeaveImg(item)"
>
<img <img
:src=" :src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl) $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
...@@ -50,21 +54,48 @@ ...@@ -50,21 +54,48 @@
lazy lazy
/> />
<div class="deco-left-top"> <div class="deco-left-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
<div class="deco-left-bottom"> <div class="deco-left-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
<div class="deco-right-top"> <div class="deco-right-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
<div class="deco-right-bottom"> <div class="deco-right-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
</div> </div>
<div class="desc"> <div class="desc">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -120,6 +151,7 @@ export default { ...@@ -120,6 +151,7 @@ export default {
type: "", type: "",
regionCode: [], regionCode: [],
regionTree: [], regionTree: [],
currentImg: null,
}; };
}, },
computed: { computed: {
...@@ -213,6 +245,12 @@ export default { ...@@ -213,6 +245,12 @@ export default {
} }
}); });
}, },
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
}, },
}; };
</script> </script>
...@@ -307,7 +345,7 @@ $text-indent: 16px; ...@@ -307,7 +345,7 @@ $text-indent: 16px;
position: absolute; position: absolute;
width: 36px; width: 36px;
height: 36px; height: 36px;
display: none; // display: none;
transition: all 0.5s ease; transition: all 0.5s ease;
img { img {
width: 100%; width: 100%;
...@@ -386,7 +424,7 @@ $text-indent: 16px; ...@@ -386,7 +424,7 @@ $text-indent: 16px;
&::placeholder { &::placeholder {
text-indent: 10px; text-indent: 10px;
color: #666; color: #999;
} }
} }
} }
......
src/views/virtual/index.vue
浏览文件 @ 3649b550
...@@ -43,7 +43,11 @@ ...@@ -43,7 +43,11 @@
:key="index" :key="index"
> >
<div class="container wow animate__animated animate__fadeInUp"> <div class="container wow animate__animated animate__fadeInUp">
<div class="img-container"> <div
class="img-container"
@mouseenter="handleEnterImg(item)"
@mouseleave="handleLeaveImg(item)"
>
<img <img
:src=" :src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl) $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
...@@ -53,16 +57,44 @@ ...@@ -53,16 +57,44 @@
lazy lazy
/> />
<div class="deco-left-top"> <div class="deco-left-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
<div class="deco-left-bottom"> <div class="deco-left-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
<div class="deco-right-top"> <div class="deco-right-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
<div class="deco-right-bottom"> <div class="deco-right-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" /> <img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> </div>
</div> </div>
<div class="desc"> <div class="desc">
...@@ -125,6 +157,7 @@ export default { ...@@ -125,6 +157,7 @@ export default {
type: "", type: "",
regionCode: [], regionCode: [],
regionTree: [], regionTree: [],
currentImg: null,
}; };
}, },
computed: { computed: {
...@@ -215,6 +248,14 @@ export default { ...@@ -215,6 +248,14 @@ export default {
} }
}); });
}, },
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
// loadRegionData() { // loadRegionData() {
// this.$store.dispatch("org/getMuseumTreeData", false).then((res) => { // this.$store.dispatch("org/getMuseumTreeData", false).then((res) => {
// this.museumTree = res[0].children; // this.museumTree = res[0].children;
...@@ -324,7 +365,7 @@ $text-indent: 16px; ...@@ -324,7 +365,7 @@ $text-indent: 16px;
position: absolute; position: absolute;
width: 36px; width: 36px;
height: 36px; height: 36px;
display: none; // display: none;
transition: all 0.5s ease; transition: all 0.5s ease;
img { img {
width: 100%; width: 100%;
...@@ -403,7 +444,7 @@ $text-indent: 16px; ...@@ -403,7 +444,7 @@ $text-indent: 16px;
&::placeholder { &::placeholder {
text-indent: 10px; text-indent: 10px;
color: #666; color: #999;
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论