Skip to content

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

完善布展详情主题

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