提交 9c7b94a6 authored 作者: 龙菲's avatar 龙菲

修复以图搜图出现的bug,统一封装打开文物、展览的逻辑

上级 496b1a68
......@@ -307,6 +307,7 @@ li {
#app {
// overflow-y: visible;.el-backtop
#navbar {
+div {
......@@ -314,6 +315,7 @@ li {
}
}
}
.el-backtop {
z-index: 99;
}
......@@ -377,4 +379,18 @@ li {
// 描述列表项垂直居中
.el-descriptions-item__container {
align-items: center;
}
// 博物馆和文物的搜索按钮
.search-button {
height: 44px;
display: flex;
justify-content: center;
align-items: center;
background-color: $yellow;
color: #fff;
.svg-icon {
margin-right: 10px;
}
}
\ No newline at end of file
$deep-blue: #252F57; //主题深蓝
$blue: #2365D3; //
$yellow: #dfab46; //辅色黄色,用于高亮,选中菜单等
$cr-bg: #374475; //文物的背景颜色
$pu-hui-ti: "Alibaba-pu-hui-ti"; //阿里巴巴普惠体
$siyuan-song-bold: "SourceHanSerifCN-Bold"; //思源宋体加粗
......
// 此文件放置共用的一些方法,方便统一管理
import router from "@/router";
import { Message } from 'element-ui'
import boutiqueTool from './boutique'
const bizCommon = {
openNewPage(path, query = {}) {
const newPage = router.resolve({
......@@ -20,7 +21,7 @@ const bizCommon = {
if (file3dUrl) {
const { name,
deptName,
yearslabel,
yearsLabel,
detailSize,
intro } = item
const path = "/3dDetail";
......@@ -28,9 +29,9 @@ const bizCommon = {
url3d,
name,
deptName,
yearslabel,
detailSize,
intro,
yearsLabel
};
const query = {
file3dUrl: encodeURI(file3dUrl),
......@@ -40,13 +41,47 @@ const bizCommon = {
return;
}
if (url3d) {
const msg = message.info("即将打开3D模型...");
const msg = Message.info("即将打开3D模型...");
setTimeout(() => {
msg.close();
window.open(this.detail.url3d, "_blank");
window.open(url3d, "_blank");
}, 1000);
return;
}
},
// 打开展览详情页,或者精品展页面
openDisplay(item) {
const { title } = item
const isBoutique = boutiqueTool.isBoutique(title)
let path;
if (!isBoutique) {
const { themeType, exhibitionId, sourceId } = item;
const id = exhibitionId || sourceId
path = `/display/${themeType}/${id}`
} else {
const key = boutiqueTool.getKeyByLabel(title)
path = `/boutique/${key}`
}
console.log(path);
bizCommon.openNewPage(path);
},
// 打开文物详情页
openCr(item) {
const { crId, sourceId } = item;
const id = crId || sourceId
const path = "culturalRelic/" + id;
bizCommon.openNewPage(path);
},
// 滚动至顶部,保证切换分页时能够到顶部
scrollToTop() {
const anchor = document.getElementById("anchor");
const navBarHeight = 250;
// chrome
document.body.scrollTop = anchor.offsetTop - navBarHeight;
// firefox
document.documentElement.scrollTop = anchor.offsetTop - navBarHeight;
// safari
window.pageYOffset = anchor.offsetTop - navBarHeight;
}
}
export default bizCommon
\ No newline at end of file
// 精品展的key-label,统一在此处配置,此文件非常重要请勿删除
// 如果精品展无法被打开则需要检查展览录入时的中文名称和本文件的中文名称(label)是否一致
const boutiqueTool = {
boutiqueList: [{
key: 'smgz',
label: '神秘贵州'
},
{
key: 'ylgdyw',
label: '夜郎的疑问'
},
{
key: 'sdcs',
label: '四渡赤水出奇兵'
},
{
key: 'jyycc',
label: '记忆与传承'
},
{
key: 'lzsg',
label: '梭戛博物馆陈列展览'
},
{
key: 'zggzsgwdzjlz',
label: '中共贵州省工委旧址纪念馆'
}, {
key: 'jysg',
label: '贵州教育史馆'
},
{
key: 'frgz',
label: '富饶贵州'
},
{
key: 'zs',
label: '追随-贵州奋斗者的故事'
},
{
key: 'lphy',
label: '黎平会议纪念馆'
},
{
key: 'wmsh',
label: '人类起源·乌蒙史话'
},
{
key: 'wrf',
label: '王若飞生平事迹展'
},
{
key: 'gzgs',
label: '百年征程 贵州故事'
},
],
/**
* 通过key获取精品展对应的label
*/
getAllLabels() {
const labels = this.boutiqueList.map(item => {
return item.label
})
return labels
},
/**
* 通过key获取精品展对应的label
*/
getAllKeys() {
const keys = this.boutiqueList.map(item => {
return item.keys
})
return keys
},
/**
* 通过key获取精品展对应的label
* @param {string} key 精品展对应的key
* @returns {string}精品展对应的label
*/
getLabelByKey(key) {
const keyToLabel = {}
this.boutiqueList.forEach(item => {
keyToLabel[item.key] = item.label
})
return keyToLabel[key]
},
/**
* 通过label获取精品展对应的key
* @param {string} key 精品展对应的key
* @returns {string}精品展对应的label
*/
getKeyByLabel(label) {
const labelToKey = {}
this.boutiqueList.forEach(item => {
labelToKey[item.label] = item.key
})
return labelToKey[label]
},
/**
* 通过label判断是否是精品展
* @param {string} label 展览的标题
* @returns {boolean} 是否是精品展
*/
isBoutique(label) {
const labels = this.getAllLabels()
return labels.includes(label)
},
}
export default boutiqueTool
\ No newline at end of file
......@@ -98,6 +98,7 @@ export default {
},
methods: {
handleChangeButton(item) {
console.log(item);
this.currentButton = item;
},
handleOpenIntro() {
......@@ -117,14 +118,15 @@ export default {
}
if (info) {
this.info = JSON.parse(info);
const { yearsLabel, detailSize } = this.info;
this.buttons = [
{
label: "年代",
value: info.yearsLabel,
value: yearsLabel || "不详",
},
{
label: "尺寸",
value: info.detailSize,
value: detailSize || "不详",
},
];
this.currentButton = this.buttons[0];
......
<template>
<div class="botique">
<SMGZ v-if="currentTitle == '神秘贵州'" />
<YLGDYW v-else-if="currentTitle == '夜郎的疑问'" />
<JYYCC v-else-if="currentTitle == '记忆与传承'" />
<SDCS v-else-if="currentTitle == '四渡赤水出奇兵'" />
<JYSG v-else-if="currentTitle == '贵州教育史馆'" />
<LZST v-else-if="currentTitle == '梭戛博物馆陈列展览'" />
<LGGZSGW v-else-if="currentTitle == '中共贵州省工委旧址纪念馆'" />
<div v-else class="img-container">
<el-empty description="暂无数据"></el-empty>
</div>
</div>
</template>
<script>
// 一期
import smgz from "./components/smgz/index"; //神秘贵州
import ylgdyw from "./components/ylgdyw/index"; //夜郎的疑问
import jyycc from "./components/jyycc"; //技艺与传承
import sdcs from "./components/sdcs"; //四渡赤水
import jysg from "./components/jysg"; //教育史馆
import lzsg from "./components/lzsg"; //六枝生态
// 二期
import wrf from "./components/wrf"; //王若飞故居
import frgz from "./components/frgz"; //富饶贵州
import lphy from "./components/lphy"; //黎平会议
import zs from "./components/zs"; //追随
import wmsh from "./components/wmsh"; //乌蒙史话
import gzgs from "./components/gzgs"; //贵州故事
export default {
components: { smgz, ylgdyw, jyycc, sdcs, jysg, lzsg, zggzsgwdzjlz },
watch: {
currentTitle: {
handler: function (value) {
let color = "";
if (!value) {
return;
}
switch (value) {
case "四渡赤水出奇兵":
color = "4";
break;
case "神秘贵州":
color = "5";
break;
case "记忆与传承":
color = "6";
break;
case "夜郎的疑问":
color = "7";
break;
// case "cjm":
// color = "1";
}
this.$store.commit("app/CHANGE_NAV_COLOR", color);
},
immediate: true,
},
},
data() {
return {
currentTitle: "",
};
},
mounted() {
this.currentTitle = this.$route.params.title;
},
};
</script>
<style lang="scss" scoped>
.botique {
// margin-bottom: -$nav-height;
> div {
// transform: translateY(-$nav-height);
margin-top: -$nav-height;
}
}
</style>
<template>
<div class="botique">
<SMGZ v-if="currentTitle == '神秘贵州'" />
<YLGDYW v-else-if="currentTitle == '夜郎的疑问'" />
<JYYCC v-else-if="currentTitle == '记忆与传承'" />
<SDCS v-else-if="currentTitle == '四渡赤水出奇兵'" />
<JYSG v-else-if="currentTitle == '贵州教育史馆'" />
<LZST v-else-if="currentTitle == '梭戛博物馆陈列展览'" />
<LGGZSGW v-else-if="currentTitle == '中共贵州省工委旧址纪念馆'" />
<div v-else class="img-container">
<el-empty description="暂无数据"></el-empty>
</div>
<div class="boutique">
<component :is="currentComponent" />
</div>
</template>
<script>
// import mTabs from '@/views/home/components/Boutique.vue'
import SMGZ from "./components/smgz/index"; //神秘贵州
import YLGDYW from "./components/ylgdyw/index"; //夜郎的疑问
import JYYCC from "./components/jyycc"; //技艺与传承
import SDCS from "./components/sdcs"; //四渡赤水
import JYSG from "./components/jysg"; //教育史馆
import LZST from "./components/lzsg"; //六枝生态
import LGGZSGW from "./components/zggzsgwdzjlz"; //六枝生态
export default {
components: { SMGZ, YLGDYW, JYYCC, SDCS, JYSG, LZST, LGGZSGW },
watch: {
currentTitle: {
handler: function (value) {
let color = "";
if (!value) {
return;
}
switch (value) {
case "四渡赤水出奇兵":
color = "4";
break;
case "神秘贵州":
color = "5";
break;
case "记忆与传承":
color = "6";
break;
case "夜郎的疑问":
color = "7";
break;
// case "cjm":
// color = "1";
}
this.$store.commit("app/CHANGE_NAV_COLOR", color);
},
immediate: true,
},
components: {
// 一期
smgz: () => import("./components/smgz/index"), //神秘贵州
ylgdyw: () => import("./components/ylgdyw/index"), //夜郎的疑问
jyycc: () => import("./components/jyycc/index"), //记忆与传承
sdcs: () => import("./components/sdcs/index"), //四渡赤水出奇兵
jysg: () => import("./components/jysg/index"), //贵州教育史馆
lzsg: () => import("./components/lzsg/index"), //梭戛博物馆陈列展览
zggzsgwdzjlz: () => import("./components/zggzsgwdzjlz/index"), //中共贵州省工委旧址纪念馆
// 二期
wrf: () => import("./components/wrf/index"), //王若飞生平事迹展
frgz: () => import("./components/frgz/index"), //富饶贵州
lphy: () => import("./components/lphy/index"), //黎平会议纪念馆
zs: () => import("./components/zs/index"), //追随-贵州奋斗者的故事
wmsh: () => import("./components/wmsh/index"), //人类起源·乌蒙史话
gzgs: () => import("./components/gzgs/index"), //百年征程 贵州故事
},
data() {
return {
currentTitle: "",
currentComponent: "smgz",
};
},
mounted() {
this.currentTitle = this.$route.params.title;
created() {
this.init();
},
methods: {
init() {
const { title } = this.$route.params;
console.log("title", title);
this.currentComponent = title;
},
},
};
</script>
<style lang="scss" scoped>
.botique {
// margin-bottom: -$nav-height;
.boutique {
> div {
// transform: translateY(-$nav-height);
margin-top: -$nav-height;
}
}
......
......@@ -31,16 +31,10 @@
产品来源:{{ productInfo.deptName }}
</div>
</div>
<!-- <div class="footer">
<div class="dc-right">
<img src="@/assets/imgs/ccproduct/dc4.png" alt="" />
</div>
</div> -->
</div>
</div>
</template>
<script>
import { getCcProductDetail } from "@/api/literature";
import Breadcrumb from "@/components/Breadcrumb/index";
......@@ -178,4 +172,4 @@ export default {
// }
}
}
</style>
\ No newline at end of file
</style>
<template>
<div class="cultural-relic">
<!-- <ListBanner
title="共计已上线文创产品"
:num="list.total"
unit="件/套"
:info="['文创', '展示']"
/> -->
<div class="cultural-relic" id="anchor">
<div class="content-wrapper">
<div class="content">
<el-row
......@@ -73,15 +67,10 @@
:span="item.status == 1 ? 6 : 0"
class="cr-item"
@click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="container" v-if="item.status == 1">
<div class="img-container">
<img
:src="$getFullUrl(item.imagesVo[0].pressUrl)"
......@@ -99,18 +88,6 @@
<span>{{ item.deptName }}</span>
</div>
</div>
<!-- <div class="right">
<span class="collect">
<svg-icon icon-class="collect"></svg-icon>
<span>{{
item.collectCount ? item.collectCount : "收藏"
}}</span>
</span>
<span class="view">
<svg-icon icon-class="view"></svg-icon>
<span>{{ item.browseCount }}</span>
</span>
</div> -->
</div>
</div>
</div>
......@@ -139,13 +116,11 @@
</template>
<script>
import ListBanner from "@/components/ListBanner";
import { getCcProductList } from "@/api/literature";
import { getAllDeptIdAndName } from "@/api/org";
import { mapGetters } from "vuex";
import { mapActions } from "vuex";
export default {
name: "ccProduct",
components: { ListBanner },
data() {
return {
list: {
......@@ -168,22 +143,16 @@ export default {
deptList: [],
};
},
computed: {},
mounted() {
this.loadData();
this.loadRegionTree();
this.loadDeptData();
},
watch: {
// keyword(value) {
// debounce(this.handleKeyWordChange(value), 1000); //500ms
// },
},
methods: {
...mapActions("org", ["getSysRegionTreeData"]),
search() {
this.loadData();
},
async loadData() {
const params = {
page: this.list.current,
......@@ -195,6 +164,7 @@ export default {
let res = await getCcProductList(params);
if (res.code == 0) {
this.list = res.data;
this.$bizCommon.scrollToTop();
}
},
// 改变页容量
......@@ -211,11 +181,8 @@ export default {
handleClick(item) {
const { bccpId } = item;
const newPage = this.$router.resolve({
path: "ccProduct/" + bccpId,
});
window.open(newPage.href, "_blank");
// this.$router.push(`ccProduct/${bccpId}`);
const path = "ccProduct/" + bccpId;
this.$bizCommon.openNewPage(path);
},
handleClickThreeD() {
this.onlyShow3d = !this.onlyShow3d;
......@@ -228,16 +195,6 @@ export default {
this.keyword = value;
this.loadData();
},
handleTo3D(url3d) {
window.open(url3d, "_blank");
},
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
handleRegionChange(value) {
this.regionCode = value;
......@@ -251,7 +208,7 @@ export default {
loadRegionTree() {
let parentId = "";
this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => {
this.getSysRegionTreeData(parentId).then((res) => {
this.regionTree = res;
loopTree(this.regionTree);
function loopTree(arr) {
......
......@@ -51,20 +51,14 @@ export default {
},
computed: {
imagesVo() {
if (!this.detail.imagesVo) {
if (!this.detail || !this.detail.imagesVo) {
return [];
}
const imagesVo = this.getImagesVo();
return imagesVo;
},
},
// watch: {
// currentFileId(value) {
// if (value) {
// }
// },
// },
mounted() {
this.switchImg();
},
......
<template>
<div class="cultural-relic">
<!-- <ListBanner
title="共计文物"
unit="件/套"
:info="['文物', '展示']"
:num="list.total"
/> -->
<div class="search-bar wow animate__animated animate__fadeIn">
<div class="cultural-relic" id="anchor">
<div
class="search-bar wow animate__animated animate__fadeIn"
id="searchBar"
>
<div class="search-wrapper">
<el-row :gutter="40">
<el-col :span="6">
......@@ -50,20 +47,18 @@
</div>
<transition name="el-zoom-in-top">
<div class="search-panel" v-show="showSearchPanel">
<el-scrollbar>
<div class="search-panel-wrapper">
<div
class="type-item"
v-for="(item, index) in currentPanelData"
:key="index"
>
<span class="text" @click="handleClickSearchItem(item)">
{{ item.label }}
</span>
<span class="divider">/</span>
</div>
<div class="search-panel-wrapper">
<div
class="type-item"
v-for="(item, index) in currentPanelData"
:key="index"
>
<span class="text" @click="handleClickSearchItem(item)">
{{ item.label }}
</span>
<span class="divider">/</span>
</div>
</el-scrollbar>
</div>
</div>
</transition>
<div class="list-total">
......@@ -71,22 +66,17 @@
<span class="list-total-num">{{ list.total }}</span>
件/套
</div>
<div class="content-wrapper relic">
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40" class="cr-list">
<el-col
:span="6"
class="cr-item"
@click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="container" v-if="item.status == 1">
<div class="img-container">
<img
:src="
......@@ -249,13 +239,13 @@ export default {
let res = await getCulturalRelicList(params);
if (res.code == 0) {
this.list = res.data;
this.$bizCommon.scrollToTop();
}
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadData();
this.$refs["table"].bodyWrapper.scrollTop = 0;
},
// 改变当前显示页
......@@ -265,9 +255,7 @@ export default {
},
handleClick(item) {
const { crId } = item;
const path = "culturalRelic/" + crId;
this.$bizCommon.openNewPage(path);
this.$bizCommon.openCr(item);
},
handleClickThreeD() {
this.onlyShow3d = !this.onlyShow3d;
......@@ -283,13 +271,6 @@ export default {
this.$bizCommon.open3d(item);
},
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
handleClickSearchBar(type) {
this.showSearchPanel = true;
this.currentPanel = type;
......@@ -465,22 +446,17 @@ $text-indent: 16px;
font-weight: 600;
background-color: rgba($color: $deep-blue, $alpha: 0.3);
::v-deep .el-scrollbar__view {
display: flex;
justify-content: center;
}
/*隐藏浏览器自带的水平滚动条*/
::v-deep .el-scrollbar__wrap {
overflow-x: hidden !important;
}
.search-panel-wrapper {
width: 60%;
width: 100%;
display: flex;
flex-wrap: wrap;
overflow: auto;
padding: 10px 0;
padding: 10px 13%;
.type-item {
width: 25%;
......@@ -540,7 +516,6 @@ $text-indent: 16px;
margin-bottom: 40px;
.container {
// border: 2px solid #f1f1f1;
position: relative;
display: flex;
flex-direction: column;
......@@ -548,28 +523,14 @@ $text-indent: 16px;
transition: all 0.5s ease;
&:hover {
// border: 2px solid $deep-blue;
border: 2px solid $blue;
.face-image {
transform: scale(1.2);
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
display: block;
}
}
}
.img-container {
// background-color:#939393;
// background-color: #42555c;
background-color: #374475;
// #42555c
// height: 268px;
background-color: $cr-bg;
height: 225px;
cursor: pointer;
transition: all 0.5s ease;
......@@ -581,60 +542,16 @@ $text-indent: 16px;
object-fit: contain;
transition: all 0.5s ease;
}
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
position: absolute;
width: 36px;
height: 36px;
// display: none;
transition: all 0.5s ease;
img {
width: 100%;
height: 100%;
}
}
.deco-left-top {
left: 0;
top: 0;
transform: rotate(180deg);
}
.deco-left-bottom {
left: 0;
bottom: 0;
transform: rotate(90deg);
}
.deco-right-top {
right: 0;
top: 0;
transform: rotate(270deg);
}
.deco-right-bottom {
right: 0;
bottom: 0;
}
}
.desc {
// height: 120px;
// padding: 36px 30px 20px;
transition: all 0.5s ease;
background: #fff;
.name {
font-size: 20px;
padding: 20px 0;
// font-weight: bold;
// color: $deep-blue;
color: #333;
// margin-bottom: 18px;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
......@@ -651,7 +568,6 @@ $text-indent: 16px;
font-size: 14px;
font-weight: 300;
color: #000;
// font-weight: 600;
}
}
......
<template>
<div class="display">
<div class="display" id="anchor">
<div class="type-group">
<el-row>
<el-col
......@@ -36,15 +36,10 @@
:span="8"
class="display-item"
@click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="container" v-if="item.status == 1">
<div class="boutique-tag" v-if="isBoutique(item)"></div>
<div class="img-container">
<img
......@@ -101,6 +96,7 @@ import ListBanner from "@/components/ListBanner";
import { getList, getDisplayExistDict } from "@/api/display";
import { mapGetters } from "vuex";
import { titles } from "./boutiqueTitles";
import boutiqueTool from "@/utils/boutique";
export default {
name: "Display",
components: { ListBanner },
......@@ -137,7 +133,7 @@ export default {
...mapGetters(["dicts"]),
isBoutique(item) {
return (item) => {
return this.boutiqueTitles.indexOf(item.title) != -1;
return boutiqueTool.isBoutique(item.title);
};
},
},
......@@ -155,11 +151,6 @@ export default {
this.loadData();
this.loadRegionTree();
},
// watch: {
// keyword(value) {
// debounce(this.handleKeyWordChange(value), 1000); //500ms
// },
// },
methods: {
search() {
this.loadData();
......@@ -177,6 +168,7 @@ export default {
let res = await getList(params);
if (res.code == 0) {
this.list = res.data;
this.$bizCommon.scrollToTop();
}
},
// 改变页容量
......@@ -193,44 +185,17 @@ export default {
handleClickTypeItem(item) {
this.currentType = item.value;
// debugger
// this.type = value;
this.list.current = 1;
this.loadData();
},
handleClick(item) {
// debugger
let index = this.boutiqueTitles.indexOf(item.title);
let newPage;
if (index == -1) {
const { themeType, exhibitionId } = item;
newPage = this.$router.resolve({
path: `/display/${themeType}/${exhibitionId}`,
});
} else {
newPage = this.$router.resolve({
path: `/boutique/${item.title}`,
});
}
setTimeout(() => {
window.open(newPage.href, "_blank");
}, 300);
this.$bizCommon.openDisplay(item);
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
},
// handleTypeChange(value) {
// this.type = value;
// this.list.current = 1;
// this.loadData();
// },
// handleKeyWordChange(value) {
// this.keyword = value;
// this.loadData();
// },
handleRegionChange(value) {
this.regionCode = value;
this.$refs.region.dropDownVisible = false;
......@@ -256,34 +221,16 @@ export default {
}
});
},
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
// loadRegionData() {
// this.$store.dispatch("org/getMuseumTreeData", false).then((res) => {
// this.museumTree = res[0].children;
// });
// },
},
};
</script>
<style lang="scss" scoped>
$blue: $deep-blue;
$text-indent: 16px;
.display {
width: 100%;
// background-color: $deep-blue;
// color: #fff;
.type-group {
// padding: 0 13%;
// margin-bottom: 32px;
background: #fff;
padding: 32px 0 8px;
> div {
......@@ -297,12 +244,9 @@ $text-indent: 16px;
display: flex;
justify-content: center;
align-content: center;
// padding: 8px 0;
height: 46px;
line-height: 46px;
// margin-right: 16px;
cursor: pointer;
// border: 1px solid $yellow;
color: #999;
&:hover {
......@@ -318,17 +262,12 @@ $text-indent: 16px;
position: absolute;
right: 0;
width: 300px;
// width: 30%;
height: 46px;
// color: #999;
padding: 0 20px;
display: flex;
font-size: 14px;
align-items: center;
justify-content: center;
/* border: 1px solid #ccc;
background-color: #fff; */
// margin-right: 20px;
cursor: pointer;
border: 1px solid #fff;
background-color: #c5cade;
......@@ -374,12 +313,7 @@ $text-indent: 16px;
background-color: #fff;
.content {
// width: 100%;
// box-shadow: 0px 1px 16px 4px rgba(0, 0, 0, 0.16);
.display-list {
// padding: 0 74px;
.display-item {
margin-bottom: 40px;
......@@ -391,6 +325,13 @@ $text-indent: 16px;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
border: 2px solid $blue;
img {
transform: scale(1.1);
}
}
.boutique-tag {
width: 40px;
height: 40px;
......
<!-- -->
<template>
<div class="home-cr">
<div class="text wow animate__animated animate__fadeIn">文物</div>
<div class="title wow animate__animated animate__fadeInUp">
<!-- <div class="ch">每日推送</div>-->
<div class="en">Cultural Relic</div>
<!-- <div class="title-img">
<img src="@/assets/imgs/home-new/daily.png" alt="" />
</div> -->
<div class="all" @click="handleToAll">
<img src="@/assets/imgs/home-new/all.png" alt="" />
</div>
......@@ -35,99 +30,32 @@
</div>
</div>
</div>
<!-- <div class="list" v-if="list.length>0"> -->
<!-- <el-carousel indicator-position="outside" :autoplay="false" arrow="never">
<el-carousel-item v-for="(item, index) in list" :key="index">
<el-row :gutter="14">
<el-col
:span="6"
v-for="i in item"
:key="i.crId"
class="container"
@click.native="handleClick(i)"
>
<div class="img">
<img
v-if="$getFullUrl(i.faceImagePressUrl || i.faceImageUrl)"
:src="$getFullUrl(i.faceImagePressUrl || i.faceImageUrl)"
/>
<div v-else class="no-pic">暂无图片</div>
<div
class="info"
v-show="$getFullUrl(i.faceImagePressUrl || i.faceImageUrl)"
>
<div class="name">{{ i.name }}</div>
<div class="sourceWay">{{ i.sourceWayLabel }}</div>
</div>
</div>
</el-col>
</el-row>
</el-carousel-item>
</el-carousel> -->
</div>
</div>
</template>
<script>
import { getRecommendCr } from "@/api/culturalRelic";
import tempCrs from "../tempCr.json";
import { crs } from "../tempData";
export default {
name: "CulturalRelic",
data() {
return {
list: tempCrs,
list: crs,
length: "",
};
},
created() {
// this.loadList();
},
watch: {
list: {
handler: function (value) {
this.list = value;
},
immediate: true,
deep: true,
},
},
methods: {
async loadList() {
let res = await getRecommendCr();
this.list = res.data.splice(0, 6); //
console.log(this.list);
// if (res.data.length > 8) {
// this.length =
// res.data.length % 8 == 0
// ? res.data.length / 8
// : Math.floor(res.data.length / 8) + 1;
// for (let i = 0; i < this.length; i++) {
// let data = [];
// if (i == length - 1) {
// data = res.data.slice(8 * i, res.data.length);
// } else {
// data = res.data.slice(8 * i, (i + 1) * 8);
// }
// this.$set(this.list, i, data);
// }
// } else {
// this.list = [res.data];
// }
},
handleClick(item) {
const { crId } = item;
const newPage = this.$router.resolve({
path: `culturalRelic/${crId}`,
});
window.open(newPage.href, "_blank");
// this.$router.push(`culturalRelic/${crId}`);
this.$bizCommon.openCr(item);
},
handleToAll() {
const newPage = this.$router.resolve({
path: `culturalRelic`,
});
window.open(newPage.href, "_blank");
const path = `culturalRelic`;
this.$bizCommon.openNewPage(path);
},
},
};
......@@ -136,7 +64,6 @@ export default {
<style lang="scss" scoped>
$blue: $deep-blue;
.home-cr {
// background-image: url("@/assets/imgs/home/display-bg.png");
background-size: cover;
display: flex;
flex-direction: column;
......@@ -148,12 +75,7 @@ $blue: $deep-blue;
flex-direction: column;
align-items: center;
font-family: "Alibaba pu-hui-ti";
// .ch {
// color: #2d4bb5;
// margin-bottom: 12px;
// font-size: 32px;
// font-weight: bold;
// }
.en {
height: 35px;
font-size: 36px;
......@@ -164,14 +86,6 @@ $blue: $deep-blue;
margin-bottom: 30px;
}
// .title-img {
// height: 100px;
// margin-bottom: 40px;
// img {
// width: 100%;
// height: 100%;
// }
// }
.all {
height: 29px;
cursor: pointer;
......@@ -183,7 +97,6 @@ $blue: $deep-blue;
.text {
color: #2d4ab5;
margin-bottom: 8px;
// margin-top: 40px;
font-family: "Alibaba pu-hui-ti";
font-size: 48px;
font-weight: bold;
......
<!-- -->
<template>
<div class="home-display">
<div class="title wow animate__animated animate__fadeInUp">展览</div>
......@@ -10,12 +9,6 @@
查看全部
<img src="@/assets/imgs/home-new/dianji.png" alt="" />
</div>
<!-- <EntranceIcon
color="#fff"
text="查看更多"
@click.native="handleClickAll"
class="dianji wow animate__animated animate__fadeInUp"
/> -->
<div class="wrapper wow animate__animated animate__fadeInUp">
<div class="sliders">
<div class="slide-item" v-if="list[0]">
......@@ -28,49 +21,18 @@
</div>
</div>
<div class="img" @click="handleClick(list[0])">
<img :src="$getFullUrl(list[0].faceImageMiddleUrl || list[0].faceImagePressUrl)" alt="" />
<div class="img-name">{{ list[0].title }}</div>
</div>
</div>
</div>
<!-- <div
class="sliders"
:style="{
transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
}"
v-if="list.length > 0"
>
<div
:class="['slide-item', currentIndex == index ? 'active' : '']"
v-for="(item, index) in list"
:key="index"
>
<div class="content">
<div class="content-name">{{ item.title }}</div>
<div class="content-intro" v-html="item.intro || ''"></div>
<div class="dianji" @click="handleClick(item)">
<span class="txt">点击体验</span>
<img src="@/assets/imgs/home-new/dianji.png" alt="" />
</div>
</div>
<div class="img" @click="handleClick(item)">
<img
:src="$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)"
:src="
$getFullUrl(
list[0].faceImageMiddleUrl || list[0].faceImagePressUrl
)
"
alt=""
/>
<div class="img-name">{{ item.title }}</div>
<div class="img-name">{{ list[0].title }}</div>
</div>
</div>
</div> -->
<!-- <div class="pagination wow animate__animated animate__fadeInUp">
<ul>
<li v-for="(item, index) in list" :key="index" :class="list[currentIndex] == item ? 'active' : ''"
@click="handleChangePage(item)">
{{ index + 1 }}
</li>
</ul>
</div> -->
</div>
</div>
</div>
</template>
......@@ -79,7 +41,7 @@
import { getRecommendDisplay } from "@/api/display";
import EntranceIcon from "@/components/EntranceIcon";
import { titles } from "../../display/boutiqueTitles";
import tempDisplay from '../tempDisplay.json'
import { display } from "../tempData.js";
export default {
name: "Display",
components: {
......@@ -87,15 +49,12 @@ export default {
},
data() {
return {
list: tempDisplay,
list: display,
currentIndex: 0,
sliderItemWidth: 0,
boutiqueTitles:titles
boutiqueTitles: titles,
};
},
mounted() {
// this.loadList();
},
methods: {
async loadList() {
let res = await getRecommendDisplay();
......@@ -108,21 +67,7 @@ export default {
console.log(-this.currentIndex * this.sliderItemWidth);
},
handleClick(item) {
let index = this.boutiqueTitles.indexOf(item.title);
let newPage;
if (index == -1) {
const { themeType, exhibitionId } = item;
newPage = this.$router.resolve({
path: `/display/${themeType}/${exhibitionId}`,
});
} else {
newPage = this.$router.resolve({
path: `/boutique/${item.title}`,
});
}
setTimeout(() => {
window.open(newPage.href, "_blank");
}, 300);
this.$bizCommon.openDisplay(item);
},
getSlideItemWidth() {
setTimeout(() => {
......
<template>
<div class="home">
<!-- <div class="home-item">
<img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
</div> -->
<Banner class="home-item" />
<div class="part2">
<MuseumMap ref="MuseumMap" />
......@@ -10,13 +7,7 @@
<CulturalRelic ref="CulturalRelic" />
<Display ref="Display" />
</div>
<!-- <div class="bg2">
<img src="@/assets/imgs/home-new/bg2.png" alt="">
</div> -->
</div>
<!-- <Boutique class="home-item" ref="Boutique" /> -->
<!-- <Virtural class="home-item" ref="Virtural" /> -->
</div>
</template>
......@@ -74,4 +65,4 @@ export default {
// }
}
}
</style>
\ No newline at end of file
</style>
[
{
"crId": "80f7c57c768749fbad359e0ce9bce4a1",
"deptName": "贵州省博物馆",
"faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/54螭首金杯、金盘/middle/54.1螭首金杯.png",
"faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/54螭首金杯、金盘/low/54.1螭首金杯.png",
"faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/54螭首金杯、金盘/54.1螭首金杯.png",
"intro": "金杯系夹层,双螭缠绕其上,两螭首对称探出杯口成杯柄。承盘纹饰与金杯呼应,盘心为翻涌的浪花,双螭盘旋,口尾互衔。金杯、金盘共同构成教子升天纹。教子升天纹是宋代已降流行的纹饰,由天上的大龙和海水中的小龙组成,通过大龙呼唤小龙升天来借喻父母望子成龙的愿望,也可祝人高升。",
"name": "螭首金杯、金盘"
},
{
"crId": "07e98f7318ce43ceb9142c4c5a0a6963",
"deptName": "贵州省博物馆",
"faceImage": "751f5614ad96445dbef549391bf50557",
"faceImageMiddleUrl": "https://www.gzswbsy.com/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/51雀绕花枝铜镜/middle/51.雀绕花枝铜镜.png",
"faceImagePressUrl": "https://www.gzswbsy.com/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/51雀绕花枝铜镜/low/51.雀绕花枝铜镜.png",
"faceImageUrl": "https://www.gzswbsy.com/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/51雀绕花枝铜镜/51.雀绕花枝铜镜.png",
"intro": "葵花形,圆钮。圆形镜分区,内区为四禽鸟同向排列绕钮,其间配以花枝,外区为蜂蝶、花枝各四组。内、外区相映成趣,可谓一副花鸟小景。唐代诗人王勃《上皇甫常伯启》“鹊镜临春,妍媸自远”、薛逢《追昔行》“嫁时宝镜依然在,鹊影菱花满光彩”、刘元淑《妾薄命》“飞鹊镜前妆梳断”等诗句都可能指的是这类镜子。特别是“鹊影菱花满光彩”一句,形象的描述了这种镜子的形状和纹饰。贵州古墓中出土的唐镜,是这几座唐墓断代的最直接证据,展现了唐文化对贵州地域的影响。",
"name": "雀绕花枝铜镜"
},
{
"crId": "7ccbc32192e5486ca944a12f9002edc2",
"deptName": "贵州省博物馆",
"faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/59平播鼎/middle/59.平播鼎.png",
"faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/59平播鼎/low/59.平播鼎.png",
"faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/59平播鼎/59.平播鼎.png",
"intro": "器身圆形,深腹,弧形底,附兽首柱状三足。口沿处饰两道弦纹,中间饰云雷纹,下面横列篆书“平播安黔之鼎”,6字环钟一圈,腹部满铸篆体铭文,计56行,每行5字,起首行多一字。铭文之下也是两道弦纹夹一圈云雷纹。",
"name": "平播鼎"
},
{
"crId": "07e32dbd6db9478d904c48e024f0adb1",
"deptName": "贵州省博物馆",
"faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/31铜车马/middle/31.铜车马.png",
"faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/31铜车马/low/31.铜车马.png",
"faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/31铜车马/31.铜车马.png",
"intro": "铜车马属于辎车,马由首、尾、颈、足、躯、耳等11段装配,除双耳外,其余9段钧用砂模空心浇铸,铜壳菲薄,铸技高超,马的神态逼真,昂首翘尾,鬃毛平整,竖耳咧嘴作嘶鸣状,十分矫健。车属双曲辕车,双轮十二幅。卷曲成U形覆瓦状的车棚厚度仅1毫米,轻柔如纸,是迄今为止国内出土的汉墓中的车马里最完整的一个,这对了解汉代车制、冶炼工艺具有相当重要的价值。",
"name": "铜车马"
},
{
"crId": "2f670d1ebf8e4297b1c89f3299a6187a",
"faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/71青釉陶兽水盂/middle/71.青釉陶兽水盂.png",
"faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/71青釉陶兽水盂/low/71.青釉陶兽水盂.png",
"faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/71青釉陶兽水盂/71.青釉陶兽水盂.png",
"intro": "塑为狮形,昂首站立,全身用细纹刻画出卷曲的毛发,狮背有一长颈口,狮身饰青釉,开鱼牙片纹,看起来形态生动、雄浑。",
"name": "青釉陶兽水盂"
},
{
"crId": "b426539086f2474586d7a77d67d0c961",
"deptName": "贵州省博物馆",
"faceImageMiddleUrl": "https://www.gzswbsy.com/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/55金凤冠/middle/55.金凤冠.png",
"faceImagePressUrl": "https://www.gzswbsy.com/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/55金凤冠/low/55.金凤冠.png",
"faceImageUrl": "https://www.gzswbsy.com/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/55金凤冠/55.金凤冠.png",
"intro": "保存基本完整,现存20个配件,组成完整的一件凤冠。据分析,金凤冠的主人可能是播州杨氏土司杨纲的夫人,其规制僭越了明代礼仪。此金凤冠系播州杨氏自行制作,其工艺体现出典型的明代特点,一是打胎、累丝、錾刻、宝石镶嵌、锻造,皆为典型的明代金银细金工艺。二是符合明代金银累丝、錾刻与宝石镶嵌结合的金银器首饰的主要工艺特点。三是体现出明代开始盛行红、蓝宝石搭配于金饰上的典型做法,而其所用宝石数量巨大。",
"name": "金凤冠"
}
]
\ No newline at end of file
[
// 本文件的临时文物和展览的数据仅供暂时展示,后续要调整需要重新请求接口
// 本文件的文物和展览都是线上环境,测试环境并不存在这些文物,因此测试环境会显示失败
const crBaseUrlIp = `http://114.115.157.218:9602/files/culturalRelicImport`
const crBaseUrlDomain = `https://www.gzswbsy.com/files/culturalRelicImport/`
const displayBaseUrlIp = `http://114.115.157.218:9602/files/exhibitionImport/`
const displayBaseUrlDomain = `https://www.gzswbsy.com/files/exhibitionImport/`
export const crs = [
{
"crId": "80f7c57c768749fbad359e0ce9bce4a1",
"deptName": "贵州省博物馆",
"faceImageMiddleUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/54螭首金杯、金盘/middle/54.1螭首金杯.png",
"faceImagePressUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/54螭首金杯、金盘/low/54.1螭首金杯.png",
"faceImageUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/54螭首金杯、金盘/54.1螭首金杯.png",
"intro": "金杯系夹层,双螭缠绕其上,两螭首对称探出杯口成杯柄。承盘纹饰与金杯呼应,盘心为翻涌的浪花,双螭盘旋,口尾互衔。金杯、金盘共同构成教子升天纹。教子升天纹是宋代已降流行的纹饰,由天上的大龙和海水中的小龙组成,通过大龙呼唤小龙升天来借喻父母望子成龙的愿望,也可祝人高升。",
"name": "螭首金杯、金盘"
},
{
"crId": "07e98f7318ce43ceb9142c4c5a0a6963",
"deptName": "贵州省博物馆",
"faceImage": "751f5614ad96445dbef549391bf50557",
"faceImageMiddleUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/51雀绕花枝铜镜/middle/51.雀绕花枝铜镜.png",
"faceImagePressUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/51雀绕花枝铜镜/low/51.雀绕花枝铜镜.png",
"faceImageUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/51雀绕花枝铜镜/51.雀绕花枝铜镜.png",
"intro": "葵花形,圆钮。圆形镜分区,内区为四禽鸟同向排列绕钮,其间配以花枝,外区为蜂蝶、花枝各四组。内、外区相映成趣,可谓一副花鸟小景。唐代诗人王勃《上皇甫常伯启》“鹊镜临春,妍媸自远”、薛逢《追昔行》“嫁时宝镜依然在,鹊影菱花满光彩”、刘元淑《妾薄命》“飞鹊镜前妆梳断”等诗句都可能指的是这类镜子。特别是“鹊影菱花满光彩”一句,形象的描述了这种镜子的形状和纹饰。贵州古墓中出土的唐镜,是这几座唐墓断代的最直接证据,展现了唐文化对贵州地域的影响。",
"name": "雀绕花枝铜镜"
},
{
"crId": "7ccbc32192e5486ca944a12f9002edc2",
"deptName": "贵州省博物馆",
"faceImageMiddleUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/59平播鼎/middle/59.平播鼎.png",
"faceImagePressUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/59平播鼎/low/59.平播鼎.png",
"faceImageUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/59平播鼎/59.平播鼎.png",
"intro": "器身圆形,深腹,弧形底,附兽首柱状三足。口沿处饰两道弦纹,中间饰云雷纹,下面横列篆书“平播安黔之鼎”,6字环钟一圈,腹部满铸篆体铭文,计56行,每行5字,起首行多一字。铭文之下也是两道弦纹夹一圈云雷纹。",
"name": "平播鼎"
},
{
"crId": "07e32dbd6db9478d904c48e024f0adb1",
"deptName": "贵州省博物馆",
"faceImageMiddleUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/31铜车马/middle/31.铜车马.png",
"faceImagePressUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/31铜车马/low/31.铜车马.png",
"faceImageUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/31铜车马/31.铜车马.png",
"intro": "铜车马属于辎车,马由首、尾、颈、足、躯、耳等11段装配,除双耳外,其余9段钧用砂模空心浇铸,铜壳菲薄,铸技高超,马的神态逼真,昂首翘尾,鬃毛平整,竖耳咧嘴作嘶鸣状,十分矫健。车属双曲辕车,双轮十二幅。卷曲成U形覆瓦状的车棚厚度仅1毫米,轻柔如纸,是迄今为止国内出土的汉墓中的车马里最完整的一个,这对了解汉代车制、冶炼工艺具有相当重要的价值。",
"name": "铜车马"
},
{
"crId": "2f670d1ebf8e4297b1c89f3299a6187a",
"faceImageMiddleUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/71青釉陶兽水盂/middle/71.青釉陶兽水盂.png",
"faceImagePressUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/71青釉陶兽水盂/low/71.青釉陶兽水盂.png",
"faceImageUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/71青釉陶兽水盂/71.青釉陶兽水盂.png",
"intro": "塑为狮形,昂首站立,全身用细纹刻画出卷曲的毛发,狮背有一长颈口,狮身饰青釉,开鱼牙片纹,看起来形态生动、雄浑。",
"name": "青釉陶兽水盂"
},
{
"crId": "b426539086f2474586d7a77d67d0c961",
"deptName": "贵州省博物馆",
"faceImageMiddleUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/55金凤冠/middle/55.金凤冠.png",
"faceImagePressUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/55金凤冠/low/55.金凤冠.png",
"faceImageUrl": crBaseUrlIp + "/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/55金凤冠/55.金凤冠.png",
"intro": "保存基本完整,现存20个配件,组成完整的一件凤冠。据分析,金凤冠的主人可能是播州杨氏土司杨纲的夫人,其规制僭越了明代礼仪。此金凤冠系播州杨氏自行制作,其工艺体现出典型的明代特点,一是打胎、累丝、錾刻、宝石镶嵌、锻造,皆为典型的明代金银细金工艺。二是符合明代金银累丝、錾刻与宝石镶嵌结合的金银器首饰的主要工艺特点。三是体现出明代开始盛行红、蓝宝石搭配于金饰上的典型做法,而其所用宝石数量巨大。",
"name": "金凤冠"
}
]
export const display = [
{
"audios": "",
"browseCount": "43",
......@@ -13,8 +76,8 @@
"exhibitionId": "d2a465fb97b94ed0a5e43d2b12d9f658",
"faceImage": "6afd15d61d1a499fbce682ef27405241",
"faceImageMiddleUrl": "",
"faceImagePressUrl": "https://www.gzswbsy.com/files/exhibitionImport/2022-11-22-7aee32277e2c4626891e3718ab538c6c/贵州省民族博物馆-技艺与传承展览/faceImage/low/1 世居展千年之行 序厅.JPG",
"faceImageUrl": "https://www.gzswbsy.com/files/exhibitionImport/2022-11-22-7aee32277e2c4626891e3718ab538c6c/贵州省民族博物馆-技艺与传承展览/faceImage/1 世居展千年之行 序厅.JPG",
"faceImagePressUrl": displayBaseUrlIp + "/2022-11-22-7aee32277e2c4626891e3718ab538c6c/贵州省民族博物馆-技艺与传承展览/faceImage/low/1 世居展千年之行 序厅.JPG",
"faceImageUrl": displayBaseUrlIp + "/2022-11-22-7aee32277e2c4626891e3718ab538c6c/贵州省民族博物馆-技艺与传承展览/faceImage/1 世居展千年之行 序厅.JPG",
"images": "3285c9bf3cda4739b1f2b4fb94d40bd5,9b60ba37d2a6466eacd8d5bbb3ec44be,681128276435422f948edd875aba0d9a,e29b2c28ae844cfba95b5535311ee407,0848b1de57d24f3d838e8c092d906bd5,1b058f5ae48a40dca72a0fc4e65b209c,aee5a5aa0d734d838667abf27c87967d,0631664e0dd14ea99851d691a6801945,e7a347e0cdf74cba82497155c1dc65e7,11e31af3344e4be8abc9cc871520e394,cfbb49db9c6547d28afb83012d9d9b57,fdd3c8ab006b4b91b1589c9ce6542b36,0278f44b292944ab98e3b8b6ce8f5353,85dca83add6747dab686448f30121c33,0e0372005dc842ba8b2d6db4d06d6d70,88bfc8a07387437dbcf0f321ed1c5de8,bc6214e043be4bc0943b8a69ed322221,6c1afed255ae41c79384f31ec2871650,1338ad161ecd4f0c9245532552ed8dae,2153a84857454ff79d4771c2e48eac46,14465b41b4ec43a285dc8cce6c9a6741,a6879feb74924969848724de4b0714ed,3e7e9d11148a44b8969f87cbe0464c15,34edd54a9ac14d3289b5eb6e961f1ec0,c8eda2bbfa784a12823826032b1fcb1e,f56080c8802e49c79582491aebcddce9,0334ae54ca9d4c509d29ee0dc0f4512f,00748b9ebd38479bad3d6023f96d0620,16877787f4c14d1ba44cf9748a4b1ef3,4fcd761e85b542c1abff12394a33674e,9fbdfbfddf5f495c99c9485d6eb2998f,40900fc96e9b416983f89447e9e5868e,c3f587cf28f4484c915f44838e226e14,32cb4a275fad45e9a8493301c5aba125,1827ec00bcfc4e23b1d1d74e8a52d5d8,1d50f42e3cd94e719564e16b1a57c140",
"intro": "《记忆与传承——贵州世居民族历史文化展》作为开创性的民族类历史、文化展览,历时7年,精心打磨,在2019年5月18日正式面向观众开放。筹备期间,就受到贵州省各民族学会和民族学专家高度赞誉,展览一经推出,便备受社会各界的欢迎和关注。\n“记忆与传承——贵州世居民族历史文化展”荣获三项全国性殊荣:\n2019年12月入选国家文物局“博苑掇英——全国博物馆陈列艺术交流展(2009-2019年)”,作为十年来全国博物馆50个最具有代表性、学术性、创新性的优秀陈列艺术成果之一,参加该交流展,在全国5000家参选单位中脱颖而出,也是贵州唯一入选作品。\n2020年8月入选国家文物局2020年度“弘扬优秀传统文化、培育社会主义核心价值观”主题展览征集推介项目。\n2020年12月荣获首届中国展览艺术与展示技术创意大赛空间设计类“金展奖”。\n展览立足民族和谐与民族平等,通过深度挖掘贵州世居民族的历史由来、起源与发展,解读贵州各族同胞相助相容、你中有我、我中有你的历史渊源,以文化凸显贵州各民族的交融汇聚,以历史写就贵州各族人民对中华民族共同体的构铸。\n一 展览内容\n 展览分历史、文化2部分,分别展示贵州各世居民族历史源流脉络和各类丰富多彩的民族文化风情。\n经田野调查和广泛征求意见,深入村寨筛选征集各民族代表性文物,通过57组1191件文物,以主题选定和组织各类精美文物,以文物关联和变迁展示历史脉络,以文物工艺展现文化魅力,掌握展陈节奏,有效诠释主题。\n千年之行——从历史角度,按苗、布依、侗、土家等18个世居民族独立章节深挖各民族源流和发展脉络,讲述“贵州民族团结典范”的故事,解答贵州各民族和谐共处的因由。\n大美不言——介绍了“你中有我、我中有你”的多彩贵州民族文化,通过“寻耕牧人家”“看百彩千辉”“探礼俗民风”“赏歌舞曲艺”四大章节,分类介绍农林、建筑、药食、织绣、服饰、风俗、节庆和歌戏等风情,在林业中见生态、在苗绣中见精彩、在服饰中见时尚、在歌舞中见幸福。\n\n展览形式\n该展览的形式设计坚持遵循高要求的审美和艺术性原则,受到中国传统美术艺术“移步易景”的东方艺术审美启发,充分调动贵州民族艺术资源,分别为各族提炼出代表性的特征、符号、色彩等,运用到形式设计的空间氛围营造中。观众每进入一个单元版块,都能感受到与之前版块截然不同的展览氛围,各民族的特点都在展区色调、墙面质感、文化象征中体现出其自身的独特氛围,农林牧渔版块开阔明快的自然色彩氛围、婚恋喜嫁部分的喜庆热烈、银饰版块的灯光质感……每一个单元的展览形式都经过精心的挖掘设计,以保证观众每前进一步都有新鲜感。\n历史厅“千年之行”总体氛围考虑到需要传达给观众贵州各民族历史前进步伐的厚重感,多采用明度或饱和度较低的色调,同时又根据民族使用不同组合的丰富色彩搭配。对每个民族,提炼出一个代表性的图腾,作为单元标题装饰。通过提炼各民族特色色彩、民族图腾、文化符号等,结合运用到单元标题和展区底色中,以营造不同民族的特色氛围对展示空间进行划分,让观众在进入每个民族的展示空间时都直观认知到民族的转换和该民族的特色。\n文化厅“大美不言”总体氛围,在保护观众视觉舒适度的前提下,基础色主要为灰色等饱和度较低的色彩,但不同板块的装饰色根据主题选取不同的明快色调,增加空间的活泼感和明亮度,以丰富色彩响应多彩贵州的主题。\n贵州省民族博物馆展厅为品字形的平面结构,每层展厅可用展厅面积约为2平方米,为充分利用展览空间,展览展线设计根据历史厅和文化厅分别安放在二楼和三楼。通过空间的分割延长展线,以保证在有限的展厅面积中完整的展示出每个单元的内容。\n在展览中,根据内容设计和展示文物,结合使用大量成熟的高科技新技术和丰富的展示手段。展示了大型喷绘、地图、场景、沙盘、建筑模型、人像、光影效果独立展柜、多媒体影音设备、地面或台面体感互动设备等效果好,易维护的展示设施,以长期保证观众观赏到完整、内涵丰富的展览。例如,在民族生活空间的展示上,通过营造局部真实的室内空间引导观众感受真实的贵州世居民族生活;在民族纺织绣染等艺术工艺作品的展示上,通过地面互动投影让观众在互动活动中更多的感受到民族艺术的不同风格;在民族歌舞曲艺的展示上,通过幻影成像、多媒体音视频,让观众直观享受民族歌舞的艺术魅力。展览通过一系列丰富的形式设计的手段,尽可能保证可以长期带给观众丰富立体的观展体验。",
"keyword": "",
......
<template>
<div class="display">
<!-- <NavBar /> -->
<!-- <ListBanner
title="共计已收录博物馆"
:num="list.total"
:info="['州馆', '展示']"
/> -->
<div class="display" id="anchor">
<div class="content-wrapper">
<div class="content">
<el-row
......@@ -56,16 +50,11 @@
:span="item.status == 1 ? 8 : 0"
class="cr-item"
@click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records"
:key="index"
>
<!-- id为1 的是文旅厅 -->
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1 && item.id != '1'"
>
<div class="container" v-if="item.status == 1 && item.id != '1'">
<div class="img-container">
<img
:src="
......@@ -107,7 +96,7 @@
<script>
import ListBanner from "@/components/ListBanner";
import { getMuseumListPage } from "@/api/org";
import { mapGetters } from "vuex";
import { mapGetters, mapActions } from "vuex";
export default {
name: "Museum",
components: { ListBanner },
......@@ -138,26 +127,20 @@ export default {
...mapGetters(["dicts"]),
},
async created() {
await this.$store.dispatch("dict/getDictList", ["displayType"]);
let res = await this.$store.dispatch("dict/getDictTree", [
"culturalRelicYears",
]);
await this.getDictList(["displayType"]);
const res = await this.getDictTree(["culturalRelicYears"]);
this.culturalRelicYears = res.culturalRelicYears;
},
mounted() {
this.loadData();
this.loadRegionTree();
},
// watch: {
// keyword(value) {
// debounce(this.handleKeyWordChange(value), 1000); //500ms
// },
// },
methods: {
...mapActions("dict", ["getDictList", "getDictTree"]),
...mapActions("org", ["getSysRegionTreeData"]),
search() {
this.loadData();
},
async loadData() {
const params = {
page: this.list.current,
......@@ -168,6 +151,7 @@ export default {
let res = await getMuseumListPage(params);
if (res.code == 0) {
this.list = res.data;
this.$bizCommon.scrollToTop();
}
},
// 改变页容量
......@@ -187,13 +171,8 @@ export default {
},
handleClick(item) {
const { id } = item;
const newPage = this.$router.resolve({
path: `museum/${id}`,
});
window.open(newPage.href, "_blank");
// this.$router.push({
// path: `museum/${id}`,
// });
const path = `museum/${id}`;
this.$bizCommon.openNewPage(path);
},
handleTypeChange(value) {
......@@ -213,7 +192,7 @@ export default {
loadRegionTree() {
let parentId = "";
this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => {
this.getSysRegionTreeData(parentId).then((res) => {
this.regionTree = res;
loopTree(this.regionTree);
function loopTree(arr) {
......@@ -229,12 +208,6 @@ export default {
}
});
},
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
},
};
</script>
......@@ -252,10 +225,6 @@ $text-indent: 16px;
.search {
padding: 48px 0 32px;
}
.search-button {
height: 44px;
}
.total {
padding-bottom: 16px;
display: flex;
......
<template>
<div class="container wow animate__animated animate__fadeInUp" v-if="url">
<div
@click="handleClick(item)"
class="container wow animate__animated animate__fadeInUp"
v-if="url"
>
<div class="img">
<img :src="url" v-if="url" width="100%" class="img" lazy />
<img
......@@ -12,7 +16,7 @@
/>
</div>
<div class="desc">
<span class="name">{{ title }}</span>
<span class="name">{{ item.title }}</span>
</div>
</div>
</template>
......@@ -21,16 +25,28 @@
export default {
name: "CulturalRelicCard",
props: {
url: {
type: String,
default: "",
item: {
type: Object,
default: () => {},
},
title: {
type: String,
default: "",
},
computed: {
url() {
if (!this.item) {
return;
}
return this.item.faceImagePressUrl || this.item.faceImageUrl;
},
},
methods: {
handleClick(item) {
if (item.sourceType === "biz_cultural_relic") {
this.$bizCommon.openCr(item);
} else {
this.$bizCommon.openDisplay(item);
}
},
},
methods: {},
};
</script>
......
......@@ -9,7 +9,7 @@
>
<el-row :gutter="20">
<el-col :span="8" v-for="(item, index) in list.records" :key="index">
<Card :title="item.title" :url="item.faceImagePressUrl || item.faceImageUrl"
<Card :item="item"
/></el-col>
</el-row>
<el-empty
......@@ -18,7 +18,7 @@
></el-empty>
</el-tab-pane>
</el-tabs>
<div class="pagination" v-if="list.records.length>0">
<div class="pagination" v-if="list.records.length > 0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
......@@ -157,4 +157,4 @@ export default {
.pagination {
margin: 20px;
}
</style>
\ No newline at end of file
</style>
......@@ -9,9 +9,7 @@
>
<el-row :gutter="20">
<el-col :span="8" v-for="(item, index) in list.records" :key="index">
<Card
:title="item.title"
:url="item.faceImagePressUrl || item.faceImageUrl"
<Card :item="item"
/></el-col>
</el-row>
<el-empty
......@@ -20,7 +18,7 @@
></el-empty>
</el-tab-pane>
</el-tabs>
<div class="pagination" v-if="list.records.length>0">
<div class="pagination" v-if="list.records.length > 0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
......@@ -153,4 +151,4 @@ export default {
.pagination {
margin: 20px;
}
</style>
\ No newline at end of file
</style>
......@@ -8,15 +8,8 @@
:name="tab.name"
>
<el-row :gutter="20">
<el-col
:span="8"
v-for="(item, index) in list.records"
:key="index"
@click.native="handleClick(item)"
>
<Card
:title="item.title"
:url="item.faceImagePressUrl || item.faceImageUrl"
<el-col :span="8" v-for="(item, index) in list.records" :key="index">
<Card :item="item"
/></el-col>
</el-row>
<el-empty
......@@ -60,12 +53,6 @@ export default {
default: () => [],
},
},
// watch: {
// activeName(type) {
// console.log('type',type);
// this.loadList(type);
// },
// },
data() {
return {
Tabs: [
......@@ -122,20 +109,6 @@ export default {
this.list.current = current;
this.loadList(this.activeName);
},
handleClick(item) {
switch (this.activeName) {
case "biz_cultural_relic":
this.$router.push({
path: "culturalRelic/" + item.sourceId,
});
break;
case "biz_exhibition":
this.$router.push({
path: "display/" + item.sourceId,
});
break;
}
},
},
};
</script>
......@@ -183,4 +156,4 @@ export default {
.pagination {
margin: 20px;
}
</style>
\ No newline at end of file
</style>
......@@ -85,6 +85,7 @@ export default {
this.currentImg = fileUrl;
this.imgList = res.data;
this.showResult = true;
this.$refs.uploader.clearFiles();
this.$nextTick(() => {
this.$refs["List"].getWaterfallHeight();
});
......@@ -116,6 +117,7 @@ export default {
this.$message.success(`上传成功并获得${length}张相似图片`);
this.imgList = res.data;
this.showResult = true;
this.$refs.uploader.clearFiles();
loading.close();
this.showCurrentImg(file);
this.clearRouterQuery();
......
......@@ -268,7 +268,6 @@ $text-indent: 16px;
display: flex;
justify-content: center;
align-items: center;
// background: url("@/assets/imgs/list/search-button-bg.png");
background-size: 100% 100%;
color: #444;
font-size: 14px;
......
......@@ -30,16 +30,18 @@ module.exports = defineConfig({
compress: false, // 开启压缩
proxy: {
"/api": {
// target: "https://www.gzswbsy.com/api",
target: "http://222.85.214.245:9602/api",
// target: "https://www.gzswbsy.com/api",//生产环境地址
// target: "http://222.85.214.245:9602/api",//测试环境地址
target: 'https://114.115.157.218/api/',//生产环境ip
changeOrigin: true,
pathRewrite: {
"^/api": "",
},
},
"/files": {
// target: "https://www.gzswbsy.com/files",
target: "http://222.85.214.245:9602/files",
// target: "https://www.gzswbsy.com/files",//生产环境地址
// target: "http://222.85.214.245:9602/files",//测试环境地址
target: 'https://114.115.157.218/files/',//生产环境ip
changeOrigin: true,
pathRewrite: {
"^/files": "",
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论