Skip to content

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

列表UI优化

上级 06be6dce
隐藏空白字符变更
内嵌 并排
正在显示 包含 915 行增加 和 569 行删除
src/components/ListBanner/index.vue 0 → 100644
浏览文件 @ d2f5a9ff
<template>
<div class="banner wow animate__animated animate__fadeIn">
<div class="title wow animate__animated animate__fadeInLeft">
<div class="img-container">
<img src="@/assets/imgs/list/ding.png" alt="" srcset="" />
</div>
<div class="text">{{ title }}</div>
</div>
</div>
</template>
<script>
export default {
name: "ListBanner",
props: {
title: {
type: String,
default: "标题",
},
},
};
</script>
<style lang='scss' scoped>
.banner {
width: 100%;
height: 222px;
background-image: url("@/assets/imgs/list/banner.png");
background-size:100% 100%;
display: flex;
align-items: center;
.title {
padding: 0 13%;
display: flex;
align-items: flex-end;
.img-container {
width: 78px;
height: 78px;
margin-right: 26px;
img {
width: 100%;
height: 100%;
}
}
.text {
font-size: 42px;
font-family: "Alibaba-PuHuiTi";
font-weight: 400;
color: #2069c4;
}
}
}
</style>
\ No newline at end of file
src/icons/svg/search.svg 0 → 100644
浏览文件 @ d2f5a9ff
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1662104899558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2853" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z" p-id="2854"></path></svg>
\ No newline at end of file
src/views/culturalRelic/index.vue
浏览文件 @ d2f5a9ff
<template>
<div class="cultural-relic">
<!-- <NavBar /> -->
<ListBanner title="虚拟展厅" />
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40">
<el-col :span="24">
<div class="title wow animate__animated animate__fadeInLeft">
精选藏品
</div>
<div
class="bottom-line wow animate__animated animate__fadeInLeft"
></div>
<div class="search wow animate__animated animate__fadeIn">
<div class="search wow animate__animated animate__fadeIn">
<el-row style="width: 100%;display: flex;align-items:center" :span="4">
<el-col :span="6">
<el-input
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
placeholder="关键词"
@keyup.enter.native="search"
clearable
style="width: 100%"
>
</el-input>
</el-col>
<el-col :span="6">
<el-select
class="type item"
v-model="type"
placeholder="所属类别"
style="width: 100%"
filterable
@change="handleTypeChange"
clearable
style="width: 100%"
>
<el-option
v-for="(value, key) in dicts.culturalRelicType"
......@@ -38,9 +35,10 @@
>
</el-option>
</el-select>
</el-col>
<el-col :span="6">
<el-cascader
class="years item"
style="width: 100%"
v-model="years"
:options="culturalRelicYears"
:props="culturalRelicYearsProps"
......@@ -49,105 +47,101 @@
@change="handleYearsChange"
clearable
ref="years"
style="width: 100%"
>
</el-cascader>
</el-col>
<el-col :span="3">
<div class="search-button" @click="search" style="width: 100%">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</el-col>
<div class="search-button item" @click="search">搜 索</div>
<el-col :span="3">
<div class="threeD" @click="handleClickThreeD">
<div class="box">
<i class="el-icon-check" v-show="onlyShow3d"></i>
</div>
<div class="text">查看3D文物</div>
</div>
</div>
<el-row :gutter="40" class="cr-list">
<el-col
:span="6"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="
$getFullUrl(item.faceImagePressUrl) ||
$getFullUrl(item.faceImageUrl)
</el-col>
</el-row>
</div>
<el-row :gutter="40" class="cr-list">
<el-col
:span="6"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div class="container wow animate__animated animate__fadeInUp">
<div class="img-container">
<img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
>
<div class="img">
<img
:src="$getFullUrl(item.faceImagePressUrl)"
v-if="$getFullUrl(item.faceImagePressUrl)"
width="100%"
class="img"
lazy
/>
<img
v-else-if="$getFullUrl(item.faceImageUrl)"
:src="$getFullUrl(item.faceImageUrl)"
width="100%"
height="100%"
class="img"
/>
<img
v-else
src="@/assets/404_images/no-pic.png"
alt=""
width="100%"
height="100%"
class="img"
/>
</div>
<div class="showIcon" v-if="item && item.url3d">
<!-- <img src="@/assets/imgs/cr/3D.png" class="icon" /> -->
<svg-icon icon-class="3d" class="icon"></svg-icon>
<!-- <div class="text" @click.stop="handleTo3D(item.url3d)">
点击查看3D模型
</div> -->
</div>
<div class="desc">
<span class="name">{{ item.name }}</span>
</div>
width="100%"
class="face-image"
lazy
/>
<div class="deco-left-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
<div class="deco-left-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
<div class="deco-right-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
<div class="deco-right-bottom">
<img src="@/assets/imgs/list/img-deco.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="deptName">
<span>展览单位：</span>
<span>{{ item.deptName }}</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import ListBanner from "@/components/ListBanner";
import { getCulturalRelicList } from "@/api/culturalRelic";
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
export default {
name: "CulturalRelic",
// components: { SearchBar, NavBar, Footer },
components: { SearchBar },
components: { ListBanner },
data() {
return {
list: {
......@@ -269,31 +263,30 @@ $text-indent: 16px;
.content-wrapper {
padding-top: 60px;
background-color: #fff;
.title {
font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
padding-bottom: 126px;
.search {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($blue, 0.2);
padding: 20px 40px;
padding: 90px 70px 80px;
margin-bottom: 40px;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
height: 214px;
.item {
margin-right: 20px;
}
.input-icon {
height: 100%;
display: flex;
align-items: center;
font-size: 20px;
margin-left: 12px;
color: #444;
}
.threeD {
display: flex;
width: 560px;
cursor: pointer;
.box {
width: 28px;
......@@ -301,7 +294,7 @@ $text-indent: 16px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #2069c4;
border: 2px solid #444;
margin-right: 6px;
i {
font-size: 28px;
......@@ -311,64 +304,120 @@ $text-indent: 16px;
display: flex;
justify-content: center;
align-items: center;
color: #2069c4;
color: #444;
}
}
.search-button {
cursor: pointer;
width: 420px;
width: 156px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: $blue;
color: #fff;
background: url("@/assets/imgs/list/search-button-bg.png");
background-size: 100% 100%;
color: #444;
font-size: 14px;
.svg-icon {
margin-right: 4px;
}
}
}
.content {
width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
padding: 0 74px;
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
border: 2px solid #f1f1f1;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
img {
border: 2px solid #2069c4;
.face-image {
transform: scale(1.2);
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
display: block;
}
}
.desc {
background-color: $blue;
color: #fff;
background: url("@/assets/imgs/list/card-title-bg.png");
}
}
.img {
background-color: #f8f8f8;
height: 240px;
.img-container {
background-color: #fff;
height: 268px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
&:hover {
position: relative;
.face-image {
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
position: absolute;
width: 36px;
height: 36px;
display: none;
transition: all 0.5s ease;
img {
transform: scale(1.2);
width: 100%;
height: 100%;
}
}
img {
height: 100%;
object-fit: contain;
// width: auto;
.deco-left-top {
left: 0;
top: 0;
transform: rotate(180deg);
}
.deco-left-bottom {
left: 0;
bottom: 0;
transform: rotate(90deg);
}
.deco-right-top {
right: 0;
top: 0;
transform: rotate(270deg);
}
.deco-right-bottom {
right: 0;
bottom: 0;
}
}
.desc {
padding: 16px 0;
display: flex;
justify-content: center;
height: 150px;
padding: 36px 30px;
transition: all 0.5s ease;
flex: 1;
background: #fff;
.name {
font-size: 18px;
font-weight: bold;
color: #2069c4;
margin-bottom: 18px;
}
.deptName {
font-size: 14px;
font-weight: 300;
color: #444444;
}
}
.showIcon {
position: absolute;
......@@ -390,17 +439,7 @@ $text-indent: 16px;
color: #fff;
border-radius: 8px;
font-size: 16px;
// &:hover {
// .icon {
// display: none;
// }
// .text {
// display: block;
// }
// width: 130px;
// padding: 4px 8px;
// background-color: $blue;
// }
.icon {
width: 20px;
display: inline-block;
......@@ -427,19 +466,50 @@ $text-indent: 16px;
margin: 24px;
display: flex;
justify-content: center;
align-items: center;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
height: 116px;
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
color: $blue;
font-weight: bold;
}
::v-deep .el-input {
::v-deep .el-input,
.el-cascader {
// width: 368px !important;
.el-input__inner {
// width: 100%;
border: none;
border-radius: 0;
background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%;
&::placeholder {
text-indent: 10px;
color: #666;
}
}
}
::v-deep .el-pagination {
.btn-prev,
.btn-next {
background: transparent;
}
}
::v-deep .el-pager {
li {
width: 28px;
height: 28px;
border-radius: 50%;
background: #77a7c9;
min-width: 0;
}
.active {
color: #fff;
}
}
</style>
\ No newline at end of file
src/views/display/index.vue
浏览文件 @ d2f5a9ff
<template>
<div class="display">
<!-- <NavBar /> -->
<ListBanner title="精选展览" />
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40">
<el-col :span="24">
<div class="title wow animate__animated animate__fadeInLeft">
精选展览
</div>
<div
class="bottom-line wow animate__animated animate__fadeInLeft"
></div>
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
placeholder="关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
<el-select
class="type item"
v-model="type"
placeholder="所属类别"
style="width: 100%"
filterable
@change="handleTypeChange"
clearable
>
<el-option
v-for="(value, key) in dicts.display_type"
:key="key"
:label="value"
:value="key"
>
</el-option>
</el-select>
<el-cascader
class="years item"
style="width: 100%"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
ref="region"
>
</el-cascader>
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
v-model="keyword"
placeholder="关键词"
@keyup.enter.native="search"
clearable
>
<!-- <span class="input-icon" slot="prefix">
<svg-icon icon-class="keyword"></svg-icon>
</span> -->
</el-input>
<el-select
class="type item"
v-model="type"
placeholder="所属类别"
filterable
@change="handleTypeChange"
clearable
>
<el-option
v-for="(value, key) in dicts.display_type"
:key="key"
:label="value"
:value="key"
>
</el-option>
</el-select>
<el-cascader
class="years item"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
ref="region"
>
</el-cascader>
<div class="search-button" @click="search">搜 索</div>
</div>
<el-row :gutter="40" class="cr-list">
<el-col
:span="8"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="$getFullUrl(item.faceImagePressUrl)"
>
<div class="img">
<img
:src="$getFullUrl(item.faceImagePressUrl)"
v-if="$getFullUrl(item.faceImagePressUrl)"
width="100%"
class="img"
lazy
/>
<img
v-else
src="@/assets/404_images/no-pic.png"
alt=""
width="100%"
height="100%"
class="img"
/>
</div>
<div class="desc">
<span class="name">{{ item.title }}</span>
</div>
<div class="search-button" @click="search">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</div>
<el-row :gutter="40" class="cr-list">
<el-col
:span="8"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div class="container wow animate__animated animate__fadeInUp">
<div class="img-container">
<img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
class="face-image"
lazy
/>
<div class="deco-left-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
<div class="deco-left-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
<div class="deco-right-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
<div class="deco-right-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
<div class="desc">
<div class="name">{{ item.title }}</div>
<div class="deptName">
<span>关键词：</span>
<span>{{ item.keyword }}</span>
</div>
<div class="deptName">
<span>展览单位：</span>
<span>{{ item.deptName }}</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import ListBanner from "@/components/ListBanner";
import { getList } from "@/api/display";
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
export default {
name: "CulturalRelic",
// components: { SearchBar, NavBar, Footer },
components: { SearchBar },
name: "Display",
components: { ListBanner },
data() {
return {
list: {
......@@ -192,9 +193,9 @@ export default {
handleClick(item) {
console.log(item);
const { themeType,exhibitionId } = item;
const { themeType, exhibitionId } = item;
this.$router.push({
path: `display/${themeType}/${exhibitionId}`
path: `display/${themeType}/${exhibitionId}`,
});
},
defImg(e) {
......@@ -252,101 +253,140 @@ $text-indent: 16px;
// color: #fff;
.content-wrapper {
padding-top: 60px;
padding-bottom: 126px;
background-color: #fff;
.title {
font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
.search {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($blue, 0.2);
padding: 20px 40px;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
margin-bottom: 40px;
height: 214px;
padding: 90px 70px 80px;
.item {
margin-right: 20px;
}
.threeD {
.input-icon {
height: 100%;
display: flex;
width: 420px;
cursor: pointer;
.box {
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #563f17;
margin-right: 6px;
i {
font-size: 28px;
}
}
.text {
display: flex;
justify-content: center;
align-items: center;
}
align-items: center;
font-size: 20px;
margin-left: 12px;
color: #444;
}
.search-button {
cursor: pointer;
width: 420px;
height: 48px;
width: 156px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: $blue;
color: #fff;
background: url("@/assets/imgs/list/search-button-bg.png");
background-size: 100% 100%;
color: #444;
font-size: 14px;
.svg-icon {
margin-right: 4px;
}
}
}
.content {
width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
padding: 0 74px;
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
border: 2px solid #f1f1f1;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
img {
border: 2px solid #2069c4;
.face-image {
transform: scale(1.2);
}
.desc {
background-color: $blue;
color: #fff;
background: url("@/assets/imgs/list/card-title-bg.png");
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
display: block;
}
}
}
.img {
.img-container {
background-color: #f8f8f8;
height: 240px;
height: 268px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
img {
position: relative;
.face-image {
height: 100%;
object-fit: contain;
// width: auto;
object-fit: cover;
transition: all 0.5s ease;
}
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
position: absolute;
width: 36px;
height: 36px;
display: none;
transition: all 0.5s ease;
img {
width: 100%;
height: 100%;
}
}
.deco-left-top {
left: 0;
top: 0;
transform: rotate(180deg);
}
.deco-left-bottom {
left: 0;
bottom: 0;
transform: rotate(90deg);
}
.deco-right-top {
right: 0;
top: 0;
transform: rotate(270deg);
}
.deco-right-bottom {
right: 0;
bottom: 0;
}
}
.desc {
padding: 16px 0;
display: flex;
justify-content: center;
height: 150px;
padding: 36px 30px;
transition: all 0.5s ease;
flex: 1;
background: #fff;
.name {
font-size: 18px;
font-weight: bold;
color: #2069c4;
margin-bottom: 18px;
}
.deptName {
font-size: 14px;
font-weight: 300;
color: #444444;
}
}
}
}
......@@ -358,19 +398,50 @@ $text-indent: 16px;
margin: 24px;
display: flex;
justify-content: center;
align-items: center;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
height: 116px;
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
color: $blue;
font-weight: bold;
}
::v-deep .el-input {
::v-deep .el-input,
.el-cascader {
width: 368px !important;
.el-input__inner {
width: 100%;
border: none;
border-radius: 0;
background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%;
&::placeholder {
text-indent: 10px;
color: #666;
}
}
}
::v-deep .el-pagination {
.btn-prev,
.btn-next {
background: transparent;
}
}
::v-deep .el-pager {
li {
width: 28px;
height: 28px;
border-radius: 50%;
background: #77a7c9;
min-width: 0;
}
.active {
color: #fff;
}
}
</style>
\ No newline at end of file
src/views/museum/index.vue
浏览文件 @ d2f5a9ff
<template>
<div class="display">
<!-- <NavBar /> -->
<ListBanner title="精选展览" />
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40">
<el-col :span="24">
<div class="title wow animate__animated animate__fadeInLeft">
博物馆
</div>
<div
class="bottom-line wow animate__animated animate__fadeInLeft"
></div>
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
placeholder="关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
<el-cascader
class="years item"
style="width: 100%"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
>
</el-cascader>
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
placeholder="关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
<el-cascader
class="years item"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
>
</el-cascader>
<div class="search-button" @click="search">搜 索</div>
</div>
<el-row :gutter="40" class="cr-list">
<el-col
:span="8"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div class="container wow animate__animated animate__fadeInUp">
<div class="img">
<img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
class="img"
lazy
/>
</div>
<div class="desc">
<span class="name">{{ item.name }}</span>
</div>
<div class="search-button" @click="search">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</div>
<el-row :gutter="40" class="cr-list">
<el-col
:span="8"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div class="container wow animate__animated animate__fadeInUp">
<div class="img-container">
<img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
class="face-image"
lazy
/>
<div class="deco-left-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
<div class="deco-left-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
<div class="deco-right-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
<div class="deco-right-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
<div class="desc">
<div class="name">{{ item.name }}</div>
</div>
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import ListBanner from "@/components/ListBanner";
import { getMuseumListPage } from "@/api/org";
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
export default {
name: "CulturalRelic",
name: "Museum",
// components: { SearchBar, NavBar, Footer },
components: { SearchBar },
components: { ListBanner },
data() {
return {
list: {
......@@ -222,101 +226,131 @@ $text-indent: 16px;
// color: #fff;
.content-wrapper {
padding-top: 60px;
padding-bottom: 126px;
background-color: #fff;
.title {
font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
.search {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($blue, 0.2);
padding: 20px 40px;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
margin-bottom: 40px;
padding: 90px 70px 80px;
height: 214px;
.item {
margin-right: 20px;
}
.threeD {
display: flex;
width: 420px;
cursor: pointer;
.box {
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #563f17;
margin-right: 6px;
i {
font-size: 28px;
}
}
.text {
display: flex;
justify-content: center;
align-items: center;
}
}
.search-button {
cursor: pointer;
width: 420px;
height: 48px;
width: 156px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: $blue;
color: #fff;
background: url("@/assets/imgs/list/search-button-bg.png");
background-size: 100% 100%;
color: #444;
font-size: 14px;
.svg-icon {
margin-right: 4px;
}
}
}
.content {
width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
padding: 0 74px;
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
border: 2px solid #f1f1f1;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
img {
border: 2px solid #2069c4;
.face-image {
transform: scale(1.2);
}
.desc {
background-color: $blue;
color: #fff;
background: url("@/assets/imgs/list/card-title-bg.png");
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
display: block;
}
}
}
.img {
.img-container {
background-color: #f8f8f8;
height: 240px;
height: 268px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
img {
position: relative;
.face-image {
height: 100%;
object-fit: contain;
// width: auto;
object-fit: cover;
transition: all 0.5s ease;
}
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
position: absolute;
width: 36px;
height: 36px;
display: none;
transition: all 0.5s ease;
img {
width: 100%;
height: 100%;
}
}
.deco-left-top {
left: 0;
top: 0;
transform: rotate(180deg);
}
.deco-left-bottom {
left: 0;
bottom: 0;
transform: rotate(90deg);
}
.deco-right-top {
right: 0;
top: 0;
transform: rotate(270deg);
}
.deco-right-bottom {
right: 0;
bottom: 0;
}
}
.desc {
padding: 16px 0;
display: flex;
justify-content: center;
height: 110px;
padding: 36px 30px;
transition: all 0.5s ease;
flex: 1;
background: #fff;
.name {
font-size: 18px;
font-weight: bold;
color: #2069c4;
margin-bottom: 18px;
}
.deptName {
font-size: 14px;
font-weight: 300;
color: #444444;
}
}
}
}
......@@ -328,19 +362,50 @@ $text-indent: 16px;
margin: 24px;
display: flex;
justify-content: center;
align-items: center;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
height: 116px;
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
color: $blue;
font-weight: bold;
}
::v-deep .el-input {
::v-deep .el-input,
.el-cascader {
width: 368px !important;
.el-input__inner {
width: 100%;
border: none;
border-radius: 0;
background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%;
&::placeholder {
text-indent: 10px;
color: #666;
}
}
}
::v-deep .el-pagination {
.btn-prev,
.btn-next {
background: transparent;
}
}
::v-deep .el-pager {
li {
width: 28px;
height: 28px;
border-radius: 50%;
background: #77a7c9;
min-width: 0;
}
.active {
color: #fff;
}
}
</style>
\ No newline at end of file
src/views/virtual/index.vue
浏览文件 @ d2f5a9ff
<template>
<div class="display">
<ListBanner title="虚拟展厅" />
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40">
<el-col :span="24">
<div class="title wow animate__animated animate__fadeInLeft">
虚拟展厅
</div>
<div
class="bottom-line wow animate__animated animate__fadeInLeft"
></div>
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
placeholder="关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
<el-cascader
class="years item"
style="width: 100%"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
ref="region"
>
</el-cascader>
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
v-model="keyword"
placeholder="关键词"
@keyup.enter.native="search"
clearable
>
<!-- <span class="input-icon" slot="prefix">
<svg-icon icon-class="keyword"></svg-icon>
</span> -->
</el-input>
<el-cascader
class="years item"
style="width: 100%"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
ref="region"
>
</el-cascader>
<div class="search-button" @click="search">搜 索</div>
</div>
<el-row :gutter="40" class="cr-list">
<el-col
:span="8"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div class="container wow animate__animated animate__fadeInUp">
<div class="img">
<img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
class="img"
lazy
/>
</div>
<div class="desc">
<span class="name">{{ item.name }}</span>
</div>
<div class="search-button" @click="search">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</div>
<el-row :gutter="40" class="cr-list">
<el-col
:span="8"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div class="container wow animate__animated animate__fadeInUp">
<div class="img-container">
<img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
class="face-image"
lazy
/>
<div class="deco-left-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
<div class="deco-left-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
<div class="deco-right-top">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
<div class="deco-right-bottom">
<img src="@/assets/imgs/list/img-deco.png" alt="" />
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
<div class="desc">
<div class="name">{{ item.name }}</div>
<div class="deptName">
<span>展览单位：</span>
<span>{{ item.deptName }}</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import ListBanner from "@/components/ListBanner";
import { getVirtualList } from "@/api/virtual";
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
export default {
name: "CulturalRelic",
// components: { SearchBar, NavBar, Footer },
components: { SearchBar },
name: "Virtual",
components: { ListBanner },
data() {
return {
list: {
......@@ -224,101 +233,141 @@ $text-indent: 16px;
// color: #fff;
.content-wrapper {
padding-top: 60px;
padding-bottom: 126px;
background-color: #fff;
.title {
font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
.search {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($blue, 0.2);
padding: 20px 40px;
margin-bottom: 40px;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
height: 214px;
padding: 90px 70px 80px;
margin-bottom: 63px;
.item {
margin-right: 20px;
}
.threeD {
.input-icon {
height: 100%;
display: flex;
width: 420px;
cursor: pointer;
.box {
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #563f17;
margin-right: 6px;
i {
font-size: 28px;
}
}
.text {
display: flex;
justify-content: center;
align-items: center;
}
align-items: center;
font-size: 20px;
margin-left: 12px;
color: #444;
}
.search-button {
cursor: pointer;
width: 420px;
height: 48px;
width: 156px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: $blue;
color: #fff;
background: url("@/assets/imgs/list/search-button-bg.png");
background-size: 100% 100%;
color: #444;
font-size: 14px;
.svg-icon {
margin-right: 4px;
}
}
}
.content {
width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
padding: 0 74px;
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
border: 2px solid #f1f1f1;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
img {
border: 2px solid #2069c4;
.face-image {
transform: scale(1.2);
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
display: block;
}
}
.desc {
background-color: $blue;
color: #fff;
background: url("@/assets/imgs/list/card-title-bg.png");
}
}
.img {
background-color: #f8f8f8;
height: 240px;
.img-container {
background-color: #fff;
height: 268px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
img {
position: relative;
.face-image {
height: 100%;
object-fit: contain;
// width: auto;
object-fit: cover;
transition: all 0.5s ease;
}
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
position: absolute;
width: 36px;
height: 36px;
display: none;
transition: all 0.5s ease;
img {
width: 100%;
height: 100%;
}
}
.deco-left-top {
left: 0;
top: 0;
transform: rotate(180deg);
}
.deco-left-bottom {
left: 0;
bottom: 0;
transform: rotate(90deg);
}
.deco-right-top {
right: 0;
top: 0;
transform: rotate(270deg);
}
.deco-right-bottom {
right: 0;
bottom: 0;
}
}
.desc {
padding: 16px 0;
display: flex;
justify-content: center;
height: 150px;
padding: 36px 30px;
transition: all 0.5s ease;
flex: 1;
background: #fff;
.name {
font-size: 18px;
font-weight: bold;
color: #2069c4;
margin-bottom: 18px;
}
.deptName {
font-size: 14px;
font-weight: 300;
color: #444444;
}
}
}
}
......@@ -326,23 +375,54 @@ $text-indent: 16px;
}
}
.pagination {
.pagination-container {
margin: 24px;
display: flex;
justify-content: center;
align-items: center;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
height: 116px;
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
color: $blue;
font-weight: bold;
}
::v-deep .el-input {
::v-deep .el-input,
.el-cascader {
width: 368px !important;
.el-input__inner {
width: 100%;
border: none;
border-radius: 0;
background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%;
&::placeholder {
text-indent: 10px;
color: #666;
}
}
}
::v-deep .el-pagination {
.btn-prev,
.btn-next {
background: transparent;
}
}
::v-deep .el-pager {
li {
width: 28px;
height: 28px;
border-radius: 50%;
background: #77a7c9;
min-width: 0;
}
.active {
color: #fff;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论