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