Skip to content

E
exhibition_page
提交 fc6950f7 authored 作者: Anix's avatar Anix
浏览文件
操作

精品展自适应

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