Skip to content

E
exhibition_page
提交 3256f254 authored 作者: JSHorse's avatar JSHorse
浏览文件
操作

整体UI调整

上级 7b933485
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 549 行增加 和 151 行删除
src/assets/imgs/show/list-bg.png 0 → 100644
浏览文件 @ 3256f254
差异被折叠。
src/assets/imgs/show/river.png 0 → 100644
浏览文件 @ 3256f254
差异被折叠。
src/assets/styles/index.scss
浏览文件 @ 3256f254
...@@ -67,24 +67,192 @@ li { ...@@ -67,24 +67,192 @@ li {
} }
.content-wrapper { .content-wrapper {
// width: 1200px; // width: 1200px;
// width: 100vw; // width: 100vw;
padding: 0 13%; // padding: 0 13%;
display: flex; // width: 1400px;
/* display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center; */
>.content {
width: 1400px;
margin: auto;
}
} }
.el-pager { .el-pager {
.btn-quicknext,.number { .btn-quicknext,
.number {
background: transparent !important; background: transparent !important;
border: 1px solid $themeColor !important; border: 1px solid $themeColor !important;
color: $themeColor !important; color: $themeColor !important;
} }
.number.active { .number.active {
background: $themeColor !important; background: $themeColor !important;
color: #b7b7b7 !important; color: #fff !important;
}
}
.content-wrapper:not(.relic) {
padding-top: 0!important;
padding-bottom: 40px!important;
>.content {
box-shadow: none!important;
>.search {
// padding: 24px 20%;
// padding: 16px 13%;
padding: 16px 0 32px;
background: #fff;
background-image: none!important;
.item {
width: 100%;
height: 46px;
>div {
width: 100%;
height: 100%;
}
.el-input__suffix-inner {
i.el-input__icon {
color: #333;
font-size: 18px;
line-height: 46px;
}
}
input {
width: 100%;
height: 100%;
line-height: 46px;
border: 1px solid #fff;
background-color: #c5cade;
&.el-input__inner {
border-radius: 0;
font-size: 14px;
color: #2b2d35;
}
}
input::-webkit-input-placeholder {
color: #666;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #666;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #666;
}
input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #666;
}
}
.search-button {
cursor: pointer;
width: 156px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: url("@/assets/imgs/list/search-button-bg.png") transparent;
background-size: 100% 100%;
color: #444;
font-size: 14px;
transition: all 0.2s ease;
.svg-icon {
margin-right: 4px;
}
}
}
.cr-item .container {
border: none !important;
.desc {
padding: 0!important;
height: auto !important;
>.name {
padding: 20px 0 !important;
margin: 0 !important;
font-size: 20px !important;
font-weight: 400 !important;
}
}
.img-container {
display: flex;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: calc(100% - 4px);
height: calc(100% - 4px);
z-index: 1;
border: 2px solid #999;
}
>div[class|=deco] {
z-index: 2;
}
}
&:hover {
border: none !important;
.desc {
background: none !important;
>.name {
color: #0e45ab !important;
}
}
.img-container {
&::before {
border-color: #3554ee;
}
}
}
}
>.pagination-container {
>.pagination {
margin: 0!important;
background-image: none!important;
.el-pager {
li {
width: 42px;
height: 42px;
line-height: 42px;
font-size: 16px;
background: #fff;
min-width: 0;
margin: 0 16px;
color: $themeColor;
border-radius: 0!important;
}
.active {
color: #fff;
}
}
}
}
} }
} }
\ No newline at end of file
src/assets/styles/variable.scss
浏览文件 @ 3256f254
// $themeColor:#223e36; // $themeColor:#223e36;
// $themeColor: #2069c4; // $themeColor: #2069c4;
$themeColor:#132c33; // $themeColor:#132c33;
$themeColor: #252F57;
$themeSecondaryColor:#dfab46; $themeSecondaryColor:#dfab46;
$puHuiTi: "Alibaba-PuHuiTi"; $puHuiTi: "Alibaba-PuHuiTi";
$siyuanSongBold: "SourceHanSerifCN-Bold"; $siyuanSongBold: "SourceHanSerifCN-Bold";
......
src/components/Breadcrumb/index.vue
浏览文件 @ 3256f254
...@@ -24,11 +24,11 @@ export default { ...@@ -24,11 +24,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-breadcrumb__inner{ ::v-deep .el-breadcrumb__inner{
color:#ccc; color:#aaa;
} }
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner{ ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner{
color: #999; color: #666;
} }
::v-deep .el-breadcrumb__inner.is-link:hover{ ::v-deep .el-breadcrumb__inner.is-link:hover{
......
src/components/ListBanner/index.vue
浏览文件 @ 3256f254
...@@ -6,6 +6,10 @@ ...@@ -6,6 +6,10 @@
</div> </div>
<div class="text">{{ title }}</div> <div class="text">{{ title }}</div>
</div> --> </div> -->
<div class="main-title">
<p v-for="(label, i) in info" :key="i">{{ label }}</p>
</div>
<img src="@/assets/imgs/show/list-bg.png" alt="" />
<div class="total"> <div class="total">
<div class="total-title">{{ title }}</div> <div class="total-title">{{ title }}</div>
<div class="amount"> <div class="amount">
...@@ -16,9 +20,9 @@ ...@@ -16,9 +20,9 @@
<!-- <div class="banner-1"> <!-- <div class="banner-1">
<img src="@/assets/imgs/list/banner3.png" alt="" /> <img src="@/assets/imgs/list/banner3.png" alt="" />
</div> --> </div> -->
<div class="banner-2 wow animate__animated animate__fadeInLeftBig" data-wow-duration="2s"> <!-- <div class="banner-2 wow animate__animated animate__fadeInLeftBig" data-wow-duration="2s">
<img src="@/assets/imgs/list/banner2.png" alt="" /> <img src="@/assets/imgs/list/banner2.png" alt="" />
</div> </div> -->
</div> </div>
</template> </template>
...@@ -32,11 +36,15 @@ export default { ...@@ -32,11 +36,15 @@ export default {
}, },
num: { num: {
type: [String, Number], type: [String, Number],
default: '0', default: "0",
}, },
unit: { unit: {
type: String, type: String,
default: '个', default: "个",
},
info: {
type: Array,
default: () => [],
}, },
}, },
}; };
...@@ -45,10 +53,13 @@ export default { ...@@ -45,10 +53,13 @@ export default {
<style lang='scss' scoped> <style lang='scss' scoped>
.banner { .banner {
width: 100%; width: 100%;
height: 360px; height: calc(100vh - 100px);
position: relative; position: relative;
background-image: linear-gradient(to right, $themeColor, rgba($themeColor, 0.9), $themeColor); // background-image: linear-gradient(to right, $themeColor, rgba($themeColor, 0.9), $themeColor);
padding: 0 13%; // background-image: url(@/assets/imgs/show/list-bg.png);
// background-size: cover;
// background-repeat: no-repeat;
// padding: 0 13%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
...@@ -60,31 +71,72 @@ export default { ...@@ -60,31 +71,72 @@ export default {
// align-items: center; // align-items: center;
// background-size: 100%; // background-size: 100%;
// background-position: 0 -100px; // background-position: 0 -100px;
> img {
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: calc(100vh);
}
.main-title {
position: absolute;
top: 39%;
left: 45%;
font-size: 100px;
z-index: 1;
line-height: 1.2;
letter-spacing: 10px;
padding-left: 10px;
border: 3px solid #fff;
font-family: '宋体';
font-weight: 800;
color: #fff;
> p {
margin: 0;
}
}
.total { .total {
width: 400px; // width: 400px;
color: #fff; color: #fff;
font-family: $puHuiTi; font-family: $puHuiTi;
position: relative;
z-index: 1;
font-size: 40px;
position: absolute;
bottom: 60px;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
transform: translateX(-50%);
font-weight: normal;
// position: absolute; // position: absolute;
// left: 200px; // left: 200px;
// top: 50%; // top: 50%;
// transform: translateY(-50%); // transform: translateY(-50%);
.total-title { /* .total-title {
font-size: 28px; font-size: 28px;
} } */
.amount { .amount {
display: flex;
font-weight: bold; align-items: center;
justify-content: center;
margin-left: 50px;
font-weight: normal;
.num { .num {
font-size: 56px; // font-size: 56px;
font-family: $puHuiTi; font-family: $puHuiTi;
font-size: 60px;
margin-right: 10px;
color: #ffbe1a;
font-weight: 800;
} }
.unit { /* .unit {
font-size: $font-size-base; font-size: $font-size-base;
} } */
} }
} }
......
src/components/NavBar/index.vue
浏览文件 @ 3256f254
...@@ -521,7 +521,10 @@ export default { ...@@ -521,7 +521,10 @@ export default {
height: 100px; height: 100px;
width: 100%; width: 100%;
transition: all 0.5s ease; transition: all 0.5s ease;
background-color: $themeColor; // background-color: rgba($themeColor, 0.5);
background-color: rgba(0, 0, 0, 0.3) ;
position: relative;
z-index: 99;
// background-color: #fff; // 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;
......
src/views/ccProduct/index.vue
浏览文件 @ 3256f254
<template> <template>
<div class="cultural-relic"> <div class="cultural-relic">
<ListBanner title="共计已上线文创产品" :num="list.total" unit="件/套" /> <ListBanner
title="共计已上线文创产品"
:num="list.total"
unit="件/套"
:info="['文创', '展示']"
/>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<div class="search wow animate__animated animate__fadeIn"> <el-row
<el-input class="input item" v-model="keyword" placeholder="请输入关键词" @keyup.enter.native="search" clearable> :gutter="40"
</el-input> class="search wow animate__animated animate__fadeIn"
<el-cascader class="years item" v-model="regionCode" :options="regionTree" :props="culturalRegionProps" >
placeholder="请选择所属地区" filterable @change="handleRegionChange" clearable> <el-col :span="6">
</el-cascader> <el-input
class="input item"
<el-select class="years item" v-model="deptId" placeholder="请选择所属单位" filterable @change="handleDeptChange" v-model="keyword"
clearable> placeholder="请输入关键词"
<el-option v-for="(item, index) in deptList" :key="index" :label="item.name" :value="item.id"> @keyup.enter.native="search"
</el-option> clearable
</el-select> >
<el-col :span="3"> </el-input>
<div class="search-button" @click="search" style="width: 100%"> </el-col>
<el-col :span="6">
<el-cascader
class="years item"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
>
</el-cascader>
</el-col>
<el-col :span="6">
<el-select
class="years item"
v-model="deptId"
placeholder="请选择所属单位"
filterable
@change="handleDeptChange"
clearable
>
<el-option
v-for="(item, index) in deptList"
:key="index"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-col>
<el-col :span="6">
<div class="search-button" @click="search">
<svg-icon icon-class="search"></svg-icon> <svg-icon icon-class="search"></svg-icon>
检索 检索
</div> </div>
</el-col> </el-col>
</div> </el-row>
<el-row :gutter="40" class="cr-list"> <el-row :gutter="40" class="cr-list">
<el-col :span="item.status == 1 ? 8 : 0" class="cr-item" @click.native="handleClick(item)" <el-col
@mouseenter.native="handleEnterImg(item)" @mouseleave.native="handleLeaveImg(item)" :span="item.status == 1 ? 8 : 0"
v-for="(item, index) in list.records" :key="index"> class="cr-item"
<div class="container wow animate__animated animate__fadeInUp" v-if="item.status == 1"> @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"> <div class="img-container">
<img :src="$getFullUrl(item.imagesVo[0].pressUrl)" width="100%" class="face-image" lazy /> <img
:src="$getFullUrl(item.imagesVo[0].pressUrl)"
width="100%"
class="face-image"
lazy
/>
<div class="deco-left-top"> <div class="deco-left-top">
<img :src=" <img
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g' :src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`) }.png`)
" alt="" /> "
alt=""
/>
</div> </div>
<div class="deco-left-bottom"> <div class="deco-left-bottom">
<img :src=" <img
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g' :src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`) }.png`)
" alt="" /> "
alt=""
/>
</div> </div>
<div class="deco-right-top"> <div class="deco-right-top">
<img :src=" <img
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g' :src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`) }.png`)
" alt="" /> "
alt=""
/>
</div> </div>
<div class="deco-right-bottom"> <div class="deco-right-bottom">
<img :src=" <img
require(`@/assets/imgs/list/img-deco${item == currentImg ? '' : '-g' :src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`) }.png`)
" alt="" /> "
alt=""
/>
</div> </div>
</div> </div>
<div class="desc"> <div class="desc">
...@@ -80,11 +148,21 @@ ...@@ -80,11 +148,21 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-empty description="暂无数据" v-if="list.records.length == 0"></el-empty> <el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container"> <div class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" <el-pagination
:current-page="Number(list.current)" :page-sizes="[20, 40, 100]" :page-size="Number(list.size)" @size-change="handleSizeChange"
layout="total, prev, pager, next" :total="Number(list.total)" class="pagination"> @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> </el-pagination>
</div> </div>
</div> </div>
...@@ -116,7 +194,6 @@ export default { ...@@ -116,7 +194,6 @@ export default {
value: "code", value: "code",
label: "name", label: "name",
children: "children", children: "children",
}, },
deptId: "", deptId: "",
deptList: [], deptList: [],
...@@ -244,7 +321,7 @@ $text-indent: 16px; ...@@ -244,7 +321,7 @@ $text-indent: 16px;
background-color: #fff; background-color: #fff;
padding-bottom: 126px; padding-bottom: 126px;
.search { /* .search {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -258,7 +335,8 @@ $text-indent: 16px; ...@@ -258,7 +335,8 @@ $text-indent: 16px;
margin-right: 20px; margin-right: 20px;
&:hover { &: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));
} }
} }
...@@ -286,7 +364,8 @@ $text-indent: 16px; ...@@ -286,7 +364,8 @@ $text-indent: 16px;
} }
&:hover { &: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 { // .box {
...@@ -323,21 +402,22 @@ $text-indent: 16px; ...@@ -323,21 +402,22 @@ $text-indent: 16px;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &: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 { .svg-icon {
margin-right: 4px; margin-right: 4px;
} }
} }
} } */
.content { .content {
width: 100%; // width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16); 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;
...@@ -358,7 +438,6 @@ $text-indent: 16px; ...@@ -358,7 +438,6 @@ $text-indent: 16px;
} }
.img-container { .img-container {
.deco-left-top, .deco-left-top,
.deco-left-bottom, .deco-left-bottom,
.deco-right-top, .deco-right-top,
...@@ -522,14 +601,13 @@ $text-indent: 16px; ...@@ -522,14 +601,13 @@ $text-indent: 16px;
} }
} }
::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 {
font-weight: bold; font-weight: bold;
} }
::v-deep .el-input, ::v-deep .el-input,
.el-cascader { .el-cascader {
// width: 368px !important; // width: 368px !important;
.el-input__inner { .el-input__inner {
// width: 100%; // width: 100%;
...@@ -552,7 +630,6 @@ $text-indent: 16px; ...@@ -552,7 +630,6 @@ $text-indent: 16px;
} }
::v-deep .el-pagination { ::v-deep .el-pagination {
.btn-prev, .btn-prev,
.btn-next { .btn-next {
background: transparent; background: transparent;
...@@ -573,5 +650,5 @@ $text-indent: 16px; ...@@ -573,5 +650,5 @@ $text-indent: 16px;
.active { .active {
color: #fff; color: #fff;
} }
} } */
</style> </style>
\ No newline at end of file
src/views/culturalRelic/index-hasbg.vue
浏览文件 @ 3256f254
<template> <template>
<div class="cultural-relic"> <div class="cultural-relic">
<ListBanner title="共计已上线文物" :num="list.total" unit="件/套"/> <ListBanner title="共计已上线文物" :num="list.total" unit="件/套" :info="['文物','展示']"/>
<div class="search-bar wow animate__animated animate__fadeIn"> <div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper"> <div class="search-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')"> <div class="search-item" @click="handleClickSearchBar('type')">
...@@ -660,7 +660,7 @@ $text-indent: 16px; ...@@ -660,7 +660,7 @@ $text-indent: 16px;
.content { .content {
padding: 16px 0 60px; padding: 16px 0 60px;
width: 100%; // width: 100%;
// margin-top: 32px; // margin-top: 32px;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16); // box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
......
src/views/display/index.vue
浏览文件 @ 3256f254
<template> <template>
<div class="display"> <div class="display">
<!-- <NavBar /> --> <!-- <NavBar /> -->
<ListBanner title="共计已上线展览" :num="list.total" /> <ListBanner
<div class="search-bar wow animate__animated animate__fadeIn"> title="共计已上线展览"
:num="list.total"
:info="['展览', '展示']"
/>
<!-- <div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper"> <div class="search-wrapper">
<!-- <div class="search-item" @click="handleClickSearchBar('type')"> <div class="search-item" @click="handleClickSearchBar('type')">
<span>{{ currentType }}</span> <span>{{ currentType }}</span>
<i class="el-icon-caret-bottom"></i> <i class="el-icon-caret-bottom"></i>
</div> </div>
...@@ -16,7 +20,7 @@ ...@@ -16,7 +20,7 @@
<div :span="4" class="search-item" @click="handleClickThreeD"> <div :span="4" class="search-item" @click="handleClickThreeD">
<div class="text">3D文物</div> <div class="text">3D文物</div>
<svg-icon :icon-class="onlyShow3d ? 'filter-s' : 'filter'"></svg-icon> <svg-icon :icon-class="onlyShow3d ? 'filter-s' : 'filter'"></svg-icon>
</div> --> </div>
<div class="search-item"> <div class="search-item">
<input <input
type="text" type="text"
...@@ -27,18 +31,31 @@ ...@@ -27,18 +31,31 @@
<i class="el-icon-search" @click="search"></i> <i class="el-icon-search" @click="search"></i>
</div> </div>
</div> </div>
</div> -->
<div class="type-group">
<el-row>
<el-col
:class="{ 'type-item': true, active: item.value == currentType }"
v-for="(item, index) in typeList"
:key="index"
:span="3"
@click.native="handleClickTypeItem(item)"
>
{{ item.label }}
</el-col>
<el-col :span="6">
<div class="search-item">
<input
type="text"
v-model="keyword"
placeholder="展览名称"
@keyup.enter="search"
/>
<i class="el-icon-search" @click="search"></i>
</div>
</el-col>
</el-row>
</div> </div>
<el-row class="type-group">
<el-col
:class="{ 'type-item': true, active: item.value == currentType }"
v-for="(item, index) in typeList"
:key="index"
:span="3"
@click.native="handleClickTypeItem(item)"
>
{{ item.label }}
</el-col>
</el-row>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<el-row :gutter="40" class="cr-list"> <el-row :gutter="40" class="cr-list">
...@@ -111,7 +128,7 @@ import ListBanner from "@/components/ListBanner"; ...@@ -111,7 +128,7 @@ import ListBanner from "@/components/ListBanner";
import { getList, getDisplayExistDict } from "@/api/display"; import { getList, getDisplayExistDict } from "@/api/display";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { debounce } from "@/utils/index"; import { debounce } from "@/utils/index";
import { titles} from './boutiqueTitles' import { titles } from "./boutiqueTitles";
export default { export default {
name: "Display", name: "Display",
components: { ListBanner }, components: { ListBanner },
...@@ -141,7 +158,7 @@ export default { ...@@ -141,7 +158,7 @@ export default {
}, },
], ],
currentType: "", currentType: "",
boutiqueTitles:titles boutiqueTitles: titles,
}; };
}, },
computed: { computed: {
...@@ -408,14 +425,23 @@ $text-indent: 16px; ...@@ -408,14 +425,23 @@ $text-indent: 16px;
} }
.type-group { .type-group {
padding: 0 13%; // padding: 0 13%;
margin-bottom: 32px; // margin-bottom: 32px;
background: #fff;
> div {
width: 1400px;
margin: auto;
position: relative;
padding: 20px 0;
}
.type-item { .type-item {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
padding: 8px 0; // padding: 8px 0;
height: 46px;
line-height: 46px;
margin-right: 16px; margin-right: 16px;
cursor: pointer; cursor: pointer;
// border: 1px solid $themeSecondaryColor; // border: 1px solid $themeSecondaryColor;
...@@ -430,6 +456,54 @@ $text-indent: 16px; ...@@ -430,6 +456,54 @@ $text-indent: 16px;
background: $themeSecondaryColor; background: $themeSecondaryColor;
color: #fff; color: #fff;
} }
.search-item {
position: absolute;
right: 0;
width: 300px;
// width: 30%;
height: 46px;
// color: #999;
padding: 0 20px;
display: flex;
font-size: 14px;
align-items: center;
justify-content: center;
/* border: 1px solid #ccc;
background-color: #fff; */
margin-right: 20px;
cursor: pointer;
border: 1px solid #fff;
background-color: #c5cade;
input {
outline: none;
border: none;
height: 100%;
background: transparent;
width: 100%;
color: #2b2d35;
}
::-webkit-input-placeholder {
/*Webkit browsers*/
color: #666;
}
:-moz-placeholder {
/*Mozilla Firefox 4 to 8*/
color: #666;
}
::moz-placeholder {
/*Mozilla Firefox 19+*/
color: #666;
}
:-ms-input-placeholder {
/*Internet Explorer 10+*/
color: #666;
}
}
} }
.content-wrapper { .content-wrapper {
...@@ -438,7 +512,7 @@ $text-indent: 16px; ...@@ -438,7 +512,7 @@ $text-indent: 16px;
background-color: #fff; background-color: #fff;
.content { .content {
width: 100%; // width: 100%;
// box-shadow: 0px 1px 16px 4px rgba(0, 0, 0, 0.16); // box-shadow: 0px 1px 16px 4px rgba(0, 0, 0, 0.16);
.cr-list { .cr-list {
...@@ -497,10 +571,13 @@ $text-indent: 16px; ...@@ -497,10 +571,13 @@ $text-indent: 16px;
transition: all 0.5s ease; transition: all 0.5s ease;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
&::before {
content: none;
}
.face-image { .face-image {
height: 100%; height: 100%;
object-fit: contain; object-fit: cover;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
......
src/views/home/components/banner.vue
浏览文件 @ 3256f254
...@@ -10,7 +10,10 @@ ...@@ -10,7 +10,10 @@
.boutique { .boutique {
.banner { .banner {
width: 100%; width: 100%;
height: 100%; height: 100vh;
position: absolute;
top: -100px;
left: 0;
> img { > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
src/views/home/index.vue
浏览文件 @ 3256f254
...@@ -39,8 +39,9 @@ export default { ...@@ -39,8 +39,9 @@ export default {
background-color: #fff; background-color: #fff;
.home-item { .home-item {
height: 100vh; height: calc(100vh - 100px);
width: 100%; width: 100%;
position: relative;
} }
} }
</style> </style>
\ No newline at end of file
src/views/museum/Detail.vue
浏览文件 @ 3256f254
...@@ -167,7 +167,7 @@ export default { ...@@ -167,7 +167,7 @@ export default {
right: 0; right: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba($themeColor, 0.8); // background-color: rgba($themeColor, 0.8);
z-index: 3; z-index: 3;
} }
} }
...@@ -195,7 +195,8 @@ export default { ...@@ -195,7 +195,8 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
color: #d9cfa6; // color: #d9cfa6;
color: #333;
img { img {
position: absolute; position: absolute;
...@@ -268,7 +269,7 @@ export default { ...@@ -268,7 +269,7 @@ export default {
height: 400px; height: 400px;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
padding: 80px 60px; padding: 80px 60px;
color: #d9cfa6; // color: #d9cfa6;
display: flex; display: flex;
align-content: center; align-content: center;
......
src/views/museum/index.vue
浏览文件 @ 3256f254
<template> <template>
<div class="display"> <div class="display">
<!-- <NavBar /> --> <!-- <NavBar /> -->
<ListBanner title="共计已收录博物馆" :num="list.total"/> <ListBanner
title="共计已收录博物馆"
:num="list.total"
:info="['州馆', '展示']"
/>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<div class="search wow animate__animated animate__fadeIn"> <el-row
<el-input :gutter="40"
class="input item" class="search wow animate__animated animate__fadeIn"
suffix-icon="el-icon-search" >
v-model="keyword" <el-col :span="8">
placeholder="请输入关键词" <el-input
@keyup.enter.native="search" class="input item"
clearable suffix-icon="el-icon-search"
> v-model="keyword"
</el-input> placeholder="请输入关键词"
<el-cascader @keyup.enter.native="search"
class="years item" clearable
v-model="regionCode" >
:options="regionTree" </el-input>
:props="culturalRegionProps" </el-col>
placeholder="请选择所属地区" <el-col :span="8">
filterable <el-cascader
@change="handleRegionChange" class="years item"
clearable v-model="regionCode"
> :options="regionTree"
</el-cascader> :props="culturalRegionProps"
placeholder="请选择所属地区"
<div class="search-button" @click="search"> filterable
<svg-icon icon-class="search"></svg-icon> @change="handleRegionChange"
检索 clearable
</div> >
</div> </el-cascader>
</el-col>
<el-col :span="8">
<div class="search-button" @click="search">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</el-col>
</el-row>
<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 ? 8 : 0"
...@@ -143,7 +155,6 @@ export default { ...@@ -143,7 +155,6 @@ export default {
value: "code", value: "code",
label: "name", label: "name",
children: "children", children: "children",
}, },
culturalRelicYears: [], culturalRelicYears: [],
onlyShow3d: false, onlyShow3d: false,
...@@ -267,18 +278,18 @@ $text-indent: 16px; ...@@ -267,18 +278,18 @@ $text-indent: 16px;
// background-color: $themeColor; // background-color: $themeColor;
// color: #fff; // color: #fff;
.content-wrapper { .content-wrapper {
padding-top: 60px; // padding-top: 60px;
padding-bottom: 126px; padding-bottom: 126px;
background-color: #fff; background-color: #fff;
.search { /* .search {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-image: url("@/assets/imgs/list/search-bg.png"); // background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%; // background-size: 22%;
margin-bottom: 40px; margin-bottom: 40px;
padding: 90px 70px 80px; // padding: 90px 70px 80px;
height: 214px; // height: 214px;
.item { .item {
margin-right: 20px; margin-right: 20px;
} }
...@@ -297,13 +308,13 @@ $text-indent: 16px; ...@@ -297,13 +308,13 @@ $text-indent: 16px;
margin-right: 4px; margin-right: 4px;
} }
} }
} } */
.content { .content {
width: 100%; // width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16); // 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 {
...@@ -338,8 +349,8 @@ $text-indent: 16px; ...@@ -338,8 +349,8 @@ $text-indent: 16px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.face-image { .face-image {
height: 100%; width: 100%;
object-fit: contain; object-fit: cover;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.deco-left-top, .deco-left-top,
...@@ -411,7 +422,7 @@ $text-indent: 16px; ...@@ -411,7 +422,7 @@ $text-indent: 16px;
} }
} }
::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 {
font-weight: bold; font-weight: bold;
} }
...@@ -452,5 +463,5 @@ $text-indent: 16px; ...@@ -452,5 +463,5 @@ $text-indent: 16px;
.active { .active {
color: #fff; color: #fff;
} }
} } */
</style> </style>
\ No newline at end of file
src/views/virtual/index.vue
浏览文件 @ 3256f254
...@@ -328,7 +328,7 @@ $text-indent: 16px; ...@@ -328,7 +328,7 @@ $text-indent: 16px;
} }
} }
.content { .content {
width: 100%; // width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16); box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list { .cr-list {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论