Files
mi-home-web/profile.html

180 lines
8.1 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/profile.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="profile-page">
<!-- 头部用户信息 -->
<div class="profile-header">
<div class="header-top">
<div class="user-info" onclick="location.href='profile/user-profile.html'" style="cursor: pointer;">
<div class="user-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='%234A90E2'/%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="user-details">
<h2>shenghuo2</h2>
<p>10个智能设备</p>
</div>
</div>
<div class="header-actions">
<i class="fas fa-list"></i>
<i class="fas fa-plus"></i>
</div>
</div>
</div>
<!-- 功能卡片 -->
<div class="feature-cards">
<div class="feature-card" onclick="location.href='profile/scene.html'">
<div class="feature-icon" style="background: linear-gradient(135deg, #4ECDC4, #44A08D);">
<i class="fas fa-cube"></i>
</div>
<span>智能场景</span>
</div>
<div class="feature-card" onclick="window.location.href='profile/mijiazhongce.html'">
<div class="feature-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<i class="fas fa-chart-line"></i>
</div>
<span>米家众测</span>
</div>
<div class="feature-card" onclick="location.href='profile/product-encyclopedia.html'">
<div class="feature-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
<i class="fas fa-book"></i>
</div>
<span>产品百科</span>
</div>
<div class="feature-card" onclick="window.location.href='profile/whole-house-smart.html'">
<div class="feature-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
<i class="fas fa-home"></i>
</div>
<span>全屋智能</span>
</div>
</div>
<!-- 米家众测推广 -->
<div class="promotion-banner">
<div class="promotion-content">
<div class="promotion-text">
<h3>米家众测</h3>
<h4>小米室外摄像机 4C</h4>
<div class="promotion-tag">
<span>免费试</span>
<span class="tag-number">16台</span>
</div>
</div>
<div class="promotion-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect width='120' height='80' fill='%23f5f5f5' rx='8'/%3E%3Ccircle cx='60' cy='35' r='15' fill='%23333'/%3E%3Ccircle cx='60' cy='35' r='8' fill='%23666'/%3E%3Crect x='45' y='50' width='30' height='8' fill='%23999' rx='4'/%3E%3Ctext x='60' y='70' text-anchor='middle' font-size='8' fill='%23666'%3E摄像机%3C/text%3E%3C/svg%3E" alt="小米室外摄像机">
</div>
</div>
</div>
<!-- 功能菜单 -->
<div class="menu-section">
<div class="menu-item">
<div class="menu-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<i class="fas fa-share-alt"></i>
</div>
<div class="menu-content">
<span class="menu-title">共享</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item">
<div class="menu-icon" style="background: linear-gradient(135deg, #4ECDC4, #44A08D);">
<i class="fas fa-layer-group"></i>
</div>
<div class="menu-content">
<span class="menu-title">设备耗材</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item">
<div class="menu-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
<i class="fas fa-microphone"></i>
</div>
<div class="menu-content">
<span class="menu-title">语音设置</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item">
<div class="menu-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
<i class="fas fa-shopping-bag"></i>
</div>
<div class="menu-content">
<span class="menu-title">我的有品</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item" onclick="location.href='profile/home-network.html'">
<div class="menu-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<i class="fas fa-wifi"></i>
</div>
<div class="menu-content">
<span class="menu-title">家庭网络</span>
</div>
<div class="menu-right">
<span class="menu-status">良好</span>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<div class="menu-item">
<div class="menu-icon" style="background: linear-gradient(135deg, #4ECDC4, #44A08D);">
<i class="fas fa-broadcast-tower"></i>
</div>
<div class="menu-content">
<span class="menu-title">中枢与网关</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item" onclick="location.href='profile/settings.html'">
<div class="menu-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
<i class="fas fa-cog"></i>
</div>
<div class="menu-content">
<span class="menu-title">设置</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- 底部导航 -->
<nav class="bottom-nav">
<div class="nav-item" onclick="location.href='home.html'">
<i class="fas fa-home"></i>
<span>米家</span>
</div>
<div class="nav-item" onclick="location.href='smart.html'">
<i class="fas fa-cube"></i>
<span>智能</span>
</div>
<div class="nav-item" onclick="location.href='product.html'">
<i class="fas fa-star"></i>
<span>产品</span>
</div>
<div class="nav-item" onclick="location.href='mall.html'">
<i class="fas fa-shopping-bag"></i>
<span>商城</span>
</div>
<div class="nav-item active">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</nav>
</div>
<script src="scripts/main.js"></script>
</body>
</html>