feat(profile): add new profile pages and styles
This commit is contained in:
shenghuo2
175
profile/device-consumables.html
Normal file
175
profile/device-consumables.html
Normal file
@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>设备耗材 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/device-consumables.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="device-consumables-page">
|
||||
<!-- 头部导航 -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<h1 class="page-title">设备耗材</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 家庭选择器 -->
|
||||
<div class="family-selector">
|
||||
<div class="family-dropdown">
|
||||
<span class="family-name">我的家庭</span>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 耗材未知部分 -->
|
||||
<div class="consumables-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">耗材未知 (1个)</span>
|
||||
</div>
|
||||
|
||||
<div class="device-item unknown">
|
||||
<div class="device-icon">
|
||||
<div class="temp-humidity-icon">
|
||||
<span class="temp-value">25.8</span>
|
||||
<span class="humidity-value">%RH</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3>温湿度计</h3>
|
||||
<p class="device-status">宿舍 | 未连接蓝牙网关</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-item unknown">
|
||||
<div class="device-icon battery">
|
||||
<div class="battery-icon">
|
||||
<div class="battery-body">
|
||||
<div class="battery-level low"></div>
|
||||
</div>
|
||||
<div class="battery-tip"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3>电池</h3>
|
||||
<p class="device-status warning">状态未知</p>
|
||||
</div>
|
||||
<div class="device-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 耗材充足部分 -->
|
||||
<div class="consumables-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">耗材充足 (3个)</span>
|
||||
</div>
|
||||
|
||||
<div class="device-item sufficient">
|
||||
<div class="device-icon">
|
||||
<div class="air-purifier-icon">
|
||||
<div class="purifier-body">
|
||||
<div class="purifier-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3>米家空气净化器 4 Lite</h3>
|
||||
<p class="device-status">出租屋</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-item sufficient">
|
||||
<div class="device-icon">
|
||||
<div class="filter-icon">
|
||||
<div class="filter-progress">
|
||||
<svg class="progress-ring" width="40" height="40">
|
||||
<circle class="progress-ring-circle" stroke="#4ECDC4" stroke-width="3" fill="transparent" r="16" cx="20" cy="20" stroke-dasharray="100.53" stroke-dashoffset="10.053"/>
|
||||
</svg>
|
||||
<span class="progress-text">90%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3>滤芯</h3>
|
||||
<p class="device-status"></p>
|
||||
</div>
|
||||
<div class="device-action">
|
||||
<button class="buy-btn">购买</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-item sufficient">
|
||||
<div class="device-icon">
|
||||
<div class="temp-humidity-icon bathroom">
|
||||
<span class="temp-value">26.5</span>
|
||||
<span class="humidity-value">%RH</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3>目博士温湿度计-卫生间</h3>
|
||||
<p class="device-status">十五中 | 设备离线</p>
|
||||
<p class="device-update">更新于：2025/01/25 16:02</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-item sufficient">
|
||||
<div class="device-icon">
|
||||
<div class="filter-icon">
|
||||
<div class="filter-progress">
|
||||
<svg class="progress-ring" width="40" height="40">
|
||||
<circle class="progress-ring-circle" stroke="#4ECDC4" stroke-width="3" fill="transparent" r="16" cx="20" cy="20" stroke-dasharray="100.53" stroke-dashoffset="7.037"/>
|
||||
</svg>
|
||||
<span class="progress-text">93%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3>纽扣电池</h3>
|
||||
<p class="device-status"></p>
|
||||
</div>
|
||||
<div class="device-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../scripts/main.js"></script>
|
||||
<script>
|
||||
// 设备耗材页面特定的JavaScript逻辑
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 家庭选择器点击事件
|
||||
const familySelector = document.querySelector('.family-dropdown');
|
||||
familySelector.addEventListener('click', function() {
|
||||
alert('家庭选择功能开发中...');
|
||||
});
|
||||
|
||||
// 购买按钮点击事件
|
||||
const buyBtns = document.querySelectorAll('.buy-btn');
|
||||
buyBtns.forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
alert('跳转到购买页面...');
|
||||
});
|
||||
});
|
||||
|
||||
// 设备项点击事件
|
||||
const deviceItems = document.querySelectorAll('.device-item');
|
||||
deviceItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const deviceName = this.querySelector('h3').textContent;
|
||||
console.log(`点击了设备: ${deviceName}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
115
profile/hub-gateway.html
Normal file
115
profile/hub-gateway.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>中枢与网关 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/hub-gateway.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="hub-gateway-page">
|
||||
<!-- 头部导航 -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<h1 class="page-title">中枢与网关</h1>
|
||||
<button class="info-btn">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 家庭选择器 -->
|
||||
<div class="family-selector">
|
||||
<div class="family-info">
|
||||
<span class="family-name">shenghuo2的家</span>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网关设备列表 -->
|
||||
<div class="gateway-section">
|
||||
<div class="section-title">网关</div>
|
||||
|
||||
<div class="gateway-list">
|
||||
<!-- 米家智能插座2 蓝牙网关版 -->
|
||||
<div class="gateway-item" onclick="navigateToDevice('smart-plug')">
|
||||
<div class="device-icon">
|
||||
<div class="icon-container plug-icon">
|
||||
<i class="fas fa-plug"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3 class="device-name">米家智能插座2 蓝牙网关版</h3>
|
||||
<p class="device-status">出租屋 | 0个设备</p>
|
||||
</div>
|
||||
<div class="device-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Xiaomi 智能音箱 Pro -->
|
||||
<div class="gateway-item" onclick="navigateToDevice('smart-speaker')">
|
||||
<div class="device-icon">
|
||||
<div class="icon-container speaker-icon">
|
||||
<i class="fas fa-volume-up"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3 class="device-name">Xiaomi 智能音箱 Pro</h3>
|
||||
<p class="device-status">出租屋 | 0个设备</p>
|
||||
</div>
|
||||
<div class="device-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../scripts/main.js"></script>
|
||||
<script>
|
||||
// 中枢与网关页面特定的JavaScript逻辑
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 设备导航函数
|
||||
window.navigateToDevice = function(deviceType) {
|
||||
switch(deviceType) {
|
||||
case 'smart-plug':
|
||||
alert('米家智能插座2 蓝牙网关版设备详情功能开发中...');
|
||||
break;
|
||||
case 'smart-speaker':
|
||||
alert('Xiaomi 智能音箱 Pro设备详情功能开发中...');
|
||||
break;
|
||||
default:
|
||||
console.log('未知设备类型:', deviceType);
|
||||
}
|
||||
};
|
||||
|
||||
// 家庭选择器点击事件
|
||||
const familySelector = document.querySelector('.family-selector');
|
||||
familySelector.addEventListener('click', function() {
|
||||
alert('家庭切换功能开发中...');
|
||||
});
|
||||
|
||||
// 信息按钮点击事件
|
||||
const infoBtn = document.querySelector('.info-btn');
|
||||
infoBtn.addEventListener('click', function() {
|
||||
alert('中枢与网关帮助信息功能开发中...');
|
||||
});
|
||||
|
||||
// 网关设备项点击事件
|
||||
const gatewayItems = document.querySelectorAll('.gateway-item');
|
||||
gatewayItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const deviceName = this.querySelector('.device-name').textContent;
|
||||
console.log(`点击了设备: ${deviceName}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
255
profile/my-youpin.html
Normal file
255
profile/my-youpin.html
Normal file
@ -0,0 +1,255 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的有品 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/my-youpin.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="my-youpin-page">
|
||||
<!-- 头部导航 -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<h1 class="page-title">我的有品</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 功能列表 -->
|
||||
<div class="function-list">
|
||||
<!-- 我的订单 -->
|
||||
<div class="function-item" onclick="navigateToPage('orders')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-file-alt" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">我的订单</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退款/售后 -->
|
||||
<div class="function-item" onclick="navigateToPage('refund')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-undo-alt" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">退款/售后</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购物车 -->
|
||||
<div class="function-item" onclick="navigateToPage('cart')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-shopping-cart" style="color: #4facfe;"></i>
|
||||
<span class="cart-badge">3</span>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">购物车</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的收藏 -->
|
||||
<div class="function-item" onclick="navigateToPage('favorites')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-star" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">我的收藏</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收货地址 -->
|
||||
<div class="function-item" onclick="navigateToPage('address')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-map-marker-alt" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">收货地址</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<!-- 更多功能 -->
|
||||
<div class="function-list">
|
||||
<!-- 优惠·购买码 -->
|
||||
<div class="function-item" onclick="navigateToPage('coupons')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-ticket-alt" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">优惠·购买码</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<!-- 服务与帮助 -->
|
||||
<div class="function-list">
|
||||
<!-- 消息通知 -->
|
||||
<div class="function-item" onclick="navigateToPage('notifications')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-bell" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">消息通知</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 售后服务政策 -->
|
||||
<div class="function-item" onclick="navigateToPage('service-policy')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-headset" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">售后服务政策</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 资质证照 -->
|
||||
<div class="function-item" onclick="navigateToPage('certificates')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-certificate" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">资质证照</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 协议规则 -->
|
||||
<div class="function-item" onclick="navigateToPage('agreements')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-file-contract" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">协议规则</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 隐私设置 -->
|
||||
<div class="function-item" onclick="navigateToPage('privacy')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-shield-alt" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">隐私设置</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关于有品 -->
|
||||
<div class="function-item" onclick="navigateToPage('about')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-info-circle" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">关于有品</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../scripts/main.js"></script>
|
||||
<script>
|
||||
// 我的有品页面特定的JavaScript逻辑
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 页面导航函数
|
||||
window.navigateToPage = function(pageType) {
|
||||
switch(pageType) {
|
||||
case 'orders':
|
||||
alert('我的订单功能开发中...');
|
||||
break;
|
||||
case 'refund':
|
||||
alert('退款/售后功能开发中...');
|
||||
break;
|
||||
case 'cart':
|
||||
alert('购物车功能开发中...');
|
||||
break;
|
||||
case 'favorites':
|
||||
alert('我的收藏功能开发中...');
|
||||
break;
|
||||
case 'address':
|
||||
alert('收货地址功能开发中...');
|
||||
break;
|
||||
case 'coupons':
|
||||
alert('优惠·购买码功能开发中...');
|
||||
break;
|
||||
case 'notifications':
|
||||
alert('消息通知功能开发中...');
|
||||
break;
|
||||
case 'service-policy':
|
||||
alert('售后服务政策功能开发中...');
|
||||
break;
|
||||
case 'certificates':
|
||||
alert('资质证照功能开发中...');
|
||||
break;
|
||||
case 'agreements':
|
||||
alert('协议规则功能开发中...');
|
||||
break;
|
||||
case 'privacy':
|
||||
alert('隐私设置功能开发中...');
|
||||
break;
|
||||
case 'about':
|
||||
alert('关于有品功能开发中...');
|
||||
break;
|
||||
default:
|
||||
console.log('未知页面类型:', pageType);
|
||||
}
|
||||
};
|
||||
|
||||
// 功能项点击事件
|
||||
const functionItems = document.querySelectorAll('.function-item');
|
||||
functionItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const title = this.querySelector('.function-title').textContent;
|
||||
console.log(`点击了功能项: ${title}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
155
profile/share.html
Normal file
155
profile/share.html
Normal file
@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>共享 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/share.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="share-page">
|
||||
<!-- 头部导航 -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<h1 class="page-title">共享</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 共享家庭卡片 -->
|
||||
<div class="share-section">
|
||||
<div class="share-card family-share">
|
||||
<div class="card-icon">
|
||||
<i class="fas fa-home"></i>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>共享家庭</h3>
|
||||
<p>邀请家人一起管理智能设备</p>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 共享设备卡片 -->
|
||||
<div class="share-section">
|
||||
<div class="share-card device-share">
|
||||
<div class="card-icon">
|
||||
<i class="fas fa-tablet-alt"></i>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>共享设备</h3>
|
||||
<p>与他人分享特定设备的控制权</p>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 当前共享状态 -->
|
||||
<div class="current-shares">
|
||||
<h2 class="section-title">当前共享</h2>
|
||||
|
||||
<div class="share-item">
|
||||
<div class="share-avatar">
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23FF6B6B'/%3E%3Cpath d='M50 30c8 0 15 7 15 15s-7 15-15 15-15-7-15-15 7-15 15-15zm0 35c12 0 22 6 22 14v6H28v-6c0-8 10-14 22-14z' fill='white'/%3E%3C/svg%3E" alt="用户头像">
|
||||
</div>
|
||||
<div class="share-info">
|
||||
<h4>张三</h4>
|
||||
<p>家庭成员 • 可控制所有设备</p>
|
||||
</div>
|
||||
<div class="share-status">
|
||||
<span class="status-badge active">已连接</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="share-item">
|
||||
<div class="share-avatar">
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%234ECDC4'/%3E%3Cpath d='M50 30c8 0 15 7 15 15s-7 15-15 15-15-7-15-15 7-15 15-15zm0 35c12 0 22 6 22 14v6H28v-6c0-8 10-14 22-14z' fill='white'/%3E%3C/svg%3E" alt="用户头像">
|
||||
</div>
|
||||
<div class="share-info">
|
||||
<h4>李四</h4>
|
||||
<p>访客 • 仅可查看状态</p>
|
||||
</div>
|
||||
<div class="share-status">
|
||||
<span class="status-badge pending">待接受</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 邀请新成员 -->
|
||||
<div class="invite-section">
|
||||
<button class="invite-btn">
|
||||
<i class="fas fa-plus"></i>
|
||||
<span>邀请新成员</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 共享设置 -->
|
||||
<div class="share-settings">
|
||||
<h2 class="section-title">共享设置</h2>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h4>允许访客控制设备</h4>
|
||||
<p>访客可以控制已共享的设备</p>
|
||||
</div>
|
||||
<div class="setting-toggle">
|
||||
<input type="checkbox" id="guest-control" checked>
|
||||
<label for="guest-control" class="toggle-switch"></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h4>共享通知</h4>
|
||||
<p>当有人加入或离开时接收通知</p>
|
||||
</div>
|
||||
<div class="setting-toggle">
|
||||
<input type="checkbox" id="share-notifications" checked>
|
||||
<label for="share-notifications" class="toggle-switch"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../scripts/main.js"></script>
|
||||
<script>
|
||||
// 共享页面特定的JavaScript逻辑
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 邀请按钮点击事件
|
||||
const inviteBtn = document.querySelector('.invite-btn');
|
||||
inviteBtn.addEventListener('click', function() {
|
||||
// 这里可以添加邀请逻辑
|
||||
alert('邀请功能开发中...');
|
||||
});
|
||||
|
||||
// 共享卡片点击事件
|
||||
const shareCards = document.querySelectorAll('.share-card');
|
||||
shareCards.forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
if (card.classList.contains('family-share')) {
|
||||
alert('家庭共享功能开发中...');
|
||||
} else if (card.classList.contains('device-share')) {
|
||||
alert('设备共享功能开发中...');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 切换开关事件
|
||||
const toggles = document.querySelectorAll('input[type="checkbox"]');
|
||||
toggles.forEach(toggle => {
|
||||
toggle.addEventListener('change', function() {
|
||||
console.log(`${this.id} 设置已${this.checked ? '开启' : '关闭'}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
413
profile/styles/device-consumables.css
Normal file
413
profile/styles/device-consumables.css
Normal file
@ -0,0 +1,413 @@
|
||||
/* 设备耗材页面样式 */
|
||||
|
||||
#device-consumables-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: #f6f6f6;
|
||||
color: rgb(43, 42, 42);
|
||||
padding: 15px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 家庭选择器 */
|
||||
.family-selector {
|
||||
padding: 15px 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.family-dropdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.family-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.family-dropdown i {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 耗材部分 */
|
||||
.consumables-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 15px 20px 10px 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 设备项 */
|
||||
.device-item {
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.device-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.device-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.device-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 温湿度计图标 */
|
||||
.temp-humidity-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background: #e8e8e8;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.temp-humidity-icon.bathroom {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
.temp-value {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.humidity-value {
|
||||
font-size: 8px;
|
||||
color: #666;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 电池图标 */
|
||||
.battery-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.battery-body {
|
||||
width: 30px;
|
||||
height: 18px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.battery-level {
|
||||
height: 100%;
|
||||
background: #ffa500;
|
||||
border-radius: 1px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.battery-level.low {
|
||||
background: #ff6b6b;
|
||||
}
|
||||
|
||||
.battery-tip {
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
background: #ddd;
|
||||
border-radius: 0 2px 2px 0;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
/* 空气净化器图标 */
|
||||
.air-purifier-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.purifier-body {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.purifier-grid {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: linear-gradient(45deg, #ddd 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #ddd 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #ddd 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #ddd 75%);
|
||||
background-size: 4px 4px;
|
||||
background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
|
||||
}
|
||||
|
||||
/* 滤芯图标 */
|
||||
.filter-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter-progress {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.progress-ring {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.progress-ring-circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #4ECDC4;
|
||||
}
|
||||
|
||||
/* 设备信息 */
|
||||
.device-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.device-info h3 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.device-status.warning {
|
||||
color: #ff9500;
|
||||
}
|
||||
|
||||
.device-update {
|
||||
margin: 2px 0 0 0;
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 设备操作 */
|
||||
.device-action {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device-action i {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
background: #4ECDC4;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
padding: 6px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.buy-btn:hover {
|
||||
background: #44a08d;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.buy-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.family-selector {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 15px 15px 10px 15px;
|
||||
}
|
||||
|
||||
.device-item {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.device-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.temp-humidity-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.device-info h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.device-item {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.device-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.device-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
.device-item:nth-child(3) { animation-delay: 0.3s; }
|
||||
.device-item:nth-child(4) { animation-delay: 0.4s; }
|
||||
.device-item:nth-child(5) { animation-delay: 0.5s; }
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#device-consumables-page {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.device-item {
|
||||
background: #2d2d2d;
|
||||
color: white;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.device-info h3 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.device-update {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.family-name {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.temp-humidity-icon {
|
||||
background: #404040;
|
||||
}
|
||||
|
||||
.temp-value {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.purifier-body {
|
||||
background: #404040;
|
||||
}
|
||||
}
|
||||
336
profile/styles/hub-gateway.css
Normal file
336
profile/styles/hub-gateway.css
Normal file
@ -0,0 +1,336 @@
|
||||
/* 中枢与网关页面样式 */
|
||||
|
||||
#hub-gateway-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: #f6f6f6;
|
||||
color: rgb(43, 42, 42);
|
||||
padding: 15px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.info-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 家庭选择器 */
|
||||
.family-selector {
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.family-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.family-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.family-info i {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 网关部分 */
|
||||
.gateway-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
margin: 0 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 15px 20px 10px 20px;
|
||||
margin: 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* 网关设备列表 */
|
||||
.gateway-list {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.gateway-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.gateway-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.gateway-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 设备图标 */
|
||||
.device-icon {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plug-icon {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
.speaker-icon {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.icon-container i {
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.speaker-icon i {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 设备信息 */
|
||||
.device-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin: 0 0 5px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 设备操作 */
|
||||
.device-action {
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device-action i {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.family-selector {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.gateway-section {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.gateway-item {
|
||||
padding: 18px 15px;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.icon-container i {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.gateway-item {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.gateway-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.gateway-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#hub-gateway-page {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.family-selector {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.family-name {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.gateway-section {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.gateway-list {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
.gateway-item {
|
||||
color: white;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.gateway-item:hover {
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.device-action i {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.plug-icon {
|
||||
background: #404040;
|
||||
}
|
||||
|
||||
.icon-container i {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
/* 点击反馈效果 */
|
||||
.gateway-item:active {
|
||||
background-color: #f0f0f0;
|
||||
transform: scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.gateway-item:active {
|
||||
background-color: #404040;
|
||||
}
|
||||
}
|
||||
|
||||
/* 家庭选择器点击效果 */
|
||||
.family-selector:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.family-selector:hover {
|
||||
background-color: #2d2d2d;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮点击效果 */
|
||||
.back-btn:active,
|
||||
.info-btn:active {
|
||||
transform: scale(0.95);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
256
profile/styles/my-youpin.css
Normal file
256
profile/styles/my-youpin.css
Normal file
@ -0,0 +1,256 @@
|
||||
/* 我的有品页面样式 */
|
||||
|
||||
#my-youpin-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: #f6f6f6;
|
||||
color: rgb(43, 42, 42);
|
||||
padding: 15px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 功能列表 */
|
||||
.function-list {
|
||||
background: white;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 18px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.function-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.function-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 功能图标 */
|
||||
.function-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.function-icon i {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 购物车徽章 */
|
||||
.cart-badge {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background: #ff4757;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 功能内容 */
|
||||
.function-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.function-title {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 功能操作 */
|
||||
.function-action {
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.function-action i {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 分隔线 */
|
||||
.section-divider {
|
||||
height: 10px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 第一个功能列表的顶部间距 */
|
||||
.function-list:first-of-type {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
padding: 18px 15px;
|
||||
}
|
||||
|
||||
.function-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.function-icon {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.function-icon i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.function-item {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.function-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.function-item:nth-child(2) { animation-delay: 0.15s; }
|
||||
.function-item:nth-child(3) { animation-delay: 0.2s; }
|
||||
.function-item:nth-child(4) { animation-delay: 0.25s; }
|
||||
.function-item:nth-child(5) { animation-delay: 0.3s; }
|
||||
.function-item:nth-child(6) { animation-delay: 0.35s; }
|
||||
.function-item:nth-child(7) { animation-delay: 0.4s; }
|
||||
.function-item:nth-child(8) { animation-delay: 0.45s; }
|
||||
.function-item:nth-child(9) { animation-delay: 0.5s; }
|
||||
.function-item:nth-child(10) { animation-delay: 0.55s; }
|
||||
.function-item:nth-child(11) { animation-delay: 0.6s; }
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#my-youpin-page {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.function-list {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
color: white;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.function-item:hover {
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
.function-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.function-action i {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
/* 点击反馈效果 */
|
||||
.function-item:active {
|
||||
background-color: #f0f0f0;
|
||||
transform: scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.function-item:active {
|
||||
background-color: #404040;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标颜色统一 */
|
||||
.function-icon i {
|
||||
color: #4facfe !important;
|
||||
}
|
||||
|
||||
/* 特殊处理购物车图标的徽章位置 */
|
||||
.function-icon:has(.cart-badge) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 确保徽章在深色模式下也可见 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.cart-badge {
|
||||
background: #ff4757;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
388
profile/styles/share.css
Normal file
388
profile/styles/share.css
Normal file
@ -0,0 +1,388 @@
|
||||
/* 共享页面样式 */
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: #f6f6f6;
|
||||
color: rgb(43, 42, 42);
|
||||
padding: 15px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 共享卡片 */
|
||||
.share-section {
|
||||
margin: 20px 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.share-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.share-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.share-card.family-share {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.share-card.device-share {
|
||||
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
margin-right: 15px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-content h3 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-content p {
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-action {
|
||||
font-size: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 当前共享状态 */
|
||||
.current-shares {
|
||||
margin: 30px 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 15px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.share-item {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.share-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.share-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.share-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.share-info h4 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.share-info p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.share-status {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-badge.active {
|
||||
background: #e8f5e8;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.status-badge.pending {
|
||||
background: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
/* 邀请按钮 */
|
||||
.invite-section {
|
||||
padding: 0 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.invite-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.invite-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 共享设置 */
|
||||
.share-settings {
|
||||
margin: 30px 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.setting-info h4 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.setting-info p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 切换开关样式 */
|
||||
.setting-toggle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 28px;
|
||||
background-color: #ccc;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.toggle-switch::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + .toggle-switch {
|
||||
background-color: #667eea;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + .toggle-switch::before {
|
||||
transform: translateX(22px);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.share-section,
|
||||
.current-shares,
|
||||
.invite-section,
|
||||
.share-settings {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.share-card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.card-content h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.share-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.share-avatar {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.share-card,
|
||||
.share-item,
|
||||
.setting-item {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.share-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.share-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.share-item:nth-child(1) { animation-delay: 0.3s; }
|
||||
.share-item:nth-child(2) { animation-delay: 0.4s; }
|
||||
.setting-item:nth-child(1) { animation-delay: 0.5s; }
|
||||
.setting-item:nth-child(2) { animation-delay: 0.6s; }
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.share-card:not(.family-share):not(.device-share) {
|
||||
background: #2d2d2d;
|
||||
color: white;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.share-item,
|
||||
.setting-item {
|
||||
background: #2d2d2d;
|
||||
color: white;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.share-info h4 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.share-info p {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.setting-info h4 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.setting-info p {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
211
profile/styles/voice-settings.css
Normal file
211
profile/styles/voice-settings.css
Normal file
@ -0,0 +1,211 @@
|
||||
/* 语音设置页面样式 */
|
||||
|
||||
#voice-settings-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: #f6f6f6;
|
||||
color: rgb(43, 42, 42);
|
||||
padding: 15px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 设置部分 */
|
||||
.settings-section {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 15px 20px 10px 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 设置项 */
|
||||
.settings-item {
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.settings-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.settings-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-content h3 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-action {
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-action i {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 特殊样式调整 */
|
||||
.settings-section:first-of-type .section-header {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 15px 15px 10px 15px;
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
padding: 18px 15px;
|
||||
}
|
||||
|
||||
.item-content h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.settings-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.settings-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
.settings-item:nth-child(3) { animation-delay: 0.3s; }
|
||||
.settings-item:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#voice-settings-page {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
background: #2d2d2d;
|
||||
color: white;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.item-content h3 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.item-action i {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
/* 点击反馈效果 */
|
||||
.settings-item:active {
|
||||
background-color: #f0f0f0;
|
||||
transform: scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.settings-item:active {
|
||||
background-color: #404040;
|
||||
}
|
||||
}
|
||||
115
profile/voice-settings.html
Normal file
115
profile/voice-settings.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>语音设置 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/voice-settings.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="voice-settings-page">
|
||||
<!-- 头部导航 -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<h1 class="page-title">语音设置</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 小爱设置 -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">小爱设置</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 房间快捷指令设置 -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-item" onclick="navigateToPage('room-shortcuts')">
|
||||
<div class="item-content">
|
||||
<h3>房间快捷指令设置</h3>
|
||||
</div>
|
||||
<div class="item-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 语音别名设置 -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-item" onclick="navigateToPage('voice-alias')">
|
||||
<div class="item-content">
|
||||
<h3>语音别名设置</h3>
|
||||
</div>
|
||||
<div class="item-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 家庭传声 -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-item" onclick="navigateToPage('family-intercom')">
|
||||
<div class="item-content">
|
||||
<h3>家庭传声</h3>
|
||||
</div>
|
||||
<div class="item-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 语音控制授权管理 -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-item" onclick="navigateToPage('voice-authorization')">
|
||||
<div class="item-content">
|
||||
<h3>语音控制授权管理</h3>
|
||||
<p class="item-description">选择语音可控制的设备或区域</p>
|
||||
</div>
|
||||
<div class="item-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../scripts/main.js"></script>
|
||||
<script>
|
||||
// 语音设置页面特定的JavaScript逻辑
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 页面导航函数
|
||||
window.navigateToPage = function(pageType) {
|
||||
switch(pageType) {
|
||||
case 'room-shortcuts':
|
||||
alert('房间快捷指令设置功能开发中...');
|
||||
break;
|
||||
case 'voice-alias':
|
||||
alert('语音别名设置功能开发中...');
|
||||
break;
|
||||
case 'family-intercom':
|
||||
alert('家庭传声功能开发中...');
|
||||
break;
|
||||
case 'voice-authorization':
|
||||
alert('语音控制授权管理功能开发中...');
|
||||
break;
|
||||
default:
|
||||
console.log('未知页面类型:', pageType);
|
||||
}
|
||||
};
|
||||
|
||||
// 设置项点击事件
|
||||
const settingsItems = document.querySelectorAll('.settings-item');
|
||||
settingsItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const title = this.querySelector('h3').textContent;
|
||||
console.log(`点击了设置项: ${title}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user