<!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>