Skip to content

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

修改文物和展览的筛选字典为有数据的才显示

上级 56c5b03a
隐藏空白字符变更
内嵌 并排
正在显示 包含 161 行增加 和 155 行删除
src/api/culturalRelic.js
浏览文件 @ 0ccdac09
...@@ -41,3 +41,13 @@ export function getRecommendCr(params) { ...@@ -41,3 +41,13 @@ export function getRecommendCr(params) {
params params
}) })
} }
// 获取存在文物的字典
export function getCrExistDict(params) {
return request({
url: '/bizCulturalRelic/existDict',
method: 'get',
params
})
}
src/api/display.js
浏览文件 @ 0ccdac09
...@@ -22,4 +22,12 @@ export function getRecommendDisplay(params){ ...@@ -22,4 +22,12 @@ export function getRecommendDisplay(params){
method: 'get', method: 'get',
params params
}) })
} }
\ No newline at end of file
export function getDisplayExistDict(params){
return request({
url: '/bizExhibition/existDict',
method: 'get',
params
})
}
src/components/ListBanner/index.vue
浏览文件 @ 0ccdac09
...@@ -6,11 +6,11 @@ ...@@ -6,11 +6,11 @@
</div> </div>
<div class="text">{{ title }}</div> <div class="text">{{ title }}</div>
</div> --> </div> -->
<div class="total" > <div class="total">
<div class="total-title">{{title}}</div> <div class="total-title">{{ title }}</div>
<div class="amount"> <div class="amount">
<span class="num">{{num}}</span> <span class="num">{{ num }}</span>
<span class="unit">{{unit}}</span> <span class="unit">{{ unit }}</span>
</div> </div>
</div> </div>
<!-- <div class="banner-1"> <!-- <div class="banner-1">
...@@ -30,11 +30,11 @@ export default { ...@@ -30,11 +30,11 @@ export default {
type: String, type: String,
default: "标题", default: "标题",
}, },
num:{ num: {
type: String, type: [String, Number],
default: '0', default: '0',
}, },
unit:{ unit: {
type: String, type: String,
default: '个', default: '个',
}, },
...@@ -47,11 +47,12 @@ export default { ...@@ -47,11 +47,12 @@ export default {
width: 100%; width: 100%;
height: 360px; height: 360px;
position: relative; position: relative;
background-image: linear-gradient(to right,$themeColor,rgba($themeColor, 0.9),$themeColor); background-image: linear-gradient(to right, $themeColor, rgba($themeColor, 0.9), $themeColor);
padding: 0 13%; padding: 0 13%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
// height: 222px; // height: 222px;
// background-image: url("@/assets/imgs/list/banner2.png"); // background-image: url("@/assets/imgs/list/banner2.png");
// background-size:100% 100%; // background-size:100% 100%;
...@@ -71,18 +72,22 @@ export default { ...@@ -71,18 +72,22 @@ export default {
.total-title { .total-title {
font-size: 28px; font-size: 28px;
} }
.amount { .amount {
font-weight: bold; font-weight: bold;
.num{
.num {
font-size: 56px; font-size: 56px;
font-family: $puHuiTi; font-family: $puHuiTi;
} }
.unit{
.unit {
font-size: $font-size-base; font-size: $font-size-base;
} }
} }
} }
// .banner-1 { // .banner-1 {
// position: absolute; // position: absolute;
// left: 620px; // left: 620px;
...@@ -100,25 +105,30 @@ export default { ...@@ -100,25 +105,30 @@ export default {
// top: 54%; // top: 54%;
margin-top: 30px; margin-top: 30px;
width: 520px; width: 520px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.title { .title {
padding: 0 13%; padding: 0 13%;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
.img-container { .img-container {
width: 58px; width: 58px;
height: 58px; height: 58px;
margin-right: 26px; margin-right: 26px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
} }
.text { .text {
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
......
src/views/culturalRelic/index.vue
浏览文件 @ 0ccdac09
<template> <template>
<div class="cultural-relic"> <div class="cultural-relic">
<ListBanner title="文物展" unit="件/套" :num="list.total" /> <ListBanner title="共计文物" unit="件/套" :num="list.total" />
<div class="search-bar wow animate__animated animate__fadeIn"> <div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper"> <div class="search-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')"> <div class="search-item" @click="handleClickSearchBar('type')">
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
<script> <script>
import ListBanner from "@/components/ListBanner"; import ListBanner from "@/components/ListBanner";
import { getCulturalRelicList } from "@/api/culturalRelic"; import { getCulturalRelicList, getCrExistDict } from "@/api/culturalRelic";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
export default { export default {
name: "CulturalRelic", name: "CulturalRelic",
...@@ -209,46 +209,51 @@ export default { ...@@ -209,46 +209,51 @@ export default {
value: "", value: "",
} }
]; ];
await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]); let res = await getCrExistDict()
for (const key in this.dicts.culturalRelicType) { let resTypeList = res.data.typeList
let resYearList = res.data.yearDictList
resTypeList.map(item=>{
typeList.push({ typeList.push({
label: this.dicts.culturalRelicType[key], label:item.label,
value: key, value:item.value
}); })
} })
resYearList.map(item=>{
yearList.push({
label:item.label,
value:item.value
})
})
this.typeList = typeList; this.typeList = typeList;
let res = await this.$store.dispatch("dict/getDictTree", [
"culturalRelicYears",
]);
this.culturalRelicYears = res.culturalRelicYears;
traveseYears(this.culturalRelicYears);
this.yearList = yearList; this.yearList = yearList;
// 获取叶子节点 // await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
function traveseYears(arr) { // for (const key in this.dicts.culturalRelicType) {
if (arr && arr.length > 0) { // typeList.push({
arr.map((item) => { // label: this.dicts.culturalRelicType[key],
if (item.children && item.children.length > 0) { // value: key,
traveseYears(item.children);
} else {
yearList.push({
value: item.value,
label: item.label,
});
}
});
}
}
// 删除无children的节点
// function traveseYears(arr) {
// if (arr && arr.length > 0) {
// arr.map((item) => {
// if (item.children && item.children.length == 0) {
// delete item.children;
// } else {
// traveseYears(item.children);
// }
// }); // });
// } // }
// let res = await this.$store.dispatch("dict/getDictTree", [
// "culturalRelicYears",
// ]);
// this.culturalRelicYears = res.culturalRelicYears;
// traveseYears(this.culturalRelicYears);
// // 获取叶子节点
// function traveseYears(arr) {
// if (arr && arr.length > 0) {
// arr.map((item) => {
// if (item.children && item.children.length > 0) {
// traveseYears(item.children);
// } else {
// yearList.push({
// value: item.value,
// label: item.label,
// });
// }
// });
// }
// } // }
}, },
mounted() { mounted() {
...@@ -524,7 +529,7 @@ $text-indent: 16px; ...@@ -524,7 +529,7 @@ $text-indent: 16px;
.search-panel { .search-panel {
min-height: 100px; min-height: 100px;
max-height: 138px; max-height: 138px;
background: rgb(#8ac7ff, 1) url("@/assets/imgs/home/panel-bg.png"); background: rgb($themeColor, 0.15) url("@/assets/imgs/home/panel-bg.png");
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
......
src/views/display/index.vue
浏览文件 @ 0ccdac09
...@@ -5,44 +5,18 @@ ...@@ -5,44 +5,18 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<div class="search wow animate__animated animate__fadeIn"> <div class="search wow animate__animated animate__fadeIn">
<el-input <el-input class="input item" v-model="keyword" placeholder="请输入关键词" @keyup.enter.native="search" clearable>
class="input item"
v-model="keyword"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
<!-- <span class="input-icon" slot="prefix"> <!-- <span class="input-icon" slot="prefix">
<svg-icon icon-class="keyword"></svg-icon> <svg-icon icon-class="keyword"></svg-icon>
</span> --> </span> -->
</el-input> </el-input>
<el-select <el-select class="type item" v-model="type" placeholder="请选择所属类别" filterable @change="handleTypeChange"
class="type item" clearable>
v-model="type" <el-option v-for="(item, index) in typeList" :key="index" :label="item.label" :value="item.value">
placeholder="请选择所属类别"
filterable
@change="handleTypeChange"
clearable
>
<el-option
v-for="(value, key) in dicts.displayType"
:key="key"
:label="value"
:value="key"
>
</el-option> </el-option>
</el-select> </el-select>
<el-cascader <el-cascader class="years item" v-model="regionCode" :options="regionTree" :props="culturalRegionProps"
class="years item" placeholder="请选择所属地区" filterable @change="handleRegionChange" clearable ref="region">
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
ref="region"
>
</el-cascader> </el-cascader>
<div class="search-button" @click="search"> <div class="search-button" @click="search">
...@@ -51,67 +25,37 @@ ...@@ -51,67 +25,37 @@
</div> </div>
</div> </div>
<el-row :gutter="40" class="cr-list"> <el-row :gutter="40" class="cr-list">
<el-col <el-col :span="item.status == 1 ? 8 : 0" class="cr-item" @click.native="handleClick(item)"
:span="item.status == 1 ? 8 : 0" @mouseenter.native="handleEnterImg(item)" @mouseleave.native="handleLeaveImg(item)"
class="cr-item" v-for="(item, index) in list.records" :key="index">
@click.native="handleClick(item)" <div class="container wow animate__animated animate__fadeInUp" v-if="item.status == 1">
@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="img-container"> <div class="img-container">
<img <img :src="
:src=" $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl) " width="100%" class="face-image" lazy />
"
width="100%"
class="face-image"
lazy
/>
<div class="deco-left-top"> <div class="deco-left-top">
<img <img :src="
:src=" require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`) }.png`)
" " alt="" />
alt=""
/>
</div> </div>
<div class="deco-left-bottom"> <div class="deco-left-bottom">
<img <img :src="
:src=" require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`) }.png`)
" " alt="" />
alt=""
/>
</div> </div>
<div class="deco-right-top"> <div class="deco-right-top">
<img <img :src="
:src=" require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`) }.png`)
" " alt="" />
alt=""
/>
</div> </div>
<div class="deco-right-bottom"> <div class="deco-right-bottom">
<img <img :src="
:src=" require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`) }.png`)
" " alt="" />
alt=""
/>
</div> </div>
</div> </div>
<div class="desc"> <div class="desc">
...@@ -144,21 +88,11 @@ ...@@ -144,21 +88,11 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-empty <el-empty description="暂无数据" v-if="list.records.length == 0"></el-empty>
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container"> <div class="pagination-container">
<el-pagination <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
@size-change="handleSizeChange" :current-page="Number(list.current)" :page-sizes="[20, 40, 100]" :page-size="Number(list.size)"
@current-change="handleCurrentChange" layout="total, prev, pager, next" :total="Number(list.total)" class="pagination">
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next"
:total="Number(list.total)"
class="pagination"
>
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
...@@ -168,9 +102,10 @@ ...@@ -168,9 +102,10 @@
<script> <script>
import ListBanner from "@/components/ListBanner"; import ListBanner from "@/components/ListBanner";
import { getList } from "@/api/display"; import { getList, getDisplayExistDict } from "@/api/display";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { debounce } from "@/utils/index"; import { debounce } from "@/utils/index";
export default { export default {
name: "Display", name: "Display",
components: { ListBanner }, components: { ListBanner },
...@@ -193,13 +128,20 @@ export default { ...@@ -193,13 +128,20 @@ export default {
regionCode: [], regionCode: [],
regionTree: [], regionTree: [],
currentImg: null, currentImg: null,
typeList:[{
label:'全部',
value:''
}]
}; };
}, },
computed: { computed: {
...mapGetters(["dicts"]), ...mapGetters(["dicts"]),
}, },
async created() { async created() {
await this.$store.dispatch("dict/getDictList", ["displayType"]); // await this.$store.dispatch("dict/getDictList", ["displayType"]);
// 获取已经存在展览的字典
let res = await getDisplayExistDict()
this.typeList =[...this.typeList,...res.data.typeList]
}, },
mounted() { mounted() {
this.loadData(); this.loadData();
...@@ -305,8 +247,10 @@ export default { ...@@ -305,8 +247,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $themeColor; $blue: $themeColor;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
width: 100%; width: 100%;
// background-color: $themeColor; // background-color: $themeColor;
// color: #fff; // color: #fff;
.content-wrapper { .content-wrapper {
...@@ -323,13 +267,15 @@ $text-indent: 16px; ...@@ -323,13 +267,15 @@ $text-indent: 16px;
margin-bottom: 40px; margin-bottom: 40px;
// height: 214px; // height: 214px;
padding: 90px 70px 80px; padding: 90px 70px 80px;
.item { .item {
margin-right: 20px; margin-right: 20px;
&:hover { &:hover {
-webkit-box-reflect: below 2px -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
} }
} }
.input-icon { .input-icon {
height: 100%; height: 100%;
display: flex; display: flex;
...@@ -350,23 +296,28 @@ $text-indent: 16px; ...@@ -350,23 +296,28 @@ $text-indent: 16px;
font-size: 14px; font-size: 14px;
width: 156px; width: 156px;
height: 40px; height: 40px;
&:hover { &:hover {
-webkit-box-reflect: below 2px -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
} }
// height: 100%; // height: 100%;
.svg-icon { .svg-icon {
margin-right: 4px; margin-right: 4px;
} }
} }
} }
.content { .content {
width: 100%; width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16); box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list { .cr-list {
padding: 0 74px; padding: 0 74px;
.cr-item { .cr-item {
margin-bottom: 40px; margin-bottom: 40px;
.container { .container {
border: 2px solid #f1f1f1; border: 2px solid #f1f1f1;
position: relative; position: relative;
...@@ -374,15 +325,20 @@ $text-indent: 16px; ...@@ -374,15 +325,20 @@ $text-indent: 16px;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid $themeColor; border: 2px solid $themeColor;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
.desc { .desc {
background: url("@/assets/imgs/list/card-title-bg.png"); background: url("@/assets/imgs/list/card-title-bg.png");
} }
.img-container { .img-container {
.deco-left-top, .deco-left-top,
.deco-left-bottom, .deco-left-bottom,
.deco-right-top, .deco-right-top,
...@@ -391,6 +347,7 @@ $text-indent: 16px; ...@@ -391,6 +347,7 @@ $text-indent: 16px;
} }
} }
} }
.img-container { .img-container {
background-color: #fff; background-color: #fff;
height: 268px; height: 268px;
...@@ -398,11 +355,13 @@ $text-indent: 16px; ...@@ -398,11 +355,13 @@ $text-indent: 16px;
transition: all 0.5s ease; transition: all 0.5s ease;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.face-image { .face-image {
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.deco-left-top, .deco-left-top,
.deco-left-bottom, .deco-left-bottom,
.deco-right-top, .deco-right-top,
...@@ -412,6 +371,7 @@ $text-indent: 16px; ...@@ -412,6 +371,7 @@ $text-indent: 16px;
height: 36px; height: 36px;
// display: none; // display: none;
transition: all 0.5s ease; transition: all 0.5s ease;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -423,26 +383,31 @@ $text-indent: 16px; ...@@ -423,26 +383,31 @@ $text-indent: 16px;
top: 0; top: 0;
transform: rotate(180deg); transform: rotate(180deg);
} }
.deco-left-bottom { .deco-left-bottom {
left: 0; left: 0;
bottom: 0; bottom: 0;
transform: rotate(90deg); transform: rotate(90deg);
} }
.deco-right-top { .deco-right-top {
right: 0; right: 0;
top: 0; top: 0;
transform: rotate(270deg); transform: rotate(270deg);
} }
.deco-right-bottom { .deco-right-bottom {
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
} }
.desc { .desc {
height: 150px; height: 150px;
padding: 36px 30px; padding: 36px 30px;
transition: all 0.5s ease; transition: all 0.5s ease;
background: #fff; background: #fff;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
...@@ -452,6 +417,7 @@ $text-indent: 16px; ...@@ -452,6 +417,7 @@ $text-indent: 16px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.desc-container { .desc-container {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
...@@ -459,6 +425,7 @@ $text-indent: 16px; ...@@ -459,6 +425,7 @@ $text-indent: 16px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.left { .left {
// flex: 1; // flex: 1;
...@@ -473,12 +440,15 @@ $text-indent: 16px; ...@@ -473,12 +440,15 @@ $text-indent: 16px;
margin-bottom: 4px; margin-bottom: 4px;
} }
} }
.right { .right {
color: #858484; color: #858484;
width: 120px; width: 120px;
.collect { .collect {
margin-right: 10px; margin-right: 10px;
} }
.svg-icon { .svg-icon {
margin-right: 4px; margin-right: 4px;
} }
...@@ -516,6 +486,7 @@ $text-indent: 16px; ...@@ -516,6 +486,7 @@ $text-indent: 16px;
background: url("@/assets/imgs/list/input-border.png"); background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%; background-size: 100% 100%;
height: 40px; height: 40px;
&::placeholder { &::placeholder {
text-indent: 10px; text-indent: 10px;
color: #999; color: #999;
...@@ -523,7 +494,9 @@ $text-indent: 16px; ...@@ -523,7 +494,9 @@ $text-indent: 16px;
} }
} }
} }
::v-deep .el-pagination { ::v-deep .el-pagination {
.btn-prev, .btn-prev,
.btn-next { .btn-next {
background: transparent; background: transparent;
...@@ -533,6 +506,7 @@ $text-indent: 16px; ...@@ -533,6 +506,7 @@ $text-indent: 16px;
::v-deep .el-input { ::v-deep .el-input {
width: auto !important; width: auto !important;
} }
::v-deep .el-pager { ::v-deep .el-pager {
li { li {
width: 28px; width: 28px;
...@@ -543,6 +517,7 @@ $text-indent: 16px; ...@@ -543,6 +517,7 @@ $text-indent: 16px;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
} }
.active { .active {
color: #fff; color: #fff;
} }
......
src/views/museum/Detail.vue
浏览文件 @ 0ccdac09
...@@ -43,7 +43,6 @@ ...@@ -43,7 +43,6 @@
<i class="el-icon-phone"></i> <i class="el-icon-phone"></i>
<span>{{ museumDetail.phone }}</span> <span>{{ museumDetail.phone }}</span>
</div> </div>
<div v-if="!museumDetail.phone">暂无联系方式</div> <div v-if="!museumDetail.phone">暂无联系方式</div>
</div> </div>
</div> </div>
...@@ -81,7 +80,7 @@ export default { ...@@ -81,7 +80,7 @@ export default {
tabbars: [ tabbars: [
'简介', '入园方式', '联系方式', '简介', '入园方式', '联系方式',
], ],
currentTab: '' currentTab: '简介'
}; };
}, },
mounted() { mounted() {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论