Skip to content

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

文物列表页优化

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