|
|
@@ -30,15 +30,18 @@
|
|
|
<view class="control-wrapper">
|
|
|
<view
|
|
|
class="control-button"
|
|
|
- :class="{ 'control-button--active': state.device?.state === 'busy' }"
|
|
|
+ :class="{ 'control-button--active': state.device?.state !== 'idle' }"
|
|
|
@click="debounceStartStopDevice"
|
|
|
>
|
|
|
<view class="button-icon">
|
|
|
- <uv-icon
|
|
|
- :name="state.device?.state==='idle' ? 'play-circle' : 'stop-circle'"
|
|
|
- size="60"
|
|
|
- color="#fff"
|
|
|
- ></uv-icon>
|
|
|
+ <!-- 空闲状态显示播放图标 -->
|
|
|
+ <view v-if="state.device?.state==='idle'" class="icon-play">
|
|
|
+ <uv-icon name="play-circle-fill" size="48" color="#fff"></uv-icon>
|
|
|
+ </view>
|
|
|
+ <!-- 忙碌状态显示停止图标 -->
|
|
|
+ <view v-else class="icon-stop">
|
|
|
+ <uv-icon name="pause-circle-fill" size="48" color="#fff"></uv-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<text class="button-text" v-if="state.device?.state==='idle'">启动设备</text>
|
|
|
<text class="button-text" v-else>停止设备</text>
|
|
|
@@ -446,16 +449,16 @@ const handleGotoRechage = () => {
|
|
|
align-items: center;
|
|
|
|
|
|
.control-button {
|
|
|
- width: 320rpx;
|
|
|
- height: 320rpx;
|
|
|
+ width: 240rpx;
|
|
|
+ height: 240rpx;
|
|
|
border-radius: 50%;
|
|
|
background: linear-gradient(135deg, #C6171E 0%, #E84545 100%);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- gap: 12rpx;
|
|
|
- box-shadow: 0 16rpx 40rpx rgba(198, 23, 30, 0.3);
|
|
|
+ gap: 8rpx;
|
|
|
+ box-shadow: 0 12rpx 32rpx rgba(198, 23, 30, 0.3);
|
|
|
transition: all 0.3s ease;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
@@ -475,7 +478,7 @@ const handleGotoRechage = () => {
|
|
|
|
|
|
&:active {
|
|
|
transform: scale(0.95);
|
|
|
- box-shadow: 0 8rpx 24rpx rgba(198, 23, 30, 0.3);
|
|
|
+ box-shadow: 0 6rpx 20rpx rgba(198, 23, 30, 0.3);
|
|
|
|
|
|
&::before {
|
|
|
transform: scale(1);
|
|
|
@@ -483,26 +486,37 @@ const handleGotoRechage = () => {
|
|
|
}
|
|
|
|
|
|
.button-icon {
|
|
|
- margin-bottom: 8rpx;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .icon-play,
|
|
|
+ .icon-stop {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.button-text {
|
|
|
- font-size: 36rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.button-tip {
|
|
|
- font-size: 22rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
color: rgba(255, 255, 255, 0.85);
|
|
|
}
|
|
|
|
|
|
&.control-button--active {
|
|
|
- background: linear-gradient(135deg, #07C160 0%, #05a050 100%);
|
|
|
- box-shadow: 0 16rpx 40rpx rgba(7, 193, 96, 0.3);
|
|
|
+ background: linear-gradient(135deg, #E84545 0%, #FF6B6B 100%);
|
|
|
+ box-shadow: 0 12rpx 32rpx rgba(232, 69, 69, 0.3);
|
|
|
|
|
|
&:active {
|
|
|
- box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
|
|
|
+ box-shadow: 0 6rpx 20rpx rgba(232, 69, 69, 0.3);
|
|
|
}
|
|
|
}
|
|
|
}
|