提交 78c96593 authored 作者: 龙菲's avatar 龙菲

优化页面整体字体大小、增加logo、增加精品展图片、修改红色主题布局

上级 d195b97a
This image diff could not be displayed because it is too large. You can view the blob instead.
差异被折叠。
差异被折叠。
This image diff could not be displayed because it is too large. You can view the blob instead.
......@@ -5,6 +5,10 @@
footer: true,
isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4',
isSMGZ: navbarStyle == '5',
isJYYCC: navbarStyle == '6',
isYLGDYW: navbarStyle == '7',
}"
>
<span>贵州省文化和旅游厅博物馆处版权所有</span>
......@@ -57,4 +61,20 @@ export default {
.isRedStyle {
background-color: #a30e0c !important;
}
.isSDCS {
background-color: #6c0c0d !important;
}
.isSMGZ {
background-color: #00173a !important;
}
.isJYYCC {
background-color: #343b66 !important;
}
.isYLGDYW {
background-color: #212040 !important;
}
</style>
......@@ -34,8 +34,8 @@ export default {
display: flex;
align-items: flex-end;
.img-container {
width: 78px;
height: 78px;
width: 58px;
height: 58px;
margin-right: 26px;
img {
width: 100%;
......@@ -43,7 +43,7 @@ export default {
}
}
.text {
font-size: 42px;
font-size: 28px;
font-family: "Alibaba-PuHuiTi";
font-weight: 400;
color: #2069c4;
......
......@@ -6,12 +6,17 @@
'home-nav': isHome,
isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4',
isSMGZ: navbarStyle == '5',
isJYYCC: navbarStyle == '6',
isYLGDYW: navbarStyle == '7',
}"
id="navbar"
>
<div class="container">
<div class="logo-container animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/home/logo.png" />
<img src="@/assets/imgs/home/logo2.jpg" />
<span class="name">贵州省精品展览展示平台</span>
</div>
<div class="right">
<div class="tabs animate__animated animate__fadeInUp">
......@@ -451,6 +456,21 @@ export default {
.isRedStyle {
background-color: #a30e0c !important;
}
.isSDCS {
background-color: #6c0c0d !important;
}
.isSMGZ {
background-color: #00173a !important;
}
.isJYYCC {
background-color: #343b66 !important;
}
.isYLGDYW {
background-color: #212040 !important;
}
.nav {
height: 100px;
width: 100%;
......@@ -466,11 +486,25 @@ export default {
padding: 0 70px 0 100px;
overflow: hidden;
.logo-container {
width: 380px;
height: 74px;
// width: 380px;
// height: 74px;
display: flex;
align-items: center;
img {
width: 100%;
height: 100%;
// width: 100%;
// height: 100%;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 2px 2px 3px 2px rgb(0 0 0 / 30%);
margin-right: 8px;
}
.name {
font-size: 24px;
font-weight: bold;
font-family: "Lisu";
text-shadow: 2px 2px 3px 2px rgb(0 0 0 / 30%);
color: #fff;
}
}
.right {
......@@ -494,7 +528,7 @@ export default {
text-align: center;
a {
font-size: 24px;
font-size: 18px;
white-space: nowrap;
transition: all 0.5s ease;
}
......@@ -539,13 +573,13 @@ export default {
border-color: #fff;
color: #fff;
i {
font-size: 18px;
font-size: 14px;
}
}
}
::v-deep .el-button.is-round {
padding: 8px 20px;
padding: 10px 20px;
}
.el-dropdown-menu {
background-color: #fff;
......
......@@ -134,7 +134,7 @@ export default {
},
iconSize: {
type: [Number, String],
default: 40,
default: 22,
},
selectColor: {
type: String,
......@@ -241,10 +241,11 @@ export default {
align-items: center;
// margin-right: 32px;
cursor: pointer;
font-size: 14px;
}
.svg-icon {
margin-right: 10px;
font-size: 36px;
font-size: 24px;
color: #61666d;
}
.like {
......
......@@ -21,7 +21,13 @@
<div class="boutique-content">
<div class="focus-content">
<p>{{ content.title }}</p>
<!-- <p>{{ content.title }}</p> -->
<div class="img-container">
<img
:src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)"
alt=""
/>
</div>
</div>
</div>
</div>
......@@ -36,13 +42,13 @@ export default {
data() {
return {
tabs: [
{ tab: "sdcs", name: "四渡赤水" },
{ tab: "sdcs", name: "四渡赤水出奇兵" },
{ tab: "smgz", name: "神秘贵州" },
{ tab: "jyycc", name: "技艺与传承" },
{ tab: "ylgdyw", name: "夜郎国的疑问" },
{ tab: "xxx", name: "XXXXX" },
// { tab: "xxx", name: "生态博物馆" },
],
activeTab: "sdcs",
activeTab: "",
// content: { title: "四渡赤水" }
};
},
......@@ -58,6 +64,32 @@ export default {
return obj;
},
},
watch: {
activeTab: {
handler: function (value) {
let color = "";
switch (value) {
case "sdcs":
color = "4";
break;
case "smgz":
color = "5";
break;
case "jyycc":
color = "6";
break;
case "ylgdyw":
color = "7";
break;
}
this.$store.commit("app/CHANGE_NAV_COLOR", color);
},
immediate: true,
},
},
mounted(){
this.activeTab ='sdcs'
},
methods: {
handleTabClick(data) {
this.activeTab = data.tab;
......@@ -186,6 +218,12 @@ export default {
> p {
margin: 0;
}
.img-container {
width: 100%;
img {
width: 100%;
}
}
}
}
}
......
......@@ -96,37 +96,37 @@
<svg-icon icon-class="keyword"></svg-icon>
年代:</span
>
<span class="value">{{ CRDetail.yearsLabel }}</span>
<span class="value">{{ CRDetail.yearsLabel||'暂无' }}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zllx"></svg-icon>类别:</span
>
<span class="value">{{ CRDetail.typeLabel }}</span>
<span class="value">{{ CRDetail.typeLabel||'暂无' }}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zlxz"></svg-icon>级别:</span
>
<span class="value">{{ CRDetail.levelLabel }}</span>
<span class="value">{{ CRDetail.levelLabel ||'暂无'}}</span>
</div>
<div class="body-item">
<span class="label"
><svg-icon icon-class="wwzd"></svg-icon>质地:</span
>
<span class="value">{{ CRDetail.textureTypeLabel }}</span>
<span class="value">{{ CRDetail.textureTypeLabel||'暂无' }}</span>
</div>
<div class="body-item">
<span class="label"
><svg-icon icon-class="wwcc"></svg-icon>尺寸:</span
>
<span class="value">{{ CRDetail.detailSize }}</span>
<span class="value">{{ CRDetail.detailSize ||'暂无'}}</span>
</div>
<div class="body-item">
<span class="label"
><svg-icon icon-class="zldq"></svg-icon>馆藏单位:</span
>
<span class="value">{{ CRDetail.deptName }}</span>
<span class="value">{{ CRDetail.deptName ||'暂无'}}</span>
</div>
</div>
</el-col>
......
......@@ -142,10 +142,10 @@
<div class="name">{{ item.name }}</div>
<div class="desc-container">
<div class="left">
<div class="deptName">
<!-- <div class="deptName">
<span>关键词:</span>
<span>{{ item.keyword }}</span>
</div>
</div> -->
<div class="deptName">
<span>展览单位:</span>
<span>{{ item.deptName }}</span>
......@@ -371,14 +371,14 @@ $text-indent: 16px;
.threeD {
display: flex;
cursor: pointer;
font-size: 20px;
font-size: 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: 24px;
font-size: 22px;
}
&:hover {
-webkit-box-reflect: below 2px
......@@ -406,14 +406,14 @@ $text-indent: 16px;
.search-button {
cursor: pointer;
width: 156px;
height: 54px;
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: 16px;
font-size: 14px;
transition: all 0.2s ease;
&:hover {
......@@ -510,7 +510,7 @@ $text-indent: 16px;
transition: all 0.5s ease;
background: #fff;
.name {
font-size: 22px;
font-size: 18px;
font-weight: bold;
color: #2069c4;
margin-bottom: 18px;
......@@ -605,11 +605,11 @@ $text-indent: 16px;
border-radius: 0;
background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%;
height: 54px;
height: 40px;
&::placeholder {
text-indent: 10px;
color: #999;
font-size: 16px;
font-size: 14px;
}
}
}
......
......@@ -69,21 +69,23 @@
</div>
<el-row :span="20">
<el-col :span="14" class="left">
<el-col :span="24" class="left">
<div class="basic-info">
<div class="body-item">
<span class="label">
<svg-icon icon-class="keyword"></svg-icon>
关键词:</span
>
<span class="value">{{ displayDetail.keyword }}</span>
<span class="value">{{
displayDetail.keyword || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zllx"></svg-icon>展览类型:</span
>
<span class="value">{{
dicts.displayType[displayDetail.type]
dicts.displayType[displayDetail.type] || "暂无"
}}</span>
</div>
<div class="body-item">
......@@ -91,20 +93,26 @@
<svg-icon icon-class="zlxz"></svg-icon>展览性质:</span
>
<span class="value">{{
dicts.displayCharacter[displayDetail.displayCharacter]
dicts.displayCharacter[
displayDetail.displayCharacter
] || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label"
><svg-icon icon-class="zldw"></svg-icon>展览单位:</span
>
<span class="value">{{ displayDetail.deptName }}</span>
<span class="value">{{
displayDetail.deptName || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label"
><svg-icon icon-class="zldq"></svg-icon>展览地区:</span
>
<span class="value">{{ displayDetail.regionName }}</span>
<span class="value">{{
displayDetail.regionName || "暂无"
}}</span>
</div>
</div>
</el-col>
......@@ -247,6 +255,19 @@
class="unit-content_images"
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
>
<div class="imgs-title">
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
单元图片
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
</div>
<el-carousel
indicator-position="outside"
:autoplay="false"
......@@ -764,14 +785,14 @@ $blue: #2069c4;
min-height: 200px;
.info-title {
font-size: 28px;
font-size: 24px;
font-weight: bold;
color: #444;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
.view-count {
font-size: 18px;
font-size: 14px;
margin-top: 10px;
color: #999;
font-weight: normal;
......@@ -785,6 +806,7 @@ $blue: #2069c4;
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 14px;
.label {
display: flex;
align-items: center;
......@@ -797,6 +819,7 @@ $blue: #2069c4;
width: 24px;
height: 24px;
margin-right: 16px;
font-size: 16px;
}
}
}
......@@ -913,16 +936,16 @@ $blue: #2069c4;
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
.exhibition-units-tree-node{
.exhibition-units-tree-node {
width: 100%;
height: 100%;
display: flex;
align-items: center;
.title{
.title {
width: 100%;
height: 100%;
display: flex;
align-items: center;
height: 100%;
display: flex;
align-items: center;
}
}
}
......@@ -963,6 +986,19 @@ $blue: #2069c4;
}
}
}
.imgs-title {
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
.modify {
width: 16px;
margin: 0 6px;
img {
width: 100%;
}
}
}
.buttons {
display: flex;
......@@ -1110,8 +1146,8 @@ $blue: #2069c4;
//有子节点 且未展开
::v-deep .el-tree .el-icon-caret-right:before {
background: url('~@/assets/imgs/display/normal/tree-node.png') no-repeat 0 3px;
content: '';
background: url("~@/assets/imgs/display/normal/tree-node.png") no-repeat 0 3px;
content: "";
display: block;
width: 16px;
height: 16px;
......@@ -1120,9 +1156,12 @@ $blue: #2069c4;
}
//有子节点 且已展开
::v-deep .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url('~@/assets/imgs/display/normal/tree-node-s.png') no-repeat 0 3px;
content: '';
::v-deep
.el-tree
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("~@/assets/imgs/display/normal/tree-node-s.png") no-repeat 0
3px;
content: "";
display: block;
width: 16px;
height: 16px;
......@@ -1133,7 +1172,7 @@ $blue: #2069c4;
//没有子节点
::v-deep .el-tree .el-tree-node__expand-icon.is-leaf::before {
background: transparent;
content: '';
content: "";
display: block;
width: 16px;
height: 16px;
......@@ -1141,7 +1180,6 @@ $blue: #2069c4;
background-size: 16px;
}
// 修改tree icon
::v-deep .el-carousel__item--card {
width: 100%;
......
......@@ -120,7 +120,7 @@
<div class="left">
<div class="deptName">
<span>关键词:</span>
<span>{{ item.keyword }}</span>
<span>{{ item.keyword ||'暂无' }}</span>
</div>
<div class="deptName">
<span>展览单位:</span>
......@@ -348,9 +348,9 @@ $text-indent: 16px;
background: url("@/assets/imgs/list/search-button-bg.png");
background-size: 100% 100%;
color: #444;
font-size: 16px;
font-size: 14px;
width: 156px;
height: 54px;
height: 40px;
&:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
......@@ -445,7 +445,7 @@ $text-indent: 16px;
transition: all 0.5s ease;
background: #fff;
.name {
font-size: 22px;
font-size: 18px;
font-weight: bold;
color: #2069c4;
margin-bottom: 18px;
......@@ -471,6 +471,7 @@ $text-indent: 16px;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
margin-bottom: 4px;
}
}
.right {
......@@ -515,11 +516,11 @@ $text-indent: 16px;
border-radius: 0;
background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%;
height: 54px;
height: 40px;
&::placeholder {
text-indent: 10px;
color: #999;
font-size: 16px;
font-size: 14px;
}
}
}
......
......@@ -9,7 +9,7 @@
<div class="ch">虚拟展厅</div>
<div class="en">Virtual Exhibition Hall</div>
</div>
<el-row class="content" :gutter="60">
<el-row class="content" :gutter="100">
<el-col :span="6" class="wow animate__animated animate__fadeInLeft">
<div class="intro" v-if="list.length > 0">
<div class="name">{{ list[0].name }}</div>
......@@ -26,7 +26,7 @@
<div class="virtual-items wow animate__animated animate__fadeInRight">
<el-row :gutter="10">
<el-col
:span="8"
:span="12"
v-for="(item, index) in list"
:key="index"
@click.native="handleClick(item)"
......@@ -180,7 +180,7 @@ $blue: #2069c4;
bottom: 0;
left: 0;
right: 0;
background-color: rgba($color: #000000, $alpha: 0.2);
background-color: rgba($color: #000000, $alpha: 0.4);
color: #fff;
// height: 80px;
padding: 16px;
......
......@@ -289,14 +289,14 @@ $text-indent: 16px;
.search-button {
cursor: pointer;
width: 156px;
height: 54px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: url("@/assets/imgs/list/search-button-bg.png");
background-size: 100% 100%;
color: #444;
font-size: 16px;
font-size: 14px;
.svg-icon {
margin-right: 4px;
}
......@@ -387,7 +387,7 @@ $text-indent: 16px;
transition: all 0.5s ease;
background: #fff;
.name {
font-size: 22px;
font-size: 18px;
font-weight: bold;
color: #2069c4;
margin-bottom: 18px;
......@@ -429,11 +429,11 @@ $text-indent: 16px;
border-radius: 0;
background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%;
height: 54px;
height: 40px;
&::placeholder {
text-indent: 10px;
color: #999;
font-size: 16px;
font-size: 14px;
}
}
}
......
......@@ -306,14 +306,14 @@ $text-indent: 16px;
.search-button {
cursor: pointer;
width: 156px;
height: 54px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: url("@/assets/imgs/list/search-button-bg.png");
background-size: 100% 100%;
color: #444;
font-size: 16px;
font-size: 14px;
&:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
......@@ -412,7 +412,7 @@ $text-indent: 16px;
transition: all 0.5s ease;
background: #fff;
.name {
font-size: 22px;
font-size: 18px;
font-weight: bold;
color: #2069c4;
margin-bottom: 18px;
......@@ -454,11 +454,11 @@ $text-indent: 16px;
border-radius: 0;
background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%;
height: 54px;
height: 40px;
&::placeholder {
text-indent: 10px;
color: #999;
font-size: 16px;
font-size: 14px;
}
}
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论