Skip to content

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

根据修改意见修改神秘贵州；首页虚拟展标题由24px改为26px

上级 5696373d
隐藏空白字符变更
内嵌 并排
正在显示 包含 82 行增加 和 70 行删除
src/views/boutique/components/SMGZ.vue
浏览文件 @ e90343a8
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
alt="" alt=""
/> />
</div> </div>
<div <!-- <div
class="center-title img wow animate__animated animate__fadeInDown" class="center-title img wow animate__animated animate__fadeInDown"
data-wow-duration="3s" data-wow-duration="3s"
> >
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
src="@/assets/imgs/boutique/smgz/1_faceImage/center-title.png" src="@/assets/imgs/boutique/smgz/1_faceImage/center-title.png"
alt="" alt=""
/> />
</div> </div> -->
<div <div
class="ms img wow animate__animated animate__fadeInRight" class="ms img wow animate__animated animate__fadeInRight"
data-wow-duration="2s" data-wow-duration="2s"
...@@ -103,32 +103,34 @@ ...@@ -103,32 +103,34 @@
> >
<img src="@/assets/imgs/boutique/smgz/3_hall/title.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/3_hall/title.png" alt="" />
</div> </div>
<div <div class="hall-content-intro">
class="hall-content-buttons wow animate__animated animate__fadeInUp"
>
<div <div
:class="[ class="hall-content-buttons wow animate__animated animate__fadeInUp"
'button-item',
curentUnitPicIndex == item.index ? 'active' : '',
]"
v-for="(item, index) in units"
:key="index"
@click="handleChangeUnit(item)"
> >
{{ item.name }} <div
:class="[
'button-item',
currentUnitPicIndex == index ? 'active' : '',
]"
v-for="(item, index) in units"
:key="index"
@click="handleChangeUnit(index)"
>
{{ item.name }}
</div>
</div>
<div class="unit-intro">
{{ units[currentUnitPicIndex].intro }}
</div> </div>
</div> </div>
<div <div
class="hall-content-swiper wow animate__animated animate__fadeInUp" class="hall-content-swiper wow animate__animated animate__fadeInUp"
> >
<swiper :options="swiperOption" ref="mySwiper"> <swiper :options="swiperOption" ref="unitSwiper">
<swiper-slide <swiper-slide v-for="(item, index) in units" :key="index">
v-for="(item, index) in unitPics[curentUnitPicIndex]" <div class="img-container" v-if="item.img">
:key="index" <img :src="$getFullUrl(baseUrl + item.img)" />
>
<div class="img-container" v-if="unitPics[curentUnitPicIndex]">
<img :src="$getFullUrl(item)" />
</div> </div>
</swiper-slide> </swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> <div class="swiper-pagination" slot="pagination"></div>
...@@ -166,7 +168,7 @@ ...@@ -166,7 +168,7 @@
</div> </div>
</div> --> </div> -->
<div class="crs-content-swiper wow animate__animated animate__fadeInUp"> <div class="crs-content-swiper wow animate__animated animate__fadeInUp">
<swiper :options="swiperOption2" ref="mySwiper"> <swiper :options="swiperOption2" ref="crSwiper">
<swiper-slide v-for="(v, i) in units" :key="i"> <swiper-slide v-for="(v, i) in units" :key="i">
<div class="crs-content-imgs"> <div class="crs-content-imgs">
<div <div
...@@ -333,53 +335,43 @@ export default { ...@@ -333,53 +335,43 @@ export default {
videoPlayer, videoPlayer,
}, },
data() { data() {
let that = this;
return { return {
baseUrl: "/files/boutique_imgs/smgz/",
units: [ units: [
{ {
index: 0, index: 0,
name: "沉积巨著", name: "沉积巨著",
img: "3_unit/1-1.png",
intro:
"贵州素有“沉积岩王国”的美誉，亿万年的沉积地层蕴含了近6亿年的生命密码。展览运用长达26m的模型，配以代表性岩石标本，直观地展示贵州近9亿年的地层，巧妙地向观众科普相关地学知识。",
}, },
{ {
index: 1, index: 1,
name: "生命源头", name: "生命源头",
img: "3_unit/2-1.png",
intro:
"以无脊椎动物演化为线索，展示贵州震旦纪、寒武纪的重要生物群，以及奥陶纪至二叠纪的代表性生物，向观众科普这一时期生命从起源到兴盛、繁荣到衰亡的历程。",
}, },
{ {
index: 2, index: 2,
name: "龙的故乡", name: "龙的故乡",
img: "3_unit/3-1.png",
intro:
"用盘县动物群、兴义动物群和关岭动物群的典型化石标本，讲述三叠纪时期海生爬行动物由兴盛到繁荣的景象,诠释了2亿年前欣欣向荣的贵州海洋世界。展出的118件展品中,有目前全球仅有的蔡胡氏典型鱼龙模式标本，数量稀少的中国始喙龟化石标本，罕见的疑似怀孕梁氏关岭鱼龙化石标本，以及大量的胡氏贵州龙和创孔海百合等古生物化石标本。",
}, },
{ {
index: 3, index: 3,
name: "陆地寻踪", name: "陆地寻踪",
img: "3_unit/4-1.png",
intro:
"重点展示侏罗纪至第四纪时期陆地古生物的演化历程，用恐龙的模型、骨骼化石、足迹化石及第四纪哺乳动物化石标本，向观众科普相关知识，唤起人们尊重自然，保护环境，与自然和谐共生。",
}, },
], ],
curentUnitPicIndex: 0, currentUnitPicIndex: 0,
curentUnitCrIndex: 0, curentUnitCrIndex: 0,
unitPics: [
[
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/1-1.png",
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/1-2.png",
],
[
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/2-1.png",
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/2-2.png",
],
[
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/3-1.png",
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/3-2.png",
],
[
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/4-1.png",
"http://222.85.214.245:9604/files/2022-10-28-2607ad1d-605c-488c-ac92-50af7220decb/low/4-2.png",
],
],
swiperOption: { swiperOption: {
// loop: true,
// autoplay: {
// delay: 3000,
// stopOnLastSlide: false,
// disableOnInteraction: false,
// },
effect: "coverflow", effect: "coverflow",
fadeEffect: { fadeEffect: {
crossFade: true, crossFade: true,
...@@ -395,6 +387,12 @@ export default { ...@@ -395,6 +387,12 @@ export default {
nextEl: ".swiper-button-next", nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev", prevEl: ".swiper-button-prev",
}, },
on: {
slideChange: function () {
var index = this.activeIndex;
that.currentUnitPicIndex = index;
},
},
}, },
swiperOption2: { swiperOption2: {
// effect: "coverflow", // effect: "coverflow",
...@@ -446,9 +444,9 @@ export default { ...@@ -446,9 +444,9 @@ export default {
window.removeEventListener("scroll", this.scroll, false); window.removeEventListener("scroll", this.scroll, false);
}, },
methods: { methods: {
handleChangeUnit(item) { handleChangeUnit(index) {
this.curentUnitPicIndex = item.index; this.currentUnitPicIndex = index;
this.$refs.mySwiper.swiper.realIndex = 0; this.$refs.unitSwiper.swiper.slideTo(index, 500, true);
}, },
handleChangeCr(item) { handleChangeCr(item) {
this.curentUnitCrIndex = item.index; this.curentUnitCrIndex = item.index;
...@@ -523,7 +521,6 @@ export default { ...@@ -523,7 +521,6 @@ export default {
this.handleChangeToVR(); this.handleChangeToVR();
this.isVrLoaded = true; this.isVrLoaded = true;
} else { } else {
} }
}, },
...@@ -713,7 +710,7 @@ export default { ...@@ -713,7 +710,7 @@ export default {
.hall { .hall {
// height: 100px; // height: 100px;
height: 1100px; height: 1200px;
.hall-content { .hall-content {
height: 100%; height: 100%;
...@@ -730,27 +727,41 @@ export default { ...@@ -730,27 +727,41 @@ export default {
.hall-content-title { .hall-content-title {
margin-bottom: 70px; margin-bottom: 70px;
} }
.hall-content-buttons { .hall-content-intro {
display: flex; display: flex;
.button-item { flex-direction: column;
margin: 0 70px; align-items: center;
height: sHeight(112); .hall-content-buttons {
padding: 0 sWidth(40);
display: flex; display: flex;
align-items: center; .button-item {
background: #3b4982; margin: 0 70px;
font-size: 30px; height: sHeight(112);
font-family: PingFang SC; padding: 0 sWidth(40);
font-weight: 800; display: flex;
color: #ffffff; align-items: center;
cursor: pointer; background: #3b4982;
border: 2px solid transparent; font-size: 30px;
font-family: PingFang SC;
font-weight: 800;
color: #ffffff;
cursor: pointer;
border: 2px solid transparent;
}
.button-item:hover,
.active {
background: #141c3c;
border: 2px solid #ffffff;
box-shadow: 0px 12px 30px 0px #051730;
}
} }
.button-item:hover, .unit-intro {
.active { width: 70%;
background: #141c3c; font-size: 22px;
border: 2px solid #ffffff; font-weight: 400;
box-shadow: 0px 12px 30px 0px #051730; color: #fff;
padding-top: 56px;
text-indent: 44px;
line-height: 1.5;
} }
} }
......
src/views/home/components/Virtural.vue
浏览文件 @ e90343a8
...@@ -111,13 +111,14 @@ $blue: #2069c4; ...@@ -111,13 +111,14 @@ $blue: #2069c4;
} }
} }
.content { .content {
min-width: 50vw;
.intro { .intro {
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba PuHuiTi";
color: #ffffff; color: #ffffff;
margin-top: 110px; margin-top: 110px;
.name { .name {
margin-bottom: 27px; margin-bottom: 27px;
font-size: 24px; font-size: 26px;
font-weight: bold; font-weight: bold;
} }
.deptName { .deptName {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论