AiToyCXWx/pagesMy/deviceAdd.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='添加新设备' bgColor='transparent'></cus-header>
		<image class="topbg" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/bee1dc02-6981-4104-bcd8-e491976d364a.png" mode="widthFix"></image>
		<div class="icons adfacjb">
			<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/9f8a6a1a-9fb9-4cd9-9521-33ab9b531a21.png"></image>
			<image class="next" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/5af3029d-96e7-456b-b402-7e4e89fb590c.png"></image>
			<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/b87c8a61-ceb7-41b5-aea2-569be4b9828f.png"></image>
			<image class="next" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/5af3029d-96e7-456b-b402-7e4e89fb590c.png"></image>
			<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/123abb26-3207-4abc-8c55-87261026421f.png"></image>
		</div>
		<div class="tip">请确认玩具已开机，点击下方开始配网</div>
		<div class="memo adfacjb" @tap="showSetMemo">
			<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/c1361464-f71e-4071-ba24-85e254c0be96.png"></image>
			<text>配置网络说明</text>
		</div>
		<div class="steps">
			<div class="item">
				<div class="yuan"></div>
				<p>首次开机设备将会自动进入配网模式</p>
			</div>
			<div class="item">
				<div class="yuan"></div>
				<p>选择<span>"xiaozhi"</span>Wi-Fi热点，连接成功</p>
			</div>
			<div class="item">
				<div class="yuan"></div>
				<p>选择网络，输入Wi-Fi密码，设备配网成功</p>
			</div>
			<div class="item">
				<div class="yuan"></div>
				<p>扫描设备或说明书上的二维码，绑定设备成功</p>
			</div>
		</div>
		<div class="zt_btn" @tap="startWiFi">开始配网</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		},
		methods:{
			startWiFi(){
				uni.navigateTo({
					url:'/pagesMy/wifi'
				})
			},
			showSetMemo(){
				uni.navigateTo({
					url:'/pagesHome/wifiSetMemo1'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #FFFFFF;
		padding: 0 60rpx 160rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.topbg{
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
		}
		
		.icons{
			width: 100%;
			position: relative;
			margin-top: 57rpx;
			image{
				width: 56rpx;
				height: 56rpx;
				&.next{
					width: 80rpx;
					height: 14rpx;
				}
			}
		}
		.tip{
			position: relative;
			margin-top: 260rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #7C8592;
			line-height: 37rpx;
			text-align: center;
		}
		.memo{
			width: 250rpx;
			position: relative;
			margin-top: 36rpx;
			background: rgba(27,80,255,0.06);
			border-radius: 28rpx;
			padding: 10rpx 29rpx;
			box-sizing: border-box;
			image{
				width: 26rpx;
				height: 26rpx;
			}
			text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #1B50FF;
				line-height: 37rpx;
				margin-left: 10rpx;
			}
		}
		.steps{
			margin-top: 219rpx;
			margin-left: 16rpx;
			border-left: 1rpx solid #E2E2E2;
			padding-left: 30rpx;
			.item{
				margin-top: 58rpx;
				position: relative;
				&:first-child{
					margin-top: 0;
				}
				.yuan{
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					border: 2rpx solid #C7C7C7;
					background: #FFFFFF;
					box-shadow: 0 0 4rpx 4rpx #FFFFFF;
					position: absolute;
					left: -48rpx;
					top: 50%;
					margin-top: -16rpx;
				}
				p{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #7C8592;
					line-height: 37rpx;
					span{
						font-weight: bold;
						color: #111111;
					}
				}
			}
		}
		.zt_btn{
			margin-top: 149rpx;
		}
	}
</style>