safetyHome_wxapp/pages/openDoor/openDoor.vue

<!-- 一键开门 -->
<template>
	<view class="">
		<image src="../../static/history_top_bgimage@2x.png" style="width: 100%;height: 278rpx;"></image>
		<view class="main">
			<view class="item">
				<view class="leftIcon">
					<image src="../../static/open_icon@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="" style="position: absolute;left: 100rpx;">
					<view class="name">花园小区</view>
					<view class="dec">
						1号楼 2单元 602
					</view>
				</view>
				<view class="rightIcon">
					<image src="../../static/open_icon_key@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="item">
				<view class="leftIcon">
					<image src="../../static/open_icon@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="" style="position: absolute;left: 100rpx;">
					<view class="name">花园小区</view>
					<view class="dec">
						1号楼 2单元 602
					</view>
				</view>
				<view class="rightIcon">
					<image src="../../static/open_icon_key@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="item">
				<view class="leftIcon">
					<image src="../../static/open_icon@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="" style="position: absolute;left: 100rpx;">
					<view class="name">花园小区</view>
					<view class="dec">
						1号楼 2单元 602
					</view>
				</view>
				<view class="rightIcon">
					<image src="../../static/open_icon_key@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="item">
				<view class="leftIcon">
					<image src="../../static/open_icon@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="" style="position: absolute;left: 100rpx;">
					<view class="name">花园小区</view>
					<view class="dec">
						1号楼 2单元 602
					</view>
				</view>
				<view class="rightIcon">
					<image src="../../static/open_icon_key@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="item">
				<view class="leftIcon">
					<image src="../../static/open_icon@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="" style="position: absolute;left: 100rpx;">
					<view class="name">花园小区</view>
					<view class="dec">
						1号楼 2单元 602
					</view>
				</view>
				<view class="rightIcon">
					<image src="../../static/open_icon_key@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="item">
				<view class="leftIcon">
					<image src="../../static/open_icon@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="" style="position: absolute;left: 100rpx;">
					<view class="name">花园小区</view>
					<view class="dec">
						1号楼 2单元 602
					</view>
				</view>
				<view class="rightIcon">
					<image src="../../static/open_icon_key@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="item">
				<view class="leftIcon">
					<image src="../../static/open_icon@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="" style="position: absolute;left: 100rpx;">
					<view class="name">花园小区</view>
					<view class="dec">
						1号楼 2单元 602
					</view>
				</view>
				<view class="rightIcon">
					<image src="../../static/open_icon_key@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="item">
				<view class="leftIcon">
					<image src="../../static/open_icon@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="" style="position: absolute;left: 100rpx;">
					<view class="name">花园小区</view>
					<view class="dec">
						1号楼 2单元 602
					</view>
				</view>
				<view class="rightIcon">
					<image src="../../static/open_icon_key@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
		</view>
		<!-- 解锁记录按钮 -->
		<button class="btn" @tap="seeList">解锁记录</button>
	</view>
</template>

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

			}
		},
	methods:{
		// 查看解锁记录
		 seeList(){
			 uni.navigateTo({
			 	url:"./openDoorList"
			 })
		 }
	}
	}
</script>

<style scoped>
	.btn{
		width:702rpx;
		height:90rpx;
		background:rgba(41,138,253,1);
		opacity:1;
		border-radius:18rpx;
		position: fixed;
		bottom: 56rpx;
		left: 24rpx;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(255,255,255,1);
	}
	.dec{
		width:244rpx;
		height:40rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		margin-top: 12rpx;
	}
	.name{
		width:132rpx;
		height:44rpx;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(41,138,253,1);
		margin-top: 38rpx;
	}
	.item{
		width: 702rpx;
		height: 170rpx;
		border-bottom:2px solid rgba(247,247,247,1); ;
		margin: 0 auto;
		display: flex;
		position: relative;
	}
	.leftIcon{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 24rpx;
		bottom: 60rpx;
	}
	.rightIcon{
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		right: 24rpx;
		bottom: 44rpx;
	}
	.main{
		width: 100%;
		position: absolute;
		top: 0rpx;
	}
</style>