Skip to content

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

四渡赤水增加动画

上级 b2bd08ee
隐藏空白字符变更
内嵌 并排
正在显示 包含 62 行增加 和 48 行删除
src/router/index.js
浏览文件 @ 7b933485
......@@ -153,12 +153,12 @@ const routes = [
{
path: "/sdcs",
name: "SDCS",
component: () => import("@/views/boutique/components/SDCS"),
component: () => import("@/views/boutique/components/sdcs"),
},
{
path: "/jysg",
name: "JYSG",
component: () => import("@/views/boutique/components/JYSG"),
component: () => import("@/views/boutique/components/jysg"),
},
{
path: "/zggzsgwdzjlz",
......
src/views/boutique/components/SDCS.vue → src/views/boutique/components/sdcs/index.vue
浏览文件 @ 7b933485
<template>
<div class="sdcs">
<div class="face-image">
<div class="top">
<div class="top wow animate__animated animate__fadeInDown">
<img src="@/assets/imgs/boutique/sdcs/faceImage/layer1.png" />
</div>
<div class="layer2">
<div class="wrapper">
<div class="center"></div>
<div class="right1">
<div class="center wow animate__animated animate__fadeInUp"></div>
<div class="right1 wow animate__animated animate__fadeInRight">
<img src="@/assets/imgs/boutique/sdcs/faceImage/right1.png" />
</div>
<div class="right2">
<div class="right2 wow animate__animated animate__fadeInRight">
<img src="@/assets/imgs/boutique/sdcs/faceImage/right2.png" />
</div>
<div class="left">
<div class="left wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/boutique/sdcs/faceImage/left1.png" />
</div>
<div class="bottom"></div>
<div class="layer3">
<div class="bottom wow animate__animated animate__fadeInUp"></div>
<div class="layer3 wow animate__animated animate__fadeInDown">
<div class="title">
<img src="@/assets/imgs/boutique/sdcs/faceImage/title.png" />
</div>
</div>
<div class="box">
<div class="titles">
<div class="titles wow animate__animated animate__fadeInUp">
<div
class="item"
class="item wow animate__animated animate__fadeInUp"
v-for="(item, index) in unitsData[0].data"
:key="index"
>
......@@ -45,14 +45,14 @@
</div>
</div>
<div class="units">
<div class="part1">
<div class="part1 wow animate__animated animate__fadeInUp">
<div class="title">
<img src="@/assets/imgs/boutique/sdcs/part1/title.png" />
</div>
<div class="intro">
<div class="txt" v-html="unitsData[1].txt"></div>
</div>
<div class="line-group">
<div class="line-group wow animate__animated animate__bounceInLeft">
<div class="line"></div>
<div class="units-title-group">
<div class="container">
......@@ -67,7 +67,7 @@
</div>
</div>
<div class="content">
<div class="left-txt">
<div class="left-txt wow animate__animated animate__fadeInLeft">
<div class="title" v-html="part1CurUnit.title"></div>
<div class="intro" v-html="part1CurUnit.txt"></div>
</div>
......@@ -78,28 +78,33 @@
v-for="(item, index) in part1CurUnit.imgs"
:key="index"
>
<div class="name">{{ item.name }}</div>
<div class="name wow animate__animated animate__fadeIn">
{{ item.name }}
</div>
<img
class="cr-img"
class="cr-img wow animate__animated animate__fadeInRight"
:src="
require(`@/assets/imgs/boutique/sdcs/part1/${item.url}`)
"
/>
<div class="line2" v-if="index == 0"></div>
<div class="line3" v-if="index == 1"></div>
<div
class="line2 wow animate__animated animate__fadeInRight"
v-if="index == 0"
></div>
<div class="line3 animate__fadeInRight" v-if="index == 1"></div>
</div>
</div>
</div>
</div>
</div>
<div class="part2">
<div class="title">
<div class="title wow animate__animated animate__fadeInUp">
<img src="@/assets/imgs/boutique/sdcs/part2/title.png" />
</div>
<div class="intro">
<div class="intro wow animate__animated animate__fadeInUp">
<div class="txt" v-html="unitsData[2].txt"></div>
</div>
<div class="line-group">
<div class="line-group wow animate__animated animate__bounceInLeft">
<div class="line"></div>
<div class="units-title-group">
<div class="container">
......@@ -117,11 +122,14 @@
</div>
</div>
<div class="content">
<div class="left-txt">
<div class="left-txt wow animate__animated animate__fadeInLeft">
<div class="title" v-html="part2CurUnit.title"></div>
<div class="intro" v-html="part2CurUnit.txt"></div>
</div>
<div class="right-cr" v-if="part2CurUnit.imgs">
<div
class="right-cr wow animate__animated animate__fadeInRight"
v-if="part2CurUnit.imgs"
>
<div class="cr-group">
<div class="cr" v-for="(v, i) in part2CurUnit.imgs" :key="i">
<img
......@@ -147,13 +155,13 @@
</swiper> -->
</div>
<div class="part3">
<div class="title">
<div class="title wow animate__animated animate__fadeInDown">
<img src="@/assets/imgs/boutique/sdcs/part3/title.png" />
</div>
<div class="intro">
<div class="intro wow animate__animated animate__fadeInUp">
<div class="txt" v-html="unitsData[2].txt"></div>
</div>
<div class="line-group">
<div class="line-group wow animate__animated animate__bounceInRight">
<div class="line"></div>
<div class="units-title-group">
<div class="container">
......@@ -171,7 +179,10 @@
</div>
</div>
<div class="content">
<div class="right-cr" v-if="part3CurUnit.imgs">
<div
class="right-cr wow animate__animated animate__fadeInLeft"
v-if="part3CurUnit.imgs"
>
<div class="cr-group">
<div
class="cr"
......@@ -189,20 +200,20 @@
<div class="line2"></div>
</div>
</div>
<div class="left-txt">
<div class="left-txt wow animate__animated animate__fadeInRight">
<div class="title" v-html="part3CurUnit.title"></div>
<div class="intro" v-html="part3CurUnit.txt"></div>
</div>
</div>
</div>
<div class="part4">
<div class="title">
<div class="title wow animate__animated animate__fadeInDown">
<img src="@/assets/imgs/boutique/sdcs/part4/title.png" />
</div>
<div class="intro">
<div class="intro wow animate__animated animate__fadeInUp">
<div class="txt" v-html="unitsData[4].txt"></div>
</div>
<div class="line-group">
<div class="line-group wow animate__animated animate__bounceInLeft">
<div class="line"></div>
<div class="units-title-group">
<div class="container">
......@@ -217,11 +228,14 @@
</div>
</div>
<div class="content">
<div class="left-txt">
<div class="left-txt wow animate__animated animate__fadeInLeft">
<div class="intro" v-html="part4CurUnit.txt"></div>
<div class="title" v-html="part4CurUnit.title"></div>
</div>
<div class="right-cr" v-if="part4CurUnit.imgs">
<div
class="right-cr wow animate__animated animate__fadeInRight"
v-if="part4CurUnit.imgs"
>
<div class="cr-group">
<div
class="cr"
......@@ -243,10 +257,10 @@
</div>
</div>
<div class="part5">
<div class="title">
<div class="title wow animate__animated animate__fadeInDown">
<img src="@/assets/imgs/boutique/sdcs/part5/title.png" />
</div>
<div class="intro">
<div class="intro wow animate__animated animate__fadeInUp">
<div class="txt" v-html="unitsData[5].txt"></div>
</div>
</div>
......@@ -258,13 +272,13 @@
v-for="(item, index) in culturalRelic"
:key="index"
>
<div class="cr-img" v-for="(v, i) in item.imgs" :key="i">
<div class="cr-img wow animate__animated animate__bounceInDown" v-for="(v, i) in item.imgs" :key="i">
<img
:src="require(`@/assets/imgs/boutique/sdcs/culturalRelic/${v}`)"
alt=""
/>
</div>
<div class="name">{{ item.name }}</div>
<div class="name wow animate__animated animate__bounceInUp">{{ item.name }}</div>
</div>
</div>
</div>
......@@ -278,7 +292,7 @@
<div class="text">详细介绍四渡赤水纪念馆</div>
<div class="video-button">观看视频</div>
</div>
<div class="center wow animate__animated animate__fadeIn">
<div class="center wow animate__animated animate__fadeInDown">
<div class="img-container">
<img src="@/assets/imgs/boutique/sdcs/vr/circle.png" alt="" />
</div>
......@@ -476,7 +490,7 @@ export default {
top: 0;
width: 100%;
height: 360px;
background-image: url("@/assets/imgs/boutique/sdcs/faceImage/bottom.png");
// background-image: url("@/assets/imgs/boutique/sdcs/faceImage/bottom.png");
background-size: 100% 100%;
display: flex;
justify-content: center;
......@@ -537,7 +551,7 @@ export default {
.units {
background-image: url("@/assets/imgs/boutique/sdcs/bg.jpg");
height: 10693px;
height: 9600px;
width: 100%;
background-size: 100% 100%;
padding-top: 600px;
......@@ -1149,13 +1163,13 @@ export default {
padding: 0 80px;
& > .container {
width: 100%;
height: 2064px;
background-image: url("@/assets/imgs/boutique/sdcs/culturalRelic/bg.png");
height: 1900px;
background-image: url("@/assets/imgs/boutique/sdcs/culturalRelic/bg1.png");
background-size: 100% 100%;
display: flex;
& > .item {
position: relative;
padding-top: 50%;
padding-top: 64%;
margin-right: 55px;
& > .cr-img {
// width: 350px;
......@@ -1169,7 +1183,7 @@ export default {
}
}
&:nth-child(2n) {
padding-top: 40%;
padding-top: 50%;
}
}
& > .cr-1,
......@@ -1184,7 +1198,7 @@ export default {
align-items: center;
background: red;
padding: 16px 0;
top: 32%;
top: 40%;
font-size: 18px;
right: 10%;
}
......@@ -1201,7 +1215,7 @@ export default {
align-items: center;
background: red;
padding: 16px 0;
top: 24%;
top: 32%;
font-size: 18px;
left: 10%;
}
......
src/views/boutique/index.vue
浏览文件 @ 7b933485
......@@ -18,8 +18,8 @@
import SMGZ from "./components/SMGZ"; //神秘贵州
import YLGDYW from "./components/YLGDYW"; //夜郎国的疑问
import JYYCC from "./components/jyycc"; //技艺与传承
import SDCS from "./components/SDCS"; //四渡赤水
import JYSG from "./components/JYSG"; //教育史馆
import SDCS from "./components/sdcs"; //四渡赤水
import JYSG from "./components/jysg"; //教育史馆
import LZST from "./components/lzsg"; //六枝生态
import LGGZSGW from "./components/zggzsgwdzjlz"; //六枝生态
export default {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论