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

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

上级 496b1a68
...@@ -307,6 +307,7 @@ li { ...@@ -307,6 +307,7 @@ li {
#app { #app {
// overflow-y: visible;.el-backtop // overflow-y: visible;.el-backtop
#navbar { #navbar {
+div { +div {
...@@ -314,6 +315,7 @@ li { ...@@ -314,6 +315,7 @@ li {
} }
} }
} }
.el-backtop { .el-backtop {
z-index: 99; z-index: 99;
} }
...@@ -377,4 +379,18 @@ li { ...@@ -377,4 +379,18 @@ li {
// 描述列表项垂直居中 // 描述列表项垂直居中
.el-descriptions-item__container { .el-descriptions-item__container {
align-items: center; 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; //主题深蓝 $deep-blue: #252F57; //主题深蓝
$blue: #2365D3; // $blue: #2365D3; //
$yellow: #dfab46; //辅色黄色,用于高亮,选中菜单等 $yellow: #dfab46; //辅色黄色,用于高亮,选中菜单等
$cr-bg: #374475; //文物的背景颜色
$pu-hui-ti: "Alibaba-pu-hui-ti"; //阿里巴巴普惠体 $pu-hui-ti: "Alibaba-pu-hui-ti"; //阿里巴巴普惠体
$siyuan-song-bold: "SourceHanSerifCN-Bold"; //思源宋体加粗 $siyuan-song-bold: "SourceHanSerifCN-Bold"; //思源宋体加粗
......
// 此文件放置共用的一些方法,方便统一管理 // 此文件放置共用的一些方法,方便统一管理
import router from "@/router"; import router from "@/router";
import { Message } from 'element-ui' import { Message } from 'element-ui'
import boutiqueTool from './boutique'
const bizCommon = { const bizCommon = {
openNewPage(path, query = {}) { openNewPage(path, query = {}) {
const newPage = router.resolve({ const newPage = router.resolve({
...@@ -20,7 +21,7 @@ const bizCommon = { ...@@ -20,7 +21,7 @@ const bizCommon = {
if (file3dUrl) { if (file3dUrl) {
const { name, const { name,
deptName, deptName,
yearslabel, yearsLabel,
detailSize, detailSize,
intro } = item intro } = item
const path = "/3dDetail"; const path = "/3dDetail";
...@@ -28,9 +29,9 @@ const bizCommon = { ...@@ -28,9 +29,9 @@ const bizCommon = {
url3d, url3d,
name, name,
deptName, deptName,
yearslabel,
detailSize, detailSize,
intro, intro,
yearsLabel
}; };
const query = { const query = {
file3dUrl: encodeURI(file3dUrl), file3dUrl: encodeURI(file3dUrl),
...@@ -40,13 +41,47 @@ const bizCommon = { ...@@ -40,13 +41,47 @@ const bizCommon = {
return; return;
} }
if (url3d) { if (url3d) {
const msg = message.info("即将打开3D模型..."); const msg = Message.info("即将打开3D模型...");
setTimeout(() => { setTimeout(() => {
msg.close(); msg.close();
window.open(this.detail.url3d, "_blank"); window.open(url3d, "_blank");
}, 1000); }, 1000);
return; 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 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 { ...@@ -98,6 +98,7 @@ export default {
}, },
methods: { methods: {
handleChangeButton(item) { handleChangeButton(item) {
console.log(item);
this.currentButton = item; this.currentButton = item;
}, },
handleOpenIntro() { handleOpenIntro() {
...@@ -117,14 +118,15 @@ export default { ...@@ -117,14 +118,15 @@ export default {
} }
if (info) { if (info) {
this.info = JSON.parse(info); this.info = JSON.parse(info);
const { yearsLabel, detailSize } = this.info;
this.buttons = [ this.buttons = [
{ {
label: "年代", label: "年代",
value: info.yearsLabel, value: yearsLabel || "不详",
}, },
{ {
label: "尺寸", label: "尺寸",
value: info.detailSize, value: detailSize || "不详",
}, },
]; ];
this.currentButton = this.buttons[0]; 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> <template>
<div class="botique"> <div class="boutique">
<SMGZ v-if="currentTitle == '神秘贵州'" /> <component :is="currentComponent" />
<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> </div>
</template> </template>
<script> <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 { export default {
components: { SMGZ, YLGDYW, JYYCC, SDCS, JYSG, LZST, LGGZSGW }, components: {
watch: { // 一期
currentTitle: { smgz: () => import("./components/smgz/index"), //神秘贵州
handler: function (value) { ylgdyw: () => import("./components/ylgdyw/index"), //夜郎的疑问
let color = ""; jyycc: () => import("./components/jyycc/index"), //记忆与传承
if (!value) { sdcs: () => import("./components/sdcs/index"), //四渡赤水出奇兵
return; jysg: () => import("./components/jysg/index"), //贵州教育史馆
} lzsg: () => import("./components/lzsg/index"), //梭戛博物馆陈列展览
switch (value) { zggzsgwdzjlz: () => import("./components/zggzsgwdzjlz/index"), //中共贵州省工委旧址纪念馆
case "四渡赤水出奇兵": // 二期
color = "4"; wrf: () => import("./components/wrf/index"), //王若飞生平事迹展
break; frgz: () => import("./components/frgz/index"), //富饶贵州
case "神秘贵州": lphy: () => import("./components/lphy/index"), //黎平会议纪念馆
color = "5"; zs: () => import("./components/zs/index"), //追随-贵州奋斗者的故事
break; wmsh: () => import("./components/wmsh/index"), //人类起源·乌蒙史话
case "记忆与传承": gzgs: () => import("./components/gzgs/index"), //百年征程 贵州故事
color = "6";
break;
case "夜郎的疑问":
color = "7";
break;
// case "cjm":
// color = "1";
}
this.$store.commit("app/CHANGE_NAV_COLOR", color);
},
immediate: true,
},
}, },
data() { data() {
return { return {
currentTitle: "", currentComponent: "smgz",
}; };
}, },
mounted() { created() {
this.currentTitle = this.$route.params.title; this.init();
},
methods: {
init() {
const { title } = this.$route.params;
console.log("title", title);
this.currentComponent = title;
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.botique { .boutique {
// margin-bottom: -$nav-height;
> div { > div {
// transform: translateY(-$nav-height);
margin-top: -$nav-height; margin-top: -$nav-height;
} }
} }
......
...@@ -31,16 +31,10 @@ ...@@ -31,16 +31,10 @@
产品来源:{{ productInfo.deptName }} 产品来源:{{ productInfo.deptName }}
</div> </div>
</div> </div>
<!-- <div class="footer">
<div class="dc-right">
<img src="@/assets/imgs/ccproduct/dc4.png" alt="" />
</div>
</div> -->
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getCcProductDetail } from "@/api/literature"; import { getCcProductDetail } from "@/api/literature";
import Breadcrumb from "@/components/Breadcrumb/index"; import Breadcrumb from "@/components/Breadcrumb/index";
...@@ -178,4 +172,4 @@ export default { ...@@ -178,4 +172,4 @@ export default {
// } // }
} }
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="cultural-relic"> <div class="cultural-relic" id="anchor">
<!-- <ListBanner
title="共计已上线文创产品"
:num="list.total"
unit="件/套"
:info="['文创', '展示']"
/> -->
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<el-row <el-row
...@@ -73,15 +67,10 @@ ...@@ -73,15 +67,10 @@
:span="item.status == 1 ? 6 : 0" :span="item.status == 1 ? 6 : 0"
class="cr-item" class="cr-item"
@click.native="handleClick(item)" @click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records" v-for="(item, index) in list.records"
:key="index" :key="index"
> >
<div <div class="container" v-if="item.status == 1">
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="img-container"> <div class="img-container">
<img <img
:src="$getFullUrl(item.imagesVo[0].pressUrl)" :src="$getFullUrl(item.imagesVo[0].pressUrl)"
...@@ -99,18 +88,6 @@ ...@@ -99,18 +88,6 @@
<span>{{ item.deptName }}</span> <span>{{ item.deptName }}</span>
</div> </div>
</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> </div>
</div> </div>
...@@ -139,13 +116,11 @@ ...@@ -139,13 +116,11 @@
</template> </template>
<script> <script>
import ListBanner from "@/components/ListBanner";
import { getCcProductList } from "@/api/literature"; import { getCcProductList } from "@/api/literature";
import { getAllDeptIdAndName } from "@/api/org"; import { getAllDeptIdAndName } from "@/api/org";
import { mapGetters } from "vuex"; import { mapActions } from "vuex";
export default { export default {
name: "ccProduct", name: "ccProduct",
components: { ListBanner },
data() { data() {
return { return {
list: { list: {
...@@ -168,22 +143,16 @@ export default { ...@@ -168,22 +143,16 @@ export default {
deptList: [], deptList: [],
}; };
}, },
computed: {},
mounted() { mounted() {
this.loadData(); this.loadData();
this.loadRegionTree(); this.loadRegionTree();
this.loadDeptData(); this.loadDeptData();
}, },
watch: {
// keyword(value) {
// debounce(this.handleKeyWordChange(value), 1000); //500ms
// },
},
methods: { methods: {
...mapActions("org", ["getSysRegionTreeData"]),
search() { search() {
this.loadData(); this.loadData();
}, },
async loadData() { async loadData() {
const params = { const params = {
page: this.list.current, page: this.list.current,
...@@ -195,6 +164,7 @@ export default { ...@@ -195,6 +164,7 @@ export default {
let res = await getCcProductList(params); let res = await getCcProductList(params);
if (res.code == 0) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
this.$bizCommon.scrollToTop();
} }
}, },
// 改变页容量 // 改变页容量
...@@ -211,11 +181,8 @@ export default { ...@@ -211,11 +181,8 @@ export default {
handleClick(item) { handleClick(item) {
const { bccpId } = item; const { bccpId } = item;
const newPage = this.$router.resolve({ const path = "ccProduct/" + bccpId;
path: "ccProduct/" + bccpId, this.$bizCommon.openNewPage(path);
});
window.open(newPage.href, "_blank");
// this.$router.push(`ccProduct/${bccpId}`);
}, },
handleClickThreeD() { handleClickThreeD() {
this.onlyShow3d = !this.onlyShow3d; this.onlyShow3d = !this.onlyShow3d;
...@@ -228,16 +195,6 @@ export default { ...@@ -228,16 +195,6 @@ export default {
this.keyword = value; this.keyword = value;
this.loadData(); this.loadData();
}, },
handleTo3D(url3d) {
window.open(url3d, "_blank");
},
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
handleRegionChange(value) { handleRegionChange(value) {
this.regionCode = value; this.regionCode = value;
...@@ -251,7 +208,7 @@ export default { ...@@ -251,7 +208,7 @@ export default {
loadRegionTree() { loadRegionTree() {
let parentId = ""; let parentId = "";
this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => { this.getSysRegionTreeData(parentId).then((res) => {
this.regionTree = res; this.regionTree = res;
loopTree(this.regionTree); loopTree(this.regionTree);
function loopTree(arr) { function loopTree(arr) {
......
...@@ -51,20 +51,14 @@ export default { ...@@ -51,20 +51,14 @@ export default {
}, },
computed: { computed: {
imagesVo() { imagesVo() {
if (!this.detail.imagesVo) { if (!this.detail || !this.detail.imagesVo) {
return []; return [];
} }
const imagesVo = this.getImagesVo(); const imagesVo = this.getImagesVo();
return imagesVo; return imagesVo;
}, },
}, },
// watch: {
// currentFileId(value) {
// if (value) {
// }
// },
// },
mounted() { mounted() {
this.switchImg(); this.switchImg();
}, },
......
<template> <template>
<div class="cultural-relic"> <div class="cultural-relic" id="anchor">
<!-- <ListBanner <div
title="共计文物" class="search-bar wow animate__animated animate__fadeIn"
unit="件/套" id="searchBar"
:info="['文物', '展示']" >
:num="list.total"
/> -->
<div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper"> <div class="search-wrapper">
<el-row :gutter="40"> <el-row :gutter="40">
<el-col :span="6"> <el-col :span="6">
...@@ -50,20 +47,18 @@ ...@@ -50,20 +47,18 @@
</div> </div>
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<div class="search-panel" v-show="showSearchPanel"> <div class="search-panel" v-show="showSearchPanel">
<el-scrollbar> <div class="search-panel-wrapper">
<div class="search-panel-wrapper"> <div
<div class="type-item"
class="type-item" v-for="(item, index) in currentPanelData"
v-for="(item, index) in currentPanelData" :key="index"
:key="index" >
> <span class="text" @click="handleClickSearchItem(item)">
<span class="text" @click="handleClickSearchItem(item)"> {{ item.label }}
{{ item.label }} </span>
</span> <span class="divider">/</span>
<span class="divider">/</span>
</div>
</div> </div>
</el-scrollbar> </div>
</div> </div>
</transition> </transition>
<div class="list-total"> <div class="list-total">
...@@ -71,22 +66,17 @@ ...@@ -71,22 +66,17 @@
<span class="list-total-num">{{ list.total }}</span> <span class="list-total-num">{{ list.total }}</span>
件/套 件/套
</div> </div>
<div class="content-wrapper relic"> <div class="content-wrapper">
<div class="content"> <div class="content">
<el-row :gutter="40" class="cr-list"> <el-row :gutter="40" class="cr-list">
<el-col <el-col
:span="6" :span="6"
class="cr-item" class="cr-item"
@click.native="handleClick(item)" @click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records" v-for="(item, index) in list.records"
:key="index" :key="index"
> >
<div <div class="container" v-if="item.status == 1">
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="img-container"> <div class="img-container">
<img <img
:src=" :src="
...@@ -249,13 +239,13 @@ export default { ...@@ -249,13 +239,13 @@ export default {
let res = await getCulturalRelicList(params); let res = await getCulturalRelicList(params);
if (res.code == 0) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
this.$bizCommon.scrollToTop();
} }
}, },
// 改变页容量 // 改变页容量
handleSizeChange(value) { handleSizeChange(value) {
this.list.size = value; this.list.size = value;
this.loadData(); this.loadData();
this.$refs["table"].bodyWrapper.scrollTop = 0;
}, },
// 改变当前显示页 // 改变当前显示页
...@@ -265,9 +255,7 @@ export default { ...@@ -265,9 +255,7 @@ export default {
}, },
handleClick(item) { handleClick(item) {
const { crId } = item; this.$bizCommon.openCr(item);
const path = "culturalRelic/" + crId;
this.$bizCommon.openNewPage(path);
}, },
handleClickThreeD() { handleClickThreeD() {
this.onlyShow3d = !this.onlyShow3d; this.onlyShow3d = !this.onlyShow3d;
...@@ -283,13 +271,6 @@ export default { ...@@ -283,13 +271,6 @@ export default {
this.$bizCommon.open3d(item); this.$bizCommon.open3d(item);
}, },
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
handleClickSearchBar(type) { handleClickSearchBar(type) {
this.showSearchPanel = true; this.showSearchPanel = true;
this.currentPanel = type; this.currentPanel = type;
...@@ -465,22 +446,17 @@ $text-indent: 16px; ...@@ -465,22 +446,17 @@ $text-indent: 16px;
font-weight: 600; font-weight: 600;
background-color: rgba($color: $deep-blue, $alpha: 0.3); background-color: rgba($color: $deep-blue, $alpha: 0.3);
::v-deep .el-scrollbar__view {
display: flex;
justify-content: center;
}
/*隐藏浏览器自带的水平滚动条*/ /*隐藏浏览器自带的水平滚动条*/
::v-deep .el-scrollbar__wrap { ::v-deep .el-scrollbar__wrap {
overflow-x: hidden !important; overflow-x: hidden !important;
} }
.search-panel-wrapper { .search-panel-wrapper {
width: 60%; width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow: auto; overflow: auto;
padding: 10px 0; padding: 10px 13%;
.type-item { .type-item {
width: 25%; width: 25%;
...@@ -540,7 +516,6 @@ $text-indent: 16px; ...@@ -540,7 +516,6 @@ $text-indent: 16px;
margin-bottom: 40px; margin-bottom: 40px;
.container { .container {
// border: 2px solid #f1f1f1;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -548,28 +523,14 @@ $text-indent: 16px; ...@@ -548,28 +523,14 @@ $text-indent: 16px;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
// border: 2px solid $deep-blue; border: 2px solid $blue;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
display: block;
}
}
} }
.img-container { .img-container {
// background-color:#939393; background-color: $cr-bg;
// background-color: #42555c;
background-color: #374475;
// #42555c
// height: 268px;
height: 225px; height: 225px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
...@@ -581,60 +542,16 @@ $text-indent: 16px; ...@@ -581,60 +542,16 @@ $text-indent: 16px;
object-fit: contain; object-fit: contain;
transition: all 0.5s ease; 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 { .desc {
// height: 120px;
// padding: 36px 30px 20px;
transition: all 0.5s ease; transition: all 0.5s ease;
background: #fff; background: #fff;
.name { .name {
font-size: 20px; font-size: 20px;
padding: 20px 0; padding: 20px 0;
// font-weight: bold;
// color: $deep-blue;
color: #333; color: #333;
// margin-bottom: 18px;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -651,7 +568,6 @@ $text-indent: 16px; ...@@ -651,7 +568,6 @@ $text-indent: 16px;
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
color: #000; color: #000;
// font-weight: 600;
} }
} }
......
<template> <template>
<div class="display"> <div class="display" id="anchor">
<div class="type-group"> <div class="type-group">
<el-row> <el-row>
<el-col <el-col
...@@ -36,15 +36,10 @@ ...@@ -36,15 +36,10 @@
:span="8" :span="8"
class="display-item" class="display-item"
@click.native="handleClick(item)" @click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records" v-for="(item, index) in list.records"
:key="index" :key="index"
> >
<div <div class="container" v-if="item.status == 1">
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="boutique-tag" v-if="isBoutique(item)"></div> <div class="boutique-tag" v-if="isBoutique(item)"></div>
<div class="img-container"> <div class="img-container">
<img <img
...@@ -101,6 +96,7 @@ import ListBanner from "@/components/ListBanner"; ...@@ -101,6 +96,7 @@ import ListBanner from "@/components/ListBanner";
import { getList, getDisplayExistDict } from "@/api/display"; import { getList, getDisplayExistDict } from "@/api/display";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { titles } from "./boutiqueTitles"; import { titles } from "./boutiqueTitles";
import boutiqueTool from "@/utils/boutique";
export default { export default {
name: "Display", name: "Display",
components: { ListBanner }, components: { ListBanner },
...@@ -137,7 +133,7 @@ export default { ...@@ -137,7 +133,7 @@ export default {
...mapGetters(["dicts"]), ...mapGetters(["dicts"]),
isBoutique(item) { isBoutique(item) {
return (item) => { return (item) => {
return this.boutiqueTitles.indexOf(item.title) != -1; return boutiqueTool.isBoutique(item.title);
}; };
}, },
}, },
...@@ -155,11 +151,6 @@ export default { ...@@ -155,11 +151,6 @@ export default {
this.loadData(); this.loadData();
this.loadRegionTree(); this.loadRegionTree();
}, },
// watch: {
// keyword(value) {
// debounce(this.handleKeyWordChange(value), 1000); //500ms
// },
// },
methods: { methods: {
search() { search() {
this.loadData(); this.loadData();
...@@ -177,6 +168,7 @@ export default { ...@@ -177,6 +168,7 @@ export default {
let res = await getList(params); let res = await getList(params);
if (res.code == 0) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
this.$bizCommon.scrollToTop();
} }
}, },
// 改变页容量 // 改变页容量
...@@ -193,44 +185,17 @@ export default { ...@@ -193,44 +185,17 @@ export default {
handleClickTypeItem(item) { handleClickTypeItem(item) {
this.currentType = item.value; this.currentType = item.value;
// debugger
// this.type = value;
this.list.current = 1; this.list.current = 1;
this.loadData(); this.loadData();
}, },
handleClick(item) { handleClick(item) {
// debugger this.$bizCommon.openDisplay(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);
}, },
defImg(e) { defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png"); 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) { handleRegionChange(value) {
this.regionCode = value; this.regionCode = value;
this.$refs.region.dropDownVisible = false; this.$refs.region.dropDownVisible = false;
...@@ -256,34 +221,16 @@ export default { ...@@ -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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $deep-blue;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
width: 100%; width: 100%;
// background-color: $deep-blue;
// color: #fff;
.type-group { .type-group {
// padding: 0 13%;
// margin-bottom: 32px;
background: #fff; background: #fff;
padding: 32px 0 8px; padding: 32px 0 8px;
> div { > div {
...@@ -297,12 +244,9 @@ $text-indent: 16px; ...@@ -297,12 +244,9 @@ $text-indent: 16px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
// padding: 8px 0;
height: 46px; height: 46px;
line-height: 46px; line-height: 46px;
// margin-right: 16px;
cursor: pointer; cursor: pointer;
// border: 1px solid $yellow;
color: #999; color: #999;
&:hover { &:hover {
...@@ -318,17 +262,12 @@ $text-indent: 16px; ...@@ -318,17 +262,12 @@ $text-indent: 16px;
position: absolute; position: absolute;
right: 0; right: 0;
width: 300px; width: 300px;
// width: 30%;
height: 46px; height: 46px;
// color: #999;
padding: 0 20px; padding: 0 20px;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* border: 1px solid #ccc;
background-color: #fff; */
// margin-right: 20px;
cursor: pointer; cursor: pointer;
border: 1px solid #fff; border: 1px solid #fff;
background-color: #c5cade; background-color: #c5cade;
...@@ -374,12 +313,7 @@ $text-indent: 16px; ...@@ -374,12 +313,7 @@ $text-indent: 16px;
background-color: #fff; background-color: #fff;
.content { .content {
// width: 100%;
// box-shadow: 0px 1px 16px 4px rgba(0, 0, 0, 0.16);
.display-list { .display-list {
// padding: 0 74px;
.display-item { .display-item {
margin-bottom: 40px; margin-bottom: 40px;
...@@ -391,6 +325,13 @@ $text-indent: 16px; ...@@ -391,6 +325,13 @@ $text-indent: 16px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover {
border: 2px solid $blue;
img {
transform: scale(1.1);
}
}
.boutique-tag { .boutique-tag {
width: 40px; width: 40px;
height: 40px; height: 40px;
......
<!-- -->
<template> <template>
<div class="home-cr"> <div class="home-cr">
<div class="text wow animate__animated animate__fadeIn">文物</div> <div class="text wow animate__animated animate__fadeIn">文物</div>
<div class="title wow animate__animated animate__fadeInUp"> <div class="title wow animate__animated animate__fadeInUp">
<!-- <div class="ch">每日推送</div>-->
<div class="en">Cultural Relic</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"> <div class="all" @click="handleToAll">
<img src="@/assets/imgs/home-new/all.png" alt="" /> <img src="@/assets/imgs/home-new/all.png" alt="" />
</div> </div>
...@@ -35,99 +30,32 @@ ...@@ -35,99 +30,32 @@
</div> </div>
</div> </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>
</div> </div>
</template> </template>
<script> <script>
import { getRecommendCr } from "@/api/culturalRelic"; import { getRecommendCr } from "@/api/culturalRelic";
import tempCrs from "../tempCr.json"; import { crs } from "../tempData";
export default { export default {
name: "CulturalRelic", name: "CulturalRelic",
data() { data() {
return { return {
list: tempCrs, list: crs,
length: "", length: "",
}; };
}, },
created() {
// this.loadList();
},
watch: {
list: {
handler: function (value) {
this.list = value;
},
immediate: true,
deep: true,
},
},
methods: { methods: {
async loadList() { async loadList() {
let res = await getRecommendCr(); let res = await getRecommendCr();
this.list = res.data.splice(0, 6); // 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) { handleClick(item) {
const { crId } = item; this.$bizCommon.openCr(item);
const newPage = this.$router.resolve({
path: `culturalRelic/${crId}`,
});
window.open(newPage.href, "_blank");
// this.$router.push(`culturalRelic/${crId}`);
}, },
handleToAll() { handleToAll() {
const newPage = this.$router.resolve({ const path = `culturalRelic`;
path: `culturalRelic`, this.$bizCommon.openNewPage(path);
});
window.open(newPage.href, "_blank");
}, },
}, },
}; };
...@@ -136,7 +64,6 @@ export default { ...@@ -136,7 +64,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $deep-blue; $blue: $deep-blue;
.home-cr { .home-cr {
// background-image: url("@/assets/imgs/home/display-bg.png");
background-size: cover; background-size: cover;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -148,12 +75,7 @@ $blue: $deep-blue; ...@@ -148,12 +75,7 @@ $blue: $deep-blue;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-family: "Alibaba pu-hui-ti"; font-family: "Alibaba pu-hui-ti";
// .ch {
// color: #2d4bb5;
// margin-bottom: 12px;
// font-size: 32px;
// font-weight: bold;
// }
.en { .en {
height: 35px; height: 35px;
font-size: 36px; font-size: 36px;
...@@ -164,14 +86,6 @@ $blue: $deep-blue; ...@@ -164,14 +86,6 @@ $blue: $deep-blue;
margin-bottom: 30px; margin-bottom: 30px;
} }
// .title-img {
// height: 100px;
// margin-bottom: 40px;
// img {
// width: 100%;
// height: 100%;
// }
// }
.all { .all {
height: 29px; height: 29px;
cursor: pointer; cursor: pointer;
...@@ -183,7 +97,6 @@ $blue: $deep-blue; ...@@ -183,7 +97,6 @@ $blue: $deep-blue;
.text { .text {
color: #2d4ab5; color: #2d4ab5;
margin-bottom: 8px; margin-bottom: 8px;
// margin-top: 40px;
font-family: "Alibaba pu-hui-ti"; font-family: "Alibaba pu-hui-ti";
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
......
<!-- -->
<template> <template>
<div class="home-display"> <div class="home-display">
<div class="title wow animate__animated animate__fadeInUp">展览</div> <div class="title wow animate__animated animate__fadeInUp">展览</div>
...@@ -10,12 +9,6 @@ ...@@ -10,12 +9,6 @@
查看全部 查看全部
<img src="@/assets/imgs/home-new/dianji.png" alt="" /> <img src="@/assets/imgs/home-new/dianji.png" alt="" />
</div> </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="wrapper wow animate__animated animate__fadeInUp">
<div class="sliders"> <div class="sliders">
<div class="slide-item" v-if="list[0]"> <div class="slide-item" v-if="list[0]">
...@@ -28,49 +21,18 @@ ...@@ -28,49 +21,18 @@
</div> </div>
</div> </div>
<div class="img" @click="handleClick(list[0])"> <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 <img
:src="$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)" :src="
$getFullUrl(
list[0].faceImageMiddleUrl || list[0].faceImagePressUrl
)
"
alt="" alt=""
/> />
<div class="img-name">{{ item.title }}</div> <div class="img-name">{{ list[0].title }}</div>
</div> </div>
</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> </div>
</template> </template>
...@@ -79,7 +41,7 @@ ...@@ -79,7 +41,7 @@
import { getRecommendDisplay } from "@/api/display"; import { getRecommendDisplay } from "@/api/display";
import EntranceIcon from "@/components/EntranceIcon"; import EntranceIcon from "@/components/EntranceIcon";
import { titles } from "../../display/boutiqueTitles"; import { titles } from "../../display/boutiqueTitles";
import tempDisplay from '../tempDisplay.json' import { display } from "../tempData.js";
export default { export default {
name: "Display", name: "Display",
components: { components: {
...@@ -87,15 +49,12 @@ export default { ...@@ -87,15 +49,12 @@ export default {
}, },
data() { data() {
return { return {
list: tempDisplay, list: display,
currentIndex: 0, currentIndex: 0,
sliderItemWidth: 0, sliderItemWidth: 0,
boutiqueTitles:titles boutiqueTitles: titles,
}; };
}, },
mounted() {
// this.loadList();
},
methods: { methods: {
async loadList() { async loadList() {
let res = await getRecommendDisplay(); let res = await getRecommendDisplay();
...@@ -108,21 +67,7 @@ export default { ...@@ -108,21 +67,7 @@ export default {
console.log(-this.currentIndex * this.sliderItemWidth); console.log(-this.currentIndex * this.sliderItemWidth);
}, },
handleClick(item) { handleClick(item) {
let index = this.boutiqueTitles.indexOf(item.title); this.$bizCommon.openDisplay(item);
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);
}, },
getSlideItemWidth() { getSlideItemWidth() {
setTimeout(() => { setTimeout(() => {
......
<template> <template>
<div class="home"> <div class="home">
<!-- <div class="home-item">
<img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
</div> -->
<Banner class="home-item" /> <Banner class="home-item" />
<div class="part2"> <div class="part2">
<MuseumMap ref="MuseumMap" /> <MuseumMap ref="MuseumMap" />
...@@ -10,13 +7,7 @@ ...@@ -10,13 +7,7 @@
<CulturalRelic ref="CulturalRelic" /> <CulturalRelic ref="CulturalRelic" />
<Display ref="Display" /> <Display ref="Display" />
</div> </div>
<!-- <div class="bg2">
<img src="@/assets/imgs/home-new/bg2.png" alt="">
</div> -->
</div> </div>
<!-- <Boutique class="home-item" ref="Boutique" /> -->
<!-- <Virtural class="home-item" ref="Virtural" /> -->
</div> </div>
</template> </template>
...@@ -74,4 +65,4 @@ export default { ...@@ -74,4 +65,4 @@ export default {
// } // }
} }
} }
</style> </style>
\ No newline at end of file
[
{
"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
<template> <template>
<div class="display"> <div class="display" id="anchor">
<!-- <NavBar /> -->
<!-- <ListBanner
title="共计已收录博物馆"
:num="list.total"
:info="['州馆', '展示']"
/> -->
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<el-row <el-row
...@@ -56,16 +50,11 @@ ...@@ -56,16 +50,11 @@
:span="item.status == 1 ? 8 : 0" :span="item.status == 1 ? 8 : 0"
class="cr-item" class="cr-item"
@click.native="handleClick(item)" @click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records" v-for="(item, index) in list.records"
:key="index" :key="index"
> >
<!-- id为1 的是文旅厅 --> <!-- id为1 的是文旅厅 -->
<div <div class="container" v-if="item.status == 1 && item.id != '1'">
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1 && item.id != '1'"
>
<div class="img-container"> <div class="img-container">
<img <img
:src=" :src="
...@@ -107,7 +96,7 @@ ...@@ -107,7 +96,7 @@
<script> <script>
import ListBanner from "@/components/ListBanner"; import ListBanner from "@/components/ListBanner";
import { getMuseumListPage } from "@/api/org"; import { getMuseumListPage } from "@/api/org";
import { mapGetters } from "vuex"; import { mapGetters, mapActions } from "vuex";
export default { export default {
name: "Museum", name: "Museum",
components: { ListBanner }, components: { ListBanner },
...@@ -138,26 +127,20 @@ export default { ...@@ -138,26 +127,20 @@ export default {
...mapGetters(["dicts"]), ...mapGetters(["dicts"]),
}, },
async created() { async created() {
await this.$store.dispatch("dict/getDictList", ["displayType"]); await this.getDictList(["displayType"]);
let res = await this.$store.dispatch("dict/getDictTree", [ const res = await this.getDictTree(["culturalRelicYears"]);
"culturalRelicYears",
]);
this.culturalRelicYears = res.culturalRelicYears; this.culturalRelicYears = res.culturalRelicYears;
}, },
mounted() { mounted() {
this.loadData(); this.loadData();
this.loadRegionTree(); this.loadRegionTree();
}, },
// watch: {
// keyword(value) {
// debounce(this.handleKeyWordChange(value), 1000); //500ms
// },
// },
methods: { methods: {
...mapActions("dict", ["getDictList", "getDictTree"]),
...mapActions("org", ["getSysRegionTreeData"]),
search() { search() {
this.loadData(); this.loadData();
}, },
async loadData() { async loadData() {
const params = { const params = {
page: this.list.current, page: this.list.current,
...@@ -168,6 +151,7 @@ export default { ...@@ -168,6 +151,7 @@ export default {
let res = await getMuseumListPage(params); let res = await getMuseumListPage(params);
if (res.code == 0) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
this.$bizCommon.scrollToTop();
} }
}, },
// 改变页容量 // 改变页容量
...@@ -187,13 +171,8 @@ export default { ...@@ -187,13 +171,8 @@ export default {
}, },
handleClick(item) { handleClick(item) {
const { id } = item; const { id } = item;
const newPage = this.$router.resolve({ const path = `museum/${id}`;
path: `museum/${id}`, this.$bizCommon.openNewPage(path);
});
window.open(newPage.href, "_blank");
// this.$router.push({
// path: `museum/${id}`,
// });
}, },
handleTypeChange(value) { handleTypeChange(value) {
...@@ -213,7 +192,7 @@ export default { ...@@ -213,7 +192,7 @@ export default {
loadRegionTree() { loadRegionTree() {
let parentId = ""; let parentId = "";
this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => { this.getSysRegionTreeData(parentId).then((res) => {
this.regionTree = res; this.regionTree = res;
loopTree(this.regionTree); loopTree(this.regionTree);
function loopTree(arr) { function loopTree(arr) {
...@@ -229,12 +208,6 @@ export default { ...@@ -229,12 +208,6 @@ export default {
} }
}); });
}, },
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
}, },
}; };
</script> </script>
...@@ -252,10 +225,6 @@ $text-indent: 16px; ...@@ -252,10 +225,6 @@ $text-indent: 16px;
.search { .search {
padding: 48px 0 32px; padding: 48px 0 32px;
} }
.search-button {
height: 44px;
}
.total { .total {
padding-bottom: 16px; padding-bottom: 16px;
display: flex; display: flex;
......
<template> <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"> <div class="img">
<img :src="url" v-if="url" width="100%" class="img" lazy /> <img :src="url" v-if="url" width="100%" class="img" lazy />
<img <img
...@@ -12,7 +16,7 @@ ...@@ -12,7 +16,7 @@
/> />
</div> </div>
<div class="desc"> <div class="desc">
<span class="name">{{ title }}</span> <span class="name">{{ item.title }}</span>
</div> </div>
</div> </div>
</template> </template>
...@@ -21,16 +25,28 @@ ...@@ -21,16 +25,28 @@
export default { export default {
name: "CulturalRelicCard", name: "CulturalRelicCard",
props: { props: {
url: { item: {
type: String, type: Object,
default: "", default: () => {},
}, },
title: { },
type: String, computed: {
default: "", 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> </script>
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
> >
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8" v-for="(item, index) in list.records" :key="index"> <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-col>
</el-row> </el-row>
<el-empty <el-empty
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
></el-empty> ></el-empty>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="pagination" v-if="list.records.length>0"> <div class="pagination" v-if="list.records.length > 0">
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
...@@ -157,4 +157,4 @@ export default { ...@@ -157,4 +157,4 @@ export default {
.pagination { .pagination {
margin: 20px; margin: 20px;
} }
</style> </style>
\ No newline at end of file
...@@ -9,9 +9,7 @@ ...@@ -9,9 +9,7 @@
> >
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8" v-for="(item, index) in list.records" :key="index"> <el-col :span="8" v-for="(item, index) in list.records" :key="index">
<Card <Card :item="item"
:title="item.title"
:url="item.faceImagePressUrl || item.faceImageUrl"
/></el-col> /></el-col>
</el-row> </el-row>
<el-empty <el-empty
...@@ -20,7 +18,7 @@ ...@@ -20,7 +18,7 @@
></el-empty> ></el-empty>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="pagination" v-if="list.records.length>0"> <div class="pagination" v-if="list.records.length > 0">
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
...@@ -153,4 +151,4 @@ export default { ...@@ -153,4 +151,4 @@ export default {
.pagination { .pagination {
margin: 20px; margin: 20px;
} }
</style> </style>
\ No newline at end of file
...@@ -8,15 +8,8 @@ ...@@ -8,15 +8,8 @@
:name="tab.name" :name="tab.name"
> >
<el-row :gutter="20"> <el-row :gutter="20">
<el-col <el-col :span="8" v-for="(item, index) in list.records" :key="index">
:span="8" <Card :item="item"
v-for="(item, index) in list.records"
:key="index"
@click.native="handleClick(item)"
>
<Card
:title="item.title"
:url="item.faceImagePressUrl || item.faceImageUrl"
/></el-col> /></el-col>
</el-row> </el-row>
<el-empty <el-empty
...@@ -60,12 +53,6 @@ export default { ...@@ -60,12 +53,6 @@ export default {
default: () => [], default: () => [],
}, },
}, },
// watch: {
// activeName(type) {
// console.log('type',type);
// this.loadList(type);
// },
// },
data() { data() {
return { return {
Tabs: [ Tabs: [
...@@ -122,20 +109,6 @@ export default { ...@@ -122,20 +109,6 @@ export default {
this.list.current = current; this.list.current = current;
this.loadList(this.activeName); 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> </script>
...@@ -183,4 +156,4 @@ export default { ...@@ -183,4 +156,4 @@ export default {
.pagination { .pagination {
margin: 20px; margin: 20px;
} }
</style> </style>
\ No newline at end of file
...@@ -85,6 +85,7 @@ export default { ...@@ -85,6 +85,7 @@ export default {
this.currentImg = fileUrl; this.currentImg = fileUrl;
this.imgList = res.data; this.imgList = res.data;
this.showResult = true; this.showResult = true;
this.$refs.uploader.clearFiles();
this.$nextTick(() => { this.$nextTick(() => {
this.$refs["List"].getWaterfallHeight(); this.$refs["List"].getWaterfallHeight();
}); });
...@@ -116,6 +117,7 @@ export default { ...@@ -116,6 +117,7 @@ export default {
this.$message.success(`上传成功并获得${length}张相似图片`); this.$message.success(`上传成功并获得${length}张相似图片`);
this.imgList = res.data; this.imgList = res.data;
this.showResult = true; this.showResult = true;
this.$refs.uploader.clearFiles();
loading.close(); loading.close();
this.showCurrentImg(file); this.showCurrentImg(file);
this.clearRouterQuery(); this.clearRouterQuery();
......
...@@ -268,7 +268,6 @@ $text-indent: 16px; ...@@ -268,7 +268,6 @@ $text-indent: 16px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
// background: url("@/assets/imgs/list/search-button-bg.png");
background-size: 100% 100%; background-size: 100% 100%;
color: #444; color: #444;
font-size: 14px; font-size: 14px;
......
...@@ -30,16 +30,18 @@ module.exports = defineConfig({ ...@@ -30,16 +30,18 @@ module.exports = defineConfig({
compress: false, // 开启压缩 compress: false, // 开启压缩
proxy: { proxy: {
"/api": { "/api": {
// target: "https://www.gzswbsy.com/api", // target: "https://www.gzswbsy.com/api",//生产环境地址
target: "http://222.85.214.245:9602/api", // target: "http://222.85.214.245:9602/api",//测试环境地址
target: 'https://114.115.157.218/api/',//生产环境ip
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
"^/api": "", "^/api": "",
}, },
}, },
"/files": { "/files": {
// target: "https://www.gzswbsy.com/files", // target: "https://www.gzswbsy.com/files",//生产环境地址
target: "http://222.85.214.245:9602/files", // target: "http://222.85.214.245:9602/files",//测试环境地址
target: 'https://114.115.157.218/files/',//生产环境ip
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
"^/files": "", "^/files": "",
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论