Skip to content

E
exhibition_page
提交 3256f254 authored 作者: JSHorse's avatar JSHorse
浏览文件
操作

整体UI调整

上级 7b933485
隐藏空白字符变更
内嵌 并排
正在显示 包含 1656 行增加 和 1052 行删除
src/assets/styles/index.scss
浏览文件 @ 3256f254
......@@ -67,24 +67,192 @@ li {
}
.content-wrapper {
// width: 1200px;
// width: 100vw;
padding: 0 13%;
display: flex;
// padding: 0 13%;
// width: 1400px;
/* display: flex;
flex-direction: column;
align-items: center;
align-items: center; */
>.content {
width: 1400px;
margin: auto;
}
}
.el-pager {
.btn-quicknext,.number {
.btn-quicknext,
.number {
background: transparent !important;
border: 1px solid $themeColor !important;
color: $themeColor !important;
border: 1px solid $themeColor !important;
color: $themeColor !important;
}
.number.active {
background: $themeColor !important;
color: #b7b7b7 !important;
background: $themeColor !important;
color: #fff !important;
}
}
.content-wrapper:not(.relic) {
padding-top: 0!important;
padding-bottom: 40px!important;
>.content {
box-shadow: none!important;
>.search {
// padding: 24px 20%;
// padding: 16px 13%;
padding: 16px 0 32px;
background: #fff;
background-image: none!important;
.item {
width: 100%;
height: 46px;
>div {
width: 100%;
height: 100%;
}
.el-input__suffix-inner {
i.el-input__icon {
color: #333;
font-size: 18px;
line-height: 46px;
}
}
input {
width: 100%;
height: 100%;
line-height: 46px;
border: 1px solid #fff;
background-color: #c5cade;
&.el-input__inner {
border-radius: 0;
font-size: 14px;
color: #2b2d35;
}
}
input::-webkit-input-placeholder {
color: #666;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #666;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #666;
}
input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #666;
}
}
.search-button {
cursor: pointer;
width: 156px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: url("@/assets/imgs/list/search-button-bg.png") transparent;
background-size: 100% 100%;
color: #444;
font-size: 14px;
transition: all 0.2s ease;
.svg-icon {
margin-right: 4px;
}
}
}
.cr-item .container {
border: none !important;
.desc {
padding: 0!important;
height: auto !important;
>.name {
padding: 20px 0 !important;
margin: 0 !important;
font-size: 20px !important;
font-weight: 400 !important;
}
}
.img-container {
display: flex;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: calc(100% - 4px);
height: calc(100% - 4px);
z-index: 1;
border: 2px solid #999;
}
>div[class|=deco] {
z-index: 2;
}
}
&:hover {
border: none !important;
.desc {
background: none !important;
>.name {
color: #0e45ab !important;
}
}
.img-container {
&::before {
border-color: #3554ee;
}
}
}
}
>.pagination-container {
>.pagination {
margin: 0!important;
background-image: none!important;
.el-pager {
li {
width: 42px;
height: 42px;
line-height: 42px;
font-size: 16px;
background: #fff;
min-width: 0;
margin: 0 16px;
color: $themeColor;
border-radius: 0!important;
}
.active {
color: #fff;
}
}
}
}
}
}
\ No newline at end of file
src/assets/styles/variable.scss
浏览文件 @ 3256f254
// $themeColor:#223e36;
// $themeColor: #2069c4;
$themeColor:#132c33;
// $themeColor:#132c33;
$themeColor: #252F57;
$themeSecondaryColor:#dfab46;
$puHuiTi: "Alibaba-PuHuiTi";
$siyuanSongBold: "SourceHanSerifCN-Bold";
......
src/components/Breadcrumb/index.vue
浏览文件 @ 3256f254
......@@ -24,11 +24,11 @@ export default {
<style lang="scss" scoped>
::v-deep .el-breadcrumb__inner{
color:#ccc;
color:#aaa;
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner{
color: #999;
color: #666;
}
::v-deep .el-breadcrumb__inner.is-link:hover{
......
src/components/ListBanner/index.vue
浏览文件 @ 3256f254
......@@ -6,6 +6,10 @@
</div>
<div class="text">{{ title }}</div>
</div> -->
<div class="main-title">
<p v-for="(label, i) in info" :key="i">{{ label }}</p>
</div>
<img src="@/assets/imgs/show/list-bg.png" alt="" />
<div class="total">
<div class="total-title">{{ title }}</div>
<div class="amount">
......@@ -16,9 +20,9 @@
<!-- <div class="banner-1">
<img src="@/assets/imgs/list/banner3.png" alt="" />
</div> -->
<div class="banner-2 wow animate__animated animate__fadeInLeftBig" data-wow-duration="2s">
<!-- <div class="banner-2 wow animate__animated animate__fadeInLeftBig" data-wow-duration="2s">
<img src="@/assets/imgs/list/banner2.png" alt="" />
</div>
</div> -->
</div>
</template>
......@@ -32,11 +36,15 @@ export default {
},
num: {
type: [String, Number],
default: '0',
default: "0",
},
unit: {
type: String,
default: '个',
default: "个",
},
info: {
type: Array,
default: () => [],
},
},
};
......@@ -45,10 +53,13 @@ export default {
<style lang='scss' scoped>
.banner {
width: 100%;
height: 360px;
height: calc(100vh - 100px);
position: relative;
background-image: linear-gradient(to right, $themeColor, rgba($themeColor, 0.9), $themeColor);
padding: 0 13%;
// background-image: linear-gradient(to right, $themeColor, rgba($themeColor, 0.9), $themeColor);
// background-image: url(@/assets/imgs/show/list-bg.png);
// background-size: cover;
// background-repeat: no-repeat;
// padding: 0 13%;
display: flex;
align-items: center;
justify-content: space-between;
......@@ -60,31 +71,72 @@ export default {
// align-items: center;
// background-size: 100%;
// background-position: 0 -100px;
> img {
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: calc(100vh);
}
.main-title {
position: absolute;
top: 39%;
left: 45%;
font-size: 100px;
z-index: 1;
line-height: 1.2;
letter-spacing: 10px;
padding-left: 10px;
border: 3px solid #fff;
font-family: '宋体';
font-weight: 800;
color: #fff;
> p {
margin: 0;
}
}
.total {
width: 400px;
// width: 400px;
color: #fff;
font-family: $puHuiTi;
position: relative;
z-index: 1;
font-size: 40px;
position: absolute;
bottom: 60px;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
transform: translateX(-50%);
font-weight: normal;
// position: absolute;
// left: 200px;
// top: 50%;
// transform: translateY(-50%);
.total-title {
/* .total-title {
font-size: 28px;
}
} */
.amount {
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin-left: 50px;
font-weight: normal;
.num {
font-size: 56px;
// font-size: 56px;
font-family: $puHuiTi;
font-size: 60px;
margin-right: 10px;
color: #ffbe1a;
font-weight: 800;
}
.unit {
/* .unit {
font-size: $font-size-base;
}
} */
}
}
......
src/components/NavBar/index.vue
浏览文件 @ 3256f254
......@@ -521,7 +521,10 @@ export default {
height: 100px;
width: 100%;
transition: all 0.5s ease;
background-color: $themeColor;
// background-color: rgba($themeColor, 0.5);
background-color: rgba(0, 0, 0, 0.3) ;
position: relative;
z-index: 99;
// background-color: #fff;
// background-image: url('@/assets/imgs/home/panel-bg.png');
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
......
src/views/ccProduct/index.vue
浏览文件 @ 3256f254
<template>
<div class="cultural-relic">
<ListBanner title="共计已上线文创产品" :num="list.total" unit="件/套" />
<ListBanner
title="共计已上线文创产品"
:num="list.total"
unit="件/套"
:info="['文创', '展示']"
/>
<div class="content-wrapper">
<div class="content">
<div class="search wow animate__animated animate__fadeIn">
<el-input class="input item" v-model="keyword" placeholder="请输入关键词" @keyup.enter.native="search" clearable>
</el-input>
<el-cascader class="years item" v-model="regionCode" :options="regionTree" :props="culturalRegionProps"
placeholder="请选择所属地区" filterable @change="handleRegionChange" clearable>
</el-cascader>
<el-select class="years item" v-model="deptId" placeholder="请选择所属单位" filterable @change="handleDeptChange"
clearable>
<el-option v-for="(item, index) in deptList" :key="index" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-col :span="3">
<div class="search-button" @click="search" style="width: 100%">
<el-row
:gutter="40"
class="search wow animate__animated animate__fadeIn"
>
<el-col :span="6">
<el-input
class="input item"
v-model="keyword"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
</el-col>
<el-col :span="6">
<el-cascader
class="years item"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
>
</el-cascader>
</el-col>
<el-col :span="6">
<el-select
class="years item"
v-model="deptId"
placeholder="请选择所属单位"
filterable
@change="handleDeptChange"
clearable
>
<el-option
v-for="(item, index) in deptList"
:key="index"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-col>
<el-col :span="6">
<div class="search-button" @click="search">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</el-col>
</div>
</el-row>
<el-row :gutter="40" class="cr-list">
<el-col :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">
<div class="container wow animate__animated animate__fadeInUp" v-if="item.status == 1">
<el-col
: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"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="img-container">
<img :src="$getFullUrl(item.imagesVo[0].pressUrl)" width="100%" class="face-image" lazy />
<img
:src="$getFullUrl(item.imagesVo[0].pressUrl)"
width="100%"
class="face-image"
lazy
/>
<div class="deco-left-top">
<img :src="
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
" alt="" />
"
alt=""
/>
</div>
<div class="deco-left-bottom">
<img :src="
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
" alt="" />
"
alt=""
/>
</div>
<div class="deco-right-top">
<img :src="
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
" alt="" />
"
alt=""
/>
</div>
<div class="deco-right-bottom">
<img :src="
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
" alt="" />
"
alt=""
/>
</div>
</div>
<div class="desc">
......@@ -80,11 +148,21 @@
</div>
</el-col>
</el-row>
<el-empty description="暂无数据" v-if="list.records.length == 0"></el-empty>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
: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
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
: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>
</div>
</div>
......@@ -116,7 +194,6 @@ export default {
value: "code",
label: "name",
children: "children",
},
deptId: "",
deptList: [],
......@@ -244,7 +321,7 @@ $text-indent: 16px;
background-color: #fff;
padding-bottom: 126px;
.search {
/* .search {
display: flex;
justify-content: center;
align-items: center;
......@@ -258,7 +335,8 @@ $text-indent: 16px;
margin-right: 20px;
&:hover {
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
}
......@@ -286,7 +364,8 @@ $text-indent: 16px;
}
&:hover {
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
// .box {
......@@ -323,21 +402,22 @@ $text-indent: 16px;
transition: all 0.2s ease;
&:hover {
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
.svg-icon {
margin-right: 4px;
}
}
}
} */
.content {
width: 100%;
// width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
padding: 0 74px;
// padding: 0 74px;
.cr-item {
margin-bottom: 40px;
......@@ -358,7 +438,6 @@ $text-indent: 16px;
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
......@@ -522,14 +601,13 @@ $text-indent: 16px;
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
/* ::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
font-weight: bold;
}
::v-deep .el-input,
.el-cascader {
// width: 368px !important;
.el-input__inner {
// width: 100%;
......@@ -552,7 +630,6 @@ $text-indent: 16px;
}
::v-deep .el-pagination {
.btn-prev,
.btn-next {
background: transparent;
......@@ -573,5 +650,5 @@ $text-indent: 16px;
.active {
color: #fff;
}
}
} */
</style>
\ No newline at end of file
src/views/culturalRelic/Detail.vue
浏览文件 @ 3256f254
<template>
<div class="content">
<div class="bg">
<img src="@/assets/imgs/gray.jpg" alt="" />
<div class="mask"></div>
<img src="@/assets/imgs/show/bg.png" alt="" class="main" />
<!-- <div class="mask"></div> -->
<div class="color">
<img src="@/assets/imgs/show/circle-bg.png" alt="" class="cb" />
<img src="@/assets/imgs/show/river.png" alt="" class="river" />
<img src="@/assets/imgs/show/circle.png" alt="" class="circle" />
</div>
</div>
<div class="wrapper wow animate__animated animate__fadeInUpBig">
<div class="breadcrumb">
<Breadcrumb :list="guideList" />
</div>
<!-- tabs -->
<ul class="menu-tabs">
<li
:class="{ active: nodeActive === 'intro' }"
@click="handleTabClick('intro')"
>
<span>文物简介</span>
</li>
<template v-for="node in tabbarData">
<li
:key="node.domId"
:class="{ active: nodeActive === node.domId }"
@click="handleTabClick(node.domId)"
v-if="
node.domId !== 'intro' &&
CRDetail[`${node.domId}`] &&
CRDetail[`${node.domId}`].length > 0
"
>
<span>{{ node.name }}</span>
</li>
</template>
<li
:class="{ active: nodeActive === 'relateRelics' }"
@click="handleTabClick('relateRelics')"
>
<span>相关文物</span>
</li>
</ul>
<div class="inner">
<!-- 展览基本信息 -->
<div class="inner-left wow animate__animated animate__fadeInLeft">
<swiper :options="swiperOption2" ref="crSwiper">
<swiper-slide v-for="(item, i) in imagesVo" :key="i">
<div class="img-container" @click="handelPreviewImages(imagesVo,i)">
<img :src="$getFullUrl(item.middleUrl)" alt="" />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
<div class="swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div>
</swiper>
</div>
<div class="inner-right">
<!-- tabs -->
<ul>
<li :class="{ active: nodeActive === 'intro' }" @click="handleTabClick('intro')">
<span>文物简介</span>
</li>
<template v-for="node in tabbarData">
<li :key="node.domId" :class="{ active: nodeActive === node.domId }" @click="handleTabClick(node.domId)"
v-if="
node.domId !== 'intro' &&
CRDetail[`${node.domId}`] &&
CRDetail[`${node.domId}`].length > 0
">
<span>{{ node.name }}</span>
</li>
</template>
<li :class="{ active: nodeActive === 'relateRelics' }" @click="handleTabClick('relateRelics')">
<span>相关文物</span>
</li>
</ul>
<div class="inner-left">
<!-- 基本信息 -->
<div class="info-container-right" v-if="nodeActive === 'intro'">
<div class="wow animate__animated animate__fadeInRight">
<div class="info-title">
<span>{{ CRDetail.name }} </span>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ CRDetail.browseCount }}</span>
</div>
</div>
<div class="basic-info">
<div class="body-item" v-if="CRDetail.yearsLabel">
<!-- <span class="label">
年代</span
> -->
年代</span
> -->
<span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span>
</div>
<div class="body-item" v-if="CRDetail.sourceWay">
<!-- <span class="label">
来源</span
> -->
来源</span
> -->
<span class="value">{{ CRDetail.sourceWay || "暂无" }}</span>
</div>
<div class="body-item" v-if="CRDetail.typeLabel">
<!-- <span class="label">
类别</span
> -->
类别</span
> -->
<span class="value">{{ CRDetail.typeLabel || "暂无" }}</span>
</div>
<div class="body-item" v-if="CRDetail.levelLabel">
<!-- <span class="label">
级别</span
> -->
级别</span
> -->
<span class="value">{{ CRDetail.levelLabel || "暂无" }}</span>
</div>
<div class="body-item" v-if="CRDetail.textureTypeLabel">
<!-- <span class="label">
质地</span
> -->
质地</span
> -->
<span class="value">{{
CRDetail.textureTypeLabel || "暂无"
CRDetail.textureTypeLabel || "暂无"
}}</span>
</div>
<div class="body-item" v-if="CRDetail.detailSize">
<!-- <span class="label">
尺寸
</span> -->
尺寸
</span> -->
<span class="value">{{ CRDetail.detailSize || "暂无" }}</span>
</div>
<div class="body-item" v-if="CRDetail.deptName">
<!-- <span class="label">
馆藏单位</span
> -->
馆藏单位</span
> -->
<span class="value">{{ CRDetail.deptName || "暂无" }}</span>
</div>
</div>
<!-- 文物简介 -->
<div class="content-item display-detail_intro" v-if="CRDetail.intro" id="intro">
<div
class="content-item display-detail_intro"
v-if="CRDetail.intro"
id="intro"
>
<div class="intro-content">
<div class="intro-content-container" v-html="CRDetail.intro"></div>
<div
class="intro-content-container"
v-html="CRDetail.intro"
></div>
</div>
</div>
<div class="bottom">
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ CRDetail.browseCount }}</span>
</div>
<div class="tools">
<ReaderOperations :loveCount="CRDetail.loveCount" :loveCountStatus="Boolean(CRDetail.loveCountStatus)"
:collectCount="CRDetail.collectCount" :collectCountStatus="Boolean(CRDetail.collectCountStatus)"
:sourceId="CRDetail.crId" :title="CRDetail.name" :sourceType="'biz_cultural_relic'"
@reload="loadDetail" />
<ReaderOperations
:loveCount="CRDetail.loveCount"
:loveCountStatus="Boolean(CRDetail.loveCountStatus)"
:collectCount="CRDetail.collectCount"
:collectCountStatus="Boolean(CRDetail.collectCountStatus)"
:sourceId="CRDetail.crId"
:title="CRDetail.name"
:sourceType="'biz_cultural_relic'"
@reload="loadDetail"
/>
</div>
<div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D">
<svg-icon icon-class="3d" class="icon"></svg-icon>查看文物3D模型
<svg-icon icon-class="3d" class="icon"></svg-icon
>查看文物3D模型
</div>
</div>
</div>
</div>
<!-- 音频 -->
<!-- <div
class="audio wow animate__animated animate__fadeInRight"
:style="{
animationPlayState: audioPlaying ? 'running' : 'paused',
}"
@click="handleClickAudio"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
>
<svg-icon icon-class="music"></svg-icon>
<AudioPlayer
style="display: none"
:url="$getFullUrl(CRDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div> -->
class="audio wow animate__animated animate__fadeInRight"
:style="{
animationPlayState: audioPlaying ? 'running' : 'paused',
}"
@click="handleClickAudio"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
>
<svg-icon icon-class="music"></svg-icon>
<AudioPlayer
style="display: none"
:url="$getFullUrl(CRDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div> -->
<!-- 文物视频 -->
<div class="content-item display-detail_videos" v-if="
CRDetail.videosVo &&
CRDetail.videosVo.length > 0 &&
nodeActive === 'videosVo'
" id="videosVo">
<div
class="content-item display-detail_videos"
v-if="
CRDetail.videosVo &&
CRDetail.videosVo.length > 0 &&
nodeActive === 'videosVo'
"
id="videosVo"
>
<div class="video-title">
<!-- <i class="el-icon-video-camera"></i> -->
相关视频
</div>
<div class="video-names">
<div class="video-item" v-for="(item, index) in CRDetail.videosVo" :key="index"
@click="handleChangeCurrentVideo(item)">
<div :class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]">
<div
class="video-item"
v-for="(item, index) in CRDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
>
{{ item.name.split(".")[0] }}
</div>
</div>
</div>
<video-player v-if="currentVideo" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div>
<!--相关文物 -->
<div class="content-item display-detail_relate_rc" ref="units" id="relateRelics"
v-if="nodeActive === 'relateRelics'">
<div
class="content-item display-detail_relate_rc"
ref="units"
id="relateRelics"
v-if="nodeActive === 'relateRelics'"
>
<div class="recommend-type">
<el-radio-group v-model="currentRcKey" size="small">
<el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio>
<el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio>
<el-radio :label="'deptId'" v-if="CRDetail.deptId">同馆藏</el-radio>
<el-radio :label="'years'" v-if="CRDetail.years"
>同年代</el-radio
>
<el-radio :label="'deptId'" v-if="CRDetail.deptId"
>同馆藏</el-radio
>
</el-radio-group>
</div>
<div class="recommend-obj">
......@@ -188,42 +220,78 @@
</div>
</div>
<el-empty v-else description="暂无相关推荐，去看看其他的吧~"></el-empty>
<el-empty
v-else
description="暂无相关推荐，去看看其他的吧~"
></el-empty>
</div>
</div>
<!-- 相关文献 -->
<div class="content-item display-detail_lts" id="literatureVo" v-if="
CRDetail.literatureVo &&
CRDetail.literatureVo.length > 0 &&
nodeActive === 'literatureVo'
">
<div class="title">
相关文献
</div>
<div
class="content-item display-detail_lts"
id="literatureVo"
v-if="
CRDetail.literatureVo &&
CRDetail.literatureVo.length > 0 &&
nodeActive === 'literatureVo'
"
>
<div class="title">相关文献</div>
<div class="lts-content">
<el-scrollbar style="height: 100%">
<div class="lt-item" v-for="(item, index) in CRDetail.literatureVo" :key="index"
@click="handleViewLt(item)">
<div
class="lt-item"
v-for="(item, index) in CRDetail.literatureVo"
:key="index"
@click="handleViewLt(item)"
>
<span class="lt-order">[{{ index + 1 }}]</span>
<span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
<span class="lt-authors" v-if="item.authors"
>{{ item.authors }}.</span
>
<span class="lt-name" v-if="item.name">{{ item.name }}.</span>
<span class="lt-source" v-if="item.source">{{ item.source }}.</span>
<span class="lt-source" v-if="item.source"
>{{ item.source }}.</span
>
<span class="lt-date" v-if="item.date">{{ item.date }}</span>
</div>
</el-scrollbar>
</div>
</div>
</div>
<!-- 展览基本信息 -->
<div class="inner-right wow animate__animated animate__fadeInLeft">
<swiper :options="swiperOption2" ref="crSwiper">
<swiper-slide v-for="(item, i) in imagesVo" :key="i">
<div
class="img-container"
@click="handelPreviewImages(imagesVo, i)"
>
<img :src="$getFullUrl(item.middleUrl)" alt="" />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
<div class="swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div>
</swiper>
</div>
</div>
</div>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" :initial-index="imgIndex"/>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
:initial-index="imgIndex"
/>
</div>
</template>
<script>
import AudioPlayer from "@/components/AudioPlayer";
import Video from "@/components/Video";
import ReaderOperations from "@/components/ReaderOperations";
......@@ -233,7 +301,7 @@ import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage/slider.vue";
import { isElementInViewport2 } from "@/utils/index";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import Breadcrumb from '@/components/Breadcrumb/index'
import Breadcrumb from "@/components/Breadcrumb/index";
export default {
components: {
AudioPlayer,
......@@ -241,7 +309,8 @@ export default {
Video,
videoPlayer,
SlideImage,
swiper, swiperSlide,
swiper,
swiperSlide,
Breadcrumb,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
......@@ -300,15 +369,15 @@ export default {
},
guideList: [
{
name: '首页',
path: '/',
name: "首页",
path: "/",
},
{
name: '文物展示',
path: '/culturalRelic',
name: "文物展示",
path: "/culturalRelic",
},
],
imgIndex:0
imgIndex: 0,
};
},
watch: {
......@@ -322,20 +391,20 @@ export default {
computed: {
imagesVo() {
if (Object.keys(this.CRDetail).length == 0) {
return
return;
}
if (this.CRDetail.imagesVo.length > 0) {
return this.CRDetail.imagesVo
return this.CRDetail.imagesVo;
} else {
return [
{
pressUrl: this.CRDetail.faceImagePressUrl,
url: this.CRDetail.faceImageUrl,
middleUrl:this.CRDetail.middleUrl
}
]
middleUrl: this.CRDetail.middleUrl,
},
];
}
}
},
},
async mounted() {
let crId = this.$route.params.crId;
......@@ -364,8 +433,8 @@ export default {
this.CRDetail = res.data.culturalRelicVo;
this.guideList.push({
name: this.CRDetail.name,
path: `/culturalRelic/${this.CRDetail.crId}`
})
path: `/culturalRelic/${this.CRDetail.crId}`,
});
// this.relateRelics = res.data.recommendList.records;
if (this.CRDetail.videosVo && this.CRDetail.videosVo.length > 0) {
this.currentVideo = this.CRDetail.videosVo[0];
......@@ -434,10 +503,10 @@ export default {
this.imgViewerVisible = false;
},
handelPreviewImages(items,i) {
handelPreviewImages(items, i) {
this.imgViewerVisible = true;
this.imgList = items.map((item) => this.$getFullUrl(item.url));
this.imgIndex = i
this.imgIndex = i;
},
handleToDetail(crId) {
const newPage = this.$router.resolve({
......@@ -457,7 +526,6 @@ export default {
}
},
closeImgViewer() {
this.imgViewerVisible = false;
},
......@@ -504,7 +572,7 @@ export default {
if (item.files[0].url) {
previewFile(item.files[0].url, item.files[0].name);
} else {
this.$message.info('当前文献暂不支持在线浏览')
this.$message.info("当前文献暂不支持在线浏览");
}
},
},
......@@ -539,10 +607,36 @@ $node-w: 700px;
height: 100%;
overflow: hidden;
>img {
> img {
width: 100%;
overflow: h;
filter: opacity(0.2) brightness(0.6);
}
> .color {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
> img {
position: absolute;
&.river {
width: 100%;
height: 727px;
bottom: -275px;
left: 0;
}
&.cb {
width: 830px;
height: 830px;
right: 100px;
top: 100px;
}
&.circle {
width: 454px;
height: 454px;
right: 283px;
top: 287px;
}
}
}
.mask {
......@@ -558,14 +652,63 @@ $node-w: 700px;
.breadcrumb {
padding: 60px;
position: relative;
z-index:999;
z-index: 999;
}
.menu-tabs {
line-height: 50px;
position: absolute;
right: 60px;
top: 90px;
// width: 30px;
z-index: 10;
> li {
// border: 1px solid #333;
writing-mode: vertical-lr;
width: 45px;
height: 157px;
background-image: url(@/assets/imgs/show/outer.png);
background-size: cover;
position: relative;
+ li {
margin-top: 20px;
}
> span {
color: #fff;
width: 40px;
height: 138px;
background-image: url(@/assets/imgs/show/inner.png);
background-size: cover;
position: absolute;
left: 10px;
top: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
letter-spacing: 5px;
}
&:hover,
&.active {
cursor: pointer;
// background-color: $themeColor;
background-image: url(@/assets/imgs/show/outer-active.png);
> span {
// background: #b5800a;
background-image: url(@/assets/imgs/show/inner-active.png);
}
}
}
}
.inner {
width: 100%;
display: flex;
.inner-left {
.inner-right {
width: 50%;
height: calc(100vh - 100px);
// position: relative;
......@@ -622,7 +765,7 @@ $node-w: 700px;
// }
}
.inner-left {
.inner-right {
padding: 0 60px;
::v-deep .firstDiv {
......@@ -631,109 +774,113 @@ $node-w: 700px;
}
}
.inner-right {
.inner-left {
padding-left: 120px;
width: 50%;
height: calc(100vh - 100px);
position: relative;
ul {
line-height: 50px;
position: absolute;
right: 60px;
top: 90px;
width: 30px;
>li {
border: 1px solid #ddd;
writing-mode: vertical-lr;
width: 100%;
padding-top: 25px;
height: 140px;
margin: -1px 0;
>span {
color: #fff;
padding: 11px 2px;
border-radius: 8px 0 8px 0;
background: $themeColor;
}
&:hover,
&.active {
cursor: pointer;
background-color: $themeColor;
>span {
background: #b5800a;
}
}
}
}
.info-container-right {
color: #333;
width: $node-w;
padding-bottom: 80px;
.info-title {
display: flex;
justify-content: space-between;
padding-top: 90px;
// padding-top: 90px;
padding-bottom: 10px;
align-items: center;
>span {
font-size: 48px;
> span {
font-size: 50px;
font-family: "华文行楷";
font-weight: 600;
color: #fff;
}
.view-count {
>span {
> span {
margin-left: 10px;
color: #ddd;
}
>svg {
> svg {
color: #ddd;
}
}
}
.basic-info {
display: flex;
flex-wrap: wrap;
padding-bottom: 60px;
color: #c2cbd3;
>div {
flex-shrink: 0;
line-height: 24px;
padding: 0px 10px;
border: 1px solid #c2cbd3;
font-size: 14px;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 4px;
margin-top: 30px;
// display: flex;
// flex-wrap: wrap;
color: #333;
position: relative;
&::before {
content: "";
display: block;
height: calc(100% - 42px);
border-left: 1px dashed #333;
position: absolute;
top: 21px;
left: 0;
}
> div {
// line-height: 24px;
padding: 10px 0;
padding-left: 50px;
font-size: 16px;
position: relative;
&::before {
content: "";
display: block;
width: 40px;
border-top: 1px dashed #333;
position: absolute;
top: 50%;
left: 0;
}
}
}
}
#intro {
min-height: 300px;
padding-top: 50px;
min-height: 350px;
.intro-content {
color: #ffb836;
color: #333;
}
.intro-content-container {
width: $node-w;
font-size: 16px;
line-height: 2;
line-height: 2.5;
font-weight: 600;
// text-indent: 32px;
}
}
.bottom {
padding-top: 20px;
display: flex;
font-size: 16px;
> .view-count {
width: 100px;
display: flex;
align-items: center;
> svg {
margin-right: 10px;
font-size: 28px;
}
}
> .tools {
width: 300px;
}
}
#relateRelics {
padding-top: 90px;
width: 800px;
......@@ -753,7 +900,7 @@ $node-w: 700px;
flex-wrap: wrap;
justify-content: center;
>div {
> div {
width: 40%;
padding: 20px;
}
......@@ -768,12 +915,12 @@ $node-w: 700px;
&:hover {
cursor: pointer;
>img {
> img {
transform: scale(1.2);
}
}
>img {
> img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
......@@ -787,16 +934,15 @@ $node-w: 700px;
text-align: center;
font-weight: 600;
font-family: "楷体";
color: #ccc;
color: #333;
}
}
}
#literatureVo {
padding-top: 90px;
width: 800px;
color: #fff;
color: #333;
.title {
font-size: 18px;
......@@ -813,11 +959,11 @@ $node-w: 700px;
}
.lt-item {
border-bottom: 1px dashed #ccc;
border-bottom: 1px dashed #333;
padding: 10px 0;
cursor: pointer;
&>span {
& > span {
padding: 0 4px;
}
}
......@@ -877,29 +1023,25 @@ $node-w: 700px;
font-family: SourceHanSerifCN-Bold;
}
::v-deep .el-radio__input.is-checked+.el-radio__label {
/* ::v-deep .el-radio__input.is-checked + .el-radio__label {
color: #ffb836;
}
::v-deep .el-radio__input+.el-radio__label {
::v-deep .el-radio__input + .el-radio__label {
color: #fff;
}
} */
//左侧图片轮播
:v-deep .swiper {
height: 66vh;
}
:v-deep .swiper-container {
height: 100%;
width: 100%;
.swiper-wrapper {
height: 100%;
width: 100%;
.swiper-wrapper {
height: 100%;
}
}
}
// ::v-deep .el-radio-button:first-child .el-radio-button__inner{
// border-radius: 0;
......
src/views/culturalRelic/index-hasbg.vue
浏览文件 @ 3256f254
<template>
<div class="cultural-relic">
<ListBanner title="共计已上线文物" :num="list.total" unit="件/套"/>
<ListBanner title="共计已上线文物" :num="list.total" unit="件/套" :info="['文物','展示']"/>
<div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')">
......@@ -660,7 +660,7 @@ $text-indent: 16px;
.content {
padding: 16px 0 60px;
width: 100%;
// width: 100%;
// margin-top: 32px;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
......
src/views/culturalRelic/index.vue
浏览文件 @ 3256f254
<template>
<div class="cultural-relic">
<ListBanner title="共计文物" unit="件/套" :num="list.total" />
<div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')">
<span>{{ currentType }}</span>
<i class="el-icon-caret-bottom"></i>
</div>
<div class="search-item" @click="handleClickSearchBar('years')">
<span>{{ currentYears }}</span>
<i class="el-icon-caret-bottom"></i>
</div>
<div :span="4" class="search-item" @click="handleClickThreeD">
<div class="text">3D文物</div>
<svg-icon :icon-class="onlyShow3d ? 'filter-s' : 'filter'"></svg-icon>
</div>
<div class="search-item">
<input type="text" v-model="keyword" placeholder="文物名称" @keyup.enter="search" />
<i class="el-icon-search"></i>
</div>
<div class="cultural-relic">
<ListBanner
title="共计文物"
unit="件/套"
:info="['文物', '展示']"
:num="list.total"
/>
<div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper">
<el-row :gutter="40">
<el-col :span="6">
<div class="search-item" @click="handleClickSearchBar('type')">
<span>{{ currentType }}</span>
<i class="el-icon-caret-bottom"></i>
</div>
</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>
</el-scrollbar>
</el-col>
<el-col :span="6">
<div class="search-item" @click="handleClickSearchBar('years')">
<span>{{ currentYears }}</span>
<i class="el-icon-caret-bottom"></i>
</div>
</el-col>
<el-col :span="6">
<div :span="4" class="search-item" @click="handleClickThreeD">
<div class="text">3D文物</div>
<svg-icon
:icon-class="onlyShow3d ? 'filter-s' : 'filter'"
></svg-icon>
</div>
</transition>
<!-- <div class="total">
</el-col>
<el-col :span="6">
<div class="search-item">
<input
type="text"
v-model="keyword"
placeholder="文物名称"
@keyup.enter="search"
/>
<i class="el-icon-search"></i>
</div>
</el-col>
</el-row>
</div>
</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>
</el-scrollbar>
</div>
</transition>
<!-- <div class="total">
<span>共{{list.total}}件文物</span>
</div> -->
<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="img-container">
<img :src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
" width="100%" class="face-image" lazy />
<!-- <div class="deco-left-top">
<div class="content-wrapper relic">
<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="img-container">
<img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
class="face-image"
lazy
/>
<!-- <div class="deco-left-top">
<img :src="
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
}.png`)
......@@ -74,24 +113,24 @@
}.png`)
" alt="" />
</div> -->
</div>
<div class="showIcon" v-if="item && item.url3d">
<svg-icon icon-class="3d" class="icon"></svg-icon>
</div>
<div class="desc">
<div class="name">{{ item.name }}</div>
<div class="desc-container">
<div class="left">
<!-- <div class="deptName">
</div>
<div class="showIcon" v-if="item && item.url3d">
<svg-icon icon-class="3d" class="icon"></svg-icon>
</div>
<div class="desc">
<div class="name">{{ item.name }}</div>
<div class="desc-container">
<div class="left">
<!-- <div class="deptName">
<span>关键词：</span>
<span>{{ item.keyword }}</span>
</div> -->
<div class="deptName">
<span>展览单位：</span>
<span>{{ item.deptName }}</span>
</div>
</div>
<!-- <div class="right">
<div class="deptName">
<span>展览单位：</span>
<span>{{ item.deptName }}</span>
</div>
</div>
<!-- <div class="right">
<span class="collect">
<svg-icon icon-class="collect"></svg-icon>
<span>{{
......@@ -103,21 +142,31 @@
<span>{{ item.browseCount }}</span>
</span>
</div> -->
</div>
</div>
</div>
</el-col>
</el-row>
<el-empty description="暂无数据" v-if="list.records.length == 0"></el-empty>
<div class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
: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>
</div>
</div>
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
: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>
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -125,217 +174,217 @@ import ListBanner from "@/components/ListBanner";
import { getCulturalRelicList, getCrExistDict } from "@/api/culturalRelic";
import { mapGetters } from "vuex";
export default {
name: "CulturalRelic",
components: { ListBanner },
data() {
return {
list: {
records: [],
size: 16,
current: 1,
total: 0,
},
culturalRelicYearsProps: {
value: "value",
label: "label",
children: "children",
},
culturalRelicYears: [],
onlyShow3d: false,
keyword: "",
type: "",
years: "",
currentImg: null,
showSearchPanel: false,
currentPanelData: [],
currentPanel: "type",
currentType: "文物类别",
currentYears: "文物年代",
yearList: [],
typeList: [],
};
name: "CulturalRelic",
components: { ListBanner },
data() {
return {
list: {
records: [],
size: 16,
current: 1,
total: 0,
},
culturalRelicYearsProps: {
value: "value",
label: "label",
children: "children",
},
culturalRelicYears: [],
onlyShow3d: false,
keyword: "",
type: "",
years: "",
currentImg: null,
showSearchPanel: false,
currentPanelData: [],
currentPanel: "type",
currentType: "文物类别",
currentYears: "文物年代",
yearList: [],
typeList: [],
};
},
computed: {
...mapGetters(["dicts"]),
},
async created() {
let yearList = [
{
label: "全部年代",
value: "",
},
];
let typeList = [
{
label: "全部类别",
value: "",
},
];
let res = await getCrExistDict();
let resTypeList = res.data.typeList;
let resYearList = res.data.yearDictList;
resTypeList.map((item) => {
typeList.push({
label: item.label,
value: item.value,
});
});
resYearList.map((item) => {
yearList.push({
label: item.label,
value: item.value,
});
});
this.typeList = typeList;
this.yearList = yearList;
// await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
// for (const key in this.dicts.culturalRelicType) {
// typeList.push({
// label: this.dicts.culturalRelicType[key],
// value: key,
// });
// }
// 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() {
this.loadData();
},
watch: {
onlyShow3d(value) {
this.onlyShow3d = value;
this.search();
},
computed: {
...mapGetters(["dicts"]),
// keyword(value) {
// debounce(this.handleKeyWordChange(value), 1000); //500ms
// },
},
methods: {
search() {
this.loadData();
},
async created() {
let yearList = [
{
label: "全部年代",
value: "",
}
];
let typeList = [
{
label: "全部类别",
value: "",
}
];
let res = await getCrExistDict()
let resTypeList = res.data.typeList
let resYearList = res.data.yearDictList
resTypeList.map(item=>{
typeList.push({
label:item.label,
value:item.value
})
})
resYearList.map(item=>{
yearList.push({
label:item.label,
value:item.value
})
})
this.typeList = typeList;
this.yearList = yearList;
// await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
// for (const key in this.dicts.culturalRelicType) {
// typeList.push({
// label: this.dicts.culturalRelicType[key],
// value: key,
// });
// }
// 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,
// });
// }
// });
// }
// }
async loadData() {
const params = {
flag3d: this.onlyShow3d ? "1" : "0",
page: this.list.current,
limit: this.list.size,
name: this.keyword,
type: this.type,
years: this.years,
status: "1",
};
let res = await getCulturalRelicList(params);
if (res.code == 0) {
this.list = res.data;
}
},
mounted() {
this.loadData();
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadData();
this.$refs["table"].bodyWrapper.scrollTop = 0;
},
watch: {
onlyShow3d(value) {
this.onlyShow3d = value;
this.search();
},
// keyword(value) {
// debounce(this.handleKeyWordChange(value), 1000); //500ms
// },
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadData();
},
methods: {
search() {
this.loadData();
},
async loadData() {
const params = {
flag3d: this.onlyShow3d ? "1" : "0",
page: this.list.current,
limit: this.list.size,
name: this.keyword,
type: this.type,
years: this.years,
status:'1'
};
let res = await getCulturalRelicList(params);
if (res.code == 0) {
this.list = res.data;
}
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadData();
this.$refs["table"].bodyWrapper.scrollTop = 0;
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadData();
},
handleClick(item) {
const { crId } = item;
const newPage = this.$router.resolve({
path: "culturalRelic/" + crId,
});
window.open(newPage.href, "_blank");
// this.$router.push(`culturalRelic/${crId}`);
},
handleClickThreeD() {
this.onlyShow3d = !this.onlyShow3d;
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
},
// handleTypeChange(value) {
// this.type = value;
// this.list.current = 1;
// this.loadData();
// },
// handleYearsChange(value) {
// if (value && value instanceof Array) {
// this.years = value[value.length - 1];
// } else {
// this.years = value;
// }
// this.list.current = 1;
// this.loadData();
// this.$refs.years.dropDownVisible = false;
// },
handleKeyWordChange(value) {
this.keyword = value;
this.loadData();
},
handleTo3D(url3d) {
window.open(url3d, "_blank");
},
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
handleClickSearchBar(type) {
this.showSearchPanel = true;
this.currentPanel = type;
switch (type) {
case "type":
this.currentPanelData = this.typeList;
break;
case "years":
this.currentPanelData = this.yearList;
break;
}
},
handleClickSearchItem(item) {
switch (this.currentPanel) {
case "type":
this.type = item.value;
this.currentType = item.label;
break;
case "years":
this.years = item.value;
this.currentYears = item.label;
break;
}
this.list.current = 1;
this.loadData();
this.showSearchPanel = false;
},
handleClick(item) {
const { crId } = item;
const newPage = this.$router.resolve({
path: "culturalRelic/" + crId,
});
window.open(newPage.href, "_blank");
// this.$router.push(`culturalRelic/${crId}`);
},
handleClickThreeD() {
this.onlyShow3d = !this.onlyShow3d;
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
},
// handleTypeChange(value) {
// this.type = value;
// this.list.current = 1;
// this.loadData();
// },
// handleYearsChange(value) {
// if (value && value instanceof Array) {
// this.years = value[value.length - 1];
// } else {
// this.years = value;
// }
// this.list.current = 1;
// this.loadData();
// this.$refs.years.dropDownVisible = false;
// },
handleKeyWordChange(value) {
this.keyword = value;
this.loadData();
},
handleTo3D(url3d) {
window.open(url3d, "_blank");
},
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
handleClickSearchBar(type) {
this.showSearchPanel = true;
this.currentPanel = type;
switch (type) {
case "type":
this.currentPanelData = this.typeList;
break;
case "years":
this.currentPanelData = this.yearList;
break;
}
},
handleClickSearchItem(item) {
switch (this.currentPanel) {
case "type":
this.type = item.value;
this.currentType = item.label;
break;
case "years":
this.years = item.value;
this.currentYears = item.label;
break;
}
this.list.current = 1;
this.loadData();
this.showSearchPanel = false;
},
},
};
</script>
......@@ -343,467 +392,481 @@ export default {
$text-indent: 16px;
.cultural-relic {
width: 100%;
// background-color: $themeColor;
// color: #fff;
.search-bar {
width: 100%;
// background-color: $themeColor;
// color: #fff;
.search-bar {
display: flex;
align-items: center;
flex-direction: column;
// padding: 24px 20%;
// padding: 16px 13%;
padding: 16px 0;
background: #fff;
.search-wrapper {
// display: flex;
width: 1400px;
margin: autp;
// justify-content: center;
/* > div {
width: 25%;
padding: 0 20px;
} */
.search-item {
// width: 215px;
width: 100%;
height: 46px;
color: #2b2d35;
padding: 0 20px;
display: flex;
font-size: 14px;
align-items: center;
flex-direction: column;
padding: 24px 20%;
.search-wrapper {
display: flex;
width: 100%;
justify-content: center;
.search-item {
// width: 215px;
width: 25%;
height: 46px;
color: #999;
padding: 0 20px;
display: flex;
font-size: 14px;
align-items: center;
justify-content: space-between;
border: 1px solid #ccc;
background-color: #fff;
margin-right: 20px;
cursor: pointer;
input {
outline: none;
border: none;
height: 50%;
background: transparent;
width: 80%;
}
::-webkit-input-placeholder {
/*Webkit browsers*/
color: #999;
font-size: 14px;
}
:-moz-placeholder {
/*Mozilla Firefox 4 to 8*/
color: #999;
font-size: 14px;
}
::moz-placeholder {
/*Mozilla Firefox 19+*/
color: #999;
font-size: 14px;
}
justify-content: space-between;
border: 1px solid #fff;
background-color: #c5cade;
margin-right: 20px;
cursor: pointer;
input {
outline: none;
border: none;
height: 50%;
background: transparent;
width: 80%;
}
:-ms-input-placeholder {
/*Internet Explorer 10+*/
color: #999;
font-size: 14px;
}
}
::-webkit-input-placeholder {
/*Webkit browsers*/
color: #999;
font-size: 14px;
}
.item {
margin-right: 20px;
:-moz-placeholder {
/*Mozilla Firefox 4 to 8*/
color: #999;
font-size: 14px;
}
&:hover {
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
::moz-placeholder {
/*Mozilla Firefox 19+*/
color: #999;
font-size: 14px;
}
.input-icon {
height: 100%;
display: flex;
align-items: center;
font-size: 20px;
margin-left: 12px;
color: #444;
:-ms-input-placeholder {
/*Internet Explorer 10+*/
color: #999;
font-size: 14px;
}
}
}
.threeD {
display: flex;
cursor: pointer;
font-size: 16px;
color: #666;
margin-left: 20px;
transition: all ease 0.3s;
.svg-icon {
margin-right: 4px;
font-size: 22px;
}
.item {
margin-right: 20px;
&:hover {
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
/* &:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
} */
}
// .box {
// width: 28px;
// height: 28px;
// display: flex;
// justify-content: center;
// align-items: center;
// border: 2px solid #444;
// margin-right: 6px;
// i {
// font-size: 28px;
// }
// }
// .text {
// display: flex;
// justify-content: center;
// align-items: center;
// color: #444;
// }
}
.input-icon {
height: 100%;
display: flex;
align-items: center;
font-size: 20px;
margin-left: 12px;
color: #444;
}
.search-button {
cursor: pointer;
width: 156px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: url("@/assets/imgs/list/search-button-bg.png") transparent;
background-size: 100% 100%;
color: #444;
font-size: 14px;
transition: all 0.2s ease;
.threeD {
display: flex;
cursor: pointer;
font-size: 16px;
color: #666;
margin-left: 20px;
transition: all ease 0.3s;
.svg-icon {
margin-right: 4px;
font-size: 22px;
}
/* &:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.5));
} */
// .box {
// width: 28px;
// height: 28px;
// display: flex;
// justify-content: center;
// align-items: center;
// border: 2px solid #444;
// margin-right: 6px;
// i {
// font-size: 28px;
// }
// }
// .text {
// display: flex;
// justify-content: center;
// align-items: center;
// color: #444;
// }
}
&:hover {
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
.search-button {
cursor: pointer;
width: 156px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: url("@/assets/imgs/list/search-button-bg.png") transparent;
background-size: 100% 100%;
color: #444;
font-size: 14px;
transition: all 0.2s ease;
/* &:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
} */
.svg-icon {
margin-right: 4px;
}
}
}
.svg-icon {
margin-right: 4px;
}
}
.search-panel {
min-height: 100px;
max-height: 138px;
background: rgb($themeColor, 0.15) url("@/assets/imgs/home/panel-bg.png");
width: 100%;
display: flex;
justify-content: center;
::v-deep .el-scrollbar__view {
display: flex;
justify-content: center;
}
.search-panel {
min-height: 100px;
max-height: 138px;
background: rgb($themeColor, 0.15) url("@/assets/imgs/home/panel-bg.png");
width: 100%;
/*隐藏浏览器自带的水平滚动条*/
::v-deep .el-scrollbar__wrap {
overflow-x: hidden !important;
}
.search-panel-wrapper {
width: 60%;
display: flex;
flex-wrap: wrap;
overflow: auto;
padding: 10px 0;
.type-item {
width: 25%;
display: flex;
justify-content: center;
color: #fff;
font-size: 14px;
margin-bottom: 24px;
position: relative;
::v-deep .el-scrollbar__view {
display: flex;
justify-content: center;
.text {
cursor: pointer;
}
/*隐藏浏览器自带的水平滚动条*/
::v-deep .el-scrollbar__wrap {
overflow-x: hidden !important;
.divider {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.search-panel-wrapper {
width: 60%;
}
}
}
.total {
padding: 0 13%;
display: flex;
justify-content: flex-end;
background-color: #fff;
& > span {
display: inline-block;
padding: 4px 8px;
background-color: #dfab46;
border-radius: 4px;
color: #fff;
margin-top: 32px;
}
}
.content-wrapper {
background-color: #fff;
// padding-bottom: 126px;
.content {
padding: 16px 0 60px;
// width: 100%;
// margin-top: 32px;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
// padding: 0 74px;
.cr-item {
margin-bottom: 40px;
.container {
// border: 2px solid #f1f1f1;
position: relative;
display: flex;
flex-wrap: wrap;
overflow: auto;
padding: 10px 0;
flex-direction: column;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
// border: 2px solid $themeColor;
.face-image {
transform: scale(1.2);
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
display: block;
}
}
/* .desc {
background: url("@/assets/imgs/list/card-title-bg.png");
} */
}
.type-item {
width: 25%;
.img-container {
// background-color:#939393;
// background-color: #42555c;
background-color: #374475;
// #42555c
// height: 268px;
height: 225px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
position: relative;
.face-image {
height: 100%;
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: $themeColor;
color: #333;
// margin-bottom: 18px;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.desc-container {
display: flex;
justify-content: center;
color: #fff;
font-size: 14px;
margin-bottom: 24px;
position: relative;
align-items: flex-end;
justify-content: space-between;
.text {
cursor: pointer;
.left {
.deptName {
font-size: 14px;
font-weight: 300;
color: #000;
// font-weight: 600;
}
}
.divider {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
.right {
color: #858484;
.collect {
margin-right: 10px;
}
.svg-icon {
margin-right: 4px;
}
}
}
}
}
}
.total {
padding: 0 13%;
display: flex;
justify-content: flex-end;
background-color: #fff;
&>span {
display: inline-block;
padding: 4px 8px;
background-color: #dfab46;
border-radius: 4px;
color: #fff;
margin-top: 32px;
}
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 9;
// background-color: rgba(0, 0, 0, 0.1);
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
color: #fff;
border-radius: 8px;
font-size: 16px;
.icon {
width: 20px;
display: inline-block;
}
.text {
font-size: 14px;
color: #fff;
padding: 4px 8px;
cursor: pointer;
display: none;
}
.content-wrapper {
background-color: #fff;
padding-bottom: 126px;
.content {
padding: 16px 0 60px;
width: 100%;
// margin-top: 32px;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
// padding: 0 74px;
.cr-item {
margin-bottom: 40px;
.container {
border: 2px solid #f1f1f1;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
border: 2px solid $themeColor;
.face-image {
transform: scale(1.2);
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
display: block;
}
}
.desc {
background: url("@/assets/imgs/list/card-title-bg.png");
}
}
.img-container {
// background-color:#939393;
background-color: #42555c;
// #42555c
height: 268px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
position: relative;
.face-image {
height: 100%;
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: 18px;
font-weight: bold;
color: $themeColor;
margin-bottom: 18px;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.desc-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
.left {
.deptName {
font-size: 14px;
font-weight: 300;
color: #444444;
}
}
.right {
color: #858484;
.collect {
margin-right: 10px;
}
.svg-icon {
margin-right: 4px;
}
}
}
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 9;
// background-color: rgba(0, 0, 0, 0.1);
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
color: #fff;
border-radius: 8px;
font-size: 16px;
.icon {
width: 20px;
display: inline-block;
}
.text {
font-size: 14px;
color: #fff;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
}
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
height: 116px;
}
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
// background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
height: 116px;
padding-top: 30px;
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
font-weight: bold;
font-weight: bold;
}
::v-deep .el-input,
.el-cascader {
// width: 368px !important;
.el-input__inner {
// width: 100%;
border: none;
border-radius: 0;
background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%;
height: 40px;
&::placeholder {
text-indent: 10px;
color: #999;
font-size: 14px;
}
// width: 368px !important;
.el-input__inner {
// width: 100%;
border: none;
border-radius: 0;
background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%;
height: 40px;
&::placeholder {
text-indent: 10px;
color: #999;
font-size: 14px;
}
}
}
::v-deep .el-input {
width: auto !important;
width: auto !important;
}
::v-deep .el-pagination {
.btn-prev,
.btn-next {
background: transparent;
}
.btn-prev,
.btn-next {
background: transparent;
}
}
::v-deep .el-pager {
li {
width: 28px;
height: 28px;
border-radius: 50%;
background: $themeColor;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
}
.active {
color: #fff;
}
li {
width: 42px;
height: 42px;
line-height: 42px;
font-size: 16px;
background: #fff;
min-width: 0;
margin: 0 16px;
color: $themeColor;
}
.active {
color: #fff;
}
}
::v-deep .el-scrollbar__thumb {
//可设置滚动条颜色
background: rgba($color: #000000, $alpha: 0.4);
//可设置滚动条颜色
background: rgba($color: #000000, $alpha: 0.4);
}
</style>
\ No newline at end of file
src/views/display/index.vue
浏览文件 @ 3256f254
<template>
<div class="display">
<!-- <NavBar /> -->
<ListBanner title="共计已上线展览" :num="list.total" />
<div class="search-bar wow animate__animated animate__fadeIn">
<ListBanner
title="共计已上线展览"
:num="list.total"
:info="['展览', '展示']"
/>
<!-- <div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper">
<!-- <div class="search-item" @click="handleClickSearchBar('type')">
<div class="search-item" @click="handleClickSearchBar('type')">
<span>{{ currentType }}</span>
<i class="el-icon-caret-bottom"></i>
</div>
......@@ -16,7 +20,7 @@
<div :span="4" class="search-item" @click="handleClickThreeD">
<div class="text">3D文物</div>
<svg-icon :icon-class="onlyShow3d ? 'filter-s' : 'filter'"></svg-icon>
</div> -->
</div>
<div class="search-item">
<input
type="text"
......@@ -27,18 +31,31 @@
<i class="el-icon-search" @click="search"></i>
</div>
</div>
</div> -->
<div class="type-group">
<el-row>
<el-col
:class="{ 'type-item': true, active: item.value == currentType }"
v-for="(item, index) in typeList"
:key="index"
:span="3"
@click.native="handleClickTypeItem(item)"
>
{{ item.label }}
</el-col>
<el-col :span="6">
<div class="search-item">
<input
type="text"
v-model="keyword"
placeholder="展览名称"
@keyup.enter="search"
/>
<i class="el-icon-search" @click="search"></i>
</div>
</el-col>
</el-row>
</div>
<el-row class="type-group">
<el-col
:class="{ 'type-item': true, active: item.value == currentType }"
v-for="(item, index) in typeList"
:key="index"
:span="3"
@click.native="handleClickTypeItem(item)"
>
{{ item.label }}
</el-col>
</el-row>
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40" class="cr-list">
......@@ -111,7 +128,7 @@ import ListBanner from "@/components/ListBanner";
import { getList, getDisplayExistDict } from "@/api/display";
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
import { titles} from './boutiqueTitles'
import { titles } from "./boutiqueTitles";
export default {
name: "Display",
components: { ListBanner },
......@@ -141,7 +158,7 @@ export default {
},
],
currentType: "",
boutiqueTitles:titles
boutiqueTitles: titles,
};
},
computed: {
......@@ -408,14 +425,23 @@ $text-indent: 16px;
}
.type-group {
padding: 0 13%;
margin-bottom: 32px;
// padding: 0 13%;
// margin-bottom: 32px;
background: #fff;
> div {
width: 1400px;
margin: auto;
position: relative;
padding: 20px 0;
}
.type-item {
display: flex;
justify-content: center;
align-content: center;
padding: 8px 0;
// padding: 8px 0;
height: 46px;
line-height: 46px;
margin-right: 16px;
cursor: pointer;
// border: 1px solid $themeSecondaryColor;
......@@ -430,6 +456,54 @@ $text-indent: 16px;
background: $themeSecondaryColor;
color: #fff;
}
.search-item {
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;
input {
outline: none;
border: none;
height: 100%;
background: transparent;
width: 100%;
color: #2b2d35;
}
::-webkit-input-placeholder {
/*Webkit browsers*/
color: #666;
}
:-moz-placeholder {
/*Mozilla Firefox 4 to 8*/
color: #666;
}
::moz-placeholder {
/*Mozilla Firefox 19+*/
color: #666;
}
:-ms-input-placeholder {
/*Internet Explorer 10+*/
color: #666;
}
}
}
.content-wrapper {
......@@ -438,7 +512,7 @@ $text-indent: 16px;
background-color: #fff;
.content {
width: 100%;
// width: 100%;
// box-shadow: 0px 1px 16px 4px rgba(0, 0, 0, 0.16);
.cr-list {
......@@ -497,10 +571,13 @@ $text-indent: 16px;
transition: all 0.5s ease;
overflow: hidden;
position: relative;
&::before {
content: none;
}
.face-image {
height: 100%;
object-fit: contain;
object-fit: cover;
transition: all 0.5s ease;
}
......
src/views/home/components/banner.vue
浏览文件 @ 3256f254
......@@ -10,7 +10,10 @@
.boutique {
.banner {
width: 100%;
height: 100%;
height: 100vh;
position: absolute;
top: -100px;
left: 0;
> img {
width: 100%;
height: 100%;
......
src/views/home/index.vue
浏览文件 @ 3256f254
......@@ -39,8 +39,9 @@ export default {
background-color: #fff;
.home-item {
height: 100vh;
height: calc(100vh - 100px);
width: 100%;
position: relative;
}
}
</style>
\ No newline at end of file
src/views/museum/Detail.vue
浏览文件 @ 3256f254
......@@ -167,7 +167,7 @@ export default {
right: 0;
width: 100%;
height: 100%;
background-color: rgba($themeColor, 0.8);
// background-color: rgba($themeColor, 0.8);
z-index: 3;
}
}
......@@ -195,7 +195,8 @@ export default {
display: flex;
justify-content: center;
align-content: center;
color: #d9cfa6;
// color: #d9cfa6;
color: #333;
img {
position: absolute;
......@@ -268,7 +269,7 @@ export default {
height: 400px;
background-color: rgba(0, 0, 0, 0.3);
padding: 80px 60px;
color: #d9cfa6;
// color: #d9cfa6;
display: flex;
align-content: center;
......
src/views/museum/index.vue
浏览文件 @ 3256f254
<template>
<div class="display">
<!-- <NavBar /> -->
<ListBanner title="共计已收录博物馆" :num="list.total"/>
<ListBanner
title="共计已收录博物馆"
:num="list.total"
:info="['州馆', '展示']"
/>
<div class="content-wrapper">
<div class="content">
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
<el-cascader
class="years item"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
>
</el-cascader>
<div class="search-button" @click="search">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</div>
<el-row
:gutter="40"
class="search wow animate__animated animate__fadeIn"
>
<el-col :span="8">
<el-input
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
</el-col>
<el-col :span="8">
<el-cascader
class="years item"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
>
</el-cascader>
</el-col>
<el-col :span="8">
<div class="search-button" @click="search">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</el-col>
</el-row>
<el-row :gutter="40" class="cr-list">
<el-col
:span="item.status == 1 ? 8 : 0"
......@@ -143,7 +155,6 @@ export default {
value: "code",
label: "name",
children: "children",
},
culturalRelicYears: [],
onlyShow3d: false,
......@@ -267,18 +278,18 @@ $text-indent: 16px;
// background-color: $themeColor;
// color: #fff;
.content-wrapper {
padding-top: 60px;
// padding-top: 60px;
padding-bottom: 126px;
background-color: #fff;
.search {
/* .search {
display: flex;
justify-content: center;
align-items: center;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
// background-image: url("@/assets/imgs/list/search-bg.png");
// background-size: 22%;
margin-bottom: 40px;
padding: 90px 70px 80px;
height: 214px;
// padding: 90px 70px 80px;
// height: 214px;
.item {
margin-right: 20px;
}
......@@ -297,13 +308,13 @@ $text-indent: 16px;
margin-right: 4px;
}
}
}
} */
.content {
width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
// width: 100%;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
padding: 0 74px;
// padding: 0 74px;
.cr-item {
margin-bottom: 40px;
.container {
......@@ -338,8 +349,8 @@ $text-indent: 16px;
overflow: hidden;
position: relative;
.face-image {
height: 100%;
object-fit: contain;
width: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.deco-left-top,
......@@ -411,7 +422,7 @@ $text-indent: 16px;
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
/* ::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
font-weight: bold;
}
......@@ -452,5 +463,5 @@ $text-indent: 16px;
.active {
color: #fff;
}
}
} */
</style>
\ No newline at end of file
src/views/virtual/index.vue
浏览文件 @ 3256f254
......@@ -328,7 +328,7 @@ $text-indent: 16px;
}
}
.content {
width: 100%;
// width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论