emcp/frontend/src/views/lightSetting/index.vue

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()

// 表单数据
const form = reactive({
    sleepTime: 180, // 息屏时间（秒）
    brightness: 80  // 屏幕亮度（百分比）
})

// 提交保存
const handleSave = async () => {
    if (!formRef.value) return
    await formRef.value.validate((valid) => {
        if (valid) {
            console.log('灯光设置数据:', form)
            // 这里写接口提交逻辑
            alert('灯光设置保存成功！')
        }
    })
}
</script>

<template>
    <div class="light-container">
        <div class="light-container-content">
            <div class="title">
                <span class="title-line"></span>
                灯光设置
            </div>
            <el-form ref="formRef" :model="form" label-width="100px" class="light-form">
                <el-form-item label="息屏时间设置" prop="sleepTime">
                    <el-input v-model.number="form.sleepTime" type="number" min="0">
                        <template #suffix>
                            <span class="unit">秒</span>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item label="屏幕亮度" prop="brightness">
                    <div class="slider-wrap">
                        <el-slider v-model="form.brightness" :min="0" :max="100" :step="1" style="width: 100%;" />
                        <span class="brightness-value">{{ form.brightness }}%</span>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <el-button type="primary" class="save-btn" @click="handleSave">
            保存
        </el-button>
    </div>
</template>

<style scoped lang="scss">
.light-container {
    width: 100%;
    height: 100%;
    padding: 20px;

    .light-container-content {
        width: 100%;
        height: calc(100vh - 230px);
        background-color: #ffffff;
        padding: 20px 50px;
        border-radius: 4px;
        box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
    }

    .title {
        font-size: 18px;
        font-weight: 700;
        color: #303133;
        margin-bottom: 24px;
        display: flex;
        align-items: center;

        .title-line {
            display: inline-block;
            width: 4px;
            height: 14px;
            background-color: #409eff;
            margin-right: 8px;
            font-weight: 700;
        }
    }

    .light-form {
        max-width: 600px;
        margin-bottom: 24px;

        .slider-wrap {
            display: flex;
            align-items: center;
            gap: 16px;
            width: 100%;

            .brightness-value {
                font-size: 16px;
                color: #363636;
                min-width: 40px;
            }
        }

        .unit {
            color: #909399;
        }
    }

    .save-btn {
        background-color: #0099ff;
        width: 150px;
        height: 40px;
        font-size: 14px;
        margin-top: 30px;
    }
}

:deep(.el-form-item--label-right .el-form-item__label) {
    text-align: left;
    justify-content: flex-start;
    color: #787878;
}

:deep(.el-input__inner) {
    color: #363636;
    min-height: 40px;
}

:deep(.el-slider__bar) {
    background-color: #409eff;
}

:deep(.el-slider__button) {
    border-color: #409eff;
}

:deep(.el-form-item__label) {
    line-height: 40px !important;
}

:deep(.el-slider) {
    height: 40px !important;
}

:deep(.el-slider__bar) {
    height: 8px !important;
}

:deep(.el-slider__button) {
    border-color: #ffffff;
    border-width: 3px;
    box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.35);
    background-color: #0099ff;
}

:deep(.el-slider__runway) {
    height: 8px !important;
}
</style>