Skip to content

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

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

上级 d195b97a
显示空白字符变更
内嵌 并排
正在显示 包含 442 行增加 和 125 行删除
src/assets/imgs/boutique/jyycc.jpg 0 → 100644
浏览文件 @ 78c96593
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/ylgdyw.jpg 0 → 100644
浏览文件 @ 78c96593
This image diff could not be displayed because it is too large. You can view the blob instead.
src/components/Footer/index.vue
浏览文件 @ 78c96593
......@@ -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>
src/components/ListBanner/index.vue
浏览文件 @ 78c96593
......@@ -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;
......
src/components/NavBar/index.vue
浏览文件 @ 78c96593
......@@ -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;
......
src/components/ReaderOperations/index.vue
浏览文件 @ 78c96593
......@@ -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 {
......
src/views/boutique/index.vue
浏览文件 @ 78c96593
......@@ -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%;
}
}
}
}
}
......
src/views/culturalRelic/Detail.vue
浏览文件 @ 78c96593
......@@ -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>
......
src/views/culturalRelic/index.vue
浏览文件 @ 78c96593
......@@ -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;
}
}
}
......
src/views/display/components/BlueStyle.vue
浏览文件 @ 78c96593
......@@ -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,12 +936,12 @@ $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;
......@@ -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%;
......
src/views/display/components/RedStyle.vue
浏览文件 @ 78c96593
......@@ -12,19 +12,28 @@
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide
<!-- <el-carousel height="430px">
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<div class="img-container">
<img :src="item.url" alt="" srcset="" />
<img :src="$getFullUrl(item.pressUrl)" alt="" />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</el-carousel-item>
</el-carousel> -->
<img
class="animate__animated animate__fadeInDownBig"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
id="faceImage"
:src="$getFullUrl(displayDetail.imagesVo[0].pressUrl)"
/>
<img
id="faceImage"
v-else-if="displayDetail.faceImagePressUrl"
class="animate__animated animate__fadeInDownBig"
:src="displayDetail.faceImagePressUrl"
/>
</div>
<!-- 展览基本信息 -->
<div
......@@ -58,7 +67,31 @@
</div>
<div class="info-container">
<div class="info-container-left">
<el-image
<el-carousel>
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
class="imagesVo-image-container"
>
<div
class="img-container"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img
:src="$getFullUrl(item.pressUrl)"
alt="点击查看大图"
srcset=""
/>
</div>
<div
class="enlarge"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-carousel-item>
</el-carousel>
<!-- <el-image
:src="
$getFullUrl(
displayDetail.faceImagePressUrl ||
......@@ -69,7 +102,7 @@
@click.native="
handelPreviewImages([displayDetail.faceImageUrl])
"
></el-image>
></el-image> -->
</div>
<div class="info-container-right">
<div class="info-title">
......@@ -80,35 +113,46 @@
</div>
</div>
<el-row>
<el-col :span="13">
<el-col :span="24">
<div class="basic-info">
<div class="body-item">
<span class="label">关键词</span>
<span class="value">{{ displayDetail.keyword }}</span>
<span class="label">
<svg-icon icon-class="keyword"></svg-icon>
关键词：</span
>
<span class="value">{{ displayDetail.keyword||'暂无' }}</span>
</div>
<div class="body-item">
<span class="label">展览类型</span>
<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">
<span class="label">展览性质</span>
<span class="label">
<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">展览单位</span>
<span class="value">{{ displayDetail.deptName }}</span>
<span class="label"
><svg-icon icon-class="zldw"></svg-icon>展览单位：</span
>
<span class="value">{{ displayDetail.deptName||'暂无' }}</span>
</div>
<div class="body-item">
<span class="label">展览地区</span>
<span class="value">{{ displayDetail.regionName }}</span>
<span class="label"
><svg-icon icon-class="zldq"></svg-icon>展览地区：</span
>
<span class="value">{{ displayDetail.regionName ||'暂无' }}</span>
</div>
</div>
</el-col>
<el-col :span="11">
<el-col :span="11" class="reader-operations">
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
......@@ -140,7 +184,10 @@
<div class="wrapper">
<div class="custom-title">展览简介</div>
<div class="intro-content">
<div class="intro-content-container" v-html="displayDetail.intro"></div>
<div
class="intro-content-container"
v-html="displayDetail.intro"
></div>
</div>
<div
class="intro-video"
......@@ -168,7 +215,7 @@
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="wrapper">
<div class="wrapper unit-wraraper">
<div class="custom-title units">展览单元</div>
<div class="units-content">
<div class="left-menu">
......@@ -186,11 +233,13 @@
>
<img :src="item.imagesVo[0].pressUrl" alt="" />
</div>
<div class="text">{{ item.title }}</div>
<div class="text">
<svg-icon icon-class="collect-s"></svg-icon>{{ item.title }}
</div>
</div>
</div>
<div class="right-content">
<el-row v-if="currentUnit && currentUnit.imagesVo.length > 0">
<!-- <el-row v-if="currentUnit && currentUnit.imagesVo.length > 0">
<el-col
:span="i == 0 ? 24 : 8"
v-for="(v, i) in currentUnit.imagesVo"
......@@ -201,7 +250,49 @@
</div>
<div class="unit-name-intro" v-if="i == 0">
<div class="unit-name">{{ currentUnit.title }}</div>
<div class="unit-intro" v-html="currentUnit.intro "></div>
<div class="unit-intro" v-html="currentUnit.intro"></div>
</div>
</el-col>
</el-row> -->
<el-row v-if="currentUnit">
<el-col>
<div class="unit-name-intro2">
<div class="unit-name">{{ currentUnit.title }}</div>
<div class="unit-intro" v-html="currentUnit.intro"></div>
</div>
<div class="unit-images" v-if=" currentUnit.imagesVo.length > 0">
<div class="unit-images-title">
<svg-icon icon-class="collect-s"></svg-icon>
相关图片
<svg-icon icon-class="collect-s"></svg-icon>
</div>
<el-carousel
v-if="currentUnit.imagesVo.length > 0"
height="400px"
>
<el-carousel-item
v-for="(item, index) in currentUnit.imagesVo"
:key="index"
class="imagesVo-image-container"
>
<div
class="img-container"
@click="handelPreviewImages(currentUnit.imagesVo)"
>
<img
:src="$getFullUrl(item.pressUrl)"
alt="点击查看大图"
srcset=""
/>
</div>
<div
class="enlarge"
@click="handelPreviewImages(currentUnit.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-carousel-item>
</el-carousel>
</div>
</el-col>
</el-row>
......@@ -435,9 +526,24 @@ export default {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
// this.$refs.AudioPlayer.play();
// }
this.replaceFaceImage();
});
},
replaceFaceImage() {
var img = new Image(); //新建一个图片对象
let url; //最终显示的大图
if (this.displayDetail.faceImagePressUrl) {
url = this.$getFullUrl(this.displayDetail.faceImageUrl);
} else if (this.displayDetail.imagesVo.length > 0) {
url = this.$getFullUrl(this.displayDetail.imagesVo[0].url);
}
let faceImage = document.getElementById("faceImage");
img.src = url;
img.onload = function () {
faceImage.src = url;
};
},
//节流函数
throttle(fn, gapTime) {
let _this = this;
......@@ -507,7 +613,7 @@ export default {
}
.custom-title {
width: 50px;
background-color: #d72f3f;
background-color: #a30e0c;
min-height: 300px;
color: #fff;
font-size: 28px;
......@@ -525,6 +631,26 @@ export default {
.content-item {
width: 100%;
}
.enlarge {
position: absolute;
bottom: 40px;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
/**公共样式结束 */
/**样式开始 */
......@@ -536,16 +662,13 @@ export default {
/**轮播图 */
.display-detail_imgs {
.img-container {
height: 430px;
height: 436px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
/**基本信息 */
.display-detail_basic_info {
margin: 80px 0;
......@@ -586,7 +709,7 @@ export default {
}
.film-img-container {
animation: filmMoveLeft 60s linear infinite;
height: 40px;
height: 30px;
img {
width: 1400px;
height: 100%;
......@@ -597,22 +720,30 @@ export default {
.info-container {
display: flex;
justify-content: space-between;
padding: 40px 20px 40px 0;
padding: 30px 20px 30px 0;
height: 100%;
.info-container-left {
min-height: 200px;
margin-right: 40px;
margin-right: 50px;
flex: 1;
.el-image {
overflow: hidden;
.imagesVo-image-container {
// position: relative;
.img-container {
height: 100%;
width: 100%;
background-color: #f5f5f9;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
.info-container-right {
flex: 1;
min-height: 200px;
padding: 40px 0 10px;
padding: 30px 0;
.info-title {
padding-bottom: 20px;
margin-bottom: 20px;
......@@ -621,9 +752,10 @@ export default {
justify-content: space-between;
.title {
font-size: 32px;
font-size: 24px;
font-weight: 500;
color: #8b0000;
font-weight: bold;
}
.view-count {
font-size: 18px;
......@@ -638,19 +770,30 @@ export default {
}
}
.basic-info {
font-size: 16px;
.body-item {
display: flex;
font-size: 14px;
.label {
display: block;
width: 80px;
width: 140px;
margin-right: 26px;
margin-bottom: 10px;
font-weight: bold;
color: #9f9c9a;
.svg-icon {
margin-right: 8px;
font-size: 16px;
}
}
}
}
.reader-operations {
margin-top: 20px;
}
}
}
}
......@@ -673,7 +816,8 @@ export default {
text-indent: 32px;
background-color: #f3f3f3;
margin: 20px;
line-height: 28px;
line-height: 2;
font-size: 16px;
}
.intro-video {
padding: 20px;
......@@ -692,17 +836,21 @@ export default {
.wrapper {
// width;
display: flex;
border: 2px solid #cccccc;
// border: 2px solid #cccccc;
border-left: none;
transition: width 0.5s ease-in-out;
.units-content {
flex: 1;
display: flex;
.left-menu {
width: 524px;
width: 300px;
display: flex;
align-items: center;
flex-direction: column;
background: #520002;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.left-menu-item {
height: 54px;
width: 100%;
......@@ -714,6 +862,8 @@ export default {
display: flex;
align-items: center;
background: #520002;
cursor: pointer;
&:hover {
.text {
color: #fff;
......@@ -749,11 +899,14 @@ export default {
}
}
.text {
font-size: 24px;
font-size: 18px;
font-weight: 400;
color: #ccc;
position: relative;
z-index: 1;
.svg-icon {
margin-right: 8px;
}
}
}
}
......@@ -787,7 +940,7 @@ export default {
}
}
.unit-name {
font-size: 48px;
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-align: center;
......@@ -806,24 +959,51 @@ export default {
-webkit-box-orient: vertical;
}
}
.unit-name-intro2 {
padding: 80px 40px;
.unit-name {
font-size: 24px;
font-weight: bold;
color: #520002;
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.unit-intro {
line-height: 2;
text-indent: 32px;
font-size: 16px;
}
}
.unit-images {
margin: 20px 40px 40px;
.unit-images-title {
display: flex;
justify-content: center;
font-size: 14px;
margin-bottom: 20px;
align-items: center;
color: #520002;
.svg-icon{
margin: 0 10px;
}
}
}
}
}
.img-container {
width: 100%;
// height: 100%;
height: 162px;
height: 100%;
// height: 162px;
overflow: hidden;
cursor: pointer;
&:hover {
img {
transform: scale(1.1);
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all ease 0.5s;
object-fit: contain;
}
}
}
......@@ -952,7 +1132,6 @@ export default {
.wrapper {
display: flex;
background-color: #fafafa;
border: 2px solid #cccccc;
border-left: none;
.lts-content {
width: 100%;
......@@ -963,12 +1142,18 @@ export default {
}
}
}
::v-deep .el-carousel__item--card {
width: 100%;
// ::v-deep .el-carousel__item--card {
// width: 100%;
// height: 100%;
// transform: translateX(0) scale(1) !important;
// }
::v-deep .el-carousel {
height: 100%;
}
::v-deep .el-carousel__container {
height: 100%;
transform: translateX(0) scale(1) !important;
}
@keyframes filmMoveLeft {
0% {
transform: translateX(0);
......
src/views/display/index.vue
浏览文件 @ 78c96593
......@@ -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;
}
}
}
......
src/views/home/components/Virtural.vue
浏览文件 @ 78c96593
......@@ -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;
......
src/views/museum/index.vue
浏览文件 @ 78c96593
......@@ -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;
}
}
}
......
src/views/virtual/index.vue
浏览文件 @ 78c96593
......@@ -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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论