safetyHome_wxapp/pages/mine/mine.vue

<template>
	<view>
		<view class="topBox">
			<image src="../../static/login_bgground@2x.png" style="width: 100%;height: 100%;"></image>
			<view class="headPhoto" @tap="seeMyInfo">
				<image src="../../static/login_bgground@2x.png" style="width: 122rpx;height: 122rpx;border-radius: 50%;margin:18rpx;"></image>
			</view>
			<view class="name">
				星河
			</view>
			<view class="phone">15825252525</view>
			<!-- 车辆数 -->
			<view class="carBox" @tap="seeMyCar">
				<view class="leftCar">
					<view class="num">10</view>
					<view class="text">轿车辆数</view>
				</view>
				<view class="rightCar">
					<view class="num" style="width: 134rpx;">1</view>
					<view class="text" style="width: 134rpx;">电动车辆数</view>
				</view>
			</view>
		</view>
		<!-- 菜单栏 -->
		<view class="main">
			<view class="item" @tap="seeMyhouse">
				<view class="leftIcon">
					<image src="../../static/my_icon_house@2x.png" style="width: 38rpx;height: 40rpx;"></image>
				</view>
				<view style="display: flex;justify-content: space-between;margin-left: 32rpx;width: 100%;margin-top: 48rpx;">
					<view class="title">我的房屋</view>
						<image src="../../static/icon_more@2x.png" style="width:15rpx ;height: 28rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
			<view class="item" @tap="visitorInfo">
				<view class="leftIcon">
					<image src="../../static/my_icon_information@2x.png" style="width:40rpx;height:35rpx;margin-top: 5rpx;"></image>
				</view>
				<view style="display: flex;justify-content: space-between;margin-left: 32rpx;width: 100%;margin-top: 48rpx;">
					<view class="title">访客信息</view>
						<image src="../../static/icon_more@2x.png" style="width:15rpx ;height: 28rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
			<view class="item" @tap="changeFace">
				<view class="leftIcon">
					<image src="../../static/my_icon_formwork@2x.png" style="width: 38rpx;height: 40rpx;"></image>
				</view>
				<view style="display: flex;justify-content: space-between;margin-left: 32rpx;width: 100%;margin-top: 48rpx;">
					<view class="title">人脸模板</view>
						<image src="../../static/icon_more@2x.png" style="width:15rpx ;height: 28rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
			<view class="item" @tap="seeMyFamily">
				<view class="leftIcon">
					<image src="../../static/my_icon_family@2x.png" style="width: 38rpx;height: 40rpx;"></image>
				</view>
				<view style="display: flex;justify-content: space-between;margin-left: 32rpx;width: 100%;margin-top: 48rpx;">
					<view class="title">我的家人</view>
						<image src="../../static/icon_more@2x.png" style="width:15rpx ;height: 28rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
			<view class="item" @tap="seeMyMessage">
				<view class="leftIcon">
					<image src="../../static/myMessage.png" style="width: 38rpx;height: 40rpx;"></image>
				</view>
				<view style="display: flex;justify-content: space-between;margin-left: 32rpx;width: 100%;margin-top: 48rpx;">
					<view class="title">我的消息</view>
						<image src="../../static/icon_more@2x.png" style="width:15rpx ;height: 28rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			// 访客信息
			visitorInfo(){
				uni.navigateTo({
					url:"../visitor/historyList"
				})
			},
			// 查看个人资料
			seeMyInfo(){
				uni.navigateTo({
					url:"myInfo"
				})
			},
			// 查看我的汽车
			seeMyCar(){
				uni.navigateTo({
					url:"myCar"
				})
			},
			// 查看我的房屋
			seeMyhouse(){
				uni.navigateTo({
					url:"myHouse"
				})
			},
			//更换人脸模板
			changeFace(){
				uni.navigateTo({
					url:"./face"
				})
			},
			// 查看我的家人
			seeMyFamily(){
				uni.navigateTo({
					url:"./family"
				})
			},
			// 查看我的消息
			seeMyMessage(){
				uni.navigateTo({
					url:"./message"
				})
			}
				
		}
	}
</script>

<style>
	.leftIcon{
		width:38rpx;
		height:40rpx;
		margin-top: 48rpx;
	}
		
	.item{
		width: 650rpx;
		height: 140rpx;
		margin: 0 auto;
		border-bottom:2rpx solid rgba(245,245,245,1);
		display: flex;
		
	}
	.main{
		width: 100%;
		margin-top: 50rpx;
		overflow: hidden;
	}
	.carBox{
		width:650rpx;
		height:170rpx;
		background:rgba(255,255,255,1);
		box-shadow:0rpx 6rpx 20rpx rgba(0,0,0,0.12);
		opacity:1;
		border-radius:86rpx;
		position: absolute;
		left: 50rpx;
		bottom: -54rpx;
		display: flex;
	}
	.leftCar{
		width: 218rpx;
		height: 90rpx;
		margin-left: 108rpx;
		border-right:2px solid rgba(247,247,247,1); ;
		margin-top: 40rpx;
	}
	.rightCar{
		height: 90rpx;
			margin-top: 40rpx;
			margin-left: 96rpx;
	}
	.num{
		width: 108rpx;
		height:44rpx;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		text-align: center;
	line-height: 44rpx;
	}
	.text{
		height:36rpx;
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.name{
		height: 50rpx;
		font-size:36rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(255,255,255,1);
		position: absolute;
		bottom: 216rpx;
		left: 220rpx;
		
	}
	.phone{
		width:168rpx;
		height:34rpx;
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(255,255,255,1);
		position: absolute;
		bottom: 176rpx;
		left: 220rpx;
	}
		
	.topBox{
		width: 100%;
		height: 430rpx;
		position: relative;
	}
	.headPhoto{
		width:160rpx;
		height:160rpx;
		border:2rpx solid rgba(255,255,255,1);
		border-radius:50%;
		opacity:1;
		position: absolute;
		left: 50rpx;
		bottom: 142rpx;
		background:#000000;
	}
</style>