H5广告动画+animate.js
阮炯
<template>
<div class="main">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 公司介绍 -->
<div class="swiper-slide">
<div class="swiper-slide-content first-content-bk-color">
<div class="first_section">
<div class="ani first-title" swiper-animate-effect="bounceInDown" swiper-animate-duration="1s"
swiper-animate-delay="0">
<h2>QD202201120012</h2>
<h1 class="white">XXXXX</h1>
<h1 class="white">XX项目</h1>
</div>
<!-- <div class="first_arrow ani" swiper-animate-effect="bounceIn" swiper-animate-duration="2s" swiper-animate-delay="0">-->
<!-- <img src="@assets/img/arrow.png" width="13" height="20" alt="">-->
<!-- </div>-->
<div class="active-end-box">
<div class="border-box">
<div class="border"></div>
<div class="active-end-text">{{ flag ? '活动已结束' : '距活动结束' }}</div>
<div class="border"></div>
</div>
</div>
<div class="time-box" v-show="!flag">
<!-- <input type="datetime-local" :min="currentTime" placeholder="请输入秒杀开始时间" v-model="startTime">-->
<!-- <button @click="startTimeFun">开始计时</button>-->
<span id="day" class="day number-style" style="margin-left: .3rem">{{ countDownTime.dayTime }}</span>
<span class="day-text chinese-text">天</span>
<span id="hours" class="hour number-style">{{ countDownTime.hourTime }}</span>
<span class="hour-text chinese-text">时</span>
<span id="min" class="min number-style">{{ countDownTime.minTime }}</span>
<span class="min-text chinese-text">分</span>
<!-- <span id="sec" class="sec number-style">{{ countDownTime.secTime }}</span>-->
</div>
<div class="first_img ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
swiper-animate-delay="0">
<img :src="list.companyImg" alt="">
</div>
<div class="first-content ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
swiper-animate-delay="2">
<div class="first-content-flexbox">
<div>
<p class="first-content-flexbox-font">债权转让金额</p>
<p class="first-content-flexbox-number">455.69万元</p>
</div>
<div style="width: 32.5%">
<p class="first-content-flexbox-font">抵押物评估值</p>
<p class="first-content-flexbox-number">520.4万元</p>
</div>
</div>
<div class="first-content-flexbox">
<div>
<p class="first-content-flexbox-font">预计处置周期</p>
<p class="first-content-flexbox-number">6-8个月</p>
</div>
<div style="width: 32.5%">
<p class="first-content-flexbox-font">预计处置收益</p>
<p class="first-content-flexbox-number">14.2%</p>
</div>
</div>
<div class="first-content-flexbox">
<div>
<p class="first-content-flexbox-font">预估债权总额</p>
<p class="first-content-flexbox-number">998.18万元</p>
</div>
<div style="width: 32.5%">
<p class="first-content-flexbox-font" style="text-align: center;">执行进度</p>
<p class="first-content-flexbox-number">已进入评估拍卖</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--债权亮点-->
<div class="swiper-slide">
<div class="swiper-slide-content second-content-bk-color">
<div class="second-content-bk-color-opacity"></div>
<div class="second-section ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
swiper-animate-delay="0">
<div class="second-section-content">
<div class="second-section-content-color">
<div>
<div class="content-title">
<h1 class="title-text">债权亮点</h1>
<h2 class="content-english">Creditor's Rights Highlights</h2>
</div>
<div class="second_arrow ani" swiper-animate-effect="bounceIn" swiper-animate-duration="2s"
swiper-animate-delay="0">
<img src="@assets/img/arrow.png" width="13" height="20" alt="">
</div>
</div>
<ul class="content-content-ul ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
swiper-animate-delay="3">
<li :class="item.id == 0? '':'content-li-top'" v-for="item in list.creditorsArr" :key="item.id">
{{ item.text }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--抵押物亮点-->
<div class="swiper-slide">
<div class="swiper-slide-content second-content-bk-color">
<div class="second-content-bk-color-opacity"></div>
<div class="second-section ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
swiper-animate-delay="0">
<div class="second-section-content">
<div class="second-section-content-color">
<div>
<div class="content-title">
<h1 class="title-text">抵押物亮点</h1>
<h2 class="content-english">Collateral highlights</h2>
</div>
<div class="second_arrow ani" swiper-animate-effect="bounceIn" swiper-animate-duration="2s"
swiper-animate-delay="0">
<img src="@assets/img/arrow.png" width="13" height="20" alt="">
</div>
</div>
<ul class="content-content-ul">
<div v-for="item in list.collateral" :key="item.id">
<li :class="item.id == 0? '':'content-li-top'">{{ item.type == 'img' ? '' : item.text }}</li>
<li v-if="item.type == 'img'" class="content-li-top content-li-map ani"
swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0">
<div class="map-img-box">
<img :src="item.text" alt="">
</div>
</li>
</div>
<!-- <li class="content-li-top">2、抵押物价值远大于转让价格。抵押物配套齐全适合居住，适合作为改善型住房，且满足“满五唯一”，有较高的投资价值。</li>-->
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 抵押物环境 -->
<div class="swiper-slide">
<div class="swiper-slide-content second-content-bk-color">
<div class="second-content-bk-color-opacity"></div>
<div class="second-section ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
swiper-animate-delay="0">
<div class="second-section-content">
<div class="second-section-content-color">
<div>
<div class="content-title">
<h1 class="title-text">抵押物环境</h1>
<h2 class="content-english">Collateral environment</h2>
</div>
<div class="second_arrow ani" swiper-animate-effect="bounceIn" swiper-animate-duration="2s"
swiper-animate-delay="0">
<img src="@assets/img/arrow.png" width="13" height="20" alt="">
</div>
</div>
<dl v-for="item in list.environmentArr" :key="item.id" class="left-right-box ani"
:swiper-animate-effect="item.type == 'right'?'fadeInRight':'fadeInLeft'"
swiper-animate-duration="2s" swiper-animate-delay="2">
<template v-if="item.type !== 'right'">
<dt class="left-content-box">
<div class="left-content">
<img class="border-img" src="@assets/img/border.png" alt="">
<img class="environment-img" :src="item.img" alt="">
</div>
</dt>
<dd class="right-content">
{{ item.text }}
</dd>
</template>
<template v-else>
<dd class="right-content" style="padding-left: 0rem;padding-right: .3rem">
{{ item.text }}
</dd>
<dt class="left-content-box">
<div class="left-content">
<img class="border-img" src="@assets/img/border.png" alt="">
<img class="environment-img" :src="item.img" alt="">
</div>
</dt>
</template>
</dl>
<!-- <dl class="left-right-box ani" style="margin-top: .3rem" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="0">-->
<!-- <dd class="right-content" style="padding-left: 0rem;padding-right: .3rem">-->
<!-- 楼层较高且朝向较好，采光条件好。小区竣工年代为2010年，建筑外观以及相关设施都比较新。-->
<!-- </dd>-->
<!-- <dt class="left-content-box">-->
<!-- <div class="left-content">-->
<!-- <img class="border-img" src="@assets/img/border.png" alt="">-->
<!-- <img class="environment-img" src="@assets/img/huanjing2.png" alt="">-->
<!-- </div>-->
<!-- </dt>-->
<!-- </dl>-->
<!-- <dl class="left-right-box ani" style="margin-top: .3rem" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0">-->
<!-- <dt class="left-content-box">-->
<!-- <div class="left-content">-->
<!-- <img class="border-img" src="@assets/img/border.png" alt="">-->
<!-- <img class="environment-img" src="@assets/img/huanjing3.png" alt="">-->
<!-- </div>-->
<!-- </dt>-->
<!-- <dd class="right-content">-->
<!-- 小区内采取人车分流适合老人和儿童居住。周边配套设施比较齐全，交通便捷，便于居住生活。-->
<!-- </dd>-->
<!-- </dl>-->
</div>
</div>
</div>
</div>
</div>
<!--债权判决书-->
<div class="swiper-slide">
<div class="swiper-slide-content second-content-bk-color">
<div class="second-content-bk-color-opacity"></div>
<div class="second-section ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
swiper-animate-delay="0">
<div class="second-section-content">
<div class="second-section-content-color" style="display: inherit;">
<div style="margin-top: .5rem">
<div class="content-title">
<h1 class="title-text">相关法律文书</h1>
<h2 class="content-english">Debt judgment</h2>
</div>
<div class="second_arrow ani" swiper-animate-effect="bounceIn" swiper-animate-duration="2s"
swiper-animate-delay="0">
<img src="@assets/img/arrow.png" width="13" height="20" alt="">
</div>
</div>
<div class="dept-box-img">
<div v-for="item in list.deptArr" :key="item.id" class="dept-for-div ani"
swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0">
<img src="@assets/img/border.png" alt="">
<img :src="item.img" style="padding: .2rem;" alt="">
</div>
<!-- <div class="dept-for-div ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0">-->
<!-- <img src="@assets/img/border.png" alt="">-->
<!-- <img src="@assets/img/panjue2.png" style="padding: .1rem;" alt="">-->
<!-- </div>-->
<!-- <div class="dept-for-div ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0">-->
<!-- <img src="@assets/img/border.png" alt="">-->
<!-- <img src="@assets/img/panjue3.png" style="padding: .1rem;" alt="">-->
<!-- </div>-->
<!-- <div class="dept-for-div ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0">-->
<!-- <img src="@assets/img/border.png" alt="">-->
<!-- <img src="@assets/img/panjue4.png" style="padding: .1rem;" alt="">-->
<!-- </div>-->
</div>
</div>
</div>
</div>
</div>
</div>
<!--联系我们-->
<div class="swiper-slide">
<div class="swiper-slide-content second-content-bk-color">
<div class="second-content-bk-color-opacity"></div>
<div class="second-section ani" style="padding:0rem" swiper-animate-effect="fadeIn"
swiper-animate-duration="2s" swiper-animate-delay="0">
<div class="second-section-content last-section-content">
<div class="second-section-content-color" style="justify-content: center">
<div>
<div class="content-title">
<h1 class="welcome-text">欢迎咨询</h1>
<!-- <h2 class="content-english">welcome</h2>-->
</div>
<div class="second_arrow ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
swiper-animate-delay="2">
<img src="@assets/img/arrow.png" width="13" height="20" alt="">
</div>
</div>
<div class="wechat-img" style="margin-top: 1rem">
<div class="img-center-box">
<img src="@assets/img/first.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-show="arrowShow" class="paging-icon"></div>
</div>
</template>
<script>
import * as swiperAni from "../../lib/animate"
import Swiper from "swiper"
import "swiper/dist/css/swiper.min.css"
import moment from "moment";
import wx from 'weixin-js-sdk';
let timer = null;
export default {
name: "advertising",
data() {
return {
arrowShow: true,
flag: false,
currentTime: moment().format('YYYY-MM-DDTHH:mm'),
startTime: moment('2022-01-27 23:59:00').format('YYYY-MM-DDTHH:mm'),//YYYY-MM-DDTHH:mm 2020-08-24T08:00:00+08:00
countDownTime: '',
list: {
companyImg: require('../../assets/img/first.png'),
creditorsArr: [
{
id: 0,
text: '1、XXXXXXXXX有限公司。成立时间2026年11月4日。'
},
{
id: 1,
text: '2、债权本金384.64万元，利息613.53万元（基准日2021年12月1日），债权总额合计998.18万元。'
},
{
id: 2,
text: '3、XXXXXXXXXXXXXXXXXXXX。'
},
{
id: 3,
text: '4、XXXXXXXXXXXXXXXX。'
},
],
collateral: [
{
id: 0,
text: '1、XXXXXXXXXXXXXXXXXXXX。'
},
{
id: 1,
text: '2、XXXXXXXXXXXXXXXXXXX。'
},
{
id: 2,
type: 'img',
text: require('../../assets/img/map.png')
},
],
environmentArr: [
{
id: 0,
text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。',
img: require('../../assets/img/huanjing1.png')
},
{
id: 1,
text: 'XXXXXXXXXXXXX。',
type: 'right',
img: require('../../assets/img/huanjing2.png')
},
{
id: 2,
text: '小区XXXXXXXXXXXXX。',
img: require('../../assets/img/huanjing3.png')
},
],
deptArr: [
{
id: 0,
img: require('../../assets/img/panjue1.png')
},
{
id: 1,
img: require('../../assets/img/panjue2.png')
},
{
id: 2,
img: require('../../assets/img/panjue3.png')
},
{
id: 3,
img: require('../../assets/img/panjue4.png')
},
]
}
}
},
methods: {
countDown: function () {
// console.log(this.startTime);
const seconds = moment(this.startTime).diff(new Date, 'seconds');
let timeObj = {}
if (seconds <= 0) {
clearInterval(timer);
this.flag = true
console.log('eeeeeeeee')
timeObj = {
dayTime: '00',
hourTime: '00',
minTime: '00',
secTime: '00'
}
return timeObj
}
const second = seconds % 60;
const minutes = (seconds - second) / 60;
const minute = minutes % 60;
const hours = (minutes - minute) / 60;
const hour = hours % 24;
const day = (hours - hour) / 24;
const res = day + '天' + hour + '小时 ' + minute + '分钟 ' + second + '秒 ';
// console.log(res);
timeObj = {
dayTime: day.toString().length > 1 ? day : '0' + day,
hourTime: hour.toString().length > 1 ? hour : '0' + hour,
minTime: minute.toString().length > 1 ? minute : '0' + minute,
secTime: second.toString().length > 1 ? second : '0' + second
}
// console.log(timeObj)
return timeObj;
},
startTimeFun() {
console.log(this.currentTime);
console.log(this.startTime)
const _this = this;
clearInterval(timer);
timer = setInterval(() => {
_this.countDownTime = _this.countDown();
}, 1000);
},
toShare() {
console.log('初始化中...')
// let config = {
// timestamp: '',
// nonceStr: '',
// signature: '',
// }
let url = encodeURIComponent(window.location.href.split('#')[0])
this.$http.get('XXXXXXXXXXXXX?url=' + url).then(res => {
if (res.status == 200) {
wx.config({
debug: false,//开启调试模式
appId: 'XXXXXXXXXXXXXX',//必填，公众号唯一标识
timestamp: res.data.timestamp,//必填，生成签名的时间戳
nonceStr: res.data.nonceStr,//必填，生成签名的随机串
signature: res.data.signature,//必填，签名
jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage']// 所有要调用的 API 都要加到这个列表中
});
//然后 调用wxShare方法
if (wx.updateAppMessageShareData) {
wx.updateAppMessageShareData({
title: "债权推介：XXXXXXXXXXXX项目", // 分享标题
desc: "XXXXXX\n" + "抵押物估值：XXXX万\n" + "预估处置收益：XXXX%", // 分享描述
link: 'https://xxxxxx/#/advertising', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:"https://www.XXXXX/img/first.4fd742e1.png", // 分享图标
success: function () {
// alert("updateAppMessageShareData成功");
},
cancel: function () {
// alert("updateAppMessageShareData失败");
},
});
} else {
wx.onMenuShareAppMessage({
title: "债权推介：XXXXXX", // 分享标题
desc: "XXXXX住宅\n" + "抵押物估值：XXXXX万\n" + "预估处置收益：XXXXX%", // 分享描述
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: "https://CCCCCCCCC/img/first.4fd742e1.png", // 分享图标
success: function () {
// alert("成功");
},
cancel: function () {
// alert("失败");
},
});
}
});
wx.error(function (res) {
// alert('error 验证失败', res);
});
}
})
}
},
created() {
this.$nextTick(function () {
const mySwiper = new Swiper(".swiper-container", {
loop: false, // 循环模式选项
// speed: 500,
direction: "vertical",
onInit: (swiper) => {
swiperAni.swiperAnimateCache(swiper) // 隐藏动画元素
swiperAni.swiperAnimate(swiper) // 初始化完成开始动画
},
onSlideChangeEnd: (swiper) => {
swiperAni.swiperAnimate(swiper) // 每个slide开始切换时也运行当前slide动画
// swiper.slides.eq(this.activeIndex).find(".ani").removeClass("ani") // 动画只展现一次，去除ani类名
}
})
})
this.startTimeFun();
this.toShare();
}
}
</script>
<style scoped lang="scss">
@import url('../../lib/animate.min.css');
/*
自定义动画
*/
@import url('../../lib/customAnimation.css');
.paging-icon:before {
margin-top: -3px;
border-color: hsla(0, 0%, 100%, .3);
}
.paging-icon:after, .paging-icon:before {
content: "";
width: 7px;
height: 7px;
-webkit-box-shadow: 2px -2px 1px 2px rgb(0 0 0 / 8%);
box-shadow: 2px -2px 1px 2px rgb(0 0 0 / 8%);
border-color: #fff;
border-style: solid;
border-width: 4px 4px 0 0;
-webkit-transform: rotate(
-45deg);
transform: rotate(
-45deg);
}
.paging-icon:after, .paging-icon:before {
content: "";
width: 7px;
height: 7px;
-webkit-box-shadow: 2px -2px 1px 2px rgb(0 0 0 / 8%);
box-shadow: 2px -2px 1px 2px rgb(0 0 0 / 8%);
border-color: #fff;
border-style: solid;
border-width: 4px 4px 0 0;
-webkit-transform: rotate(
-45deg);
transform: rotate(
-45deg);
}
.paging-icon {
position: fixed;
left: 53%;
bottom: 32px;
margin-left: -25px;
z-index: 4;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 20px;
height: 20px;
-webkit-animation: slide-next-page 1.5s linear infinite;
animation: slide-next-page 1.5s linear infinite;
cursor: pointer;
}
@-webkit-keyframes slide-next-page {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
opacity: .2;
//-webkit-transform-origin: 84% 50%;
//transform-origin: 84% 50%;
}
100% {
-webkit-transform: scale(1.25) translateX(0px);
transform: scale(1.25) translateX(0px);
opacity: 1;
//-webkit-transform-origin: right;
//transform-origin: right;
}
}
.ani {
color: #fff;
}
.main {
width: 100vw;
height: 100vh;
.swiper-container {
//background-color: #009971;
height: 100vh;
.swiper-slide {
height: 100vh;
.swiper-slide-content {
width: 100vw;
height: 100vh;
text-align: center;
}
.first-content-bk-color {
background-color: #65A2DB;
.first_section {
padding: .32rem;
height: 100vh;
flex-direction: column;
display: flex;
justify-content: space-around;
.first-title {
margin-top: .1rem;
}
.white {
color: #fff;
font-size: .4rem;
letter-spacing: .1rem;
padding: .05rem 0rem;
}
.first_arrow {
display: flex;
justify-content: center;
color: #fff;
padding: .2rem;
}
/*活动结束*/
.active-end-box {
color: #fff;
font-size: .3rem;
text-align: center;
display: flex;
justify-content: center;
.border-box {
display: flex;
align-items: center;
.border {
height: 1px;
width: 2rem;
background: #fff;
}
.active-end-text {
padding: .2rem;
}
}
}
.time-box {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: .5rem;
.number-style {
width: .6rem;
height: .6rem;
background: #fff;
display: block;
line-height: .6rem;
border-radius: .15rem;
color: #e4b77e;
font-weight: 600;
font-size: .4rem;
}
.chinese-text {
color: #fff;
padding: 0rem .3rem;
}
}
.first_img {
width: 100%;
height: 4rem;
padding: 0.1rem;
background: #fff;
img {
width: 100%;
height: 100%;
}
}
.first-content {
//margin-top: .5rem;
&-flexbox {
display: flex;
justify-content: space-around;
padding-left: 16px;
&-font {
font-size: .3rem;
color: #ffff;
margin-top: .3rem;
text-align: left;
width: 100%;
}
&-number {
margin-top: .2rem;
font-size: .3rem;
font-weight: 600;
color: rgb(228, 183, 126);
text-align: center;
}
}
}
}
}
.second-content-bk-color {
//opacity: .3;
background: url("../../assets/img/first.png") no-repeat center center;
position: relative;
z-index: -1;
background-size: cover;
.second-content-bk-color-opacity {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
opacity: .8;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #fff;
}
.second-section {
padding: .3rem;
width: 100%;
height: 100%;
position: absolute;
z-index: 9;
&-content {
width: 100%;
height: 100%;
padding: .16rem;
background: #fff;
&-color {
width: 100%;
height: 100%;
background: #65A2DB;
padding: .3rem;
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-around;
.title-text {
font-size: .5rem;
color: rgb(255, 217, 156);
}
.welcome-text {
font-size: .5rem;
color: #fff;
}
.content-english {
margin-top: .2rem;
font-size: .26rem;
font-family: "SourceHanSerifSC-Regular-subset11", "Source Han Serif SC-subset11", "SourceHanSerifSC-Regular", "Source Han Serif SC", Arial, SimSun, Sans-Serif;
}
/*
图标
*/
.second_arrow {
display: flex;
justify-content: center;
color: #fff;
padding: .2rem;
}
.content-content-ul {
margin-top: .3rem;
font-size: .3rem;
text-align: left;
line-height: .5rem;
.content-li-top {
margin-top: .6rem;
.map-img-box {
width: 100%;
height: 4rem;
img {
width: 100%;
height: 100%;
}
}
}
}
.left-right-box {
display: flex;
justify-content: space-between;
line-height: .35rem;
align-items: center;
.left-content-box {
flex: 1;
.left-content {
width: 2.8rem;
height: 2.6rem;
position: relative;
//background: url("../../assets/img/huanjing1.png") no-repeat center center;
.environment-img {
padding: .1rem;
}
img {
width: 100%;
height: 100%;
position: absolute;
}
}
}
.right-content {
flex: 1;
font-size: .28rem;
text-align: left;
padding-left: .3rem;
}
}
/*债权判决书*/
.dept-box-img {
margin-top: 2rem;
position: relative;
display: flex;
justify-content: space-between;
width: 100%;
height: 5rem;
word-break: break-all;
word-wrap: break-word;
flex-wrap: wrap;
.dept-for-div {
width: 48%;
height: 58%;
position: relative;
margin-bottom: .2rem;
img {
position: absolute;
width: 100%;
height: 100%;
}
}
}
/*联系我们*/
.wechat-img {
height: 5rem;
width: 100%;
background: #fff;
padding: .1rem;
//display: flex;
//justify-content: center;
//align-items: center;
.img-center-box {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
.linkman-box {
display: flex;
justify-content: center;
align-items: center;
margin: .3rem 0rem;
img {
width: 100%;
height: .3rem;
}
.linkman-text {
color: rgb(242, 220, 191);
font-size: .3rem;
padding: 0rem .2rem;
}
}
.link-name {
color: #f2dcbf;
font-size: 0.3rem;
}
}
}
.last-section-content {
padding: 0rem;
}
}
}
}
}
}
</style>
animate.js 链接
链接: https://pan.baidu.com/s/1lxCRMfwL6cEake_3wlP3Sw?pwd=ygz6 提取码: ygz6 复制这段内容后打开百度网盘手机App，操作更方便哦
类似资料：