Uni-APP 组件-抽奖轮盘
组件预览
创建commponents/lottery/index.vue 文件
输入如下代码
轮盘抽检组件
<template>
<view class="main">
<view v-if="options.length > 0" class="canvas-container">
<canvas canvas-id="canvas" id="canvas" :style="canvasStyle" />
<canvas canvas-id="canvasBtn" id="canvasBtn" class="canvasBtn" :style="canvasStyle" />
<cover-view @tap="playReward" :class="['canvas-btn', { 'isLottery': isLottery }]"
:style="{ backgroundColor: centerBtnColor }">
{{ centerBtnText }}
</cover-view>
</view>
<view v-else class="empty-tip">
<text>暂无抽奖选项</text>
</view>
<view v-if="showBtn" class="btn-container">
<button type="primary" :disabled="isLottery" @click="playReward">{{ btnTitle }}</button>
</view>
</view>
</template>
<script>
var ctx = null;
export default {
props: {
// 弹窗内容 ，当 turnModalContent=【】时，默认弹窗内容为抽奖结果，并且不展示标题
turnModalContent: {
type: Array,
default: () => []
},
// 减速，值越小，减速效果越明显 turnReduceSpeed
turnReduceSpeed: {
type: Number,
default: 50
},
// 表示转速：表示再转多少圈再进行抽奖
turnCircle: {
type: Number,
default: 0
},
// 画布宽度
width: {
type: Number,
default: 100,
},
// 画布高度
height: {
type: Number,
default: 100
},
// 画布内字体大小
fontSize: {
type: Number,
default: 18
},
// 钩子函数，抽奖开始前执行，返回值为选项列表下标，若返回值为-1，则进行随机抽奖
setWinnerFn: {
type: Function,
default: null,
},
// // 钩子函数，抽奖开始前执行
beforePlay: {
type: Function,
default: null,
},
// // 钩子函数，抽奖结束后执行
afterPlay: {
type: Function,
default: null,
},
// 如果 true，则 使用组件默认的选项数据
isUseDefaultOptions: {
type: Boolean,
default: false
},
// 选项列表
data: {
type: Array,
default: () => []
},
// 是否要展示开始按钮
showBtn: {
type: Boolean,
default: false,
},
// 按钮文本
btnTitle: {
type: String,
default: "开始"
},
// 是否显示结果弹窗
showResultModal: {
type: Boolean,
default: true
},
// 中心按钮文本
centerBtnText: {
type: String,
default: "GO"
},
// 中心按钮颜色
centerBtnColor: {
type: String,
default: "#ffffff"
}
},
data() {
return {
options: [{
id: 1, // 唯一id
name: '水饺', // 名称
// "weight": 50, // 中奖权重，0-100
img: '', // 展示图片
color: "#f6e174" // 轮盘区域底色
},
{
id: 2,
name: '火锅',
img: '',
color: "#94494d"
},
{
id: 3,
name: '川菜',
img: '',
color: "#ffaa7f"
},
{
id: 4,
name: '麻辣烫',
img: '',
color: "#a48342"
},
{
id: 5,
name: '炸鸡汉堡',
img: '',
color: "#a25f81"
},
{
id: 6,
name: '重庆小面',
img: '',
color: "#98e2e2"
},
{
id: 7,
name: '酸辣粉',
img: '',
color: "#aaaa00"
},
{
id: 8,
name: '面条',
img: '',
color: "#648f76"
},
{
id: 9,
name: '汤河粉',
img: '',
color: "#40b3ff"
},
{
id: 10,
name: '猪脚饭',
img: '',
color: "#ffaaff"
},
{
id: 11,
name: '烧鸭饭',
img: '',
color: "#5555ff"
},
{
id: 12,
name: '白切鸡',
img: '',
color: "#ff90cf"
},
{
id: 13,
name: '烧鸡饭',
img: '',
color: "#55aa7f"
},
{
id: 14,
name: '肥肠面',
img: '',
color: "#4f95ff"
},
{
id: 15,
name: '炒饭',
img: '',
color: "#a509aa"
},
{
id: 16,
name: '黄焖鸡米饭',
img: '',
color: "#aaaa00"
},
{
id: 17,
name: '皮蛋瘦肉粥',
img: '',
color: "#ff52d1"
},
{
id: 18,
name: '沙县小吃',
img: '',
color: "#944ade"
},
{
id: 19,
name: '焖锅',
img: '',
color: "#43c900"
},
{
id: 20,
name: '披萨',
img: '',
color: "#7cbaba"
}
],
isLottery: false, // 是否正在抽奖
winnerIndex: -1, // 中奖索引
isInitialized: false // 是否已初始化
};
},
computed: {
canvasStyle() {
return "width:" + this.width + "px;; height:" + this.height + "px;";
},
},
watch: {
// 监听数据变化，重新初始化
data: {
handler(newVal) {
if (newVal && newVal.length > 0 && !this.isUseDefaultOptions) {
this.init();
}
},
deep: true
}
},
methods: {
// 处理文本，根据长度进行截断或调整
processText(text, maxLength) {
if (!text) return '';
// 如果文本长度超过最大长度，截断并添加省略号
if (text.length > maxLength) {
return text.substring(0, maxLength - 2) + '..';
}
return text;
},
// 获取文本显示的字体大小
getTextFontSize(text, baseSize) {
// 根据文本长度动态调整字体大小
if (!text) return baseSize;
if (text.length > 6) {
// 文本较长时，逐步减小字体
const reduction = Math.min(Math.floor(text.length / 2), 8);
return Math.max(baseSize - reduction, 10); // 最小字体为10
}
return baseSize;
},
async playReward() {
if (this.isLottery) {
return
}
let len = this.options.length
if (len == 0) {
console.error("抽奖选项为空，无法开始抽奖");
return;
}
this.isLottery = true
console.log("开始抽奖")
// 触发beforePlay事件
if (this.beforePlay) {
this.beforePlay();
}
this.$emit("beforePlay");
// 获取中奖索引
let num = -1;
// 使用setWinnerFn获取中奖索引
if (this.setWinnerFn && typeof this.setWinnerFn === 'function') {
try {
// 修复调用方式
num = this.setWinnerFn(this.options);
if (num === undefined || num < 0 || num >= len) {
console.warn("setWinnerFn返回的索引无效，将使用随机抽奖");
num = -1;
}
} catch (error) {
console.error("调用setWinnerFn出错:", error);
num = -1;
}
}
if (num < 0) {
// 进行权重抽奖
let optionIndex = this.lotteryWeight(this.options)
if (optionIndex !== undefined && optionIndex >= 0) {
num = optionIndex
} else {
// 没有自动抽奖结果 && 没有定义选项权重，则进行随机数抽奖
num = Math.floor(Math.random() * len)
}
}
this.winnerIndex = num;
try {
const result = await this.roateCanvas(num)
console.log("抽奖结果：", result.name)
this.isLottery = false
// 是否显示结果弹窗
if (this.showResultModal) {
let title = ""
let content = result.name
if (this.turnModalContent.length > 0) {
// 若设置了 content ，则随机取一个 content 内容，并且 title 将展示为抽奖结果
title = result.name
content = this.turnModalContent[Math.floor(Math.random() * this.turnModalContent.length)]
}
uni.showModal({
confirmText: "确定",
showCancel: false,
title: title,
content: content,
success: (res) => {
if (res.confirm) {
console.log('用户点击确定');
// 调用钩子函数
if (this.afterPlay) {
this.afterPlay(result);
}
this.$emit("afterPlay", result)
}
}
})
} else {
// 直接触发afterPlay事件
if (this.afterPlay) {
this.afterPlay(result);
}
this.$emit("afterPlay", result)
}
} catch (error) {
console.error("抽奖过程出错:", error);
this.isLottery = false;
uni.showToast({
title: '抽奖失败，请重试',
icon: 'none'
});
}
},
initBtnCanvas() {
try {
let angleTo = 0
let ctx = uni.createCanvasContext("canvasBtn", this);
// 圆中心点的坐标 x： 宽度的一半
let center_x = this.width / 2;
// 圆中心点的坐标 y： 高度的一半
let center_y = this.height / 2;
// 先清除画布上在该矩形区域内的内容
ctx.clearRect(0, 0, this.width, this.height);
ctx.translate(center_x, center_y);
// 画中心点圆
ctx.beginPath();
ctx.moveTo(0, -50); // 三角形顶点坐标
ctx.lineTo(-20, 10); // 左下角坐标
ctx.lineTo(20, 10); // 右下角坐标
ctx.setFillStyle("#ff0000");
ctx.fill();
ctx.draw();
} catch (error) {
console.error("初始化按钮画布失败:", error);
}
},
initCanvas: function (ctx, angleTo) {
try {
const len = this.options.length; //数组长度
if (len == 0) {
console.warn("options len == 0");
return;
}
if (!angleTo) {
angleTo = 0
}
// 圆中心点的坐标 x： 宽度的一半
let center_x = this.width / 2;
// 圆中心点的坐标 y： 高度的一半
let center_y = this.height / 2;
// 圆的弧度的总度数，2π表示画圆
let totalAngle = 2 * Math.PI;
// 平均一个选项占用的孤度数
let avgAngle = totalAngle / len;
let radius = center_x - 14;
let baseFontSize = this.getFontSize();
// 先清除画布上在该矩形区域内的内容
ctx.clearRect(0, 0, this.width, this.height);
ctx.translate(center_x, center_y);
ctx.setLineWidth(14);
ctx.save();
// 画外圆
ctx.rotate(angleTo * Math.PI / 180);
var beginAngle = 2 * Math.PI / 360 * (-90);
ctx.setStrokeStyle("#ffffff");
ctx.arc(0, 0, radius - 3, 0, Math.PI * 2);
ctx.stroke();
// 划分区域，并且填充颜色
ctx.setLineWidth(0.1);
beginAngle = 2 * Math.PI / 360 * (-90);
//绘制填充形状
for (var i = 0; i < len; i++) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.setStrokeStyle(this.options[i].color);
ctx.setFillStyle(this.options[i].color);
ctx.arc(0, 0, radius, beginAngle, beginAngle + avgAngle, false);
ctx.fill();
ctx.save();
beginAngle = beginAngle + avgAngle;
}
// 绘制选项文字
beginAngle = 0;
for (var i = 0; i < len; i++) {
// 根据奖项数量和文本长度调整文本位置和大小
let textDistance = -(center_x / 2) - 25;
// 奖项过多时，文本更靠近中心
if (len > 10) {
textDistance = -(center_x / 2) - 15;
}
if (len > 15) {
textDistance = -(center_x / 2) - 5;
}
// 处理文本，根据奖项数量决定最大长度
let maxTextLength = len > 12 ? 4 : (len > 8 ? 6 : 8);
let processedText = this.processText(this.options[i].name, maxTextLength);
// 根据文本长度调整字体大小
let fontSize = this.getTextFontSize(processedText, baseFontSize);
//绘制旋转文字
ctx.rotate((beginAngle + (avgAngle * 0.5))); //顺时针旋转
ctx.setTextAlign("center");
ctx.setFillStyle("#FFFFFF");
ctx.setFontSize(fontSize);
ctx.fillText(processedText, 0, textDistance);
ctx.restore();
beginAngle = beginAngle + avgAngle;
}
ctx.save();
// 画中心点圆
ctx.beginPath();
ctx.arc(0, 0, 15, 0, Math.PI * 2); // 15 为中心点圆的半径
ctx.setFillStyle("#FFFFFF");
ctx.fill();
ctx.draw();
this.isInitialized = true;
} catch (error) {
console.error("初始化画布失败:", error);
this.isInitialized = false;
}
},
// 根据设置的权重进行抽奖
lotteryWeight(prizes) {
console.log("进行权重抽奖")
if (!prizes || prizes.length === 0) {
console.log("奖品列表为空")
return -1
}
// 计算总权重和有效奖品
let totalWeight = 0
const validPrizes = []
// 筛选有效奖品并计算总权重
for (let index = 0; index < prizes.length; index++) {
const prize = prizes[index]
const weight = Number(prize.weight)
// 只有权重大于0的奖品才参与抽奖
if (weight && weight > 0) {
totalWeight += weight
validPrizes.push({
index,
weight,
name: prize.name
})
}
}
// 如果没有有效奖品，返回-1表示随机抽奖
if (validPrizes.length === 0 || totalWeight === 0) {
console.log("没有设置有效权重的奖品，将进行随机抽奖")
return -1
}
// 生成0到总权重之间的随机数
const random = Math.random() * totalWeight
console.log("权重抽奖随机数:", random, "总权重:", totalWeight)
// 根据权重区间确定中奖奖品
let accumulatedWeight = 0
for (const prize of validPrizes) {
accumulatedWeight += prize.weight
if (random < accumulatedWeight) {
console.log("权重抽奖奖品 ", prizes[prize.index].name, " 中奖，权重:", prize.weight)
return prize.index
}
}
// 保底返回最后一个有效奖品
console.log("未找到匹配奖品，进行随机抽奖")
return -1
},
// 旋转画布，num 表示选项 options 的下标
roateCanvas(num) {
let len = this.options.length
let angle = 360 / len;
angle = num * angle + angle / 2;
angle = angle || 0;
angle = 360 - angle;
angle += 360 * 5;
if (this.turnCircle > 0) {
let turnCircle = this.turnCircle
// 最多只能转 10 圈
if (turnCircle > 10) {
turnCircle = 10
}
angle += 360 * turnCircle;
}
let that = this;
let count = 1;
// 减速，值越小，减速效果越明显
let turnReduceSpeed = this.turnReduceSpeed
if (turnReduceSpeed == 0) {
turnReduceSpeed = 1
}
let baseStep = turnReduceSpeed;
// 起始滚动速度
let baseSpeed = 1;
let result = {}
return new Promise((resolve, reject) => {
let timer = setInterval(function () {
// console.log("count = "， count);
that.initCanvas(that.ctx, count);
if (count == angle) {
clearInterval(timer);
result = that.options[num];
resolve(result)
}
count = count + baseStep * (((angle - count) / angle) > baseSpeed ? baseSpeed :
((angle -
count) / angle)) + 0.1;
if (angle - count < 0.5) {
count = angle;
}
}, 25);
});
},
getFontSize() {
let fontSize = this.fontSize
if (this.options.length > 10) {
if (this.fontSize >= 18) {
fontSize = this.fontSize - (this.options.length - 10)
}
}
return fontSize
},
// 生成随机颜色
genRandColor() {
// 生成随机的 RGB 值
var r = Math.floor(Math.random() * 256); // 0 到 255 之间的随机数
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
// 将 RGB 值转换为 Hex 颜色表示
var hexColor = "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
return hexColor;
},
componentToHex(c) {
var hex = c.toString(16);
return hex.length === 1 ? "0" + hex : hex;
},
initOptions: function () {
try {
let defaultOptions = JSON.parse(JSON.stringify(this.options)); // 深拷贝默认选项
if (this.isUseDefaultOptions) {
// 使用默认数据
console.log("使用默认选项数据");
} else if (this.data && this.data.length > 0) {
console.log("使用传入的选项数据, 长度:", this.data.length);
this.options = JSON.parse(JSON.stringify(this.data)); // 深拷贝传入数据
} else {
console.warn("未提供有效的选项数据，将使用默认选项");
}
// 所有默认的颜色
let allDefColorArr = defaultOptions.map(item => item.color);
// 找到最大的 id
let maxId = 0;
this.options.forEach(item => {
if (item.id && item.id > maxId) {
maxId = item.id;
}
});
// 填充 id，确保 id 唯一
var existIds = []
for (var i = 0; i < this.options.length; i++) {
let item = this.options[i]
if (item['id'] == undefined || item.id == 0 || existIds.includes(item.id)) {
// id 不存在，或者 id 重复了
maxId++;
this.options[i]['id'] = maxId;
}
existIds.push(this.options[i].id)
}
// 填充颜色，确保颜色唯一
let availableColor = JSON.parse(JSON.stringify(allDefColorArr)) // 可用颜色
let existColor = [] // 存在颜色
// 先收集已有颜色
for (var i = 0; i < this.options.length; i++) {
let item = this.options[i]
if (item['color'] && item.color !== "") {
let color = item.color
existColor.push(color)
// 过滤掉已经用了的 color
availableColor = availableColor.filter(c => c !== color);
}
}
// 为没有颜色的选项分配颜色
for (var i = 0; i < this.options.length; i++) {
let item = this.options[i]
if (!item['color'] || item.color === "") {
if (availableColor.length == 0) {
// 没有可用颜色了，则随机生成一个
let color = '';
for (var j = 0; j < 100; j++) {
if (color !== '') break;
let genColor = this.genRandColor()
if (!existColor.includes(genColor)) {
existColor.push(genColor)
color = genColor
}
}
this.options[i]['color'] = color
} else {
const color = availableColor.shift();
existColor.push(color)
this.options[i].color = color
}
}
}
console.log("选项初始化完成，数量:", this.options.length);
} catch (error) {
console.error("初始化选项失败:", error);
// 确保至少有默认选项
if (!this.options || this.options.length === 0) {
this.options = [{
id: 1,
name: '默认选项',
color: "#f6e174"
}];
}
}
},
init() {
try {
this.initOptions();
this.ctx = uni.createCanvasContext("canvas", this);
this.initCanvas(this.ctx, 0);
this.initBtnCanvas();
} catch (error) {
console.error("初始化组件失败:", error);
uni.showToast({
title: '初始化抽奖组件失败',
icon: 'none'
});
}
}
},
// 初始化画布
mounted: function () {
console.log("lottery mounted init......")
this.init()
}
}
</script>
<style scoped>
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title-container {
font-size: 25px;
margin-top: 120rpx;
margin-bottom: 40rpx;
z-index: 100;
}
.canvas-container {
position: relative;
width: fit-content;
height: fit-content;
}
.canvasBtn {
position: absolute;
top: 0%;
}
.canvas-btn {
position: absolute;
top: 50%;
left: 50%;
background-color: #ffffff;
transform: translate(-50%, -50%);
width: 110rpx;
height: 110rpx;
border-radius: 50%;
line-height: 110rpx;
text-align: center;
font-size: 45rpx;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
text-decoration: none;
}
.canvas-btn.isLottery {
background-color: #CCCCCC;
pointer-events: none;
}
.empty-tip {
padding: 30rpx;
text-align: center;
color: #999;
font-size: 28rpx;
}
.btn-container {
margin-top: 30rpx;
}
</style>测试Demo
<template>
<view class="container">
<view class="title">转盘抽奖组件演示</view>
<!-- 转盘抽奖组件 -->
<lottery ref="lotteryRef" :width="300" :height="300" :fontSize="16" :data="lotteryOptions"
:isUseDefaultOptions="useDefaultOptions" :turnReduceSpeed="reduceSpeed" :turnCircle="circleCount"
:showBtn="true" :btnTitle="'开始抽奖'" :centerBtnText="'GO'" :centerBtnColor="'#ff5252'"
:showResultModal="showModal" :turnModalContent="modalContents" :setWinnerFn="setWinner"
:beforePlay="onBeforePlay" :afterPlay="onAfterPlay" />
<!-- 配置面板 -->
<view class="config-panel">
<view class="panel-title">配置选项</view>
<view class="config-item">
<text>使用默认选项:</text>
<switch :checked="useDefaultOptions" @change="(e) => useDefaultOptions = e.detail.value" />
</view>
<view class="config-item">
<text>减速效果({{ reduceSpeed }}):</text>
<slider :value="reduceSpeed" :min="1" :max="100" :step="1" show-value
@change="(e) => reduceSpeed = e.detail.value" />
</view>
<view class="config-item">
<text>额外旋转圈数({{ circleCount }}):</text>
<slider :value="circleCount" :min="0" :max="10" :step="1" show-value
@change="(e) => circleCount = e.detail.value" />
</view>
<view class="config-item">
<text>显示结果弹窗:</text>
<switch :checked="showModal" @change="(e) => showModal = e.detail.value" />
</view>
<view class="config-item">
<text>指定中奖项:</text>
<picker :value="winnerIndex" :range="winnerOptions" range-key="name" @change="onWinnerChange">
<view class="picker-value">{{ winnerOptions[winnerIndex].name || '随机' }}</view>
</picker>
</view>
<button class="reset-btn" type="default" @click="resetLottery">重置转盘</button>
</view>
<!-- 事件日志 -->
<view class="event-log">
<view class="log-title">事件日志</view>
<scroll-view scroll-y class="log-content">
<view v-for="(log, index) in eventLogs" :key="index" class="log-item">
{{ log }}
</view>
</scroll-view>
<button size="mini" type="default" @click="clearLogs">清空日志</button>
</view>
</view>
</template>
<script>
import Lottery from '@/components/lottery/index.vue'
export default {
// 注册组件
components: {
Lottery
},
data() {
return {
// 转盘选项数据
lotteryOptions: [
{ id: 1, name: '一等奖', weight: 5, color: '#ff4444' },
{ id: 2, name: '二等奖', weight: 10, color: '#ff8800' },
{ id: 3, name: '三等奖', weight: 15, color: '#ffcc00' },
{ id: 4, name: '四等奖', weight: 20, color: '#33cc33' },
{ id: 5, name: '五等奖', weight: 25, color: '#3399ff' },
{ id: 6, name: '谢谢参与', weight: 25, color: '#9966ff' }
],
// 配置选项
useDefaultOptions: false, // 是否使用组件默认选项
reduceSpeed: 50, // 减速效果，值越小减速效果越明显
circleCount: 3, // 额外旋转圈数
showModal: true, // 是否显示结果弹窗
// 弹窗内容配置
modalContents: [
'恭喜您获得了奖品！',
'太棒了！您中奖了！',
'好运连连！'
],
// 指定中奖项配置
forceWinner: false, // 是否强制指定中奖项
winnerIndex: 0, // 指定的中奖项索引
// 事件日志
eventLogs: [],
// 中奖选项列表（用于选择器）
winnerOptions: [
{ index: -1, name: '随机抽取' }
]
};
},
created() {
// 初始化中奖选项列表
this.initWinnerOptions();
},
methods: {
/**
* 初始化中奖选项列表
*/
initWinnerOptions() {
// 先添加随机选项
this.winnerOptions = [{ index: -1, name: '随机抽取' }];
// 添加所有奖品选项
this.lotteryOptions.forEach((item, index) => {
this.winnerOptions.push({
index: index,
name: item.name
});
});
},
/**
* 设置中奖者的钩子函数
* @param {Array} options - 当前抽奖选项列表
* @returns {Number} - 返回中奖索引，-1表示随机抽取
*/
setWinner(options) {
// 记录日志
this.addLog('调用 setWinnerFn 钩子函数');
// 如果强制指定中奖项且索引有效，则返回指定索引
if (this.forceWinner && this.winnerIndex > 0) {
const selectedIndex = this.winnerOptions[this.winnerIndex].index;
this.addLog(`指定中奖项: ${options[selectedIndex].name}`);
return selectedIndex;
}
// 返回-1表示随机抽取
this.addLog('未指定中奖项，将随机抽取');
return -1;
},
/**
* 抽奖开始前的钩子函数
*/
onBeforePlay() {
this.addLog('抽奖开始');
},
/**
* 抽奖结束后的钩子函数
* @param {Object} result - 抽奖结果
*/
onAfterPlay(result) {
this.addLog(`抽奖结束，结果: ${result.name}`);
},
/**
* 重置转盘
*/
resetLottery() {
// 重新初始化转盘
this.$refs.lotteryRef.init();
this.addLog('转盘已重置');
},
/**
* 添加日志
* @param {String} message - 日志消息
*/
addLog(message) {
const now = new Date();
const timeStr = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
this.eventLogs.unshift(`[${timeStr}] ${message}`);
},
/**
* 清空日志
*/
clearLogs() {
this.eventLogs = [];
},
/**
* 中奖项选择变更
*/
onWinnerChange(e) {
this.winnerIndex = e.detail.value;
this.forceWinner = this.winnerIndex > 0;
if (this.forceWinner) {
const selectedIndex = this.winnerOptions[this.winnerIndex].index;
this.addLog(`已设置指定中奖项: ${this.lotteryOptions[selectedIndex].name}`);
} else {
this.addLog('已设置为随机抽取');
}
}
}
}
</script>
<style>
.container {
padding: 20rpx;
}
.title {
font-size: 36rpx;
font-weight: bold;
text-align: center;
margin-bottom: 30rpx;
}
.config-panel {
margin-top: 40rpx;
padding: 20rpx;
border-radius: 10rpx;
background-color: #f8f8f8;
}
.panel-title,
.log-title {
font-size: 30rpx;
font-weight: bold;
margin-bottom: 20rpx;
border-bottom: 1px solid #eee;
padding-bottom: 10rpx;
}
.config-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.picker-value {
padding: 10rpx 20rpx;
background-color: #fff;
border-radius: 6rpx;
min-width: 200rpx;
text-align: center;
}
.reset-btn {
margin: 20rpx 0;
}
.event-log {
margin-top: 40rpx;
padding: 20rpx;
border-radius: 10rpx;
background-color: #f8f8f8;
}
.log-content {
height: 300rpx;
background-color: #fff;
padding: 10rpx;
border-radius: 6rpx;
margin-bottom: 20rpx;
}
.log-item {
font-size: 24rpx;
padding: 6rpx 0;
border-bottom: 1px dashed #eee;
}
</style>