Skip to content

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

完善布展详情主题

上级 48cb03fc
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 231 行增加 和 106 行删除
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/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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论