本文作者：99ANYc3cd6

小红书订单查询网页怎么用？找不到入口怎么办？订单信息出错怎么改？

99ANYc3cd6 01-30 16
小红书订单查询网页怎么用？找不到入口怎么办？订单信息出错怎么改？摘要： 整体风格: 采用小红书标志性的 红色 作为主色调，搭配白色背景和灰色辅助色，营造简洁、清新、有活力的感觉，页面布局:顶部导航栏：包含Logo、搜索框和用户头像，区：分为“订单状态筛...
  1. 整体风格: 采用小红书标志性的 红色 作为主色调，搭配白色背景和灰色辅助色，营造简洁、清新、有活力的感觉。
  2. 页面布局:
    • 顶部导航栏：包含Logo、搜索框和用户头像。
    • 区：分为“订单状态筛选”和“订单列表”两部分。
    • 订单卡片设计：清晰展示商品图片、名称、价格、下单时间、订单状态和操作按钮。
  3. 交互功能:
    • 状态筛选: 用户可以点击“全部”、“待付款”、“待发货”、“待收货”、“已完成”等标签来筛选订单。
    • 搜索功能: 可以通过订单号或商品名称进行搜索。
    • 订单详情: 点击订单卡片可以展开查看更详细的信息（如收货地址、订单编号等）。
    • 状态徽章: 用不同颜色的徽章（如红色、橙色、绿色）直观地显示订单状态。
    • 操作按钮: 根据订单状态显示不同的操作，如“去支付”、“查看物流”、“确认收货”、“再次购买”等。

小红书订单查询网页设计

下面是完整的HTML代码，您可以直接复制到一个 .html 文件中,然后用浏览器打开即可看到效果。

小红书订单查询网页怎么用？找不到入口怎么办？订单信息出错怎么改？
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的订单 - 小红书</title>
    <style>
        /* --- 全局样式 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
        }
        body {
            background-color: #f8f8f8;
            color: #333;
            line-height: 1.6;
        }
        a {
            text-decoration: none;
            color: inherit;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        /* --- 顶部导航栏 --- */
        .navbar {
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .navbar-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 60px;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #ff2442; /* 小红书红 */
        }
        .search-box {
            flex-grow: 1;
            max-width: 500px;
            margin: 0 40px;
            position: relative;
        }
        .search-box input {
            width: 100%;
            padding: 10px 40px 10px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }
        .search-box input:focus {
            border-color: #ff2442;
        }
        .search-box button {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #ff2442;
            color: white;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #ff2442;
            cursor: pointer;
        }
        /* --- 主要内容区 --- */
        .main-content {
            padding: 30px 0;
        }
        .order-header {
            background-color: #fff;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .order-header h2 {
            font-size: 20px;
            margin-bottom: 20px;
            font-weight: 600;
        }
        /* --- 状态筛选标签 --- */
        .filter-tabs {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        .tab-item {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            background-color: #f5f5f5;
            color: #666;
        }
        .tab-item:hover {
            background-color: #ffebeb;
            color: #ff2442;
        }
        .tab-item.active {
            background-color: #ff2442;
            color: white;
        }
        /* --- 订单列表 --- */
        .order-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .order-card {
            background-color: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
        }
        .order-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .order-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        .order-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .order-number {
            font-size: 14px;
            color: #999;
        }
        .order-time {
            font-size: 14px;
            color: #999;
        }
        .status-badge {
            padding: 5px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        .status-pending-payment { background-color: #ffebeb; color: #ff2442; }
        .status-pending-ship { background-color: #fff4e6; color: #fa8c16; }
        .status-pending-receive { background-color: #e6f7ff; color: #1890ff; }
        .status-completed { background-color: #f6ffed; color: #52c41a; }
        .order-card-body {
            display: flex;
            gap: 20px;
        }
        .order-product {
            display: flex;
            gap: 15px;
            flex: 1;
        }
        .product-img {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            object-fit: cover;
        }
        .product-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .product-name {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        .product-spec {
            font-size: 13px;
            color: #999;
        }
        .product-price {
            font-size: 18px;
            font-weight: bold;
            color: #ff2442;
        }
        .order-summary {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: space-between;
            min-width: 150px;
        }
        .order-total {
            font-size: 14px;
            color: #999;
        }
        .order-total-price {
            font-size: 20px;
            font-weight: bold;
            color: #ff2442;
        }
        .order-actions {
            display: flex;
            gap: 10px;
        }
        .btn {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            border: 1px solid #ddd;
            background-color: #fff;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-primary {
            border-color: #ff2442;
            color: #ff2442;
        }
        .btn-primary:hover {
            background-color: #ff2442;
            color: white;
        }
        .btn-secondary {
            border-color: #1890ff;
            color: #1890ff;
        }
        .btn-secondary:hover {
            background-color: #1890ff;
            color: white;
        }
        /* --- 订单详情展开区 (默认隐藏) --- */
        .order-details {
            display: none;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #f0f0f0;
        }
        .order-details.show {
            display: block;
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .detail-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 14px;
        }
        .detail-label {
            color: #999;
        }
        .detail-value {
            font-weight: 500;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <div class="container">
            <div class="navbar-content">
                <a href="#" class="logo">小红书</a>
                <div class="search-box">
                    <input type="text" placeholder="搜索订单号或商品名称">
                    <button>🔍</button>
                </div>
                <div class="user-avatar">U</div>
            </div>
        </div>
    </nav>
    <!-- 主要内容区 -->
    <main class="main-content container">
        <!-- 订单头部和筛选 -->
        <div class="order-header">
            <h2>我的订单</h2>
            <div class="filter-tabs">
                <div class="tab-item active" data-status="all">全部</div>
                <div class="tab-item" data-status="pending-payment">待付款</div>
                <div class="tab-item" data-status="pending-ship">待发货</div>
                <div class="tab-item" data-status="pending-receive">待收货</div>
                <div class="tab-item" data-status="completed">已完成</div>
            </div>
        </div>
        <!-- 订单列表 -->
        <div class="order-list" id="orderList">
            <!-- 订单卡片 1: 待付款 -->
            <div class="order-card" data-status="pending-payment">
                <div class="order-card-header">
                    <div class="order-info">
                        <span class="order-number">订单号: 202510280001</span>
                        <span class="order-time">下单时间: 2025-10-28 15:30</span>
                    </div>
                    <span class="status-badge status-pending-payment">待付款</span>
                </div>
                <div class="order-card-body">
                    <div class="order-product">
                        <img src="https://placehold.co/80x80/ff2442/ffffff?text=商品" alt="商品图片" class="product-img">
                        <div class="product-info">
                            <div>
                                <div class="product-name">【小红书自营】秋季新款连衣裙</div>
                                <div class="product-spec">颜色：黑色；尺码：M</div>
                            </div>
                            <div class="product-price">¥ 299.00</div>
                        </div>
                    </div>
                    <div class="order-summary">
                        <div class="order-total">共 1 件商品 合计:</div>
                        <div class="order-total-price">¥ 299.00</div>
                        <div class="order-actions">
                            <button class="btn btn-primary">去支付</button>
                        </div>
                    </div>
                </div>
                <!-- 订单详情 (默认隐藏) -->
                <div class="order-details">
                    <div class="detail-row">
                        <span class="detail-label">收货信息:</span>
                        <span class="detail-value">张三 138****8888 北京市朝阳区xxx街道</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">支付方式:</span>
                        <span class="detail-value">微信支付</span>
                    </div>
                </div>
            </div>
            <!-- 订单卡片 2: 待发货 -->
            <div class="order-card" data-status="pending-ship">
                <div class="order-card-header">
                    <div class="order-info">
                        <span class="order-number">订单号: 202510270002</span>
                        <span class="order-time">下单时间: 2025-10-27 10:15</span>
                    </div>
                    <span class="status-badge status-pending-ship">待发货</span>
                </div>
                <div class="order-card-body">
                    <div class="order-product">
                        <img src="https://placehold.co/80x80/fa8c16/ffffff?text=商品" alt="商品图片" class="product-img">
                        <div class="product-info">
                            <div>
                                <div class="product-name">网红同款咖啡杯</div>
                                <div class="product-spec">颜色：白色；容量：350ml</div>
                            </div>
                            <div class="product-price">¥ 89.00</div>
                        </div>
                    </div>
                    <div class="order-summary">
                        <div class="order-total">共 1 件商品 合计:</div>
                        <div class="order-total-price">¥ 89.00</div>
                        <div class="order-actions">
                            <button class="btn btn-secondary">查看物流</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 订单卡片 3: 待收货 -->
            <div class="order-card" data-status="pending-receive">
                <div class="order-card-header">
                    <div class="order-info">
                        <span class="order-number">订单号: 202510250003</span>
                        <span class="order-time">下单时间: 2025-10-25 09:00</span>
                    </div>
                    <span class="status-badge status-pending-receive">待收货</span>
                </div>
                <div class="order-card-body">
                    <div class="order-product">
                        <img src="https://placehold.co/80x80/1890ff/ffffff?text=商品" alt="商品图片" class="product-img">
                        <div class="product-info">
                            <div>
                                <div class="product-name">SK-II 神仙水 神仙精华</div>
                                <div class="product-spec">规格：230ml</div>
                            </div>
                            <div class="product-price">¥ 1599.00</div>
                        </div>
                    </div>
                    <div class="order-summary">
                        <div class="order-total">共 1 件商品 合计:</div>
                        <div class="order-total-price">¥ 1599.00</div>
                        <div class="order-actions">
                            <button class="btn btn-secondary">查看物流</button>
                            <button class="btn btn-primary">确认收货</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 订单卡片 4: 已完成 -->
            <div class="order-card" data-status="completed">
                <div class="order-card-header">
                    <div class="order-info">
                        <span class="order-number">订单号: 202510200004</span>
                        <span class="order-time">下单时间: 2025-10-20 20:45</span>
                    </div>
                    <span class="status-badge status-completed">已完成</span>
                </div>
                <div class="order-card-body">
                    <div class="order-product">
                        <img src="https://placehold.co/80x80/52c41a/ffffff?text=商品" alt="商品图片" class="product-img">
                        <div class="product-info">
                            <div>
                                <div class="product-name">YSL 小金条 口红</div>
                                <div class="product-spec">色号：21</div>
                            </div>
                            <div class="product-price">¥ 380.00</div>
                        </div>
                    </div>
                    <div class="order-summary">
                        <div class="order-total">共 1 件商品 合计:</div>
                        <div class="order-total-price">¥ 380.00</div>
                        <div class="order-actions">
                            <button class="btn btn-secondary">再次购买</button>
                            <button class="btn">评价</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script>
        // --- 筛选功能 ---
        const tabItems = document.querySelectorAll('.tab-item');
        const orderCards = document.querySelectorAll('.order-card');
        tabItems.forEach(tab => {
            tab.addEventListener('click', () => {
                // 1. 移除所有标签的 active 类
                tabItems.forEach(t => t.classList.remove('active'));
                // 2. 给当前点击的标签添加 active 类
                tab.classList.add('active');
                // 3. 获取筛选状态
                const status = tab.getAttribute('data-status');
                // 4. 遍历所有订单卡片，根据状态显示/隐藏
                orderCards.forEach(card => {
                    if (status === 'all' || card.getAttribute('data-status') === status) {
                        card.style.display = 'flex';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });
        // --- 订单详情展开/收起功能 ---
        orderCards.forEach(card => {
            card.addEventListener('click', (event) => {
                // 如果点击的是按钮，则不触发展开/收起
                if (event.target.tagName === 'BUTTON') {
                    return;
                }
                const details = card.querySelector('.order-details');
                details.classList.toggle('show');
            });
        });
        // --- 搜索功能 (简单示例) ---
        const searchInput = document.querySelector('.search-box input');
        searchInput.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            orderCards.forEach(card => {
                const orderNumber = card.querySelector('.order-number').textContent.toLowerCase();
                const productName = card.querySelector('.product-name').textContent.toLowerCase();
                if (orderNumber.includes(searchTerm) || productName.includes(searchTerm)) {
                    card.style.display = 'flex';
                } else {
                    // 如果没有匹配，且当前标签不是“全部”，则隐藏
                    const activeTab = document.querySelector('.tab-item.active');
                    if (activeTab.getAttribute('data-status') !== 'all') {
                        // 如果不是全部标签，则根据筛选状态隐藏
                        const status = activeTab.getAttribute('data-status');
                        if (card.getAttribute('data-status') === status) {
                             card.style.display = 'flex';
                        } else {
                             card.style.display = 'none';
                        }
                    } else {
                        card.style.display = 'none';
                    }
                }
            });
        });
    </script>
</body>
</html>

设计亮点和功能说明

  1. 视觉还原度:

    • 小红书红: 使用 #ff2442 作为品牌色，应用于Logo、按钮、价格等关键元素。
    • 卡片式设计: 每个订单都是一个独立的卡片，信息层级清晰,符合现代网页设计趋势。
    • 圆角与阴影: 大量使用圆角和柔和的阴影，让界面看起来更友好、更精致。

  2. 交互体验:

    • 悬停效果: 鼠标悬停在订单卡片上时，会有轻微上浮和阴影加深的动画,提供视觉反馈。
    • 状态筛选: 点击顶部的状态标签，可以实时筛选订单,交互流畅。
    • 详情展开: 点击订单卡片任意位置（除了按钮），可以展开查看收货地址等详细信息,增加了页面的信息密度和可探索性。
    • 即时搜索: 在搜索框输入内容，订单列表会实时过滤,非常方便用户快速找到特定订单。

  3. 信息架构:

    • 订单头部: 清晰展示订单号、下单时间和最重要的订单状态。
    • 商品信息: 左侧展示商品图片、名称、规格，右侧展示价格和操作按钮,布局合理。
    • 状态徽章: 使用不同颜色区分订单状态,一目了然。
    • 操作按钮: 根据订单状态智能显示相关操作（如待付款显示“去支付”，已完成显示“再次购买”）,引导用户下一步行为。

这个设计不仅是一个静态的展示，更是一个功能齐全、交互流畅的网页原型,可以作为实际项目开发的优秀参考。

小红书订单查询网页怎么用？找不到入口怎么办？订单信息出错怎么改？
（图片来源网络，侵删）
小红书订单查询网页怎么用？找不到入口怎么办？订单信息出错怎么改？
（图片来源网络，侵删）

标签：

文章版权及转载声明

作者:99ANYc3cd6本文地址：https://chumoping.net/post/21965.html发布于 01-30
文章转载或复制请以超链接形式并注明出处初梦运营网

海报
阅读
分享