Skip to content

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

优化博物馆和文物详情文字高度；优化神秘贵州展厅加载速度

上级 00b51b8d
隐藏空白字符变更
内嵌 并排
正在显示 包含 157 行增加 和 133 行删除
src/components/ImageViewer/index.vue
浏览文件 @ 977376e3
...@@ -7,24 +7,15 @@ ...@@ -7,24 +7,15 @@
--> -->
<template> <template>
<span <span class="image-item" :style="{
class="image-item" width: width,
:style="{ height: height,
width: width, }">
height: height,
}"
>
<span class="warp" @click="showImage"> <span class="warp" @click="showImage">
<span class="el-icon-view" style="margin-right:10px"></span> <span class="el-icon-view" style="margin-right:10px"></span>
查看大图 查看大图
</span> </span>
<el-image <el-image ref="Image" class="image" :src="imgSrc" :preview-src-list="previewSrc" fit="contain"></el-image>
ref="Image"
class="image"
:src="imgSrc"
:preview-src-list="previewSrc"
fit="contain"
></el-image>
</span> </span>
</template> </template>
...@@ -41,6 +32,10 @@ export default { ...@@ -41,6 +32,10 @@ export default {
typeof: String, typeof: String,
default: '100px', default: '100px',
}, },
highImgSrc: {
typeof: String,
default: '',
}
}, },
data() { data() {
return { return {
...@@ -48,7 +43,7 @@ export default { ...@@ -48,7 +43,7 @@ export default {
baseurl: '', baseurl: '',
}; };
}, },
mounted() {}, mounted() { },
watch: {}, watch: {},
computed: { computed: {
imgSrc() { imgSrc() {
...@@ -59,10 +54,11 @@ export default { ...@@ -59,10 +54,11 @@ export default {
} }
}, },
previewSrc() { previewSrc() {
let src = this.highImgSrc || this.src
if (typeof this.src == 'string') { if (typeof this.src == 'string') {
return [this.src]; return [src];
} else { } else {
return this.src; return src;
} }
}, },
}, },
...@@ -83,13 +79,16 @@ export default { ...@@ -83,13 +79,16 @@ export default {
position: relative; position: relative;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
& + .image-item {
&+.image-item {
margin-left: 10px; margin-left: 10px;
} }
.image { .image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.warp { .warp {
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -99,6 +98,7 @@ export default { ...@@ -99,6 +98,7 @@ export default {
align-items: center; align-items: center;
color: #fff; color: #fff;
} }
&:hover { &:hover {
.warp { .warp {
z-index: 1; z-index: 1;
......
src/views/boutique/components/SMGZ.vue
浏览文件 @ 977376e3
...@@ -2,17 +2,10 @@ ...@@ -2,17 +2,10 @@
<div class="smgz"> <div class="smgz">
<div class="face-img smgz-item"> <div class="face-img smgz-item">
<div class="back-img img wow animate__animated animate__fadeIn"> <div class="back-img img wow animate__animated animate__fadeIn">
<img <img src="@/assets/imgs/boutique/smgz-5/1_faceImage/bg.png" alt="" />
src="@/assets/imgs/boutique/smgz/1_faceImage/bg.png"
id="@/assets/imgs/boutique/smgz/1_faceImage/bg.png"
alt=""
/>
</div> </div>
<div class="left-title img wow animate__animated animate__fadeInLeft"> <div class="left-title img wow animate__animated animate__fadeInLeft">
<img <img src="@/assets/imgs/boutique/smgz/1_faceImage/left-title.png" alt="" />
src="@/assets/imgs/boutique/smgz/1_faceImage/left-title.png"
alt=""
/>
</div> </div>
<!-- <div <!-- <div
class="center-title img wow animate__animated animate__fadeInDown" class="center-title img wow animate__animated animate__fadeInDown"
...@@ -23,21 +16,10 @@ ...@@ -23,21 +16,10 @@
alt="" alt=""
/> />
</div> --> </div> -->
<div <div class="ms img wow animate__animated animate__fadeInRight" data-wow-duration="2s">
class="ms img wow animate__animated animate__fadeInRight" <img src="@/assets/imgs/boutique/smgz/1_faceImage/ms-low.png" alt="" />
data-wow-duration="2s"
>
<img
src="@/assets/imgs/boutique/smgz/1_faceImage/ms.png"
id="@/assets/imgs/boutique/smgz/1_faceImage/ms.png"
alt=""
/>
</div> </div>
<div <div class="more img wow animate__animated animate__fadeInUp" data-wow-duration="1s" @click="handleClickMore">
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="" /> <img src="@/assets/imgs/boutique/smgz/1_faceImage/more.png" alt="" />
</div> </div>
</div> </div>
...@@ -45,21 +27,12 @@ ...@@ -45,21 +27,12 @@
<!-- <div class="bg img wow animate__animated animate__fadeIn"> <!-- <div class="bg img wow animate__animated animate__fadeIn">
<img src="@/assets/imgs/boutique/smgz/2_intro/bg.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/2_intro/bg.png" alt="" />
</div> --> </div> -->
<div <div class="cover img wow animate__animated animate__fadeInUp" data-wow-duration="1s">
class="cover img wow animate__animated animate__fadeInUp" <img src="@/assets/imgs/boutique/smgz-5/2_intro/cover.png" alt="" />
data-wow-duration="1s"
>
<img src="@/assets/imgs/boutique/smgz/2_intro/cover.png" alt="" />
</div> </div>
<div <div class="cover2 img wow animate__animated animate__fadeInUp" data-wow-duration="2s">
class="cover2 img wow animate__animated animate__fadeInUp" <img src="@/assets/imgs/boutique/smgz-10/2_intro/cover2.png" alt="" />
data-wow-duration="2s" <div class="title img wow animate__animated animate__fadeInUp" data-wow-duration="4s">
>
<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="" /> <img src="@/assets/imgs/boutique/smgz/2_intro/title.png" alt="" />
</div> </div>
</div> </div>
...@@ -90,25 +63,16 @@ ...@@ -90,25 +63,16 @@
</div> </div>
<div class="hall smgz-item"> <div class="hall smgz-item">
<div class="hall-content wow animate__animated animate__fadeIn"> <div class="hall-content wow animate__animated animate__fadeIn">
<div <div class="hall-content-title wow animate__animated animate__fadeInDown">
class="hall-content-title wow animate__animated animate__fadeInDown"
>
<!-- <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 class="hall-content-intro"> <div class="hall-content-intro">
<div <div class="hall-content-buttons wow animate__animated animate__fadeInUp">
class="hall-content-buttons wow animate__animated animate__fadeInUp" <div :class="[
> 'button-item',
<div currentUnitPicIndex == index ? 'active' : '',
:class="[ ]" v-for="(item, index) in units" :key="index" @click="handleChangeUnit(index)">
'button-item',
currentUnitPicIndex == index ? 'active' : '',
]"
v-for="(item, index) in units"
:key="index"
@click="handleChangeUnit(index)"
>
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
...@@ -117,13 +81,12 @@ ...@@ -117,13 +81,12 @@
</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="unitSwiper"> <swiper :options="swiperOption" ref="unitSwiper">
<swiper-slide v-for="(item, index) in units" :key="index"> <swiper-slide v-for="(item, index) in units" :key="index">
<div class="img-container" v-if="item.img"> <div class="img-container" v-if="item.img">
<img :src="$getFullUrl(baseUrl + item.img)" /> <!-- <img :src="$getFullUrl(baseUrl + item.img)" /> -->
<ImageViewer :src="$getFullUrl(baseUrl + item.img)" :highImgSrc="$getFullUrl(baseUrl + item.hightImg)" width="100%" height="100%" />
</div> </div>
</swiper-slide> </swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> <div class="swiper-pagination" slot="pagination"></div>
...@@ -140,9 +103,7 @@ ...@@ -140,9 +103,7 @@
<div class="crs smgz-item"> <div class="crs smgz-item">
<div class="crs-content"> <div class="crs-content">
<div <div class="crs-content-title wow animate__animated animate__fadeInDown">
class="crs-content-title wow animate__animated animate__fadeInDown"
>
— 展览精品 — — 展览精品 —
<!-- <img src="@/assets/imgs/boutique/smgz/4_cr/title.png" alt="" /> --> <!-- <img src="@/assets/imgs/boutique/smgz/4_cr/title.png" alt="" /> -->
</div> </div>
...@@ -165,12 +126,7 @@ ...@@ -165,12 +126,7 @@
<swiper :options="swiperOption2" ref="crSwiper"> <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 class="item" v-for="(item, index) in crPics[i]" :key="index" @click="handleToCr(item.crId)">
class="item"
v-for="(item, index) in crPics[i]"
:key="index"
@click="handleToCr(item.crId)"
>
<div class="img-container"> <div class="img-container">
<img :src="$getFullUrl(item.url)" alt="" /> <img :src="$getFullUrl(item.url)" alt="" />
</div> </div>
...@@ -192,29 +148,22 @@ ...@@ -192,29 +148,22 @@
<div class="guide smgz-item"> <div class="guide smgz-item">
<div class="guide-content"> <div class="guide-content">
<div <div class="guide-content-title wow animate__animated animate__fadeInDown">
class="guide-content-title wow animate__animated animate__fadeInDown"
>
<!-- <img src="@/assets/imgs/boutique/smgz/5_guide/title.png" alt="" /> --> <!-- <img src="@/assets/imgs/boutique/smgz/5_guide/title.png" alt="" /> -->
— 展览导航 — — 展览导航 —
</div> </div>
<div class="guide-content-imgs"> <div class="guide-content-imgs">
<div class="img-container wow animate__animated animate__fadeInLeft"> <div class="img-container wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/boutique/smgz/5_guide/pic1.png" alt="" /> <!-- <img src="@/assets/imgs/boutique/smgz/5_guide/pic1.png" alt="" /> -->
<ImageViewer :src="require(`@/assets/imgs/boutique/smgz-5/5_guide/pic1.png`)" :highImgSrc="require(`@/assets/imgs/boutique/smgz/5_guide/pic1.png`)" width="100%" height="100%" />
</div> </div>
<!-- <div class="img-container wow animate__animated animate__fadeInRight"> <!-- <div class="img-container wow animate__animated animate__fadeInRight">
<img src="@/assets/imgs/boutique/smgz/5_guide/pic2.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/5_guide/pic2.png" alt="" />
</div> --> </div> -->
<div <div class="guide-content-vr wow animate__animated animate__fadeInRight" id="vr-auto">
class="guide-content-vr wow animate__animated animate__fadeInRight" <div class="vr-container" @click="handleChangeToVR" v-if="!showVrIFrame">
id="vr-auto" <img src="@/assets/imgs/boutique/smgz-5/5_guide/vr.png" alt="" />
>
<div
class="vr-container"
@click="handleChangeToVR"
v-if="!showVrIFrame"
>
<img src="@/assets/imgs/boutique/smgz/5_guide/vr.png" alt="" />
<div class="modal"> <div class="modal">
<svg-icon icon-class="360"></svg-icon> <svg-icon icon-class="360"></svg-icon>
<div class="vr-text"> <div class="vr-text">
...@@ -224,24 +173,16 @@ ...@@ -224,24 +173,16 @@
</div> </div>
</div> </div>
<div class="vr-iframe vr-container" v-else> <div class="vr-iframe vr-container" v-else>
<div <div :class="['loading-modal', isVrFull ? 'vr-full' : '']" v-loading="showVrIFrame && !vrIFrameLoaded"
:class="['loading-modal', isVrFull ? 'vr-full' : '']" element-loading-text="正在加载神秘贵州展厅..." element-loading-spinner="el-icon-loading"
v-loading="showVrIFrame && !vrIFrameLoaded" element-loading-background="rgba(0, 0, 0, 0.8)">
element-loading-text="正在加载神秘贵州展厅..." <iframe src="http://gz.people.com.cn/GB/222162/382387/402166/index.html" frameborder="0"
element-loading-spinner="el-icon-loading" style="width: 100%; height: 100%" id="vr_iframe"></iframe>
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<iframe
src="http://gz.people.com.cn/GB/222162/382387/402166/index.html"
frameborder="0"
style="width: 100%; height: 100%"
id="vr_iframe"
></iframe>
<div class="icons" v-if="vrIFrameLoaded"> <div class="icons" v-if="vrIFrameLoaded">
<div class="icon-item" @click="handleClickFullScreen"> <div class="icon-item" @click="handleClickFullScreen">
<svg-icon icon-class="fullscreen2"></svg-icon> <svg-icon icon-class="fullscreen2"></svg-icon>
<span class="icon-text">{{ <span class="icon-text">{{
isVrFull ? "缩小" : "全屏" isVrFull? "缩小": "全屏"
}}</span> }}</span>
</div> </div>
<div class="icon-item" @click="handleExitVR"> <div class="icon-item" @click="handleExitVR">
...@@ -255,9 +196,7 @@ ...@@ -255,9 +196,7 @@
</div> </div>
</div> </div>
<div <div class="guide-content-3d-imgs wow animate__animated animate__fadeInUp">
class="guide-content-3d-imgs wow animate__animated animate__fadeInUp"
>
<img src="@/assets/imgs/boutique/smgz/5_guide/guide.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/5_guide/guide.png" alt="" />
</div> </div>
</div> </div>
...@@ -292,7 +231,7 @@ ...@@ -292,7 +231,7 @@
</div> </div>
<div class="right wow animate__animated animate__fadeInRight"> <div class="right wow animate__animated animate__fadeInRight">
<div class="img-container"> <div class="img-container">
<img src="@/assets/imgs/boutique/smgz/6_vr/2.png" alt="" /> <img src="@/assets/imgs/boutique/smgz-5/6_vr/2.png" alt="" />
</div> </div>
<div class="text">策划人讲解神秘贵州</div> <div class="text">策划人讲解神秘贵州</div>
<div class="video-button" @click="handleClikeVideo('explain.mp4')"> <div class="video-button" @click="handleClikeVideo('explain.mp4')">
...@@ -315,6 +254,7 @@ import "swiper/dist/css/swiper.css"; ...@@ -315,6 +254,7 @@ import "swiper/dist/css/swiper.css";
import MDialog from "@/components/MDialog"; import MDialog from "@/components/MDialog";
import videoPlayer from "@/components/VideoPlayer"; import videoPlayer from "@/components/VideoPlayer";
import { crPics } from "../data"; import { crPics } from "../data";
import ImageViewer from '@/components/ImageViewer'
// import { SlideContainer, SlidePage } from 'vue-slidepage' // import { SlideContainer, SlidePage } from 'vue-slidepage'
export default { export default {
name: "SMGZ", name: "SMGZ",
...@@ -323,6 +263,7 @@ export default { ...@@ -323,6 +263,7 @@ export default {
swiperSlide, swiperSlide,
MDialog, MDialog,
videoPlayer, videoPlayer,
ImageViewer
// SlideContainer, // SlideContainer,
// SlidePage // SlidePage
}, },
...@@ -334,28 +275,35 @@ export default { ...@@ -334,28 +275,35 @@ export default {
{ {
index: 0, index: 0,
name: "沉积巨著", name: "沉积巨著",
img: "3_unit/1-1.png", img: "3_unit/1-1-low.png",
hightImg: '3_unit/1-1.png',
intro: intro:
"贵州素有“沉积岩王国”的美誉，亿万年的沉积地层蕴含了近6亿年的生命密码。展览运用长达26m的模型，配以代表性岩石标本，直观地展示贵州近9亿年的地层，巧妙地向观众科普相关地学知识。", "贵州素有“沉积岩王国”的美誉，亿万年的沉积地层蕴含了近6亿年的生命密码。展览运用长达26m的模型，配以代表性岩石标本，直观地展示贵州近9亿年的地层，巧妙地向观众科普相关地学知识。",
}, },
{ {
index: 1, index: 1,
name: "生命源头", name: "生命源头",
img: "3_unit/2-1.png", img: "3_unit/2-1-low.png",
hightImg: '3_unit/2-1.png',
intro: intro:
"以无脊椎动物演化为线索，展示贵州震旦纪、寒武纪的重要生物群，以及奥陶纪至二叠纪的代表性生物，向观众科普这一时期生命从起源到兴盛、繁荣到衰亡的历程。", "以无脊椎动物演化为线索，展示贵州震旦纪、寒武纪的重要生物群，以及奥陶纪至二叠纪的代表性生物，向观众科普这一时期生命从起源到兴盛、繁荣到衰亡的历程。",
}, },
{ {
index: 2, index: 2,
name: "龙的故乡", name: "龙的故乡",
img: "3_unit/3-1.png", img: "3_unit/3-1-low.png",
hightImg: '3_unit/3-1.png',
intro: intro:
"用盘县动物群、兴义动物群和关岭动物群的典型化石标本，讲述三叠纪时期海生爬行动物由兴盛到繁荣的景象,诠释了2亿年前欣欣向荣的贵州海洋世界。展出的118件展品中,有目前全球仅有的蔡胡氏典型鱼龙模式标本，数量稀少的中国始喙龟化石标本，罕见的疑似怀孕梁氏关岭鱼龙化石标本，以及大量的胡氏贵州龙和创孔海百合等古生物化石标本。", "用盘县动物群、兴义动物群和关岭动物群的典型化石标本，讲述三叠纪时期海生爬行动物由兴盛到繁荣的景象,诠释了2亿年前欣欣向荣的贵州海洋世界。展出的118件展品中,有目前全球仅有的蔡胡氏典型鱼龙模式标本，数量稀少的中国始喙龟化石标本，罕见的疑似怀孕梁氏关岭鱼龙化石标本，以及大量的胡氏贵州龙和创孔海百合等古生物化石标本。",
}, },
{ {
index: 3, index: 3,
name: "陆地寻踪", name: "陆地寻踪",
img: "3_unit/4-1.png", img: "3_unit/4-1-low.png",
hightImg: '3_unit/4-1.png',
intro: intro:
"重点展示侏罗纪至第四纪时期陆地古生物的演化历程，用恐龙的模型、骨骼化石、足迹化石及第四纪哺乳动物化石标本，向观众科普相关知识，唤起人们尊重自然，保护环境，与自然和谐共生。", "重点展示侏罗纪至第四纪时期陆地古生物的演化历程，用恐龙的模型、骨骼化石、足迹化石及第四纪哺乳动物化石标本，向观众科普相关知识，唤起人们尊重自然，保护环境，与自然和谐共生。",
}, },
...@@ -464,7 +412,7 @@ export default { ...@@ -464,7 +412,7 @@ export default {
imgsArr.forEach((i) => { imgsArr.forEach((i) => {
// url中包含了data-url压缩图的才进行替换 // url中包含了data-url压缩图的才进行替换
if (i.id && i.id.indexOf("smgz-5")) { if (i.id && i.id.indexOf("smgz-5")) {
var imgObj = new Image(); //新建一个图片对象 var imgObj = new Image(); //新建一个图片对象
let lowImgSrc = i.id; let lowImgSrc = i.id;
let highImgSrc = lowImgSrc.replace("smgz-5", "smgz"); //最终显示的大图 let highImgSrc = lowImgSrc.replace("smgz-5", "smgz"); //最终显示的大图
...@@ -580,19 +528,23 @@ export default { ...@@ -580,19 +528,23 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@function sWidth($width) { @function sWidth($width) {
@return $width * 1.2 + px; @return $width * 1.2+px;
} }
@function sHeight($height) { @function sHeight($height) {
@return $height * 0.8 + px; @return $height * 0.8+px;
} }
// 公共样式 // 公共样式
.smgz-item { .smgz-item {
position: relative; position: relative;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
.img { .img {
position: absolute; position: absolute;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -621,15 +573,18 @@ export default { ...@@ -621,15 +573,18 @@ export default {
.face-img { .face-img {
height: 100vh; height: 100vh;
.back-img { .back-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
top: 0; top: 0;
img { img {
object-fit: cover; object-fit: cover;
} }
} }
.left-title { .left-title {
height: sHeight(676); height: sHeight(676);
width: sHeight(400); width: sHeight(400);
...@@ -637,17 +592,20 @@ export default { ...@@ -637,17 +592,20 @@ export default {
bottom: sHeight(188); bottom: sHeight(188);
z-index: 1; z-index: 1;
} }
.center-title { .center-title {
top: sHeight(32); top: sHeight(32);
z-index: 1; z-index: 1;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
img { img {
height: sHeight(86); height: sHeight(86);
width: auto; width: auto;
} }
} }
.ms { .ms {
width: sWidth(800); width: sWidth(800);
height: sHeight(800); height: sHeight(800);
...@@ -656,6 +614,7 @@ export default { ...@@ -656,6 +614,7 @@ export default {
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.more { .more {
bottom: 0; bottom: 0;
cursor: pointer; cursor: pointer;
...@@ -664,6 +623,7 @@ export default { ...@@ -664,6 +623,7 @@ export default {
justify-content: center; justify-content: center;
animation: likes 4s linear infinite; animation: likes 4s linear infinite;
transform-origin: 50% 100%; transform-origin: 50% 100%;
img { img {
height: sHeight(145); height: sHeight(145);
width: auto; width: auto;
...@@ -673,10 +633,11 @@ export default { ...@@ -673,10 +633,11 @@ export default {
.intro { .intro {
height: sHeight(1610); height: sHeight(1610);
background-image: url("@/assets/imgs/boutique/smgz/2_intro/bg.png"); background-image: url("@/assets/imgs/boutique/smgz-5/2_intro/bg.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
overflow: visible; overflow: visible;
// .bg { // .bg {
// width: 100%; // width: 100%;
// height: sHeight(1620); // height: sHeight(1620);
...@@ -686,25 +647,30 @@ export default { ...@@ -686,25 +647,30 @@ export default {
top: sHeight(20); top: sHeight(20);
display: flex; display: flex;
justify-content: center; justify-content: center;
img { img {
width: 88%; width: 88%;
} }
} }
.cover2 { .cover2 {
top: sHeight(230); top: sHeight(230);
width: 100%; width: 100%;
.title { .title {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
top: 280px; top: 280px;
img { img {
height: sHeight(145); height: sHeight(145);
width: auto; width: auto;
} }
} }
} }
.text { .text {
width: 100%; width: 100%;
position: absolute; position: absolute;
...@@ -712,14 +678,17 @@ export default { ...@@ -712,14 +678,17 @@ export default {
color: #fff; color: #fff;
background-color: rgba(0, 23, 58, 0.75); background-color: rgba(0, 23, 58, 0.75);
padding: 32px 56px; padding: 32px 56px;
.title { .title {
font-size: 28px; font-size: 28px;
} }
.main { .main {
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
} }
} }
// .text { // .text {
// width: 100%; // width: 100%;
// display: flex; // display: flex;
...@@ -779,7 +748,7 @@ export default { ...@@ -779,7 +748,7 @@ export default {
height: 100%; height: 100%;
position: absolute; position: absolute;
// top: -100px; // top: -100px;
background-image: url("@/assets/imgs/boutique/smgz/3_hall/bg.png"); background-image: url("@/assets/imgs/boutique/smgz-5/3_hall/bg.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
...@@ -787,18 +756,22 @@ export default { ...@@ -787,18 +756,22 @@ export default {
align-items: center; align-items: center;
width: 100%; width: 100%;
padding-top: 200px; padding-top: 200px;
.hall-content-title { .hall-content-title {
margin-bottom: 70px; margin-bottom: 70px;
font-size: 42px; font-size: 42px;
color: #fff; color: #fff;
letter-spacing: 2px; letter-spacing: 2px;
} }
.hall-content-intro { .hall-content-intro {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.hall-content-buttons { .hall-content-buttons {
display: flex; display: flex;
.button-item { .button-item {
margin: 0 70px; margin: 0 70px;
height: sHeight(112); height: sHeight(112);
...@@ -813,6 +786,7 @@ export default { ...@@ -813,6 +786,7 @@ export default {
cursor: pointer; cursor: pointer;
border: 2px solid transparent; border: 2px solid transparent;
} }
.button-item:hover, .button-item:hover,
.active { .active {
background: #141c3c; background: #141c3c;
...@@ -820,6 +794,7 @@ export default { ...@@ -820,6 +794,7 @@ export default {
box-shadow: 0px 12px 30px 0px #051730; box-shadow: 0px 12px 30px 0px #051730;
} }
} }
.unit-intro { .unit-intro {
width: 70%; width: 70%;
font-size: 22px; font-size: 22px;
...@@ -834,13 +809,16 @@ export default { ...@@ -834,13 +809,16 @@ export default {
.hall-content-swiper { .hall-content-swiper {
width: 80%; width: 80%;
margin-top: 88px; margin-top: 88px;
.swiper-container { .swiper-container {
height: sHeight(500); height: sHeight(500);
} }
.swiper-slide { .swiper-slide {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.img-container { .img-container {
width: 80%; width: 80%;
height: 100%; height: 100%;
...@@ -848,11 +826,11 @@ export default { ...@@ -848,11 +826,11 @@ export default {
box-shadow: 0px 12px 30px 0px #051730; box-shadow: 0px 12px 30px 0px #051730;
border-radius: 4px; border-radius: 4px;
background: #3b4982; background: #3b4982;
img { // img {
width: 100%; // width: 100%;
height: 100%; // height: 100%;
object-fit: contain; // object-fit: contain;
} // }
} }
} }
} }
...@@ -860,24 +838,27 @@ export default { ...@@ -860,24 +838,27 @@ export default {
.crs { .crs {
height: 1000px; height: 1000px;
.crs-content { .crs-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
// top: -100px; // top: -100px;
background-image: url("@/assets/imgs/boutique/smgz/4_cr/bg.png"); background-image: url("@/assets/imgs/boutique/smgz-5/4_cr/bg.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding-top: 155px; padding-top: 155px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.crs-content-title { .crs-content-title {
margin-bottom: 70px; margin-bottom: 70px;
font-size: 42px; font-size: 42px;
color: #00173a; color: #00173a;
letter-spacing: 2px; letter-spacing: 2px;
} }
// .crs-content-buttons { // .crs-content-buttons {
// display: flex; // display: flex;
// .button-item { // .button-item {
...@@ -904,14 +885,18 @@ export default { ...@@ -904,14 +885,18 @@ export default {
.crs-content-swiper { .crs-content-swiper {
width: 80%; width: 80%;
margin-top: 50px; margin-top: 50px;
.swiper-container { .swiper-container {
height: sHeight(600); height: sHeight(600);
.swiper-slide { .swiper-slide {
display: flex; display: flex;
justify-content: center; justify-content: center;
.crs-content-imgs { .crs-content-imgs {
// margin-top: 88px; // margin-top: 88px;
display: flex; display: flex;
// justify-content: center; // justify-content: center;
.item { .item {
.img-container { .img-container {
...@@ -921,11 +906,13 @@ export default { ...@@ -921,11 +906,13 @@ export default {
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
img { img {
scale: 1.1; scale: 1.1;
} }
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -933,6 +920,7 @@ export default { ...@@ -933,6 +920,7 @@ export default {
transition: all ease 0.3s; transition: all ease 0.3s;
} }
} }
.cr-name { .cr-name {
margin-top: 20px; margin-top: 20px;
font-size: 26px; font-size: 26px;
...@@ -962,28 +950,32 @@ export default { ...@@ -962,28 +950,32 @@ export default {
.guide { .guide {
height: 1900px; height: 1900px;
.guide-content { .guide-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
// top: -100px; // top: -100px;
background-image: url("@/assets/imgs/boutique/smgz/5_guide/bg.png"); background-image: url("@/assets/imgs/boutique/smgz-5/5_guide/bg.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding-top: 152px; padding-top: 152px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.guide-content-title { .guide-content-title {
margin-bottom: 70px; margin-bottom: 70px;
font-size: 42px; font-size: 42px;
color: #fff; color: #fff;
letter-spacing: 2px; letter-spacing: 2px;
} }
.guide-content-imgs { .guide-content-imgs {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.img-container { .img-container {
width: 800px; width: 800px;
height: 596px; height: 596px;
...@@ -999,6 +991,7 @@ export default { ...@@ -999,6 +991,7 @@ export default {
height: 600px; height: 600px;
display: flex; display: flex;
padding: 20px 0 0 40px; padding: 20px 0 0 40px;
.vr-container { .vr-container {
width: 800px; width: 800px;
height: 520px; height: 520px;
...@@ -1006,16 +999,19 @@ export default { ...@@ -1006,16 +999,19 @@ export default {
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
box-shadow: 0px 18px 23px 8px rgb(0 0 0 / 30%); box-shadow: 0px 18px 23px 8px rgb(0 0 0 / 30%);
&:hover { &:hover {
img { img {
transform: scale(1.1); transform: scale(1.1);
} }
} }
img { img {
width: 100%; width: 100%;
height: 520px; height: 520px;
transition: all ease 0.5s; transition: all ease 0.5s;
} }
.modal { .modal {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -1028,18 +1024,22 @@ export default { ...@@ -1028,18 +1024,22 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
color: #fff; color: #fff;
&:hover { &:hover {
.vr-text { .vr-text {
opacity: 1; opacity: 1;
} }
} }
.svg-icon { .svg-icon {
font-size: 150px; font-size: 150px;
} }
.vr-text { .vr-text {
font-weight: 400; font-weight: 400;
opacity: 0; opacity: 0;
transition: all ease 0.3s; transition: all ease 0.3s;
.svg-icon { .svg-icon {
font-size: 32px; font-size: 32px;
} }
...@@ -1052,11 +1052,13 @@ export default { ...@@ -1052,11 +1052,13 @@ export default {
bottom: 0; bottom: 0;
color: #fff; color: #fff;
margin-right: 8px; margin-right: 8px;
.icon-item { .icon-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.svg-icon { .svg-icon {
border: 1px solid rgb(88 75 70/ 80%); border: 1px solid rgb(88 75 70/ 80%);
border-radius: 50%; border-radius: 50%;
...@@ -1064,6 +1066,7 @@ export default { ...@@ -1064,6 +1066,7 @@ export default {
background: rgb(37 37 37 / 40%); background: rgb(37 37 37 / 40%);
font-size: 18px; font-size: 18px;
} }
.icon-text { .icon-text {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
...@@ -1075,6 +1078,7 @@ export default { ...@@ -1075,6 +1078,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: all ease 0.5s; transition: all ease 0.5s;
::v-deep .el-loading-spinner { ::v-deep .el-loading-spinner {
i { i {
color: #fff; color: #fff;
...@@ -1094,6 +1098,7 @@ export default { ...@@ -1094,6 +1098,7 @@ export default {
height: calc(100vh - 100px); height: calc(100vh - 100px);
z-index: 9999; z-index: 9999;
} }
.vr-full-modal { .vr-full-modal {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
...@@ -1105,10 +1110,12 @@ export default { ...@@ -1105,10 +1110,12 @@ export default {
} }
} }
} }
.guide-content-3d-imgs { .guide-content-3d-imgs {
margin-bottom: 70px; margin-bottom: 70px;
width: 90%; width: 90%;
height: 1000px; height: 1000px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -1120,18 +1127,20 @@ export default { ...@@ -1120,18 +1127,20 @@ export default {
.vr { .vr {
height: 900px; height: 900px;
.vr-content { .vr-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
// top: -100px; // top: -100px;
background-image: url("@/assets/imgs/boutique/smgz/6_vr/bg.png"); background-image: url("@/assets/imgs/boutique/smgz-5/6_vr/bg.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding-top: 172px; padding-top: 172px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
.text { .text {
font-size: 20px; font-size: 20px;
font-family: PingFang SC; font-family: PingFang SC;
...@@ -1139,6 +1148,7 @@ export default { ...@@ -1139,6 +1148,7 @@ export default {
color: #141c3c; color: #141c3c;
line-height: 65px; line-height: 65px;
} }
.video-button { .video-button {
color: #fff; color: #fff;
font-size: 22px; font-size: 22px;
...@@ -1152,11 +1162,14 @@ export default { ...@@ -1152,11 +1162,14 @@ export default {
letter-spacing: 2px; letter-spacing: 2px;
cursor: pointer; cursor: pointer;
} }
.left, .left,
.right { .right {
width: 20%; width: 20%;
.img-container { .img-container {
width: 100%; width: 100%;
img { img {
width: 100%; width: 100%;
// height: 100%; // height: 100%;
...@@ -1166,9 +1179,11 @@ export default { ...@@ -1166,9 +1179,11 @@ export default {
.center { .center {
position: relative; position: relative;
.img-container { .img-container {
animation: changeright 4s linear infinite; animation: changeright 4s linear infinite;
} }
.text-content { .text-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -1180,6 +1195,7 @@ export default { ...@@ -1180,6 +1195,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.center-text { .center-text {
font-size: 40px; font-size: 40px;
font-weight: 500; font-weight: 500;
...@@ -1187,9 +1203,11 @@ export default { ...@@ -1187,9 +1203,11 @@ export default {
line-height: 50px; line-height: 50px;
} }
} }
.button { .button {
margin-top: 30px; margin-top: 30px;
cursor: pointer; cursor: pointer;
.outter { .outter {
width: 90px; width: 90px;
height: 90px; height: 90px;
...@@ -1200,6 +1218,7 @@ export default { ...@@ -1200,6 +1218,7 @@ export default {
border: 2px dashed#3B4982; border: 2px dashed#3B4982;
animation: likes 2.5s ease-in infinite; animation: likes 2.5s ease-in infinite;
transition: all ease-in 0.5s; transition: all ease-in 0.5s;
.inner { .inner {
width: 50px; width: 50px;
height: 50px; height: 50px;
...@@ -1216,6 +1235,7 @@ export default { ...@@ -1216,6 +1235,7 @@ export default {
} }
} }
} }
.smgz-video { .smgz-video {
width: 70%; width: 70%;
height: 800px; height: 800px;
...@@ -1230,15 +1250,19 @@ export default { ...@@ -1230,15 +1250,19 @@ export default {
0% { 0% {
transform: scale(1); transform: scale(1);
} }
25% { 25% {
transform: scale(0.9); transform: scale(0.9);
} }
50% { 50% {
transform: scale(0.85); transform: scale(0.85);
} }
75% { 75% {
transform: scale(0.9); transform: scale(0.9);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
} }
......
src/views/museum/Detail.vue
浏览文件 @ 977376e3
...@@ -232,7 +232,7 @@ $node-w: 700px; ...@@ -232,7 +232,7 @@ $node-w: 700px;
.inner-left { .inner-left {
// padding-left: 120px; // padding-left: 120px;
width: 50%; width: 50%;
height: calc(100vh - 100px); min-height: calc(100vh - 100px);
position: relative; position: relative;
.info-container-left { .info-container-left {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论