Skip to content

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

图片列表增加默认边框

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