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

<template>
	<view class="container clearfix" >
		<view class="banner" :style="{paddingBottom :isIphoneX ? '120rpx' : '60rpx'}" v-if="isBannerHome">
			<image :class="'banner-img'+index" :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-imgs'+(index+1)" :src="item" mode="" v-for="(item,index) in image2" :key="index"></image>
		</view>	
		<view class="container-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '34rpx'}">
			<view class="btn" @click="NavToH5Page(1)">
				<view class="btn-text small">BRAND OEM SERVICE</view>
				<view class="btn-text">品牌OEM服务</view>
			</view>
			<view class="btn" @click="NavToH5Page(2)" v-if="isBannerHome">
				<view class="btn-text small">KNOW MORE ABOUT CAIMEI365</view>
				<view class="btn-text">查看更多</view>
			</view>
			<view class="btn" @click="NavToH5Page(3)" v-if="isBannerOems">
				<view class="btn-text">BACK</view>
				<view class="btn-text">返回首页</view>
			</view>
		</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,
				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'
				],
				isScrollTop:false
			} 
		},
		onLoad(option) {
			
		},
		methods:{
			NavToH5Page(index) {//跳转H5超皮秒防伪查询
				switch(index){
					case 1:
						let path ='https://static.caimei365.com/app/caimei-activity-h5/html/2020/caimeih5_99.html'
						this.$api.navigateTo(`/pages/h5/activity/activity?link=${path}&title=品牌OEM服务`)
						break;
					case 2:
						this.isBannerHome = false
						this.isBannerOems = true
						break;
					case 3:
						this.isBannerHome = true
						this.isBannerOems = false
						break;
				}
			}
		},
		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;
			.banner-img0{
				width: 100%;
				height: 1817rpx;
				display: block;
			}
			.banner-img1{
				width: 100%;
				height: 2677rpx;
				display: block;
			}
			.banner-img2{
				width: 100%;
				height: 1678rpx;
				display: block;
			}
			.banner-imgs1{
				width: 100%;
				height: 2403rpx;
				display: block;
			}
			.banner-imgs2{
				width: 100%;
				height: 1077rpx;
				display: block;
			}
			.banner-img4{
				width: 100%;
				height: 2500rpx;
				display: block;
			}
		}
	}
</style>