epc/pages/mobile/homePage.vue

<template>
	<view class="box">
		<!-- 自定义导航 -->
		<view class="zdyNavBox">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="zdyNav">
				<div @click="goback" class="uni-page-head-btn"><i class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 27px;"></i></div>
				
				<view class="zdyNavTitle">车型件</view>
				<view class="zdyNavRight"></view>
				
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>


		<view class="mainBox">
			<!-- 轮播图 -->
			<swiper class="swiper" :circular="true" :indicator-dots="true" indicator-active-color="#FF4F00">
				<swiper-item v-for="(item,index) in bannerArr">
				
					<image :src="item" mode="" class="swpImg"></image>
					
					</image>
					
				</swiper-item>
				
			</swiper>
			
			<view class="btnBox">
				<image @click="goIndex()" class="searchBtn" src="../../static/img/button_search.png" mode=""></image>
				<view @click="goSelectCarModel()" class="brand">选择品牌</view>
			</view>
			
			<image class="title" src="../../static/img/text_zhongjian.png" mode=""></image>
			
			<image class="content" src="../../static/img/text_shuoming.png" mode=""></image>
			
			
		</view>


	</view>
</template>

<script>
	import searchBox from '@/components/searchBox/searchBox.vue'
	export default {
		components: {
			searchBox
		
		},
		data() {
			return {
				iStatusBarHeight: '',
				bannerArr:['../../static/img/home_banner1.png','../../static/img/home_banner2.png','../../static/img/home_banner3.png'],
				searchValue: '',
				
			}
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;

		},
		methods: {
			search(val) {
				// console.log(val);
				this.searchValue = val
			
			},
			goIndex() {
				uni.navigateTo({
					url: 'index'
				})
			},
			goSelectCarModel(){
				uni.navigateTo({
					url: 'SelectCarModel'
				})
			},
			
			goback() {
				console.log('返回');
				// uni.navigateBack({})
				//app交互
				var standalone = window.navigator.standalone
				var userAgent = window.navigator.userAgent.toLowerCase()
				var safari = /safari/.test(userAgent)
				var ios = /iphone|ipod|ipad|mac/.test(userAgent)
				var android = /android/.test(userAgent)
				if (ios) {
								 if ( true) {//!standalone&& !safari
								   window.webkit.messageHandlers.goMyNav.postMessage(null)
								 }
				} else if (android) {
								 window.android.postMessage()
				}
			},
		}
	}
</script>

<style>
	.box {
		min-height: 100vh;
		background: #ffffff;
		/* iOS 底部安全区 */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.zdyNavBox {
		width: 100vw;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;

	}

	.zdyNav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14rpx 6rpx;
	}

	
	.zdyNavTitle {
		background: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.zdyNavRight {
		background: #FFFFFF;
		text-align: center;
		font-size: 28rpx;
		color: #3F90F7;
		width: 54rpx;
	}

	

	.mainBox {
		background: #FFFFFF;
		min-height: 100vh;
		width: 100vw;
	}

	.swiper,
	.swiper-item,
	.swpImg {
		width: 100%;
		height: 390rpx;
		
	}
	.btnBox{
		padding: 30rpx 24rpx;
		width: 100%;
		height: 92rpx;
		position: relative;
	}
	.searchBtn{
		width: calc(100vw - 48rpx);
		height: 92rpx;
	}
	.brand{
		color: #FFFFFF;
		font-size: 28rpx;
		width: 160rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #F4F5F7 linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
		border-radius: 51rpx;
		text-align: center;
		position: absolute;
		top: 38rpx;
		right: 80rpx;
	}
	.centerBox{
		margin-top: 140rpx;
		margin-bottom: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.title{
		padding: 142rpx 116rpx 100rpx;
		width: calc(100vw - 232rpx);
		height: 40rpx;
	}
	.content{
		padding: 0 47rpx;
		width: calc(100vw - 94rpx);
		height: 224rpx;
	}
</style>