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