Skip to content

E
exhibition_page
提交 9f41a999 authored 作者: Anix's avatar Anix
浏览文件
操作

Merge branch 'master' of https://gitee.com/gzcnki/exhibition_page

上级 40664923 f15eaef2
显示空白字符变更
内嵌 并排
正在显示 包含 940 行增加 和 34 行删除
src/assets/imgs/boutique/smgz/3_hall/hall_pics/1-1.png 0 → 100644
浏览文件 @ 9f41a999
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/smgz/3_hall/hall_pics/1-2.png 0 → 100644
浏览文件 @ 9f41a999
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/smgz/3_hall/hall_pics/2-1.png 0 → 100644
浏览文件 @ 9f41a999
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/smgz/3_hall/hall_pics/2-2.png 0 → 100644
浏览文件 @ 9f41a999
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/smgz/3_hall/hall_pics/3-1.png 0 → 100644
浏览文件 @ 9f41a999
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/smgz/3_hall/hall_pics/3-2.png 0 → 100644
浏览文件 @ 9f41a999
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/smgz/3_hall/hall_pics/4-1.png 0 → 100644
浏览文件 @ 9f41a999
This image diff could not be displayed because it is too large. You can view the blob instead.
src/components/NavBar/index.vue
浏览文件 @ 9f41a999
...@@ -298,8 +298,11 @@ export default { ...@@ -298,8 +298,11 @@ export default {
}, },
mounted() { mounted() {
window.addEventListener("scroll", this.initHeight); window.addEventListener("scroll", this.initHeight);
this.$nextTick(() => { this.$nextTick(() => {
this.offsetTop = document.querySelector("#navbar").offsetTop; this.offsetTop = document.querySelector("#navbar").offsetTop;
let navBarHeight =document.querySelector("#navbar").offsetHeight
this.$store.commit('app/SET_NAVBAR_HEIGHT',navBarHeight)
}); });
}, },
methods: { methods: {
......
src/store/getters.js
浏览文件 @ 9f41a999
...@@ -11,6 +11,7 @@ const getters = { ...@@ -11,6 +11,7 @@ const getters = {
curPath: state => state.app.curPath, curPath: state => state.app.curPath,
navBarFixed: state => state.app.navBarFixed, navBarFixed: state => state.app.navBarFixed,
showLoginDialog: state => state.app.showLoginDialog, showLoginDialog: state => state.app.showLoginDialog,
navbarStyle: state => state.app.navbarStyle navbarStyle: state => state.app.navbarStyle,
navbarHeight: state => state.app.navbarHeight
} }
export default getters export default getters
src/store/modules/app.js
浏览文件 @ 9f41a999
...@@ -3,6 +3,7 @@ const getDefaultState = () => { ...@@ -3,6 +3,7 @@ const getDefaultState = () => {
curPath: null, curPath: null,
navBarFixed: false, navBarFixed: false,
showLoginDialog: null, showLoginDialog: null,
navbarHeight:null,
navbarStyle: '1',//1-默认蓝色；2-中国风；3-红色 navbarStyle: '1',//1-默认蓝色；2-中国风；3-红色
} }
} }
...@@ -25,6 +26,9 @@ const mutations = { ...@@ -25,6 +26,9 @@ const mutations = {
CHANGE_NAV_COLOR: (state, themeStyle) => { CHANGE_NAV_COLOR: (state, themeStyle) => {
state.navbarStyle = themeStyle state.navbarStyle = themeStyle
}, },
SET_NAVBAR_HEIGHT: (state, navbarHeight) => {
state.navbarHeight = navbarHeight
}
} }
export default { export default {
......
src/views/boutique/components/SMGZ.vue 0 → 100644
浏览文件 @ 9f41a999
<template>
<div class="smgz">
<div class="face-img smgz-item">
<div class="back-img img wow animate__animated animate__fadeIn">
<img src="@/assets/imgs/boutique/smgz/1_faceImage/bg.png" alt="" />
</div>
<div class="left-title img wow animate__animated animate__fadeInLeft">
<img
src="@/assets/imgs/boutique/smgz/1_faceImage/left-title.png"
alt=""
/>
</div>
<div
class="center-title img wow animate__animated animate__fadeInDown"
data-wow-duration="3s"
>
<img
src="@/assets/imgs/boutique/smgz/1_faceImage/center-title.png"
alt=""
/>
</div>
<div
class="ms img wow animate__animated animate__fadeInRight"
data-wow-duration="2s"
>
<img src="@/assets/imgs/boutique/smgz/1_faceImage/ms.png" alt="" />
</div>
<div
class="more img wow animate__animated animate__fadeInUp"
data-wow-duration="1s"
@click="handleClickMore"
>
<img src="@/assets/imgs/boutique/smgz/1_faceImage/more.png" alt="" />
</div>
</div>
<div class="intro smgz-item" id="intro">
<!-- <div class="bg img wow animate__animated animate__fadeIn">
<img src="@/assets/imgs/boutique/smgz/2_intro/bg.png" alt="" />
</div> -->
<div
class="cover img wow animate__animated animate__fadeInUp"
data-wow-duration="1s"
>
<img src="@/assets/imgs/boutique/smgz/2_intro/cover.png" alt="" />
</div>
<div
class="cover2 img wow animate__animated animate__fadeInUp"
data-wow-duration="2s"
>
<img src="@/assets/imgs/boutique/smgz/2_intro/cover2.png" alt="" />
<div
class="title img wow animate__animated animate__fadeInUp"
data-wow-duration="4s"
>
<img src="@/assets/imgs/boutique/smgz/2_intro/title.png" alt="" />
</div>
</div>
<div class="text img wow animate__animated animate__fadeInUp">
<div class="text-content">
<div class="title">展览简介</div>
<div class="main">
<p>
《神秘贵州——古生物王国》展览以“主题制”为统领，系统归集贵州近10亿年地质沉积史和6.09亿年生命演化史中的重大事件和重要材料，分为“沉积巨著”“生命源头”“龙的故乡”“陆地寻踪”四部分。
</p>
<p>
<span class="main-num">01</span>
<span class="main-text"
>“沉积巨著”：展示贵州5万余米厚度沉积岩与古生物化石的关系，揭示地球环境对生命的塑造和影响。</span
>
</p>
<p>
<span class="main-num">02</span>
<span class="main-text"
>“生命源头”：以“动物生命的起源--瓮安生物群”拉开帷幕，展示远古贵州从震旦纪至二叠纪海洋生物演化历程。</span
>
</p>
<p>
<span class="main-num">03</span>
<span class="main-text"
>“龙的故乡”：用三叠纪生命复苏全球唯一实证的青岩生物群拉开帷幕，全面展示三叠纪生物从复苏-繁盛，重点展示晚三叠世海生爬行动物多样性及其生存适应性演化。</span
>
</p>
<p>
<span class="main-num">04</span>
<span class="main-text"
>“陆地寻踪”：展示贵州彻底抬升为陆地后，侏罗纪至第四纪恐龙的兴衰、哺乳动物的崛起以及古人类的出现，呼吁人们顺应自然，保护自然，与自然和谐相处。</span
>
</p>
</div>
</div>
</div>
</div>
<div class="hall smgz-item">
<div class="hall-content wow animate__animated animate__fadeIn">
<div
class="hall-content-title wow animate__animated animate__fadeInDown"
>
<img src="@/assets/imgs/boutique/smgz/3_hall/title.png" alt="" />
</div>
<div
class="hall-content-buttons wow animate__animated animate__fadeInUp"
>
<div
:class="[
'button-item',
curentUnitPicIndex == item.index ? 'active' : '',
]"
v-for="(item, index) in units"
:key="index"
@click="handleChangeUnit(item)"
>
{{ item.name }}
</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="
require(`@/assets/imgs/boutique/smgz/3_hall/hall_pics/${
curentUnitPicIndex + 1
}-${item}.png`)
"
/>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
<div class="swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div>
</swiper>
</div>
</div>
</div>
<div class="crs smgz-item">
<div class="crs-content">
<div
class="crs-content-title wow animate__animated animate__fadeInDown"
>
<img src="@/assets/imgs/boutique/smgz/4_cr/title.png" alt="" />
</div>
<div
class="crs-content-buttons wow animate__animated animate__fadeInUp"
>
<div
:class="[
'button-item',
curentUnitCrIndex == item.index ? 'active' : '',
]"
v-for="(item, index) in units"
:key="index"
@click="handleChangeCr(item)"
>
{{ item.name }}
</div>
</div>
<div class="crs-content-imgs wow animate__animated animate__fadeInUp">
<div
class="item"
v-for="(item, index) in crPics[curentUnitCrIndex]"
:key="index"
>
<div class="img-container">
<img :src="item.url" alt="" />
</div>
<div class="cr-name">{{ item.name }}</div>
</div>
</div>
</div>
</div>
<div class="guide smgz-item">
<div class="guide-content">
<div
class="guide-content-title wow animate__animated animate__fadeInDown"
>
<img src="@/assets/imgs/boutique/smgz/5_guide/title.png" alt="" />
</div>
<div class="guide-content-imgs">
<div class="img-container wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/boutique/smgz/5_guide/pic1.png" alt="" />
</div>
<div class="img-container wow animate__animated animate__fadeInRight">
<img src="@/assets/imgs/boutique/smgz/5_guide/pic2.png" alt="" />
</div>
</div>
<div
class="
guide-content-3d-imgs
wow
animate__animated animate__fadeInDown
"
>
<img src="@/assets/imgs/boutique/smgz/5_guide/pic3.png" alt="" />
</div>
</div>
</div>
<div class="vr smgz-item">
<div class="vr-content">
<div class="left wow animate__animated animate__fadeInLeft">
<div class="img-container">
<img src="@/assets/imgs/boutique/smgz/6_vr/1.png" alt="" />
</div>
<div class="text">详细介绍神秘贵州的不一样</div>
<div class="video-button" @click="handleClikeVideo">观看视频</div>
</div>
<div class="center wow animate__animated animate__fadeIn">
<div class="img-container">
<img src="@/assets/imgs/boutique/smgz/6_vr/circle.png" alt="" />
</div>
<div class="text-content">
<div class="center-text">360全景展览</div>
<div class="text">足不出户，体验展管一切</div>
<div class="button" @click="handleToVR">
<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/smgz/6_vr/2.png" alt="" />
</div>
<div class="text">策划人讲解神秘贵州</div>
<div class="video-button" @click="handleClikeVideo">观看视频</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
name: "SMGZ",
components: {
swiper,
swiperSlide,
},
data() {
return {
units: [
{
index: 0,
name: "沉积巨著",
},
{
index: 1,
name: "生命源头",
},
{
index: 2,
name: "龙的故乡",
},
{
index: 3,
name: "陆地寻踪",
},
],
curentUnitPicIndex: 0,
curentUnitCrIndex: 0,
unitPics: [["1", "2"], ["1", "2"], ["1", "2"], ["1"]],
crPics: [
[
{
name: "梁氏关岭鱼龙",
index: "1",
url: "http://222.85.214.245:9566/files/2022-09-28-680c2523-d5fd-4994-8b68-4b64591ecc40/low/1.%E6%A2%81%E6%B0%8F%E5%85%B3%E5%B2%AD%E9%B1%BC%E9%BE%99.jpg",
},
{
name: "邓氏贵州鱼龙（模式标本）",
index: "2",
url: "http://222.85.214.245:9566/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/1/low/2.%E9%82%93%E6%B0%8F%E8%B4%B5%E5%B7%9E%E9%B1%BC%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
},
{
name: "美丽瓦窑龙（模式标本）",
index: "3",
url: "http://222.85.214.245:9566/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/2/low/%E7%BE%8E%E4%B8%BD%E7%93%A6%E7%AA%91%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
},
],
[
{
name: "许氏创孔海百合",
index: "1",
url: "http://222.85.214.245:9566/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/9/low/8.%E8%AE%B8%E6%B0%8F%E5%88%9B%E5%AD%94%E6%B5%B7%E7%99%BE%E5%90%88%EF%BC%88106%E3%8E%A1%EF%BC%89.jpg",
},
{
name: "黄果树安顺龙",
index: "2",
url: "http://222.85.214.245:9566/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/25/low/24.%E9%BB%84%E6%9E%9C%E6%A0%91%E5%AE%89%E9%A1%BA%E9%BE%99.jpg",
},
{
name: "杨氏幻龙",
index: "3",
url: "http://222.85.214.245:9566/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/15/low/14.%E6%9D%A8%E6%B0%8F%E5%B9%BB%E9%BE%99.jpg",
},
],
[
{
name: "梁氏关岭鱼龙",
index: "1",
url: "http://222.85.214.245:9566/files/2022-09-28-680c2523-d5fd-4994-8b68-4b64591ecc40/low/1.%E6%A2%81%E6%B0%8F%E5%85%B3%E5%B2%AD%E9%B1%BC%E9%BE%99.jpg",
},
{
name: "邓氏贵州鱼龙（模式标本）",
index: "2",
url: "http://222.85.214.245:9566/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/1/low/2.%E9%82%93%E6%B0%8F%E8%B4%B5%E5%B7%9E%E9%B1%BC%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
},
{
name: "美丽瓦窑龙（模式标本）",
index: "3",
url: "http://222.85.214.245:9566/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/2/low/%E7%BE%8E%E4%B8%BD%E7%93%A6%E7%AA%91%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
},
],
[
{
name: "许氏创孔海百合",
index: "1",
url: "http://222.85.214.245:9566/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/9/low/8.%E8%AE%B8%E6%B0%8F%E5%88%9B%E5%AD%94%E6%B5%B7%E7%99%BE%E5%90%88%EF%BC%88106%E3%8E%A1%EF%BC%89.jpg",
},
{
name: "黄果树安顺龙",
index: "2",
url: "http://222.85.214.245:9566/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/25/low/24.%E9%BB%84%E6%9E%9C%E6%A0%91%E5%AE%89%E9%A1%BA%E9%BE%99.jpg",
},
{
name: "杨氏幻龙",
index: "3",
url: "http://222.85.214.245:9566/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/15/low/14.%E6%9D%A8%E6%B0%8F%E5%B9%BB%E9%BE%99.jpg",
},
],
],
swiperOption: {
// loop: true,
// autoplay: {
// delay: 3000,
// stopOnLastSlide: false,
// disableOnInteraction: false,
// },
effect: "coverflow",
fadeEffect: {
crossFade: true,
},
grabCursor: true,
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true, //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
};
},
watch: {
curentUnitPicIndex(value) {
console.log(this.unitPics[value]);
console.log(
`@/assets/imgs/boutique/smgz/3_hall/hall_pics/${
this.curentUnitPicIndex + 1
}-${1}.png`
);
},
},
methods: {
handleChangeUnit(item) {
this.curentUnitPicIndex = item.index;
this.$refs.mySwiper.swiper.activeIndex = 0;
},
handleChangeCr(item) {
this.curentUnitCrIndex = item.index;
// this.curentUnitCrIndex = 1;
},
handleToVR() {
window.open("http://gz.people.com.cn/GB/222162/382387/402166/index.html");
},
handleClickMore() {
let el = document.getElementById("intro");
let height = el.offsetHeight; //5像素偏移量
document.documentElement.scroll({
top: height,
behavior: "smooth", // 平滑移动
});
},
handleClikeVideo() {
this.$message.info("视频暂未上架，请稍候~");
},
},
};
</script>
<style lang="scss" scoped>
// 公共样式
.smgz-item {
position: relative;
width: 100%;
}
.img {
position: absolute;
img {
width: 100%;
height: 100%;
}
}
@function sWidth($width) {
@return $width * 1.2 + px;
}
@function sHeight($height) {
@return $height * 0.8 + px;
}
// 公共样式结束
.smgz {
width: 100%;
.face-img {
height: calc(100vh - 100px);
.back-img {
width: 100%;
height: 100%;
left: 0;
top: 0;
img {
object-fit: cover;
}
}
.left-title {
height: sHeight(676);
left: sWidth(368);
bottom: sHeight(188);
z-index: 1;
}
.center-title {
top: sHeight(32);
z-index: 1;
width: 100%;
display: flex;
justify-content: center;
img {
height: sHeight(86);
width: auto;
}
}
.ms {
height: sHeight(829);
right: 0;
bottom: 0;
}
.more {
bottom: 0;
cursor: pointer;
width: 100%;
display: flex;
justify-content: center;
animation: likes 4s linear infinite;
transform-origin: 50% 100%;
img {
height: sHeight(145);
width: auto;
}
}
}
.intro {
height: sHeight(1610);
background-image: url("@/assets/imgs/boutique/smgz/2_intro/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
// .bg {
// width: 100%;
// height: sHeight(1620);
// }
.cover {
width: 100%;
top: sHeight(20);
}
.cover2 {
top: sHeight(230);
width: 100%;
.title {
width: 100%;
display: flex;
justify-content: center;
position: absolute;
top: 280px;
img {
height: sHeight(145);
width: auto;
}
}
}
.text {
width: 100%;
display: flex;
justify-content: center;
top: sHeight(950);
z-index: 2;
.text-content {
position: absolute;
// left: 0;
width: 60%;
background-image: url("@/assets/imgs/boutique/smgz/2_intro/text.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 100px 100px 120px;
.title {
font-size: 28px;
font-weight: 800;
color: #292b2d;
line-height: 33px;
display: flex;
justify-content: center;
}
.main {
& > p {
font-size: 16px;
font-weight: 600;
color: #292b2d;
line-height: 40px;
font-family: PingFang SC;
.main-num {
font-size: 22px;
font-family: DIN-BlackItalic;
font-weight: 600;
color: #133f7c;
line-height: 40px;
font-style: italic;
margin-right: 6px;
}
}
}
}
}
}
.hall {
// height: 100px;
height: 1100px;
.hall-content {
height: 100%;
position: absolute;
// top: -100px;
background-image: url("@/assets/imgs/boutique/smgz/3_hall/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding-top: 200px;
.hall-content-title {
margin-bottom: 70px;
}
.hall-content-buttons {
display: flex;
.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;
}
}
.hall-content-swiper {
width: 80%;
margin-top: 88px;
.swiper-container {
height: sHeight(500);
}
.swiper-slide {
display: flex;
justify-content: center;
}
.img-container {
width: 80%;
height: 100%;
border: 3px solid #fff;
box-shadow: 0px 12px 30px 0px #051730;
border-radius: 4px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.swiper-button-next,
.swiper-button-prev {
background-image: none;
border: 5px solid #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bolder;
}
}
}
}
.crs {
height: 1100px;
.crs-content {
width: 100%;
height: 100%;
position: absolute;
// top: -100px;
background-image: url("@/assets/imgs/boutique/smgz/4_cr/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: 155px;
display: flex;
flex-direction: column;
align-items: center;
.crs-content-title {
margin-bottom: 70px;
}
.crs-content-buttons {
display: flex;
.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;
}
}
.crs-content-imgs {
margin-top: 88px;
display: flex;
.item {
.img-container {
width: 500px;
height: 460px;
margin: 0 18px;
background-color: #fff;
overflow: hidden;
cursor: pointer;
&:hover {
img {
scale: 1.1;
}
}
img {
width: 100%;
height: 100%;
object-fit: contain;
transition: all ease 0.3s;
}
}
.cr-name {
margin-top: 20px;
font-size: 26px;
font-family: PingFang SC;
font-weight: 800;
color: #252f58;
display: flex;
justify-content: center;
}
}
}
}
}
.guide {
height: 1700px;
.guide-content {
width: 100%;
height: 100%;
position: absolute;
// top: -100px;
background-image: url("@/assets/imgs/boutique/smgz/5_guide/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: 152px;
display: flex;
flex-direction: column;
align-items: center;
.guide-content-title {
margin-bottom: 70px;
}
.guide-content-imgs {
display: flex;
justify-content: center;
.img-container {
width: 800px;
height: 596px;
img {
width: 100%;
height: 100%;
}
}
}
.guide-content-3d-imgs {
margin-bottom: 70px;
width: 90%;
img {
width: 100%;
}
}
}
}
.vr {
height: 900px;
.vr-content {
width: 100%;
height: 100%;
position: absolute;
// top: -100px;
background-image: url("@/assets/imgs/boutique/smgz/6_vr/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: 172px;
display: flex;
align-items: center;
justify-content: space-around;
.text {
font-size: 20px;
font-family: PingFang SC;
font-weight: 800;
color: #141c3c;
line-height: 65px;
}
.video-button {
color: #fff;
font-size: 22px;
width: 180px;
height: 54px;
background: #3b4982;
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-family: zihun55hao-longyinshoushu;
font-weight: 500;
color: #141c3c;
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#3B4982;
animation: likes 2.5s ease-in infinite;
transition: all ease-in 0.5s;
.inner {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #3b4982;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bold;
}
}
}
}
}
}
}
@keyframes likes {
0% {
transform: scale(1);
}
25% {
transform: scale(0.9);
}
50% {
transform: scale(0.85);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
/*自定义动画类----顺时针旋转（使用这个动画的时候才设置动画执行时间）*/
@keyframes changeright {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
\ No newline at end of file
src/views/boutique/index.vue
浏览文件 @ 9f41a999
<template> <template>
<div class="boutique"> <div class="boutique">
<!-- <NavBar /> -->
<!-- <h1>精品展</h1> -->
<!-- <Footer /> -->
<div class="boutique-header"> <div class="boutique-header">
<img src="@/assets/imgs/boutique/banner.jpg" width="100%" /> <img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
<!-- <div class="boutique-title">
<p>多彩贵州 &nbsp;博物盛筵</p>
<span>—— 精品展</span>
</div> -->
<ul class="tabs"> <ul class="tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)"> <li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
<div :class="{ active: activeTab === node.tab }"> <div :class="{ active: activeTab === node.tab }">
...@@ -19,10 +11,16 @@ ...@@ -19,10 +11,16 @@
</ul> </ul>
</div> </div>
<div class="boutique-content"> <div class="boutique-content" ref="boutiqueContent">
<div class="focus-content"> <div class="focus-content" v-if="activeTab">
<!-- <p>{{ content.title }}</p> --> <p
<div class="img-container"> v-if="activeTab == 'cjm'"
style="display: flex; justify-content: center"
>
长角苗民俗及文化遗产
</p>
<SMGZ v-else-if="activeTab == 'smgz'" />
<div v-else class="img-container">
<img <img
:src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)" :src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)"
alt="" alt=""
...@@ -36,9 +34,12 @@ ...@@ -36,9 +34,12 @@
<script> <script>
import NavBar from "@/components/NavBar"; import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import SMGZ from "./components/SMGZ";
import { mapGetters } from "vuex";
export default { export default {
name: "Boutique", name: "Boutique",
components: { NavBar, Footer }, components: { NavBar, Footer, SMGZ},
data() { data() {
return { return {
tabs: [ tabs: [
...@@ -46,13 +47,15 @@ export default { ...@@ -46,13 +47,15 @@ export default {
{ tab: "smgz", name: "神秘贵州" }, { tab: "smgz", name: "神秘贵州" },
{ tab: "jyycc", name: "技艺与传承" }, { tab: "jyycc", name: "技艺与传承" },
{ tab: "ylgdyw", name: "夜郎国的疑问" }, { tab: "ylgdyw", name: "夜郎国的疑问" },
// { tab: "xxx", name: "生态博物馆" }, { tab: "cjm", name: "长角苗民俗及文化遗产" },
], ],
activeTab: "", activeTab: "",
// content: { title: "四渡赤水" } // content: { title: "四渡赤水" }
}; };
}, },
computed: { computed: {
...mapGetters(["navbarHeight"]),
content() { content() {
let obj = Object.create(null); let obj = Object.create(null);
...@@ -68,6 +71,9 @@ export default { ...@@ -68,6 +71,9 @@ export default {
activeTab: { activeTab: {
handler: function (value) { handler: function (value) {
let color = ""; let color = "";
if (!value) {
return;
}
switch (value) { switch (value) {
case "sdcs": case "sdcs":
color = "4"; color = "4";
...@@ -81,18 +87,26 @@ export default { ...@@ -81,18 +87,26 @@ export default {
case "ylgdyw": case "ylgdyw":
color = "7"; color = "7";
break; break;
case "cjm":
color = "1";
} }
this.$store.commit("app/CHANGE_NAV_COLOR", color); this.$store.commit("app/CHANGE_NAV_COLOR", color);
}, },
immediate: true, immediate: true,
}, },
}, },
mounted(){ mounted() {
this.activeTab ='sdcs' this.activeTab = "sdcs";
}, },
methods: { methods: {
handleTabClick(data) { handleTabClick(data) {
this.activeTab = data.tab; this.activeTab = data.tab;
let el = document.getElementsByClassName("boutique-header")[0];
let height = el.offsetHeight - this.navbarHeight ; //5像素偏移量
document.documentElement.scroll({
top: height,
behavior: "smooth", // 平滑移动
});
}, },
}, },
}; };
...@@ -100,24 +114,13 @@ export default { ...@@ -100,24 +114,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.boutique { .boutique {
// display: flex;
// justify-content: center;
// height: 100vh;
// align-items: center;
// background-color: #2069c4;
min-height: calc(100% - 300px); min-height: calc(100% - 300px);
.boutique-header { .boutique-header {
position: relative; position: relative;
// height: 620px;
overflow: hidden; overflow: hidden;
> img { > img {
height: 500px; height: 500px;
object-fit: cover; object-fit: cover;
// position: absolute;
// width: 100%;
// left: 0;
// top: 0;
// z-index: 0;
} }
} }
.boutique-title { .boutique-title {
...@@ -203,17 +206,17 @@ export default { ...@@ -203,17 +206,17 @@ export default {
} }
.boutique-content { .boutique-content {
.focus-content { .focus-content {
padding: 20px; // padding: 20px 0;
margin: 20px; // margin: 20px;
box-shadow: 1px 12px 10px 1px #ddd; box-shadow: 1px 12px 10px 1px #ddd;
margin-top: 0; margin-top: 0;
min-height: 600px; min-height: 600px;
display: flex; // display: flex;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
font-size: 30px; font-size: 30px;
font-weight: 600; font-weight: 600;
background: rgb(239 247 255); // background: rgb(239 247 255);
> p { > p {
margin: 0; margin: 0;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论