提交 b42f6f89 authored 作者: 龙菲's avatar 龙菲

修改navbar及布展详情

上级 dfb9e560
...@@ -25,7 +25,8 @@ ...@@ -25,7 +25,8 @@
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3", "vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vuex": "^3.6.2" "vuex": "^3.6.2",
"wowjs": "^1.1.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.16", "@babel/core": "^7.12.16",
...@@ -44,8 +45,7 @@ ...@@ -44,8 +45,7 @@
"sass": "^1.32.7", "sass": "^1.32.7",
"svg-sprite-loader": "^6.0.11", "svg-sprite-loader": "^6.0.11",
"terser-webpack-plugin": "^5.3.3", "terser-webpack-plugin": "^5.3.3",
"vue-template-compiler": "^2.6.14", "vue-template-compiler": "^2.6.14"
"wowjs": "^1.1.3"
} }
}, },
"node_modules/@achrinza/node-ipc": { "node_modules/@achrinza/node-ipc": {
...@@ -14706,7 +14706,6 @@ ...@@ -14706,7 +14706,6 @@
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmmirror.com/wowjs/-/wowjs-1.1.3.tgz", "resolved": "https://registry.npmmirror.com/wowjs/-/wowjs-1.1.3.tgz",
"integrity": "sha512-HQp1gi56wYmjOYYOMZ08TnDGpT+AO21RJVa0t1NJ3jU8l3dMyP+sY7TO/lilzVp4JFjW88bBY87RnpxdpSKofA==", "integrity": "sha512-HQp1gi56wYmjOYYOMZ08TnDGpT+AO21RJVa0t1NJ3jU8l3dMyP+sY7TO/lilzVp4JFjW88bBY87RnpxdpSKofA==",
"dev": true,
"dependencies": { "dependencies": {
"animate.css": "latest" "animate.css": "latest"
} }
...@@ -26451,7 +26450,6 @@ ...@@ -26451,7 +26450,6 @@
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmmirror.com/wowjs/-/wowjs-1.1.3.tgz", "resolved": "https://registry.npmmirror.com/wowjs/-/wowjs-1.1.3.tgz",
"integrity": "sha512-HQp1gi56wYmjOYYOMZ08TnDGpT+AO21RJVa0t1NJ3jU8l3dMyP+sY7TO/lilzVp4JFjW88bBY87RnpxdpSKofA==", "integrity": "sha512-HQp1gi56wYmjOYYOMZ08TnDGpT+AO21RJVa0t1NJ3jU8l3dMyP+sY7TO/lilzVp4JFjW88bBY87RnpxdpSKofA==",
"dev": true,
"requires": { "requires": {
"animate.css": "latest" "animate.css": "latest"
} }
...@@ -26,7 +26,8 @@ ...@@ -26,7 +26,8 @@
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3", "vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vuex": "^3.6.2" "vuex": "^3.6.2",
"wowjs": "^1.1.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.16", "@babel/core": "^7.12.16",
...@@ -45,8 +46,7 @@ ...@@ -45,8 +46,7 @@
"sass": "^1.32.7", "sass": "^1.32.7",
"svg-sprite-loader": "^6.0.11", "svg-sprite-loader": "^6.0.11",
"terser-webpack-plugin": "^5.3.3", "terser-webpack-plugin": "^5.3.3",
"vue-template-compiler": "^2.6.14", "vue-template-compiler": "^2.6.14"
"wowjs": "^1.1.3"
}, },
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,
......
...@@ -29,8 +29,8 @@ export default { ...@@ -29,8 +29,8 @@ export default {
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
let wow = this.$wow; let wow = this.$wow
wow.init(); wow.init()
}); });
}, },
}; };
......
<template> <template>
<div class="nav"> <div class="nav">
<div class="container"> <div class="container">
<div class="logo-container wow animate__animated animate__fadeInLeft"> <div class="logo-container wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/home/logo.png" /> <img src="@/assets/imgs/home/logo.png" />
</div> </div>
<div class="right "> <div class="right">
<div class="tabs wow animate__animated animate__fadeInUp"> <div class="tabs wow animate__animated animate__fadeInUp">
<div <div
class="tab-item" class="tab-item"
...@@ -85,7 +85,7 @@ import { mapGetters } from "vuex"; ...@@ -85,7 +85,7 @@ import { mapGetters } from "vuex";
export default { export default {
name: "NavBar", name: "NavBar",
computed: { computed: {
...mapGetters(["token", "userInfo"]), ...mapGetters(["token", "userInfo", "curPath"]),
hasToken() { hasToken() {
return this.token; return this.token;
}, },
...@@ -126,7 +126,36 @@ export default { ...@@ -126,7 +126,36 @@ export default {
}, },
}; };
}, },
watch: {
curPath: {
handler: function (value) {
this.currentTab = {
name: value.name,
path: value.path,
};
if (value.name.indexOf("display") != -1) {
this.currentTab = {
name: "展览",
path: "/display",
};
}
if (value.name.indexOf("culturalRelic") != -1) {
this.currentTab = {
name: "文物展",
path: "/culturalRelic",
};
}
if (value.name.indexOf("museum") != -1) {
this.currentTab = {
name: "博物馆",
path: "/museum",
};
}
},
immediate: true,
},
},
methods: { methods: {
handleToLogin() { handleToLogin() {
this.$router.push("/login?redirect=" + this.$route.fullPath); this.$router.push("/login?redirect=" + this.$route.fullPath);
......
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
:visible.sync="loginDialogVisible" :visible.sync="loginDialogVisible"
width="30%" width="30%"
:before-close="handleLoginClose" :before-close="handleLoginClose"
:modal="false"
> >
<span>读者功能需登录进行使用,是否去登录?</span> <span>读者功能需登录进行使用,是否去登录?</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -37,6 +38,7 @@ ...@@ -37,6 +38,7 @@
:visible.sync="shareDialogVisible" :visible.sync="shareDialogVisible"
width="40%" width="40%"
:before-close="handleShareClose" :before-close="handleShareClose"
:modal="false"
> >
<div class="qrcode"> <div class="qrcode">
<div> <div>
...@@ -191,7 +193,7 @@ export default { ...@@ -191,7 +193,7 @@ export default {
inputElement.select(); inputElement.select();
document.execCommand("Copy"); document.execCommand("Copy");
inputElement.remove(); inputElement.remove();
this.$message.success('复制成功!赶快去分享吧~') this.$message.success("复制成功!赶快去分享吧~");
}, },
}, },
}; };
...@@ -220,9 +222,10 @@ export default { ...@@ -220,9 +222,10 @@ export default {
color: #2069c4; color: #2069c4;
} }
} }
.qrcode,.copy { .qrcode,
.copy {
display: flex; display: flex;
// justify-content: space-between; // justify-content: space-between;
align-items: center; align-items: center;
} }
</style> </style>
\ No newline at end of file
...@@ -17,6 +17,7 @@ import { ...@@ -17,6 +17,7 @@ import {
import { import {
getFullUrl getFullUrl
} from '@/utils/index' } from '@/utils/index'
import './permission'
// import '@/rem' // import '@/rem'
Vue.config.productionTip = false Vue.config.productionTip = false
......
import router from './router' import router from './router'
import { import store from './store/index'
getToken
} from '@/utils/auth' // get token from cookie
router.beforeEach((to, from, next) => {
router.beforeEach(async (to, from, next) => { // 监听path 确定navbar下标
console.log(from,to); store.commit('app/SET_NAV_BAR', to)
const hasToken = getToken() next()
if (!hasToken) {
if (to.path === '/personal') {
next({
path: '/'
})
} else {
next()
}
} else {
next()
}
}) })
...@@ -4,6 +4,7 @@ const getters = { ...@@ -4,6 +4,7 @@ const getters = {
avatar: state => state.user.avatar, avatar: state => state.user.avatar,
name: state => state.user.name, name: state => state.user.name,
dicts: state => state.dict.dicts, dicts: state => state.dict.dicts,
museumTree: state => state.org.museumTree museumTree: state => state.org.museumTree,
curPath: state => state.app.curPath
} }
export default getters export default getters
...@@ -4,6 +4,7 @@ import getters from './getters' ...@@ -4,6 +4,7 @@ import getters from './getters'
import user from './modules/user' import user from './modules/user'
import dict from './modules/dict' import dict from './modules/dict'
import org from './modules/org' import org from './modules/org'
import app from './modules/app'
Vue.use(Vuex) Vue.use(Vuex)
...@@ -11,7 +12,8 @@ const store = new Vuex.Store({ ...@@ -11,7 +12,8 @@ const store = new Vuex.Store({
modules: { modules: {
user, user,
dict, dict,
org org,
app
}, },
getters getters
}) })
......
// import {
// getToken,
// } from '@/utils/auth'
const getDefaultState = () => {
return {
curPath:null,
}
}
const state = getDefaultState()
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_NAV_BAR: (state, path) => {
state.curPath = path
},
}
const actions = {
}
export default {
namespaced: true,
state,
mutations,
actions
}
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
> >
<div <div
class="container wow animate__animated animate__fadeInUp" class="container wow animate__animated animate__fadeInUp"
v-if="$getFullUrl(item.faceImagePressUrl)" v-if="$getFullUrl(item.faceImagePressUrl) ||$getFullUrl(item.faceImageUrl)"
> >
<div class="img"> <div class="img">
<img <img
...@@ -79,6 +79,13 @@ ...@@ -79,6 +79,13 @@
class="img" class="img"
lazy lazy
/> />
<img
v-else-if="$getFullUrl(item.faceImageUrl)"
:src="$getFullUrl(item.faceImageUrl)"
width="100%"
height="100%"
class="img"
/>
<img <img
v-else v-else
src="@/assets/404_images/no-pic.png" src="@/assets/404_images/no-pic.png"
...@@ -100,6 +107,7 @@ ...@@ -100,6 +107,7 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-empty description="暂无数据" v-if="list.records.length==0"></el-empty>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
...@@ -117,10 +125,6 @@ ...@@ -117,10 +125,6 @@
</el-row> </el-row>
</div> </div>
</div> </div>
<!-- <el-dialog :visible="show3dDialog">
</el-dialog> -->
<!-- <Footer /> -->
</div> </div>
</template> </template>
......
差异被折叠。
...@@ -2,7 +2,11 @@ ...@@ -2,7 +2,11 @@
<div class="display-detail"> <div class="display-detail">
<div class="empty-space"></div> <div class="empty-space"></div>
<div class="content" id="content"> <div class="content" id="content">
<div class="content-item sliders" ref="imgs"> <div
class="content-item sliders"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<div class="view-box"> <div class="view-box">
<div <div
class="slide-group" class="slide-group"
...@@ -79,7 +83,14 @@ ...@@ -79,7 +83,14 @@
<div class="divider"></div> <div class="divider"></div>
<div class="intro-and-video"> <div class="intro-and-video">
<el-row :gutter="70"> <el-row :gutter="70">
<el-col class="intro-container" :span="12"> <el-col
class="intro-container"
:span="
displayDetail.videosVo && displayDetail.videosVo.length > 0
? 12
: 24
"
>
<div class="intro-title">展览简介</div> <div class="intro-title">展览简介</div>
<div class="intro-content"> <div class="intro-content">
{{ displayDetail.intro }} {{ displayDetail.intro }}
...@@ -103,13 +114,16 @@ ...@@ -103,13 +114,16 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="audio wow animate__animated animate__fadeRight" @click="handleClickAudio" > <div
class="audio wow animate__animated animate__fadeRight"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<img src="@/assets/imgs/display/audio.png" alt="" /> <img src="@/assets/imgs/display/audio.png" alt="" />
<AudioPlayer <AudioPlayer
style="display: none" style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)" :url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer" ref="AudioPlayer"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
/> />
</div> </div>
</div> </div>
...@@ -300,19 +314,30 @@ export default { ...@@ -300,19 +314,30 @@ export default {
} }
this.$nextTick(() => { this.$nextTick(() => {
this.loadWidth(); this.loadWidth();
this.$message.info("正在播放当前文物讲解音频,点击按钮可关闭");
this.$refs.AudioPlayer.play(); if (
this.displayDetail.videosVo &&
this.displayDetail.videosVo.length > 0
) {
this.$message.info("正在播放当前文物讲解音频,点击按钮可关闭");
this.$refs.AudioPlayer.play();
}
}); });
} }
} }
}, },
loadWidth() { loadWidth() {
let slideImage = document.getElementsByClassName("slide-item")[0]; if (
this.slideImageWidth = slideImage.offsetWidth; this.displayDetail.imagesVo &&
this.sildeGroupWidth = this.displayDetail.imagesVo.length > 0
this.slideImageWidth * this.displayDetail.imagesVo.length; ) {
this.slideGroupleft = -3 * this.slideImageWidth; let slideImage = document.getElementsByClassName("slide-item")[0];
this.slideImageWidth = slideImage.offsetWidth;
this.sildeGroupWidth =
this.slideImageWidth * this.displayDetail.imagesVo.length;
this.slideGroupleft = -3 * this.slideImageWidth;
}
}, },
handleImgsSlide(e) { handleImgsSlide(e) {
...@@ -462,6 +487,7 @@ export default { ...@@ -462,6 +487,7 @@ export default {
overflow-x: hidden; overflow-x: hidden;
.content { .content {
width: 100%; width: 100%;
overflow-y: hidden;
.content-item { .content-item {
width: 100%; width: 100%;
} }
...@@ -469,7 +495,8 @@ export default { ...@@ -469,7 +495,8 @@ export default {
/**轮播图 */ /**轮播图 */
.sliders { .sliders {
height: 434px; height: 434px;
margin: 52px 0 84px 0; // margin: 52px 0 84px 0;
margin-top: 52px;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative; position: relative;
...@@ -508,12 +535,13 @@ export default { ...@@ -508,12 +535,13 @@ export default {
width: 1200px; width: 1200px;
transform: translateY(-25px); transform: translateY(-25px);
position: relative; position: relative;
filter:drop-shadow(2px 4px 6px #f8f8f8); filter: drop-shadow(2px 4px 6px #f8f8f8);
img { img {
transform: translateX(-10px); transform: translateX(-10px);
} }
} }
.left-layer,.right-layer { .left-layer,
.right-layer {
flex: 1; flex: 1;
height: 100%; height: 100%;
background-color: rgba(#f8f8f8, 0.8); background-color: rgba(#f8f8f8, 0.8);
...@@ -523,7 +551,7 @@ export default { ...@@ -523,7 +551,7 @@ export default {
/**展览信息 */ /**展览信息 */
.intro { .intro {
margin-bottom: 96px; margin-top: 84px;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -623,11 +651,15 @@ export default { ...@@ -623,11 +651,15 @@ export default {
border: 1px solid #892325; border: 1px solid #892325;
border-radius: 50%; border-radius: 50%;
// padding: 10px; // padding: 10px;
width: 90px; width: 60px;
height: 90px; height: 60px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img {
width: 28px;
height: 28px;
}
} }
} }
} }
...@@ -657,7 +689,7 @@ export default { ...@@ -657,7 +689,7 @@ export default {
/**展览单元 */ /**展览单元 */
.units { .units {
margin-bottom: 100px; margin-top: 94px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -701,6 +733,7 @@ export default { ...@@ -701,6 +733,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 100px;
.lts-content { .lts-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
......
差异被折叠。
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
filterable filterable
@change="handleRegionChange" @change="handleRegionChange"
clearable clearable
ref="region"
> >
</el-cascader> </el-cascader>
...@@ -89,6 +90,7 @@ ...@@ -89,6 +90,7 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-empty description="暂无数据" v-if="list.records.length==0"></el-empty>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
...@@ -106,10 +108,6 @@ ...@@ -106,10 +108,6 @@
</el-row> </el-row>
</div> </div>
</div> </div>
<!-- <el-dialog :visible="show3dDialog">
</el-dialog> -->
<!-- <Footer /> -->
</div> </div>
</template> </template>
...@@ -216,9 +214,8 @@ export default { ...@@ -216,9 +214,8 @@ export default {
}, },
handleRegionChange(value) { handleRegionChange(value) {
console.log(value);
console.log(value[value.length - 1]);
this.regionCode = value; this.regionCode = value;
// this.$refs.region
this.loadData(); this.loadData();
}, },
......
...@@ -89,10 +89,6 @@ ...@@ -89,10 +89,6 @@
</el-row> </el-row>
</div> </div>
</div> </div>
<!-- <el-dialog :visible="show3dDialog">
</el-dialog> -->
<!-- <Footer /> -->
</div> </div>
</template> </template>
......
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
title="修改个人信息" title="修改个人信息"
:visible.sync="dialogFormVisible" :visible.sync="dialogFormVisible"
width="400px" width="400px"
:modal="false"
> >
<el-form <el-form
:model="infoData" :model="infoData"
......
...@@ -89,10 +89,6 @@ ...@@ -89,10 +89,6 @@
</el-row> </el-row>
</div> </div>
</div> </div>
<!-- <el-dialog :visible="show3dDialog">
</el-dialog> -->
<!-- <Footer /> -->
</div> </div>
</template> </template>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论