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

<template>
	<view class="container clearfix" >
		<view class="banner" :style="{paddingBottom :isIphoneX ? '120rpx' : '60rpx'}">
			<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,
				banner:'https://static.caimei365.com/app/img/bg/icon-weixiu.jpg',
			}
		},
		onLoad(option) {
			
		},
		methods:{
			NavToH5Page() {//跳转H5超皮秒防伪查询
				 this.$api.navigateTo(`/pages/h5/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: 1386rpx;
			float: left;
			padding: 0 24rpx;
			image{
				width: 100%;
				height: 1386rpx;
				display: block;
			}
		}
	}
</style>