Skip to content

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

整体UI调整

上级 7b933485
显示空白字符变更
内嵌 并排
正在显示 包含 953 行增加 和 350 行删除
src/assets/styles/index.scss
浏览文件 @ 3256f254
...@@ -67,17 +67,24 @@ li { ...@@ -67,17 +67,24 @@ 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;
...@@ -85,6 +92,167 @@ li { ...@@ -85,6 +92,167 @@ li {
.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"
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-input>
<el-cascader class="years item" v-model="regionCode" :options="regionTree" :props="culturalRegionProps" </el-col>
placeholder="请选择所属地区" filterable @change="handleRegionChange" clearable> <el-col :span="6">
<el-cascader
class="years item"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
>
</el-cascader> </el-cascader>
</el-col>
<el-select class="years item" v-model="deptId" placeholder="请选择所属单位" filterable @change="handleDeptChange" <el-col :span="6">
clearable> <el-select
<el-option v-for="(item, index) in deptList" :key="index" :label="item.name" :value="item.id"> 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-option>
</el-select> </el-select>
<el-col :span="3"> </el-col>
<div class="search-button" @click="search" style="width: 100%"> <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>
<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 --> <!-- tabs -->
<ul> <ul class="menu-tabs">
<li :class="{ active: nodeActive === 'intro' }" @click="handleTabClick('intro')"> <li
:class="{ active: nodeActive === 'intro' }"
@click="handleTabClick('intro')"
>
<span>文物简介</span> <span>文物简介</span>
</li> </li>
<template v-for="node in tabbarData"> <template v-for="node in tabbarData">
<li :key="node.domId" :class="{ active: nodeActive === node.domId }" @click="handleTabClick(node.domId)" <li
:key="node.domId"
:class="{ active: nodeActive === node.domId }"
@click="handleTabClick(node.domId)"
v-if=" v-if="
node.domId !== 'intro' && node.domId !== 'intro' &&
CRDetail[`${node.domId}`] && CRDetail[`${node.domId}`] &&
CRDetail[`${node.domId}`].length > 0 CRDetail[`${node.domId}`].length > 0
"> "
>
<span>{{ node.name }}</span> <span>{{ node.name }}</span>
</li> </li>
</template> </template>
<li :class="{ active: nodeActive === 'relateRelics' }" @click="handleTabClick('relateRelics')"> <li
:class="{ active: nodeActive === 'relateRelics' }"
@click="handleTabClick('relateRelics')"
>
<span>相关文物</span> <span>相关文物</span>
</li> </li>
</ul> </ul>
<div class="inner">
<div class="inner-left">
<!-- 基本信息 --> <!-- 基本信息 -->
<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">
...@@ -108,21 +100,39 @@ ...@@ -108,21 +100,39 @@
</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>
...@@ -144,38 +154,60 @@ ...@@ -144,38 +154,60 @@
/> />
</div> --> </div> -->
<!-- 文物视频 --> <!-- 文物视频 -->
<div class="content-item display-detail_videos" v-if=" <div
class="content-item display-detail_videos"
v-if="
CRDetail.videosVo && CRDetail.videosVo &&
CRDetail.videosVo.length > 0 && CRDetail.videosVo.length > 0 &&
nodeActive === 'videosVo' nodeActive === 'videosVo'
" id="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"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div
:class="[
'name', 'name',
currentVideo && item.fileId == currentVideo.fileId currentVideo && item.fileId == currentVideo.fileId
? 'active' ? '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
class="content-item display-detail_lts"
id="literatureVo"
v-if="
CRDetail.literatureVo && CRDetail.literatureVo &&
CRDetail.literatureVo.length > 0 && CRDetail.literatureVo.length > 0 &&
nodeActive === 'literatureVo' nodeActive === 'literatureVo'
"> "
<div class="title"> >
相关文献 <div class="title">相关文献</div>
</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>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" :initial-index="imgIndex"/> </div>
<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,21 +391,21 @@ export default { ...@@ -322,21 +391,21 @@ 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;
this.loadDetail(crId); this.loadDetail(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%;
}
> .color {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
> img {
position: absolute;
&.river {
width: 100%; width: 100%;
overflow: h; height: 727px;
filter: opacity(0.2) brightness(0.6); 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,21 +1023,17 @@ $node-w: 700px; ...@@ -877,21 +1023,17 @@ $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%; height: 100%;
...@@ -899,7 +1041,7 @@ $node-w: 700px; ...@@ -899,7 +1041,7 @@ $node-w: 700px;
.swiper-wrapper { .swiper-wrapper {
height: 100%; 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
title="共计文物"
unit="件/套"
:info="['文物', '展示']"
:num="list.total"
/>
<div class="search-bar wow animate__animated animate__fadeIn"> <div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper"> <div class="search-wrapper">
<el-row :gutter="40">
<el-col :span="6">
<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>
</el-col>
<el-col :span="6">
<div class="search-item" @click="handleClickSearchBar('years')"> <div class="search-item" @click="handleClickSearchBar('years')">
<span>{{ currentYears }}</span> <span>{{ currentYears }}</span>
<i class="el-icon-caret-bottom"></i> <i class="el-icon-caret-bottom"></i>
</div> </div>
</el-col>
<el-col :span="6">
<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>
</el-col>
<el-col :span="6">
<div class="search-item"> <div class="search-item">
<input type="text" v-model="keyword" placeholder="文物名称" @keyup.enter="search" /> <input
type="text"
v-model="keyword"
placeholder="文物名称"
@keyup.enter="search"
/>
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
</div> </div>
</el-col>
</el-row>
</div> </div>
</div> </div>
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<div class="search-panel" v-show="showSearchPanel"> <div class="search-panel" v-show="showSearchPanel">
<el-scrollbar> <el-scrollbar>
<div class="search-panel-wrapper"> <div class="search-panel-wrapper">
<div class="type-item" v-for="(item, index) in currentPanelData" :key="index"> <div
class="type-item"
v-for="(item, index) in currentPanelData"
:key="index"
>
<span class="text" @click="handleClickSearchItem(item)"> <span class="text" @click="handleClickSearchItem(item)">
{{ item.label }} {{ item.label }}
</span> </span>
...@@ -39,17 +64,31 @@ ...@@ -39,17 +64,31 @@
<!-- <div class="total"> <!-- <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)"
@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=" <img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl) $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
" width="100%" class="face-image" lazy /> "
width="100%"
class="face-image"
lazy
/>
<!-- <div class="deco-left-top"> <!-- <div class="deco-left-top">
<img :src=" <img :src="
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g' require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
...@@ -108,11 +147,21 @@ ...@@ -108,11 +147,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>
...@@ -163,29 +212,29 @@ export default { ...@@ -163,29 +212,29 @@ export default {
{ {
label: "全部年代", label: "全部年代",
value: "", value: "",
} },
]; ];
let typeList = [ let typeList = [
{ {
label: "全部类别", label: "全部类别",
value: "", value: "",
} },
]; ];
let res = await getCrExistDict() let res = await getCrExistDict();
let resTypeList = res.data.typeList let resTypeList = res.data.typeList;
let resYearList = res.data.yearDictList let resYearList = res.data.yearDictList;
resTypeList.map(item=>{ resTypeList.map((item) => {
typeList.push({ typeList.push({
label:item.label, label: item.label,
value:item.value value: item.value,
}) });
}) });
resYearList.map(item=>{ resYearList.map((item) => {
yearList.push({ yearList.push({
label:item.label, label: item.label,
value:item.value value: item.value,
}) });
}) });
this.typeList = typeList; this.typeList = typeList;
this.yearList = yearList; this.yearList = yearList;
// await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]); // await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
...@@ -243,7 +292,7 @@ export default { ...@@ -243,7 +292,7 @@ export default {
name: this.keyword, name: this.keyword,
type: this.type, type: this.type,
years: this.years, years: this.years,
status:'1' status: "1",
}; };
let res = await getCulturalRelicList(params); let res = await getCulturalRelicList(params);
if (res.code == 0) { if (res.code == 0) {
...@@ -351,24 +400,32 @@ $text-indent: 16px; ...@@ -351,24 +400,32 @@ $text-indent: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 24px 20%; // padding: 24px 20%;
// padding: 16px 13%;
padding: 16px 0;
background: #fff;
.search-wrapper { .search-wrapper {
display: flex; // display: flex;
width: 100%; width: 1400px;
justify-content: center; margin: autp;
// justify-content: center;
/* > div {
width: 25%;
padding: 0 20px;
} */
.search-item { .search-item {
// width: 215px; // width: 215px;
width: 25%; width: 100%;
height: 46px; height: 46px;
color: #999; color: #2b2d35;
padding: 0 20px; padding: 0 20px;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border: 1px solid #ccc; border: 1px solid #fff;
background-color: #fff; background-color: #c5cade;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
...@@ -410,9 +467,10 @@ $text-indent: 16px; ...@@ -410,9 +467,10 @@ $text-indent: 16px;
.item { .item {
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));
} */
} }
.input-icon { .input-icon {
...@@ -437,9 +495,10 @@ $text-indent: 16px; ...@@ -437,9 +495,10 @@ $text-indent: 16px;
font-size: 22px; 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.5));
} */
// .box { // .box {
// width: 28px; // width: 28px;
...@@ -474,9 +533,10 @@ $text-indent: 16px; ...@@ -474,9 +533,10 @@ $text-indent: 16px;
font-size: 14px; font-size: 14px;
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;
...@@ -538,7 +598,7 @@ $text-indent: 16px; ...@@ -538,7 +598,7 @@ $text-indent: 16px;
justify-content: flex-end; justify-content: flex-end;
background-color: #fff; background-color: #fff;
&>span { & > span {
display: inline-block; display: inline-block;
padding: 4px 8px; padding: 4px 8px;
background-color: #dfab46; background-color: #dfab46;
...@@ -550,22 +610,21 @@ $text-indent: 16px; ...@@ -550,22 +610,21 @@ $text-indent: 16px;
.content-wrapper { .content-wrapper {
background-color: #fff; background-color: #fff;
padding-bottom: 126px; // padding-bottom: 126px;
.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);
.cr-list { .cr-list {
// padding: 0 74px; // padding: 0 74px;
.cr-item { .cr-item {
margin-bottom: 40px; margin-bottom: 40px;
.container { .container {
border: 2px solid #f1f1f1; // border: 2px solid #f1f1f1;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -573,14 +632,13 @@ $text-indent: 16px; ...@@ -573,14 +632,13 @@ $text-indent: 16px;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid $themeColor; // border: 2px solid $themeColor;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
.img-container { .img-container {
.deco-left-top, .deco-left-top,
.deco-left-bottom, .deco-left-bottom,
.deco-right-top, .deco-right-top,
...@@ -589,16 +647,18 @@ $text-indent: 16px; ...@@ -589,16 +647,18 @@ $text-indent: 16px;
} }
} }
.desc { /* .desc {
background: url("@/assets/imgs/list/card-title-bg.png"); background: url("@/assets/imgs/list/card-title-bg.png");
} } */
} }
.img-container { .img-container {
// background-color:#939393; // background-color:#939393;
background-color: #42555c; // background-color: #42555c;
background-color: #374475;
// #42555c // #42555c
height: 268px; // height: 268px;
height: 225px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
overflow: hidden; overflow: hidden;
...@@ -651,16 +711,18 @@ $text-indent: 16px; ...@@ -651,16 +711,18 @@ $text-indent: 16px;
} }
.desc { .desc {
height: 120px; // height: 120px;
padding: 36px 30px 20px; // padding: 36px 30px 20px;
transition: all 0.5s ease; transition: all 0.5s ease;
background: #fff; background: #fff;
.name { .name {
font-size: 18px; font-size: 20px;
font-weight: bold; padding: 20px 0;
color: $themeColor; // font-weight: bold;
margin-bottom: 18px; // color: $themeColor;
color: #333;
// margin-bottom: 18px;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -676,7 +738,8 @@ $text-indent: 16px; ...@@ -676,7 +738,8 @@ $text-indent: 16px;
.deptName { .deptName {
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
color: #444444; color: #000;
// font-weight: 600;
} }
} }
...@@ -743,9 +806,10 @@ $text-indent: 16px; ...@@ -743,9 +806,10 @@ $text-indent: 16px;
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%;
height: 116px; height: 116px;
padding-top: 30px;
} }
} }
...@@ -756,7 +820,6 @@ $text-indent: 16px; ...@@ -756,7 +820,6 @@ $text-indent: 16px;
::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%;
...@@ -779,7 +842,6 @@ $text-indent: 16px; ...@@ -779,7 +842,6 @@ $text-indent: 16px;
} }
::v-deep .el-pagination { ::v-deep .el-pagination {
.btn-prev, .btn-prev,
.btn-next { .btn-next {
background: transparent; background: transparent;
...@@ -788,13 +850,14 @@ $text-indent: 16px; ...@@ -788,13 +850,14 @@ $text-indent: 16px;
::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;
background: #fff;
min-width: 0; min-width: 0;
margin: 0 10px; margin: 0 16px;
color: #b7b7b7; color: $themeColor;
} }
.active { .active {
......
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,8 +31,9 @@ ...@@ -27,8 +31,9 @@
<i class="el-icon-search" @click="search"></i> <i class="el-icon-search" @click="search"></i>
</div> </div>
</div> </div>
</div> </div> -->
<el-row class="type-group"> <div class="type-group">
<el-row>
<el-col <el-col
:class="{ 'type-item': true, active: item.value == currentType }" :class="{ 'type-item': true, active: item.value == currentType }"
v-for="(item, index) in typeList" v-for="(item, index) in typeList"
...@@ -38,7 +43,19 @@ ...@@ -38,7 +43,19 @@
> >
{{ item.label }} {{ item.label }}
</el-col> </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> </el-row>
</div>
<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
:gutter="40"
class="search wow animate__animated animate__fadeIn"
>
<el-col :span="8">
<el-input <el-input
class="input item" class="input item"
suffix-icon="el-icon-search" suffix-icon="el-icon-search"
...@@ -14,6 +22,8 @@ ...@@ -14,6 +22,8 @@
clearable clearable
> >
</el-input> </el-input>
</el-col>
<el-col :span="8">
<el-cascader <el-cascader
class="years item" class="years item"
v-model="regionCode" v-model="regionCode"
...@@ -25,12 +35,14 @@ ...@@ -25,12 +35,14 @@
clearable clearable
> >
</el-cascader> </el-cascader>
</el-col>
<el-col :span="8">
<div class="search-button" @click="search"> <div class="search-button" @click="search">
<svg-icon icon-class="search"></svg-icon> <svg-icon icon-class="search"></svg-icon>
检索 检索
</div> </div>
</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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论