标签：.. img -- 100% js height content animate H5
<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 class="linkman-box">-->
<!-- <div>-->
<!-- <img src="@assets/img/leftArrow.png" alt="">-->
<!-- </div>-->
<!-- <div class="linkman-text">-->
<!-- 联系人-->
<!-- </div>-->
<!-- <div>-->
<!-- <img src="@assets/img/rightArrow.png" alt="">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="link-name">-->
<!-- 程琳-->
<!-- </div>-->
<!-- <div class="linkman-box">-->
<!-- <div>-->
<!-- <img src="@assets/img/leftArrow.png" alt="">-->
<!-- </div>-->
<!-- <div class="linkman-text">-->
<!-- 联系电话-->
<!-- </div>-->
<!-- <div>-->
<!-- <img src="@assets/img/rightArrow.png" alt="">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="phone">-->
<!-- <p class="link-name">155954861931</p>-->
<!-- <p class="link-name" style="margin-top: .1rem">(微信同号)</p>-->
<!-- </div>-->
<!-- <div class="linkman-box">-->
<!-- <div>-->
<!-- <img src="@assets/img/leftArrow.png" alt="">-->
<!-- </div>-->
<!-- <div class="linkman-text">-->
<!-- 邮箱地址-->
<!-- </div>-->
<!-- <div>-->
<!-- <img src="@assets/img/rightArrow.png" alt="">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="link-name">-->
<!-- lidike@jinxiu-shanhe.com-->
<!-- </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://www.zhonghelawyer.org.cn/fxh5/#/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，操作更方便哦
标签：..,img,--,100%,js,height,content,animate,H5 来源： https://blog.csdn.net/BowenHero/article/details/122713888
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。