<template> <div class="remote-container"> <div class="remote-body"> <!-- 温度显示区 --> <div class="temperature-display"> <span class="temp-value" :class="{ pulse: tempChanging }">{{ temperature }}</span> <span class="temp-unit">°C</span> </div>
<!-- 温度控制按钮 --> <div class="temp-control"> <button class="btn temp-up" @click="increaseTemp"> <span class="icon">+</span> </button> <button class="btn temp-down" @click="decreaseTemp"> <span class="icon">-</span> </button> </div>
<!-- 模式选择 --> <div class="mode-selector"> <button v-for="mode in modes" :key="mode" :class="{ active: currentMode === mode }" @click="changeMode(mode)" class="btn mode-btn" > <span class="mode-icon" :class="'icon-' + mode"></span> {{ mode }} </button> </div>
<!-- 风速控制 --> <div class="fan-speed"> <h3>风速</h3> <div class="speed-options"> <button v-for="speed in speeds" :key="speed" :class="{ active: currentSpeed === speed }" @click="changeSpeed(speed)" class="btn speed-btn" > <span class="speed-icon" :class="'icon-' + speed"></span> {{ speed }} </button> </div> </div>
<!-- 开关按钮 --> <button class="btn power-btn" @click="togglePower"> <span class="power-icon" :class="{ on: isOn }"></span> {{ isOn ? '关闭' : '开启' }} </button> </div> </div></template>
<script>export default { data() { return { temperature: 24, isOn: true, currentMode: '制冷', modes: ['制冷', '制热', '除湿', '自动'], currentSpeed: '中', speeds: ['低', '中', '高'], tempChanging: false } }, methods: { increaseTemp() { if (this.temperature < 30) { this.tempChanging = true this.temperature++ setTimeout(() => { this.tempChanging = false }, 300) } }, decreaseTemp() { if (this.temperature > 16) { this.tempChanging = true this.temperature-- setTimeout(() => { this.tempChanging = false }, 300) } }, changeMode(mode) { this.currentMode = mode }, changeSpeed(speed) { this.currentSpeed = speed }, togglePower() { this.isOn = !this.isOn } }}</script>
<style scoped>.remote-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; padding: 20px;}
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }}
.remote-body { width: 340px; padding: 30px; border-radius: 30px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); box-shadow: 0 15px 35px rgba(0,0,0,0.2); text-align: center; border: 1px solid rgba(255,255,255,0.2); transform-style: preserve-3d; perspective: 1000px;}
.temperature-display { margin-bottom: 30px; font-size: 4rem; color: white; text-shadow: 0 0 15px rgba(255,255,255,0.7); position: relative;}
.temp-value { font-weight: bold; display: inline-block; transition: all 0.3s ease;}
.temp-value.pulse { animation: pulse 0.3s ease; color: #ffeb3b;}
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }}
.temp-unit { position: absolute; top: 10px; right: -25px; font-size: 1.5rem;}
.temp-control { display: flex; justify-content: center; gap: 25px; margin-bottom: 30px;}
.btn { border: none; border-radius: 50%; width: 70px; height: 70px; font-size: 1.5rem; background: rgba(255,255,255,0.85); color: #333; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.15); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.btn:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 12px 25px rgba(0,0,0,0.2);}
.btn:active { transform: translateY(0) scale(0.98);}
.btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255,255,255,0.6); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%, -50%); transform-origin: 50% 50%;}
.btn:active::after { animation: ripple 0.6s ease-out;}
@keyframes ripple { 0% { transform: scale(0, 0); opacity: 1; } 100% { transform: scale(20, 20); opacity: 0; }}
.icon { display: inline-block; transition: all 0.3s ease;}
.temp-up .icon, .temp-down .icon { font-weight: bold; font-size: 2rem;}
.mode-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 30px;}
.mode-btn { width: 100%; border-radius: 25px; height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s ease;}
.mode-icon { width: 20px; height: 20px; background: currentColor; border-radius: 50%; display: inline-block;}
.active { background: linear-gradient(45deg, #ff6b6b, #ff8e53); color: white !important; box-shadow: 0 8px 20px rgba(255,107,107,0.4); transform: translateY(-2px);}
.fan-speed { margin-bottom: 30px;}
.fan-speed h3 { color: white; margin-bottom: 15px; font-size: 1.3rem; text-shadow: 0 2px 4px rgba(0,0,0,0.2);}
.speed-options { display: flex; justify-content: center; gap: 15px;}
.speed-btn { width: 80px; border-radius: 25px; height: 45px; display: flex; align-items: center; justify-content: center; gap: 8px;}
.speed-icon { width: 16px; height: 16px; background: currentColor; border-radius: 50%; display: inline-block;}
.power-btn { width: 100%; height: 60px; border-radius: 30px; font-size: 1.4rem; font-weight: bold; background: linear-gradient(45deg, #ff416c, #ff4b2b); color: white; margin-top: 20px; position: relative; overflow: hidden; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px;}
.power-icon { width: 20px; height: 20px; background: white; border-radius: 50%; display: inline-block; position: relative; transition: all 0.3s ease;}
.power-icon.on::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: rgba(255,255,255,0.3); border-radius: 50%; animation: powerPulse 2s infinite;}
@keyframes powerPulse { 0% { transform: scale(0.8); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 0.3; } 100% { transform: scale(0.8); opacity: 0.8; }}
.power-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, #ff4b2b, #ff416c); z-index: -1; opacity: 0; transition: opacity 0.3s ease;}
.power-btn:hover::before { opacity: 1;}</style>
评论