wxml代码
<view class="{{isChecked?'kitchen_card':'kitchen_cardTwo'}}" wx:for="{{details_list}}" wx:for-item="item" wx:key="">
<text class="{{isChecked?'temp':'tempTwo'}}">{{item.temperature}}℃</text>
<van-icon name="setting-o" color="#aaa" custom-style="margin-top:24rpx;margin-left:158rpx;" bindtap="Equipment_details"/>
<view class="{{isChecked?'btn':'btntwo'}}" bindtap="btnClick">
<view wx:if="{{testtrue}}">打开</view>
<view wx:else>关闭</view>
</view>
<view class="{{isChecked?'name':'nameTwo'}}">{{item.name}}</view>
<view class="online_icon">
<image src="{{isChecked?online_src:offline}}" mode="scaleToFill" class="online_img"></image>
</view>
<view class="{{isChecked?'model':'modelTwo'}}">{{item.model}}</view>
<view class="{{isChecked?'block':'blockTwo'}}"></view>
</view>
wxss代码
.kitchen_card {
width: 316rpx;
height: 344rpx;
background: rgba(51, 51, 51, 1);
border-radius: 16rpx;
margin-left: 36rpx;
margin-top:6rpx;
float: left;
box-shadow: 0rpx -2rpx 1rpx 0rpx #aaa,
-2rpx 0rpx 1rpx 0rpx #aaa,
2rpx 0rpx 1rpx 0rpx #aaa,
0rpx 2rpx 1rpx 0rpx #aaa;
}
.kitchen_cardTwo{
width: 316rpx;
height: 344rpx;
background: rgba(255, 255, 255, 1);
border-radius: 16rpx;
margin-left: 36rpx;
margin-top:6rpx;
float: left;
box-shadow: 0rpx -2rpx 1rpx 0rpx #aaa,
-2rpx 0rpx 1rpx 0rpx #aaa,
2rpx 0rpx 1rpx 0rpx #aaa,
0rpx 2rpx 1rpx 0rpx #aaa;
}
.temp {
color: #fff;
margin-left: 32rpx;
margin-top: 24rpx;
float: left;
}
.tempTwo{
color: #333;
margin-left: 32rpx;
margin-top: 24rpx;
float: left;
}
.name {
color: #fff;
margin-left: 32rpx;
font-size: 28rpx;
}
.nameTwo{
color: #333;
margin-left: 32rpx;
font-size: 28rpx;
}
.btn {
display: block;
width: 172rpx;
height: 64rpx;
background: rgba(255, 255, 255, 1);
border-radius: 32rpx;
margin-top: 24rpx;
margin-left: 32rpx;
text-align: center;
line-height: 64rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular;
margin-bottom: 16rpx;
color: #000;
}
.btntwo {
display: block;
width: 172rpx;
height: 64rpx;
background: rgba(51, 51, 51, 1);
border-radius: 32rpx;
margin-top: 28rpx;
margin-left: 32rpx;
text-align: center;
line-height: 64rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular;
margin-bottom: 16rpx;
color: #fff;
}
.model {
font-size: 22rpx;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 32rpx;
margin-left: 32rpx;
}
.modelTwo{
font-size: 22rpx;
font-family: PingFangSC-Regular;
font-weight: 400;
color: #333;
line-height: 32rpx;
margin-left: 32rpx;
}
.block {
width: 78rpx;
height: 4rpx;
background: rgba(255, 255, 255, 1);
margin-left: 206rpx;
margin-top: 14rpx;
}
.blockTwo{
width: 78rpx;
height: 4rpx;
background:#333;
margin-left: 206rpx;
margin-top: 14rpx;
}
.online_icon {
width: 80rpx;
height: 80rpx;
margin-left: 120rpx;
margin-top: -60rpx;
}
.online_img {
width: 100%;
height: 100%;
}
js代码
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
checked: true,
details_list: "",
src: "../../images/add_btn.png",
online_src: "../../images/online.png",
offline: "../../images/offline.png",
testtrue: true,
isChecked: true,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
btnClick: function() {
var isShow = this.data.testtrue;
var ischeckedshow = this.data.isChecked;
this.setData({
testtrue: !isShow,
isChecked: !ischeckedshow
})
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
addPage: function() {
wx.navigateTo({
url: '../add/add'
})
},
Equipment_details:function(){
wx.navigateTo({
url: '../Equipment_details/Equipment_details',
})
},
onChange(event) {
// 需要手动对 checked 状态进行更新
this.setData({
checked: event.detail
});
},
onLoad: function() {}
})