Skip to content

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

完善四渡赤水

上级 41cdcd6e
隐藏空白字符变更
内嵌 并排
正在显示 包含 869 行增加 和 108 行删除
src/views/boutique/components/SDCS.vue
浏览文件 @ c7c929fa
......@@ -24,11 +24,18 @@
</div>
<div class="box">
<div class="titles">
<div class="item" v-for="(item, index) in unitsData[0].data" :key="index">
<div
class="item"
v-for="(item, index) in unitsData[0].data"
:key="index"
>
<div class="img">
<img :src="
require(`@/assets/imgs/boutique/sdcs/faceImage/${item.titleImg}`)
" alt="" />
<img
:src="
require(`@/assets/imgs/boutique/sdcs/faceImage/${item.titleImg}`)
"
alt=""
/>
</div>
<div class="txt" v-html="item.txt"></div>
</div>
......@@ -49,9 +56,13 @@
<div class="line"></div>
<div class="units-title-group">
<div class="container">
<div :class="{ 'units-title': true, active: item == part1CurUnit }"
v-for="(item, index) in unitsData[1].data" :key="index" v-html="item.title"
@click="handleClickUnit1(item)"></div>
<div
:class="{ 'units-title': true, active: item == part1CurUnit }"
v-for="(item, index) in unitsData[1].data"
:key="index"
v-html="item.title"
@click="handleClickUnit1(item)"
></div>
</div>
</div>
</div>
......@@ -62,11 +73,18 @@
</div>
<div class="right-cr" v-if="part1CurUnit.imgs">
<div class="cr-group">
<div class="cr" v-for="(item, index) in part1CurUnit.imgs" :key="index">
<div
class="cr"
v-for="(item, index) in part1CurUnit.imgs"
:key="index"
>
<div class="name">{{ item.name }}</div>
<img class="cr-img" :src="
require(`@/assets/imgs/boutique/sdcs/part1/${item.url}`)
" />
<img
class="cr-img"
:src="
require(`@/assets/imgs/boutique/sdcs/part1/${item.url}`)
"
/>
<div class="line2" v-if="index == 0"></div>
<div class="line3" v-if="index == 1"></div>
</div>
......@@ -85,30 +103,39 @@
<div class="line"></div>
<div class="units-title-group">
<div class="container">
<div :class="{ 'units-title': true, active: index == part2CurUnitIndex }"
v-for="(item, index) in unitsData[2].data" :key="index" v-html="item.title"
@click="handleClickUnit2(index)"></div>
<div
:class="{
'units-title': true,
active: item == part2CurUnit,
}"
v-for="(item, index) in unitsData[2].data"
:key="index"
v-html="item.title"
@click="handleClickUnit2(item)"
></div>
</div>
</div>
</div>
<swiper :options="swiperOption" ref="part2Swiper">
<swiper-slide v-for="(item, i) in unitsData[2].data" :key="i">
<div class="content">
<div class="left-txt">
<div class="title" v-html="item.title"></div>
<div class="intro" v-html="item.txt"></div>
</div>
<div class="right-cr" v-if="item.imgs">
<div class="cr-group">
<div class="cr" v-for="(v, i) in item.imgs" :key="i">
<img class="cr-img" :src="
require(`@/assets/imgs/boutique/sdcs/part2/${v.url}`)
" />
<div class="name">{{ v.name }}</div>
</div>
</div>
<div class="content">
<div class="left-txt">
<div class="title" v-html="part2CurUnit.title"></div>
<div class="intro" v-html="part2CurUnit.txt"></div>
</div>
<div class="right-cr" v-if="part2CurUnit.imgs">
<div class="cr-group">
<div class="cr" v-for="(v, i) in part2CurUnit.imgs" :key="i">
<img
class="cr-img"
:src="require(`@/assets/imgs/boutique/sdcs/part2/${v.url}`)"
/>
<div class="name">{{ v.name }}</div>
</div>
</div>
</div>
</div>
<!-- <swiper :options="swiperOption" ref="part2Swiper">
<swiper-slide v-for="(item, i) in unitsData[2].data" :key="i">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev">
......@@ -117,7 +144,166 @@
<div class="swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div>
</swiper>
</swiper> -->
</div>
<div class="part3">
<div class="title">
<img src="@/assets/imgs/boutique/sdcs/part3/title.png" />
</div>
<div class="intro">
<div class="txt" v-html="unitsData[2].txt"></div>
</div>
<div class="line-group">
<div class="line"></div>
<div class="units-title-group">
<div class="container">
<div
:class="{
'units-title': true,
active: item == part3CurUnit,
}"
v-for="(item, index) in unitsData[3].data"
:key="index"
v-html="item.title"
@click="handleClickUnit3(item)"
></div>
</div>
</div>
</div>
<div class="content">
<div class="right-cr" v-if="part3CurUnit.imgs">
<div class="cr-group">
<div
class="cr"
v-for="(item, index) in part3CurUnit.imgs"
:key="index"
>
<div class="name">{{ item.name }}</div>
<img
class="cr-img"
:src="
require(`@/assets/imgs/boutique/sdcs/part3/${item.url}`)
"
/>
</div>
<div class="line2"></div>
</div>
</div>
<div class="left-txt">
<div class="title" v-html="part3CurUnit.title"></div>
<div class="intro" v-html="part3CurUnit.txt"></div>
</div>
</div>
</div>
<div class="part4">
<div class="title">
<img src="@/assets/imgs/boutique/sdcs/part4/title.png" />
</div>
<div class="intro">
<div class="txt" v-html="unitsData[4].txt"></div>
</div>
<div class="line-group">
<div class="line"></div>
<div class="units-title-group">
<div class="container">
<div
:class="{ 'units-title': true, active: item == part4CurUnit }"
v-for="(item, index) in unitsData[4].data"
:key="index"
v-html="item.title"
@click="handleClickUnit4(item)"
></div>
</div>
</div>
</div>
<div class="content">
<div class="left-txt">
<div class="intro" v-html="part4CurUnit.txt"></div>
<div class="title" v-html="part4CurUnit.title"></div>
</div>
<div class="right-cr" v-if="part4CurUnit.imgs">
<div class="cr-group">
<div
class="cr"
v-for="(item, index) in part4CurUnit.imgs"
:key="index"
>
<div class="name">{{ item.name }}</div>
<img
class="cr-img"
:src="
require(`@/assets/imgs/boutique/sdcs/part4/${item.url}`)
"
/>
<div class="line2" v-if="index == 0"></div>
<div class="line3" v-if="index == 1"></div>
</div>
</div>
</div>
</div>
</div>
<div class="part5">
<div class="title">
<img src="@/assets/imgs/boutique/sdcs/part5/title.png" />
</div>
<div class="intro">
<div class="txt" v-html="unitsData[5].txt"></div>
</div>
</div>
<div class="cultural-relics">
<div class="container">
<div
:class="['item', `cr-${index + 1}`]"
v-for="(item, index) in culturalRelic"
:key="index"
>
<div class="cr-img" v-for="(v, i) in item.imgs" :key="i">
<img
:src="require(`@/assets/imgs/boutique/sdcs/culturalRelic/${v}`)"
alt=""
/>
</div>
<div class="name">{{ item.name }}</div>
</div>
</div>
</div>
<div class="vr">
<div class="vr-content">
<div class="left wow animate__animated animate__fadeInLeft">
<div class="img-container">
<img src="@/assets/imgs/boutique/sdcs/vr/zhanting.png" alt="" />
</div>
<div class="text">详细介绍四渡赤水纪念馆</div>
<div class="video-button">观看视频</div>
</div>
<div class="center wow animate__animated animate__fadeIn">
<div class="img-container">
<img src="@/assets/imgs/boutique/sdcs/vr/circle.png" alt="" />
</div>
<div class="text-content">
<div class="center-text">
<img src="@/assets/imgs/boutique/sdcs/vr/360deg.png" alt="" />
</div>
<div class="text">足不出户，体验展管一切</div>
<div class="button">
<div class="outter">
<div class="inner">
<i class="el-icon-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="right wow animate__animated animate__fadeInRight">
<div class="img-container">
<img src="@/assets/imgs/boutique/sdcs/vr/yuyin.png" alt="" />
</div>
<div class="text">策划人讲解四渡赤水纪念馆</div>
<div class="video-button">观看视频</div>
</div>
</div>
</div>
</div>
</div>
......@@ -132,41 +318,68 @@ export default {
swiperSlide,
},
data() {
let that = this
let that = this;
return {
unitsData: units,
part1CurUnit: units[1].data[0],
part2CurUnitIndex: 0,
swiperOption: {
fadeEffect: {
crossFade: true,
part2CurUnit: units[2].data[0],
part3CurUnit: units[3].data[0],
part4CurUnit: units[4].data[0],
// swiperOption: {
// fadeEffect: {
// crossFade: true,
// },
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
// },
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
// },
// on: {
// slideChange: function () {
// that.part2CurUnit = this.activeIndex;
// },
// },
// },
culturalRelic: [
{
name: "红军渡河用来搭浮桥的纤绳",
imgs: ["1.png"],
},
pagination: {
el: ".swiper-pagination",
clickable: true,
{
name: "区乡苏维埃怎样工作",
imgs: ["2.png"],
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
{
name: "两个铜板和碎陶罐",
imgs: ["3-1.png", "3-2.png", "3-3.png"],
},
on: {
slideChange: function () {
that.part2CurUnitIndex = this.activeIndex
},
{
name: "木板",
imgs: ["4.png"],
},
},
],
};
},
methods: {
handleClickUnit1(item) {
console.log(item);
this.part1CurUnit = item;
},
handleClickUnit2(item) {
console.log(this.$refs.part2Swiper.swiper);activeIndex
this.$refs.part2Swiper.swiper.activeIndex
this.part2CurUnitIndex = item;
// console.log(this.$refs.part2Swiper.swiper);
// this.$refs.part2Swiper.swiper.activeIndex = index;
this.part2CurUnit = item;
},
handleClickUnit3(item) {
this.part3CurUnit = item;
},
handleClickUnit4(item) {
this.part4CurUnit = item;
},
},
};
......@@ -343,7 +556,7 @@ export default {
}
}
&>.intro {
& > .intro {
display: flex;
justify-content: center;
margin-top: 52px;
......@@ -419,7 +632,7 @@ export default {
color: #fff;
padding-left: 100px;
&>.title {
& > .title {
font-size: 22px;
margin-bottom: 16px;
font-weight: bold;
......@@ -427,7 +640,7 @@ export default {
justify-content: flex-start;
}
&>.intro {
& > .intro {
font-size: 18px;
line-height: 2.5;
}
......@@ -443,7 +656,7 @@ export default {
justify-content: flex-end;
align-items: center;
&>img {
& > img {
width: 600px;
}
}
......@@ -475,7 +688,7 @@ export default {
.part2 {
margin-bottom: 100px;
&>.title {
& > .title {
height: 40px;
display: flex;
justify-content: center;
......@@ -485,7 +698,7 @@ export default {
}
}
&>.intro {
& > .intro {
display: flex;
justify-content: center;
margin-top: 52px;
......@@ -567,7 +780,6 @@ export default {
right: 10%;
}
.content {
margin-top: 100px;
display: flex;
......@@ -580,7 +792,7 @@ export default {
display: flex;
height: 400px;
&>.title {
& > .title {
font-size: 26px;
margin-bottom: 16px;
font-weight: bold;
......@@ -588,7 +800,7 @@ export default {
margin-right: 24px;
}
&>.intro {
& > .intro {
font-size: 18px;
line-height: 2.5;
writing-mode: vertical-rl;
......@@ -608,7 +820,7 @@ export default {
align-items: center;
flex-direction: column;
&>img {
& > img {
width: 600px;
}
}
......@@ -639,6 +851,499 @@ export default {
}
}
}
.part3 {
margin-bottom: 100px;
& > .title {
height: 40px;
display: flex;
justify-content: center;
color: #fff;
font-size: 40px;
font-family: "KaiTi";
img {
height: 100%;
}
}
& > .intro {
display: flex;
justify-content: center;
margin-top: 52px;
color: #fff;
line-height: 2;
font-size: 18px;
.txt {
width: 50%;
}
}
.line-group {
margin-top: 198px;
.line {
width: 100%;
height: 34px;
background-image: url("@/assets/imgs/boutique/sdcs/part2/line.png");
background-size: 100% 100%;
}
.units-title-group {
width: 100%;
display: flex;
justify-content: center;
margin-top: 24px;
.container {
width: 60%;
display: flex;
color: #fff;
justify-content: space-between;
font-size: 18px;
.units-title {
&:hover {
color: #ca8724;
cursor: pointer;
}
&:nth-child(1) {
transform: translateX(140px);
}
&:nth-child(3) {
transform: translateX(-146px);
}
}
.active {
color: #ca8724;
}
}
}
}
.content {
margin-top: 100px;
display: flex;
justify-content: space-between;
padding-left: 100px;
.left-txt {
width: 30%;
color: #fff;
padding-right: 300px;
display: flex;
height: 400px;
& > .title {
font-size: 26px;
margin-bottom: 16px;
font-weight: bold;
writing-mode: vertical-rl;
margin-right: 24px;
}
& > .intro {
font-size: 18px;
line-height: 2.5;
writing-mode: vertical-rl;
}
}
.right-cr {
& .cr {
display: flex;
align-items: flex-start;
padding-left: 100px;
& > img {
width: 600px;
}
}
.name {
color: #fff;
font-size: 24px;
margin-right: 16px;
background-image: url("@/assets/imgs/boutique/sdcs/part3/cr_box.png");
background-size: 100% 100%;
padding: 20px 4px;
width: 40px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
}
& .line2 {
background-image: url("@/assets/imgs/boutique/sdcs/part1/line2.png");
background-size: 100% 100%;
width: 323px;
height: 64px;
transform: rotate(-180deg);
}
& .line3 {
background-image: url("@/assets/imgs/boutique/sdcs/part1/line3.png");
background-size: 100% 100%;
width: 630px;
height: 64px;
}
}
}
}
.part4,
.part5 {
margin-bottom: 100px;
& > .title {
height: 40px;
display: flex;
justify-content: center;
img {
height: 100%;
}
}
& > .intro {
display: flex;
justify-content: center;
margin-top: 52px;
color: #fff;
line-height: 2;
font-size: 18px;
.txt {
width: 50%;
}
}
.line-group {
margin-top: 198px;
.line {
width: 100%;
height: 34px;
background-image: url("@/assets/imgs/boutique/sdcs/part4/line.png");
background-size: 100% 100%;
}
.units-title-group {
width: 100%;
display: flex;
justify-content: center;
margin-top: 24px;
.container {
width: 84%;
display: flex;
color: #fff;
justify-content: space-between;
font-size: 18px;
.units-title {
&:hover {
color: #ca8724;
cursor: pointer;
}
// &:nth-child(1) {
// transform: translateX(0px);
// }
// &:nth-child(2) {
// transform: translateX(0px);
// }
// &:nth-child(3) {
// transform: translateX(0px);
// }
// &:nth-child(4) {
// transform: translateX(0px);
// }
// &:nth-child(4) {
// transform: translateX(0px);
// }
}
.active {
color: #ca8724;
}
}
}
}
.content {
margin-top: 72px;
display: flex;
justify-content: space-between;
.left-txt {
width: 30%;
color: #fff;
padding-left: 100px;
display: flex;
& > .title {
font-size: 22px;
margin-bottom: 16px;
font-weight: bold;
display: flex;
justify-content: flex-start;
writing-mode: vertical-rl;
margin-left: 32px;
}
& > .intro {
font-size: 18px;
line-height: 2.5;
writing-mode: vertical-rl;
height: 400px;
}
}
.right-cr {
.cr-group {
// display: flex;
}
& .cr {
display: flex;
justify-content: flex-end;
align-items: center;
& > img {
width: 600px;
}
}
.name {
color: #fff;
writing-mode: vertical-lr;
font-size: 24px;
margin-right: 16px;
}
& .line2 {
background-image: url("@/assets/imgs/boutique/sdcs/part1/line2.png");
background-size: 100% 100%;
width: 323px;
height: 64px;
}
& .line3 {
background-image: url("@/assets/imgs/boutique/sdcs/part1/line3.png");
background-size: 100% 100%;
width: 630px;
height: 64px;
}
}
}
}
.part5 {
margin-bottom: 0;
}
.cultural-relics {
padding: 0 80px;
& > .container {
width: 100%;
height: 2064px;
background-image: url("@/assets/imgs/boutique/sdcs/culturalRelic/bg.png");
background-size: 100% 100%;
display: flex;
& > .item {
position: relative;
padding-top: 50%;
margin-right: 55px;
& > .cr-img {
// width: 350px;
width: 410px;
display: flex;
justify-content: center;
& > img {
width: 350px;
transform: scale(1.4);
}
}
&:nth-child(2n) {
padding-top: 40%;
}
}
& > .cr-1,
.cr-3 {
position: relative;
& > .name {
position: absolute;
writing-mode: vertical-lr;
color: #fff;
width: 48px;
display: flex;
align-items: center;
background: red;
padding: 16px 0;
top: 32%;
font-size: 18px;
right: 10%;
}
}
& > .cr-2,
.cr-4 {
position: relative;
& > .name {
position: absolute;
writing-mode: vertical-lr;
color: #fff;
width: 48px;
display: flex;
align-items: center;
background: red;
padding: 16px 0;
top: 24%;
font-size: 18px;
left: 10%;
}
}
& > .cr-3 {
& > .cr-img {
width: 350px;
display: flex;
justify-content: flex-end;
&:nth-child(2) {
justify-content: flex-start;
}
& > img {
width: 150px;
}
}
}
& > .cr-1 {
& > .name {
background-color: #8d601c;
}
}
& > .cr-2 {
& > .name {
background-color: #811414;
}
}
& > .cr-3 {
& > .name {
background-color: #811414;
}
}
& > .cr-4 {
& > .cr-img {
& > img {
transform: scale(1.2);
}
}
& > .name {
background-color: #1c275e;
}
}
}
}
.vr {
height: 900px;
.vr-content {
width: 100%;
height: 100%;
position: absolute;
// top: -100px;
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-around;
.text {
font-size: 20px;
font-family: PingFang SC;
font-weight: 800;
color: #fff;
line-height: 65px;
}
.video-button {
color: #fff;
font-size: 22px;
width: 180px;
height: 54px;
background: #e9b76f;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
letter-spacing: 2px;
cursor: pointer;
}
.left,
.right {
width: 20%;
.img-container {
width: 100%;
img {
width: 100%;
// height: 100%;
}
}
}
.center {
position: relative;
.img-container {
animation: changeright 4s linear infinite;
}
.text-content {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.center-text {
font-size: 40px;
font-weight: 500;
color: #e9b76f;
line-height: 50px;
}
}
.button {
margin-top: 30px;
cursor: pointer;
.outter {
width: 90px;
height: 90px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed#e9b76f;
animation: likes 2.5s ease-in infinite;
transition: all ease-in 0.5s;
.inner {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #e9b76f;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bold;
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/boutique/components/sdcs.json
浏览文件 @ c7c929fa
......@@ -96,11 +96,23 @@
"data": [
{
"title": "苟坝会议",
"txt": "1935年3月12日，中央政治局扩大会议在苟坝召开，分析了中央红军面临的局势，成立了由毛泽东、周恩来、王稼祥组成的新“三人团”，全权指挥军事，并对政治局负责。苟坝会议，从组织上进一步巩固和保证了毛泽东在党内、军内的领导地位。"
"txt": "1935年3月12日，中央政治局扩大会议在苟坝召开，分析了中央红军面临的局势，成立了由毛泽东、周恩来、王稼祥组成的新“三人团”，全权指挥军事，并对政治局负责。苟坝会议，从组织上进一步巩固和保证了毛泽东在党内、军内的领导地位。",
"imgs": [
{
"url": "1.jpg",
"name": "苟坝会议会址"
}
]
},
{
"title": "鲁班场战斗",
"txt": "苟坝会议后，中革军委决定向西南转移，调动周浑元、吴奇伟纵队。1935年3月15日，鲁班场战斗打响，红军向据守在鲁班场的国民党中央军周浑元纵队发起猛烈进攻。由于敌军依托坚固的碉堡工事拼命抵抗，且有飞机助战，红军激战一整天，取得了局部胜利，但受周浑元部以密集火炮压迫，不能扩大战果，双方成对峙状态。红军于当晚20时，撤出战斗，向茅台及其附近的地区转移。"
"txt": "苟坝会议后，中革军委决定向西南转移，调动周浑元、吴奇伟纵队。1935年3月15日，鲁班场战斗打响，红军向据守在鲁班场的国民党中央军周浑元纵队发起猛烈进攻。由于敌军依托坚固的碉堡工事拼命抵抗，且有飞机助战，红军激战一整天，取得了局部胜利，但受周浑元部以密集火炮压迫，不能扩大战果，双方成对峙状态。红军于当晚20时，撤出战斗，向茅台及其附近的地区转移。",
"imgs": [
{
"url": "2.jpg",
"name": "鲁班场战斗遗址"
}
]
},
{
"title": "三渡赤水",
......@@ -115,7 +127,13 @@
"data": [
{
"title": "镇龙山战斗",
"txt": "中央红军在茅台渡过赤水河以后，主力部队隐蔽在赤水河附近的山谷内集结待命，只派出一个团的兵力佯装主力，向古蔺方向前进，作出要北渡长江的态势。古蔺镇龙山的敌人突然遭到红军的猛烈进攻，纷纷溃散。只得急电上报:“红军围攻古蔺甚急，请求火速驰援。”这一行动给敌人造成红军又将北渡长江的假象。蒋介石赶忙调兵遣将部署江防。声称：剿匪成功、在此一举。"
"txt": "中央红军在茅台渡过赤水河以后，主力部队隐蔽在赤水河附近的山谷内集结待命，只派出一个团的兵力佯装主力，向古蔺方向前进，作出要北渡长江的态势。古蔺镇龙山的敌人突然遭到红军的猛烈进攻，纷纷溃散。只得急电上报:“红军围攻古蔺甚急，请求火速驰援。”这一行动给敌人造成红军又将北渡长江的假象。蒋介石赶忙调兵遣将部署江防。声称：剿匪成功、在此一举。",
"imgs": [
{
"url": "1.png",
"name": "鲁班场战斗遗址"
}
]
},
{
"title": "四渡赤水",
......
src/views/display/index.vue
浏览文件 @ c7c929fa
......@@ -18,31 +18,53 @@
<svg-icon :icon-class="onlyShow3d ? 'filter-s' : 'filter'"></svg-icon>
</div> -->
<div class="search-item">
<input type="text" v-model="keyword" placeholder="展览名称" @keyup.enter="search" />
<input
type="text"
v-model="keyword"
placeholder="展览名称"
@keyup.enter="search"
/>
<i class="el-icon-search" @click="search"></i>
</div>
</div>
</div>
<el-row class="type-group">
<el-col :class="{ 'type-item': true, active: item.value == currentType }" v-for="(item, index) in typeList"
:key="index" :span="3" @click.native="handleClickTypeItem(item)">
<el-col
:class="{ 'type-item': true, active: item.value == currentType }"
v-for="(item, index) in typeList"
:key="index"
:span="3"
@click.native="handleClickTypeItem(item)"
>
{{ item.label }}
</el-col>
</el-row>
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40" class="cr-list">
<el-col :span="8" class="cr-item" @click.native="handleClick(item)" @mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)" v-for="(item, index) in list.records" :key="index">
<div class="container wow animate__animated animate__fadeInUp" v-if="item.status == 1">
<el-col
:span="8"
class="cr-item"
@click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="boutique-tag" v-if="isBoutique(item)">精</div>
<div class="img-container">
<img :src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
" width="100%" class="face-image" lazy />
<img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
class="face-image"
lazy
/>
</div>
<div class="desc">
<div class="name">{{ item.title }}</div>
......@@ -62,11 +84,21 @@
</div>
</el-col>
</el-row>
<el-empty description="暂无数据" v-if="list.records.length == 0"></el-empty>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="Number(list.current)" :page-sizes="[20, 40, 100]" :page-size="Number(list.size)"
layout="total, prev, pager, next" :total="Number(list.total)" class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</div>
......@@ -102,36 +134,42 @@ export default {
regionCode: [],
regionTree: [],
currentImg: null,
typeList: [{
label: '全部',
value: ''
}],
currentType: '',
boutiqueTitles: ['神秘贵州', '四渡赤水出奇兵', '记忆与传承', '夜郎国的疑问']
typeList: [
{
label: "全部",
value: "",
},
],
currentType: "",
boutiqueTitles: [
"神秘贵州",
"四渡赤水出奇兵",
"记忆与传承",
"夜郎国的疑问",
],
};
},
computed: {
...mapGetters(["dicts"]),
isBoutique(item) {
return (item) => {
return this.boutiqueTitles.indexOf(item.title) != -1
}
}
return this.boutiqueTitles.indexOf(item.title) != -1;
};
},
},
async created() {
// await this.$store.dispatch("dict/getDictList", ["displayType"]);
// 获取已经存在展览的字典
let res = await getDisplayExistDict()
this.typeList = [...this.typeList, ...res.data.typeList]
let res = await getDisplayExistDict();
this.typeList = [...this.typeList, ...res.data.typeList];
},
mounted() {
let paramsType = this.$route.query.type
let paramsType = this.$route.query.type;
if (paramsType) {
this.currentType = paramsType
this.currentType = paramsType;
}
this.loadData();
this.loadRegionTree();
},
// watch: {
// keyword(value) {
......@@ -150,7 +188,7 @@ export default {
title: this.keyword,
type: this.currentType,
regionCode: this.regionCode[this.regionCode.length - 1],
status: '1'
status: "1",
};
let res = await getList(params);
if (res.code == 0) {
......@@ -170,7 +208,7 @@ export default {
},
handleClickTypeItem(item) {
this.currentType = item.value
this.currentType = item.value;
// debugger
// this.type = value;
this.list.current = 1;
......@@ -178,7 +216,7 @@ export default {
},
handleClick(item) {
let index = this.boutiqueTitles.indexOf(item.title)
let index = this.boutiqueTitles.indexOf(item.title);
// debugger
let newPage;
if (index == -1) {
......@@ -186,14 +224,14 @@ export default {
newPage = this.$router.resolve({
path: `display/${themeType}/${exhibitionId}`,
});
} else {
newPage = this.$router.resolve({
path: `/boutique/${item.title}`,
});
}
window.open(newPage.href, "_blank");
setTimeout(() => {
window.open(newPage.href, "_blank");
}, 300);
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
......@@ -318,7 +356,8 @@ $text-indent: 16px;
margin-right: 20px;
&:hover {
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
}
......@@ -345,9 +384,9 @@ $text-indent: 16px;
}
&:hover {
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
}
.search-button {
......@@ -364,7 +403,8 @@ $text-indent: 16px;
transition: all 0.2s ease;
&:hover {
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
.svg-icon {
......@@ -396,7 +436,6 @@ $text-indent: 16px;
background: $themeSecondaryColor;
color: #fff;
}
}
.content-wrapper {
......@@ -448,7 +487,6 @@ $text-indent: 16px;
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
......@@ -606,7 +644,6 @@ $text-indent: 16px;
}
::v-deep .el-pagination {
.btn-prev,
.btn-next {
background: transparent;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论