Skip to content

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

布展详情中国风主题布局

上级 1b59a67f
显示空白字符变更
内嵌 并排
正在显示 包含 811 行增加 和 648 行删除
src/App.vue
浏览文件 @ b2d3588e
......@@ -29,7 +29,8 @@ export default {
},
mounted() {
this.$nextTick(() => {
this.$wow.init();
let wow = this.$wow;
wow.init();
});
},
};
......
src/components/Dict/index.js deleted 100644 → 0
浏览文件 @ 1b59a67f
import {
getDictCode
} from "@/api/dict";
import {
getLiteratureList
} from '@/api/literature'
import store from "@/store";
import Vue from "vue";
class Dict {
constructor(dict) {
this.dict = dict;
}
async init(names) {
// 先判断list中的name是否存在，如果不存在，把不存在的放置在一个list中，再对list进行获取
var nonExistentNames = []
// debugger
names.forEach(name => {
if (store.getters.dicts[name]) {
Vue.set(this.dict, name, store.getters.dicts[name]);
} else {
nonExistentNames.push(name) //存入list中，单独进行处理调用
}
});
var index = nonExistentNames.indexOf('literature')
if (index != -1) {
// debugger
Vue.set(this.dict, 'literature', []);
nonExistentNames.splice(index, 1)
var params = {
limit: 100,
page: 1
}
var res = await getLiteratureList(params)
if (res.code == 0) {
var literatureList = res.data.records
Vue.set(this.dict, 'literature', literatureList);
this.dict['literature'] = Object.freeze(literatureList)
store.commit("dict/SET_DICTS", {
label: 'literature',
value: Object.freeze(literatureList),
});
}
}
if (nonExistentNames.length > 0) {
// debugger
var res = await getDictCode(nonExistentNames)
nonExistentNames.forEach(n => {
Vue.set(this.dict, n, []);
// var arr = []
var obj = {}
if (res.code == 0) {
res.data.map(item => {
if (item.dictType === n) {
obj[item.value]=item.label
}
})
this.dict[n] = Object.freeze(obj)
store.commit("dict/SET_DICTS", {
label: n,
value: Object.freeze(obj),
});
}
})
}
}
}
const install = function (Vue) {
Vue.mixin({
data() {
// 如果在调用组件处data中有定义dicts，再进行初始化dict
if (
this.$options.dicts instanceof Array &&
this.$options.dicts.length > 0
) {
return {
dict: {}
};
} else {
return {};
}
},
created() {
// 如果在调用组件处data中有定义dicts，再进行获取dicts中定义的字典
if (
this.$options.dicts instanceof Array &&
this.$options.dicts.length > 0
) {
new Dict(this.dict).init(this.$options.dicts);
}
},
});
};
export default {
install
};
src/main.js
浏览文件 @ b2d3588e
......@@ -9,30 +9,21 @@ import "@/assets/styles/index.scss"; //全局样式
// import * as echarts from 'echarts'
import './icons'
import dict from '@/components/Dict'
import animated from 'animate.css';
// 滚动动画 wow.js
import {
WOW
} from 'wowjs'
import {
getTotalUrl
} from '@/utils/index'
// import '@/rem'
// import '@/permission' // permission control
Vue.config.productionTip = false
Vue.use(ElementUI);
// Vue.prototype.$echarts = echarts
// 全局注册字典组件
Vue.use(dict);
// 全局注册动画效果
Vue.use(animated);
// 滚动动画 wow.js
import {
WOW
} from 'wowjs'
Vue.prototype.$wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
......@@ -41,9 +32,7 @@ Vue.prototype.$wow = new WOW({
live: true,
scrollContainer: null,
resetAnimation: true,
// live为true时，控制台会提示：MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.
callback: function (box) {
console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
}
......
src/permission.js
浏览文件 @ b2d3588e
import router from './router'
import store from './store'
import {
Message
} from 'element-ui'
// import NProgress from 'nprogress' // progress bar
// import 'nprogress/nprogress.css' // progress bar style
import {
getToken
} from '@/utils/auth' // get token from cookie
// import getPageTitle from '@/utils/get-page-title'
// NProgress.configure({
// showSpinner: false
// }) // NProgress Configuration
// const whiteList = ['/login'] // no redirect whitelist
router.beforeEach(async (to, from, next) => {
// debugger
console.log('to',to);
console.log('from',from);
console.log(from,to);
const hasToken = getToken()
console.log('hasToken',hasToken);
if (!hasToken) {
if (to.path === '/personal') {
next({
......@@ -34,8 +19,3 @@ router.beforeEach(async (to, from, next) => {
next()
}
})
// router.afterEach(() => {
// // finish progress bar
// NProgress.done()
// })
src/views/display/Detail-old.vue 0 → 100644
浏览文件 @ b2d3588e
<!-- -->
<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
浏览文件 @ b2d3588e
<!-- -->
<template>
<div class="display-detail">
<!-- <div class="search">
<SearchBar
:options="options"
:selectValue="selectValue"
:keyword="keyword"
/>
</div> -->
<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
<div class="content" id="content">
<div class="content-item sliders">
<div class="center-box">
<div class="slide-group" :style="{ width: contentWidth }">
<div
class="slide-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="" />
<img :src="$getFullUrl(item.url)" alt="" />
<div class="modal"></div>
</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 class="center-img">
<img src="@/assets/imgs/display/slider-box.png" alt="" />
</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 class="content-item intro">
<div class="wrapper"></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 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="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 class="custom-title-text">展览单元</div>
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
</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 class="units-content"></div>
</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 class="content-item lts">
<div class="wrapper">
<div class="custom-title">
<div class="custom-title-prefix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
</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 class="custom-title-text">关联文献</div>
<div class="custom-title-suffix">
<img src="@/assets/imgs/display/custom-title.png" alt="" />
</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 class="lts-content">
<div class="lts-list">
<div class="lts-item"></div>
</div>
</div>
</div>
</div> -->
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
</template>
......@@ -294,25 +96,17 @@ export default {
imgViewerVisible: false,
relateRelics: [],
curUnit: [],
contentWidth: 0,
};
},
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,
});
this.loadContentWidth();
});
},
methods: {
async loadDetail() {
let exhibitionId = this.$route.params.exhibitionId;
if (exhibitionId) {
......@@ -350,223 +144,130 @@ export default {
}
},
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;
loadContentWidth() {
this.contentWidth = document.getElementById("content").clientWidth + "px";
},
},
};
</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;
}
.custom-title {
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
.custom-title-prefix,
.custom-title-suffix {
width: 27px;
height: 27px;
margin: 15px;
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;
}
width: 100%;
height: 100%;
}
}
.custom-title-text {
font-size: 40px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
line-height: 114px;
}
}
/**公共样式结束 */
.view-3d {
margin-top: 32px;
padding: 6px 10px;
/**样式开始 */
.display-detail {
overflow-x: hidden;
.content {
width: 100%;
.content-item {
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 {
/**轮播图 */
.sliders {
height: 434px;
margin: 52px 0 84px 0;
// background-color: pink;
display: flex;
justify-content: center;
.center-box {
width: 1200px;
height: 100%;
position: relative;
.operation {
position: absolute;
right: 0;
display: flex;
align-items: center;
justify-content: center;
.slide-group {
display: flex;
position: relative;
height: 100%;
.slide-item {
width: 300px;
height: 100%;
position: relative;
img {
width: 300px;
height: 100%;
object-fit: cover;
filter: grayscale(14);
}
.modal {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 10;
background-color: rgba(#f8f8f8, 0.75);
}
.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;
.center-img {
position: absolute;
left: 0;
top: -25px;
z-index: 99;
}
}
.display-source {
margin-top: 8px;
/**展览信息 */
.intro {
margin-bottom: 96px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
}
justify-content: center;
.wrapper {
height: 706px;
background-image: url("@/assets/imgs/display/intro-bg.png");
}
}
.relate-video {
.video-container {
display: flex;
flex-direction: column;
align-items: center;
.video-box {
/**展览单元 */
.units {
// background-color: blue;
margin-bottom: 100px;
display: flex;
justify-content: center;
border: 1px solid #000;
video {
width: 800px;
}
}
.info-box {
width: 800px;
/**关联文献 */
.lts {
// background-color: aquamarine;
display: flex;
justify-content: space-between;
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");
}
}
}
}
.text-indent {
text-indent: 28px;
}
.margin-bottom-32 {
margin-bottom: 32px;
}
</style>
\ No newline at end of file
src/views/home/components/CulturalRelic.vue
浏览文件 @ b2d3588e
......@@ -19,14 +19,23 @@
@click.native="handleClick(i)"
>
<div class="img">
<img v-if="$getFullUrl(i.faceImagePressUrl)" :src="$getFullUrl(i.faceImagePressUrl)" />
<img v-else-if="$getFullUrl(i.faceImageUrl)" :src="$getFullUrl(i.faceImageUrl)" />
<img
v-if="$getFullUrl(i.faceImagePressUrl)"
:src="$getFullUrl(i.faceImagePressUrl)"
/>
<img
v-else-if="$getFullUrl(i.faceImageUrl)"
:src="$getFullUrl(i.faceImageUrl)"
/>
<div v-else class="no-pic">暂无图片</div>
</div>
<div class="info" v-show="$getFullUrl(i.faceImagePressUrl || i.faceImageUrl)">
<div
class="info"
v-show="$getFullUrl(i.faceImagePressUrl || i.faceImageUrl)"
>
<div class="name">{{ i.name }}</div>
<div class="sourceWay">{{ i.sourceWay }}</div>
</div>
</div>
<div class="modal">{{ i.name }}</div>
</el-col>
</el-row>
......@@ -137,28 +146,23 @@ $blue: #2069c4;
overflow: hidden;
&:hover {
.img {
img {
transform: scale(1.1);
}
// .info {
// // color: #2069c4;
// // z-index: 10;
// display: none;
// }
.info {
// display: block;
transform: translateY(0);
}
}
.img {
width: 100%;
height: 100%;
transition: all 0.5s ease;
overflow: hidden;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.no-pic {
width: 100%;
......@@ -170,14 +174,6 @@ $blue: #2069c4;
color: #fff;
}
}
// .info {
// position: absolute;
// right: 20px;
// bottom: 10px;
// font-family: Lisu;
// color: #fff;
// }
.info {
position: absolute;
left: 0;
......
src/views/home/components/Display.vue
浏览文件 @ b2d3588e
......@@ -2,32 +2,52 @@
<template>
<div class="home-display">
<div class="title wow animate__animated animate__fadeInUp">展览</div>
<div class="wrapper" v-show="currentItem">
<div class="wrapper">
<!-- <div
class="sliders"
:style="{
transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
}"
> -->
<div
class="sliders"
:style="{
transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
}"
>
<div
:class="['slide-item', currentIndex == index ? 'active' : '']"
v-for="(item, index) in list"
:key="index"
>
<div class="content wow animate__animated animate__fadeInLeft">
<div class="content-name">{{ currentItem.title }}</div>
<div class="content-name">{{ item.title }}</div>
<div class="content-intro">
{{ currentItem.intro ? currentItem.intro : "" }}
{{ item.intro ? item.intro : "" }}
</div>
<div class="entrance" @click="handleClick(currentItem)">
<div class="entrance" @click="handleClick(item)">
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance.png" alt="" />
</div>
</div>
<div class="img wow animate__animated animate__fadeInRight" @click="handleClick(currentItem)">
<div class="img wow animate__animated animate__fadeInRight" @click="handleClick(item)">
<img
v-if="$getFullUrl(currentItem.faceImagePressUrl) "
:src="$getFullUrl(currentItem.faceImagePressUrl)"
v-if="$getFullUrl(item.faceImagePressUrl)"
:src="$getFullUrl(item.faceImagePressUrl)"
alt=""
/>
<img v-else :src="$getFullUrl(currentItem.faceImageUrl)" alt="" />
<div class="img-name">{{ currentItem.title }}</div>
<img v-else :src="$getFullUrl(item.faceImageUrl)" alt="" />
<div class="img-name">{{ item.title }}</div>
</div>
</div>
</div>
<div class="pagination wow animate__animated animate__fadeInUp">
<ul>
<li
v-for="(item, index) in list"
:key="index"
:class="currentItem == item ? 'active' : ''"
:class="list[currentIndex] == item ? 'active' : ''"
@click="handleChangePage(item)"
>
{{ index + 1 }}
......@@ -35,34 +55,6 @@
</ul>
</div>
</div>
<!-- <el-carousel indicator-position="none" :autoplay="false" arrow="never">
<el-carousel-item v-for="item in list" :key="item.exhibitionId">
<div class="wrapper">
<div class="content">
<div class="content-name">{{ item.title }}</div>
<div class="content-intro">
{{ item.intro ? item.intro : "" }}
</div>
</div>
<div class="img">
<img :src="item.faceImageUrl" />
<div class="img-name">{{ item.title }}</div>
</div>
<div class="pagination">
<ul>
<li
v-for="(item, index) in [1, 2, 3, 4]"
:key="index"
:class="currentPage == item ? 'active' : ''"
@click="handleChangePage(item)"
>
{{ item }}
</li>
</ul>
</div>
</div>
</el-carousel-item>
</el-carousel> -->
</div>
</template>
......@@ -73,21 +65,29 @@ export default {
data() {
return {
list: [],
// currentPage: 1,
currentItem: {},
currentIndex: 0,
sliderItemWidth: 0,
};
},
mounted() {
this.loadList();
this.getSlideItemWidth();
},
methods: {
async loadList() {
let res = await getRecommendDisplay();
this.list = res.data;
this.currentItem = this.list[0];
// this.currentItem = this.list[0];
},
handleChangePage(page) {
this.currentItem = page;
let index = this.list.indexOf(page);
this.currentIndex = index;
// this.currentItem = page;
console.log(
"currentIndex * sliderItemWidth",
this.currentIndex * this.sliderItemWidth
);
},
handleClick(item) {
console.log(item);
......@@ -96,6 +96,13 @@ export default {
path: "display/" + exhibitionId,
});
},
getSlideItemWidth() {
setTimeout(() => {
let slideItem = document.getElementsByClassName("slide-item");
this.sliderItemWidth = slideItem[0].offsetWidth;
console.log(" this.sliderItemWidth", this.sliderItemWidth);
}, 500);
},
},
};
</script>
......@@ -119,14 +126,33 @@ export default {
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
flex: 1;
overflow: hidden;
.sliders {
display: flex;
min-width: 100%;
height: 100%;
// transition: all 0.5s ease-in-out;
.slide-item {
min-width: 100%;
position: relative;
display: flex;
justify-content: space-between;
height: 100%;
padding: 0 10px;
opacity: 0;
transition: all 1s ease;
.content {
width: 600px;
color: #fff;
font-family: "Alibaba PuHuiTi";
width: 600px;
height: 100%;
.content-name {
font-size: 20px;
font-weight: bold;
......@@ -147,10 +173,7 @@ export default {
}
}
.img {
position: absolute;
top: 20%;
// transform: translateY(-50%);
right: 0;
margin-top: 100px;
width: 380px;
height: 480px;
cursor: pointer;
......@@ -166,10 +189,15 @@ export default {
color: #88754d;
}
}
}
.active {
opacity: 1;
}
}
.pagination {
position: absolute;
bottom: 80px;
bottom: 60px;
right: 0;
ul {
display: flex;
......@@ -182,7 +210,9 @@ export default {
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.5s ease;
}
li:hover,
.active {
background: #2069c4;
color: #fff;
......
src/views/home/index.vue
浏览文件 @ b2d3588e
<template>
<!-- <child1 slot="skeleton" /> -->
<div class="home">
<Boutique class="home-item" ref="Boutique" />
<Virtural class="home-item" ref="Virtural" />
......@@ -18,6 +17,7 @@ import Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue";
import CulturalRelic from "./components/CulturalRelic.vue";
export default {
name: "Home",
components: {
// NavBar,
// Footer,
......@@ -27,13 +27,6 @@ export default {
Display,
CulturalRelic,
},
name: "Home",
// mounted() {
// this.$nextTick(() => {
// this.$wow.init();
// });
// },
};
</script>
......
src/views/personal/index.vue
浏览文件 @ b2d3588e
......@@ -87,26 +87,37 @@ $blue: #2069c4;
}
}
::v-deep {
.el-tabs--left.el-tabs--card .el-tabs__item.is-active {
.el-tabs--left.el-tabs--card .el-tabs__item.is-active:not(.is-top) {
background-color: #eeeeee;
color: $blue;
font-weight: bold;
}
}
::v-deep{
.el-tabs__nav.is-top{
display: flex;
}
::v-deep .el-tabs__active-bar {
background-color: #2069c4;
}
::v-deep{
.el-tabs__item.is-top.is-active{
width: 100px;
display: flex;
justify-content: center;
}
.el-tabs__active-bar.is-top{
width: 100px !important;
::v-deep {
.el-tabs__item:hover,
.el-tabs__item.is-active {
color: #2069c4;
}
}
// ::v-deep{
// .el-tabs__nav.is-top{
// display: flex;
// }
// }
// ::v-deep{
// .el-tabs__item.is-top.is-active{
// width: 100px;
// display: flex;
// justify-content: center;
// }
// .el-tabs__active-bar.is-top{
// width: 100px !important;
// }
// }
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论