chenxing/mi-home-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

feat: add user profile page and improve UI styling

Browse Source
This commit is contained in:
shenghuo2
2025-06-21 09:37:15 +08:00
parent 4af6aa7941
commit 8af49d63b8
10 changed files with 1944 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
user-profile.html Normal file
View File

@ -0,0 +1,128 @@
<!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/user-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="user-profile-page">
<!-- 顶部导航 -->
<div class="header">
<div class="header-left">
<i class="fas fa-arrow-left" onclick="history.back()"></i>
<span class="page-title">个人资料</span>
</div>
</div>
<!-- 用户头像区域 -->
<div class="profile-avatar-section">
<div class="avatar-container">
<div class="user-avatar-large">
<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="camera-icon">
<i class="fas fa-camera"></i>
</div>
</div>
</div>
<!-- 基础资料 -->
<div class="profile-section">
<div class="section-title">基础资料</div>
<div class="profile-item">
<div class="item-label">头像</div>
<div class="item-content">
<div class="mini-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>
<i class="fas fa-chevron-right"></i>
</div>
<div class="profile-item">
<div class="item-label">账号</div>
<div class="item-content">
<span class="item-value">1094307500</span>
</div>
</div>
<div class="profile-item">
<div class="item-label">姓名</div>
<div class="item-content">
<span class="item-value">shenghuo2</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- 账号绑定 -->
<div class="profile-section">
<div class="section-title">账号绑定</div>
<div class="profile-item">
<div class="item-label">微信账号</div>
<div class="item-content">
<span class="item-status bound">已绑定</span>
<div class="toggle-switch active">
<div class="toggle-slider"></div>
</div>
</div>
</div>
</div>
<!-- 密保资料 -->
<div class="profile-section">
<div class="section-title">密保资料</div>
<div class="profile-item">
<div class="item-label">手机号</div>
<div class="item-content">
<span class="item-value masked">186****50</span>
</div>
</div>
<div class="profile-item">
<div class="item-label">账号安全</div>
<div class="item-content"></div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- 注销登录 -->
<div class="logout-section">
<button class="logout-btn">注销登录</button>
</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>