[AI Generated]: feat(Views): 新增连接WiFi页五态状态机及密码连接交互

2026-05-12 09:36:55 +08:00
parent b744f20537
commit 3b4a5e1b0d
3 changed files with 411 additions and 22 deletions
@@ -3,13 +3,15 @@
    height: 100%;
 	display: flex;
 	flex-flow: column;
+    padding: 30rpx 30rpx 0;
+    box-sizing: border-box;
    background-color: #FFFFFF;
 }

 .setWifi {
    width: 100%;
    height: 100%;
-    padding: 60rpx 40rpx 0;
+    padding: 30rpx 10rpx 0;
    box-sizing: border-box;
 }

@@ -116,4 +118,261 @@
        color: #1385FA;
        background-color: #FFFFFF;
    }
-}
+}
+
+/* 顶部已连接设备卡 */
+.deviceCard {
+    width: 100%;
+    height: 150rpx;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding: 30rpx;
+    box-sizing: border-box;
+    border: 2rpx solid #E6E6EA;
+    border-radius: 16rpx;
+    background-color: #FFFFFF;
+	margin-bottom: 46rpx;
+
+    /* 设备图标占位 */
+    >view:nth-of-type(1) {
+        width: 90rpx;
+        height: 90rpx;
+        overflow: hidden;
+        margin-right: 24rpx;
+        border-radius: 24rpx;
+        background-color: red;
+        flex-shrink: 0;
+    }
+
+    /* 右侧信息 */
+    >view:nth-of-type(2) {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        /* 设备名 */
+        >view:nth-of-type(1) {
+            color: #252535;
+            height: 32rpx;
+            font-size: 32rpx;
+            font-weight: bold;
+            line-height: 32rpx;
+            margin-bottom: 16rpx;
+        }
+
+        /* 状态行 */
+        >view:nth-of-type(2) {
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+
+            >view {
+                width: 12rpx;
+                height: 12rpx;
+                border-radius: 50%;
+                margin-right: 14rpx;
+                background-color: #2AC79F;
+            }
+
+            >text {
+                color: #2AC79F;
+                height: 28rpx;
+                font-size: 28rpx;
+                font-weight: 500;
+                line-height: 28rpx;
+            }
+        }
+    }
+}
+
+/* idle / searching 两态:居中文案 */
+.wifiIdle,
+.wifiSearching {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #B6B6B6;
+    font-size: 32rpx;
+    line-height: 32rpx;
+}
+
+/* 附近WiFi 标题区:title 行 + 副标题 */
+.wifiHeader {
+    width: 100%;
+    padding: 0 12rpx;
+    box-sizing: border-box;
+
+    /* 标题行:附近WiFi + 可选「刷新」 */
+    >view:nth-of-type(1) {
+        width: 100%;
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 24rpx;
+
+        >view:nth-of-type(1) {
+            color: #252535;
+            height: 36rpx;
+            font-size: 36rpx;
+            font-weight: bold;
+            line-height: 36rpx;
+        }
+
+        >view:nth-of-type(2) {
+            color: #1385FA;
+            height: 36rpx;
+            font-size: 28rpx;
+            font-weight: 500;
+            line-height: 36rpx;
+        }
+    }
+
+    /* 副标题 */
+    >view:nth-of-type(2) {
+        color: #B6B6B6;
+        height: 30rpx;
+        font-size: 28rpx;
+        line-height: 30rpx;
+        margin-bottom: 32rpx;
+    }
+}
+
+/* WiFi 列表:scroll-view Y 轴滚动,撑满剩余高度 */
+.wifiList {
+    width: 100%;
+    flex: 1;
+    min-height: 0;
+    padding: 0 12rpx;
+    box-sizing: border-box;
+}
+
+/* 列表项:普通态 */
+.wifiItem {
+    width: 100%;
+    height: 80rpx;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    margin-bottom: 32rpx;
+
+    /* 左侧灰底圆形图标占位 */
+    >view:nth-of-type(1) {
+        width: 80rpx;
+        height: 80rpx;
+        overflow: hidden;
+        margin-right: 24rpx;
+        border-radius: 50%;
+        background-color: #F7F7F7;
+        flex-shrink: 0;
+    }
+
+    /* WiFi 名称 */
+    >text {
+        flex: 1;
+        color: #252535;
+        height: 32rpx;
+        font-size: 32rpx;
+        font-weight: 500;
+        line-height: 32rpx;
+    }
+
+    /* 右箭头 */
+    >view:nth-of-type(2) {
+        width: 10rpx;
+        height: 18rpx;
+        background-color: #B6B6B6;
+        flex-shrink: 0;
+    }
+}
+
+/* 列表项:已连接态 */
+.wifiItem-connected {
+    /* 左侧图标不加底色圆,保留图标自身颜色 */
+    >view:nth-of-type(1) {
+        background-color: transparent;
+    }
+
+    >text {
+        color: #1385FA;
+    }
+
+    /* 右侧「已连接」+ 勾 */
+    >view:nth-of-type(2) {
+        width: auto;
+        height: auto;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        background-color: transparent;
+
+        >text {
+            color: #2AC79F;
+            font-size: 24rpx;
+            font-weight: 500;
+            line-height: 24rpx;
+            margin-right: 5rpx;
+        }
+
+        >view {
+            width: 24rpx;
+            height: 24rpx;
+            border-radius: 50%;
+            background-color: #2AC79F;
+        }
+    }
+}
+
+/* 列表态底部「确认」按钮:贴底 */
+.wifiBtn {
+    width: 100%;
+	height: 120rpx;
+    display: flex;
+	align-items: center;
+    justify-content: center;
+
+    >view {
+        color: #FFFFFF;
+        width: 580rpx;
+        height: 88rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        text-align: center;
+        line-height: 88rpx;
+        border-radius: 44rpx;
+        background-color: #1385FA;
+    }
+
+    .wifiBtn-disabled {
+        background-color: #A8C9F0;
+    }
+}
+
+/* 空态 */
+.wifiEmpty {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 39rpx 42rpx 0;
+    box-sizing: border-box;
+
+    >view {
+        width: 566rpx;
+        height: 499rpx;
+        border-radius: 16rpx;
+        background-color: #F5F8FF;
+    }
+
+    >text {
+        color: #1385FA;
+        font-size: 36rpx;
+        font-weight: bold;
+        line-height: 36rpx;
+        margin-top: 8rpx;
+    }
+}