Skip to content

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

feat:完善布展详情页、增加svg

上级 543e543c
隐藏空白字符变更
内嵌 并排
正在显示 包含 164 行增加 和 76 行删除
package-lock.json
浏览文件 @ 8408180d
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
浏览文件 @ 8408180d
......@@ -17,7 +17,6 @@
"js-cookie": "^3.0.1",
"mockjs": "^1.1.0",
"qrcodejs2": "^0.0.2",
"svg-sprite-loader": "^6.0.11",
"svgo": "^2.8.0",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
......@@ -40,6 +39,7 @@
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"svg-sprite-loader": "^6.0.11",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
......
src/components/MenuList/index.vue
浏览文件 @ 8408180d
......@@ -5,27 +5,26 @@
default-active=""
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
:default-openeds="[items[0].euId]"
>
<!-- 遍历菜单 -->
<template v-for="item in items">
<template v-for="(item) in items">
<!-- 含有子菜单 -->
<template v-if="item.children">
<!-- 第一层 含有子菜单菜单 -->
<el-submenu :index="item.title" :key="item.title">
<el-submenu :index="item.euId" :key="item.title">
<template slot="title">
<span slot="title">{{ item.title }}</span>
<div slot="title" @click="handleClick(item)">{{ item.title }}</div>
</template>
<menu-list :items="item.children"></menu-list
<menu-list :items="item.children" v-bind="$attrs" v-on="$listeners"></menu-list
><!--递归调用-->
</el-submenu>
</template>
<!-- 第一层 不含子菜单 -->
<template v-else>
<el-menu-item :index="item.title" :key="item.title">
<!-- <i :class="item.meta.icon"></i> -->
<span slot="title">{{ item.title }}</span>
<el-menu-item :index="item.euId" :key="item.title">
<div slot="title" @click="handleClick(item)">{{ item.title }}</div>
</el-menu-item>
</template>
</template>
......@@ -39,13 +38,20 @@ export default {
items: Array,
isCollapse: Boolean,
},
inheritAttrs:false,
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
debugger
},
handleClose(key, keyPath) {
console.log(key, keyPath);
// console.log(key, keyPath);
},
handleClick(item){
// console.log(item.title);
this.$emit('open',item)
}
},
};
</script>
......
src/components/SvgIcon/index.vue
浏览文件 @ 8408180d
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<svg :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'
export default {
name: 'SvgIcon',
props: {
......@@ -22,24 +18,11 @@ export default {
}
},
computed: {
isExternal() {
return isExternal(this.iconClass)
},
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
......@@ -53,10 +36,4 @@ export default {
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover!important;
display: inline-block;
}
</style>
src/components/Video/index.vue 0 → 100644
浏览文件 @ 8408180d
<template>
<video :src="url" style="height: auto; width: 100%" controls loop></video>
</template>
<script>
export default {
name: 'Video',
props: {
url: {
default: "",
type: String,
},
},
};
</script>
<style>
</style>
\ No newline at end of file
src/icons/index.js
浏览文件 @ 8408180d
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
import SvgIcon from '@/components/SvgIcon'// svg组件
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
\ No newline at end of file
src/main.js
浏览文件 @ 8408180d
......@@ -6,7 +6,7 @@ import store from './store/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// import * as echarts from 'echarts'
import './icons'
Vue.config.productionTip = false
Vue.use(ElementUI);
......
src/views/display/Detail.vue
浏览文件 @ 8408180d
......@@ -13,7 +13,7 @@
<div class="title-container">
<h3 class="title">{{ displayDetail.title }}</h3>
<div class="operation">
<!-- <svg-icon icon-class="eye"></svg-icon> -->
<svg-icon icon-class="user" style="color:red"></svg-icon>
<el-button
type="text"
@click.native="handleCollect(exhibitionId)"
......@@ -31,14 +31,28 @@
</div>
<div class="content">
{{ displayDetail.intro }}
<!-- 可乐遗址位于贵州省赫章县可乐乡可乐河两岸的丘陵坡地上，是一处战国至汉时期（公元前475年至公元220年）的遗址。
遗址区包括遗址2处、墓葬群14处。遗址和墓葬群均有汉代遗址和战国时期的当地少数民族（即夜郎）遗址和墓葬两类。汉代城址，位于可乐河南岸，平面为“猪心形”，面积约6-7万平方米，有夯土城墙环绕。城内出土大量青铜戈、矛、钱币、瓦当、花纹砖等建材及陶、铜、铁等生产和生活用品。夜郎文化遗址距汉城约1公里，位于可乐河北岸，出土石器、铜器、陶器。汉墓一般规模较大，随葬少量金、银、玉等饰件及铜、铁、陶器等物。少数民族墓群除随葬少量陶、铜、铁、漆器外，其葬式极为特殊，其中的“套头葬”在国内罕见，反映出夜郎民族的埋葬特点。
可乐遗址对研究夜郎民族的政治、经济和文化都具有重要的历史价值和科学价值。 -->
<div class="intro margin-bottom-32">{{ displayDetail.intro }}</div>
<div
class="images"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<el-row :gutter="20">
<el-col
:span="24"
v-for="item in displayDetail.imagesVo"
:key="item.fileId"
>
<img :src="item.url" alt="" width="100%"/>
<div class="name flex-center margin-bottom-32">
{{ item.name }}
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<div class="relate-book marginBottom32">
<div class="relate-book margin-bottom-32">
<CustomTitle text="相关文献" />
<div
class="book-item"
......@@ -49,7 +63,7 @@
<span style="margin: 0 20px">{{ item.author }}</span>
</div>
</div>
<div class="relate-cultual-relic marginBottom32">
<div class="relate-cultual-relic margin-bottom-32">
<CustomTitle text="关联文物" />
<!-- <div class="display-group">
<div
......@@ -76,7 +90,7 @@
</div>
</div> -->
</div>
<div class="relate-video marginBottom32">
<div class="relate-video margin-bottom-32">
<CustomTitle text="关联视频" />
<el-carousel :interval="4000" type="card" height="400px">
<el-carousel-item
......@@ -85,12 +99,13 @@
>
<div class="video-container">
<div class="video-box">
<video
<!-- <video
:src="item.url"
style="height: auto; width: 100%"
controls
loop
></video>
></video> -->
<Video :url="item.url" />
</div>
<div class="info-box">
<h4 class="name">{{ item.name.split(".")[0] }}</h4>
......@@ -99,18 +114,67 @@
</el-carousel-item>
</el-carousel>
</div>
<div class="relate-video marginBottom32">
<div
class="relate-video margin-bottom-32"
v-if="
displayDetail.exhibitionUnits &&
displayDetail.exhibitionUnits.length > 0
"
>
<CustomTitle text="布展单元" />
<el-row>
<el-row :gutter="20">
<el-col :span="8">
<!-- 只能单开 unique-opened -->
<menu-list :items="displayDetail.exhibitionUnits" :isCollapse="false" @handleOpen="handleOpenUnit"></menu-list>
<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="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="item.url" />
</el-col>
</el-row>
</div>
</div>
</el-card>
</el-col>
</el-col>
</el-row>
</div>
</div>
......@@ -164,8 +228,9 @@ import CustomTitle from "@/components/CustomTitle";
import { getDisplayById } from "@/api/display";
// import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import Video from "@/components/Video";
export default {
components: { SearchBar, CustomTitle,MenuList },
components: { SearchBar, CustomTitle, MenuList, Video },
data() {
return {
options: [
......@@ -181,6 +246,7 @@ export default {
loginDialogVisible: false,
shareDialogVisible: false,
curLink: "", //当前地址栏的链接
curUnit: {}, //当前点击的单元
// relateBooks: [
// { name: "带钩及其演变", author: "王莉", source: "文博.1996(01)" },
// { name: "古代带钩用途考实", author: "王仁湘", source: "文物.1982(10)" },
......@@ -243,6 +309,25 @@ export default {
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);
// 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);
}
}
}
}
}
}
},
......@@ -286,9 +371,9 @@ export default {
handleShareClose() {
this.shareDialogVisible = false;
},
handleOpenUnit(item){
console.log(item);
}
handleOpenUnit(item) {
this.curUnit = item;
},
},
};
</script>
......@@ -387,10 +472,20 @@ export default {
}
}
.marginBottom32 {
.margin-bottom-32 {
margin-bottom: 32px;
}
.text-indent {
text-indent: 28px;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.qrcode,
.copy {
display: flex;
......
vue.config.js
浏览文件 @ 8408180d
......@@ -16,8 +16,8 @@ module.exports = defineConfig({
hot: true,
proxy: {
'/api': {
target: 'http://172.24.100.189:8080',
// target: 'http://222.85.214.245:9062/api',
// target: 'http://172.24.100.189:8080',
target: 'http://222.85.214.245:9062/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
......@@ -34,21 +34,14 @@ module.exports = defineConfig({
return args
})
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader,如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear()
// 添加要替换的 loader
svgRule.use('svg-sprite-loader').loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
......@@ -60,7 +53,4 @@ module.exports = defineConfig({
}
},
})
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论