Skip to content

E
exhibition_backstage
提交 7a27ee63 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

修改颜色变量

上级 b55ed24e
隐藏空白字符变更
内嵌 并排
正在显示 包含 676 行增加 和 539 行删除
src/assets/styles/variable.scss
浏览文件 @ 7a27ee63
$deepBlue: #252F57;
$yellow: #dfab46;
$themeColor: #252F57;
$themeSecondaryColor:#dfab46;
$font-size-sm:14px;
$font-size-base:16px;
$font-size-lg:22px;
$font-size-sm: 14px;
$font-size-base: 16px;
$font-size-lg: 22px;
$nav-height: 120px;
$defaultFontFamily: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
$defaultFontFamily: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
\ No newline at end of file
src/components/Footer/index.vue
浏览文件 @ 7a27ee63
<!-- -->
<template>
<div :class="{
footer: true,
}">
<div
:class="{
footer: true,
}"
>
<div class="logo">
<img src="~@/assets/imgs/display/logo3.png" alt="" />
</div>
......@@ -31,19 +33,24 @@
<el-popover placement="top-start" width="280" trigger="hover">
<span slot="reference">小程序</span>
<div class="wechat-app">
<img src="~@/assets/imgs/wechat-app.jpg" alt="">
<img src="~@/assets/imgs/wechat-app.jpg" alt="" />
</div>
</el-popover>
</span>
</div>
</div>
<div class="copyright">
<a href="https://beian.miit.gov.cn" target="_blank"> 黔ICP备2022009785号-1 &nbsp; &nbsp;</a>
<a href="https://beian.miit.gov.cn" target="_blank">
黔ICP备2022009785号-1 &nbsp; &nbsp;</a
>
|&nbsp; &nbsp; ©2022-现在 贵州省文化和旅游厅
</div>
<div class="support">网站建设：贵州同方知网科技发展有限公司</div>
<div class="advice">
<el-tooltip placement="top-start" content="谷歌 火狐 最佳分辨率（1920 x 1080）">
<el-tooltip
placement="top-start"
content="谷歌 火狐 最佳分辨率（1920 x 1080）"
>
<span>浏览建议</span>
</el-tooltip>
</div>
......@@ -120,7 +127,7 @@ export default {
padding: 30px 0;
justify-content: center;
align-items: center;
background-color: $themeColor;
background-color: $deepBlue;
flex-direction: column;
color: #fefefe;
font-size: 14px;
......@@ -142,8 +149,6 @@ export default {
.menu-item {
margin-right: 20px;
cursor: pointer;
}
}
......@@ -161,13 +166,11 @@ export default {
}
.copyright {
&>a {
& > a {
text-decoration: none;
color: #fff;
}
}
}
.map {
......
src/components/NavBar/index.vue
浏览文件 @ 7a27ee63
......@@ -30,7 +30,7 @@
</div>
<div class="tools animate__animated animate__fadeInRight">
<div class="wrapper">
<el-button round v-if="!hasToken">
<el-button round v-if="!hasToken">
<i class="el-icon-user"></i>
<span>登录</span>
<!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
......@@ -44,17 +44,10 @@
<!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-if="!hasToken"
class="operation-item"
<el-dropdown-item v-if="!hasToken" class="operation-item"
>登录
</el-dropdown-item>
<el-dropdown-item
v-if="hasToken"
class="operation-item"
>
<el-dropdown-item v-if="hasToken" class="operation-item">
个人中心</el-dropdown-item
>
<el-dropdown-item v-if="hasToken">
......@@ -75,11 +68,7 @@
@mouseleave="handleMouseLeaveSubMenu"
>
<ul>
<li
v-for="(item, index) in typeList"
:key="index"
>
<li v-for="(item, index) in typeList" :key="index">
<span>{{ item.label }}</span>
<svg-icon
icon-class="wenshi"
......@@ -96,10 +85,7 @@ import { mapGetters } from "vuex";
export default {
name: "NavBar",
computed: {
...mapGetters([
"token",
"userInfo",
]),
...mapGetters(["token", "userInfo"]),
hasToken() {
return this.token;
},
......@@ -179,8 +165,8 @@ export default {
showThemeColor: false,
};
},
mounted(){
console.log(this.themeType);
mounted() {
console.log(this.themeType);
},
methods: {
handleEnterTabItem(item) {
......@@ -225,18 +211,18 @@ export default {
left: 0;
z-index: 9;
background-color: rgba(#000, 0.25) !important;
// background-color: rgba($themeColor, 0.3)!important;
// background-color: rgba($deepBlue, 0.3)!important;
}
.header-fixed {
position: fixed !important;
background-color: $themeColor !important;
background-color: $deepBlue !important;
z-index: 99;
top: 0;
}
.show-themeColor {
background-color: $themeColor !important;
background-color: $deepBlue !important;
}
.isChStyle {
......@@ -249,12 +235,11 @@ export default {
background-color: rgba(0, 0, 0, 0.25) !important;
}
.nav {
height: $nav-height;
width: 100%;
transition: all 0.5s ease;
background-color: $themeColor;
background-color: $deepBlue;
position: relative;
z-index: 99;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
......@@ -375,7 +360,7 @@ export default {
&:hover {
span {
color: $themeSecondaryColor;
color: $yellow;
}
}
......
src/components/ReaderOperations/index.vue
浏览文件 @ 7a27ee63
<template>
<div class="reader-operations">
<span class="operations" :style="{
color,
}">
<span
class="operations"
:style="{
color,
}"
>
<span class="operation-item">
<svg-icon icon-class="view" :style="{
fontSize: iconSize + 'px',
color,
}"></svg-icon>
<svg-icon
icon-class="view"
:style="{
fontSize: iconSize + 'px',
color,
}"
></svg-icon>
<span>{{ formatNum(info.browseCount) }}</span>
</span>
<span class="operation-item">
<svg-icon :icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'" :style="{
fontSize: iconSize + 'px',
color: info.loveCountStatus ? selectColor : color,
}"></svg-icon>
<svg-icon
:icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'"
:style="{
fontSize: iconSize + 'px',
color: info.loveCountStatus ? selectColor : color,
}"
></svg-icon>
<span>{{
formatNum(info.loveCount) == 0 ? "点赞" : formatNum(info.loveCount)
formatNum(info.loveCount) == 0 ? "点赞" : formatNum(info.loveCount)
}}</span>
</span>
<span class="operation-item" >
<svg-icon :icon-class="info.collectCountStatus ? 'collect-s' : 'collect'" :style="{
fontSize: iconSize + 'px',
color: info.collectCountStatus ? selectColor : color,
}"></svg-icon>
<span class="operation-item">
<svg-icon
:icon-class="info.collectCountStatus ? 'collect-s' : 'collect'"
:style="{
fontSize: iconSize + 'px',
color: info.collectCountStatus ? selectColor : color,
}"
></svg-icon>
<span>{{
formatNum(info.collectCount) == 0
? "收藏"
: formatNum(info.collectCount)
formatNum(info.collectCount) == 0
? "收藏"
: formatNum(info.collectCount)
}}</span>
</span>
<span class="operation-item">
<svg-icon icon-class="share2" :style="{
fontSize: iconSize + 'px',
color,
}"></svg-icon>
<svg-icon
icon-class="share2"
:style="{
fontSize: iconSize + 'px',
color,
}"
></svg-icon>
<span>分享</span>
</span>
</span>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { formatNum } from "@/utils/index";
import { formatNum } from "@/utils/index";
export default {
name: "ReaderOperations",
props: {
......@@ -81,8 +95,6 @@ export default {
...mapGetters(["token", "showLoginDialog"]),
},
methods: {
formatNum(num) {
return formatNum(num);
},
......@@ -124,7 +136,7 @@ export default {
}
.el-button--text {
color: $themeColor;
color: $deepBlue;
}
.copy {
......@@ -156,7 +168,7 @@ export default {
.el-button--primary {
border: none;
background-color: $themeColor;
background-color: $deepBlue;
}
}
</style>
\ No newline at end of file
</style>
src/components/SlideImageGroup/index.vue
浏览文件 @ 7a27ee63
<template>
<div class="slide-img-group">
<div class="list">
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide class="slide-item" v-for="(item, index) in imgList" :key="index" @click="handleClickItem(item)">
<swiper
class="swiper gallery-thumbs"
:options="swiperOptionThumbs"
ref="swiperThumbs"
>
<swiper-slide
class="slide-item"
v-for="(item, index) in imgList"
:key="index"
@click="handleClickItem(item)"
>
<!-- <img :src="item.pressUrl || item.faceImagePressUrl" alt="" /> -->
<div class="img-container" @click="handelPreviewImages(imgList, index)">
<div
class="img-container"
@click="handelPreviewImages(imgList, index)"
>
<slot name="img" :item="item"></slot>
</div>
<slot name="info" :item="item" />
......@@ -17,7 +29,6 @@
<span>查看大图</span>
</div> -->
</swiper-slide>
<!--分页器。如果放置在swiper外面，需要自定义样式。-->
</swiper>
......@@ -28,13 +39,16 @@
<div class="swiper-button-prev swiper-button-white" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
</div>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="previewList"
:initial-index="initialIndex" />
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="previewList"
:initial-index="initialIndex"
/>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
......@@ -77,16 +91,16 @@ export default {
},
},
imgViewerVisible: false,
initialIndex: 0
initialIndex: 0,
};
},
mounted() { },
mounted() {},
methods: {
handelPreviewImages(items, index) {
this.imgViewerVisible = true;
this.previewList = items.map((item) => this.$getFullUrl(item.url));
this.initialIndex = index
this.initialIndex = index;
},
closeImgViewer() {
this.imgViewerVisible = false;
......@@ -98,12 +112,12 @@ export default {
},
};
</script>
<style scoped lang="scss">
.slide-img-group {
// height: 100%;
height: 240px;
.list{
.list {
position: relative;
display: flex;
justify-content: center;
......@@ -112,7 +126,7 @@ export default {
.swiper-container {
// padding: 0 60px;
width:calc(100% - 140px);
width: calc(100% - 140px);
// overflow-y: auto;
::v-deep .swiper-wrapper {
display: flex;
......@@ -164,7 +178,7 @@ export default {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: rgba($themeColor,0.4);
background-color: rgba($deepBlue, 0.4);
transform: translateY(-20px);
color: #333;
}
......@@ -193,18 +207,14 @@ export default {
}
::v-deep .swiper-pagination-bullets {
bottom:-10px;
.swiper-pagination-bullet{
bottom: -10px;
.swiper-pagination-bullet {
margin-right: 10px;
width: 10px;
height: 10px;
}
.swiper-pagination-bullet-active{
background: $themeColor;
.swiper-pagination-bullet-active {
background: $deepBlue;
}
}
</style>
\ No newline at end of file
src/components/Video/index.vue
浏览文件 @ 7a27ee63
<template>
<div :class="['video-container', theme]" @click="hanleClick">
<video :src="url" class="video-dom" ref="video" :controls="isPlaying"></video>
<video
:src="url"
class="video-dom"
ref="video"
:controls="isPlaying"
></video>
<div class="modal" :style="{ opacity: opacity }">
<div class="play-btn">
<i class="el-icon-caret-right"></i>
......@@ -53,7 +58,7 @@ export default {
};
</script>
<style scoped lang='scss'>
<style scoped lang="scss">
.video-container {
position: relative;
height: 100%;
......@@ -102,8 +107,8 @@ export default {
}
.play-btn {
border: 2px solid #fff;
color: #fff;
background: $themeColor;;
}
</style>
\ No newline at end of file
border: 2px solid #fff;
color: #fff;
background: $deepBlue;
}
</style>
src/components/VideoPlayer/index.vue
浏览文件 @ 7a27ee63
......@@ -101,7 +101,7 @@ export default {
&:hover {
.vjs-big-play-button {
// background-color: #fff;
// color: $themeColor;
// color: $deepBlue;
}
}
video {
......@@ -122,7 +122,7 @@ export default {
transform: translate(-50%, -50%);
font-size: 50px;
color: #fff;
background-color: $themeColor;
background-color: $deepBlue;
}
.vjs-control-bar {
......
src/views/display/components/templates/ChStyle.vue
浏览文件 @ 7a27ee63
......@@ -2,15 +2,32 @@
<div class="ch-style">
<div class="content" id="content">
<div class="e-imgs">
<swiper class="swiper gallery-top" :options="swiperOption" ref="swiperTop">
<swiper-slide class="slide-item" v-for="(item, index) in displayDetail.imagesVo" :key="index">
<img :src="$getFullUrl(item.middleUrl || item.pressUrl)" style="cursor:pointer"
@click="handelPreviewImages(displayDetail.imagesVo, index)" />
<swiper
class="swiper gallery-top"
:options="swiperOption"
ref="swiperTop"
>
<swiper-slide
class="slide-item"
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<img
:src="$getFullUrl(item.middleUrl || item.pressUrl)"
style="cursor: pointer"
@click="handelPreviewImages(displayDetail.imagesVo, index)"
/>
</swiper-slide>
<div class="swiper-button-next swiper-button-white" slot="button-next">
<div
class="swiper-button-next swiper-button-white"
slot="button-next"
>
<i class="el-icon-arrow-right"></i>
</div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev">
<div
class="swiper-button-prev swiper-button-white"
slot="button-prev"
>
<i class="el-icon-arrow-left"></i>
</div>
</swiper>
......@@ -21,7 +38,11 @@
{{ displayDetail.title }}
</div>
<div class="e-tools">
<ReaderOperations :info="displayDetail" :sourceType="'biz_exhibition'" @reload="reload" />
<ReaderOperations
:info="displayDetail"
:sourceType="'biz_exhibition'"
@reload="reload"
/>
</div>
<div class="e-info">
<div class="info-item">
......@@ -31,13 +52,13 @@
<div class="info-item" v-if="dicts.displayType">
<span class="label"> 展览类型： </span>
<span class="value">{{
dicts.displayType[displayDetail.type] || "暂无"
dicts.displayType[displayDetail.type] || "暂无"
}}</span>
</div>
<div class="info-item" v-if="dicts.displayCharacter">
<span class="label"> 展览性质： </span>
<span class="value">{{
dicts.displayCharacter[displayDetail.displayCharacter] || "暂无"
dicts.displayCharacter[displayDetail.displayCharacter] || "暂无"
}}</span>
</div>
<div class="info-item">
......@@ -46,7 +67,9 @@
</div>
<div class="info-item">
<span class="label"> 展览地区： </span>
<span class="value">{{ displayDetail.regionName || "暂无" }}</span>
<span class="value">{{
displayDetail.regionName || "暂无"
}}</span>
</div>
</div>
</div>
......@@ -57,26 +80,45 @@
<div class="text" v-html="displayDetail.intro"></div>
</div>
</div>
<div class="e-units wow animate__animated animate__fadeInUp" ref="units"
v-if="displayDetail.exhibitionUnits.length > 0">
<div
class="e-units wow animate__animated animate__fadeInUp"
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="units-title">展览单元</div>
<div class="units-content" v-if="currentUnit">
<div class="left">
<div class="line" :style="{
height: (displayDetail.exhibitionUnits.length - 1) * 130 + 'px',
}"></div>
<div
class="line"
:style="{
height:
(displayDetail.exhibitionUnits.length - 1) * 130 + 'px',
}"
></div>
<div class="dots">
<div class="dot-item" v-for="(item, index) in displayDetail.exhibitionUnits" :key="index"
:style="{ top: index * 130 - 17 + 'px' }" @click="handleClickUnitTitle(item)"
@mouseenter="handleMouseEnterUnit(item)" @mouseleave="handleMouseLeaveUnit">
<div class="circle" :style="{
'background-image': `url(${require(`@/assets/imgs/display/red/${currentUnit.title == item.title ? 'circle-s' : 'circle'
<div
class="dot-item"
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
:style="{ top: index * 130 - 17 + 'px' }"
@click="handleClickUnitTitle(item)"
@mouseenter="handleMouseEnterUnit(item)"
@mouseleave="handleMouseLeaveUnit"
>
<div
class="circle"
:style="{
'background-image': `url(${require(`@/assets/imgs/display/red/${
currentUnit.title == item.title ? 'circle-s' : 'circle'
}.png`)})`,
}"></div>
<div :class="{
title: true,
active: currentUnit.title == item.title,
}">
}"
></div>
<div
:class="{
title: true,
active: currentUnit.title == item.title,
}"
>
{{ item.title }}
</div>
</div>
......@@ -84,52 +126,97 @@
</div>
<div class="right-content">
<div class="unit-content">
<div class="unit-content-container" v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
:key="unitTitle">
<div
class="unit-content-container"
v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
:key="unitTitle"
>
<div class="unit-content-title">
{{ unitTitle }}
</div>
<div class="text-indent unit-content_intro" v-if="currentUnit.intro" v-html="unitValue.intro"></div>
<div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0">
<div
class="text-indent unit-content_intro"
v-if="currentUnit.intro"
v-html="unitValue.intro"
></div>
<div
class="unit-content_images"
v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
>
<!-- <div class="imgs-title">单元图片</div> -->
<div class="unit-imgs">
<SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true"
v-if="unitValue.imagesVo.length > 3">
<SlideImageGroup
:imgList="unitValue.imagesVo"
:needEnlarge="true"
v-if="unitValue.imagesVo.length > 3"
>
<template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.middleUrl || item.url)" alt=""
style="width: 100%; height: 100%; object-fit: contain" />
<img
:src="$getFullUrl(item.middleUrl || item.url)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: contain;
"
/>
</template>
</SlideImageGroup>
<el-row v-if="
unitValue.imagesVo.length > 0 &&
unitValue.imagesVo.length < 4
" :gutter="10">
<el-col v-for="(item, index) in unitValue.imagesVo" :key="index"
:span="24 / unitValue.imagesVo.length" style="height: 300px;">
<img :src="$getFullUrl(item.middleUrl || item.url)" alt="" style="
width: 100%;
height: 100%;
object-fit: contain;
cursor: pointer;
" @click="handelPreviewImages(unitValue.imagesVo, index)" />
<el-row
v-if="
unitValue.imagesVo.length > 0 &&
unitValue.imagesVo.length < 4
"
:gutter="10"
>
<el-col
v-for="(item, index) in unitValue.imagesVo"
:key="index"
:span="24 / unitValue.imagesVo.length"
style="height: 300px"
>
<img
:src="$getFullUrl(item.middleUrl || item.url)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: contain;
cursor: pointer;
"
@click="
handelPreviewImages(unitValue.imagesVo, index)
"
/>
</el-col>
</el-row>
</div>
</div>
<div class="unit-content_crs" v-if="
unitValue.culturalRelics &&
unitValue.culturalRelics.length > 0
">
<div
class="unit-content_crs"
v-if="
unitValue.culturalRelics &&
unitValue.culturalRelics.length > 0
"
>
<div class="imgs-title">相关文物</div>
<SlideImageGroup :imgList="unitValue.culturalRelics">
<template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.faceImageMiddleUrl || item.faceImagePressUrl)" alt="" style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
" />
<img
:src="
$getFullUrl(
item.faceImageMiddleUrl || item.faceImagePressUrl
)
"
alt=""
style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
"
/>
</template>
<template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div>
......@@ -142,35 +229,40 @@
</div>
</div>
<div class="
e-video
wow
animate__animated animate__fadeInRight
" v-if="currentVideo.url">
<div class="video-title">
展览视频
</div>
<div
class="e-video wow animate__animated animate__fadeInRight"
v-if="currentVideo.url"
>
<div class="video-title">展览视频</div>
<div class="video-content">
<video-player v-if="currentVideo.url" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player>
<video-player
v-if="currentVideo.url"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
<div class="video-names">
<div :class="{
'video-item': true, active: currentVideo && item.fileId == currentVideo.fileId
}" v-for="(item, index) in displayDetail.videosVo" :key="index" @click="handleChangeCurrentVideo(item)">
{{
item.name.split(".")[0]
}}
<div
:class="{
'video-item': true,
active: currentVideo && item.fileId == currentVideo.fileId,
}"
v-for="(item, index) in displayDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
{{ item.name.split(".")[0] }}
</div>
</div>
</div>
</div>
<div class="e-virtual" v-if="displayDetail.virtualVo.length > 0">
<div class="virtual-title">虚拟展厅</div>
<div class="wrapper">
<div class="img-container" v-for="(item, index) in displayDetail.virtualVo"
:key="index">
<div
class="img-container"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
<img :src="item.faceImagePressUrl" alt="" />
<div class="modal">
<svg-icon icon-class="360"></svg-icon>
......@@ -180,29 +272,40 @@
</div>
</div>
<div class="e-lts" v-if="
displayDetail.literatureVo &&
displayDetail.literatureVo.length > 0
">
<div
class="e-lts"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<div class="lts-title">相关文献</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-authors" v-if="item.authors"
>{{ item.authors }}.</span
>
<span class="lt-name" v-if="item.name">{{ item.name }}.</span>
<span class="lt-source" v-if="item.source">{{ item.source }}.</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"
:initial-index="initialIndex" />
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
:initial-index="initialIndex"
/>
</div>
</template>
......@@ -264,7 +367,7 @@ export default {
},
currentUnit: null,
currentVideo: {},
initialIndex: 0
initialIndex: 0,
};
},
computed: {
......@@ -277,11 +380,11 @@ export default {
// let units = this.$refs.
},
updated() {
let p = document.getElementsByTagName('p')
let arr = [...p]
arr.map(item => {
item.style.color = "#fff"
})
let p = document.getElementsByTagName("p");
let arr = [...p];
arr.map((item) => {
item.style.color = "#fff";
});
},
methods: {
async loadDetail() {
......@@ -360,8 +463,6 @@ export default {
}
},
reload() {
this.$emit("reload");
},
......@@ -369,7 +470,7 @@ export default {
handelPreviewImages(images, index) {
this.imgViewerVisible = true;
this.imgList = images.map((item) => this.$getFullUrl(item.url));
this.initialIndex = index
this.initialIndex = index;
},
closeImgViewer() {
......@@ -414,8 +515,7 @@ export default {
};
</script>
<style lang="scss" >
<style lang="scss">
.unit-content_intro {
p {
// color: red !important;
......@@ -427,14 +527,14 @@ export default {
}
</style>
<style lang="scss" scoped>
$themeColor: #a30e0c;
$deepBlue: #a30e0c;
// 中国风主题样式
/**公共样式开始 */
.custom-title {
width: 50px;
background-color: $themeColor;
background-color: $deepBlue;
min-height: 300px;
color: #fff;
font-size: 28px;
......@@ -489,7 +589,6 @@ $themeColor: #a30e0c;
// top: -$nav-height;
// height: 100%;
.content {
width: 100%;
overflow: hidden;
......@@ -501,7 +600,6 @@ $themeColor: #a30e0c;
display: flex;
justify-content: center;
.slide-item {
display: flex;
justify-content: center;
......@@ -527,12 +625,11 @@ $themeColor: #a30e0c;
font-weight: 800;
transform: translateY(-72px);
font-size: 26px !important;
background-color: #1C4E52;
background-color: #1c4e52;
}
.swiper-button-next {
transform: translateX(-100px);
}
.swiper-button-prev {
......@@ -544,7 +641,7 @@ $themeColor: #a30e0c;
background-image: url("~@/assets/imgs/display/ch/pattern2.png");
background-size: 100%;
width: 100%;
background-color: #1C4E52;
background-color: #1c4e52;
padding-bottom: 73px;
// height:4818px ;
}
......@@ -591,7 +688,7 @@ $themeColor: #a30e0c;
min-height: 572px;
color: #fff;
&>.title {
& > .title {
font-size: 46px;
font-family: PingFang;
font-weight: 800;
......@@ -603,7 +700,7 @@ $themeColor: #a30e0c;
justify-content: center;
}
&>.text {
& > .text {
font-size: 24px;
font-family: PingFang;
font-weight: 500;
......@@ -702,7 +799,6 @@ $themeColor: #a30e0c;
color: #fff;
.unit-content-container {
.unit-content-title {
font-family: PingFang;
line-height: 48px;
......@@ -811,12 +907,12 @@ $themeColor: #a30e0c;
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $themeColor;
// border: 1px solid $deepBlue;
color: #666;
cursor: pointer;
&:hover {
color: $themeColor;
color: $deepBlue;
}
.svg-icon {
......@@ -836,7 +932,6 @@ $themeColor: #a30e0c;
width: 100%;
padding: 0 13%;
.video-title {
width: 100%;
display: flex;
......@@ -871,7 +966,7 @@ $themeColor: #a30e0c;
}
.active {
color: $themeSecondaryColor;
color: $yellow;
}
}
......@@ -885,8 +980,6 @@ $themeColor: #a30e0c;
}
}
}
}
.e-virtual {
......@@ -969,7 +1062,6 @@ $themeColor: #a30e0c;
}
}
/**关联文献 */
.e-lts {
color: #333;
......@@ -1003,7 +1095,7 @@ $themeColor: #a30e0c;
color: #dbb645;
}
&>span {
& > span {
padding: 0 4px;
}
}
......@@ -1011,7 +1103,6 @@ $themeColor: #a30e0c;
}
}
::v-deep .el-carousel {
height: 100%;
}
......@@ -1020,7 +1111,6 @@ $themeColor: #a30e0c;
height: 100%;
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
......@@ -1046,4 +1136,4 @@ $themeColor: #a30e0c;
-webkit-animation-play-state: paused;
/* Safari 和 Chrome */
}
</style>
\ No newline at end of file
</style>
src/views/display/components/templates/NormalStyle.vue
浏览文件 @ 7a27ee63
......@@ -111,7 +111,6 @@
<div
class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<!-- <img src="@/assets/imgs/display/normal/music.png" alt="" /> -->
......@@ -130,7 +129,6 @@
>
<span v-for="(item, index) in tabbarData" :key="index">
<span
:class="[
'tab-item',
currentTab && currentTab.domId == item.domId ? 'active' : '',
......@@ -174,7 +172,6 @@
<div class="vr-content">
<div
class="img-container"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
......@@ -204,7 +201,10 @@
class="video-player"
>
</video-player> -->
<Video :url="$getFullUrl(currentVideo.url)" class="video-player"/>
<Video
:url="$getFullUrl(currentVideo.url)"
class="video-player"
/>
</div>
<div class="video-name-list">
<div class="title">播放列表</div>
......@@ -269,7 +269,6 @@
object-fit: fill;
cursor: pointer;
"
/>
</template>
<template slot-scope="{ item }" slot="info">
......@@ -513,7 +512,6 @@ export default {
window.open(newPage.href, "_blank");
},
handleChangeCurrentVideo(video) {
this.currentVideo = video;
},
......@@ -561,7 +559,7 @@ export default {
};
</script>
<style lang="scss" >
<style lang="scss">
// 自定义分页器样式
#page {
height: 30px;
......@@ -582,7 +580,6 @@ export default {
}
</style>
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
......@@ -623,19 +620,19 @@ $titleFontFamily: SourceHanSerifCN-Bold;
i {
margin-right: 10px;
font-size: 28px;
color: $themeColor;
color: $deepBlue;
}
.svg-icon {
font-size: 32px;
color: $themeColor;
color: $deepBlue;
margin-right: 10px;
}
.title {
font-size: 26px;
font-weight: 400;
color: $themeColor;
color: $deepBlue;
font-family: "SourceHanSerifCN-Bold";
}
}
......@@ -846,7 +843,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
.collect {
color: $themeColor;
color: $deepBlue;
}
}
}
......@@ -861,7 +858,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid $themeColor;
border: 2px solid $deepBlue;
padding: 10px;
border-radius: 50%;
display: flex;
......@@ -875,7 +872,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
.svg-icon {
color: $themeColor;
color: $deepBlue;
font-size: 80px;
}
......@@ -896,14 +893,14 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.tab-item {
height: 100%;
margin-right: 40px;
color: $themeColor;
color: $deepBlue;
font-size: 24px;
font-family: $titleFontFamily;
cursor: pointer;
position: relative;
&:hover {
color: $themeColor;
color: $deepBlue;
&::after {
display: inline-block;
......@@ -916,7 +913,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
.active {
color: $themeColor;
color: $deepBlue;
&::after {
display: inline-block;
......@@ -931,7 +928,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
width: 100%;
bottom: -10px;
left: 0;
background-color: $themeColor;
background-color: $deepBlue;
}
}
......@@ -945,7 +942,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.intro-title {
font-size: 26px;
font-weight: 400;
color: $themeColor;
color: $deepBlue;
font-family: "SourceHanSerifCN-Bold";
display: flex;
align-items: center;
......@@ -968,7 +965,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.left-box {
width: 60px;
background-color: $themeColor;
background-color: $deepBlue;
min-height: 200px;
color: #fff;
font-size: 28px;
......@@ -984,7 +981,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
flex: 1;
text-indent: 34px;
padding: 16px 32px;
background-color: rgba($themeColor, 10%);
background-color: rgba($deepBlue, 10%);
}
}
......@@ -999,7 +996,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// justify-content: center;
align-items: center;
font-size: 24px;
color: $themeColor;
color: $deepBlue;
padding: 0 40px;
margin-bottom: 32px;
font-family: SourceHanSerifCN-Bold;
......@@ -1028,17 +1025,17 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.name {
padding: 8px;
// border-radius: 4px;
color: $themeColor;
color: $deepBlue;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
white-space: nowrap;
border: 1px solid $themeColor;
border: 1px solid $deepBlue;
font-size: 14px;
&:hover {
background: $themeColor;
color: $themeSecondaryColor;
background: $deepBlue;
color: $yellow;
}
&:not(&:last-child) {
border-bottom: none;
......@@ -1047,8 +1044,8 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
.active {
background: $themeColor;
color: $themeSecondaryColor;
background: $deepBlue;
color: $yellow;
}
}
}
......@@ -1069,7 +1066,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// display: flex;
// justify-content: center;
// align-items: center;
// color: $themeColor;
// color: $deepBlue;
// font-weight: bolder;
// font-size: 28px;
// transform: translateY(-6px);
......@@ -1081,18 +1078,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// .slide-item {
// padding: 8px;
// border-radius: 4px;
// color: $themeColor;
// color: $deepBlue;
// cursor: pointer;
// text-overflow: ellipsis;
// overflow: hidden;
// width: 100%;
// white-space: nowrap;
// border: 1px solid $themeColor;
// border: 1px solid $deepBlue;
// font-size: 14px;
// }
// .active {
// background: $themeColor;
// background: $deepBlue;
// color: #fff;
// }
// }
......@@ -1185,7 +1182,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
display: flex;
align-items: center;
font-size: 26px;
color: $themeColor;
color: $deepBlue;
font-family: SourceHanSerifCN-Bold;
i {
......@@ -1240,7 +1237,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
.lt-name {
color: $themeColor;
color: $deepBlue;
cursor: pointer;
}
}
......@@ -1249,7 +1246,6 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
}
// 修改tree icon
::v-deep .el-carousel__item--card {
width: 100%;
......@@ -1261,7 +1257,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
height: 100%;
}
::v-deep .el-carousel__container {
::v-deep .el-carousel__container {
height: 100%;
}
......@@ -1273,7 +1269,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
&:hover {
background-color: #fff;
color: $themeColor;
color: $deepBlue;
}
padding-left: 16px !important;
......@@ -1282,7 +1278,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.is-current {
.el-tree-node__content {
background-color: #fff;
color: $themeColor;
color: $deepBlue;
}
}
}
......@@ -1332,4 +1328,4 @@ $titleFontFamily: SourceHanSerifCN-Bold;
-webkit-animation-play-state: paused;
/* Safari 和 Chrome */
}
</style>
\ No newline at end of file
</style>
src/views/display/components/templates/NormalStyleUnit.vue
浏览文件 @ 7a27ee63
<template>
<div class="unit-container">
<div class="unit-content-menu">
<swiper
class="swiper unit-swiper"
:options="unitSwiperOption"
ref="videoSwiper"
>
<swiper-slide
:class="['slide-item', item.euId == curUnit.euId ? 'active' : '']"
v-for="(item, index) in exhibitionUnits"
:key="index"
@click.native="handleClickUnit(item)"
>
{{ item.title }}
</swiper-slide>
</swiper>
<div
class="swiper-button-prev unit-swiper-button-prev"
slot="button-prev"
>
<i class="el-icon-arrow-left"></i>
</div>
<div
class="swiper-button-next unit-swiper-button-next"
slot="button-next"
>
<i class="el-icon-arrow-right"></i>
</div>
</div>
<div class="unit-container">
<div class="unit-content-menu">
<swiper class="swiper unit-swiper" :options="unitSwiperOption" ref="videoSwiper">
<swiper-slide :class="[
'slide-item',
item.euId == curUnit.euId ? 'active' : '',
]" v-for="(item, index) in exhibitionUnits" :key="index" @click.native="handleClickUnit(item)">
{{ item.title }}
</swiper-slide>
</swiper>
<div class="swiper-button-prev unit-swiper-button-prev" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
<div class="swiper-button-next unit-swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div>
<div class="unit-content">
<div
class="unit-content-container"
v-for="(unitValue, unitTitle) in curUnit.expandUnitInfo"
:key="unitTitle"
>
<div class="unit-content-title">
{{ unitTitle }}
</div>
<div
class="text-indent unit-content_intro"
v-if="curUnit.intro"
v-html="unitValue.intro"
></div>
<div
class="unit-content_images"
v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
>
<!-- <div class="imgs-title">单元图片</div> -->
<div class="unit-imgs">
<SlideImageGroup
:imgList="unitValue.imagesVo"
:needEnlarge="true"
v-if="unitValue.imagesVo.length > 3"
>
<template slot-scope="{ item }" slot="img">
<img
:src="$getFullUrl(item.middleUrl)"
alt=""
style="width: 100%; height: 100%; object-fit: contain"
/>
</template>
</SlideImageGroup>
<el-row
v-if="
unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4
"
:gutter="10"
>
<el-col
v-for="(item, index) in unitValue.imagesVo"
:key="index"
:span="24 / unitValue.imagesVo.length"
style="height: 300px"
>
<img
:src="$getFullUrl(item.middleUrl)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: contain;
cursor: pointer;
"
@click="handelPreviewImages(unitValue.imagesVo)"
/>
</el-col>
</el-row>
</div>
</div>
<div class="unit-content">
<div class="unit-content-container" v-for="(unitValue, unitTitle) in curUnit.expandUnitInfo"
:key="unitTitle">
<div class="unit-content-title">
{{ unitTitle }}
</div>
<div class="text-indent unit-content_intro" v-if="curUnit.intro" v-html="unitValue.intro"></div>
<div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0">
<!-- <div class="imgs-title">单元图片</div> -->
<div class="unit-imgs">
<SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true"
v-if="unitValue.imagesVo.length > 3">
<template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.middleUrl)" alt=""
style="width: 100%; height: 100%; object-fit: contain" />
</template>
</SlideImageGroup>
<el-row v-if="unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4" :gutter="10">
<el-col v-for="(item, index) in unitValue.imagesVo" :key="index"
:span="24 / unitValue.imagesVo.length" style="height:300px">
<img :src="$getFullUrl(item.middleUrl)" alt=""
style="width: 100%; height: 100%; object-fit: contain;cursor: pointer;"
@click="handelPreviewImages(unitValue.imagesVo)" />
</el-col>
</el-row>
</div>
</div>
<div class="unit-content_crs" v-if="
unitValue.culturalRelics && unitValue.culturalRelics.length > 0
">
<div class="imgs-title">单元文物</div>
<SlideImageGroup :imgList="unitValue.culturalRelics">
<template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.faceImageMiddleUrl)" alt="" style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
" @click="handleToCr(item)" />
</template>
<template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div>
</template>
</SlideImageGroup>
</div>
</div>
<div
class="unit-content_crs"
v-if="unitValue.culturalRelics && unitValue.culturalRelics.length > 0"
>
<div class="imgs-title">单元文物</div>
<SlideImageGroup :imgList="unitValue.culturalRelics">
<template slot-scope="{ item }" slot="img">
<img
:src="$getFullUrl(item.faceImageMiddleUrl)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
"
@click="handleToCr(item)"
/>
</template>
<template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div>
</template>
</SlideImageGroup>
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -75,247 +124,240 @@ import { swiper, swiperSlide } from "vue-awesome-swiper";
import SlideImageGroup from "@/components/SlideImageGroup";
import "swiper/dist/css/swiper.css";
export default {
name: "NormalStyleUnit",
components: {
swiper,
swiperSlide,
SlideImageGroup,
name: "NormalStyleUnit",
components: {
swiper,
swiperSlide,
SlideImageGroup,
},
props: {
curUnit: {
type: Object,
default: null,
},
exhibitionUnits: {
type: Array,
default: null,
},
props: {
curUnit: {
type: Object,
default: null
},
data() {
return {
unitSwiperOption: {
loop: false,
loopedSlides: 8, // looped slides should be the same
spaceBetween: 10,
slidesPerView: 4,
navigation: {
nextEl: ".unit-swiper-button-next",
prevEl: ".unit-swiper-button-prev",
},
exhibitionUnits: {
type: Array,
default: null
}
},
};
},
updated() {
let p = document.getElementsByTagName("p");
let arr = [...p];
arr.map((item) => {
item.style.color = "#333";
});
},
methods: {
handleClickUnit(item) {
this.$emit("handleClickUnit", item);
},
data() {
return {
unitSwiperOption: {
loop: false,
loopedSlides: 8, // looped slides should be the same
spaceBetween: 10,
slidesPerView: 4,
navigation: {
nextEl: ".unit-swiper-button-next",
prevEl: ".unit-swiper-button-prev",
},
},
}
handelPreviewImages(images) {
this.$emit("handelPreviewImages", images);
},
updated() {
let p = document.getElementsByTagName('p')
let arr = [...p]
arr.map(item => {
item.style.color = "#333"
})
handleToCr(item) {
this.$emit("handleToCr", item);
},
methods: {
handleClickUnit(item) {
this.$emit('handleClickUnit', item)
},
handelPreviewImages(images) {
this.$emit('handelPreviewImages', images)
},
handleToCr(item) {
this.$emit('handleToCr', item)
}
}
}
},
};
</script>
<style lang="scss" >
<style lang="scss">
.unit-content_intro {
p {
// color: red !important;
// font-family: $defaultFontFamily !important;
// color: #333 !important;
}
p {
// color: red !important;
// font-family: $defaultFontFamily !important;
// color: #333 !important;
}
}
</style>
<style lang="scss" scoped>
.unit-container {
margin-bottom: 40px;
position: relative;
margin-bottom: 40px;
position: relative;
}
.unit-content-menu {
margin-right: 40px;
padding: 0 20px;
position: relative;
.swiper-container {
width: 90%;
.slide-item {
padding: 8px;
border-radius: 4px;
color: $themeColor;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
white-space: nowrap;
border: 1px solid $themeColor;
}
.active {
background: $themeColor;
color: #fff;
}
margin-right: 40px;
padding: 0 20px;
position: relative;
.swiper-container {
width: 90%;
.slide-item {
padding: 8px;
border-radius: 4px;
color: $deepBlue;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
white-space: nowrap;
border: 1px solid $deepBlue;
}
.active {
background: $deepBlue;
color: #fff;
}
}
}
.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);
// 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: $deepBlue;
font-weight: bolder;
font-size: 28px;
transform: translateY(-6px);
}
.unit-content {
flex: 1;
padding: 60px 40px 0;
.unit-content-container {
.unit-content-title {
font-size: 20px;
line-height: 2;
display: flex;
justify-content: center;
margin-top: 48px;
}
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
}
&:nth-child(1) {
.unit-content-title {
font-size: 24px;
font-weight: bold;
}
}
flex: 1;
padding: 60px 40px 0;
.unit-content-container {
.unit-content-title {
font-size: 20px;
line-height: 2;
display: flex;
justify-content: center;
margin-top: 48px;
}
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
}
.unit-content_images {
position: relative;
&:nth-child(1) {
.unit-content-title {
font-size: 24px;
font-weight: bold;
}
}
}
.unit-content_images_container {
height: 100%;
display: flex;
flex-direction: column;
background-color: #f5f5f9;
.unit-content_images {
position: relative;
.images_img {
flex: 1;
}
.unit-content_images_container {
height: 100%;
display: flex;
flex-direction: column;
background-color: #f5f5f9;
.desc {
display: flex;
justify-content: center;
height: 40px;
align-items: center;
}
}
}
.images_img {
flex: 1;
}
//单元文物和单元图片公共样式
.imgs-title {
margin: 16px 0;
.desc {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-family: SourceHanSerifCN-Bold;
i {
margin: 0 10px;
font-size: 18px;
}
height: 40px;
align-items: center;
}
}
}
.unit-imgs {
// height: 300px;
//单元文物和单元图片公共样式
.imgs-title {
margin: 16px 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-family: SourceHanSerifCN-Bold;
i {
margin: 0 10px;
font-size: 18px;
}
}
.unit-content_crs {
position: relative;
.unit-imgs {
// height: 300px;
}
.el-row {
.el-col {
margin-bottom: 10px;
.unit-content_crs {
position: relative;
.img-container {
background-color: #f5f5f9;
height: 250px;
.el-row {
.el-col {
margin-bottom: 10px;
.images_img {
height: 100%;
width: 100%;
position: relative;
cursor: pointer;
}
}
}
}
.img-container {
background-color: #f5f5f9;
height: 250px;
.desc {
display: flex;
justify-content: center;
padding: 10px;
align-items: center;
color: #333;
font-size: 14px;
.images_img {
height: 100%;
width: 100%;
position: relative;
cursor: pointer;
}
}
}
}
.buttons {
display: flex;
justify-content: flex-end;
.btn {
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $themeColor;
color: #666;
cursor: pointer;
&:hover {
color: $themeColor;
}
.desc {
display: flex;
justify-content: center;
padding: 10px;
align-items: center;
color: #333;
font-size: 14px;
}
}
.svg-icon {
font-size: 22px;
margin: 0 4px;
}
}
.buttons {
display: flex;
justify-content: flex-end;
.btn {
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $deepBlue;
color: #666;
cursor: pointer;
&:hover {
color: $deepBlue;
}
.svg-icon {
font-size: 22px;
margin: 0 4px;
}
}
}
}
</style>
\ No newline at end of file
</style>
src/views/display/components/templates/RedStyle.vue
浏览文件 @ 7a27ee63
......@@ -554,14 +554,14 @@ export default {
}
</style>
<style lang="scss" scoped>
$themeColor: #a30e0c;
$deepBlue: #a30e0c;
// 中国风主题样式
/**公共样式开始 */
.custom-title {
width: 50px;
background-color: $themeColor;
background-color: $deepBlue;
min-height: 300px;
color: #fff;
font-size: 28px;
......@@ -939,12 +939,12 @@ $themeColor: #a30e0c;
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $themeColor;
// border: 1px solid $deepBlue;
color: #666;
cursor: pointer;
&:hover {
color: $themeColor;
color: $deepBlue;
}
.svg-icon {
......@@ -997,7 +997,7 @@ $themeColor: #a30e0c;
}
.active {
color: $themeSecondaryColor;
color: $yellow;
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论