提交 39d3ad80 authored 作者: 龙菲's avatar 龙菲

夜郎国的疑问增加动画

上级 d047edb7
...@@ -164,7 +164,7 @@ ...@@ -164,7 +164,7 @@
@click="handleToCr(item.crId)" @click="handleToCr(item.crId)"
> >
<div class="img-container"> <div class="img-container">
<img :src="item.url" alt="" /> <img :src="$getFullUrl(item.url)" alt="" />
</div> </div>
<div class="cr-name">{{ item.name }}</div> <div class="cr-name">{{ item.name }}</div>
</div> </div>
......
...@@ -4,22 +4,22 @@ ...@@ -4,22 +4,22 @@
<div class="bg"> <div class="bg">
<img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/bg.jpg" alt=""> <img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/bg.jpg" alt="">
</div> </div>
<div class="cr-1"> <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=""> <img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/cr-1.png" alt="">
</div> </div>
<div class="cr-2"> <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.png" alt="">
</div> </div>
<div class="title-group"> <div class="title-group">
<div class="subtitle"> <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>
<div class="title"> <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> </div>
<div class="intro"> <div class="intro wow animate__animated animate__fadeIn">
<div class="intro-title"> <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>
<div class="intro-content"> <div class="intro-content">
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</div> </div>
</div> </div>
<div class="map-group"> <div class="map-group">
<div class="map"> <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.png" alt="">
</div> </div>
<div class="under-map"> <div class="under-map">
...@@ -43,9 +43,9 @@ ...@@ -43,9 +43,9 @@
</div> </div>
</div> </div>
<div class="units"> <div class="units">
<div class="line"></div> <div class="line wow animate__animated animate__fadeInleft"></div>
<div class="node"> <div class="node wow animate__animated animate__fadeInUp">
<div :class="{ 'node-item': true, 'active': currentUnit == item }" v-for="(item, index) in unitList" <div :class="{ 'node-item': true, 'active': currentUnit.title == item.title }" v-for="(item, index) in unitList"
:key="index" @click="handleClickNode(item)" @mouseenter="handleEnterUnit(item)" :key="index" @click="handleClickNode(item)" @mouseenter="handleEnterUnit(item)"
@mouseleave="handleMouseLeave(item)"> @mouseleave="handleMouseLeave(item)">
<div class="dot-group"> <div class="dot-group">
...@@ -60,14 +60,14 @@ ...@@ -60,14 +60,14 @@
</div> </div>
</div> </div>
<div class="unit-content"> <div class="unit-content">
<div class="unit-text"> <div class="unit-text wow animate__animated animate__fadeInLeft">
<div class="title">{{ currentUnit.title }}</div> <div class="title">{{ currentUnit.title }}</div>
<div class="content"> <div class="content">
{{ currentUnit.text }} {{ currentUnit.text }}
</div> </div>
</div> </div>
<div class="unit-cr"> <div class="unit-cr">
<div :class="{ 'unit-cr-group': true, 'flex-end': key == 0 || key == 2, 'flex-start': key == 1 }" <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"> v-for="(v, key) in currentUnit.culturalRelic" :key="key">
<div class="cr-container" @click="handleClickCr(v)"> <div class="cr-container" @click="handleClickCr(v)">
<div class="left-info" v-if="key == 0"> <div class="left-info" v-if="key == 0">
...@@ -118,14 +118,14 @@ ...@@ -118,14 +118,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="gap-bg"> <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.png" alt="">
</div> </div>
<div class="musuem"> <div class="musuem">
<div class="bg"> <div class="bg">
<img src="@/assets/imgs/boutique/ylgdyw/4_crs/bg.png" alt=""> <img src="@/assets/imgs/boutique/ylgdyw/4_crs/bg.png" alt="">
</div> </div>
<div class="info"> <div class="info wow animate__animated animate__fadeInUp">
<div class="musuem-title"> <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>
...@@ -133,11 +133,11 @@ ...@@ -133,11 +133,11 @@
黔西南州博物馆位于兴义市桔山广场,共计10000余平方米,为正科级公益性文化事业单位,设有陈列展览部、社会教育部、文物保护部、征集保管部、安全保卫部、文创研发部等部室。馆藏文物4500余件(套),其中一级文物32件(套),二级文物15件(套),三级文物60件(套)。精品文物有抚琴俑、铜车马、摇钱树、连枝灯、提梁壶、一字格剑等。现有基本陈列《夜郎的疑问-贵州汉代历史文物展》免费对公众开放,展览文物400余件(套),共三个单元六个展厅,展览面积3300平方米,为西南地区面积最大、珍贵文物较多的汉代文物专题展之一。 黔西南州博物馆位于兴义市桔山广场,共计10000余平方米,为正科级公益性文化事业单位,设有陈列展览部、社会教育部、文物保护部、征集保管部、安全保卫部、文创研发部等部室。馆藏文物4500余件(套),其中一级文物32件(套),二级文物15件(套),三级文物60件(套)。精品文物有抚琴俑、铜车马、摇钱树、连枝灯、提梁壶、一字格剑等。现有基本陈列《夜郎的疑问-贵州汉代历史文物展》免费对公众开放,展览文物400余件(套),共三个单元六个展厅,展览面积3300平方米,为西南地区面积最大、珍贵文物较多的汉代文物专题展之一。
</div> </div>
</div> </div>
<div class="cr-group"> <div class="cr-group wow animate__animated animate__fadeInUp">
<div class="title"> <div class="title">
夜郎国的炫丽文化 <img src="@/assets/imgs/boutique/ylgdyw/4_crs/title.png" alt="">
</div> </div>
<div class="cr-imgs-group"> <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"> <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="" />
...@@ -257,21 +257,21 @@ export default { ...@@ -257,21 +257,21 @@ export default {
crId: '' crId: ''
}, },
{ {
name: '羊角钮钟', name: '羊角钮钟',
years: '战国-西汉', years: '战国-西汉',
made: '青铜', made: '青铜',
source: '1987年安龙县大鱼塘(文昌宫旧址)出土', source: '1987年安龙县大鱼塘(文昌宫旧址)出土',
imgName: 'cr-2.png', imgName: 'cr-2.png',
crId: '' crId: 'c6413fd8eb3c408c811edcfb5fb9bc8a'
}, },
{ {
name: '一字格剑', name: '一字格曲刃青铜剑',
years: '战国-西汉', years: '战国-西汉',
made: '青铜', made: '青铜',
source: '1997年郑屯与鲁屯的交界处', source: '1997年郑屯与鲁屯的交界处',
imgName: 'cr-3.png', imgName: 'cr-3.png',
crId: '' crId: '166c3a120f55455587d75d6f34ae1d39'
} }
] ]
} }
...@@ -701,11 +701,21 @@ $themeYellow: #E7CE45; ...@@ -701,11 +701,21 @@ $themeYellow: #E7CE45;
top: 160vh; top: 160vh;
width: 100%; width: 100%;
// .title {
// font-size: 48px;
// display: flex;
// justify-content: center;
// margin-bottom: 94px;
// }
.title { .title {
font-size: 48px; margin-bottom: 78px;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 94px; height: 60px;
img {
height: 100%;
}
} }
.cr-imgs-group { .cr-imgs-group {
......
...@@ -110,7 +110,7 @@ export default { ...@@ -110,7 +110,7 @@ export default {
}, },
}, },
mounted() { mounted() {
this.activeTab = "sdcs"; this.activeTab = "smgz";
}, },
methods: { methods: {
handleTabClick(data) { handleTabClick(data) {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论