caimei-applets-caimei/h5/pages/other/brand.vue

<template>
	<view class="container clearfix" >
		<view class="banner" :style="{paddingBottom :isIphoneX ? '120rpx' : '60rpx'}" v-if="isBannerHome">
			<image class="banner-img" :src="item" mode="" v-for="(item,index) in image1" :key="index"></image>
		</view>	
		<view class="banner" :style="{paddingBottom :isIphoneX ? '120rpx' : '60rpx'}" v-if="isBannerOems">
			<image class="banner-img" :src="item" mode="" v-for="(item,index) in image2" :key="index"></image>
		</view>	
		<view class="banner three" :style="{paddingBottom :isIphoneX ? '120rpx' : '60rpx'}" v-if="isBannerOhtr">
			<image :src="banner" mode=""></image>
		</view>	
		<view class="container-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '34rpx'}">
			<view class="btn" @click="NavToH5Page">申请维修</view>
		</view>
	</view>
</template> 

<script>
	import { mapState,mapMutations} from 'vuex';
	
	export default{
		data(){
			return{
				isIphoneX:this.$store.state.isIphoneX,
				isBannerHome:true,
				isBannerOems:false,
				isBannerOhtr:false,
				banner:'https://img.caimei365.com/group1/M00/03/82/Cmis214EJ4KANeefABcT34GgAI8964.jpg',
				image1:[
					'https://www.caimei365.com//img/investment/h5_1.jpg',
					'https://www.caimei365.com//img/investment/h5_2.jpg',
					'https://www.caimei365.com//img/investment/h5_3.jpg'
				],
				image2:[
					'https://www.caimei365.com//img/investment/h5_4.jpg',
					'https://www.caimei365.com//img/investment/h5_5.jpg'
				]
			}
		},
		onLoad(option) {
			
		},
		methods:{
			NavToH5Page() {//跳转H5超皮秒防伪查询
				 this.$api.navigateTo(`/h5/pages/article/page?linkType=101`)
			}
		},
		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;
			bottom: 0;
			left: 0;
			z-index: 999;
			.btn{
				width: 100%;
				height: 100%;
				background-image: $btn-confirm;
				line-height: 84rpx;
				border-radius: 42rpx;
				text-align: center;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
		.banner{
			width: 702rpx;
			height: auto;
			float: left;
			padding: 0 24rpx;
			image{
				width: 100%;
				height: auto;
				display: block;
			}
		}
	}
</style>