fix:已连接网络模块结构样式完成

This commit is contained in:
2026-06-01 17:09:14 +08:00
parent 7a00c1bb1f
commit b5e7e72104

View File

@@ -185,6 +185,7 @@ const handleRetry = () => {
} }
}; };
// 页面挂载后启动 WiFi 扫描流程。
onMounted(() => { onMounted(() => {
startScanning(); startScanning();
}); });
@@ -213,7 +214,9 @@ onUnmounted(() => {
<image src="../static/ota/wifi1.png" mode="aspectFit" style="width: 194rpx; height: 164rpx;" /> <image src="../static/ota/wifi1.png" mode="aspectFit" style="width: 194rpx; height: 164rpx;" />
</view> </view>
<text class="page-title">{{ currentState === 'CONNECTED' ? '连接成功' : '连接无线网络' }}</text> <text class="page-title" :class="{ 'connected-page-title': currentState === 'CONNECTED' }">
{{ currentState === 'CONNECTED' ? '连接成功' : '连接无线网络' }}
</text>
<text v-if="currentState !== 'CONNECTED'" class="page-subtitle">网络名称仅支持英文字符及数字</text> <text v-if="currentState !== 'CONNECTED'" class="page-subtitle">网络名称仅支持英文字符及数字</text>
<view v-if="isIOS && currentState === 'SCANNING'" class="ios-guide"> <view v-if="isIOS && currentState === 'SCANNING'" class="ios-guide">
@@ -221,14 +224,14 @@ onUnmounted(() => {
</view> </view>
<!-- 已连接网络卡片 --> <!-- 已连接网络卡片 -->
<view v-if="currentState === 'CONNECTED'" class="section-label-row"> <view v-if="currentState === 'CONNECTED'" class="section-label-row connected-section-label-row">
<text class="section-label">连接网络</text> <text class="section-label">连接网络</text>
</view> </view>
<view v-if="currentState === 'CONNECTED'" class="wifi-list-card connected-wifi-card"> <view v-if="currentState === 'CONNECTED'" class="wifi-list-card connected-wifi-card">
<view class="wifi-item connected-wifi-item"> <view class="wifi-item connected-wifi-item">
<image class="check-icon" src="../static/sicon/check.png" mode="aspectFit" /> <image class="check-icon" src="../static/sicon/check.png" mode="aspectFit" />
<text class="wifi-ssid">{{ connectedWifi?.SSID }}</text> <text class="wifi-ssid connected-wifi-ssid">{{ connectedWifi?.SSID }}</text>
<view class="wifi-icons"> <view class="wifi-icons connected-wifi-icons">
<image <image
v-if="connectedWifi?.secure" v-if="connectedWifi?.secure"
class="security-icon" class="security-icon"
@@ -283,8 +286,8 @@ onUnmounted(() => {
</view> </view>
<!-- CONNECTED开始更新按钮 --> <!-- CONNECTED开始更新按钮 -->
<view v-if="currentState === 'CONNECTED'" class="bottom-btn-area"> <view v-if="currentState === 'CONNECTED'" class="bottom-btn-area connected-bottom-btn-area">
<view class="primary-btn" @click="startUpdate"> <view class="primary-btn update-btn" @click="startUpdate">
<text class="primary-btn-text">开始更新</text> <text class="primary-btn-text">开始更新</text>
</view> </view>
</view> </view>
@@ -455,6 +458,9 @@ onUnmounted(() => {
text-align: center; text-align: center;
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
.connected-page-title {
color: #4DD9C8;
}
.page-subtitle { .page-subtitle {
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
font-size: 24rpx; font-size: 24rpx;
@@ -482,6 +488,9 @@ onUnmounted(() => {
margin-bottom: 24rpx; margin-bottom: 24rpx;
padding: 0 22rpx; padding: 0 22rpx;
} }
.connected-section-label-row {
margin-top: 32rpx;
}
.section-label { .section-label {
color: rgba(255, 255, 255, 0.56); color: rgba(255, 255, 255, 0.56);
font-size: 28rpx; font-size: 28rpx;
@@ -494,6 +503,7 @@ onUnmounted(() => {
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.connected-wifi-card { .connected-wifi-card {
background-color: rgba(35, 40, 56, 0.96);
margin-bottom: 44rpx; margin-bottom: 44rpx;
} }
.wifi-item { .wifi-item {
@@ -513,7 +523,8 @@ onUnmounted(() => {
background-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
} }
.connected-wifi-item { .connected-wifi-item {
padding-left: 24rpx; min-height: 88rpx;
padding-left: 28rpx;
} }
.wifi-ssid { .wifi-ssid {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
@@ -521,6 +532,9 @@ onUnmounted(() => {
line-height: 36rpx; line-height: 36rpx;
flex: 1; flex: 1;
} }
.connected-wifi-ssid {
font-weight: 500;
}
.other-text { .other-text {
color: rgba(255, 255, 255, 0.86); color: rgba(255, 255, 255, 0.86);
} }
@@ -530,6 +544,9 @@ onUnmounted(() => {
gap: 12rpx; gap: 12rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.connected-wifi-icons {
gap: 14rpx;
}
.check-icon { .check-icon {
width: 28rpx; width: 28rpx;
height: 24rpx; height: 24rpx;
@@ -550,6 +567,11 @@ onUnmounted(() => {
.bottom-btn-area { .bottom-btn-area {
margin-top: 24rpx; margin-top: 24rpx;
} }
.connected-bottom-btn-area {
display: flex;
justify-content: center;
margin-top: 20rpx;
}
.primary-btn { .primary-btn {
background-color: rgba(254, 216, 71, 1); background-color: rgba(254, 216, 71, 1);
@@ -559,6 +581,9 @@ onUnmounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.update-btn {
width: 412rpx;
}
.primary-btn-text { .primary-btn-text {
color: rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 1);
font-size: 30rpx; font-size: 30rpx;