feat: add user profile page and improve UI styling
This commit is contained in:
shenghuo2
214
mijiazhongce.html
Normal file
214
mijiazhongce.html
Normal 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>
|
||||
Reference in New Issue
Block a user