6170设备控制页面,滑块显示值
This commit is contained in:
9
App.vue
9
App.vue
@ -34,15 +34,6 @@
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
uni-slider .uni-slider-value {
|
||||
position: absolute;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 32rpx;
|
||||
right: 2.5%;
|
||||
top: -60rpx
|
||||
}
|
||||
|
||||
.custom-file-picker .file-picker__box-content {
|
||||
background: rgba(26, 26, 26, 1);
|
||||
border: none !important;
|
||||
|
@ -52,13 +52,14 @@
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">灯光亮度</text>
|
||||
<text class="info-value status-running">%</text>
|
||||
<text class="info-value status-running">{{sliderValue}}%</text>
|
||||
</view>
|
||||
|
||||
<!-- 灯光亮度控制 -->
|
||||
<view class="control-card">
|
||||
<slider :value="sliderValue" min="0" max="100" activeColor="rgb(187, 230, 0)"
|
||||
backgroundColor="rgb(26, 26, 26)" show-value />
|
||||
backgroundColor="rgb(26, 26, 26)" :show-value="false" @changing="onSliderChanging"
|
||||
@change="onSliderChanging" />
|
||||
</view>
|
||||
|
||||
<!-- 灯光模式选择 -->
|
||||
@ -248,25 +249,9 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async initMQTT() {
|
||||
try {
|
||||
if (!isMQTTConnected()) {
|
||||
await connectMQTT()
|
||||
}
|
||||
await publishMessage('/test/123/456/set', 'Hello MQTT!')
|
||||
uni.showToast({
|
||||
title: '消息发送成功'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('发送失败:', error)
|
||||
uni.showToast({
|
||||
title: '发送失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
onSliderChanging(e) {
|
||||
this.sliderValue = e.detail.value;
|
||||
},
|
||||
|
||||
|
||||
selectMode(type) {
|
||||
this.modeType = type;
|
||||
this.lightModeA = true;
|
||||
|
Reference in New Issue
Block a user