提交 607da838 authored 作者: 龙菲's avatar 龙菲

使用绿色背景的文物

上级 bbf8fd54
<template> <template>
<div class="cultural-relic"> <div class="cultural-relic">
<ListBanner title="共计已上线文物" :num="list.total" unit="件/套"/> <ListBanner title="共计录入文物" unit="件/套" :num="list.total" />
<div class="search-bar wow animate__animated animate__fadeIn"> <div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper"> <div class="search-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')"> <div class="search-item" @click="handleClickSearchBar('type')">
...@@ -17,12 +17,7 @@ ...@@ -17,12 +17,7 @@
<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" v-model="keyword" placeholder="文物名称" @keyup.enter="search" />
type="text"
v-model="keyword"
placeholder="文物名称"
@keyup.enter="search"
/>
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
</div> </div>
</div> </div>
...@@ -69,11 +64,7 @@ ...@@ -69,11 +64,7 @@
<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 <div class="type-item" v-for="(item, index) in currentPanelData" :key="index">
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>
...@@ -87,102 +78,58 @@ ...@@ -87,102 +78,58 @@
<span>{{list.total}}件文物</span> <span>{{list.total}}件文物</span>
</div> --> </div> -->
<div class="content-wrapper"> <div class="content-wrapper">
<div class="shade"> <div class="content">
<div class="jxl"> <el-row :gutter="40" class="cr-list">
<img src="@/assets/imgs/shade/jxl.png" alt="" /> <el-col :span="item.status == 1 ? 6 : 0" class="cr-item" @click.native="handleClick(item)"
</div> @mouseenter.native="handleEnterImg(item)" @mouseleave.native="handleLeaveImg(item)"
</div> v-for="(item, index) in list.records" :key="index">
<div> <div class="container wow animate__animated animate__fadeInUp" v-if="item.status == 1">
<div class="content"> <div class="img-container">
<el-row :gutter="40" class="cr-list"> <img :src="
<el-col $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
:span="item.status == 1 ? 6 : 0" " width="100%" class="face-image" lazy />
class="cr-item" <!-- <div class="deco-left-top">
@click.native="handleClick(item)" <img :src="
@mouseenter.native="handleEnterImg(item)" require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
@mouseleave.native="handleLeaveImg(item)" }.png`)
v-for="(item, index) in list.records" " alt="" />
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="img-container">
<img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
class="face-image"
lazy
/>
<!-- <div class="deco-left-top">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div>
<div class="deco-left-bottom">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div>
<div class="deco-right-top">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div>
<div class="deco-right-bottom">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> -->
</div> </div>
<div class="showIcon" v-if="item && item.url3d"> <div class="deco-left-bottom">
<svg-icon icon-class="3d" class="icon"></svg-icon> <img :src="
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
}.png`)
" alt="" />
</div> </div>
<div class="hover-bg"> <div class="deco-right-top">
<div> <img :src="
<div> require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
<div class="name">{{ item.name }}</div> }.png`)
<div class="depart">{{ item.deptName }}</div> " alt="" />
</div>
</div>
</div> </div>
<div class="desc"> <div class="deco-right-bottom">
<div class="name">{{ item.name }}</div> <img :src="
<div class="desc-container"> require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
<div class="left"> }.png`)
<!-- <div class="deptName"> " alt="" />
</div> -->
</div>
<div class="showIcon" v-if="item && item.url3d">
<svg-icon icon-class="3d" class="icon"></svg-icon>
</div>
<div class="desc">
<div class="name">{{ item.name }}</div>
<div class="desc-container">
<div class="left">
<!-- <div class="deptName">
<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 class="right"> </div>
<!-- <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>{{
...@@ -194,28 +141,17 @@ ...@@ -194,28 +141,17 @@
<span>{{ item.browseCount }}</span> <span>{{ item.browseCount }}</span>
</span> </span>
</div> --> </div> -->
</div>
</div> </div>
</div> </div>
</el-col> </div>
</el-row> </el-col>
<el-empty </el-row>
description="暂无数据" <el-empty description="暂无数据" v-if="list.records.length == 0"></el-empty>
v-if="list.records.length == 0" <div class="pagination-container">
></el-empty> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
<div class="pagination-container"> :current-page="Number(list.current)" :page-sizes="[20, 40, 100]" :page-size="Number(list.size)"
<el-pagination layout="total, prev, pager, next" :total="Number(list.total)" class="pagination">
@size-change="handleSizeChange" </el-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>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -265,13 +201,13 @@ export default { ...@@ -265,13 +201,13 @@ export default {
{ {
label: "全部年代", label: "全部年代",
value: "", value: "",
}, }
]; ];
let typeList = [ let typeList = [
{ {
label: "全部类别", label: "全部类别",
value: "", value: "",
}, }
]; ];
await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]); await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
for (const key in this.dicts.culturalRelicType) { for (const key in this.dicts.culturalRelicType) {
...@@ -436,8 +372,10 @@ export default { ...@@ -436,8 +372,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
$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 {
...@@ -458,6 +396,7 @@ $text-indent: 16px; ...@@ -458,6 +396,7 @@ $text-indent: 16px;
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
.search-item { .search-item {
// width: 215px; // width: 215px;
width: 25%; width: 25%;
...@@ -474,6 +413,7 @@ $text-indent: 16px; ...@@ -474,6 +413,7 @@ $text-indent: 16px;
// background-size: 100% 100%; // background-size: 100% 100%;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
input { input {
outline: none; outline: none;
border: none; border: none;
...@@ -481,18 +421,22 @@ $text-indent: 16px; ...@@ -481,18 +421,22 @@ $text-indent: 16px;
background: transparent; background: transparent;
width: 80%; width: 80%;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
/*Webkit browsers*/ /*Webkit browsers*/
color: #999; color: #999;
} }
:-moz-placeholder { :-moz-placeholder {
/*Mozilla Firefox 4 to 8*/ /*Mozilla Firefox 4 to 8*/
color: #999; color: #999;
} }
::moz-placeholder { ::moz-placeholder {
/*Mozilla Firefox 19+*/ /*Mozilla Firefox 19+*/
color: #999; color: #999;
} }
:-ms-input-placeholder { :-ms-input-placeholder {
/*Internet Explorer 10+*/ /*Internet Explorer 10+*/
color: #999; color: #999;
...@@ -502,11 +446,12 @@ $text-indent: 16px; ...@@ -502,11 +446,12 @@ $text-indent: 16px;
.item { .item {
margin-right: 20px; margin-right: 20px;
&:hover { &:hover {
-webkit-box-reflect: below 2px -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
} }
} }
.input-icon { .input-icon {
height: 100%; height: 100%;
display: flex; display: flex;
...@@ -515,6 +460,7 @@ $text-indent: 16px; ...@@ -515,6 +460,7 @@ $text-indent: 16px;
margin-left: 12px; margin-left: 12px;
color: #444; color: #444;
} }
.threeD { .threeD {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
...@@ -522,14 +468,16 @@ $text-indent: 16px; ...@@ -522,14 +468,16 @@ $text-indent: 16px;
color: #666; color: #666;
margin-left: 20px; margin-left: 20px;
transition: all ease 0.3s; transition: all ease 0.3s;
.svg-icon { .svg-icon {
margin-right: 4px; margin-right: 4px;
font-size: 22px; font-size: 22px;
} }
&:hover { &:hover {
-webkit-box-reflect: below 2px -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
linear-gradient(transparent, rgba(0, 0, 0, 0.5));
} }
// .box { // .box {
// width: 28px; // width: 28px;
// height: 28px; // height: 28px;
...@@ -549,6 +497,7 @@ $text-indent: 16px; ...@@ -549,6 +497,7 @@ $text-indent: 16px;
// color: #444; // color: #444;
// } // }
} }
.search-button { .search-button {
cursor: pointer; cursor: pointer;
width: 156px; width: 156px;
...@@ -563,25 +512,28 @@ $text-indent: 16px; ...@@ -563,25 +512,28 @@ $text-indent: 16px;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover {
-webkit-box-reflect: below 2px -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
} }
.svg-icon { .svg-icon {
margin-right: 4px; margin-right: 4px;
} }
} }
} }
.search-panel { .search-panel {
min-height: 100px; min-height: 100px;
max-height: 138px; max-height: 138px;
background: rgb($themeColor, 0.15) url("@/assets/imgs/home/panel-bg.png"); background: rgb(#8ac7ff, 1) url("@/assets/imgs/home/panel-bg.png");
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
::v-deep .el-scrollbar__view { ::v-deep .el-scrollbar__view {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
/*隐藏浏览器自带的水平滚动条*/ /*隐藏浏览器自带的水平滚动条*/
::v-deep .el-scrollbar__wrap { ::v-deep .el-scrollbar__wrap {
overflow-x: hidden !important; overflow-x: hidden !important;
...@@ -593,6 +545,7 @@ $text-indent: 16px; ...@@ -593,6 +545,7 @@ $text-indent: 16px;
flex-wrap: wrap; flex-wrap: wrap;
overflow: auto; overflow: auto;
padding: 10px 0; padding: 10px 0;
.type-item { .type-item {
width: 25%; width: 25%;
display: flex; display: flex;
...@@ -601,9 +554,11 @@ $text-indent: 16px; ...@@ -601,9 +554,11 @@ $text-indent: 16px;
font-size: 14px; font-size: 14px;
margin-bottom: 24px; margin-bottom: 24px;
position: relative; position: relative;
.text { .text {
cursor: pointer; cursor: pointer;
} }
.divider { .divider {
position: absolute; position: absolute;
right: 10px; right: 10px;
...@@ -619,7 +574,8 @@ $text-indent: 16px; ...@@ -619,7 +574,8 @@ $text-indent: 16px;
display: flex; display: flex;
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;
...@@ -628,35 +584,10 @@ $text-indent: 16px; ...@@ -628,35 +584,10 @@ $text-indent: 16px;
margin-top: 32px; margin-top: 32px;
} }
} }
.content-wrapper { .content-wrapper {
background-color: #fff; background-color: #fff;
padding: 0;
padding-bottom: 126px; padding-bottom: 126px;
> div {
padding: 0 13%;
}
.shade {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
padding: 0;
z-index: 0;
pointer-events: none;
> div.jxl {
height: 70vh;
filter: brightness(0.1);
opacity: 0.1;
position: absolute;
bottom: -80px;
right: -50px;
> img {
height: 100%;
}
}
}
.content { .content {
padding: 16px 0 60px; padding: 16px 0 60px;
...@@ -665,113 +596,57 @@ $text-indent: 16px; ...@@ -665,113 +596,57 @@ $text-indent: 16px;
// 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;
min-height: 500px;
.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;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
width: 350px;
height: 350px;
// overflow: hidden;
justify-content: center;
text-align: center;
text-align: center;
&:hover {
// border: 2px solid $themeColor;
// border-radius: 100%; &:hover {
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,
.deco-right-bottom { .deco-right-bottom {
display: block; display: block;
} }
> img {
transform: scale(1.2);
filter: grayscale(0.7) blur(1px);
}
}
.desc {
// background: url("@/assets/imgs/list/card-title-bg.png");
// display: none;
opacity: 0;
} }
.hover-bg { .desc {
> div { background: url("@/assets/imgs/list/card-title-bg.png");
opacity: 1;
width: 100%;
height: 100%;
}
}
}
.hover-bg {
width: 100%;
height: 100%;
// padding: 20px;
position: absolute;
left: 0;
top: 0;
> div {
opacity: 0;
width: 120%;
height: 120%;
display: flex;
justify-content: center;
align-items: center;
background: rgb(66 85 92 / 80%);
color: #fff;
text-align: center;
border-radius: 100%;
transition: all 0.3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
> div {
.name {
font-weight: 600;
font-family: "楷体";
font-size: 26px;
padding: 20px;
}
.depart {
color: #ffb836;
font-family: "黑体";
}
}
} }
} }
.img-container { .img-container {
// background-color:#939393; // background-color:#939393;
// background-color: #42555c; background-color: #42555c;
// #42555c // #42555c
// height: 268px; height: 268px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 350px;
height: 250px;
padding: 30px;
.face-image { .face-image {
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.deco-left-top, .deco-left-top,
.deco-left-bottom, .deco-left-bottom,
.deco-right-top, .deco-right-top,
...@@ -781,6 +656,7 @@ $text-indent: 16px; ...@@ -781,6 +656,7 @@ $text-indent: 16px;
height: 36px; height: 36px;
// display: none; // display: none;
transition: all 0.5s ease; transition: all 0.5s ease;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -792,28 +668,31 @@ $text-indent: 16px; ...@@ -792,28 +668,31 @@ $text-indent: 16px;
top: 0; top: 0;
transform: rotate(180deg); transform: rotate(180deg);
} }
.deco-left-bottom { .deco-left-bottom {
left: 0; left: 0;
bottom: 0; bottom: 0;
transform: rotate(90deg); transform: rotate(90deg);
} }
.deco-right-top { .deco-right-top {
right: 0; right: 0;
top: 0; top: 0;
transform: rotate(270deg); transform: rotate(270deg);
} }
.deco-right-bottom { .deco-right-bottom {
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
} }
.desc { .desc {
// height: 120px; height: 120px;
height: 36px; padding: 36px 30px 20px;
// padding: 36px 30px 20px; transition: all 0.5s ease;
// transition: all 0.5s ease;
background: #fff; background: #fff;
// display: none;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
...@@ -824,11 +703,12 @@ $text-indent: 16px; ...@@ -824,11 +703,12 @@ $text-indent: 16px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.desc-container { .desc-container {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
display: none;
.left { .left {
.deptName { .deptName {
font-size: 14px; font-size: 14px;
...@@ -836,17 +716,21 @@ $text-indent: 16px; ...@@ -836,17 +716,21 @@ $text-indent: 16px;
color: #444444; color: #444444;
} }
} }
.right { .right {
color: #858484; color: #858484;
.collect { .collect {
margin-right: 10px; margin-right: 10px;
} }
.svg-icon { .svg-icon {
margin-right: 4px; margin-right: 4px;
} }
} }
} }
} }
.showIcon { .showIcon {
position: absolute; position: absolute;
top: 10px; top: 10px;
...@@ -872,6 +756,7 @@ $text-indent: 16px; ...@@ -872,6 +756,7 @@ $text-indent: 16px;
width: 20px; width: 20px;
display: inline-block; display: inline-block;
} }
.text { .text {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
...@@ -879,6 +764,7 @@ $text-indent: 16px; ...@@ -879,6 +764,7 @@ $text-indent: 16px;
cursor: pointer; cursor: pointer;
display: none; display: none;
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -900,73 +786,6 @@ $text-indent: 16px; ...@@ -900,73 +786,6 @@ $text-indent: 16px;
} }
} }
.cultural-relic {
.content {
.cr-list {
.cr-item {
.container {
.info {
position: relative;
border-radius: 10px;
overflow: hidden;
padding: 50px 10px;
.name {
text-align: center;
padding-bottom: 50px;
}
.depart {
position: absolute;
bottom: 30px;
right: 10px;
}
.corner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
.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;
}
}
}
}
}
}
}
}
::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;
...@@ -974,6 +793,7 @@ $text-indent: 16px; ...@@ -974,6 +793,7 @@ $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%;
...@@ -982,6 +802,7 @@ $text-indent: 16px; ...@@ -982,6 +802,7 @@ $text-indent: 16px;
background: url("@/assets/imgs/list/input-border.png"); background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%; background-size: 100% 100%;
height: 40px; height: 40px;
&::placeholder { &::placeholder {
text-indent: 10px; text-indent: 10px;
color: #999; color: #999;
...@@ -995,11 +816,13 @@ $text-indent: 16px; ...@@ -995,11 +816,13 @@ $text-indent: 16px;
} }
::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: 28px;
...@@ -1010,6 +833,7 @@ $text-indent: 16px; ...@@ -1010,6 +833,7 @@ $text-indent: 16px;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
} }
.active { .active {
color: #fff; color: #fff;
} }
...@@ -1019,4 +843,4 @@ $text-indent: 16px; ...@@ -1019,4 +843,4 @@ $text-indent: 16px;
//可设置滚动条颜色 //可设置滚动条颜色
background: rgba($color: #000000, $alpha: 0.4); background: rgba($color: #000000, $alpha: 0.4);
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论