caimei-applets-mcare/pages/h5/other/attestation.vue

<template>
	<view class="container clearfix" >
		<view class="banner">
			<image :class="'image_list image'+index" :src="item" mode="widthFix" v-for="(item,index) in list" :key="index"></image>
		</view>	
		<!-- 侧边 -->
		<scroll-top :isScrollTop="isScrollTop" :bottom="300"></scroll-top>
	</view>
</template> 

<script>
	import { mapState,mapMutations} from 'vuex'
	
	export default{
		data(){
			return{
				isIphoneX:this.$store.state.isIphoneX,
				isBannerHome:true,
				isBannerOems:false,
				list:[
					'https://static.caimei365.com/www/ppzs/attestation_01.jpg',
					'https://static.caimei365.com/www/ppzs/attestation_02.jpg',
					'https://static.caimei365.com/www/ppzs/attestation_03.jpg',
					'https://static.caimei365.com/www/ppzs/attestation_04.jpg',
					'https://static.caimei365.com/www/ppzs/attestation_05.jpg',
					'https://static.caimei365.com/www/ppzs/attestation_06.jpg',
					'https://static.caimei365.com/www/ppzs/attestation_07.jpg',
				],
				isScrollTop:false
			} 
		},
		onLoad(option) {
			
		},
		methods:{
			
		},
		onPageScroll(e){//实时获取到滚动的值
			if(e.scrollTop>400){
				this.isScrollTop = true
			}else{
				this.isScrollTop = false
			}	
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.container{
		width: 100%;
		height: auto;
		.container-btn{
			width: 100%;
			box-sizing: border-box;
			padding: 7rpx 24rpx;
			background-color: #FFFFFF;
			position: fixed;
			display: flex;
			bottom: 0;
			left: 0;
			z-index: 999;
			.btn{
				flex: 1;
				background-image: linear-gradient(270deg, #1045e1 0%, #2bb4ff 100%);
				line-height: 84rpx;
				border-radius: 42rpx;
				text-align: center;
				font-size: 26rpx;
				color: #FFFFFF;
				padding: 13rpx;
				box-sizing:border-box;
				margin: 0 10rpx;
				.btn-text{
					width: 100%;
					height: 29rpx;
					float: left;
					line-height: 29rpx;
					font-size: $font-size-24;
					color: #FFFFFF;
					text-align: center;
					&.small{
						font-size: 18rpx;
					}
				}
			}
		}
		.banner{
			width: 100%;
			height: auto;
			float: left;
			.image_list{
				width: 100%;
				display: block;
				// &.image0{
				// 	height: 340rpx;
				// }
				// &.image1{
				// 	height: 1089rpx;
				// }
				// &.image2{
				// 	height: 699rpx;
				// }
				// &.image3{
				// 	height: 655rpx;
				// }
				// &.image4{
				// 	height: 1389rpx;
				// }
				// &.image5{
				// 	height: 2049rpx;
				// }
				// &.image6{
				// 	height: 600rpx;
				// }
			}
		}
	}
</style>