init: add initial project files for Mi Home smart home interface clone
This commit is contained in:
shenghuo2
222
mall.html
Normal file
222
mall.html
Normal file
@ -0,0 +1,222 @@
|
||||
<!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/main.css">
|
||||
<link rel="stylesheet" href="styles/mall.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="mall-page">
|
||||
<!-- 顶部促销横幅 -->
|
||||
<div class="promo-banner">
|
||||
<div class="promo-content">
|
||||
<span class="promo-text">秒杀低至 5折</span>
|
||||
<div class="promo-icon">
|
||||
<i class="fas fa-running"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification-badge">3</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-section">
|
||||
<div class="search-box">
|
||||
<i class="fas fa-search"></i>
|
||||
<input type="text" placeholder="pp棉拖芯">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主要产品展示 -->
|
||||
<div class="main-product-section">
|
||||
<!-- K80 至尊版手机 -->
|
||||
<div class="featured-product">
|
||||
<div class="product-content">
|
||||
<h2 class="product-title">K80 至尊版</h2>
|
||||
<p class="product-subtitle">高端旗舰 豪华质感</p>
|
||||
<p class="product-description">还约换更多重的好礼</p>
|
||||
<button class="cta-button">预约最新旗舰手机</button>
|
||||
</div>
|
||||
<div class="product-images">
|
||||
<div class="phone-mockup phone-1"></div>
|
||||
<div class="phone-mockup phone-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品卡片组 -->
|
||||
<div class="product-cards">
|
||||
<div class="product-card">
|
||||
<div class="card-image kpad-image"></div>
|
||||
<div class="card-content">
|
||||
<h3>K Pad</h3>
|
||||
<p>玩游戏很好礼</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="card-image mix-flip-image"></div>
|
||||
<div class="card-content">
|
||||
<h3>XIAOMI MIX Flip 2</h3>
|
||||
<p>预约最新旗舰手机</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="card-image smart-device-image"></div>
|
||||
<div class="card-content">
|
||||
<h3>智能家电技术新</h3>
|
||||
<p>全屋智能新体验</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类导航 -->
|
||||
<div class="category-grid">
|
||||
<div class="category-item">
|
||||
<div class="category-icon phone-icon">
|
||||
<i class="fas fa-mobile-alt"></i>
|
||||
</div>
|
||||
<span>小米手机</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon tv-icon">
|
||||
<i class="fas fa-tv"></i>
|
||||
</div>
|
||||
<span>小米家电</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon grid-icon">
|
||||
<i class="fas fa-th"></i>
|
||||
</div>
|
||||
<span>分类</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon percent-icon">
|
||||
<i class="fas fa-percent"></i>
|
||||
</div>
|
||||
<span>小米众筹</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon smart-icon">
|
||||
<i class="fas fa-brain"></i>
|
||||
</div>
|
||||
<span>米家智能</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-grid">
|
||||
<div class="category-item">
|
||||
<div class="category-icon clock-icon">
|
||||
<i class="fas fa-clock"></i>
|
||||
</div>
|
||||
<span>有品秒杀</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon home-icon">
|
||||
<i class="fas fa-home"></i>
|
||||
</div>
|
||||
<span>生活电器</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon filter-icon">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<span>净水滤芯</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon xiaomi-icon">
|
||||
<span>MI</span>
|
||||
</div>
|
||||
<span>小米自营</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon shirt-icon">
|
||||
<i class="fas fa-tshirt"></i>
|
||||
</div>
|
||||
<span>鞋服饰品</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 促销活动区域 -->
|
||||
<div class="promotion-section">
|
||||
<!-- 小米618活动 -->
|
||||
<div class="promo-card large">
|
||||
<div class="promo-header">
|
||||
<span class="promo-badge">小米618</span>
|
||||
</div>
|
||||
<h3>科技生态 一步到位</h3>
|
||||
<p>部分有礼200减30</p>
|
||||
<button class="promo-btn">立即查看</button>
|
||||
<div class="promo-visual">
|
||||
<div class="tech-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 其他促销卡片 -->
|
||||
<div class="promo-cards-grid">
|
||||
<div class="promo-card small">
|
||||
<div class="speaker-visual"></div>
|
||||
<h4>米家音箱专场</h4>
|
||||
<p>20点抢5折券</p>
|
||||
</div>
|
||||
<div class="promo-card small">
|
||||
<div class="card-visual"></div>
|
||||
<h4>米家好卡</h4>
|
||||
<p>限时19元享优惠</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部促销网格 -->
|
||||
<div class="bottom-promo-grid">
|
||||
<div class="promo-item">
|
||||
<div class="item-visual appliance-visual"></div>
|
||||
<h5>小家电盛典</h5>
|
||||
<p>全场立减500元</p>
|
||||
</div>
|
||||
<div class="promo-item">
|
||||
<div class="item-visual quality-visual"></div>
|
||||
<h5>品质大家电</h5>
|
||||
<p>全场优惠400元</p>
|
||||
</div>
|
||||
<div class="promo-item">
|
||||
<div class="item-visual shopping-visual"></div>
|
||||
<h5>美食好物购</h5>
|
||||
<p>五折优惠1500元</p>
|
||||
</div>
|
||||
<div class="promo-item">
|
||||
<div class="item-visual lifestyle-visual"></div>
|
||||
<h5>智能生活好物</h5>
|
||||
<p>全场立减2000元</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<nav class="bottom-nav">
|
||||
<div class="nav-item" onclick="location.href='index.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 active">
|
||||
<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