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