Skip to content

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

文物列表页优化

上级 45544712
显示空白字符变更
内嵌 并排
正在显示 包含 283 行增加 和 78 行删除
src/components/NavBar/index.vue
浏览文件 @ 94d22565
......@@ -24,7 +24,7 @@
class="tab-item"
:class="{
activeHome: currentTab.name == item.name && isHome,
active: currentTab.name == item.name && !isHome,
active: currentTab.name == item.name,
}"
v-for="(item, index) in pages"
:key="index"
......@@ -558,6 +558,7 @@ $themeColor: #2069c4;
width: 100%;
transition: all 0.5s ease;
background-color: #2069c4;
// background-color: #fff;
// background-image: url('@/assets/imgs/home/panel-bg.png');
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
.container {
......@@ -662,6 +663,10 @@ $themeColor: #2069c4;
text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
}
}
.active::after{
opacity: 1;
}
}
}
}
......
src/components/SearchBar/index.vue
浏览文件 @ 94d22565
......@@ -2,25 +2,6 @@
<template>
<div class="search-bar">
<el-input
v-model="searchValue"
placeholder="请输入关键词"
class="center"
@keyup.enter.native="search"
>
<el-select v-model="select" placeholder="请选择" slot="prepend" v-if="options.length>0">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-button round type="primary" @click.native="search" class="searchButton" slot="append"
>检索</el-button
>
</el-input>
</div>
</template>
......
src/views/culturalRelic/index.vue
浏览文件 @ 94d22565
<template>
<div class="cultural-relic">
<ListBanner title="文物展" />
<div class="content-wrapper">
<div class="content">
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
<div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')">
<span>{{currentType}}</span>
<i class="el-icon-caret-bottom"></i>
</div>
<div class="search-item" @click="handleClickSearchBar('years')">
<span>{{currentYears}}</span>
<i class="el-icon-caret-bottom"></i>
</div>
<div :span="4" class="search-item" @click="handleClickThreeD">
<div class="text">3D文物</div>
<svg-icon :icon-class="onlyShow3d ? 'filter-s' : 'filter'"></svg-icon>
</div>
<div class="search-item">
<input
type="text"
v-model="keyword"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
<el-select
placeholder="文物名称"
@keyup.enter="search"
/>
<i class="el-icon-search"></i>
</div>
</div>
<!-- <el-select
class="type item"
v-model="type"
placeholder="请选择所属类别"
......@@ -39,25 +54,43 @@
clearable
ref="years"
>
</el-cascader>
<el-col :span="3">
</el-cascader> -->
<!-- <el-col :span="3">
<div class="search-button" @click="search" style="width: 100%">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</el-col>
</el-col> -->
<el-col :span="3" class="threeD" @click.native="handleClickThreeD">
<svg-icon
:icon-class="onlyShow3d ? 'filter-s' : 'filter'"
></svg-icon>
<div class="text">3D文物</div>
</el-col>
<!-- </el-row> -->
</div>
<transition name="el-zoom-in-top">
<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"
>
<span class="text" @click="handleClickSearchItem(item)">
{{ item.label }}
</span>
<span class="divider">/</span>
</div>
</div>
</el-scrollbar>
</div>
</transition>
<div class="total">
<span>共{{list.total}}件文物</span>
</div>
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40" class="cr-list">
<el-col
:span="item.status == 1 ? 8 : 0"
:span="item.status == 1 ? 6 : 0"
class="cr-item"
@click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
......@@ -185,7 +218,7 @@ export default {
return {
list: {
records: [],
size: 15,
size: 16,
current: 1,
total: 0,
},
......@@ -193,7 +226,6 @@ export default {
value: "value",
label: "label",
children: "children",
},
culturalRelicYears: [],
onlyShow3d: false,
......@@ -201,29 +233,72 @@ export default {
type: "",
years: "",
currentImg: null,
showSearchPanel: false,
currentPanelData: [],
currentPanel: "type",
currentType: "文物类别",
currentYears: "文物年代",
yearList: [],
typeList: [],
};
},
computed: {
...mapGetters(["dicts"]),
},
async created() {
let yearList = [
{
label: "全部年代",
value: "",
}
];
let typeList = [
{
label: "全部类别",
value: "",
}
];
await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
for (const key in this.dicts.culturalRelicType) {
typeList.push({
label: this.dicts.culturalRelicType[key],
value: key,
});
}
this.typeList = typeList;
let res = await this.$store.dispatch("dict/getDictTree", [
"culturalRelicYears",
]);
this.culturalRelicYears = res.culturalRelicYears;
traveseYears(this.culturalRelicYears);
this.yearList = yearList;
// 获取叶子节点
function traveseYears(arr) {
if (arr && arr.length > 0) {
arr.map((item) => {
if (item.children && item.children.length == 0) {
delete item.children;
} else {
if (item.children && item.children.length > 0) {
traveseYears(item.children);
} else {
yearList.push({
value: item.value,
label: item.label,
});
}
});
}
}
// 删除无children的节点
// function traveseYears(arr) {
// if (arr && arr.length > 0) {
// arr.map((item) => {
// if (item.children && item.children.length == 0) {
// delete item.children;
// } else {
// traveseYears(item.children);
// }
// });
// }
// }
},
mounted() {
this.loadData();
......@@ -283,21 +358,21 @@ export default {
e.target.src = require("@/assets/404_images/no-pic.png");
},
handleTypeChange(value) {
this.type = value;
this.list.current = 1;
this.loadData();
},
handleYearsChange(value) {
if (value && value instanceof Array) {
this.years = value[value.length - 1];
} else {
this.years = value;
}
this.list.current = 1;
this.loadData();
this.$refs.years.dropDownVisible = false;
},
// handleTypeChange(value) {
// this.type = value;
// this.list.current = 1;
// this.loadData();
// },
// handleYearsChange(value) {
// if (value && value instanceof Array) {
// this.years = value[value.length - 1];
// } else {
// this.years = value;
// }
// this.list.current = 1;
// this.loadData();
// this.$refs.years.dropDownVisible = false;
// },
handleKeyWordChange(value) {
this.keyword = value;
this.loadData();
......@@ -312,31 +387,104 @@ export default {
handleLeaveImg() {
this.currentImg = null;
},
handleClickSearchBar(type) {
this.showSearchPanel = true;
this.currentPanel = type;
switch (type) {
case "type":
this.currentPanelData = this.typeList;
break;
case "years":
this.currentPanelData = this.yearList;
break;
}
},
handleClickSearchItem(item) {
switch (this.currentPanel) {
case "type":
this.type = item.value;
this.currentType = item.label;
break;
case "years":
this.years = item.value;
this.currentYears = item.label;
break;
}
this.list.current = 1;
this.loadData();
this.showSearchPanel = false;
},
},
};
</script>
<style lang="scss" scoped>
$blue: #2069c4;
$themeColor: #2069c4;
$text-indent: 16px;
.cultural-relic {
width: 100%;
// background-color: #2069c4;
// color: #fff;
.content-wrapper {
padding-top: 60px;
background-color: #fff;
padding-bottom: 126px;
.search-bar {
display: flex;
align-items: center;
flex-direction: column;
padding: 24px 20%;
background: rgb($themeColor, 1) url("@/assets/imgs/home/panel-bg.png");
.search {
// margin-bottom: 40px;
// background-image: url("@/assets/imgs/list/search-bg.png");
// background-size: 21%;
// background-color: $themeColor;
// background-size: 22%;
// height: 214px;
.search-wrapper {
display: flex;
width: 100%;
justify-content: center;
.search-item {
// width: 215px;
width: 25%;
height: 32px;
color: #999;
padding: 0 20px;
display: flex;
font-size: 14px;
align-items: center;
padding: 90px 70px 80px;
margin-bottom: 40px;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
height: 214px;
justify-content: space-between;
border: 1px solid #ccc;
background-color: #fff;
// background: url("@/assets/imgs/list/search-button-bg.png") transparent;
// background-size: 100% 100%;
margin-right: 20px;
cursor: pointer;
input {
outline: none;
border: none;
height: 50%;
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;
}
}
}
.item {
margin-right: 20px;
&:hover {
......@@ -359,7 +507,6 @@ $text-indent: 16px;
color: #666;
margin-left: 20px;
transition: all ease 0.3s;
// -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.4));
.svg-icon {
margin-right: 4px;
font-size: 22px;
......@@ -409,12 +556,75 @@ $text-indent: 16px;
}
}
}
.search-panel {
min-height: 100px;
max-height: 138px;
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;
}
.search-panel-wrapper {
width: 60%;
display: flex;
flex-wrap: wrap;
overflow: auto;
padding: 10px 0;
.type-item {
width: 25%;
display: flex;
justify-content: center;
color: #fff;
font-size: 14px;
margin-bottom: 24px;
position: relative;
.text {
cursor: pointer;
}
.divider {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
}
}
}
.total{
padding: 0 13%;
display: flex;
justify-content: flex-end;
background-color: #fff;
&>span{
display: inline-block;
padding: 4px 8px;
background-color: #dfab46;
border-radius: 4px;
color: #fff;
margin-top: 32px;
}
}
.content-wrapper {
background-color: #fff;
padding-bottom: 126px;
.content {
padding: 16px 0 60px;
width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
// margin-top: 32px;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
padding: 0 74px;
// padding: 0 74px;
.cr-item {
margin-bottom: 40px;
.container {
......@@ -489,8 +699,8 @@ $text-indent: 16px;
}
}
.desc {
height: 150px;
padding: 36px 30px;
height: 120px;
padding: 36px 30px 20px;
transition: all 0.5s ease;
background: #fff;
.name {
......@@ -498,6 +708,10 @@ $text-indent: 16px;
font-weight: bold;
color: #2069c4;
margin-bottom: 18px;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.desc-container {
display: flex;
......@@ -565,7 +779,6 @@ $text-indent: 16px;
}
.pagination {
margin: 24px;
display: flex;
justify-content: center;
align-items: center;
......@@ -622,4 +835,9 @@ $text-indent: 16px;
color: #fff;
}
}
::v-deep .el-scrollbar__thumb {
//可设置滚动条颜色
background: rgba($color: #000000, $alpha: 0.4);
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论