155 lines
6.2 KiB
HTML
155 lines
6.2 KiB
HTML
<!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> |