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

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
images/profile/*

214
mijiazhongce.html Normal file
View File

@ -0,0 +1,214 @@
<!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/mijiazhongce.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="mijiazhongce-page">
<!-- 顶部导航 -->
<header class="header">
<div class="header-left">
<i class="fas fa-arrow-left" onclick="history.back()"></i>
<span class="page-title">米家众测</span>
</div>
</header>
<!-- 众测产品列表 -->
<div class="test-products">
<!-- 米家空气净化器 5S -->
<div class="product-card">
<div class="product-header">
<span class="product-period">第230期</span>
<span class="product-status new">新品试用</span>
</div>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Crect width='200' height='300' fill='%23f5f5f5' rx='10'/%3E%3Crect x='60' y='50' width='80' height='200' fill='%23e0e0e0' rx='8'/%3E%3Crect x='70' y='60' width='60' height='20' fill='%23333' rx='4'/%3E%3Ccircle cx='100' cy='150' r='25' fill='%23666'/%3E%3Crect x='85' y='200' width='30' height='40' fill='%23999' rx='4'/%3E%3C/svg%3E" alt="米家空气净化器 5S">
</div>
<div class="product-info">
<div class="status-badge ended">已结束</div>
<h3 class="product-name">米家空气净化器 5S</h3>
<div class="product-details">
<span class="market-price">市场价：￥1699</span>
<span class="quota">名额：1人</span>
</div>
<div class="applicant-info">
<div class="applicant-avatars">
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
</div>
<span class="applicant-count">4562人申请</span>
</div>
</div>
</div>
<!-- Redmi投影仪Lite版 -->
<div class="product-card">
<div class="product-header">
<span class="product-period">第229期</span>
<span class="product-status new">新品试用</span>
<span class="my-test">我的众测</span>
</div>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect width='200' height='150' fill='%23f5f5f5' rx='10'/%3E%3Crect x='30' y='40' width='140' height='70' fill='%23e0e0e0' rx='8'/%3E%3Ccircle cx='100' cy='75' r='20' fill='%23333'/%3E%3Ccircle cx='100' cy='75' r='12' fill='%23666'/%3E%3Crect x='80' y='120' width='40' height='8' fill='%23999' rx='4'/%3E%3C/svg%3E" alt="Redmi投影仪Lite版">
</div>
<div class="product-info">
<div class="status-badge ended">已结束</div>
<h3 class="product-name">Redmi投影仪Lite版</h3>
<div class="product-details">
<span class="market-price">市场价：￥999</span>
<span class="quota">名额：3人</span>
</div>
<div class="applicant-info">
<div class="applicant-avatars">
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
</div>
<span class="applicant-count">9916人申请</span>
</div>
</div>
</div>
<!-- 米家体脂秤S400 蓝色 -->
<div class="product-card">
<div class="product-header">
<span class="product-period">第228期</span>
<span class="product-status new">新品试用</span>
</div>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50'%3E%3Crect width='200' height='50' fill='%23f5f5f5' rx='10'/%3E%3Crect x='20' y='10' width='160' height='30' fill='%234A90E2' rx='8'/%3E%3Crect x='80' y='18' width='40' height='14' fill='%23333' rx='2'/%3E%3C/svg%3E" alt="米家体脂秤S400 蓝色">
</div>
<div class="product-info">
<div class="status-badge ended">已结束</div>
<h3 class="product-name">米家体脂秤S400 蓝色</h3>
<div class="product-details">
<span class="market-price">市场价：￥99</span>
<span class="quota">名额：3人</span>
</div>
<div class="applicant-info">
<div class="applicant-avatars">
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
</div>
<span class="applicant-count">4232人申请</span>
</div>
</div>
</div>
<!-- 米家循环扇 -->
<div class="product-card">
<div class="product-header">
<span class="product-period">第227期</span>
<span class="product-status new">新品试用</span>
</div>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23f5f5f5' rx='10'/%3E%3Ccircle cx='100' cy='100' r='60' fill='%23e0e0e0'/%3E%3Ccircle cx='100' cy='100' r='45' fill='%23fff'/%3E%3Cpath d='M100 70 L120 100 L100 130 L80 100 Z' fill='%23666'/%3E%3Crect x='90' y='160' width='20' height='30' fill='%23999' rx='4'/%3E%3C/svg%3E" alt="米家循环扇">
</div>
<div class="product-info">
<div class="status-badge ended">已结束</div>
<h3 class="product-name">米家循环扇</h3>
<div class="product-details">
<span class="market-price">市场价：￥349</span>
<span class="quota">名额：3人</span>
</div>
<div class="applicant-info">
<div class="applicant-avatars">
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
</div>
<span class="applicant-count">4535人申请</span>
</div>
</div>
</div>
<!-- 第226期 -->
<div class="product-card">
<div class="product-header">
<span class="product-period">第226期</span>
<span class="product-status free">0元抽奖</span>
</div>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect width='200' height='150' fill='%23f5f5f5' rx='10'/%3E%3Crect x='40' y='30' width='120' height='90' fill='%23e0e0e0' rx='8'/%3E%3Crect x='50' y='40' width='100' height='70' fill='%23333' rx='4'/%3E%3C/svg%3E" alt="第226期产品">
</div>
<div class="product-info">
<div class="status-badge ended">已结束</div>
<h3 class="product-name">智能产品</h3>
<div class="product-details">
<span class="market-price">市场价：￥299</span>
<span class="quota">名额：5人</span>
</div>
<div class="applicant-info">
<div class="applicant-avatars">
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
</div>
<span class="applicant-count">3456人申请</span>
</div>
</div>
</div>
<!-- 第225期 -->
<div class="product-card">
<div class="product-header">
<span class="product-period">第225期</span>
<span class="product-status new">新品试用</span>
</div>
<div class="product-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23f5f5f5' rx='10'/%3E%3Ccircle cx='100' cy='80' r='40' fill='%23e0e0e0'/%3E%3Ccircle cx='100' cy='80' r='25' fill='%23333'/%3E%3Crect x='85' y='130' width='30' height='50' fill='%23999' rx='4'/%3E%3C/svg%3E" alt="第225期产品">
</div>
<div class="product-info">
<div class="status-badge ended">已结束</div>
<h3 class="product-name">智能摄像头</h3>
<div class="product-details">
<span class="market-price">市场价：￥199</span>
<span class="quota">名额：2人</span>
</div>
<div class="applicant-info">
<div class="applicant-avatars">
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
</div>
<span class="applicant-count">2876人申请</span>
</div>
</div>
</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" onclick="location.href='profile.html'">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</nav>
</div>
<script src="scripts/main.js"></script>
</body>
</html>

6
profile.html
View File

@ -13,7 +13,7 @@
<!-- 头部用户信息 -->
<div class="profile-header">
<div class="header-top">
<div class="user-info">
<div class="user-info" onclick="location.href='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>
@ -31,13 +31,13 @@
<!-- 功能卡片 -->
<div class="feature-cards">
<div class="feature-card">
<div class="feature-card" onclick="location.href='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">
<div class="feature-card" onclick="window.location.href='mijiazhongce.html'">
<div class="feature-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<i class="fas fa-chart-line"></i>
</div>

254
scene.html Normal file
View File

@ -0,0 +1,254 @@
<!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/scene.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="scene-page">
<!-- 顶部导航 -->
<header class="header">
<div class="header-left">
<i class="fas fa-arrow-left" onclick="history.back()"></i>
<span class="page-title">智能推荐</span>
</div>
<div class="header-right">
<span class="tab-item active">智能推荐</span>
<span class="tab-item">语音通知</span>
<span class="tab-item">智能清洁</span>
<span class="tab-item">智能控制</span>
</div>
</header>
<!-- 主要场景卡片 -->
<div class="main-scene-card">
<div class="scene-background">
<div class="scene-content">
<div class="scene-devices">
<!-- 空气净化器 -->
<div class="device-item air-purifier">
<i class="fas fa-wind"></i>
<span class="device-label">空气净化器</span>
</div>
<!-- 音箱 -->
<div class="device-item speaker">
<i class="fas fa-volume-up"></i>
<span class="device-label">音箱</span>
</div>
</div>
<div class="scene-info">
<h2>欢迎回家</h2>
<p>有人为你的生活喝彩</p>
</div>
</div>
</div>
</div>
<!-- 产品推荐卡片 -->
<div class="recommendation-cards">
<!-- 洗衣监测 -->
<div class="recommendation-card">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-tshirt"></i>
</div>
<h3>洗衣监测</h3>
<p class="card-subtitle">洗涤脱水 全程可见</p>
</div>
<div class="product-grid">
<div class="product-item">
<div class="product-image">
<i class="fas fa-circle"></i>
</div>
<div class="product-info">
<span class="product-name">小米水浸卫士</span>
<span class="product-price">￥59起</span>
</div>
</div>
<div class="product-item">
<div class="product-image">
<i class="fas fa-circle"></i>
</div>
<div class="product-info">
<span class="product-name">滚筒洗衣机</span>
<span class="product-price">￥1999起</span>
</div>
</div>
<div class="product-item">
<div class="product-image">
<i class="fas fa-circle"></i>
</div>
<div class="product-info">
<span class="product-name">智能摄像机</span>
<span class="product-price">￥179起</span>
</div>
</div>
</div>
</div>
<!-- 一键起灯 -->
<div class="recommendation-card">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-lightbulb"></i>
</div>
<h3>一键起灯</h3>
<p class="card-subtitle">开灯开窗 活力晨醒</p>
</div>
<div class="product-grid">
<div class="product-item">
<div class="product-image">
<i class="fas fa-lightbulb"></i>
</div>
<div class="product-info">
<span class="product-name">小米台灯Pro</span>
<span class="product-price">￥199起</span>
</div>
</div>
<div class="product-item">
<div class="product-image">
<i class="fas fa-lightbulb"></i>
</div>
<div class="product-info">
<span class="product-name">小米智能灯泡</span>
<span class="product-price">￥19起</span>
</div>
</div>
<div class="product-item">
<div class="product-image">
<i class="fas fa-lightbulb"></i>
</div>
<div class="product-info">
<span class="product-name">米家吸顶灯</span>
<span class="product-price">￥349起</span>
</div>
</div>
</div>
</div>
<!-- 轻松家务 -->
<div class="recommendation-card">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-broom"></i>
</div>
<h3>轻松家务</h3>
<p class="card-subtitle">智能清洁 省心省力</p>
</div>
<div class="product-grid">
<div class="product-item">
<div class="product-image">
<i class="fas fa-robot"></i>
</div>
<div class="product-info">
<span class="product-name">扫地机器人</span>
<span class="product-price">￥2999起</span>
</div>
</div>
<div class="product-item">
<div class="product-image">
<i class="fas fa-wind"></i>
</div>
<div class="product-info">
<span class="product-name">小米空气净化器</span>
<span class="product-price">￥799起</span>
</div>
</div>
<div class="product-item">
<div class="product-image">
<i class="fas fa-tv"></i>
</div>
<div class="product-info">
<span class="product-name">小米电视机</span>
<span class="product-price">￥1499起</span>
</div>
</div>
</div>
</div>
<!-- 护眼开灯 -->
<div class="recommendation-card">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-eye"></i>
</div>
<h3>护眼开灯</h3>
<p class="card-subtitle">智能护眼 舒适阅读</p>
</div>
<div class="product-grid">
<div class="product-item">
<div class="product-image">
<i class="fas fa-microphone"></i>
</div>
<div class="product-info">
<span class="product-name">小爱音箱Pro</span>
<span class="product-price">￥299起</span>
</div>
</div>
<div class="product-item">
<div class="product-image">
<i class="fas fa-lightbulb"></i>
</div>
<div class="product-info">
<span class="product-name">米家智能灯</span>
<span class="product-price">￥99起</span>
</div>
</div>
<div class="product-item">
<div class="product-image">
<i class="fas fa-tablet"></i>
</div>
<div class="product-info">
<span class="product-name">小米平板5</span>
<span class="product-price">￥1899起</span>
</div>
</div>
</div>
</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" onclick="location.href='profile.html'">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</nav>
</div>
<script src="scripts/main.js"></script>
<script>
// 标签切换功能
document.addEventListener('DOMContentLoaded', function() {
const tabItems = document.querySelectorAll('.tab-item');
tabItems.forEach(tab => {
tab.addEventListener('click', function() {
tabItems.forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});
});
</script>
</body>
</html>

157
styles/mall.css
View File

@ -1,15 +1,25 @@
/* 商城页面专用样式 */
/* 商城页面专用样式 - 小米风格设计 */
/* 顶部促销横幅 */
/* 页面整体样式 */
#mall-page {
background-color: #f5f5f5;
min-height: 100vh;
}
#mall-page .container {
background-color: #f5f5f5;
}
/* 顶部促销横幅 - 小米风格 */
.promo-banner {
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
padding: 12px 20px;
background: linear-gradient(135deg, #ff6900 0%, #ff8f00 100%);
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
border-radius: 0 0 20px 20px;
margin-bottom: 15px;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(255, 105, 0, 0.2);
}
.promo-content {
@ -48,18 +58,25 @@
font-weight: bold;
}
/* 搜索框样式 */
/* 搜索框样式 - 小米风格 */
.search-section {
padding: 0 20px 20px;
padding: 0 16px 16px;
}
.search-box {
background-color: #f5f5f5;
border-radius: 25px;
padding: 12px 16px;
background-color: #f8f8f8;
border-radius: 20px;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 10px;
gap: 8px;
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
}
.search-box:focus-within {
border-color: #ff6900;
box-shadow: 0 0 0 2px rgba(255, 105, 0, 0.1);
}
.search-box i {
@ -80,15 +97,16 @@
color: #999;
}
/* 主要产品展示区域 */
/* 主要产品展示区域 - 小米风格 */
.main-product-section {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
margin: 0 20px 20px;
border-radius: 16px;
padding: 25px;
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
margin: 0 16px 16px;
border-radius: 12px;
padding: 20px;
color: white;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.featured-product {
@ -122,19 +140,21 @@
}
.cta-button {
background: linear-gradient(135deg, #ff1744 0%, #d50000 100%);
background: linear-gradient(135deg, #ff6900 0%, #ff8f00 100%);
color: white;
border: none;
padding: 12px 20px;
border-radius: 25px;
font-size: 14px;
padding: 10px 18px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(255, 105, 0, 0.3);
}
.cta-button:hover {
transform: translateY(-2px);
.cta-button:active {
transform: scale(0.98);
box-shadow: 0 1px 4px rgba(255, 105, 0, 0.4);
}
.product-images {
@ -210,13 +230,14 @@
margin: 0;
}
/* 分类导航网格 */
/* 分类导航网格 - 小米风格 */
.category-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
padding: 20px;
margin-bottom: 10px;
gap: 16px;
padding: 16px;
margin-bottom: 8px;
background: white;
}
.category-item {
@ -233,15 +254,20 @@
}
.category-icon {
width: 50px;
height: 50px;
border-radius: 12px;
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
font-size: 20px;
margin-bottom: 6px;
font-size: 18px;
color: white;
transition: transform 0.2s ease;
}
.category-item:active .category-icon {
transform: scale(0.95);
}
.phone-icon {
@ -292,19 +318,21 @@
font-weight: 500;
}
/* 促销活动区域 */
/* 促销活动区域 - 小米风格 */
.promotion-section {
padding: 0 20px 20px;
padding: 0 16px 16px;
background: #f5f5f5;
}
.promo-card.large {
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
border-radius: 16px;
padding: 25px;
margin-bottom: 15px;
background: linear-gradient(135deg, #ff6900 0%, #ff8f00 100%);
border-radius: 12px;
padding: 20px;
margin-bottom: 12px;
color: white;
position: relative;
overflow: hidden;
box-shadow: 0 3px 15px rgba(255, 105, 0, 0.25);
}
.promo-header {
@ -333,14 +361,21 @@
}
.promo-btn {
background-color: rgba(0,0,0,0.2);
background-color: rgba(255,255,255,0.2);
color: white;
border: none;
padding: 10px 20px;
border-radius: 20px;
font-size: 14px;
border: 1px solid rgba(255,255,255,0.3);
padding: 8px 16px;
border-radius: 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
}
.promo-btn:active {
transform: scale(0.98);
background-color: rgba(255,255,255,0.3);
}
.tech-icon {
@ -354,20 +389,26 @@
border-radius: 50%;
}
/* 促销卡片网格 */
/* 促销卡片网格 - 小米风格 */
.promo-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
gap: 12px;
margin-bottom: 16px;
}
.promo-card.small {
background: white;
border-radius: 12px;
padding: 20px;
border-radius: 10px;
padding: 16px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.promo-card.small:active {
transform: scale(0.98);
box-shadow: 0 1px 6px rgba(0,0,0,0.12);
}
.speaker-visual,
@ -392,19 +433,25 @@
margin: 0;
}
/* 底部促销网格 */
/* 底部促销网格 - 小米风格 */
.bottom-promo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
gap: 12px;
}
.promo-item {
background: white;
border-radius: 12px;
padding: 20px;
border-radius: 10px;
padding: 16px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.promo-item:active {
transform: scale(0.98);
box-shadow: 0 1px 6px rgba(0,0,0,0.12);
}
.item-visual {

365
styles/mijiazhongce.css Normal file
View File

@ -0,0 +1,365 @@
/* 米家众测页面样式 */
/* 页面容器 */
#mijiazhongce-page {
background: #f5f5f5;
min-height: 100vh;
padding-bottom: 80px;
}
/* 顶部导航 */
.header {
background: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.header-left {
display: flex;
align-items: center;
gap: 15px;
}
.header-left i {
font-size: 18px;
cursor: pointer;
color: #333;
}
.page-title {
font-size: 18px;
font-weight: 600;
color: #333;
}
/* 众测产品列表 */
.test-products {
padding: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
/* 产品卡片 */
.product-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.product-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* 产品头部 */
.product-header {
padding: 10px 12px;
display: flex;
justify-content: space-between;
align-items: center;
background: #fafafa;
border-bottom: 1px solid #f0f0f0;
position: relative;
}
.product-period {
font-size: 12px;
color: #666;
font-weight: 500;
}
.product-status {
font-size: 10px;
padding: 2px 6px;
border-radius: 8px;
font-weight: 500;
}
.product-status.new {
background: #ff6900;
color: white;
}
.product-status.free {
background: #4ECDC4;
color: white;
}
.my-test {
position: absolute;
top: -5px;
right: 10px;
background: #4CAF50;
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 0 0 8px 8px;
font-weight: 500;
}
/* 产品图片 */
.product-image {
padding: 20px;
text-align: center;
background: #fafafa;
}
.product-image img {
width: 100%;
max-width: 120px;
height: auto;
border-radius: 8px;
}
/* 产品信息 */
.product-info {
padding: 15px 12px;
position: relative;
}
.status-badge {
position: absolute;
top: -8px;
left: 12px;
background: #999;
color: white;
font-size: 10px;
padding: 2px 8px;
border-radius: 10px;
font-weight: 500;
}
.status-badge.ended {
background: #999;
}
.status-badge.active {
background: #4CAF50;
}
.product-name {
font-size: 14px;
font-weight: 600;
color: #333;
margin: 8px 0;
line-height: 1.3;
}
.product-details {
display: flex;
justify-content: space-between;
align-items: center;
margin: 8px 0;
}
.market-price {
font-size: 11px;
color: #666;
}
.quota {
font-size: 11px;
color: #666;
}
/* 申请者信息 */
.applicant-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
}
.applicant-avatars {
display: flex;
gap: -8px;
}
.avatar {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #4A90E2, #667eea);
border: 2px solid white;
margin-left: -8px;
}
.avatar:first-child {
margin-left: 0;
}
.avatar:nth-child(2) {
background: linear-gradient(135deg, #4ECDC4, #44A08D);
}
.avatar:nth-child(3) {
background: linear-gradient(135deg, #f093fb, #f5576c);
}
.applicant-count {
font-size: 11px;
color: #666;
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 480px) {
.test-products {
padding: 15px;
gap: 12px;
}
.product-card {
border-radius: 10px;
}
.product-header {
padding: 8px 10px;
}
.product-period {
font-size: 11px;
}
.product-status {
font-size: 9px;
padding: 1px 4px;
}
.product-image {
padding: 15px;
}
.product-image img {
max-width: 100px;
}
.product-info {
padding: 12px 10px;
}
.product-name {
font-size: 13px;
}
.market-price,
.quota,
.applicant-count {
font-size: 10px;
}
.avatar {
width: 18px;
height: 18px;
}
}
/* 动画效果 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.product-card {
animation: fadeInUp 0.6s ease-out;
}
.product-card:nth-child(1) {
animation-delay: 0.1s;
}
.product-card:nth-child(2) {
animation-delay: 0.2s;
}
.product-card:nth-child(3) {
animation-delay: 0.3s;
}
.product-card:nth-child(4) {
animation-delay: 0.4s;
}
.product-card:nth-child(5) {
animation-delay: 0.5s;
}
.product-card:nth-child(6) {
animation-delay: 0.6s;
}
/* 特殊样式 */
.product-card:nth-child(2) {
position: relative;
}
.product-card:nth-child(2)::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #4CAF50, #45a049);
border-radius: 12px 12px 0 0;
}
/* 0元抽奖特殊样式 */
.product-card:has(.product-status.free) {
border: 2px solid #4ECDC4;
}
.product-card:has(.product-status.free) .product-header {
background: linear-gradient(135deg, #4ECDC4, #44A08D);
color: white;
}
.product-card:has(.product-status.free) .product-period {
color: white;
}
/* 滚动优化 */
.test-products {
scroll-behavior: smooth;
}
/* 加载状态 */
.product-card.loading {
opacity: 0.6;
pointer-events: none;
}
.product-card.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #f3f3f3;
border-top: 2px solid #ff6900;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

157
styles/profile.css
View File

@ -1,10 +1,16 @@
/* 个人资料页面专用样式 */
/* 个人资料页面专用样式 - 小米风格 */
/* 页面整体样式 */
#profile-page {
background-color: #f5f5f5;
min-height: 100vh;
}
/* 个人资料页面 */
.profile-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30px 20px;
color: #fff;
background: #f5f5f5;
padding: 20px 16px 16px;
color: #333;
}
.profile-info {
@ -72,39 +78,49 @@
text-align: center;
}
/* 功能卡片 */
/* 功能卡片 - 小米风格 */
.feature-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 20px;
gap: 16px;
padding: 16px;
background: white;
margin-bottom: 10px;
margin: 0 16px 12px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.feature-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
gap: 6px;
cursor: pointer;
padding: 8px 4px;
border-radius: 8px;
transition: background-color 0.2s;
}
.feature-card:active {
background-color: #f8f8f8;
}
.feature-icon {
width: 48px;
height: 48px;
border-radius: 12px;
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
font-size: 18px;
}
.feature-card span {
font-size: 12px;
font-size: 11px;
color: #666;
text-align: center;
font-weight: 500;
}
/* 摄像头推广 */
@ -144,19 +160,20 @@
opacity: 0.8;
}
/* 推广横幅 */
/* 推广横幅 - 小米风格 */
.promotion-banner {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
margin: 0 20px 20px 20px;
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
margin: 0 16px 12px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.promotion-content {
display: flex;
align-items: center;
padding: 20px;
gap: 20px;
padding: 16px;
gap: 16px;
}
.promotion-text {
@ -164,76 +181,79 @@
}
.promotion-text h3 {
margin: 0 0 5px 0;
font-size: 14px;
color: #1976d2;
font-weight: 500;
margin: 0 0 4px 0;
font-size: 13px;
color: #ff6900;
font-weight: 600;
}
.promotion-text h4 {
margin: 0 0 10px 0;
font-size: 18px;
color: #333;
margin: 0 0 8px 0;
font-size: 16px;
color: white;
font-weight: 600;
}
.promotion-tag {
display: flex;
align-items: center;
gap: 5px;
gap: 4px;
}
.promotion-tag span {
background: #ff5722;
background: #ff6900;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
padding: 3px 6px;
border-radius: 3px;
font-size: 11px;
font-weight: 600;
}
.tag-number {
background: #333 !important;
background: rgba(255,255,255,0.2) !important;
color: white !important;
}
.promotion-image {
width: 80px;
height: 60px;
width: 70px;
height: 50px;
}
.promotion-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
border-radius: 6px;
}
/* 菜单列表 */
/* 菜单列表 - 小米风格 */
.menu-list {
background-color: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.menu-section {
background: white;
margin: 0 20px;
margin: 0 16px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.menu-item {
display: flex;
align-items: center;
gap: 15px;
padding: 16px 20px;
border-bottom: 1px solid #f0f0f0;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid #f5f5f5;
cursor: pointer;
min-height: 64px;
min-height: 56px;
transition: background-color 0.2s;
}
.menu-item:hover {
.menu-item:active {
background-color: #f8f8f8;
}
@ -242,14 +262,14 @@
}
.menu-icon {
width: 32px;
height: 32px;
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
font-size: 13px;
flex-shrink: 0;
margin: 0;
position: relative;
@ -269,23 +289,23 @@
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
gap: 1px;
}
.menu-title {
font-size: 15px;
font-size: 14px;
color: #333;
font-weight: 500;
}
.menu-status {
font-size: 12px;
color: #666;
font-size: 11px;
color: #999;
}
.menu-item > i {
color: #ccc;
font-size: 12px;
color: #ddd;
font-size: 11px;
flex-shrink: 0;
align-self: center;
}
@ -319,19 +339,25 @@
display: flex;
justify-content: space-between;
align-items: center;
background: white;
padding: 16px;
border-radius: 12px;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.user-info {
display: flex;
align-items: center;
gap: 15px;
gap: 12px;
}
.user-avatar {
width: 60px;
height: 60px;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(135deg, #4A90E2, #357ABD);
}
.user-avatar img {
@ -341,27 +367,34 @@
}
.user-details h2 {
margin: 0 0 5px 0;
font-size: 20px;
margin: 0 0 4px 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
.user-details p {
margin: 0;
font-size: 14px;
color: #666;
font-size: 13px;
color: #999;
}
.header-actions {
display: flex;
gap: 15px;
gap: 12px;
}
.header-actions i {
font-size: 20px;
color: #666;
font-size: 18px;
color: #999;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: background-color 0.2s;
}
.header-actions i:active {
background-color: #f0f0f0;
}
/* 订单操作 */

368
styles/scene.css Normal file
View File

@ -0,0 +1,368 @@
/* 智能场景页面样式 */
/* 页面容器 */
#scene-page {
background: #f5f5f5;
min-height: 100vh;
padding-bottom: 80px;
}
/* 顶部导航 */
.header {
background: linear-gradient(135deg, #8B4513, #D2691E);
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
position: sticky;
top: 0;
z-index: 100;
}
.header-left {
display: flex;
align-items: center;
gap: 15px;
}
.header-left i {
font-size: 18px;
cursor: pointer;
}
.page-title {
font-size: 18px;
font-weight: 600;
}
.header-right {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.tab-item {
font-size: 13px;
padding: 4px 8px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.7;
white-space: nowrap;
flex-shrink: 0;
}
.tab-item.active {
background: rgba(255, 255, 255, 0.2);
opacity: 1;
}
/* 主要场景卡片 */
.main-scene-card {
margin: 20px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.scene-background {
background: linear-gradient(135deg, #8B4513, #D2691E, #CD853F);
padding: 30px;
position: relative;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.scene-content {
color: white;
}
.scene-devices {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.device-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
padding: 15px;
border-radius: 12px;
backdrop-filter: blur(10px);
transition: transform 0.3s ease;
}
.device-item:hover {
transform: translateY(-2px);
}
.device-item i {
font-size: 24px;
color: white;
}
.device-label {
font-size: 12px;
color: white;
text-align: center;
}
.scene-info h2 {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
color: white;
}
.scene-info p {
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
/* 推荐卡片容器 */
.recommendation-cards {
padding: 0 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* 推荐卡片 */
.recommendation-card {
background: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.recommendation-card:hover {
transform: translateY(-2px);
}
/* 卡片头部 */
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.card-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #ff6900, #ff8533);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
.card-header h3 {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
}
.card-subtitle {
font-size: 12px;
color: #999;
margin: 0;
margin-left: auto;
}
/* 产品网格 */
.product-grid {
display: flex;
gap: 15px;
overflow-x: auto;
padding-bottom: 10px;
}
.product-item {
flex: 0 0 auto;
width: 100px;
text-align: center;
}
.product-image {
width: 80px;
height: 80px;
background: #f8f8f8;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
transition: transform 0.3s ease;
}
.product-image:hover {
transform: scale(1.05);
}
.product-image i {
font-size: 24px;
color: #666;
}
.product-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.product-name {
font-size: 12px;
color: #333;
font-weight: 500;
line-height: 1.2;
}
.product-price {
font-size: 12px;
color: #ff6900;
font-weight: 600;
}
/* 特殊卡片样式 */
.recommendation-card:nth-child(1) .card-icon {
background: linear-gradient(135deg, #4ECDC4, #44A08D);
}
.recommendation-card:nth-child(2) .card-icon {
background: linear-gradient(135deg, #FFD700, #FFA500);
}
.recommendation-card:nth-child(3) .card-icon {
background: linear-gradient(135deg, #667eea, #764ba2);
}
.recommendation-card:nth-child(4) .card-icon {
background: linear-gradient(135deg, #f093fb, #f5576c);
}
/* 响应式设计 */
@media (max-width: 480px) {
.header {
padding: 12px 15px;
}
.header-right {
gap: 10px;
}
.tab-item {
font-size: 12px;
padding: 4px 8px;
}
.main-scene-card {
margin: 15px;
}
.scene-background {
padding: 20px;
min-height: 180px;
}
.scene-devices {
gap: 15px;
margin-bottom: 20px;
}
.device-item {
padding: 12px;
}
.device-item i {
font-size: 20px;
}
.scene-info h2 {
font-size: 20px;
}
.recommendation-cards {
padding: 0 15px;
gap: 15px;
}
.recommendation-card {
padding: 15px;
}
.product-grid {
gap: 12px;
}
.product-item {
width: 90px;
}
.product-image {
width: 70px;
height: 70px;
}
}
/* 动画效果 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.recommendation-card {
animation: fadeInUp 0.6s ease-out;
}
.recommendation-card:nth-child(1) {
animation-delay: 0.1s;
}
.recommendation-card:nth-child(2) {
animation-delay: 0.2s;
}
.recommendation-card:nth-child(3) {
animation-delay: 0.3s;
}
.recommendation-card:nth-child(4) {
animation-delay: 0.4s;
}
/* 滚动条样式 */
.product-grid::-webkit-scrollbar {
height: 4px;
}
.product-grid::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 2px;
}
.product-grid::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 2px;
}
.product-grid::-webkit-scrollbar-thumb:hover {
background: #999;
}

409
styles/user-profile.css Normal file
View File

@ -0,0 +1,409 @@
/* 个人资料页面样式 */
/* 页面容器 */
#user-profile-page {
background: #f5f5f5;
min-height: 100vh;
padding-bottom: 80px;
}
/* 顶部导航 */
.header {
background: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.header-left {
display: flex;
align-items: center;
gap: 15px;
}
.header-left i {
font-size: 18px;
cursor: pointer;
color: #333;
transition: color 0.3s ease;
}
.header-left i:hover {
color: #ff6900;
}
.page-title {
font-size: 18px;
font-weight: 600;
color: #333;
}
/* 用户头像区域 */
.profile-avatar-section {
background: white;
padding: 40px 20px;
text-align: center;
margin-bottom: 20px;
}
.avatar-container {
position: relative;
display: inline-block;
}
.user-avatar-large {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
border: 4px solid #f0f0f0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.user-avatar-large:hover {
transform: scale(1.05);
}
.user-avatar-large img {
width: 100%;
height: 100%;
object-fit: cover;
}
.camera-icon {
position: absolute;
bottom: 0;
right: 0;
width: 32px;
height: 32px;
background: #ff6900;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
cursor: pointer;
border: 3px solid white;
transition: background 0.3s ease;
}
.camera-icon:hover {
background: #e55a00;
}
/* 资料区域 */
.profile-section {
background: white;
margin-bottom: 20px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.section-title {
padding: 20px 20px 10px;
font-size: 16px;
font-weight: 600;
color: #333;
border-bottom: 1px solid #f0f0f0;
}
/* 资料项目 */
.profile-item {
display: flex;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #f8f8f8;
transition: background 0.3s ease;
}
.profile-item:last-child {
border-bottom: none;
}
.profile-item:hover {
background: #fafafa;
}
.item-label {
font-size: 15px;
color: #333;
min-width: 80px;
font-weight: 500;
}
.item-content {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.item-value {
font-size: 15px;
color: #666;
}
.item-value.masked {
color: #999;
}
.item-status {
font-size: 13px;
padding: 2px 8px;
border-radius: 10px;
font-weight: 500;
}
.item-status.bound {
background: #e8f5e8;
color: #4CAF50;
}
.profile-item i.fa-chevron-right {
font-size: 14px;
color: #ccc;
margin-left: 10px;
}
/* 小头像 */
.mini-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 2px solid #f0f0f0;
}
.mini-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 开关按钮 */
.toggle-switch {
width: 50px;
height: 28px;
background: #ddd;
border-radius: 14px;
position: relative;
cursor: pointer;
transition: background 0.3s ease;
}
.toggle-switch.active {
background: #4CAF50;
}
.toggle-slider {
width: 24px;
height: 24px;
background: white;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: transform 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.toggle-switch.active .toggle-slider {
transform: translateX(22px);
}
/* 注销登录区域 */
.logout-section {
padding: 40px 20px;
text-align: center;
}
.logout-btn {
width: 100%;
max-width: 300px;
padding: 15px;
background: white;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
}
.logout-btn:hover {
background: #f5f5f5;
border-color: #ccc;
}
.logout-btn:active {
background: #eeeeee;
}
/* 响应式设计 */
@media (max-width: 480px) {
.profile-avatar-section {
padding: 30px 15px;
}
.user-avatar-large {
width: 80px;
height: 80px;
}
.camera-icon {
width: 28px;
height: 28px;
font-size: 12px;
}
.section-title {
padding: 15px 15px 8px;
font-size: 15px;
}
.profile-item {
padding: 12px 15px;
}
.item-label {
font-size: 14px;
min-width: 70px;
}
.item-value {
font-size: 14px;
}
.mini-avatar {
width: 35px;
height: 35px;
}
.toggle-switch {
width: 45px;
height: 25px;
border-radius: 12.5px;
}
.toggle-slider {
width: 21px;
height: 21px;
}
.toggle-switch.active .toggle-slider {
transform: translateX(20px);
}
.logout-section {
padding: 30px 15px;
}
.logout-btn {
padding: 12px;
font-size: 15px;
}
}
/* 动画效果 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.profile-section {
animation: fadeInUp 0.6s ease-out;
}
.profile-section:nth-child(2) {
animation-delay: 0.1s;
}
.profile-section:nth-child(3) {
animation-delay: 0.2s;
}
.profile-section:nth-child(4) {
animation-delay: 0.3s;
}
.profile-avatar-section {
animation: fadeInUp 0.6s ease-out;
}
/* 点击效果 */
.profile-item:active {
background: #f0f0f0;
transform: scale(0.98);
}
.camera-icon:active {
transform: scale(0.95);
}
/* 加载状态 */
.profile-item.loading {
opacity: 0.6;
pointer-events: none;
}
.profile-item.loading::after {
content: '';
position: absolute;
right: 20px;
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #ff6900;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 特殊样式 */
.profile-item:has(.fa-chevron-right) {
cursor: pointer;
}
.profile-item:has(.fa-chevron-right):hover {
background: #f8f8f8;
}
.profile-item:has(.fa-chevron-right):hover i.fa-chevron-right {
color: #ff6900;
transform: translateX(2px);
}
/* 滚动优化 */
#user-profile-page {
scroll-behavior: smooth;
}
/* 焦点状态 */
.toggle-switch:focus {
outline: 2px solid #ff6900;
outline-offset: 2px;
}
.logout-btn:focus {
outline: 2px solid #ff6900;
outline-offset: 2px;
}

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>