💻 源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>白马商城 - 好货等你来!</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f5f5;
            min-width: 1190px;
        }

        a {
            text-decoration: none;
            color: #666;
        }

        a:hover {
            color: #ff5000;
        }

        ul, li {
            list-style: none;
        }

        /* ========== 顶部导航栏 ========== */
        .top-nav {
            background-color: #f5f5f5;
            border-bottom: 1px solid #eee;
            height: 35px;
            line-height: 35px;
            font-size: 12px;
        }

        .top-nav-inner {
            width: 1190px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .top-nav-left a {
            margin-right: 15px;
            color: #6c6c6c;
        }

        .top-nav-left a:hover {
            color: #ff5000;
        }

        .top-nav-right a {
            margin-left: 15px;
            color: #6c6c6c;
        }

        .top-nav-right a:hover {
            color: #ff5000;
        }

        .top-nav-right .highlight {
            color: #ff5000;
            font-weight: bold;
        }

        .separator {
            color: #ddd;
            margin: 0 5px;
        }

        /* ========== 搜索头部区域 ========== */
        .header {
            background-color: #fff;
            padding: 15px 0;
        }

        .header-inner {
            width: 1190px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            width: 190px;
        }

        .logo h1 {
            font-size: 36px;
            color: #ff5000;
            font-weight: bold;
            letter-spacing: 2px;
        }

        .logo h1 span {
            color: #ff5000;
        }

        .search-box {
            flex: 1;
            margin-left: 100px;
            position: relative;
        }

        .search-tabs {
            display: flex;
            margin-bottom: 5px;
            font-size: 12px;
        }

        .search-tabs span {
            color: #ff5000;
            margin-right: 20px;
            cursor: pointer;
            font-weight: bold;
        }

        .search-input-wrap {
            display: flex;
            border: 2px solid #ff5000;
            border-radius: 100px;
            overflow: hidden;
            height: 40px;
        }

        .search-input-wrap input {
            flex: 1;
            border: none;
            outline: none;
            padding: 0 20px;
            font-size: 14px;
            color: #333;
        }

        .search-input-wrap input::placeholder {
            color: #bbb;
        }

        .search-input-wrap button {
            width: 74px;
            background: linear-gradient(to right, #ff9000, #ff5000);
            border: none;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            font-weight: bold;
            letter-spacing: 2px;
        }

        .search-input-wrap button:hover {
            opacity: 0.9;
        }

        .header-qrcode {
            text-align: center;
            font-size: 12px;
            color: #ff5000;
            margin-left: 30px;
        }

        .header-qrcode .qr-icon {
            font-size: 28px;
            margin-bottom: 3px;
        }

        /* ========== 主导航菜单 ========== */
        .main-nav {
            background: linear-gradient(to bottom, #ff9000, #ff5000);
            height: 40px;
        }

        .main-nav-inner {
            width: 1190px;
            margin: 0 auto;
            display: flex;
            height: 100%;
        }

        .all-category {
            width: 200px;
            background-color: #ff5000;
            color: #fff;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            position: relative;
        }

        .nav-links {
            flex: 1;
            display: flex;
            align-items: center;
            padding-left: 20px;
        }

        .nav-links a {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            margin-right: 25px;
            line-height: 40px;
        }

        .nav-links a:hover {
            color: #fff;
            text-decoration: underline;
        }

        /* ========== 主体内容区 ========== */
        .main-content {
            width: 1190px;
            margin: 10px auto;
            display: flex;
        }

        /* ---- 左侧分类菜单 ---- */
        .category-menu {
            width: 200px;
            background-color: #fff;
            border: 1px solid #ff5000;
        }

        .category-menu li {
            padding: 12px 15px;
            font-size: 13px;
            color: #333;
            cursor: pointer;
            border-bottom: 1px dashed #f0f0f0;
            transition: all 0.2s;
        }

        .category-menu li:hover {
            background-color: #fff0e8;
            color: #ff5000;
        }

        .category-menu li:last-child {
            border-bottom: none;
        }

        .category-menu li .arrow {
            float: right;
            color: #ccc;
            font-size: 10px;
        }

        /* ---- 中间轮播区 ---- */
        .banner-area {
            flex: 1;
            margin-left: 10px;
        }

        .carousel {
            width: 720px;
            height: 400px;
            background: linear-gradient(135deg, #ff6b6b, #ff8e53, #ffb347);
            border-radius: 8px;
            position: relative;
            overflow: hidden;
        }

        .carousel-inner {
            display: flex;
            width: 100%;
            height: 100%;
            animation: slide 12s infinite;
        }

        .carousel-slide {
            min-width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            flex-shrink: 0;
        }

        .carousel-slide:nth-child(1) {
            background: linear-gradient(135deg, #ff6b6b, #ff8e53);
        }

        .carousel-slide:nth-child(2) {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
        }

        .carousel-slide:nth-child(3) {
            background: linear-gradient(135deg, #a18cd1, #fbc2eb);
        }

        .carousel-slide:nth-child(4) {
            background: linear-gradient(135deg, #fad0c4, #ffd1ff);
        }

        .carousel-slide h2 {
            font-size: 48px;
            margin-bottom: 15px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

        .carousel-slide p {
            font-size: 22px;
            opacity: 0.9;
        }

        .carousel-slide .btn-buy {
            margin-top: 20px;
            padding: 12px 40px;
            background-color: #fff;
            color: #ff5000;
            border-radius: 25px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .carousel-slide .btn-buy:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
        }

        @keyframes slide {
            0%, 20% { transform: translateX(0); }
            25%, 45% { transform: translateX(-100%); }
            50%, 70% { transform: translateX(-200%); }
            75%, 95% { transform: translateX(-300%); }
            100% { transform: translateX(0); }
        }

        .carousel-dots {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }

        .carousel-dots span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.5);
        }

        .carousel-dots span.active {
            background-color: #fff;
            width: 20px;
            border-radius: 4px;
        }

        /* ---- 右侧面板 ---- */
        .right-panel {
            width: 250px;
            margin-left: 10px;
        }

        .user-card {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            margin-bottom: 10px;
        }

        .user-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #ffe0d0;
            margin: 0 auto 10px;
            line-height: 60px;
            font-size: 30px;
        }

        .user-card .hello {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }

        .user-card .login-btn {
            display: inline-block;
            padding: 6px 25px;
            background: linear-gradient(to right, #ff9000, #ff5000);
            color: #fff;
            border-radius: 20px;
            font-size: 13px;
            margin-bottom: 5px;
            cursor: pointer;
        }

        .user-card .extra-links {
            font-size: 12px;
            color: #999;
            margin-top: 8px;
        }

        .user-card .extra-links a {
            color: #999;
        }

        .notice-board {
            background-color: #fff;
            border-radius: 8px;
            padding: 12px;
            font-size: 12px;
        }

        .notice-board h4 {
            font-size: 14px;
            color: #333;
            margin-bottom: 10px;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 8px;
        }

        .notice-board li {
            padding: 5px 0;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .notice-board li::before {
            content: "●";
            color: #ff5000;
            margin-right: 5px;
            font-size: 8px;
        }

        /* ========== 双列快捷入口区 ========== */
        .quick-entry {
            width: 1190px;
            margin: 8px auto;
            background-color: #ff5000;
            border-radius: 8px;
            display: flex;
            overflow: hidden;
        }

        .quick-entry-item {
            flex: 1;
            text-align: center;
            padding: 10px 0;
            color: #fff;
            font-size: 13px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .quick-entry-item:hover {
            background-color: rgba(255,255,255,0.15);
        }

        .quick-entry-item .icon {
            font-size: 24px;
            margin-bottom: 3px;
            display: block;
        }

        /* ========== 商品分类展示区 ========== */
        .section {
            width: 1190px;
            margin: 20px auto;
        }

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .section-header h2 {
            font-size: 22px;
            color: #333;
            position: relative;
            padding-left: 12px;
        }

        .section-header h2::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background-color: #ff5000;
            border-radius: 2px;
        }

        .section-header .more {
            font-size: 13px;
            color: #999;
            cursor: pointer;
        }

        .section-header .more:hover {
            color: #ff5000;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
        }

        .product-card {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid #f0f0f0;
        }

        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border-color: #ff5000;
        }

        .product-img {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #ffecd2, #fcb69f);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: #fff;
        }

        .product-img.img2 { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
        .product-img.img3 { background: linear-gradient(135deg, #d4fc79, #96e6a1); }
        .product-img.img4 { background: linear-gradient(135deg, #fbc2eb, #a18cd1); }
        .product-img.img5 { background: linear-gradient(135deg, #ffd1ff, #fad0c4); }

        .product-info {
            padding: 12px;
        }

        .product-info h4 {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-info .price {
            font-size: 20px;
            color: #ff5000;
            font-weight: bold;
        }

        .product-info .price i {
            font-style: normal;
            font-size: 12px;
        }

        .product-info .sales {
            font-size: 12px;
            color: #999;
            margin-left: 8px;
        }

        /* ========== 特色楼层 ========== */
        .floor {
            width: 1190px;
            margin: 15px auto;
            display: flex;
            gap: 10px;
        }

        .floor-left {
            width: 200px;
            background: linear-gradient(180deg, #ff8a65, #ff5722);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            padding: 30px 20px;
            text-align: center;
        }

        .floor-left h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }

        .floor-left p {
            font-size: 13px;
            opacity: 0.8;
            margin-bottom: 15px;
        }

        .floor-left .floor-btn {
            padding: 8px 25px;
            background-color: #fff;
            color: #ff5722;
            border-radius: 20px;
            font-size: 13px;
            font-weight: bold;
        }

        .floor-right {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .floor-right .product-card .product-img {
            height: 160px;
        }

        /* ========== 底部信息 ========== */
        .footer {
            background-color: #fff;
            margin-top: 30px;
            padding: 30px 0 15px;
            border-top: 2px solid #ff5000;
        }

        .footer-inner {
            width: 1190px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .footer-col h4 {
            font-size: 14px;
            color: #333;
            margin-bottom: 12px;
        }

        .footer-col a {
            display: block;
            font-size: 12px;
            color: #999;
            margin-bottom: 6px;
        }

        .footer-col a:hover {
            color: #ff5000;
        }

        .footer-bottom {
            width: 1190px;
            margin: 20px auto 0;
            padding-top: 15px;
            border-top: 1px solid #eee;
            text-align: center;
            font-size: 12px;
            color: #999;
        }

        .footer-bottom p {
            margin-bottom: 5px;
        }

        /* ========== 右侧固定工具条 ========== */
        .side-toolbar {
            position: fixed;
            right: 20px;
            bottom: 100px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .side-toolbar .tool-item {
            width: 50px;
            height: 50px;
            background-color: #fff;
            border: 1px solid #eee;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .side-toolbar .tool-item:hover {
            background-color: #fff0e8;
            color: #ff5000;
            border-color: #ff5000;
        }

        .side-toolbar .tool-item .tool-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }

        .side-toolbar .back-top {
            background-color: #ff5000;
            color: #fff;
            border: none;
        }

        .side-toolbar .back-top:hover {
            background-color: #ff6a28;
            color: #fff;
        }
    </style>
</head>
<body>

    <!-- ==================== 顶部导航 ==================== -->
    <div class="top-nav">
        <div class="top-nav-inner">
            <div class="top-nav-left">
                <a href="#">中国大陆</a>
                <span class="separator">|</span>
                <a href="#">亲,请登录</a>
                <a href="#">免费注册</a>
            </div>
            <div class="top-nav-right">
                <a href="#">我的订单</a>
                <span class="separator">|</span>
                <a href="#">🛒 购物车</a>
                <span class="separator">|</span>
                <a href="#">⭐ 收藏夹</a>
                <span class="separator">|</span>
                <a href="#">联系客服</a>
                <span class="separator">|</span>
                <a href="#">网站导航</a>
                <span class="separator">|</span>
                <a href="#" class="highlight">📱 手机版</a>
            </div>
        </div>
    </div>

    <!-- ==================== 头部搜索 ==================== -->
    <div class="header">
        <div class="header-inner">
            <div class="logo">
                <h1>🐴 白马商城</h1>
            </div>
            <div class="search-box">
                <div class="search-tabs">
                    <span>宝贝</span>
                    <span>店铺</span>
                </div>
                <div class="search-input-wrap">
                    <input type="text" placeholder="搜索白马商城商品:手机、电脑、衣服、零食...">
                    <button>搜索</button>
                </div>
            </div>
            <div class="header-qrcode">
                <div class="qr-icon">📱</div>
                <div>扫码逛商城</div>
            </div>
        </div>
    </div>

    <!-- ==================== 主导航 ==================== -->
    <div class="main-nav">
        <div class="main-nav-inner">
            <div class="all-category">☰ 全部商品分类</div>
            <div class="nav-links">
                <a href="#">🏠 首页</a>
                <a href="#">🔥 今日爆款</a>
                <a href="#">🎫 领券中心</a>
                <a href="#">🎁 聚划算</a>
                <a href="#">🌍 海外购</a>
                <a href="#">📦 拍卖</a>
                <a href="#">🏪 逛店</a>
                <a href="#">💬 社区</a>
            </div>
        </div>
    </div>

    <!-- ==================== 主体内容 ==================== -->
    <div class="main-content">
        <!-- 左侧分类菜单 -->
        <ul class="category-menu">
            <li>👗 女装 / 男装 / 内衣 <span class="arrow">▶</span></li>
            <li>👟 鞋靴 / 箱包 / 配件 <span class="arrow">▶</span></li>
            <li>👶 母婴 / 童装 / 玩具 <span class="arrow">▶</span></li>
            <li>📱 手机 / 数码 / 电脑 <span class="arrow">▶</span></li>
            <li>🏠 家电 / 家居 / 家具 <span class="arrow">▶</span></li>
            <li>💄 美妆 / 个护 / 清洁 <span class="arrow">▶</span></li>
            <li>🍔 食品 / 生鲜 / 零食 <span class="arrow">▶</span></li>
            <li>⌚ 手表 / 珠宝 / 眼镜 <span class="arrow">▶</span></li>
            <li>🚗 汽车 / 用品 / 配件 <span class="arrow">▶</span></li>
            <li>📚 图书 / 文具 / 乐器 <span class="arrow">▶</span></li>
            <li>🏸 运动 / 户外 / 健身 <span class="arrow">▶</span></li>
            <li>🛒 更多分类 <span class="arrow">▶</span></li>
        </ul>

        <!-- 中间轮播广告 -->
        <div class="banner-area">
            <div class="carousel">
                <div class="carousel-inner">
                    <div class="carousel-slide">
                        <h2>🎉 白马商城 618 年中大促</h2>
                        <p>爆款直降 满300减50 上不封顶</p>
                        <div class="btn-buy">立即抢购</div>
                    </div>
                    <div class="carousel-slide">
                        <h2>📱 数码焕新季</h2>
                        <p>5G手机低至999元 24期免息</p>
                        <div class="btn-buy">去看看</div>
                    </div>
                    <div class="carousel-slide">
                        <h2>👗 时尚女装节</h2>
                        <p>新品首发 全场3折起</p>
                        <div class="btn-buy">逛一逛</div>
                    </div>
                    <div class="carousel-slide">
                        <h2>🍔 吃货狂欢日</h2>
                        <p>零食满199立减100</p>
                        <div class="btn-buy">囤货去</div>
                    </div>
                </div>
                <div class="carousel-dots">
                    <span class="active"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>

        <!-- 右侧面板 -->
        <div class="right-panel">
            <div class="user-card">
                <div class="user-avatar">😊</div>
                <div class="hello">Hi, 欢迎来到白马商城</div>
                <div class="login-btn">登录 / 注册</div>
                <div class="extra-links">
                    <a href="#">新人福利</a> | <a href="#">领红包</a>
                </div>
            </div>
            <div class="notice-board">
                <h4>📢 白马头条</h4>
                <ul>
                    <li>618大促倒计时,全场包邮</li>
                    <li>白马自营,品质保证放心购</li>
                    <li>新人专享大礼包,注册即送</li>
                    <li>每日秒杀,9.9元抢好货</li>
                    <li>会员积分翻倍,限时活动中</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- ==================== 快捷入口 ==================== -->
    <div class="quick-entry">
        <div class="quick-entry-item">
            <span class="icon">👕</span> 服饰
        </div>
        <div class="quick-entry-item">
            <span class="icon">📱</span> 手机
        </div>
        <div class="quick-entry-item">
            <span class="icon">💄</span> 美妆
        </div>
        <div class="quick-entry-item">
            <span class="icon">🏠</span> 家电
        </div>
        <div class="quick-entry-item">
            <span class="icon">🍔</span> 食品
        </div>
        <div class="quick-entry-item">
            <span class="icon">👶</span> 母婴
        </div>
        <div class="quick-entry-item">
            <span class="icon">🏸</span> 运动
        </div>
        <div class="quick-entry-item">
            <span class="icon">🌍</span> 海淘
        </div>
        <div class="quick-entry-item">
            <span class="icon">🎫</span> 领券
        </div>
        <div class="quick-entry-item">
            <span class="icon">🔥</span> 直播
        </div>
    </div>

    <!-- ==================== 热卖推荐 ==================== -->
    <div class="section">
        <div class="section-header">
            <h2>🔥 热卖推荐</h2>
            <span class="more">查看更多 ▶</span>
        </div>
        <div class="product-grid">
            <div class="product-card">
                <div class="product-img">📱</div>
                <div class="product-info">
                    <h4>最新款5G智能手机 超长续航 高清拍照</h4>
                    <span class="price"><i>¥</i>2999</span>
                    <span class="sales">已售 1.2万+</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img img2">💻</div>
                <div class="product-info">
                    <h4>轻薄笔记本电脑 14英寸高清屏 学生办公</h4>
                    <span class="price"><i>¥</i>4599</span>
                    <span class="sales">已售 8600+</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img img3">👟</div>
                <div class="product-info">
                    <h4>新款潮流运动鞋 透气网面 男女同款</h4>
                    <span class="price"><i>¥</i>199</span>
                    <span class="sales">已售 3.5万+</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img img4">💄</div>
                <div class="product-info">
                    <h4>大牌口红套装 滋润显色 持久不脱色</h4>
                    <span class="price"><i>¥</i>168</span>
                    <span class="sales">已售 2.1万+</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img img5">🎧</div>
                <div class="product-info">
                    <h4>无线降噪蓝牙耳机 超长续航 高品质音效</h4>
                    <span class="price"><i>¥</i>399</span>
                    <span class="sales">已售 9800+</span>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 数码家电楼层 ==================== -->
    <div class="floor">
        <div class="floor-left">
            <h3>📱 数码家电</h3>
            <p>品质好货<br>爆款直降</p>
            <span class="floor-btn">进入会场</span>
        </div>
        <div class="floor-right">
            <div class="product-card">
                <div class="product-img">📷</div>
                <div class="product-info">
                    <h4>单反数码相机 高清专业</h4>
                    <span class="price"><i>¥</i>5299</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img img2">🖥️</div>
                <div class="product-info">
                    <h4>27寸曲面显示器 2K</h4>
                    <span class="price"><i>¥</i>1299</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img img3">⌚</div>
                <div class="product-info">
                    <h4>智能手表 心率血氧监测</h4>
                    <span class="price"><i>¥</i>699</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img img4">🔌</div>
                <div class="product-info">
                    <h4>65W氮化镓快充充电器</h4>
                    <span class="price"><i>¥</i>89</span>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 服饰美妆楼层 ==================== -->
    <div class="floor">
        <div class="floor-left" style="background: linear-gradient(180deg, #f77062, #fe5196);">
            <h3>👗 服饰美妆</h3>
            <p>潮流穿搭<br>美丽焕新</p>
            <span class="floor-btn" style="color: #fe5196;">进入会场</span>
        </div>
        <div class="floor-right">
            <div class="product-card">
                <div class="product-img img5">👗</div>
                <div class="product-info">
                    <h4>夏季碎花连衣裙 法式复古</h4>
                    <span class="price"><i>¥</i>129</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img">🧥</div>
                <div class="product-info">
                    <h4>男士商务休闲夹克 春秋款</h4>
                    <span class="price"><i>¥</i>259</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img img2">👜</div>
                <div class="product-info">
                    <h4>时尚单肩斜挎包 百搭款式</h4>
                    <span class="price"><i>¥</i>189</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img img3">💎</div>
                <div class="product-info">
                    <h4>S925纯银项链 锁骨链</h4>
                    <span class="price"><i>¥</i>99</span>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 精选好物 ==================== -->
    <div class="section">
        <div class="section-header">
            <h2>✨ 为你精选</h2>
            <span class="more">换一批 🔄</span>
        </div>
        <div class="product-grid">
            <div class="product-card">
                <div class="product-img img2">🍵</div>
                <div class="product-info">
                    <h4>高山云雾绿茶 明前新茶 500g礼盒装</h4>
                    <span class="price"><i>¥</i>88</span>
                    <span class="sales">已售 5.8万+</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img img3">🧸</div>
                <div class="product-info">
                    <h4>毛绒公仔玩偶 大号抱枕 生日礼物</h4>
                    <span class="price"><i>¥</i>49</span>
                    <span class="sales">已售 4.2万+</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img img4">📦</div>
                <div class="product-info">
                    <h4>收纳箱套装 加厚塑料 大容量整理箱</h4>
                    <span class="price"><i>¥</i>39</span>
                    <span class="sales">已售 7.1万+</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img img5">💡</div>
                <div class="product-info">
                    <h4>LED护眼台灯 国AA级 学生学习阅读</h4>
                    <span class="price"><i>¥</i>159</span>
                    <span class="sales">已售 1.6万+</span>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img">🧴</div>
                <div class="product-info">
                    <h4>氨基酸洗面奶 温和清洁 男女通用</h4>
                    <span class="price"><i>¥</i>59</span>
                    <span class="sales">已售 9.3万+</span>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 底部 ==================== -->
    <div class="footer">
        <div class="footer-inner">
            <div class="footer-col">
                <h4>购物指南</h4>
                <a href="#">购物流程</a>
                <a href="#">会员介绍</a>
                <a href="#">常见问题</a>
                <a href="#">联系客服</a>
            </div>
            <div class="footer-col">
                <h4>配送方式</h4>
                <a href="#">上门自提</a>
                <a href="#">快递运输</a>
                <a href="#">物流配送</a>
                <a href="#">运费说明</a>
            </div>
            <div class="footer-col">
                <h4>支付方式</h4>
                <a href="#">货到付款</a>
                <a href="#">在线支付</a>
                <a href="#">分期付款</a>
                <a href="#">白条支付</a>
            </div>
            <div class="footer-col">
                <h4>售后服务</h4>
                <a href="#">退换货政策</a>
                <a href="#">退换货流程</a>
                <a href="#">价格保护</a>
                <a href="#">投诉建议</a>
            </div>
            <div class="footer-col">
                <h4>关于我们</h4>
                <a href="#">公司介绍</a>
                <a href="#">加入我们</a>
                <a href="#">联系我们</a>
                <a href="#">合作招商</a>
            </div>
            <div class="footer-col">
                <h4>📱 白马商城APP</h4>
                <a href="#">iOS 下载</a>
                <a href="#">Android 下载</a>
                <a href="#">小程序</a>
                <a href="#">公众号</a>
            </div>
        </div>
        <div class="footer-bottom">
            <p>© 2026 白马商城 BaiMaMall.com 版权所有 | 经营许可证编号:浙B2-20260001</p>
            <p>地址:浙江省杭州市余杭区白马大道666号 | 客服电话:400-800-8888</p>
            <p>本站所有商品信息仅供参考,具体以实物为准</p>
        </div>
    </div>

    <!-- ==================== 右侧工具栏 ==================== -->
    <div class="side-toolbar">
        <div class="tool-item">
            <span class="tool-icon">👤</span> 我的
        </div>
        <div class="tool-item">
            <span class="tool-icon">🛒</span> 购物车
        </div>
        <div class="tool-item">
            <span class="tool-icon">⭐</span> 收藏
        </div>
        <div class="tool-item">
            <span class="tool-icon">📋</span> 足迹
        </div>
        <div class="tool-item">
            <span class="tool-icon">💬</span> 客服
        </div>
        <div class="tool-item back-top" onclick="window.scrollTo({top:0,behavior:'smooth'})">
            <span class="tool-icon">⬆</span> 顶部
        </div>
    </div>
<script>
 window.difyChatbotConfig = {
  token: 'mkTipJcmLGNVJ8cN',
  baseUrl: 'http://8.216.37.111',
  inputs: {
    // You can define the inputs from the Start node here
    // key is the variable name
    // e.g.
    // name: "NAME"
  },
  systemVariables: {
    // user_id: 'YOU CAN DEFINE USER ID HERE',
    // conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
  },
  userVariables: {
    // avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
    // name: 'YOU CAN DEFINE USER NAME HERE',
  },
 }
</script>
<script
 src="http://8.216.37.111/embed.min.js"
 id="mkTipJcmLGNVJ8cN"
 defer>
</script>
<style>
  #dify-chatbot-bubble-button {
    background-color: #1C64F2 !important;
  }
  #dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
  }
</style>
</body>
</html>