提交 496b1a68 authored 作者: 龙菲's avatar 龙菲
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -26,7 +26,10 @@
</div>
</div>
<div class="second">
<div class="units wow animate__animated animate__fadeInRightBig" data-wow-delay="0.5s">
<div
class="units wow animate__animated animate__fadeInRightBig"
data-wow-delay="0.5s"
>
<div class="unit-node" v-for="(n, i) in nodes" :key="i">
<p>
<img
......@@ -42,7 +45,10 @@
/>
</div>
</div>
<div class="unit-content wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
<div
class="unit-content wow animate__animated animate__fadeInUp"
data-wow-delay="0.5s"
>
<p>
贵州矿产资源丰富,矿种多,门类全。已发现矿种137种,占全国173种的79.19%;查明矿产储量89种,占全国162种的53.7%;列入储量表的有79种,其中在全国排位前三的有25种、前五的有31种、前十的有51种。
</p>
......@@ -71,13 +77,21 @@
</div>
<div class="content">
<div class="hall-node" v-for="(n, i) in halls" :key="i">
<div class="img wow animate__animated animate__fadeInLeft" v-if="i % 2 === 0">
<div
class="img wow animate__animated animate__fadeInLeft"
v-if="i % 2 === 0"
>
<img
:src="require(`@/assets/imgs/boutique/frgz/3rd/${n.img}.png`)"
alt=""
/>
</div>
<div class="text wow animate__animated" :class="i % 2 === 0 ? 'animate__fadeInRight' : 'animate__fadeInLeft'">
<div
class="text wow animate__animated"
:class="
i % 2 === 0 ? 'animate__fadeInRight' : 'animate__fadeInLeft'
"
>
<div :class="i % 2 === 0 ? 'right' : 'left'">
<div class="bg">
<img
......@@ -91,7 +105,10 @@
</div>
</div>
</div>
<div class="img wow animate__animated animate__fadeInRight" v-if="i % 2 !== 0">
<div
class="img wow animate__animated animate__fadeInRight"
v-if="i % 2 !== 0"
>
<img
:src="require(`@/assets/imgs/boutique/frgz/3rd/${n.img}.png`)"
alt=""
......@@ -131,7 +148,7 @@
<div class="video-button">观看视频</div>
</div>
<div class="center wow animate__animated animate__fadeInDown">
<div class="img-container">
<div class="img-container circle">
<img src="@/assets/imgs/boutique/frgz/6th/circle.png" alt="" />
</div>
<div class="text-content">
......@@ -536,7 +553,7 @@ export default {
font-size: 22px;
width: 180px;
height: 54px;
background: #1D458F;
background: #1d458f;
display: flex;
justify-content: center;
align-items: center;
......@@ -551,10 +568,10 @@ export default {
.img-container {
width: 100%;
height: 62px;
img {
width: 100%;
// height: 100%;
// width: 100%;
height: 100%;
}
}
}
......@@ -564,6 +581,12 @@ export default {
.img-container {
animation: changeright 4s linear infinite;
&.circle {
height: 628px;
> img {
height: 100%;
}
}
}
.text-content {
......@@ -619,7 +642,7 @@ export default {
width: 65px;
height: 65px;
border-radius: 50%;
background-color: #1D458F;
background-color: #1d458f;
display: flex;
justify-content: center;
align-items: center;
......@@ -638,37 +661,37 @@ export default {
}
}
@keyframes changeright {
0% {
-webkit-transform: rotate(0deg);
}
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes likes {
0% {
transform: scale(1);
}
0% {
transform: scale(1);
}
25% {
transform: scale(0.9);
}
25% {
transform: scale(0.9);
}
50% {
transform: scale(0.85);
}
50% {
transform: scale(0.85);
}
75% {
transform: scale(0.9);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
</style>
......@@ -259,6 +259,7 @@ export default {
height: 1410px;
position: relative;
> .title {
height: 354px;
position: absolute;
top: 300px;
left: 50%;
......@@ -271,6 +272,9 @@ export default {
margin-bottom: 300px;
> .title {
padding: 50px 0;
> img {
height: 46px;
}
}
> .txt {
width: 1390px;
......@@ -334,6 +338,9 @@ export default {
> p {
margin: 0;
padding: 0 100px;
> img {
height: 47px;
}
}
> .zp-list {
display: flex;
......@@ -431,10 +438,11 @@ export default {
.img-container {
width: 100%;
height: 66px;
img {
width: 100%;
// height: 100%;
// width: 100%;
height: 100%;
}
}
}
......@@ -444,6 +452,7 @@ export default {
.img-container {
animation: changeright 4s linear infinite;
height: 628px;
}
.text-content {
......@@ -462,8 +471,9 @@ export default {
}
.center-text {
width: 330px;
// width: 330px;
height: 50px;
text-align: center;
}
> .text {
......
......@@ -233,7 +233,7 @@ export default {
width: 100%;
position: relative;
font-family: PingFang SC;
overflow-x: hidden;
overflow: hidden;
img {
width: auto;
height: 100%;
......@@ -497,10 +497,17 @@ export default {
height: 605px;
}
> .zp {
right: 0;
top: 50px;
right: 150px;
> img {
height: 560px;
}
}
> .zp-txt {
left: 40%;
// left: 40%;
left: auto;
right: 20%;
top: 50%;
> .info {
> li {
width: 600px;
......@@ -596,10 +603,11 @@ export default {
.img-container {
width: 100%;
height: 152px;
img {
width: 100%;
// height: 100%;
// width: 100%;
height: 100%;
}
}
}
......@@ -609,6 +617,7 @@ export default {
.img-container {
animation: changeright 4s linear infinite;
height: 628px;
}
.text-content {
......@@ -627,8 +636,9 @@ export default {
}
.center-text {
width: 330px;
// width: 330px;
height: 50px;
text-align: center;
}
> .text {
......
......@@ -12,7 +12,7 @@
/>
<img
src="@/assets/imgs/boutique/wmsh/1st/bg.png"
class="img-bg wow animate__animated animate__fadeInUp" data-wow-delay="0.5s"
class="img-bg wow animate__animated animate__fadeInUp"
alt=""
/>
</div>
......@@ -23,7 +23,7 @@
class="bg wow animate__animated animate__fadeIn"
alt=""
/>
<div class="swiper-content wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
<div class="swiper-content wow animate__animated animate__fadeInUp">
<img
:src="require(`@/assets/imgs/boutique/wmsh/2nd/swiper${n}.png`)"
:class="`swiper${sort[n - 1]}`"
......@@ -32,10 +32,13 @@
:key="n"
/>
</div>
<div class="swiper-info wow animate__animated animate__fadeInRight" data-wow-delay="0.7s">
<div class="swiper-info wow animate__animated animate__fadeInRight">
<span>毕节博物馆第 {{ getIndex() }} 层线路图</span>
</div>
<div class="swiper-arrow wow animate__animated animate__fadeIn" data-wow-delay="0.5s">
<div
class="swiper-arrow wow animate__animated animate__fadeIn"
data-wow-delay="0.5s"
>
<div class="up" @click="handleSwiperChange('up')">
<img src="@/assets/imgs/boutique/wmsh/2nd/arrow_up.png" alt="" />
</div>
......@@ -49,8 +52,15 @@
</div>
<div class="desc">
<div>
<img src="@/assets/imgs/boutique/wmsh/2nd/desc_title.png" alt="" class="wow animate__animated animate__zoomInRight" />
<div class="desc-info wow animate__animated animate__slideInUp">
<img
src="@/assets/imgs/boutique/wmsh/2nd/desc_title.png"
alt=""
class="wow animate__animated animate__zoomInRight"
/>
<div
class="desc-info wow animate__animated animate__slideInRight"
data-wow-delay="0.2s"
>
毕节地区历史悠久,文化源远流长。自二十三万年前的远古时期,黔西观音洞人在与大自然的顽强搏斗中,开创了远古历史文明,成为中华文明的重要组成部分;进入新石器时代,生活在这片土地上的先民拥有了陶器制作、出现了农业,将文明继续向前推进;商周至战国时期,毕节先民逐步从穴居走向屋居,并掌握了青铜、铁冶炼技术。秦汉时期,毕节与中原就有着政治、经济、文化联系;至汉代,毕节已初开昌明;蜀汉时期,彝族济济火助诸葛亮南征有功,建立了罗甸国,与乌撒地方政权“勾”一起创造了千年彝族文化;明洪武年间,彝族女政治家奢香夫人开“龙场九驿”以通滇蜀。清初进一步推行“改土归流”政策,促进了交通、经济、文化的大发展,民族文化百花齐放。贵州地下党第一个党支部,贵州唯一一个省级地方红色革命政权——川滇黔省革命委员会革命根据地,贵州抗日救国军等反映了毕节是一块革命的热土;大方航空航天发动机制造厂的建立,标志着中国航空航天工业在这里诞生。社会主义建设时期,毕节地区各民族在党和政府的领导下,完成了清匪反霸、土地分配、农村生产合作社、土地承包等社会主义初始建设,全区的农业、工业和社会事业建设取得了巨大成就。有着厚重的历史文化,多姿多彩的民族文化和光辉灿烂的红色文化的毕节,随着改革开放,特别是毕节“开发扶贫、生态建设”试验区的建立,在党中央、国务院、各民主党派中央的高度关心、支持、帮扶下,全区各族人民在地委、行署的领导下,发扬革命老区、试验区精神,开拓进取、不断创新、勤奋努力,在挣脱贫困奔小康的道路上奋勇前进,硕果累累。改革试验绘宏图,跨越崛起正当时。一个正在崛起的毕节,一个科学发展的毕节,正在迈向新的跨越发展的新境地。
</div>
</div>
......@@ -63,7 +73,10 @@
alt=""
/>
</p>
<div class="menu wow animate__animated animate__slideInUp" :class="{ red: i > 4 }">
<div
class="menu wow animate__animated animate__zoomIn"
:class="{ red: i > 4 }"
>
<ul class="menu1" v-if="data[i - 1].children[0].title">
<li v-for="(node, j) in data[i - 1].children" :key="j">
<div
......@@ -71,7 +84,7 @@
:class="{ active: selectNode[i - 1]?.title === node.title }"
@click="handleNodeClick(node, i, 1)"
>
<span>{{ node.title }}</span>
<span>{{ node.title || "" }}</span>
<img
src="@/assets/imgs/boutique/wmsh/common/title_bg.png"
alt=""
......@@ -107,15 +120,20 @@
alt=""
v-if="i % 2 === 1"
class="wow animate__animated animate__slideInRight"
data-wow-delay="0.3s"
/>
<img
src="@/assets/imgs/boutique/wmsh/common/border-right.png"
alt=""
v-if="i % 2 === 0"
class="wow animate__animated animate__slideInLeft"
data-wow-delay="0.3s"
/>
</div>
<div class="desc wow animate__animated animate__fadeInUp" data-wow-delay="0.5s" :class="i % 2 === 1 ? 'left' : 'right'">
<div
class="desc wow animate__animated animate__fadeInUp"
:class="i % 2 === 1 ? 'left' : 'right'"
>
<div class="txt" v-if="i % 2 === 1">
<p>{{ getTitle(curNode[i - 1]) }}</p>
<div>
......@@ -132,7 +150,7 @@
</div>
<div class="txt" v-if="i % 2 === 0">
<p>{{ getTitle(curNode[i - 1]) }}</p>
<div>
<div :title="curNode[i - 1]?.intro">
{{ curNode[i - 1]?.intro }}
</div>
</div>
......@@ -155,11 +173,16 @@
:src="require(`@/assets/imgs/boutique/wmsh/5th/zp${n}.png`)"
alt=""
class="wow animate__animated"
:class="n % 2 === 1 ? 'animate__slideInDown' : 'animate__slideInUp'"
:class="
n % 2 === 1 ? 'animate__slideInDown' : 'animate__slideInUp'
"
data-wow-delay="0.5s"
/>
</div>
<p class="wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
<p
class="wow animate__animated animate__fadeInUp"
data-wow-delay="0.5s"
>
<img
src="@/assets/imgs/boutique/wmsh/common/title_bg.png"
alt=""
......@@ -244,12 +267,12 @@ export default {
},
methods: {
getTitle(node) {
let str = node.title;
let str = node.title || "";
if (node.subtitle) {
str += `--${node.subtitle}`;
}
return `${node.name} ${str}` || "";
return `${node.name || ""} ${str || ""}`;
},
handleNodeClick(data, index, type) {
if (type === 1) {
......@@ -307,7 +330,7 @@ export default {
width: 100%;
position: relative;
font-family: PingFang SC;
overflow-x: hidden;
overflow: hidden;
img {
width: auto;
height: 100%;
......@@ -470,6 +493,9 @@ export default {
> p.title {
text-align: center;
padding: 30px 0;
> img {
height: 55px;
}
}
> .menu {
color: #fff;
......@@ -494,6 +520,12 @@ export default {
position: relative;
> .bg {
text-align: center;
width: 100%;
height: 450px;
> img {
height: 100%;
width: 70%;
}
}
> .desc {
position: absolute;
......@@ -514,6 +546,7 @@ export default {
}
}
> .txt {
width: 700px;
> p {
font-size: 32px;
margin-bottom: 40px;
......@@ -524,6 +557,12 @@ export default {
> div {
font-size: 16px;
line-height: 32px;
max-height: 220px;
overflow: hidden; /*隐藏多出部分文字*/
text-overflow: ellipsis; /*用省略号代替多出部分文字*/
display: -webkit-box; /* 显示多行文本容器 */
-webkit-box-orient: vertical;
-webkit-line-clamp: 7; /*显示行数*/
}
}
> .pic {
......@@ -610,11 +649,13 @@ export default {
height: 1580px;
position: relative;
> .title {
padding-top: 120px;
padding-bottom: 90px;
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
}
> .display {
position: relative;
height: 1350px;
> .zp {
position: absolute;
text-align: center;
......@@ -649,11 +690,11 @@ export default {
}
}
.zp1 {
top: 250px;
top: 50px;
left: 0;
> .zp-img {
width: 359px;
height: 359px;
width: 300px;
height: 300px;
> img {
height: 227px;
}
......@@ -663,30 +704,30 @@ export default {
left: 80px;
top: 60%;
> .zp-img {
width: 338px;
height: 338px;
width: 300px;
height: 300px;
> img {
height: 297px;
}
}
}
.zp3 {
top: 380px;
top: 130px;
left: 20%;
> .zp-img {
width: 472px;
height: 472px;
width: 400px;
height: 400px;
> img {
height: 275px;
}
}
}
.zp4 {
top: 60%;
top: 55%;
left: 25%;
> .zp-img {
width: 522px;
height: 522px;
width: 500px;
height: 500px;
> img {
height: 522px;
}
......@@ -694,43 +735,49 @@ export default {
}
.zp5 {
left: 80%;
top: 75%;
top: 70%;
> .zp-img {
width: 294px;
height: 294px;
width: 250px;
height: 250px;
> img {
height: 294px;
}
}
> p {
bottom: -5px;
}
}
.zp6 {
top: 56%;
left: 56%;
> .zp-img {
width: 462px;
height: 462px;
width: 400px;
height: 400px;
> img {
height: 462px;
}
}
> p {
bottom: -30px;
}
}
.zp7 {
left: 75%;
top: 350px;
left: 77%;
top: 160px;
> .zp-img {
width: 411px;
height: 411px;
width: 360px;
height: 360px;
> img {
height: 297px;
}
}
}
.zp8 {
top: 250px;
left: 47%;
top: 60px;
left: 50%;
> .zp-img {
width: 472px;
height: 472px;
width: 400px;
height: 400px;
> img {
height: 275px;
}
......@@ -778,10 +825,11 @@ export default {
.img-container {
width: 100%;
height: 66px;
img {
width: 100%;
// height: 100%;
// width: 100%;
height: 100%;
}
}
}
......@@ -791,6 +839,7 @@ export default {
.img-container {
animation: changeright 4s linear infinite;
height: 628px;
}
.text-content {
......@@ -809,8 +858,9 @@ export default {
}
.center-text {
width: 330px;
// width: 330px;
height: 50px;
text-align: center;
}
> .text {
......
......@@ -35,13 +35,23 @@
<div class="third">
<div class="unit-info" v-for="(n, i) in units" :key="i">
<div class="info">
<div class="pic wow animate__animated animate__zoomIn" v-if="i % 4 === 2 || i % 4 === 3">
<div
class="pic wow animate__animated animate__zoomIn"
v-if="i % 4 === 2 || i % 4 === 3"
>
<img
:src="require(`@/assets/imgs/boutique/${n.imgs[0].img}`)"
alt=""
/>
</div>
<div class="txt wow animate__animated" :class="{ left: i % 4 === 2 || i % 4 === 3, 'animate__fadeInLeft': i % 4 === 0 || i % 4 === 1, 'animate__fadeInRight': i % 4 === 2 || i % 4 === 3}">
<div
class="txt wow animate__animated"
:class="{
left: i % 4 === 2 || i % 4 === 3,
animate__fadeInLeft: i % 4 === 0 || i % 4 === 1,
animate__fadeInRight: i % 4 === 2 || i % 4 === 3,
}"
>
<div class="txt-desc">
<img
:src="
......@@ -59,14 +69,20 @@
</div>
<img src="@/assets/imgs/boutique/wrf/bg/bg4.png" alt="" />
</div>
<div class="pic wow animate__animated animate__zoomIn" v-if="i % 4 === 0 || i % 4 === 1">
<div
class="pic wow animate__animated animate__zoomIn"
v-if="i % 4 === 0 || i % 4 === 1"
>
<img
:src="require(`@/assets/imgs/boutique/${n.imgs[0].img}`)"
alt=""
/>
</div>
</div>
<div class="other-info wow animate__animated animate__bounceInUp" data-wow-delay="0.2s">
<div
class="other-info wow animate__animated animate__bounceInUp"
data-wow-delay="0.2s"
>
<template v-for="(node, j) in n.imgs">
<div class="other-node" :key="j" v-if="j !== 0">
<div class="info-pic">
......@@ -197,11 +213,13 @@ export default {
position: absolute;
left: 200px;
top: 0;
height: 1070px;
}
> .info {
position: absolute;
right: 400px;
top: 130px;
height: 700px;
}
}
> .second {
......@@ -255,6 +273,7 @@ export default {
right: 30px;
> .title {
padding: 40px 0;
height: 35px;
}
> .txt {
font-weight: 600;
......@@ -298,6 +317,12 @@ export default {
> img {
display: block;
margin-bottom: 12px;
&:first-child {
height: 27px;
}
&:last-child {
height: 40px;
}
}
> .unit-desc {
font-size: 16px;
......@@ -352,13 +377,173 @@ export default {
&:nth-child(3) {
margin-bottom: 50px;
}
> .info-pic {
margin: auto;
> img {
width: 100%;
height: auto;
}
}
}
}
&:nth-child(1) {
.other-node {
&:nth-child(1) {
> .info-pic {
width: 670px;
}
}
&:nth-child(2) {
> .info-pic {
width: 600px;
}
}
&:nth-child(3) {
> .info-pic {
width: 500px;
}
}
}
}
&:nth-child(2) {
.other-node {
&:nth-child(1) {
> .info-pic {
width: 230px;
}
}
&:nth-child(2) {
> .info-pic {
width: 590px;
}
}
&:nth-child(3) {
> .info-pic {
width: 250px;
}
}
}
}
&:nth-child(3) {
.other-node {
&:nth-child(1) {
> .info-pic {
width: 500px;
}
}
&:nth-child(2) {
> .info-pic {
width: 500px;
}
}
&:nth-child(3) {
> .info-pic {
width: 445px;
}
}
}
}
&:nth-child(4) {
.other-node {
&:nth-child(1) {
> .info-pic {
width: 260px;
}
}
&:nth-child(2) {
> .info-pic {
width: 650px;
}
}
&:nth-child(3) {
> .info-pic {
width: 490px;
}
}
}
}
&:nth-child(5) {
.other-node {
&:nth-child(1) {
> .info-pic {
width: 545px;
}
}
&:nth-child(2) {
> .info-pic {
width: 615px;
}
}
&:nth-child(3) {
> .info-pic {
width: 400px;
}
}
}
}
&:nth-child(6) {
.other-node {
&:nth-child(1) {
> .info-pic {
width: 490px;
}
}
&:nth-child(2) {
> .info-pic {
width: 420px;
}
}
&:nth-child(3) {
> .info-pic {
width: 675px;
}
}
}
}
&:nth-child(7) {
.other-node {
&:nth-child(1) {
> .info-pic {
width: 410px;
}
}
&:nth-child(2) {
> .info-pic {
width: 460px;
}
}
&:nth-child(3) {
> .info-pic {
width: 520px;
}
}
}
}
&:nth-child(8) {
.other-node {
&:nth-child(1) {
> .info-pic {
width: 485px;
}
}
&:nth-child(2) {
> .info-pic {
width: 730px;
}
}
&:nth-child(3) {
> .info-pic {
width: 325px;
}
}
}
}
}
}
> .vr-360 {
// padding: 300px 0;
padding-top: 140px;
padding-top: 200px;
position: relative;
z-index: 9;
......@@ -435,10 +620,11 @@ export default {
> .text {
// font-size: 36px;
width: 420px;
// width: 420px;
height: 35px;
margin-top: 30px;
margin-bottom: 75px;
text-align: center;
}
}
......
......@@ -37,7 +37,7 @@
<div class="title wow animate__animated animate__fadeInUp">
<img src="@/assets/imgs/boutique/zs-press/2nd/zgqy.png" alt="" />
</div>
<p class="txt wow animate__animated animate__zoomIn" data-wow-delay="0.5s">
<p class="txt wow animate__animated animate__zoomIn">
<!-- 奋斗百年路,起航新征程。在中国共产党成立100周年的重要历史时刻,在“两个一百年”奋斗目标的重要历史交汇点,在全党深入学习贯彻党的十九届六中全会精神之际,《追随——贵州奋斗者的故事》承载着贵州各族人民追随中国共产党英勇奋斗的百年光荣历史,记载着贵州奋斗者在中国革命的伟大历程中的感人故事,呈现在观众面前。我们期望通过展览传承红色基因,增强责任担当,进一步汇聚热爱贵州、建设贵州、奉献贵州的磅礴力量,团结全省各族儿女在新的伟大征程上继续前行! -->
{{ intro }}
</p>
......@@ -54,7 +54,7 @@
</div>
</div>
<div class="pic" :class="i%2 === 0 ? 'wow animate__animated animate__fadeInRight' : 'wow animate__animated animate__fadeInLeft'">
<div class="img" :class="`part-${i}`">
<div class="img" :class="`part-${i + 1}`">
<img
:src="require(`@/assets/imgs/boutique/${node.imgList[0].img}`)"
alt=""
......@@ -74,7 +74,7 @@
</div>
</div>
</div>
<div class="brief-swiper wow animate__animated animate__slideInUp">
<div class="brief-swiper wow animate__animated animate__slideInRight">
<div>
<ul>
<template v-for="t in 2">
......@@ -436,10 +436,11 @@ export default {
.img-container {
width: 100%;
height: 152px;
img {
width: 100%;
// height: 100%;
// width: 100%;
height: 100%;
}
}
}
......@@ -449,6 +450,7 @@ export default {
.img-container {
animation: changeright 4s linear infinite;
height: 628px;
}
.text-content {
......@@ -467,8 +469,13 @@ export default {
}
.center-text {
width: 330px;
// width: 330px;
height: 50px;
text-align: center;
> img {
width: auto;
height: 100%;
}
}
> .text {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论