Skip to content

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

使用绿色背景的文物

上级 bbf8fd54
隐藏空白字符变更
内嵌 并排
正在显示 包含 127 行增加 和 302 行删除
src/views/culturalRelic/index.vue
浏览文件 @ 607da838
<template>
<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-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')">
......@@ -17,12 +17,7 @@
<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"
/>
<input type="text" v-model="keyword" placeholder="文物名称" @keyup.enter="search" />
<i class="el-icon-search"></i>
</div>
</div>
......@@ -69,11 +64,7 @@
<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"
>
<div class="type-item" v-for="(item, index) in currentPanelData" :key="index">
<span class="text" @click="handleClickSearchItem(item)">
{{ item.label }}
</span>
......@@ -87,102 +78,58 @@
<span>共{{list.total}}件文物</span>
</div> -->
<div class="content-wrapper">
<div class="shade">
<div class="jxl">
<img src="@/assets/imgs/shade/jxl.png" alt="" />
</div>
</div>
<div>
<div class="content">
<el-row :gutter="40" class="cr-list">
<el-col
:span="item.status == 1 ? 6 : 0"
class="cr-item"
@click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="img-container">
<img
:src="
$getFullUrl(item.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 class="content">
<el-row :gutter="40" class="cr-list">
<el-col :span="item.status == 1 ? 6 : 0" class="cr-item" @click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)" @mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records" :key="index">
<div class="container wow animate__animated animate__fadeInUp" v-if="item.status == 1">
<div class="img-container">
<img :src="
$getFullUrl(item.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="showIcon" v-if="item && item.url3d">
<svg-icon icon-class="3d" class="icon"></svg-icon>
<div class="deco-left-bottom">
<img :src="
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
}.png`)
" alt="" />
</div>
<div class="hover-bg">
<div>
<div>
<div class="name">{{ item.name }}</div>
<div class="depart">{{ item.deptName }}</div>
</div>
</div>
<div class="deco-right-top">
<img :src="
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
}.png`)
" alt="" />
</div>
<div class="desc">
<div class="name">{{ item.name }}</div>
<div class="desc-container">
<div class="left">
<!-- <div class="deptName">
<div class="deco-right-bottom">
<img :src="
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g'
}.png`)
" alt="" />
</div> -->
</div>
<div class="showIcon" v-if="item && item.url3d">
<svg-icon icon-class="3d" class="icon"></svg-icon>
</div>
<div class="desc">
<div class="name">{{ item.name }}</div>
<div class="desc-container">
<div class="left">
<!-- <div class="deptName">
<span>关键词：</span>
<span>{{ item.keyword }}</span>
</div> -->
<div class="deptName">
<span>展览单位：</span>
<span>{{ item.deptName }}</span>
</div>
<div class="deptName">
<span>展览单位：</span>
<span>{{ item.deptName }}</span>
</div>
<!-- <div class="right">
</div>
<!-- <div class="right">
<span class="collect">
<svg-icon icon-class="collect"></svg-icon>
<span>{{
......@@ -194,28 +141,17 @@
<span>{{ item.browseCount }}</span>
</span>
</div> -->
</div>
</div>
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</div>
</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>
......@@ -265,13 +201,13 @@ export default {
{
label: "全部年代",
value: "",
},
}
];
let typeList = [
{
label: "全部类别",
value: "",
},
}
];
await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
for (const key in this.dicts.culturalRelicType) {
......@@ -436,8 +372,10 @@ export default {
<style lang="scss" scoped>
$text-indent: 16px;
.cultural-relic {
width: 100%;
// background-color: $themeColor;
// color: #fff;
.search-bar {
......@@ -458,6 +396,7 @@ $text-indent: 16px;
display: flex;
width: 100%;
justify-content: center;
.search-item {
// width: 215px;
width: 25%;
......@@ -474,6 +413,7 @@ $text-indent: 16px;
// background-size: 100% 100%;
margin-right: 20px;
cursor: pointer;
input {
outline: none;
border: none;
......@@ -481,18 +421,22 @@ $text-indent: 16px;
background: transparent;
width: 80%;
}
::-webkit-input-placeholder {
/*Webkit browsers*/
color: #999;
}
:-moz-placeholder {
/*Mozilla Firefox 4 to 8*/
color: #999;
}
::moz-placeholder {
/*Mozilla Firefox 19+*/
color: #999;
}
:-ms-input-placeholder {
/*Internet Explorer 10+*/
color: #999;
......@@ -502,11 +446,12 @@ $text-indent: 16px;
.item {
margin-right: 20px;
&:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
}
.input-icon {
height: 100%;
display: flex;
......@@ -515,6 +460,7 @@ $text-indent: 16px;
margin-left: 12px;
color: #444;
}
.threeD {
display: flex;
cursor: pointer;
......@@ -522,14 +468,16 @@ $text-indent: 16px;
color: #666;
margin-left: 20px;
transition: all ease 0.3s;
.svg-icon {
margin-right: 4px;
font-size: 22px;
}
&:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.5));
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
// .box {
// width: 28px;
// height: 28px;
......@@ -549,6 +497,7 @@ $text-indent: 16px;
// color: #444;
// }
}
.search-button {
cursor: pointer;
width: 156px;
......@@ -563,25 +512,28 @@ $text-indent: 16px;
transition: all 0.2s ease;
&:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
.svg-icon {
margin-right: 4px;
}
}
}
.search-panel {
min-height: 100px;
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%;
display: flex;
justify-content: center;
::v-deep .el-scrollbar__view {
display: flex;
justify-content: center;
}
/*隐藏浏览器自带的水平滚动条*/
::v-deep .el-scrollbar__wrap {
overflow-x: hidden !important;
......@@ -593,6 +545,7 @@ $text-indent: 16px;
flex-wrap: wrap;
overflow: auto;
padding: 10px 0;
.type-item {
width: 25%;
display: flex;
......@@ -601,9 +554,11 @@ $text-indent: 16px;
font-size: 14px;
margin-bottom: 24px;
position: relative;
.text {
cursor: pointer;
}
.divider {
position: absolute;
right: 10px;
......@@ -619,7 +574,8 @@ $text-indent: 16px;
display: flex;
justify-content: flex-end;
background-color: #fff;
& > span {
&>span {
display: inline-block;
padding: 4px 8px;
background-color: #dfab46;
......@@ -628,35 +584,10 @@ $text-indent: 16px;
margin-top: 32px;
}
}
.content-wrapper {
background-color: #fff;
padding: 0;
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 {
padding: 16px 0 60px;
......@@ -665,113 +596,57 @@ $text-indent: 16px;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
// padding: 0 74px;
min-height: 500px;
.cr-item {
margin-bottom: 40px;
.container {
// border: 2px solid #f1f1f1;
border: 2px solid #f1f1f1;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
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);
} */
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
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 {
> div {
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: "黑体";
}
}
.desc {
background: url("@/assets/imgs/list/card-title-bg.png");
}
}
.img-container {
// background-color:#939393;
// background-color: #42555c;
background-color: #42555c;
// #42555c
// height: 268px;
height: 268px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
position: relative;
width: 350px;
height: 250px;
padding: 30px;
.face-image {
height: 100%;
object-fit: contain;
transition: all 0.5s ease;
}
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
......@@ -781,6 +656,7 @@ $text-indent: 16px;
height: 36px;
// display: none;
transition: all 0.5s ease;
img {
width: 100%;
height: 100%;
......@@ -792,28 +668,31 @@ $text-indent: 16px;
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;
height: 36px;
// padding: 36px 30px 20px;
// transition: all 0.5s ease;
height: 120px;
padding: 36px 30px 20px;
transition: all 0.5s ease;
background: #fff;
// display: none;
.name {
font-size: 18px;
font-weight: bold;
......@@ -824,11 +703,12 @@ $text-indent: 16px;
text-overflow: ellipsis;
overflow: hidden;
}
.desc-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
display: none;
.left {
.deptName {
font-size: 14px;
......@@ -836,17 +716,21 @@ $text-indent: 16px;
color: #444444;
}
}
.right {
color: #858484;
.collect {
margin-right: 10px;
}
.svg-icon {
margin-right: 4px;
}
}
}
}
.showIcon {
position: absolute;
top: 10px;
......@@ -872,6 +756,7 @@ $text-indent: 16px;
width: 20px;
display: inline-block;
}
.text {
font-size: 14px;
color: #fff;
......@@ -879,6 +764,7 @@ $text-indent: 16px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
......@@ -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-select .el-input .el-select__caret {
font-weight: bold;
......@@ -974,6 +793,7 @@ $text-indent: 16px;
::v-deep .el-input,
.el-cascader {
// width: 368px !important;
.el-input__inner {
// width: 100%;
......@@ -982,6 +802,7 @@ $text-indent: 16px;
background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%;
height: 40px;
&::placeholder {
text-indent: 10px;
color: #999;
......@@ -995,11 +816,13 @@ $text-indent: 16px;
}
::v-deep .el-pagination {
.btn-prev,
.btn-next {
background: transparent;
}
}
::v-deep .el-pager {
li {
width: 28px;
......@@ -1010,6 +833,7 @@ $text-indent: 16px;
margin: 0 10px;
color: #b7b7b7;
}
.active {
color: #fff;
}
......@@ -1019,4 +843,4 @@ $text-indent: 16px;
//可设置滚动条颜色
background: rgba($color: #000000, $alpha: 0.4);
}
</style>
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论