Skip to content

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

修改navbar及布展详情

上级 dfb9e560
隐藏空白字符变更
内嵌 并排
正在显示 包含 869 行增加 和 638 行删除
package-lock.json
浏览文件 @ b42f6f89
...@@ -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"
} }
package.json
浏览文件 @ b42f6f89
...@@ -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,
......
src/App.vue
浏览文件 @ b42f6f89
...@@ -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()
}); });
}, },
}; };
......
src/components/NavBar/index.vue
浏览文件 @ b42f6f89
<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);
......
src/components/ReaderOperations/index.vue
浏览文件 @ b42f6f89
...@@ -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
src/main.js
浏览文件 @ b42f6f89
...@@ -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
......
src/permission.js
浏览文件 @ b42f6f89
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()
}
}) })
src/store/getters.js
浏览文件 @ b42f6f89
...@@ -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
src/store/index.js
浏览文件 @ b42f6f89
...@@ -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
}) })
......
src/store/modules/app.js 0 → 100644
浏览文件 @ b42f6f89
// 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
}
src/views/culturalRelic/index.vue
浏览文件 @ b42f6f89
...@@ -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>
......
src/views/display/Detail-old.vue deleted 100644 → 0
浏览文件 @ dfb9e560
<!-- -->
<template>
<div class="display-detail">
<div class="empty-space"></div>
<div class="wrapper">
<div class="back">
<el-button
type="text"
icon="el-icon-arrow-left"
@click.native="handleBack"
>返回上页</el-button
>
</div>
<el-row class="detail-container" :gutter="30">
<el-col class="cr-images" :span="16">
<el-carousel
indicator-position="outside"
:autoplay="false"
height="600px"
>
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<el-image
style="width: 100%; height: 100%"
:src="$getFullUrl(item.url)"
fit="contain"
></el-image>
</el-carousel-item>
</el-carousel>
<div class="enlarge" @click="handelPreviewImages">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-col>
<el-col class="relic-info" :span="8">
<div class="info-title">
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<h4>
{{ displayDetail.title }}
</h4>
<span class="view-container">
<svg-icon icon-class="view" class="view-svg-icon"></svg-icon>
<span class="view-text">{{ displayDetail.browseCount }}</span>
</span>
</div>
<AudioPlayer
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
/>
</div>
<div class="info-body">
<div class="basic-info">
<!-- <div class="body-item">
<span class="label">年份</span>
<span class="value">{{ displayDetail.yearsLabel }}</span>
</div>
<div class="body-item">
<span class="label">类别</span>
<span class="value">
{{ displayDetail.typeLabel }}
</span>
</div>-->
<div class="body-item">
<span class="label">开始日期</span>
<span class="value">{{ displayDetail.startDate }}</span>
</div>
<div class="body-item">
<span class="label">结束日期</span>
<span class="value">{{ displayDetail.endDate }}</span>
</div>
<div class="body-item">
<span class="label">关键词</span>
<span class="value">{{ displayDetail.keyword }}</span>
</div>
<div class="body-item">
<span class="label">展览单位</span>
<span class="value">{{ displayDetail.deptName }}</span>
</div>
</div>
</div>
<!-- <div class="qrcode" ref="qrCodeUrl"></div> -->
<!-- </div> -->
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount"
:collectCountStatus="Boolean(displayDetail.collectCountStatus)"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="loadDetail"
/>
</el-col>
</el-row>
<div class="margin-bottom-32">
<CustomTitle text="展览介绍" />
<div class="intro text-indent">
{{ displayDetail.intro }}
</div>
</div>
<div
class="margin-bottom-32"
v-if="
displayDetail.exhibitionUnits &&
displayDetail.exhibitionUnits.length > 0
"
>
<CustomTitle text="展览单元" />
<el-row :gutter="20">
<el-col :span="8">
<!-- 只能单开 unique-opened -->
<menu-list
:items="displayDetail.exhibitionUnits"
:isCollapse="false"
@open="handleOpenUnit"
></menu-list>
</el-col>
<el-col :span="16">
<el-card>
<div slot="header" class="clearfix">
<span>单元介绍</span>
</div>
<div class="unit-content">
<div class="intro text-indent" v-if="curUnit.intro">
{{ curUnit.intro }}
</div>
<div
class="images"
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
>
<el-row :gutter="20">
<el-col
:span="24 / curUnit.imagesVo.length"
v-for="item in curUnit.imagesVo"
:key="item.euId"
class="margin-bottom-32"
>
<img :src="$getFullUrl(item.url)" alt="" srcset="" width="100%" />
<div class="desc flex-center">
{{ item.name }}
</div>
</el-col>
</el-row>
</div>
<div
class="videos"
v-if="curUnit.videosVo && curUnit.videosVo.length > 0"
>
<el-row :gutter="20">
<el-col
:span="24 / curUnit.videosVo.length"
v-for="item in curUnit.videosVo"
:key="item.euId"
>
<Video :url="$getFullUrl(item.url)" />
</el-col>
</el-row>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
<div
class="margin-bottom-32"
v-if="
displayDetail.culturalRelicVo &&
displayDetail.culturalRelicVo.length > 0
"
>
<CustomTitle text="关联文物" />
<el-row :gutter="20">
<el-col
:span="6"
v-for="(item, index) in displayDetail.culturalRelicVo"
:key="index"
>
<Card :title="item.name" :url="$getFullUrl(item.faceImageUrl)"
/></el-col>
</el-row>
</div>
<div
class="relate-video margin-bottom-32"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<CustomTitle text="关联视频" />
<el-carousel :interval="4000" type="card" height="400px">
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<div class="video-container">
<div class="video-box">
<Video :url="$getFullUrl(item.url)" />
</div>
<div class="info-box">
<h4 class="name">{{ item.name.split(".")[0] }}</h4>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="relate-book margin-bottom-32">
<CustomTitle text="相关文献" />
<div
class="book-item"
v-for="(item, index) in displayDetail.literatureVo"
:key="index"
>
<span class="mr-20">{{ item.name }}</span>
<span class="mr-20">{{ item.author }}</span>
<span>{{ item.source }}</span>
</div>
</div>
<!-- <div class="relate-cultual-relic margin-bottom-32">
<CustomTitle text="关联文物" />
<div class="display-group">
<div
class="display-item"
v-for="(item, index) in relateRelics"
:key="index"
@click="handleToDetail(item.exhibitionId)"
>
<img :src="item.faceImageUrl" width="100%" :alt="item.title" />
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.name }}</h4>
</div>
</div>
</div>
</div>
</div> -->
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
import AudioPlayer from "@/components/AudioPlayer";
import CustomTitle from "@/components/CustomTitle";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import QRCode from "qrcodejs2";
import { getDisplayById } from "@/api/display";
import MenuList from "@/components/MenuList";
export default {
components: {
SearchBar,
CustomTitle,
AudioPlayer,
ReaderOperations,
MenuList,
Video,
Card,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
displayDetail: {},
slideImageWidth: "",
imgViewerVisible: false,
relateRelics: [],
curUnit: [],
};
},
mounted() {
// this.creatQrCode();
this.loadDetail();
},
methods: {
creatQrCode() {
this.$nextTick(() => {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: "http://www.gzmuseum.com/", // 需要转换为二维码的内容
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
});
},
async loadDetail() {
let exhibitionId = this.$route.params.exhibitionId;
if (exhibitionId) {
let res = await getDisplayById({ exhibitionId });
if (res.code == 0) {
this.displayDetail = res.data;
// debugger
// 处理单元数据
if (
this.displayDetail.exhibitionUnits &&
this.displayDetail.exhibitionUnits.length > 0
) {
this.curUnit = this.displayDetail.exhibitionUnits[0];
}
processUnit(this.displayDetail.exhibitionUnits);
// console.log(unit);
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
if (o.children.length == 0) {
o.children = null;
} else {
processUnit(o.children);
}
}
}
}
// 获取关联文物
// this.loadCrRecommend();
this.$nextTick(() => {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
// this.$refs.AudioPlayer.play();
});
}
}
},
handleBack() {
this.$router.go(-1);
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handelPreviewImages() {
this.imgViewerVisible = true;
this.imgList = this.displayDetail.imagesVo.map((item) => this.$getFullUrl(item.url));
},
handleToDetail(exhibitionId) {
console.log(crId);
this.$router.replace({ name: "displayDetail", params: { exhibitionId } });
},
handleOpenUnit(item) {
this.curUnit = item;
},
},
};
</script>
<style lang="scss" scoped>
.mr-20 {
margin-right: 20px;
}
$label: #9f9c9a;
.search {
width: 1200px;
margin: auto;
margin-bottom: 32px;
}
.wrapper {
width: 1200px;
margin: 60px auto;
background-color: #fff;
padding: 60px;
.back {
font-size: 18px;
font-weight: bold;
margin-bottom: 40px;
.el-button {
color: $label;
}
}
.detail-container {
margin-bottom: 32px;
// display: flex;
img {
max-width: 100%;
height: auto;
}
.cr-images {
width: 700px;
// margin-right: 32px;
position: relative;
.el-image {
background-color: #f5f5f9;
}
.enlarge {
position: absolute;
bottom: 60px;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
}
.relic-info {
.info-title {
display: flex;
// align-items: center;
flex-direction: column;
margin-bottom: 40px;
.play {
margin-left: 10px;
font-size: 32px;
cursor: pointer;
}
}
.info-body {
display: flex;
justify-content: space-between;
align-items: flex-end;
.basic-info {
.body-item {
display: flex;
.label {
display: block;
width: 80px;
margin-right: 26px;
margin-bottom: 10px;
font-weight: bold;
color: #9f9c9a;
}
}
}
}
.view-3d {
margin-top: 32px;
padding: 6px 10px;
width: 100%;
background-color: #c1925b;
border-radius: 48px;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
img {
margin-right: 10px;
}
}
}
.title-container {
display: flex;
justify-content: center;
position: relative;
.operation {
position: absolute;
right: 0;
display: flex;
align-items: center;
height: 100%;
}
}
.content {
text-indent: 32px;
}
}
.relate-book {
.book-item {
margin-bottom: 10px;
}
}
.relate-cultual-relic {
.display-group {
margin-top: 24px;
display: flex;
flex-flow: row wrap;
.display-item {
width: 282px;
margin-bottom: 32px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
// padding: 0 0 32px 0;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
img {
border-radius: 16px 16px 0 0;
}
.display-desc {
padding: 0 16px;
.desc-content {
text-indent: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
}
.display-source {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
}
}
}
.relate-video {
.video-container {
display: flex;
flex-direction: column;
align-items: center;
.video-box {
display: flex;
justify-content: center;
border: 1px solid #000;
video {
width: 800px;
}
}
.info-box {
width: 800px;
display: flex;
justify-content: space-between;
}
}
}
}
.text-indent {
text-indent: 28px;
}
.margin-bottom-32 {
margin-bottom: 32px;
}
</style>
src/views/display/Detail.vue
浏览文件 @ b42f6f89
...@@ -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;
......
src/views/display/detail/ChStyle.vue 0 → 100644
浏览文件 @ b42f6f89
<template>
<div class="display-detail">
<div class="empty-space"></div>
<div class="content" id="content">
<div class="content-item sliders" ref="imgs">
<div class="view-box">
<div
class="slide-group"
:style="{
width: sildeGroupWidth,
left: slideGroupleft + 'px',
}"
>
<div
class="slide-item"
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<img :src="$getFullUrl(item.url)" alt="" />
<div class="modal"></div>
</div>
</div>
</div>
<div class="modal-layer">
<div class="left-layer"></div>
<div class="center-img" @mousewheel="handleImgsSlide">
<!-- <div class="border-box"></div> -->
<img src="@/assets/imgs/display/slider-box.png" alt="" />
</div>
<div class="right-layer"></div>
</div>
</div>
<div class="content-item intro wow animate__animated animate__fadeInUp">
<div class="wrapper">
<div class="title">{{ displayDetail.title }}</div>
<div class="desc-and-tools">
<div class="desc">
<el-row>
<el-col class="item">
<div class="label">关键词：</div>
<div class="value">{{ displayDetail.keyword }}</div>
</el-col>
<el-col class="item" v-if="dicts.display_type">
<div class="label">展览类型：</div>
<div class="value">
{{ dicts.display_type[displayDetail.type] }}
</div>
</el-col>
</el-row>
<el-row>
<el-col class="item" v-if="dicts.display_character">
<div class="label">展览性质：</div>
<div class="value">
{{
dicts.display_character[displayDetail.displayCharacter]
}}
</div>
</el-col>
<el-col class="item">
<div class="label">展览单位：</div>
<div class="value">{{ displayDetail.deptName }}</div>
</el-col>
</el-row>
</div>
<div class="tools">
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount"
:collectCountStatus="Boolean(displayDetail.collectCountStatus)"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="loadDetail"
/>
</div>
</div>
<div class="divider"></div>
<div class="intro-and-video">
<el-row :gutter="70">
<el-col class="intro-container" :span="12">
<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"
>
<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>
</div>
<div class="audio wow animate__animated animate__fadeRight" @click="handleClickAudio" >
<img src="@/assets/imgs/display/audio.png" alt="" />
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
/>
</div>
</div>
</div>
<div class="content-item units">
<div class="wrapper">
<div class="custom-title">
<div class="custom-title-prefix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
</div>
<div class="custom-title-text">展览单元</div>
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
</div>
</div>
<div class="units-content">
<ul>
<li
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
>
<div class="unit-title">{{ item.title }}</div>
<div class="unit-intro">{{ item.intro }}</div>
<div
class="unit-imgs"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<div
class="img-item"
v-for="(i, idx) in item.imagesVo"
:key="idx"
>
<img :src="$getFullUrl(i.url)" alt="" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="content-item lts wow animate__animated animate__fadeInUp">
<div class="wrapper">
<div class="custom-title">
<div class="custom-title-prefix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
</div>
<div class="custom-title-text">关联文献</div>
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
</div>
</div>
</div>
<div
class="lts-content"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<div class="wrapper">
<el-table
:data="displayDetail.literatureVo"
:header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<el-table-column
prop="name"
label="名称"
align="center"
></el-table-column>
<el-table-column
prop="authors"
label="作者"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="出版时间"
align="center"
></el-table-column>
<el-table-column
align="center"
prop="source"
label="出版所在刊物"
></el-table-column>
<el-table-column label="阅读" align="center">
<template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
<!-- <div class="title">
</div>
<div class="lts-item"></div> -->
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import QRCode from "qrcodejs2";
import { getDisplayById } from "@/api/display";
import MenuList from "@/components/MenuList";
import { mapGetters } from "vuex";
import { previewFile } from "@/utils/index";
export default {
components: {
AudioPlayer,
ReaderOperations,
MenuList,
Video,
Card,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
displayDetail: {},
slideImageWidth: 0, //单个图片的宽度
sildeGroupWidth: 0, //整个轮播的宽度
slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
imgViewerVisible: false,
relateRelics: [],
curUnit: [],
imgsDom: null,
moveLeft: true,
moveRight: true,
audioPlaying: true,
};
},
computed: {
...mapGetters(["dicts"]),
},
async mounted() {
await this.$store.dispatch("dict/getDictList", [
"display_type",
"display_character",
]);
this.loadDetail();
},
methods: {
async loadDetail() {
let exhibitionId = this.$route.params.exhibitionId;
if (exhibitionId) {
let res = await getDisplayById({ exhibitionId });
if (res.code == 0) {
this.displayDetail = res.data;
if (
this.displayDetail.exhibitionUnits &&
this.displayDetail.exhibitionUnits.length > 0
) {
this.curUnit = this.displayDetail.exhibitionUnits[0];
}
processUnit(this.displayDetail.exhibitionUnits);
function processUnit(list) {
for (let o of list || []) {
if (o.children) {
if (o.children.length == 0) {
o.children = null;
} else {
processUnit(o.children);
}
}
}
}
this.$nextTick(() => {
this.loadWidth();
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
});
}
}
},
loadWidth() {
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) {
this.addImgsEventListener(e);
this.throttle(this.pageUpOrDown, 500)(e);
},
addImgsEventListener(e) {
let firefoxListenFun = function (e) {
var obj = e.target;
var onmousewheel;
while (obj) {
onmousewheel = obj.getAttribute("onmousewheel") || obj.onmousewheel;
if (onmousewheel) break;
if (obj.tagName == "BODY") break;
obj = obj.parentNode;
}
if (onmousewheel) {
if (e.preventDefault) e.preventDefault(); //禁止页面滚动
if (typeof obj.onmousewheel != "function") {
//将onmousewheel转换成function
eval("window._tmpFun = function(event){" + onmousewheel + "}");
obj.onmousewheel = window._tmpFun;
window._tmpFun = null;
}
// 不直接执行是因为若onmousewheel(e)运行时间较长的话，会导致锁定滚动失效，使用setTimeout可避免
setTimeout(function () {
obj.onmousewheel(e);
}, 1);
}
};
e = e || window.event;
if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
// IE
e.returnValue = false;
} else {
// Chrome
e.preventDefault();
}
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
addEventListener("DOMMouseScroll", firefoxListenFun, false);
}
},
pageUpOrDown(e) {
let detail = e.wheelDelta || e.detail || e.wheelDeltaY;
let direction = detail > 0 ? "left" : "right";
if (direction == "left" && this.moveLeft) {
this.slideGroupleft += this.slideImageWidth;
this.moveRight = true;
}
if (direction == "right" && this.moveRight) {
this.slideGroupleft += this.slideImageWidth * -1;
this.moveLeft = true;
}
if (this.slideGroupleft == 0) {
this.moveLeft = false;
this.moveRight = true;
}
if (
this.slideGroupleft ==
4 * this.slideImageWidth - this.sildeGroupWidth
) {
this.moveRight = false;
this.moveLeft = true;
}
},
//节流函数
throttle(fn, gapTime) {
let _this = this;
return function () {
let _nowTime = +new Date();
if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
fn(...arguments); // 函数可以带参数
_this._lastTime = _nowTime;
}
};
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
};
}
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
// 点击音频
handleClickAudio() {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
} else {
this.$refs["AudioPlayer"].pause();
}
},
},
};
</script>
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
.wrapper {
width: 1200px;
}
.custom-title {
display: flex;
align-items: center;
.custom-title-prefix,
.custom-title-suffix {
width: 27px;
height: 27px;
margin: 15px;
img {
width: 100%;
height: 100%;
}
}
.custom-title-text {
font-size: 40px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
line-height: 114px;
}
}
/**公共样式结束 */
/**样式开始 */
.display-detail {
overflow-x: hidden;
.content {
width: 100%;
.content-item {
width: 100%;
}
/**轮播图 */
.sliders {
height: 434px;
margin: 52px 0 84px 0;
display: flex;
justify-content: center;
position: relative;
.view-box {
position: relative;
width: 1200px;
.slide-group {
display: flex;
position: absolute;
height: 100%;
transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
/**保证能够最开始刚好有四格卡在中间*/
// transform: translateX(-900px);
.slide-item {
width: 300px;
height: 100%;
position: relative;
img {
width: 300px;
height: 100%;
object-fit: cover;
// filter: grayscale(14);
}
}
}
}
.modal-layer {
position: absolute;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
.center-img {
width: 1200px;
transform: translateY(-25px);
position: relative;
filter:drop-shadow(2px 4px 6px #f8f8f8);
img {
transform: translateX(-10px);
}
}
.left-layer,.right-layer {
flex: 1;
height: 100%;
background-color: rgba(#f8f8f8, 0.8);
}
}
}
/**展览信息 */
.intro {
margin-bottom: 96px;
display: flex;
justify-content: center;
.wrapper {
background: url("@/assets/imgs/display/intro-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 60px;
position: relative;
.title {
font-size: 62px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 60px;
}
.desc-and-tools {
display: flex;
justify-content: space-between;
.desc {
display: flex;
.item {
display: flex;
.label,
.value {
font-size: 18px;
font-weight: 300;
color: #0f0f0f;
line-height: 36px;
}
}
}
}
.divider {
width: 100%;
height: 2px;
border: 1px dashed #b1b0af;
margin: 60px 0;
}
.intro-and-video {
.intro-container {
.intro-title {
font-size: 40px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 43px;
position: relative;
&::after {
content: "";
display: inline-block;
width: 60px;
height: 2px;
background-color: #caad91;
position: absolute;
left: 0;
bottom: -12px;
}
}
.intro-content {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #444444;
text-indent: 32px;
line-height: 28px;
}
}
.videos {
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;
}
}
}
}
}
.audio {
position: absolute;
right: -100px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 1px solid #892325;
border-radius: 50%;
// padding: 10px;
width: 90px;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
/**展览单元 */
.units {
margin-bottom: 100px;
display: flex;
flex-direction: column;
align-items: center;
.units-content {
ul {
li {
margin-bottom: 20px;
.unit-title {
font-size: 36px;
font-family: KaiTi;
font-weight: 400;
color: #4e392c;
line-height: 83px;
display: flex;
justify-content: center;
}
.unit-intro {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #444444;
text-indent: 36px;
margin-bottom: 10px;
}
.unit-imgs {
width: 100%;
.img-item {
width: 100%;
img {
width: 100%;
}
}
}
}
}
}
}
/**关联文献 */
.lts {
// background-color: aquamarine;
display: flex;
flex-direction: column;
align-items: center;
.lts-content {
display: flex;
justify-content: center;
width: 100%;
height: 569px;
background-image: url("@/assets/imgs/display/lts-bg.png");
}
}
}
}
</style>
\ No newline at end of file
src/views/display/index.vue
浏览文件 @ b42f6f89
...@@ -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();
}, },
......
src/views/museum/index.vue
浏览文件 @ b42f6f89
...@@ -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>
......
src/views/personal/components/Info.vue
浏览文件 @ b42f6f89
...@@ -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"
......
src/views/virtual/index.vue
浏览文件 @ b42f6f89
...@@ -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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论