console
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary: #6a11cb;
--secondary: #2575fc;
--accent: #ff4e8d;
--light: #f8f9fa;
--dark: #212529;
--gray: #6c757d;
--light-gray: #e9ecef;
--card-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
color: var(--dark);
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
}
.container {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: white;
border-radius: 15px;
box-shadow: var(--card-shadow);
margin-bottom: 25px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo h1 {
font-size: 28px;
background: linear-gradient(45deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
}
.logo i {
font-size: 28px;
color: var(--primary);
}
.search-bar {
flex: 1;
max-width: 500px;
margin: 0 20px;
position: relative;
}
.search-bar input {
width: 100%;
padding: 14px 20px;
padding-left: 50px;
border: none;
background: var(--light-gray);
border-radius: 30px;
font-size: 16px;
}
.search-bar i {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--gray);
font-size: 18px;
}
.header-icons {
display: flex;
gap: 20px;
}
.icon-btn {
position: relative;
background: none;
border: none;
font-size: 22px;
color: var(--dark);
cursor: pointer;
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background: var(--accent);
color: white;
font-size: 12px;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.main-content {
display: flex;
gap: 25px;
flex: 1;
}
.sidebar {
width: 280px;
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: var(--card-shadow);
height: fit-content;
}
.sidebar h2 {
font-size: 22px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--light-gray);
color: var(--primary);
}
.categories {
list-style: none;
}
.categories li {
padding: 12px 0;
border-bottom: 1px solid var(--light-gray);
}
.categories li:last-child {
border-bottom: none;
}
.categories a {
text-decoration: none;
color: var(--dark);
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
transition: var(--transition);
}
.categories a:hover {
color: var(--primary);
padding-left: 5px;
}
.categories i {
width: 24px;
text-align: center;
}
.price-filter {
margin-top: 25px;
}
.price-range {
width: 100%;
margin: 15px 0;
}
.price-values {
display: flex;
justify-content: space-between;
font-size: 14px;
color: var(--gray);
}
.products {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
}
.product-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: var(--transition);
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.product-image {
height: 280px;
width: 100%;
background: linear-gradient(45deg, #eef2f5, #d6e4f0);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.product-image img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
transition: var(--transition);
}
.product-card:hover .product-image img {
transform: scale(1.05);
}
.product-badge {
position: absolute;
top: 15px;
right: 15px;
background: var(--accent);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
}
.product-info {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.product-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.product-category {
color: var(--gray);
font-size: 14px;
margin-bottom: 12px;
}
.product-price {
font-size: 22px;
font-weight: 700;
color: var(--primary);
margin-bottom: 15px;
}
.product-price span {
font-size: 16px;
color: var(--gray);
text-decoration: line-through;
margin-left: 8px;
}
.product-actions {
display: flex;
gap: 10px;
margin-top: auto;
}
.btn {
flex: 1;
padding: 12px;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-cart {
background: var(--primary);
color: white;
}
.btn-cart:hover {
background: var(--secondary);
}
.btn-wishlist {
background: var(--light-gray);
color: var(--dark);
}
.btn-wishlist:hover {
background: #dcdcdc;
}
.cart-sidebar {
position: fixed;
top: 0;
right: -400px;
width: 380px;
height: 100vh;
background: white;
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: var(--transition);
padding: 25px;
display: flex;
flex-direction: column;
}
.cart-sidebar.active {
right: 0;
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid var(--light-gray);
}
.cart-header h2 {
font-size: 24px;
color: var(--primary);
}
.close-cart {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--gray);
}
.cart-items {
flex: 1;
overflow-y: auto;
margin-bottom: 20px;
}
.cart-item {
display: flex;
padding: 15px 0;
border-bottom: 1px solid var(--light-gray);
}
.cart-item-image {
width: 80px;
height: 80px;
background: var(--light-gray);
border-radius: 10px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.cart-item-image img {
max-width: 70%;
max-height: 70%;
}
.cart-item-info {
flex: 1;
}
.cart-item-title {
font-weight: 600;
margin-bottom: 5px;
}
.cart-item-price {
color: var(--primary);
font-weight: 700;
margin-bottom: 10px;
}
.cart-item-actions {
display: flex;
align-items: center;
gap: 10px;
}
.quantity-btn {
width: 28px;
height: 28px;
border: none;
background: var(--light-gray);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.item-quantity {
min-width: 30px;
text-align: center;
}
.remove-item {
background: none;
border: none;
color: var(--accent);
margin-left: auto;
cursor: pointer;
}
.cart-total {
padding: 20px 0;
border-top: 2px solid var(--light-gray);
display: flex;
justify-content: space-between;
font-size: 20px;
font-weight: 700;
}
.cart-total span {
color: var(--primary);
}
.checkout-btn {
width: 100%;
padding: 16px;
background: var(--primary);
color: white;
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.checkout-btn:hover {
background: var(--secondary);
}
footer {
background: white;
border-radius: 15px;
padding: 25px;
margin-top: 25px;
box-shadow: var(--card-shadow);
text-align: center;
color: var(--gray);
}
.footer-links {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 20px;
}
.footer-links a {
color: var(--dark);
text-decoration: none;
transition: var(--transition);
}
.footer-links a:hover {
color: var(--primary);
}
@media (max-width: 1200px) {
.products {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.main-content {
flex-direction: column;
}
.sidebar {
width: 100%;
}
.products {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.search-bar {
max-width: 300px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<i class="fas fa-tshirt"></i>
<h1>时尚衣橱</h1>
</div>
<div class="search-bar">
<i class="fas fa-search"></i>
<input type="text" placeholder="搜索服装、品牌、品类...">
</div>
<div class="header-icons">
<button class="icon-btn">
<i class="fas fa-user"></i>
</button>
<button class="icon-btn">
<i class="fas fa-heart"></i>
</button>
<button class="icon-btn" id="cartButton">
<i class="fas fa-shopping-cart"></i>
<span class="cart-count">3</span>
</button>
</div>
</header>
<div class="main-content">
<aside class="sidebar">
<h2>商品分类</h2>
<ul class="categories">
<li><a href="#"><i class="fas fa-tshirt"></i> 上衣</a></li>
<li><a href="#"><i class="fas fa-vest"></i> 外套</a></li>
<li><a href="#"><i class="fas fa-ankh"></i> 连衣裙</a></li>
<li><a href="#"><i class="fas fa-socks"></i> 裤子</a></li>
<li><a href="#"><i class="fas fa-shoe-prints"></i> 鞋子</a></li>
<li><a href="#"><i class="fas fa-umbrella-beach"></i> 泳装</a></li>
<li><a href="#"><i class="fas fa-ring"></i> 配饰</a></li>
<li><a href="#"><i class="fas fa-gem"></i> 珠宝</a></li>
</ul>
<div class="price-filter">
<h2>价格范围</h2>
<input type="range" min="0" max="1000" value="500" class="price-range">
<div class="price-values">
<span>¥0</span>
<span>¥1000</span>
</div>
</div>
<h2>促销活动</h2>
<div style="margin-top: 15px; padding: 15px; background: #fff8f9; border-radius: 10px; border: 2px dashed #ffc1d0;">
<h3 style="color: #ff4e8d; margin-bottom: 10px;">限时优惠</h3>
<p style="font-size: 14px;">全场满¥399减¥50</p>
<p style="font-size: 14px; margin-top: 5px;">新用户首单立减¥30</p>
</div>
</aside>
<main class="products">
<div class="product-card">
<div class="product-image">
<span class="product-badge">热卖</span>
<img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8Y2xvdGhpbmcsdHNoaXJ0fHx8fHx8MTY5MDQ2ODgxMA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=600" alt="纯棉T恤">
</div>
<div class="product-info">
<h3 class="product-title">纯棉简约T恤</h3>
<p class="product-category">上衣 · 基本款</p>
<p class="product-price">¥129 <span>¥169</span></p>
<div class="product-actions">
<button class="btn btn-cart"><i class="fas fa-shopping-cart"></i> 加入购物车</button>
<button class="btn btn-wishlist"><i class="fas fa-heart"></i></button>
</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?crop