fix:已连接网络模块结构样式完成
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user