wangxiaowei/xiuhuwangqiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加篮球套餐功能

Browse Source
This commit is contained in:
wangxiaowei
2026-04-07 16:07:36 +08:00
parent bd461f3e18
commit 8854cdd32d
9 changed files with 1423 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
bundle/setting/light.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<view class="light-setting-container">
<view class="fields">
<view v-for="(field, idx) in fields" :key="field.id" class="field-item">
<view class="field-name">{{ field.name }}</view>
<view class="status" :class="{on: field.isOn, off: !field.isOn}">
{{ field.isOn ? '已开启' : '已关闭' }}
</view>
<button
class="toggle-btn"
:class="{on: field.isOn, off: !field.isOn}"
@click="toggleLight(idx)"
>
{{ field.isOn ? '关灯' : '开灯' }}
</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
fields: [
{ id: 1, name: '场地1', isOn: false },
{ id: 2, name: '场地2', isOn: false },
{ id: 3, name: '场地3', isOn: false },
{ id: 4, name: '场地4', isOn: false },
{ id: 5, name: '场地5', isOn: false },
{ id: 6, name: '场地6', isOn: false },
],
};
},
methods: {
toggleLight(idx) {
this.fields[idx].isOn = !this.fields[idx].isOn;
},
},
};
</script>
<style scoped>
.light-setting-container {
padding: 32rpx 24rpx;
background: #f7f9fc;
min-height: 100vh;
}
.title {
font-size: 40rpx;
font-weight: bold;
color: #365A9A;
margin-bottom: 40rpx;
text-align: center;
}
.fields {
display: flex;
flex-direction: column;
gap: 32rpx;
}
.field-item {
background: #fff;
border-radius: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(54,90,154,0.08);
padding: 32rpx 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.field-name {
font-size: 32rpx;
color: #365A9A;
font-weight: 500;
}
.status {
font-size: 28rpx;
margin: 0 24rpx;
padding: 4rpx 20rpx;
border-radius: 24rpx;
background: #e3eaf6;
color: #365A9A;
transition: background 0.2s, color 0.2s;
}
.status.on {
background: #365A9A;
color: #fff;
}
.status.off {
background: #e3eaf6;
color: #365A9A;
}
.toggle-btn {
min-width: 180rpx;
font-size: 28rpx;
border: none;
border-radius: 24rpx;
padding: 8rpx 0;
color: #fff;
background: #365A9A;
transition: background 0.2s;
}
.toggle-btn.on {
background: #e74c3c;
}
.toggle-btn.off {
background: #365A9A;
}
</style>