Skip to content

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

完善布展详情主题

上级 48cb03fc
隐藏空白字符变更
内嵌 并排
正在显示 包含 534 行增加 和 227 行删除
src/components/Footer/index.vue
浏览文件 @ daaaf691
<!-- -->
<template>
<div class="footer">
<div
:class="{
footer: true,
isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
}"
>
<span>贵州省文化和旅游厅博物馆处版权所有</span>
<span>中国知网提供技术支持</span>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "Footer",
computed: {
...mapGetters(["curPath", "navbarStyle"]),
},
curPath: {
handler: function (value) {
if (value.params.themeType) {
this.$store.commit("app/CHANGE_NAV_COLOR", value.params.themeType);
} else {
this.$store.commit("app/CHANGE_NAV_COLOR", "1");
}
},
immediate: true,
},
};
</script>
<style lang="scss" scoped>
.footer{
display: flex;
height: 200px;
padding: 0 24px;
justify-content: center;
align-items: center;
background-color: #2069C4;
color: #fff;
// position: fixed;
// bottom: 0;
// left: 0;
// right: 0;
.footer {
display: flex;
height: 200px;
padding: 0 24px;
justify-content: center;
align-items: center;
background-color: #2069c4;
color: #fff;
// position: fixed;
// bottom: 0;
// left: 0;
// right: 0;
span{
margin-right: 16px;
}
span {
margin-right: 16px;
}
}
.isChStyle {
background-color: #892325 !important;
}
.isRedStyle {
background-color: #610a03 !important;
}
</style>
src/components/NavBar/index.vue
浏览文件 @ daaaf691
<template>
<div
:class="{ nav: true, 'header-fixed ': isFixed, 'home-nav': isHome }"
:class="{
nav: true,
'header-fixed ': isFixed,
'home-nav': isHome,
isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
}"
id="navbar"
>
<div class="container">
......@@ -152,6 +158,7 @@ export default {
"curPath",
"navBarFixed",
"showLoginDialog",
"navbarStyle",
]),
hasToken() {
return this.token;
......@@ -183,6 +190,12 @@ export default {
path: "/museum",
};
}
if (value.params.themeType) {
this.$store.commit("app/CHANGE_NAV_COLOR", value.params.themeType);
}else{
this.$store.commit("app/CHANGE_NAV_COLOR", '1');
}
},
immediate: true,
},
......@@ -417,7 +430,12 @@ export default {
z-index: 99;
top: 0;
}
.isChStyle {
background-color: #892325 !important;
}
.isRedStyle {
background-color: #610a03 !important;
}
.nav {
height: 100px;
width: 100%;
......
src/components/ReaderOperations/index.vue
浏览文件 @ daaaf691
<template>
<div>
<div class="operations">
<span class="operation-item" @click="handleLike" v-if="like">
<span class="operation-item" v-if="like">
<svg-icon
@click="handleLike"
icon-class="like"
:style="{ fontSize: iconSize + 'px' }"
:class="loveCountStatus ? 'like' : ''"
></svg-icon>
<span>{{ loveCount }}</span>
<span>{{ formatNum(loveCount) }}</span>
</span>
<span class="operation-item" @click="handleCollect" v-if="collect">
<svg-icon
......@@ -15,7 +16,7 @@
:style="{ fontSize: iconSize + 'px' }"
:class="collectCountStatus ? 'collect' : ''"
></svg-icon>
<span>{{ collectCount }}</span>
<span>{{ formatNum(collectCount) }}</span>
</span>
<span v-if="share" class="operation-item" @click="handleShare">
<svg-icon
......@@ -40,14 +41,14 @@
</el-dialog>
<el-dialog
title="分享"
title="分享给朋友"
:visible.sync="shareDialogVisible"
width="40%"
:before-close="handleShareClose"
:modal="false"
append-to-body
>
<div class="qrcode">
<div>
<div class="img-container">
<img
src="@/assets/404_images/no-pic.png"
alt="二维码"
......@@ -55,14 +56,16 @@
height="100px"
/>
</div>
<div>扫描左侧二维码，跳转到对应小程序页面后分享，或复制下方链接</div>
<div>
扫描左侧二维码，跳转到对应小程序页面后分享，或
<el-button type="text" @click.native="copyUrl">
<svg-icon icon-class="copy"></svg-icon>
复制链接</el-button
>
</div>
</div>
<div class="copy">
<div class="link">{{ curLink }}</div>
<el-button type="text" @click.native="copyUrl">
<svg-icon icon-class="copy"></svg-icon>
复制链接</el-button
>
<!-- <div class="link">{{ curLink }}</div> -->
</div>
</el-dialog>
</div>
......@@ -70,7 +73,7 @@
<script>
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
import { debounce, formatNum } from "@/utils/index";
export default {
name: "ReaderOperations",
props: {
......@@ -205,6 +208,10 @@ export default {
inputElement.remove();
this.$message.success("复制成功！赶快去分享吧~");
},
formatNum(num) {
return formatNum(num);
},
},
};
</script>
......@@ -232,10 +239,25 @@ export default {
color: #2069c4;
}
}
.el-button--text {
color: #2069c4;
}
.qrcode,
.copy {
display: flex;
// justify-content: space-between;
align-items: center;
}
.qrcode {
.img-container {
width: 200px;
height: 200px;
img {
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
src/router/index.js
浏览文件 @ daaaf691
......@@ -48,7 +48,7 @@ const routes = [
},
// 布展详情页
{
path: '/display/:exhibitionId',
path: '/display/:themeType/:exhibitionId',
name: 'displayDetail',
component: () => import('@/views/display/Detail.vue'),
meta: {
......
src/store/getters.js
浏览文件 @ daaaf691
......@@ -11,6 +11,6 @@ const getters = {
curPath: state => state.app.curPath,
navBarFixed: state => state.app.navBarFixed,
showLoginDialog: state => state.app.showLoginDialog,
navbarColor: state => state.app.navbarColor
navbarStyle: state => state.app.navbarStyle
}
export default getters
src/store/modules/app.js
浏览文件 @ daaaf691
......@@ -3,7 +3,7 @@ const getDefaultState = () => {
curPath: null,
navBarFixed: false,
showLoginDialog: null,
navbarColor: 'rgba(0, 0, 0, 0.25)', //默认navbar颜色
navbarStyle: '1',//1-默认蓝色；2-中国风；3-红色
}
}
......@@ -22,8 +22,8 @@ const mutations = {
OPEN_LOGIN_DIALOG: (state, showLoginDialog) => {
state.showLoginDialog = showLoginDialog
},
CHANGE_NAV_COLOR: (state, color) => {
state.navbarColor = color
CHANGE_NAV_COLOR: (state, themeStyle) => {
state.navbarStyle = themeStyle
},
}
......
src/utils/index.js
浏览文件 @ daaaf691
......@@ -50,4 +50,36 @@ export function getFullUrl(url) {
document.body.appendChild(a);
a.click();
a.remove();
}
/**
* 增加千位分割符
* @param num
*/
export function addSeparator(num){
var res=num.toString().replace(/\d+/, function(n){ // 先提取整数部分
return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
return $1+",";
});
})
return res;
}
/**
* 增加万单位
* @param num
*/
export function formatNum(num) {
num = Number(num);
console.log(num);
if (num == 0) {
return num + '';
} else
if (num > 0 && num < 10000) {
return num + '';
} else {
return (num / 10000).toFixed(1) + 'w';
}
}
\ No newline at end of file
src/views/display/Detail.vue
浏览文件 @ daaaf691
......@@ -23,7 +23,7 @@
<script>
import BlueStyle from "./components/BlueStyle.vue";
import NormalStyle from "./components/NormalStyle.vue";
// import NormalStyle from "./components/NormalStyle.vue";
import ChStyle from "./components/ChStyle.vue";
import RedStyle from "./components/RedStyle.vue";
import { getDisplayById } from "@/api/display";
......@@ -53,7 +53,8 @@ export default {
methods: {
async loadDetail() {
let exhibitionId = this.$route.params.exhibitionId;
const { exhibitionId } = this.$route.params;
console.log(exhibitionId);
if (exhibitionId) {
let res = await getDisplayById({ exhibitionId });
if (res.code == 0) {
......
src/views/display/components/BlueStyle.vue
浏览文件 @ daaaf691
......@@ -432,13 +432,13 @@ export default {
}
}
this.$nextTick(() => {
// if (
// this.displayDetail.videosVo &&
// this.displayDetail.videosVo.length > 0
// ) {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
// this.$refs.AudioPlayer.play();
// }
if (
this.displayDetail.videosVo &&
this.displayDetail.videosVo.length > 0
) {
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
}
});
},
......@@ -742,8 +742,8 @@ export default {
animation: audioRotate 8s linear infinite;
transform-origin: center center;
// border: 1px solid #2069c4;
border-radius: 50%;
// padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
......@@ -766,7 +766,6 @@ export default {
.intro-content,
.intro-video {
flex: 1;
// padding: 40px 0;
}
.intro-content {
padding: 20px;
......
src/views/display/components/ChStyle.vue
浏览文件 @ daaaf691
......@@ -36,7 +36,13 @@
</div>
<div class="content-item intro wow animate__animated animate__fadeInUp">
<div class="wrapper">
<div class="title">{{ displayDetail.title }}</div>
<div class="title">
<div>{{ displayDetail.title }}</div>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ displayDetail.browseCount }}</span>
</div>
</div>
<div class="desc-and-tools">
<div class="desc">
<el-row>
......@@ -81,37 +87,29 @@
</div>
<div class="divider"></div>
<div class="intro-and-video">
<el-row :gutter="70">
<el-col
class="intro-container"
:span="
displayDetail.videosVo && displayDetail.videosVo.length > 0
? 12
: 24
"
>
<div class="intro-title">展览简介</div>
<div class="intro-content">
{{ displayDetail.intro }}
</div>
</el-col>
<el-col
:span="12"
v-if="
displayDetail.videosVo && displayDetail.videosVo.length > 0
"
class="videos"
<div class="intro-container">
<div class="intro-title">展览简介</div>
<div class="intro-content">
{{ displayDetail.intro }}
</div>
</div>
<div
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
class="videos"
>
<el-carousel
:interval="4000"
type="card"
indicator-position="none"
>
<el-carousel :interval="4000" type="card" height="220px">
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<Video :url="$getFullUrl(item.url)" />
</el-carousel-item>
</el-carousel>
</el-col>
</el-row>
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<Video :url="$getFullUrl(item.url)" />
</el-carousel-item>
</el-carousel>
</div>
</div>
<div
class="audio"
......@@ -119,7 +117,7 @@
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<img src="@/assets/imgs/display/ch/audio.png" alt="" />
<svg-icon icon-class="music"></svg-icon>
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
......@@ -485,6 +483,7 @@ export default {
width: 300px;
height: 100%;
position: relative;
margin-right: 1px;
img {
width: 300px;
height: 100%;
......@@ -522,7 +521,7 @@ export default {
/**展览信息 */
.intro {
margin-top: 84px;
margin-top: 55px;
display: flex;
justify-content: center;
......@@ -530,14 +529,27 @@ export default {
background: url("@/assets/imgs/display/ch/intro-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 60px;
padding: 50px;
position: relative;
border: 1px solid #d3d3d37a;
.title {
font-size: 54px;
font-size: 50px;
font-family: KaiTi;
font-weight: 400;
font-weight: bold;
color: #0f0f0f;
margin-bottom: 60px;
display: flex;
justify-content: space-between;
align-items: center;
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
.svg-icon {
margin-right: 10px;
}
}
}
.desc-and-tools {
display: flex;
......@@ -550,22 +562,29 @@ export default {
.label,
.value {
font-size: 18px;
font-weight: 300;
color: #0f0f0f;
line-height: 36px;
}
.label {
margin-left: 8px;
}
}
}
.tools {
width: 230px;
}
}
.divider {
width: 100%;
height: 2px;
border: 1px dashed #b1b0af;
margin: 60px 0;
margin: 42px 0;
}
.intro-and-video {
display: flex;
.intro-container {
flex: 1;
.intro-title {
font-size: 40px;
font-family: KaiTi;
......@@ -591,25 +610,14 @@ export default {
color: #444444;
text-indent: 32px;
line-height: 28px;
margin-left: 8px;
}
}
.videos {
flex: 1;
position: relative;
::v-deep {
.el-carousel {
height: 100%;
width: 100%;
.el-carousel__container {
height: 100%;
display: flex;
justify-content: center;
}
.el-carousel__item {
width: 100%;
transform: translateX(0) !important;
}
}
}
height: 256px;
margin-left: 70px;
}
}
......@@ -620,7 +628,7 @@ export default {
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 1px solid #892325;
// border: 1px solid #892325;
border-radius: 50%;
// padding: 10px;
width: 60px;
......@@ -628,10 +636,14 @@ export default {
display: flex;
justify-content: center;
align-items: center;
img {
width: 28px;
height: 28px;
.svg-icon {
color: #831122;
font-size: 80px;
}
// img {
// width: 28px;
// height: 28px;
// }
}
}
}
......@@ -717,4 +729,15 @@ export default {
}
}
}
::v-deep .el-carousel {
height: 100%;
}
::v-deep .el-carousel__container {
height: 100%;
}
::v-deep .el-carousel__item--card {
width: 100%;
height: 100%;
transform: translateX(0) scale(1) !important;
}
</style>
\ No newline at end of file
src/views/display/components/RedStyle.vue
浏览文件 @ daaaf691
......@@ -55,7 +55,13 @@
></el-image>
</div>
<div class="info-container-right">
<div class="info-title">{{ displayDetail.title }}</div>
<div class="info-title">
<div class="title">{{ displayDetail.title }}</div>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ displayDetail.browseCount }}</span>
</div>
</div>
<el-row>
<el-col :span="14">
<div class="basic-info">
......@@ -135,6 +141,43 @@
<div class="wrapper">
<div class="custom-title units">展览单元</div>
<div class="units-content">
<div class="left-menu">
<div
class="left-menu-item"
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
@click="handleClickUnitTitle(item)"
>
<!-- {{ item.imagesVo }} -->
<div
:class="{ 'base-img': true, active: currentUnit == item }"
:id="item.euId"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<img :src="item.imagesVo[0].pressUrl" alt="" />
</div>
<div class="text">{{ item.title }}</div>
</div>
</div>
<div class="right-content">
<el-row v-if="currentUnit && currentUnit.imagesVo.length > 0">
<el-col
:span="i == 0 ? 24 : 8"
v-for="(v, i) in currentUnit.imagesVo"
:key="i"
>
<div class="img-container">
<img :src="v.pressUrl" alt="" />
</div>
<div class="unit-name-intro" v-if="i == 0">
<div class="unit-name">{{ currentUnit.title }}</div>
<div class="unit-intro">{{ currentUnit.intro }}</div>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- <div class="units-content">
<div
class="units-content-item"
v-for="(item, index) in displayDetail.exhibitionUnits"
......@@ -175,7 +218,6 @@
></el-image>
</el-col>
</el-row>
<!-- <div class="desc-title">相关图片</div> -->
</div>
<div
class="imgs"
......@@ -200,7 +242,7 @@
}"
></div>
</div>
</div>
</div> -->
</div>
</div>
<!-- 相关文献 -->
......@@ -266,11 +308,10 @@ import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import { previewFile } from "@/utils/index";
import { debounce, previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
components: {
AudioPlayer,
......@@ -321,6 +362,7 @@ export default {
prevEl: ".swiper-button-prev",
},
},
currentUnit: null,
};
},
computed: {
......@@ -335,6 +377,10 @@ export default {
methods: {
async loadDetail() {
processUnit(this.displayDetail.exhibitionUnits);
this.currentUnit =
this.displayDetail.exhibitionUnits.length > 0
? this.displayDetail.exhibitionUnits[0]
: null;
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
......@@ -410,6 +456,10 @@ export default {
closeImgViewer() {
this.imgViewerVisible = false;
},
handleClickUnitTitle(item) {
this.currentUnit = item;
},
},
};
</script>
......@@ -452,7 +502,7 @@ export default {
/**轮播图 */
.display-detail_imgs {
.img-container {
height: calc(100vh - 100px);
height: 430px;
img {
width: 100%;
height: 100%;
......@@ -498,26 +548,6 @@ export default {
.bottom-wrapper {
display: flex;
width: 2400px;
// overflow: hidden;
// .top-list,
// .bottom-list {
// // animation: filmMoveLeft 60s ease infinite;
// width: 1200px;
// background-color: #ccc9cd;
// height: 20px;
// overflow: hidden;
// .top-item,
// .bottom-item {
// width: 10px;
// height: 10px;
// background-color: #fff;
// display: inline-block;
// &:not(&:last-child) {
// margin-right: 20px;
// }
// }
// }
}
.film-img-container {
width: 1200px;
......@@ -550,12 +580,28 @@ export default {
min-height: 200px;
padding: 40px 0 10px;
.info-title {
font-size: 32px;
font-weight: 500;
color: #8b0000;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
display: flex;
justify-content: space-between;
.title {
font-size: 32px;
font-weight: 500;
color: #8b0000;
}
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
display: flex;
align-items: center;
.svg-icon {
margin-right: 10px;
}
}
}
.basic-info {
.body-item {
......@@ -606,124 +652,260 @@ export default {
display: flex;
justify-content: center;
margin-top: 100px;
// height: 750px;
// height: calc(100vh);
background-image: url("@/assets/imgs/display/red/unit-bg.jpg");
.wrapper {
// width;
display: flex;
background-color: #fafafa;
border: 2px solid #cccccc;
border-left: none;
transition: width 0.5s ease-in-out;
&:hover {
width: 100%;
.custom-title,
.units {
display: none;
}
}
.units-content {
display: flex;
// flex-wrap: wrap;
flex: 1;
&:hover {
.units-content-item {
width: 10vw;
justify-content: flex-start;
align-items: flex-start;
padding: 50px;
.title {
writing-mode: vertical-rl;
color: #ccc;
}
}
}
.units-content-item {
width: 25%;
// height: calc(100vh - 4px);
display: flex;
.left-menu {
width: 524px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: width 0.5s ease 0.1s;
padding: 50px;
overflow-x: hidden;
&:hover {
// width: 70%;
width: 70vw;
.units-content-img {
filter: none;
background-image: url("@/assets/imgs/display/red/unit-bg.jpg") !important;
}
.title {
writing-mode: horizontal-tb;
color: #666;
font-size: 40px !important;
flex-direction: column;
.left-menu-item {
height: 54px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
padding: 0 22px;
display: flex;
align-items: center;
background: #520002;
&:hover {
.text {
color: #fff;
}
}
.intro {
padding: 60px 0;
.base-img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
// background-position: center;
// background-size: cover;
transition: all 0.3s ease;
img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.4);
transition: all 0.3s ease;
}
&:hover {
background: #520002;
img {
display: none;
}
}
}
.intro,
.imgs,
.desc-title {
display: block !important;
.active {
background: #520002;
img {
display: none;
}
}
.desc-title {
display: flex !important;
.text {
font-size: 24px;
font-weight: 400;
color: #ccc;
position: relative;
z-index: 1;
}
}
.units-content-container {
position: relative;
z-index: 1;
color: #fff;
display: flex;
flex-direction: column;
.title {
font-size: 32px;
font-family: "KaiTi";
}
.intro {
margin-top: 10px;
display: none;
font-family: "KaiTi";
color: #333;
text-indent: 32px;
font-size: 22px;
line-height: 36px;
width: calc(68vw - 40px);
margin-bottom: 10px;
}
.imgs {
display: none;
}
.right-content {
flex: 1;
.el-image {
.el-col {
&:first-child {
position: relative;
.img-container {
height: 420px;
}
.unit-name-intro {
width: 100%;
height: 300px;
height: 100%;
position: absolute;
left: 0;
top: 0;
padding: 100px 28px 50px;
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.1)
);
cursor: pointer;
transition: all 0.5s ease;
&:hover {
background: rgba(0, 0, 0, 0.8);
.unit-intro {
color: #fff;
}
}
.unit-name {
font-size: 48px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-bottom: 40px;
}
.unit-intro {
font-size: 16px;
font-weight: 400;
color: #ccc;
text-indent: 32px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
}
}
.desc-title {
display: none;
font-size: 14px;
color: #333;
display: flex;
justify-content: center;
}
}
.units-content-img {
position: absolute;
left: 0;
top: 0;
.img-container {
width: 100%;
height: 100%;
// z-index: -1;
-webkit-filter: brightness(0.3);
filter: brightness(0.3);
// transition: all 1s ease;
// height: 100%;
height: 162px;
overflow: hidden;
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
&:hover {
img {
transform: scale(1.1);
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all ease 0.5s;
}
}
}
}
/**以下为手风琴样式（暂时弃用） */
// &:hover {
// width: 100%;
// .custom-title,
// .units {
// display: none;
// }
// }
// .units-content {
// display: flex;
// // flex-wrap: wrap;
// flex: 1;
// &:hover {
// .units-content-item {
// width: 10vw;
// justify-content: flex-start;
// align-items: flex-start;
// padding: 50px;
// .title {
// writing-mode: vertical-rl;
// color: #ccc;
// }
// }
// }
// .units-content-item {
// width: 25%;
// // height: calc(100vh - 4px);
// display: flex;
// justify-content: center;
// align-items: center;
// position: relative;
// transition: width 0.5s ease 0.1s;
// padding: 50px;
// overflow-x: hidden;
// &:hover {
// // width: 70%;
// width: 70vw;
// .units-content-img {
// filter: none;
// background-image: url("@/assets/imgs/display/red/unit-bg.jpg") !important;
// }
// .title {
// writing-mode: horizontal-tb;
// color: #666;
// font-size: 40px !important;
// }
// .intro {
// padding: 60px 0;
// }
// .intro,
// .imgs,
// .desc-title {
// display: block !important;
// }
// .desc-title {
// display: flex !important;
// }
// }
// .units-content-container {
// position: relative;
// z-index: 1;
// color: #fff;
// display: flex;
// flex-direction: column;
// .title {
// font-size: 32px;
// font-family: "KaiTi";
// }
// .intro {
// margin-top: 10px;
// display: none;
// font-family: "KaiTi";
// color: #333;
// text-indent: 32px;
// font-size: 22px;
// line-height: 36px;
// width: calc(68vw - 40px);
// margin-bottom: 10px;
// }
// .imgs {
// display: none;
// .el-image {
// width: 100%;
// height: 300px;
// }
// }
// .desc-title {
// display: none;
// font-size: 14px;
// color: #333;
// display: flex;
// justify-content: center;
// }
// }
// .units-content-img {
// position: absolute;
// left: 0;
// top: 0;
// width: 100%;
// height: 100%;
// // z-index: -1;
// -webkit-filter: brightness(0.3);
// filter: brightness(0.3);
// // transition: all 1s ease;
// cursor: pointer;
// background-size: cover;
// background-repeat: no-repeat;
// }
// }
// }
}
}
......
src/views/display/index.vue
浏览文件 @ daaaf691
......@@ -192,9 +192,9 @@ export default {
handleClick(item) {
console.log(item);
const { exhibitionId } = item;
const { themeType,exhibitionId } = item;
this.$router.push({
path: "display/" + exhibitionId,
path: `display/${themeType}/${exhibitionId}`
});
},
defImg(e) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论