safetyHome_wxapp/pages/mine/myHouse.vue

<!-- 我的房屋 -->
<template>
	<view class="">
		<view class="item">
			<view class="content">
				<view class="city">
					<view style="height: 100%;display: flex;">
						<image src="../../static/house_icon_location@2x.png" style="width: 40rpx;height:40rpx;margin-right: 18rpx;"></image>
						<view class="text">山东 临沂</view>
					</view>
					<view class="delete">
						删除
					</view>
				</view>
				<view class="address">
					<image src="../../static/house_icon_house@2x.png" style="width: 40rpx;height:40rpx;margin-right: 18rpx;" ></image>
					<view class="text">后花园小区 11号楼 02单元 801</view>
				</view>
			</view>
		</view>
		<!-- 添加房屋信息 -->
		<view class="btn">添加房屋信息</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		}
	}
</script>

<style>
	.btn{
		width:702rpx;
		height:90rpx;
		background:rgba(41,138,253,1);
		opacity:1;
		border-radius:18rpx;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		line-height:90rpx;
		color:rgba(255,255,255,1);
		text-align: center;
		position: absolute;
		bottom: 56rpx;
		left: 26rpx;
	}
	.address{
		height: 40rpx;
		margin-top:42rpx ;
		margin-bottom: 20rpx;
		display: flex;
	}
	
	.delete{
		width:44rpx;
		height:32rpx;
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(41,138,253,1);
	}
	.item{
		width:702rpx;
		height:164rpx;
		background:rgba(249,252,255,1);
		opacity:1;
		margin: 0 auto;
		margin-top: 40rpx;
		overflow: hidden;
	}
	.content{
		width: 622rpx;
		margin: 0 auto;
	}
	.city{
		width: 100%;
		height: 40rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 26rpx;
	}
	.text{
		width:136rpx;
		height:40rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:bold;
		line-height:40rpx;
		color:rgba(41,138,253,1);
	}
	.address .text{
		width: 400rpx;
		height:36rpx;
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	
</style>