716 lines
21 KiB
Vue
716 lines
21 KiB
Vue
|
<template>
|
||
|
|
<div class="page-container">
|
||
|
|
<Header :title="currentTitle"></Header>
|
||
|
|
<div class="content">
|
||
|
|
<!-- Top Section - 4 buttons in 2 rows -->
|
||
|
|
<div class="control-section">
|
||
|
|
<div class="button-grid top-grid">
|
||
|
|
<div class="control-btn" @click="handlePlatformControl('up')">
|
||
|
|
<div class="btn-icon">
|
||
|
|
<van-icon name="arrow-up" />
|
||
|
|
</div>
|
||
|
|
<div class="btn-label">平台上升</div>
|
||
|
|
</div>
|
||
|
|
<div class="control-btn" @click="handlePlatformControl('down')">
|
||
|
|
<div class="btn-icon">
|
||
|
|
<van-icon name="arrow-down" />
|
||
|
|
</div>
|
||
|
|
<div class="btn-label">平台下降</div>
|
||
|
|
</div>
|
||
|
|
<div class="control-btn" @click="handleScreenControl">
|
||
|
|
<div class="btn-icon">
|
||
|
|
<van-icon name="tv-o" />
|
||
|
|
</div>
|
||
|
|
<div class="btn-label">屏幕开关</div>
|
||
|
|
</div>
|
||
|
|
<div class="control-btn" @click="showLaserModeDialog">
|
||
|
|
<div class="btn-icon">
|
||
|
|
<van-icon name="bulb-o" />
|
||
|
|
</div>
|
||
|
|
<div class="btn-label">激光模式</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Middle Section - 6 buttons in 2 rows -->
|
||
|
|
<div class="control-section">
|
||
|
|
<div class="button-grid middle-grid">
|
||
|
|
<div class="control-btn"
|
||
|
|
@click="handleLightControl(1)"
|
||
|
|
:class="{ 'active-light': lightStates[0] }">
|
||
|
|
<div class="btn-icon">
|
||
|
|
<svg class="icon" aria-hidden="true">
|
||
|
|
<use xlink:href="#icon-deng"></use>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="btn-label">灯1</div>
|
||
|
|
</div>
|
||
|
|
<div class="control-btn"
|
||
|
|
@click="handleLightControl(2)"
|
||
|
|
:class="{ 'active-light': lightStates[1] }">
|
||
|
|
<div class="btn-icon">
|
||
|
|
<svg class="icon" aria-hidden="true">
|
||
|
|
<use xlink:href="#icon-deng"></use>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="btn-label">灯2</div>
|
||
|
|
</div>
|
||
|
|
<div class="control-btn"
|
||
|
|
@click="handleLightControl(3)"
|
||
|
|
:class="{ 'active-light': lightStates[2] }">
|
||
|
|
<div class="btn-icon">
|
||
|
|
<svg class="icon" aria-hidden="true">
|
||
|
|
<use xlink:href="#icon-deng"></use>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="btn-label">灯3</div>
|
||
|
|
</div>
|
||
|
|
<div class="control-btn"
|
||
|
|
@click="handleLightControl(4)"
|
||
|
|
:class="{ 'active-light': lightStates[3] }">
|
||
|
|
<div class="btn-icon">
|
||
|
|
<svg class="icon" aria-hidden="true">
|
||
|
|
<use xlink:href="#icon-deng"></use>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="btn-label">灯4</div>
|
||
|
|
</div>
|
||
|
|
<div class="control-btn"
|
||
|
|
@click="handleLightControl(5)"
|
||
|
|
:class="{ 'active-light': lightStates[4] }">
|
||
|
|
<div class="btn-icon">
|
||
|
|
<svg class="icon" aria-hidden="true">
|
||
|
|
<use xlink:href="#icon-deng"></use>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="btn-label">灯5</div>
|
||
|
|
</div>
|
||
|
|
<div class="control-btn"
|
||
|
|
@click="handleLightControl(6)"
|
||
|
|
:class="{ 'active-light': lightStates[5] }">
|
||
|
|
<div class="btn-icon">
|
||
|
|
<svg class="icon" aria-hidden="true">
|
||
|
|
<use xlink:href="#icon-deng"></use>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="btn-label">灯6</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Bottom Section - 2 buttons in 1 row -->
|
||
|
|
<div class="control-section">
|
||
|
|
<div class="button-row bottom-row">
|
||
|
|
<div class="action-btn reset-btn" @click="showBrightnessDialog">
|
||
|
|
<div class="btn-icon">
|
||
|
|
<van-icon name="setting-o" />
|
||
|
|
</div>
|
||
|
|
<div class="btn-label">亮度</div>
|
||
|
|
</div>
|
||
|
|
<div class="action-btn stop-btn" @click="showProgramDialog">
|
||
|
|
<div class="btn-icon">
|
||
|
|
<svg class="icon" aria-hidden="true">
|
||
|
|
<use xlink:href="#icon-jiemu"></use>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="btn-label">节目</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Footer></Footer>
|
||
|
|
|
||
|
|
<!-- 激光模式选择弹窗 -->
|
||
|
|
<van-popup v-model:show="showLaserMode" position="center" round>
|
||
|
|
<div class="popup-content">
|
||
|
|
<div class="popup-title">选择激光模式</div>
|
||
|
|
<div class="mode-options">
|
||
|
|
<div class="mode-option"
|
||
|
|
v-for="mode in laserModes"
|
||
|
|
:key="mode.value"
|
||
|
|
:class="{ 'selected': lightMode === mode.value }"
|
||
|
|
@click="selectLaserMode(mode.value)">
|
||
|
|
{{ mode.label }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</van-popup>
|
||
|
|
|
||
|
|
<!-- 亮度调节弹窗 -->
|
||
|
|
<van-popup v-model:show="showBrightness" position="center" round class="brightness-popup">
|
||
|
|
<div class="popup-content">
|
||
|
|
<div class="popup-title">调节亮度</div>
|
||
|
|
<div class="brightness-slider">
|
||
|
|
<van-slider v-model="brightness" :min="0" :max="100" @change="handleBrightnessChange" />
|
||
|
|
<div class="brightness-value">{{ brightness }}%</div>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="popup-buttons">
|
||
|
|
<van-button type="primary" block @click="showBrightness = false">确定</van-button>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</van-popup>
|
||
|
|
|
||
|
|
<!-- 节目选择弹窗 -->
|
||
|
|
<van-popup v-model:show="showProgram" position="center" round>
|
||
|
|
<div class="popup-content">
|
||
|
|
<div class="popup-title">选择节目</div>
|
||
|
|
<div class="program-options">
|
||
|
|
<div class="program-option"
|
||
|
|
v-for="id in availablePrograms"
|
||
|
|
:key="id"
|
||
|
|
:class="{ 'selected': currentProgram === id }"
|
||
|
|
@click="selectProgram(id)">
|
||
|
|
节目 {{ id }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</van-popup>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||
|
|
import Header from "../../components/Header.vue";
|
||
|
|
import Footer from "../../components/Footer.vue";
|
||
|
|
import { iconfont } from '../../assets/js/iconfont.js';
|
||
|
|
import axios from 'axios';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Header,
|
||
|
|
Footer
|
||
|
|
},
|
||
|
|
setup() {
|
||
|
|
|
||
|
|
const currentTitle = ref('翻转屏遥控');
|
||
|
|
const isLocal = ref(false);
|
||
|
|
const jsonId = ref(1);
|
||
|
|
const loading = ref(false);
|
||
|
|
const screenPower = ref('off');
|
||
|
|
const lightMode = ref('auto');
|
||
|
|
const lightStates = ref([true, false, false, false, false, false]);
|
||
|
|
const brightness = ref(70);
|
||
|
|
const currentProgram = ref(1);
|
||
|
|
const availablePrograms = ref([1, 2, 3, 4, 5]);
|
||
|
|
|
||
|
|
// 弹窗控制
|
||
|
|
const showLaserMode = ref(false);
|
||
|
|
const showBrightness = ref(false);
|
||
|
|
const showProgram = ref(false);
|
||
|
|
|
||
|
|
// 激光模式选项
|
||
|
|
const laserModes = [
|
||
|
|
{ label: '自动模式', value: 'auto' },
|
||
|
|
{ label: '手动模式', value: 'manual' },
|
||
|
|
{ label: '关闭模式', value: 'off' }
|
||
|
|
];
|
||
|
|
|
||
|
|
//环境监测部分
|
||
|
|
const checkEnvironment = () => {
|
||
|
|
if (window.location.hostname === '192.168.4.1') {
|
||
|
|
console.log('in local');
|
||
|
|
// 本地开发环境，设置 isLocal 为 true
|
||
|
|
isLocal.value = true;
|
||
|
|
} else {
|
||
|
|
// 生产环境，设置 isLocal 为 false
|
||
|
|
isLocal.value = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
//通信部分
|
||
|
|
const MQTT_send = (send_string) => {
|
||
|
|
console.log("MQTT 发送:" + JSON.stringify(send_string));
|
||
|
|
jsonId.value++;
|
||
|
|
if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) {
|
||
|
|
uni.postMessage({
|
||
|
|
data: {
|
||
|
|
str: JSON.stringify(send_string)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
window.parent.postMessage({ str: JSON.stringify(send_string) }, "*");
|
||
|
|
}
|
||
|
|
showToast('发送成功');
|
||
|
|
};
|
||
|
|
|
||
|
|
const MQTT_recv = (string) => {
|
||
|
|
loading.value = false;
|
||
|
|
console.log("MQTT 接收的json:" + string);
|
||
|
|
const data = JSON.parse(string);
|
||
|
|
parseAndFillData(data);
|
||
|
|
|
||
|
|
// 检查错误码
|
||
|
|
if (data.error_code === 0) {
|
||
|
|
showToast('操作成功');
|
||
|
|
} else {
|
||
|
|
showToast('操作失败: ' + (data.error_msg || '未知错误'));
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log('Received message:', string);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 解析接收到的数据并更新状态
|
||
|
|
const parseAndFillData = (data) => {
|
||
|
|
if (data.Flip_screen && data.Flip_screen.status) {
|
||
|
|
const status = data.Flip_screen.status;
|
||
|
|
|
||
|
|
// 更新平台状态
|
||
|
|
if (status.platform) {
|
||
|
|
// 可以添加平台状态更新逻辑
|
||
|
|
}
|
||
|
|
|
||
|
|
// 更新屏幕状态
|
||
|
|
if (status.screen) {
|
||
|
|
screenPower.value = status.screen.power;
|
||
|
|
brightness.value = status.screen.brightness;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 更新灯光状态
|
||
|
|
if (status.lights) {
|
||
|
|
lightStates.value = status.lights.map(light => light.state === 'on');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 更新节目状态
|
||
|
|
if (status.program) {
|
||
|
|
currentProgram.value = status.program.current_id;
|
||
|
|
if (status.program.available) {
|
||
|
|
availablePrograms.value = status.program.available;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 更新灯光模式
|
||
|
|
if (status.light_mode) {
|
||
|
|
lightMode.value = status.light_mode;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 发送消息的统一方法
|
||
|
|
const sendMessage = async (message) => {
|
||
|
|
loading.value = true;
|
||
|
|
|
||
|
|
if (isLocal.value) {
|
||
|
|
// 本地环境使用 axios
|
||
|
|
try {
|
||
|
|
const response = await axios.post('/api/flip-screen', message);
|
||
|
|
console.log('本地通信响应:', response.data);
|
||
|
|
parseAndFillData(response.data);
|
||
|
|
|
||
|
|
// 检查错误码
|
||
|
|
if (response.data.error_code === 0) {
|
||
|
|
showToast('操作成功');
|
||
|
|
} else {
|
||
|
|
showToast('操作失败: ' + (response.data.error_msg || '未知错误'));
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('本地通信错误:', error);
|
||
|
|
showToast('通信错误: ' + error.message);
|
||
|
|
} finally {
|
||
|
|
loading.value = false;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// 生产环境使用 MQTT
|
||
|
|
MQTT_send(message);
|
||
|
|
// MQTT 模式下，错误处理在 MQTT_recv 中进行
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 平台控制
|
||
|
|
const handlePlatformControl = (direction) => {
|
||
|
|
const message = {
|
||
|
|
board_id: 121,
|
||
|
|
JSON_id: jsonId.value,
|
||
|
|
Flip_screen: {
|
||
|
|
platform_control: {
|
||
|
|
direction: direction
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
sendMessage(message);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 屏幕控制
|
||
|
|
const handleScreenControl = () => {
|
||
|
|
const newPower = screenPower.value === 'on' ? 'off' : 'on';
|
||
|
|
const message = {
|
||
|
|
board_id: 121,
|
||
|
|
JSON_id: jsonId.value,
|
||
|
|
Flip_screen: {
|
||
|
|
screen_control: {
|
||
|
|
power: newPower
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
sendMessage(message);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 显示激光模式选择弹窗
|
||
|
|
const showLaserModeDialog = () => {
|
||
|
|
showLaserMode.value = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 选择激光模式
|
||
|
|
const selectLaserMode = (mode) => {
|
||
|
|
lightMode.value = mode;
|
||
|
|
showLaserMode.value = false;
|
||
|
|
|
||
|
|
const message = {
|
||
|
|
board_id: 121,
|
||
|
|
JSON_id: jsonId.value,
|
||
|
|
Flip_screen: {
|
||
|
|
light_mode: {
|
||
|
|
mode: mode
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
sendMessage(message);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 单个灯控制
|
||
|
|
const handleLightControl = (lightId) => {
|
||
|
|
const currentState = lightStates.value[lightId - 1];
|
||
|
|
const newState = currentState ? 'off' : 'on';
|
||
|
|
|
||
|
|
const message = {
|
||
|
|
board_id: 121,
|
||
|
|
JSON_id: jsonId.value,
|
||
|
|
Flip_screen: {
|
||
|
|
light_control: {
|
||
|
|
light_id: lightId,
|
||
|
|
state: newState
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
sendMessage(message);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 显示亮度调节弹窗
|
||
|
|
const showBrightnessDialog = () => {
|
||
|
|
showBrightness.value = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 亮度变化处理
|
||
|
|
const handleBrightnessChange = (value) => {
|
||
|
|
brightness.value = value;
|
||
|
|
|
||
|
|
const message = {
|
||
|
|
board_id: 121,
|
||
|
|
JSON_id: jsonId.value,
|
||
|
|
Flip_screen: {
|
||
|
|
brightness_control: {
|
||
|
|
value: value
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
sendMessage(message);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 显示节目选择弹窗
|
||
|
|
const showProgramDialog = () => {
|
||
|
|
showProgram.value = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 选择节目
|
||
|
|
const selectProgram = (programId) => {
|
||
|
|
currentProgram.value = programId;
|
||
|
|
showProgram.value = false;
|
||
|
|
|
||
|
|
const message = {
|
||
|
|
board_id: 121,
|
||
|
|
JSON_id: jsonId.value,
|
||
|
|
Flip_screen: {
|
||
|
|
program_control: {
|
||
|
|
program_id: programId
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
sendMessage(message);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 查询设备状态
|
||
|
|
const onRefresh = () => {
|
||
|
|
const message = {
|
||
|
|
board_id: 121,
|
||
|
|
JSON_id: jsonId.value,
|
||
|
|
Flip_screen: {
|
||
|
|
status_query: {
|
||
|
|
type: "all"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
sendMessage(message);
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
await checkEnvironment();
|
||
|
|
console.log(isLocal.value);
|
||
|
|
window.MQTT_recv = MQTT_recv;
|
||
|
|
onRefresh();
|
||
|
|
});
|
||
|
|
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
// 清理工作
|
||
|
|
});
|
||
|
|
|
||
|
|
return {
|
||
|
|
currentTitle,
|
||
|
|
isLocal,
|
||
|
|
checkEnvironment,
|
||
|
|
MQTT_send,
|
||
|
|
MQTT_recv,
|
||
|
|
handlePlatformControl,
|
||
|
|
handleScreenControl,
|
||
|
|
showLaserModeDialog,
|
||
|
|
selectLaserMode,
|
||
|
|
handleLightControl,
|
||
|
|
showBrightnessDialog,
|
||
|
|
handleBrightnessChange,
|
||
|
|
showProgramDialog,
|
||
|
|
selectProgram,
|
||
|
|
onRefresh,
|
||
|
|
screenPower,
|
||
|
|
lightMode,
|
||
|
|
lightStates,
|
||
|
|
brightness,
|
||
|
|
currentProgram,
|
||
|
|
availablePrograms,
|
||
|
|
loading,
|
||
|
|
showToast,
|
||
|
|
showLaserMode,
|
||
|
|
showBrightness,
|
||
|
|
showProgram,
|
||
|
|
laserModes
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.page-container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-height: 100vh;
|
||
|
|
background-color: #f5f6fa;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
flex: 1;
|
||
|
|
padding: 20px;
|
||
|
|
margin-top: 60px;
|
||
|
|
margin-bottom: 60px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-section {
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-grid {
|
||
|
|
display: grid;
|
||
|
|
gap: 15px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 1em;
|
||
|
|
height: 1em;
|
||
|
|
vertical-align: -0.15em;
|
||
|
|
fill: currentColor;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-grid {
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
grid-template-rows: repeat(2, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
.middle-grid {
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
grid-template-rows: repeat(2, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-row {
|
||
|
|
display: flex;
|
||
|
|
gap: 15px;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-btn {
|
||
|
|
position: relative;
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 16px;
|
||
|
|
height: 100px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
cursor: pointer;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-btn:hover {
|
||
|
|
transform: translateY(-4px);
|
||
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-btn:active {
|
||
|
|
transform: scale(0.98);
|
||
|
|
}
|
||
|
|
|
||
|
|
.active-light {
|
||
|
|
background-color: #e6f7ff;
|
||
|
|
border: 2px solid #1890ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn {
|
||
|
|
flex: 1;
|
||
|
|
position: relative;
|
||
|
|
border-radius: 16px;
|
||
|
|
height: 100px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
cursor: pointer;
|
||
|
|
overflow: hidden;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.reset-btn {
|
||
|
|
background: linear-gradient(135deg, #3498db, #2980b9);
|
||
|
|
}
|
||
|
|
|
||
|
|
.stop-btn {
|
||
|
|
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn:hover {
|
||
|
|
transform: translateY(-4px);
|
||
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn:active {
|
||
|
|
transform: scale(0.98);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-icon {
|
||
|
|
font-size: 32px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
color: #3498db;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-btn:hover .btn-icon {
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn .btn-icon {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-label {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-top: 4px;
|
||
|
|
color: #2c3e50;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn .btn-label {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 弹窗样式 */
|
||
|
|
.popup-content {
|
||
|
|
padding: 20px;
|
||
|
|
min-width: 280px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mode-options, .program-options {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 10px;
|
||
|
|
justify-content: center;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mode-option, .program-option {
|
||
|
|
padding: 12px 20px;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mode-option:hover, .program-option:hover {
|
||
|
|
background-color: #e0e0e0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mode-option.selected, .program-option.selected {
|
||
|
|
background-color: #1890ff;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.brightness-slider {
|
||
|
|
padding: 0 20px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.brightness-value {
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 10px;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-buttons {
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.brightness-popup {
|
||
|
|
width: 90%;
|
||
|
|
max-width: 320px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 380px) {
|
||
|
|
.content {
|
||
|
|
padding: 15px;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-btn,
|
||
|
|
.action-btn {
|
||
|
|
height: 90px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-icon {
|
||
|
|
font-size: 24px;
|
||
|
|
height: 45px;
|
||
|
|
width: 45px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-label {
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|