Skip to content

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

修复单元title箭头覆盖在内容上导致看不清箭头的问题

上级 1e199fa2
隐藏空白字符变更
内嵌 并排
正在显示 包含 227 行增加 和 224 行删除
src/views/display/components/BlueStyle.vue
浏览文件 @ e867603d
......@@ -20,20 +20,12 @@
<!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info">
<div class="info-container">
<div
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
class="info-container-left"
>
<SlideImage
:imgList="displayDetail.imagesVo"
v-if="
displayDetail.imagesVo && displayDetail.imagesVo.length > 0
"
/>
<SlideImage
:imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]"
v-else-if="displayDetail.faceImagePressUrl"
/>
<div v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" class="info-container-left">
<SlideImage :imgList="displayDetail.imagesVo" v-if="
displayDetail.imagesVo && displayDetail.imagesVo.length > 0
" />
<SlideImage :imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]"
v-else-if="displayDetail.faceImagePressUrl" />
</div>
<div class="info-container-right">
<div class="info-title">
......@@ -50,10 +42,10 @@
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="keyword"></svg-icon> -->
关键词：</span
>
关键词：
</span>
<span class="value">{{
displayDetail.keyword || "暂无"
displayDetail.keyword || "暂无"
}}</span>
</div>
<div class="body-item">
......@@ -62,7 +54,7 @@
展览类型：
</span>
<span class="value">{{
dicts.displayType[displayDetail.type] || "暂无"
dicts.displayType[displayDetail.type] || "暂无"
}}</span>
</div>
<div class="body-item">
......@@ -71,27 +63,27 @@
展览性质：
</span>
<span class="value">{{
dicts.displayCharacter[
dicts.displayCharacter[
displayDetail.displayCharacter
] || "暂无"
] || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zldw"></svg-icon> -->
展览单位：</span
>
展览单位：
</span>
<span class="value">{{
displayDetail.deptName || "暂无"
displayDetail.deptName || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zldq"></svg-icon> -->
展览地区：</span
>
展览地区：
</span>
<span class="value">{{
displayDetail.regionName || "暂无"
displayDetail.regionName || "暂无"
}}</span>
</div>
</div>
......@@ -104,56 +96,33 @@
/> -->
</div>
<div class="tools">
<ReaderOperations
:loveCount="displayDetail.loveCount"
<ReaderOperations :loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount"
:collectCountStatus="
:collectCount="displayDetail.collectCount" :collectCountStatus="
Boolean(displayDetail.collectCountStatus)
"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="reload"
/>
" :sourceId="displayDetail.exhibitionId" :title="displayDetail.title"
:sourceType="'biz_exhibition'" @reload="reload" />
</div>
</el-col>
</el-row>
</div>
</div>
<div
class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<div class="audio" :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio" v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0">
<img src="@/assets/imgs/display/normal/music.png" alt="" />
<!-- <svg-icon icon-class="music"></svg-icon> -->
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
<AudioPlayer style="display: none" :url="$getFullUrl(displayDetail.audiosVo[0].url)" ref="AudioPlayer" />
</div>
</div>
<div
class="content-item display-detail_tabbar"
id="tabbar"
:class="{ isFixed: isFixed }"
>
<div class="content-item display-detail_tabbar" id="tabbar" :class="{ isFixed: isFixed }">
<span v-for="(item, index) in tabbarData" :key="index">
<span
@click="handleClickTabItem(item)"
:class="[
'tab-item',
currentTab && currentTab.domId == item.domId ? 'active' : '',
]"
v-html="item.name"
v-if="
displayDetail[item.domId] &&
displayDetail[item.domId].length > 0
"
>
<span @click="handleClickTabItem(item)" :class="[
'tab-item',
currentTab && currentTab.domId == item.domId ? 'active' : '',
]" v-html="item.name" v-if="
displayDetail[item.domId] &&
displayDetail[item.domId].length > 0
">
</span>
</span>
</div>
......@@ -166,18 +135,11 @@
</div>
<div class="intro-content">
<div class="left-box">简介</div>
<div
class="intro-content-container"
v-html="displayDetail.intro"
></div>
<div class="intro-content-container" v-html="displayDetail.intro"></div>
</div>
</div>
<div
class="display-detail_virtual content-item"
v-if="displayDetail.virtualVo.length > 0"
id="virtualVo"
>
<div class="display-detail_virtual content-item" v-if="displayDetail.virtualVo.length > 0" id="virtualVo">
<div class="custom_title">
<div class="center">
<!-- <svg-icon icon-class="wenxian"></svg-icon> -->
......@@ -185,12 +147,8 @@
</div>
</div>
<div class="vr-content">
<div
class="img-container"
@click="handleToVR(item)"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
<div class="img-container" @click="handleToVR(item)" v-for="(item, index) in displayDetail.virtualVo"
:key="index">
<img :src="item.faceImagePressUrl" alt="" />
<div class="modal">
<svg-icon icon-class="360"></svg-icon>
......@@ -200,48 +158,31 @@
</div>
</div>
<!-- 展览视频 -->
<div
id="videosVo"
class="content-item videos"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<div id="videosVo" class="content-item videos"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0">
<div class="video-title">
<!-- <i class="el-icon-video-camera"></i> -->
展览视频
</div>
<div class="video-names">
<div
class="video-item"
v-for="(item, index) in displayDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
>
<div class="video-item" v-for="(item, index) in displayDetail.videosVo" :key="index"
@click="handleChangeCurrentVideo(item)">
<div :class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]">
{{ item.name.split(".")[0] }}
</div>
</div>
</div>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
<video-player v-if="currentVideo" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player>
</div>
<!--展览单元 -->
<div
class="content-item display-detail_units"
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
id="exhibitionUnits"
>
<div class="content-item display-detail_units" ref="units" v-if="displayDetail.exhibitionUnits.length > 0"
id="exhibitionUnits">
<div class="custom_title">
<div class="center">
<!-- <i class="el-icon-notebook-2"></i> -->
......@@ -250,80 +191,57 @@
</div>
<div class="unit-container">
<div class="unit-content-menu">
<swiper
class="swiper gallery-thumbs"
:options="swiperOptionThumbs"
ref="swiperThumbs"
>
<swiper-slide
:class="[
'slide-item',
item.euId == curUnit.euId ? 'active' : '',
]"
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
@click.native="handleClickUnit(item)"
>
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide :class="[
'slide-item',
item.euId == curUnit.euId ? 'active' : '',
]" v-for="(item, index) in displayDetail.exhibitionUnits" :key="index"
@click.native="handleClickUnit(item)">
{{ item.title }}
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev">
<!-- <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>
</div> -->
</swiper>
<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>
</div>
<div class="unit-content">
<div class="unit-content-title">
{{ curUnit.title }}
</div>
<div
class="text-indent unit-content_intro"
v-if="curUnit.intro"
v-html="curUnit.intro"
></div>
<div
class="unit-content_images"
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
>
<div class="text-indent unit-content_intro" v-if="curUnit.intro" v-html="curUnit.intro"></div>
<div class="unit-content_images" v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0">
<div class="imgs-title">单元图片</div>
<div class="unit-imgs">
<SlideImageGroup
:imgList="curUnit.imagesVo"
:needEnlarge="true"
>
<SlideImageGroup :imgList="curUnit.imagesVo" :needEnlarge="true">
<template slot-scope="{ item }" slot="img">
<img
:src="item.pressUrl"
alt=""
style="width: 100%; height: 100%; object-fit: contain"
/>
<img :src="item.pressUrl" alt="" style="width: 100%; height: 100%; object-fit: contain" />
</template>
</SlideImageGroup>
</div>
</div>
<div
class="unit-content_crs"
v-if="
curUnit.culturalRelics && curUnit.culturalRelics.length > 0
"
>
<div class="unit-content_crs" v-if="
curUnit.culturalRelics && curUnit.culturalRelics.length > 0
">
<div class="imgs-title">单元文物</div>
<SlideImageGroup :imgList="curUnit.culturalRelics">
<template slot-scope="{ item }" slot="img">
<img
:src="item.faceImagePressUrl"
alt=""
style="
<img :src="item.faceImagePressUrl" alt="" style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
"
@click="handleToCr(item)"
/>
" @click="handleToCr(item)" />
</template>
<template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div>
......@@ -343,29 +261,19 @@
</div>
<!--展览相关文物 -->
<div
class="content-item display-detail_relateRc"
ref="units"
v-if="
displayDetail.culturalRelicVo &&
displayDetail.culturalRelicVo.length > 0
"
id="culturalRelicVo"
>
<div class="content-item display-detail_relateRc" ref="units" v-if="
displayDetail.culturalRelicVo &&
displayDetail.culturalRelicVo.length > 0
" id="culturalRelicVo">
<div class="cr-title">展览文物</div>
<SlideImageGroup :imgList="displayDetail.culturalRelicVo">
<template slot-scope="{ item }" slot="img">
<img
:src="item.faceImagePressUrl"
alt=""
style="
<img :src="item.faceImagePressUrl" alt="" style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
"
@click="handleToCr(item)"
/>
" @click="handleToCr(item)" />
</template>
<template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div>
......@@ -373,13 +281,9 @@
</SlideImageGroup>
</div>
<!-- 相关文献 -->
<div
class="content-item display-detail_lts"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
id="literatureVo"
>
<div class="content-item display-detail_lts" v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
" id="literatureVo">
<div class="custom_title">
<div class="center">
<!-- <svg-icon icon-class="wenxian"></svg-icon> -->
......@@ -387,32 +291,18 @@
</div>
</div>
<div class="lts-content">
<div
class="lt-item"
v-for="(item, index) in displayDetail.literatureVo"
:key="index"
>
<div class="lt-item" v-for="(item, index) in displayDetail.literatureVo" :key="index">
<span class="lt-order">[{{ index + 1 }}]</span>
<span class="lt-authors" v-if="item.authors"
>{{ item.authors }}.</span
>
<span class="lt-name" v-if="item.name" @click="handleViewLt(item)"
>{{ item.authors }}.</span
>
<span class="lt-source" v-if="item.source"
>{{ item.source }}.</span
>
<span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
<span class="lt-name" v-if="item.name" @click="handleViewLt(item)">{{ item.authors }}.</span>
<span class="lt-source" v-if="item.source">{{ item.source }}.</span>
<span class="lt-date" v-if="item.date">{{ item.date }}</span>
</div>
</div>
</div>
</div>
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
</div>
</template>
......@@ -697,6 +587,7 @@ export default {
display: flex;
justify-content: center;
}
.page-item {
cursor: pointer;
}
......@@ -706,6 +597,7 @@ export default {
// 中国风主题样式
/**公共样式开始 */
$titleFontFamily: SourceHanSerifCN-Bold;
.custom-title {
width: 50px;
background-color: #d72f3f;
......@@ -719,10 +611,12 @@ $titleFontFamily: SourceHanSerifCN-Bold;
box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
letter-spacing: 10px;
}
.content {
background-color: #f3f3f3;
min-height: 50vh;
}
.content-item {
width: 100%;
background-color: #fff;
......@@ -730,20 +624,24 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.custom_title {
padding: 50px 0 40px 0;
.center {
padding: 0 40px;
display: flex;
align-items: center;
i {
margin-right: 10px;
font-size: 28px;
color: $themeColor;
}
.svg-icon {
font-size: 32px;
color: $themeColor;
margin-right: 10px;
}
.title {
font-size: 26px;
font-weight: 400;
......@@ -768,6 +666,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
......@@ -780,6 +679,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
top: 100px;
z-index: 99;
}
/**公共样式结束 */
/**样式开始 */
......@@ -790,15 +690,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
justify-content: center;
align-items: center;
flex-direction: column;
/**轮播图 */
.display-detail_imgs {
height: 436px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.wrapper {
width: 1200px;
// padding: 0 13%;
......@@ -806,6 +709,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// width: 78%;
display: flex;
justify-content: center;
.inner {
width: 100%;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
......@@ -818,27 +722,33 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// position: relative;
margin: 0 70px;
padding-bottom: 56px;
/**基本信息 */
.display-detail_basic_info {
position: relative;
.info-container {
display: flex;
justify-content: space-between;
padding: 60px 36px;
height: 100%;
background-color: #fff;
.info-container-left {
min-height: 200px;
max-height: 460px;
margin-right: 50px;
flex: 1;
overflow: hidden;
.imagesVo-image-container {
// position: relative;
.img-container {
height: 100%;
width: 100%;
background-color: #f5f5f9;
img {
width: 100%;
height: 100%;
......@@ -847,6 +757,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
}
}
.info-container-right {
flex: 1;
min-height: 200px;
......@@ -858,22 +769,26 @@ $titleFontFamily: SourceHanSerifCN-Bold;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
.view-count {
font-size: 14px;
margin-top: 10px;
color: #999;
font-weight: normal;
.svg-icon {
margin-right: 10px;
}
}
}
.basic-info {
.body-item {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 18px;
.label {
display: flex;
align-items: center;
......@@ -882,6 +797,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// margin-bottom: 10px;
font-weight: bold;
color: #999;
.svg-icon {
width: 24px;
height: 24px;
......@@ -902,31 +818,38 @@ $titleFontFamily: SourceHanSerifCN-Bold;
flex-direction: column;
align-items: center;
justify-content: center;
.qrcode {
margin-bottom: 28px;
display: flex;
justify-content: center;
img {
width: 50%;
height: 100%;
}
}
.tools {
width: 100%;
.tools-item {
color: #858585;
flex: 1;
display: flex;
align-items: center;
cursor: pointer;
.svg-icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
.like {
color: #831122;
}
.collect {
color: $themeColor;
}
......@@ -935,6 +858,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
}
}
.audio {
position: absolute;
right: -120px;
......@@ -950,25 +874,30 @@ $titleFontFamily: SourceHanSerifCN-Bold;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
.svg-icon {
color: $themeColor;
font-size: 80px;
}
img {
width: 60px;
height: 60px;
}
}
}
.display-detail_tabbar {
background-color: #fff;
display: flex;
justify-content: center;
padding: 10px;
border-bottom: 1px solid #f2f2f2;
.tab-item {
height: 100%;
margin-right: 20px;
......@@ -977,24 +906,29 @@ $titleFontFamily: SourceHanSerifCN-Bold;
font-family: $titleFontFamily;
cursor: pointer;
position: relative;
&:hover {
color: $themeColor;
&::after {
display: inline-block;
}
}
&::after {
display: none;
}
}
.active {
color: $themeColor;
&::after {
display: inline-block;
}
}
.tab-item::after,
.active::after {
position: absolute;
......@@ -1006,12 +940,14 @@ $titleFontFamily: SourceHanSerifCN-Bold;
background-color: $themeColor;
}
}
/**简介和视频 */
.display-detail_intro {
// background-image: url("@/assets/imgs/display/normal/bg.png");
// background-size: 1%;
padding: 40px;
.intro-title {
font-size: 26px;
font-weight: 400;
......@@ -1020,18 +956,22 @@ $titleFontFamily: SourceHanSerifCN-Bold;
display: flex;
align-items: center;
margin-bottom: 32px;
i {
margin-right: 10px;
}
.svg-icon {
margin-right: 10px;
font-size: 36px;
}
}
.intro-content {
line-height: 28px;
display: flex;
}
.left-box {
width: 60px;
background-color: $themeColor;
......@@ -1045,6 +985,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
letter-spacing: 10px;
font-family: SourceHanSerifCN-Bold;
}
.intro-content-container {
flex: 1;
text-indent: 34px;
......@@ -1052,11 +993,13 @@ $titleFontFamily: SourceHanSerifCN-Bold;
background-color: rgba($themeColor, 10%);
}
}
// 视频
.videos {
display: flex;
flex-direction: column;
margin-bottom: 40px;
.video-title {
display: flex;
// justify-content: center;
......@@ -1066,33 +1009,41 @@ $titleFontFamily: SourceHanSerifCN-Bold;
padding: 0 40px;
margin-bottom: 32px;
font-family: SourceHanSerifCN-Bold;
i {
font-size: 28px;
margin-right: 10px;
}
}
.video-names {
display: flex;
justify-content: center;
border-bottom: 1px solid #f2f0f0;
margin-bottom: 30px;
.video-item {
font-size: 18px;
margin: 8px 30px;
.name {
color: #999;
position: relative;
cursor: pointer;
&:hover {
color: $themeColor;
&::after {
display: inline-block;
}
&::before {
display: inline-block;
}
}
}
.active::after,
.name::after {
content: "";
......@@ -1106,6 +1057,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
transform: translateX(-50%);
display: none;
}
.active::before,
.name::before {
content: "";
......@@ -1119,14 +1071,17 @@ $titleFontFamily: SourceHanSerifCN-Bold;
transform: translateX(-50%);
display: none;
}
.active::after,
.active::before {
display: inline-block;
}
}
}
.video-box {
height: 500px;
.video-player {
height: 100%;
}
......@@ -1136,9 +1091,11 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// 虚拟展
.display-detail_virtual {
margin-bottom: 56px;
.vr-content {
display: flex;
}
.img-container {
// width: 800px;
flex: 1;
......@@ -1146,17 +1103,20 @@ $titleFontFamily: SourceHanSerifCN-Bold;
position: relative;
cursor: pointer;
overflow: hidden;
&:hover {
img {
transform: scale(1.1);
}
}
img {
width: 100%;
height: 400px;
transition: all ease 0.5s;
object-fit: cover;
}
.modal {
position: absolute;
left: 0;
......@@ -1168,15 +1128,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
flex-direction: column;
justify-content: center;
align-items: center;
&:hover {
.name {
opacity: 1;
}
}
.svg-icon {
font-size: 110px;
color: #fff;
}
.name {
color: #fff;
font-size: 28px;
......@@ -1194,17 +1157,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.unit-container {
margin-bottom: 40px;
position: relative;
}
.unit-content-menu {
margin-right: 40px;
padding: 0 20px;
position: relative;
.swiper-container {
padding: 0 60px;
width: 90%;
::v-deep .swiper-wrapper {
display: flex;
justify-content: center;
}
.slide-item {
// border: 2px solid $themeColor;
padding: 8px;
......@@ -1225,30 +1189,38 @@ $titleFontFamily: SourceHanSerifCN-Bold;
background: $themeColor;
color: #fff;
}
.swiper-button-next,
.swiper-button-prev {
background-image: none;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: $themeColor;
font-weight: bolder;
font-size: 28px;
transform: translateY(-6px);
}
}
}
.swiper-button-next,
.swiper-button-prev {
// background-color: rgba(0,0,0,0.2);
// border-radius: 50%;
background-image: none;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: $themeColor;
font-weight: bolder;
font-size: 28px;
transform: translateY(-6px);
}
.unit-content {
flex: 1;
padding: 60px 40px 0;
.unit-content-title {
font-size: 24px;
line-height: 2;
display: flex;
justify-content: center;
}
.unit-content_intro {
font-size: 16px;
font-weight: 400;
......@@ -1257,16 +1229,20 @@ $titleFontFamily: SourceHanSerifCN-Bold;
text-indent: 32px;
margin-bottom: 20px;
}
.unit-content_images {
position: relative;
.unit-content_images_container {
height: 100%;
display: flex;
flex-direction: column;
background-color: #f5f5f9;
.images_img {
flex: 1;
}
.desc {
display: flex;
justify-content: center;
......@@ -1275,6 +1251,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
}
}
//单元文物和单元图片公共样式
.imgs-title {
margin: 30px 0;
......@@ -1282,14 +1259,17 @@ $titleFontFamily: SourceHanSerifCN-Bold;
align-items: center;
font-size: 20px;
font-family: SourceHanSerifCN-Bold;
i {
margin: 0 10px;
font-size: 18px;
}
}
.unit-imgs {
// height: 300px;
}
.unit-content_crs {
position: relative;
......@@ -1300,6 +1280,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.img-container {
background-color: #f5f5f9;
height: 250px;
.images_img {
height: 100%;
width: 100%;
......@@ -1323,6 +1304,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.buttons {
display: flex;
justify-content: flex-end;
.btn {
display: flex;
align-content: center;
......@@ -1330,9 +1312,11 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// border: 1px solid $themeColor;
color: #666;
cursor: pointer;
&:hover {
color: $themeColor;
}
.svg-icon {
font-size: 22px;
margin: 0 4px;
......@@ -1341,23 +1325,28 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
}
}
// 关联文物
.display-detail_relateRc {
padding: 0 40px;
margin-bottom: 56px;
.cr-title {
display: flex;
align-items: center;
font-size: 26px;
color: $themeColor;
font-family: SourceHanSerifCN-Bold;
i {
font-size: 28px;
margin-right: 10px;
}
}
.el-col {
margin-bottom: 20px;
.img-container {
width: 100%;
height: 460px;
......@@ -1390,13 +1379,16 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.display-detail_lts {
.lts-content {
padding: 0 40px 40px;
.lt-item {
border-bottom: 1px dashed #ccc;
padding-bottom: 9px;
& > span {
&>span {
padding: 0 4px;
}
}
.lt-name {
color: $themeColor;
cursor: pointer;
......@@ -1406,6 +1398,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
}
}
::v-deep .el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
......@@ -1423,11 +1416,8 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
//有子节点 且已展开
::v-deep
.el-tree
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("~@/assets/imgs/display/normal/tree-node-s.png") no-repeat 0
3px;
::v-deep .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("~@/assets/imgs/display/normal/tree-node-s.png") no-repeat 0 3px;
content: "";
display: block;
width: 16px;
......@@ -1457,11 +1447,14 @@ $titleFontFamily: SourceHanSerifCN-Bold;
::v-deep .el-carousel {
height: 100%;
}
::v-deep .el-carousel__container {
height: 100%;
}
::v-deep .el-tree {
background: transparent;
.el-tree-node__content {
height: 54px;
......@@ -1469,8 +1462,10 @@ $titleFontFamily: SourceHanSerifCN-Bold;
background-color: #fff;
color: $themeColor;
}
padding-left: 16px !important;
}
.is-current {
.el-tree-node__content {
background-color: #fff;
......@@ -1478,18 +1473,22 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
}
}
@keyframes filmMoveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-1200px);
}
}
@keyframes filmMoveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(1200px);
}
......@@ -1499,6 +1498,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
......@@ -1508,6 +1508,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
......@@ -1515,6 +1516,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
-webkit-animation-play-state: paused;
/* Safari 和 Chrome */
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论