[AI Generated]: feat(Views): 完善连接设备页交互逻辑、波纹动画及中心图标样式
This commit is contained in:
17792275749
Generated
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ClaudeCodeTabState">
|
||||
<option name="tabCount" value="2" />
|
||||
</component>
|
||||
</project>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
@@ -5,12 +5,64 @@
|
||||
padding: 48rpx 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* 三层同心圆波纹动画 */
|
||||
.ripple {
|
||||
position: relative;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 48rpx;
|
||||
background-color: red;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* 波纹圆环 */
|
||||
.ripple-ring {
|
||||
position: absolute;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #1385FA;
|
||||
animation: ripple-expand 2.4s ease-out infinite;
|
||||
}
|
||||
|
||||
.ripple-ring--delay1 {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.ripple-ring--delay2 {
|
||||
animation-delay: 1.6s;
|
||||
}
|
||||
|
||||
/* 中心实心圆 + 图标 */
|
||||
.ripple-core {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background-color: #1385FA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple-expand {
|
||||
0% {
|
||||
transform: scale(0.46);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -157,7 +209,7 @@
|
||||
overflow: hidden;
|
||||
border-radius: 24rpx;
|
||||
margin-right: 24rpx;
|
||||
background-color: red;
|
||||
background-color: rgba(19, 133, 250, 0.1);
|
||||
}
|
||||
|
||||
.card-info {
|
||||
@@ -225,198 +277,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 三层同心圆动画占位(搜索中态后续接入波纹动画) */
|
||||
//.ripple {
|
||||
|
||||
///* 主按钮:开始搜索 / 重新搜索 */
|
||||
//.searchBtn {
|
||||
// margin-top: 40rpx;
|
||||
// width: 580rpx;
|
||||
// height: 88rpx;
|
||||
// line-height: 88rpx;
|
||||
// border-radius: 44rpx;
|
||||
// background-color: #1385FA;
|
||||
// color: #FFFFFF;
|
||||
// font-size: 32rpx;
|
||||
// font-weight: 700;
|
||||
// text-align: center;
|
||||
//}
|
||||
//
|
||||
///* 帮助行 */
|
||||
//
|
||||
///* 搜索结果区:左标题 + 右计数 */
|
||||
//.resultHeader {
|
||||
// margin-top: 59rpx;
|
||||
// width: 689rpx;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
//
|
||||
// &__title {
|
||||
// font-size: 32rpx;
|
||||
// font-weight: 700;
|
||||
// color: #252535;
|
||||
// line-height: 32rpx;
|
||||
// }
|
||||
//
|
||||
// &__count {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// }
|
||||
//
|
||||
// &__countText {
|
||||
// font-size: 28rpx;
|
||||
// color: #808080;
|
||||
// line-height: 28rpx;
|
||||
// }
|
||||
//
|
||||
// &__countNum {
|
||||
// font-size: 28rpx;
|
||||
// font-weight: 500;
|
||||
// color: #1385FA;
|
||||
// line-height: 28rpx;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* 空状态:暂未搜索到设备 */
|
||||
//.empty {
|
||||
// margin-top: 199rpx;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
//
|
||||
// &__image {
|
||||
// width: 193rpx;
|
||||
// height: 138rpx;
|
||||
// background-color: #F5F5F5;
|
||||
// border-radius: 16rpx;
|
||||
// }
|
||||
//
|
||||
// &__text {
|
||||
// margin-top: 40rpx;
|
||||
// font-size: 30rpx;
|
||||
// color: #808080;
|
||||
// line-height: 30rpx;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* 已连接设备卡片 */
|
||||
//.connectedCard {
|
||||
// margin-top: 39rpx;
|
||||
// width: 690rpx;
|
||||
// height: 150rpx;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// background-color: #FFFFFF;
|
||||
// border: 2rpx solid #E6E6EA;
|
||||
// border-radius: 16rpx;
|
||||
// box-sizing: border-box;
|
||||
// padding: 0 30rpx;
|
||||
//
|
||||
// &__info {
|
||||
// flex: 1;
|
||||
// margin-left: 24rpx;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: center;
|
||||
// }
|
||||
//
|
||||
// &__name {
|
||||
// font-size: 32rpx;
|
||||
// font-weight: 500;
|
||||
// color: #252535;
|
||||
// line-height: 32rpx;
|
||||
// }
|
||||
//
|
||||
// &__status {
|
||||
// margin-top: 16rpx;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// }
|
||||
//
|
||||
// &__dot {
|
||||
// width: 12rpx;
|
||||
// height: 12rpx;
|
||||
// border-radius: 50%;
|
||||
// background-color: #2AC79F;
|
||||
// margin-right: 15rpx;
|
||||
// }
|
||||
//
|
||||
// &__statusText {
|
||||
// font-size: 28rpx;
|
||||
// font-weight: 500;
|
||||
// color: #2AC79F;
|
||||
// line-height: 28rpx;
|
||||
// }
|
||||
//
|
||||
// &__btn {
|
||||
// width: 120rpx;
|
||||
// height: 48rpx;
|
||||
// line-height: 44rpx;
|
||||
// text-align: center;
|
||||
// border: 2rpx solid #F24439;
|
||||
// border-radius: 8rpx;
|
||||
// color: #F24439;
|
||||
// font-size: 24rpx;
|
||||
// font-weight: 500;
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* 未连接设备列表 */
|
||||
//.deviceList {
|
||||
// margin-top: 24rpx;
|
||||
// width: 690rpx;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
//}
|
||||
//
|
||||
///* 设备卡片(已连接 + 未连接通用图标样式) */
|
||||
//.deviceCard {
|
||||
// width: 690rpx;
|
||||
// height: 150rpx;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// background-color: #FFFFFF;
|
||||
// border: 2rpx solid #E6E6EA;
|
||||
// border-radius: 16rpx;
|
||||
// box-sizing: border-box;
|
||||
// padding: 0 30rpx;
|
||||
// margin-bottom: 24rpx;
|
||||
//
|
||||
// &__icon {
|
||||
// width: 90rpx;
|
||||
// height: 90rpx;
|
||||
// border-radius: 24rpx;
|
||||
// background-color: rgba(19, 133, 250, 0.1);
|
||||
// flex-shrink: 0;
|
||||
// }
|
||||
//
|
||||
// &__name {
|
||||
// flex: 1;
|
||||
// margin-left: 23rpx;
|
||||
// font-size: 32rpx;
|
||||
// font-weight: 500;
|
||||
// color: #252535;
|
||||
// line-height: 32rpx;
|
||||
// }
|
||||
//
|
||||
// &__btn {
|
||||
// width: 88rpx;
|
||||
// height: 48rpx;
|
||||
// line-height: 48rpx;
|
||||
// text-align: center;
|
||||
// border-radius: 8rpx;
|
||||
// background-color: #2AC79F;
|
||||
// color: #FFFFFF;
|
||||
// font-size: 24rpx;
|
||||
// font-weight: 500;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* 已连接卡片复用 deviceCard__icon 的尺寸 */
|
||||
//.connectedCard .deviceCard__icon {
|
||||
// width: 90rpx;
|
||||
// height: 90rpx;
|
||||
//}
|
||||
|
||||
@@ -47,9 +47,17 @@ Page({
|
||||
lefuService.onConnectState((state) => {
|
||||
const plugin = lefuService['_plugin']
|
||||
if (!plugin) return
|
||||
// 连接成功后跳转配网页
|
||||
if (state === plugin.BLUE_STATE.CONNECTSUCCESS || state === plugin.BLUE_STATE.WIFISUCCESS) {
|
||||
|
||||
if (state === plugin.BLUE_STATE.CONNECTSUCCESS) {
|
||||
// 蓝牙连接成功，存储设备信息后跳配网页
|
||||
const connected = this.data.deviceList.find(d => d.connected)
|
||||
if (connected) {
|
||||
wx.setStorageSync('connectDeviceInfo', { name: connected.name })
|
||||
}
|
||||
wx.navigateTo({ url: '/pages/connectedWifi/connectedWifi' })
|
||||
} else if (state === plugin.BLUE_STATE.WIFISUCCESS) {
|
||||
// 设备已配网，直接进首页
|
||||
wx.reLaunch({ url: '/pages/home/home' })
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
<view class="connected-device">
|
||||
|
||||
<!-- 三层同心圆动画占位 -->
|
||||
<view class="ripple"></view>
|
||||
<!-- 三层同心圆波纹动画 -->
|
||||
<view class="ripple">
|
||||
<view class="ripple-ring"></view>
|
||||
<view class="ripple-ring ripple-ring--delay1"></view>
|
||||
<view class="ripple-ring ripple-ring--delay2"></view>
|
||||
<view class="ripple-core">
|
||||
<image src="/images/connectedDevice/icon.png" mode=""/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 主标题 -->
|
||||
<view class="title">
|
||||
@@ -9,7 +16,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 副标题 -->
|
||||
<view class="sub-title">请确保蓝牙已开启,设备处于待机状态</view>
|
||||
<view class="sub-title">请确保蓝牙已开启，设备处于待机状态</view>
|
||||
|
||||
<!-- 主按钮:idle 显示开始搜索,其他显示重新搜索 -->
|
||||
<view class="search-btn" bind:tap="onStartSearch">
|
||||
@@ -60,10 +67,10 @@
|
||||
</block>
|
||||
</view>
|
||||
<block wx:if="{{ item.connected }}">
|
||||
<view class="card-btn-danger" data-id="{{ item.id }}" bind:tap="onDisconnect">断开连接</view>
|
||||
<view class="card-btn-danger" bind:tap="onDisconnect">断开连接</view>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<view class="card-btn-primary" data-id="{{ item.id }}" bind:tap="onConnect">连接</view>
|
||||
<view class="card-btn-primary" data-index="{{ index }}" bind:tap="onConnect">连接</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
Reference in New Issue
Block a user