AiToyCXWx/pagesMy/deviceAdd.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='开机' bgColor='transparent' :backUrl="'/pages/home'"></cus-header>
		<image class="topbg" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/57d11386-a720-4e76-ac9b-69826e56d83a.png" mode="widthFix"></image>
		<div class="icons adfacjb">
			<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/76406f0b-dba6-4797-a42d-0254e9f06ee6.png"></image>
			<image class="next" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/b4acf520-1d30-4f67-8fa8-fb03de1768cf.png"></image>
			<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/c32524e5-e4f4-4ee9-886c-ec7156c7d019.png"></image>
			<image class="next" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/b4acf520-1d30-4f67-8fa8-fb03de1768cf.png"></image>
			<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/b47cb0c5-7df7-49a1-8d2f-e6362de17a89.png"></image>
		</div>
		<div class="tip">请确认玩具已开机</div>
		<div class="memo adfacjb" @tap="showSetMemo">
			<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/d218058d-3720-461a-8a25-87b5657c1957.png"></image>
			<text>配置网络说明</text>
		</div>
		<div class="steps">
			<div class="s_item">
				<div class="si_top adfac">
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/7942575f-4288-4109-9a55-2a48c526530c.png"></image>
					<div class="sit_title">确认蓝牙权限</div>
				</div>
				<div class="si_tip">请确认手机蓝牙功能打开，并且小程序拥有蓝牙权限</div>
			</div>
			<div class="s_item">
				<div class="si_top adfac">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/b6716138-07a5-42f9-86b3-b9517e64ffe8.png"></image>
					<div class="sit_title">靠近设备</div>
				</div>
				<div class="si_tip">请将手机靠近设备并保持2米以内</div>
			</div>
			<div class="s_item">
				<div class="si_top adfac">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/01707d1d-6a11-4001-9db2-6680f5f2b9c9.png"></image>
					<div class="sit_title">首次开机</div>
				</div>
				<div class="si_tip">首次开机设备将会自动进入配网模式</div>
			</div>
			<div class="s_item">
				<div class="si_top adfac">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/42cb08bf-b7a9-4d54-a1b0-eff9e1afca9d.png"></image>
					<div class="sit_title">重新配网</div>
				</div>
				<div class="si_tip">重新配网请长按M键3秒钟，听到提示音之后进入配网模式</div>
			</div>
		</div>
		<div class="zt_btn" @tap="startWiFi">我已开机</div>
	</view>
</template>

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

<style scoped lang="less">
	.page{
		background: #FFFFFF;
		padding: 0 80rpx 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: 124rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			line-height: 45rpx;
			text-align: center;
		}
		.memo{
			width: 250rpx;
			position: relative;
			margin-top: 34rpx;
			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{
			position: relative;
			margin-top: 53rpx;
			.s_item{
				margin-top: 56rpx;
				.si_top{
					image{
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
					}
					.sit_title{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #111111;
						line-height: 40rpx;
						margin-left: 18rpx;
					}
				}
				.si_tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #7C8592;
					line-height: 33rpx;
					text-align: left;
					margin: 23rpx 0 0 54rpx;
				}
			}
		}
		.zt_btn{
			margin-top: 149rpx;
		}
	}
</style>