Skip to content

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

优化夜郎的疑问和教育史馆精品展加载体验

上级 4a26622c
隐藏空白字符变更
内嵌 并排
正在显示 包含 116 行增加 和 156 行删除
src/views/boutique/components/YLGDYW.vue
浏览文件 @ b2ac4dc6
......@@ -2,43 +2,25 @@
<div class="ylg">
<div class="face-and-intro">
<div class="bg">
<img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/bg.jpg" alt="" />
<img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/bg-low.png" alt="" />
</div>
<div
class="cr-1 wow animate__animated animate__fadeInRight"
data-wow-duration="1s"
>
<img
src="@/assets/imgs/boutique/ylgdyw/1_faceImage/cr-1.png"
alt=""
/>
<div class="cr-1 wow animate__animated animate__fadeInRight" data-wow-duration="1s">
<img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/cr-1-low.png" alt="" />
</div>
<div class="cr-2 wow animate__animated animate__fadeInLeft">
<img
src="@/assets/imgs/boutique/ylgdyw/1_faceImage/cr-2.png"
alt=""
/>
<img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/cr-2-low.png" alt="" />
</div>
<div class="title-group">
<div class="subtitle wow animate__animated animate__fadeInLeft">
<img
src="@/assets/imgs/boutique/ylgdyw/1_faceImage/subtitle.png"
alt=""
/>
<img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/subtitle.png" alt="" />
</div>
<div class="title wow animate__animated animate__fadeInLeft">
<img
src="@/assets/imgs/boutique/ylgdyw/1_faceImage/title.png"
alt=""
/>
<img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/title.png" alt="" />
</div>
</div>
<div class="intro wow animate__animated animate__fadeIn">
<div class="intro-title">
<img
src="@/assets/imgs/boutique/ylgdyw/1_faceImage/intro-title.png"
alt=""
/>
<img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/intro-title.png" alt="" />
</div>
<div class="intro-content">
<div>
......@@ -54,47 +36,31 @@
</div>
<div class="map-group">
<div class="map wow animate__animated animate__fadeInUp">
<img
src="@/assets/imgs/boutique/ylgdyw/1_faceImage/map.png"
alt=""
/>
<img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/map-low.png" alt="" />
</div>
<div class="under-map">
<img
src="@/assets/imgs/boutique/ylgdyw/1_faceImage/under-map.png"
alt=""
/>
<img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/under-map-low.png" alt="" />
</div>
</div>
<div class="units">
<div class="line wow animate__animated animate__fadeInleft"></div>
<div class="node wow animate__animated animate__fadeInUp">
<div
:class="{
'node-item': true,
active: currentUnit.title == item.title,
}"
v-for="(item, index) in unitList"
:key="index"
@click="handleClickNode(item)"
@mouseenter="handleEnterUnit(item)"
@mouseleave="handleMouseLeave(item)"
>
<div :class="{
'node-item': true,
active: currentUnit.title == item.title,
}" v-for="(item, index) in unitList" :key="index" @click="handleClickNode(item)"
@mouseenter="handleEnterUnit(item)" @mouseleave="handleMouseLeave(item)">
<div class="dot-group">
<div class="inner-dot"></div>
<div class="outter-circle"></div>
<!-- <div class="inner-dot"></div>
<div class="outter-circle"></div> -->
</div>
<div class="text">
<img
:src="
require(`@/assets/imgs/boutique/ylgdyw/2_unit/${
currentUnit == item || currentHoverItem == item
? item.img + '-s'
: item.img
<img :src="
require(`@/assets/imgs/boutique/ylgdyw/2_unit/${currentUnit == item || currentHoverItem == item
? item.img + '-s'
: item.img
}.png`)
"
alt=""
/>
" alt="" />
</div>
</div>
</div>
......@@ -106,17 +72,13 @@
</div>
</div>
<div class="unit-cr">
<div
:class="{
'unit-cr-group': true,
'flex-end wow animate__animated animate__fadeInRight':
key == 0 || key == 2,
'flex-start wow animate__animated animate__fadeInLeft':
key == 1,
}"
v-for="(v, key) in currentUnit.culturalRelic"
:key="key"
>
<div :class="{
'unit-cr-group': true,
'flex-end wow animate__animated animate__fadeInRight':
key == 0 || key == 2,
'flex-start wow animate__animated animate__fadeInLeft':
key == 1,
}" v-for="(v, key) in currentUnit.culturalRelic" :key="key">
<div class="cr-container" @click="handleClickCr(v)">
<div class="left-info" v-if="key == 0">
<div class="source">
......@@ -135,24 +97,15 @@
</div>
<div class="right-cr-img">
<div class="img-container">
<img
:src="
require(`@/assets/imgs/boutique/ylgdyw/2_unit/${v.imgName}`)
"
alt=""
/>
<img :src="
require(`@/assets/imgs/boutique/ylgdyw/2_unit/${v.imgName}`)
" alt="" />
</div>
<div class="left-line" v-if="key == 0">
<img
src="@/assets/imgs/boutique/ylgdyw/2_unit/right-line.png"
alt=""
/>
<img src="@/assets/imgs/boutique/ylgdyw/2_unit/right-line.png" alt="" />
</div>
<div class="right-line" v-if="key == 1">
<img
src="@/assets/imgs/boutique/ylgdyw/2_unit/left-line.png"
alt=""
/>
<img src="@/assets/imgs/boutique/ylgdyw/2_unit/left-line.png" alt="" />
</div>
</div>
......@@ -177,18 +130,15 @@
</div>
</div>
<div class="gap-bg wow animate__animated animate__fadeIn">
<img src="@/assets/imgs/boutique/ylgdyw/3_museum/bg.png" alt="" />
<img src="@/assets/imgs/boutique/ylgdyw/3_museum/bg-low.png" alt="" />
</div>
<div class="musuem">
<div class="bg">
<img src="@/assets/imgs/boutique/ylgdyw/4_crs/bg.png" alt="" />
<img src="@/assets/imgs/boutique/ylgdyw/4_crs/bg-low.png" alt="" />
</div>
<div class="info wow animate__animated animate__fadeInUp">
<div class="musuem-title">
<img
src="@/assets/imgs/boutique/ylgdyw/3_museum/title.png"
alt=""
/>
<img src="@/assets/imgs/boutique/ylgdyw/3_museum/title.png" alt="" />
</div>
<div class="musuem-intro">
黔西南州博物馆位于兴义市桔山广场，共计10000余平方米，为正科级公益性文化事业单位，设有陈列展览部、社会教育部、文物保护部、征集保管部、安全保卫部、文创研发部等部室。馆藏文物4500余件（套），其中一级文物32件（套），二级文物15件（套），三级文物60件（套）。精品文物有抚琴俑、铜车马、摇钱树、连枝灯、提梁壶、一字格剑等。现有基本陈列《夜郎的疑问-贵州汉代历史文物展》免费对公众开放，展览文物400余件（套），共三个单元六个展厅，展览面积3300平方米，为西南地区面积最大、珍贵文物较多的汉代文物专题展之一。
......@@ -196,25 +146,14 @@
</div>
<div class="cr-group wow animate__animated animate__fadeInUp">
<div class="title">
<img
src="@/assets/imgs/boutique/ylgdyw/4_crs/title.png"
alt=""
/>
<img src="@/assets/imgs/boutique/ylgdyw/4_crs/title.png" alt="" />
</div>
<div class="cr-imgs-group">
<div
class="cr-container"
v-for="(item, index) in bottomCrList"
:key="index"
@click="handleClickCr(item)"
>
<div class="cr-container" v-for="(item, index) in bottomCrList" :key="index" @click="handleClickCr(item)">
<div class="img-container">
<img
:src="
require(`@/assets/imgs/boutique/ylgdyw/4_crs/${item.imgName}`)
"
alt=""
/>
<img :src="
require(`@/assets/imgs/boutique/ylgdyw/4_crs/${item.imgName}`)
" alt="" />
</div>
<div class="name">{{ item.name }}</div>
<div class="years">{{ item.years }}</div>
......@@ -273,8 +212,8 @@
import MDialog from "@/components/MDialog";
import videoPlayer from "@/components/VideoPlayer";
export default {
components:{
MDialog,videoPlayer
components: {
MDialog, videoPlayer
},
data() {
return {
......@@ -288,14 +227,14 @@ export default {
name: "猫猫洞遗址出土刮削器",
years: "旧石器时代晚期",
source: "1993年4月顶效镇猫猫洞出土",
imgName: "cr-1.png",
imgName: "cr-1-low.png",
crId: "",
},
{
name: "观音洞遗址出土砍砸器",
years: "旧石器时代晚期和新石器时代过度时期",
source: "1993年4月龙广观音洞出土",
imgName: "cr-2.png",
imgName: "cr-2-low.png",
crId: "",
},
],
......@@ -309,14 +248,14 @@ export default {
name: "一字格剑",
years: "战国-西汉",
source: "1985年郑屯镇与龙广镇交界处出土",
imgName: "cr-3.png",
imgName: "cr-3-low.png",
crId: "",
},
{
name: "铜钟",
years: "战国-西汉",
source: "1984年万屯镇佐舍村出土",
imgName: "cr-4.png",
imgName: "cr-4-low.png",
crId: "",
},
],
......@@ -330,14 +269,14 @@ export default {
name: "摇钱树",
years: "东汉",
source: "1987年雨樟镇交乐6号墓出土",
imgName: "cr-5.png",
imgName: "cr-5-low.png",
crId: "5b7d94b9e361404a94d25bc561ff284f",
},
{
name: "铜车马",
years: "东汉",
source: "1987年雨樟镇交乐6号墓出土",
imgName: "cr-6.png",
imgName: "cr-6-low.png",
crId: "3189ce3499564153897b648c19300b4f",
},
],
......@@ -352,13 +291,13 @@ export default {
name: "猫猫洞遗址出土刮削器",
years: "旧石器时代晚期",
source: "1993年4月顶效镇猫猫洞出土",
imgName: "cr-1.png",
imgName: "cr-1-low.png",
},
{
name: "观音洞遗址出土砍砸器",
years: "旧石器时代晚期和新石器时代过度时期",
source: "1993年4月龙广观音洞出土",
imgName: "cr-2.png",
imgName: "cr-2-low.png",
},
],
},
......@@ -369,7 +308,7 @@ export default {
years: "战国-西汉",
made: "青铜",
source: "1999年册亨岩架征集",
imgName: "cr-1.png",
imgName: "cr-1-low.png",
crId: "",
},
{
......@@ -377,20 +316,20 @@ export default {
years: "战国-西汉",
made: "青铜",
source: "1987年安龙县大鱼塘（文昌宫旧址）出土",
imgName: "cr-2.png",
crId: "c6413fd8eb3c408c811edcfb5fb9bc8a",
imgName: "cr-2-low.png",
crId: "fa08feaffa9d413e8443c078750c1193",
},
{
name: "一字格曲刃青铜剑",
years: "战国-西汉",
made: "青铜",
source: "1997年郑屯与鲁屯的交界处",
imgName: "cr-3.png",
crId: "166c3a120f55455587d75d6f34ae1d39",
imgName: "cr-3-low.png",
crId: "75ae4f4057f84c0a93c0c5c536667e44",
},
],
showVideo: false,
src:''
src: ''
};
},
methods: {
......@@ -407,8 +346,9 @@ export default {
},
handleClickCr(item) {
if (item.crId) {
const { crId } = item;
const newPage = this.$router.resolve({
path: "culturalRelic/" + item.crId,
path: "/culturalRelic/" + crId,
});
window.open(newPage.href, "_blank");
} else {
......@@ -543,7 +483,7 @@ $themeYellow: #e7ce45;
width: 50%;
display: flex;
flex-direction: column;
padding: 260px 60px 60px;
padding: 260px 80px 60px;
.intro-title {
width: 328px;
......@@ -561,10 +501,10 @@ $themeYellow: #e7ce45;
color: #fff;
font-size: 20px;
font-weight: 500;
line-height: 1.5;
line-height: 1.6;
text-indent: 40px;
& > div {
&>div {
margin-bottom: 8px;
}
}
......@@ -586,7 +526,9 @@ $themeYellow: #e7ce45;
.line {
width: 100%;
// height: 1px;
border: 1px dashed $themeYellow;
// border: 1px dashed $themeYellow;
height: 2px;
background-image: url(@/assets/imgs/boutique/ylgdyw/2_unit/line.png);
}
.node {
......@@ -600,29 +542,31 @@ $themeYellow: #e7ce45;
.dot-group {
position: absolute;
top: -25px;
left: 50%;
.inner-dot {
width: 35px;
height: 35px;
// background: $themeYellow;
background: #fff;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, 25%);
}
.outter-circle {
width: 55px;
height: 55px;
// border: 3px dashed $themeYellow;
border: 3px dashed #fff;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
left: 25%;
width: 55px;
height: 55px;
background-image: url(@/assets/imgs/boutique/ylgdyw/2_unit/dot.png);
// .inner-dot {
// width: 35px;
// height: 35px;
// // background: $themeYellow;
// background: #fff;
// border-radius: 50%;
// position: absolute;
// left: 50%;
// transform: translate(-50%, 25%);
// }
// .outter-circle {
// width: 55px;
// height: 55px;
// // border: 3px dashed $themeYellow;
// border: 3px dashed #fff;
// border-radius: 50%;
// position: absolute;
// left: 50%;
// transform: translateX(-50%);
// }
}
.text {
......@@ -645,7 +589,7 @@ $themeYellow: #e7ce45;
}
.unit-content {
padding: 40px;
padding: 60px 80px;
.unit-text {
width: 40%;
......@@ -659,7 +603,7 @@ $themeYellow: #e7ce45;
.content {
font-size: 18px;
line-height: 1.5;
line-height: 2;
}
}
......@@ -706,8 +650,8 @@ $themeYellow: #e7ce45;
margin: 0 80px;
&:hover {
& > .img-container {
& > img {
&>.img-container {
&>img {
transform: scale(1.1);
}
}
......@@ -881,10 +825,12 @@ $themeYellow: #e7ce45;
}
}
}
.vr {
height: 800px;
display: flex;
align-items: center;
.vr-content {
width: 100%;
// height: 100%;
......@@ -895,6 +841,7 @@ $themeYellow: #e7ce45;
display: flex;
align-items: center;
justify-content: space-around;
.text {
font-size: 20px;
padding: 20px 0;
......@@ -904,6 +851,7 @@ $themeYellow: #e7ce45;
line-height: 65px;
letter-spacing: 4px;
}
.video-button {
color: #fff;
font-size: 22px;
......@@ -917,11 +865,14 @@ $themeYellow: #e7ce45;
letter-spacing: 2px;
cursor: pointer;
}
.left,
.right {
width: 20%;
.img-container {
width: 100%;
img {
width: 100%;
// height: 100%;
......@@ -931,9 +882,11 @@ $themeYellow: #e7ce45;
.center {
position: relative;
.img-container {
animation: changeright 4s linear infinite;
}
.text-content {
width: 100%;
height: 100%;
......@@ -945,6 +898,7 @@ $themeYellow: #e7ce45;
flex-direction: column;
align-items: center;
justify-content: center;
.center-text {
/* font-size: 40px;
font-weight: 500;
......@@ -952,10 +906,12 @@ $themeYellow: #e7ce45;
line-height: 50px; */
width: 334px;
height: 53px;
> img {
>img {
width: 100%;
}
}
.text-middle {
font-family: PingFang SC;
color: #fff;
......@@ -964,9 +920,11 @@ $themeYellow: #e7ce45;
font-size: 32px;
}
}
.button {
margin-top: 60px;
cursor: pointer;
.outter {
width: 90px;
height: 90px;
......@@ -977,6 +935,7 @@ $themeYellow: #e7ce45;
border: 2px dashed#fff;
animation: likes 2.5s ease-in infinite;
transition: all ease-in 0.5s;
.inner {
width: 65px;
height: 65px;
......@@ -987,7 +946,8 @@ $themeYellow: #e7ce45;
align-items: center;
color: #fff;
font-weight: bold;
> i {
>i {
font-size: 32px;
}
}
......
src/views/boutique/components/jysg/index.vue
浏览文件 @ b2ac4dc6
......@@ -252,14 +252,14 @@ img {
}
//common end
.gysg {
background-image: url("@/assets/imgs/boutique/jysg/bg.png");
background-image: url("@/assets/imgs/boutique/jysg/bg-low.png");
background-size: 100% 100%;
height: 7720px;
.part1 {
position: relative;
height: 1569px;
width: 100%;
background-image: url("@/assets/imgs/boutique/jysg/part1/bg.png");
background-image: url("@/assets/imgs/boutique/jysg/part1/bg-low.png");
background-size: 100% 100%;
display: flex;
justify-content: center;
......@@ -296,7 +296,7 @@ img {
.part2 {
height: 3297px;
width: 100%;
background-image: url("@/assets/imgs/boutique/jysg/part2/bg.png");
background-image: url("@/assets/imgs/boutique/jysg/part2/bg-low.png");
background-size: 100% 100%;
.hall1 {
width: 100%;
......@@ -531,7 +531,7 @@ img {
.part5 {
height: 1200px;
background-image: url("@/assets/imgs/boutique/jysg/part5/bg.png");
background-image: url("@/assets/imgs/boutique/jysg/part5/bg-low.png");
background-size: 100% 100%;
margin-top: 140px;
display: flex;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论