.connectedWifi { width: 100%; height: 100%; display: flex; flex-flow: column; padding: 30rpx 30rpx 0; box-sizing: border-box; background-color: #FFFFFF; } .setWifi { width: 100%; height: 100%; padding: 30rpx 10rpx 0; box-sizing: border-box; } .setWifi-title { color: #252535; width: 100%; height: 48rpx; font-size: 48rpx; font-weight: bold; line-height: 48rpx; margin-bottom: 48rpx; } .setWifi-form { width: 100%; margin-bottom: 64rpx; } .setWifi-form>view { width: 100%; height: 96rpx; display: flex; flex-wrap: nowrap; align-items: center; padding: 0 24rpx; box-sizing: border-box; border-radius: 16rpx; background-color: #F6F6F6; } .setWifi-form>view:first-of-type { margin-bottom: 32rpx; } .setWifi-form>view>view:nth-of-type(1) { color: #252535; width: 100rpx; height: 96rpx; line-height: 96rpx; font-size: 32rpx; font-weight: bold; } .setWifi-form>view:first-of-type>view:nth-of-type(1) { padding: 24rpx 45rpx 24rpx 7rpx; box-sizing: border-box; display: flex; align-items: center; } .setWifi-form>view>view:nth-of-type(2) { color: #252535; flex: 1; width: 0; height: 96rpx; font-size: 32rpx; line-height: 96rpx; } .setWifi-form>view>view:nth-of-type(2) input { color: #252535; width: 100%; height: 96rpx; font-size: 32rpx; line-height: 96rpx; } .placeholderClass { color: #B6B6B6; height: 96rpx; font-size: 32rpx; line-height: 96rpx; } .setWifi-form>view>view:nth-of-type(3) { width: 56rpx; height: 56rpx; } .setWifi-btn { width: 100%; height: 88rpx; padding: 0 15rpx; display: flex; flex-wrap: nowrap; justify-content: space-between; box-sizing: border-box; } .setWifi-btn>view { color: #FFFFFF; width: 300rpx; height: 88rpx; font-size: 32rpx; font-weight: bold; text-align: center; border-radius: 44rpx; line-height: 84rpx; box-sizing: border-box; background-color: #1385FA; border: 2rpx solid #1385FA; &:first-of-type { 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; } } } .status-dot { width: 12rpx; height: 12rpx; border-radius: 50%; margin-right: 14rpx; flex-shrink: 0; &--green { background-color: #2AC79F; } &--red { background-color: #F24439; } &--gray { background-color: #999999; } } .status-text { height: 28rpx; font-size: 28rpx; font-weight: 500; line-height: 28rpx; &--green { color: #2AC79F; } &--red { color: #F24439; } &--gray { color: #999999; } } /* 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; } .arrow { &::after { right: 4rpx; } } /* 列表项:普通态 */ .wifiItem { width: 100%; height: 80rpx; display: flex; flex-wrap: nowrap; align-items: center; margin-bottom: 32rpx; /* 左侧 wifi 图标容器 */ >view:nth-of-type(1) { width: 80rpx; height: 80rpx; margin-right: 24rpx; flex-shrink: 0; display: flex; align-items: center; justify-content: center; image { width: 100%; height: 100%; } } /* WiFi 名称 */ >text { flex: 1; color: #252535; height: 32rpx; font-size: 32rpx; font-weight: 500; line-height: 32rpx; } /* 右箭头 */ >view:nth-of-type(2) { width: 20rpx; height: 18rpx; } } /* 列表项:已连接态 */ .wifiItem-connected { >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: 20rpx; height: 18rpx; } } } /* 列表态底部「确认」按钮:贴底 */ .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; margin-bottom: 40rpx; border-radius: 16rpx; background-color: #F5F8FF; } >text { color: #1385FA; font-size: 36rpx; font-weight: bold; line-height: 36rpx; margin-top: 8rpx; } }