Skip to content

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

列表UI优化

上级 06be6dce
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 199 行增加 和 77 行删除
src/assets/imgs/list/banner.png 0 → 100644
浏览文件 @ d2f5a9ff
差异被折叠。
src/assets/imgs/virtual/1.png deleted 100644 → 0
浏览文件 @ 06be6dce
差异被折叠。
src/assets/imgs/virtual/2.png deleted 100644 → 0
浏览文件 @ 06be6dce
差异被折叠。
src/assets/imgs/virtual/3.png deleted 100644 → 0
浏览文件 @ 06be6dce
差异被折叠。
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/museum/index.vue
浏览文件 @ d2f5a9ff
<template> <template>
<div class="display"> <div class="display">
<!-- <NavBar /> --> <!-- <NavBar /> -->
<ListBanner title="精选展览" />
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <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-input <el-input
class="input item" class="input item"
...@@ -23,7 +16,6 @@ ...@@ -23,7 +16,6 @@
</el-input> </el-input>
<el-cascader <el-cascader
class="years item" class="years item"
style="width: 100%"
v-model="regionCode" v-model="regionCode"
:options="regionTree" :options="regionTree"
:props="culturalRegionProps" :props="culturalRegionProps"
...@@ -34,7 +26,10 @@ ...@@ -34,7 +26,10 @@
> >
</el-cascader> </el-cascader>
<div class="search-button" @click="search">搜 索</div> <div class="search-button" @click="search">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</div> </div>
<el-row :gutter="40" class="cr-list"> <el-row :gutter="40" class="cr-list">
<el-col <el-col
...@@ -45,18 +40,31 @@ ...@@ -45,18 +40,31 @@
:key="index" :key="index"
> >
<div class="container wow animate__animated animate__fadeInUp"> <div class="container wow animate__animated animate__fadeInUp">
<div class="img"> <div class="img-container">
<img <img
:src=" :src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl) $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
" "
width="100%" width="100%"
class="img" class="face-image"
lazy 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>
</div> </div>
<div class="desc"> <div class="desc">
<span class="name">{{ item.name }}</span> <div class="name">{{ item.name }}</div>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -65,37 +73,33 @@ ...@@ -65,37 +73,33 @@
description="暂无数据" description="暂无数据"
v-if="list.records.length == 0" v-if="list.records.length == 0"
></el-empty> ></el-empty>
<div class="pagination"> <div class="pagination-container">
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="Number(list.current)" :current-page="Number(list.current)"
:page-sizes="[20, 40, 100]" :page-sizes="[20, 40, 100]"
:page-size="Number(list.size)" :page-size="Number(list.size)"
layout="total, prev, pager, next, jumper" layout="total, prev, pager, next"
:total="Number(list.total)" :total="Number(list.total)"
class="pagination" class="pagination"
> >
</el-pagination> </el-pagination>
</div> </div>
</el-col>
</el-row>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import SearchBar from "@/components/SearchBar"; import ListBanner from "@/components/ListBanner";
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import { getMuseumListPage } from "@/api/org"; import { getMuseumListPage } from "@/api/org";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { debounce } from "@/utils/index"; import { debounce } from "@/utils/index";
export default { export default {
name: "CulturalRelic", name: "Museum",
// components: { SearchBar, NavBar, Footer }, // components: { SearchBar, NavBar, Footer },
components: { SearchBar }, components: { ListBanner },
data() { data() {
return { return {
list: { list: {
...@@ -222,101 +226,131 @@ $text-indent: 16px; ...@@ -222,101 +226,131 @@ $text-indent: 16px;
// color: #fff; // color: #fff;
.content-wrapper { .content-wrapper {
padding-top: 60px; padding-top: 60px;
padding-bottom: 126px;
background-color: #fff; 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 { .search {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: rgba($blue, 0.2); background-image: url("@/assets/imgs/list/search-bg.png");
padding: 20px 40px; background-size: 22%;
margin-bottom: 40px; margin-bottom: 40px;
padding: 90px 70px 80px;
height: 214px;
.item { .item {
margin-right: 20px; 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 { .search-button {
cursor: pointer; cursor: pointer;
width: 420px; width: 156px;
height: 48px; height: 40px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $blue; background: url("@/assets/imgs/list/search-button-bg.png");
color: #fff; background-size: 100% 100%;
color: #444;
font-size: 14px;
.svg-icon {
margin-right: 4px;
}
} }
} }
.content { .content {
width: 100%; width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list { .cr-list {
padding: 0 74px;
.cr-item { .cr-item {
margin-bottom: 40px; margin-bottom: 40px;
.container { .container {
border: 1px solid #f1f1f1; border: 2px solid #f1f1f1;
height: 300px;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease;
&:hover { &:hover {
img { border: 2px solid #2069c4;
.face-image {
transform: scale(1.2); transform: scale(1.2);
} }
.desc { .desc {
background-color: $blue; background: url("@/assets/imgs/list/card-title-bg.png");
color: #fff;
} }
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
display: block;
} }
.img { }
}
.img-container {
background-color: #f8f8f8; background-color: #f8f8f8;
height: 240px; height: 268px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
overflow: hidden; overflow: hidden;
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 { img {
width: 100%;
height: 100%; 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 { .desc {
padding: 16px 0; height: 110px;
display: flex; padding: 36px 30px;
justify-content: center;
transition: all 0.5s ease; 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; ...@@ -328,19 +362,50 @@ $text-indent: 16px;
margin: 24px; margin: 24px;
display: flex; display: flex;
justify-content: center; 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-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 {
color: $blue;
font-weight: bold; font-weight: bold;
} }
::v-deep .el-input { ::v-deep .el-input,
.el-cascader {
width: 368px !important;
.el-input__inner { .el-input__inner {
width: 100%;
border: none; border: none;
border-radius: 0; 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> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论