diff --git a/components/shopping/jingdong/shopping-card.vue b/components/shopping/jingdong/shopping-card.vue
new file mode 100644
index 0000000..055472d
--- /dev/null
+++ b/components/shopping/jingdong/shopping-card.vue
@@ -0,0 +1,461 @@
+<template>
+    <view class="shopping-card">
+        <!-- Header -->
+        <view class="card-header">
+            <view class="shop-info">
+                <view class="tag self-tag" v-if="item.shopType === 'self'">自营</view>
+                <image class="jd-tag" v-if="item.shopType === 'jd'" src="/static/image/shopping/jingdong/JD.png">JD
+                </image>
+                <text class="shop-name">{{ item.shopName }}</text>
+                <uni-icons class="right-icon" type="right" size="12" color="#1A1A1A"></uni-icons>
+            </view>
+            <view class="order-status">
+                <view v-if="item.statusType === 'warning'" class="status-warning">
+                    <image style="width: 116rpx;height: 30rpx;" src="/static/image/shopping/jingdong/dengdaifukuan.png">
+                    </image>
+                    <text class="status-desc" v-if="item.statusDesc">{{ item.statusDesc }}</text>
+                </view>
+                <text v-else class="status-text" :class="item.statusColor || 'gray'">{{ item.status }}</text>
+            </view>
+        </view>
+
+        <!-- Tracking -->
+        <view class="tracking-box" v-if="item.trackingTitle || item.trackingDesc">
+            <view class="tracking-content">
+                <view class="tracking-header">
+                    <image class="truck-icon" v-if="!item.trackingIcon"
+                        src="/static/image/shopping/jingdong/cangku.png">
+                    </image>
+                    <image class="truck-icon" :src="item.trackingIcon" mode="aspectFit" v-else></image>
+                    <text class="tracking-title">{{ item.trackingTitle }}</text>
+                </view>
+                <text class="tracking-desc" v-if="item.trackingDesc">{{ item.trackingDesc }}</text>
+                <text class="tracking-time">{{ item.trackingTime }}</text>
+            </view>
+            <uni-icons class="right-icon" type="right" size="14" color="#3D3D3D"></uni-icons>
+        </view>
+
+        <!-- Product -->
+        <view class="product-box">
+            <image class="product-img" :src="item.image" mode="aspectFill"></image>
+            <view class="product-info">
+                <text class="product-title">{{ item.title }}</text>
+                <text class="product-desc" v-if="item.desc">{{ item.desc }}</text>
+                <view class="product-tags" v-if="item.tags && item.tags.length">
+                    <text class="tag" v-for="(tag, index) in item.tags" :key="index">{{ tag }}</text>
+                </view>
+            </view>
+            <view class="product-price-box">
+                <view class="price-wrap wx-font-regular">
+                    <text class="price-symbol">￥</text>
+                    <text class="price-num">{{ item.price }}</text>
+                </view>
+                <text class="product-count">共{{ item.count }}件</text>
+            </view>
+        </view>
+
+        <!-- Promo -->
+        <view class="promo-box" :class="{ 'plus-promo': item.promoType === 'plus' }"
+            v-if="item.promoType || item.promoText || item.promoHighlight">
+            <template v-if="item.promoType === 'plus'">
+                <view class="plus-row">
+                    <image class="plus-tag" src="/static/image/shopping/jingdong/plus.png"></image>
+                    <text class="promo-text">{{ item.promoText }}</text>
+                </view>
+                <text class="promo-action">解锁权益 <uni-icons type="right" size="10" color="#654629"></uni-icons> </text>
+            </template>
+            <template v-else>
+                <text class="promo-text text-basic">本单可享 <text class="highlight">{{
+                    item.promoHighlight }}</text>，快去支付吧~</text>
+            </template>
+        </view>
+
+        <!-- Footer -->
+        <view class="footer-actions">
+            <view class="more-box" v-if="item.hasMore">
+                <text class="more-text">更多</text>
+            </view>
+            <view class="empty-space" v-else></view>
+            <view class="action-buttons">
+                <view class="btn" :class="btn.type || 'default'" v-for="(btn, index) in item.buttons" :key="index"
+                    @click="$emit('btnClick', btn)">
+                    {{ btn.text }}
+                    <view class="btn-badge" v-if="btn.badge">{{ btn.badge }}</view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+    item: {
+        type: Object,
+        required: true,
+        default: () => ({})
+    }
+});
+</script>
+<style>
+@import "/common/main.css";
+</style>
+<style lang="less" scoped>
+.shopping-card {
+    background-color: #FFFFFF;
+    border-radius: 24rpx;
+    padding: 34rpx 18rpx 30rpx;
+    margin: 0 0 16rpx 0;
+    box-sizing: border-box;
+
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 24rpx;
+
+        .shop-info {
+            flex: 1;
+            width: 20px;
+            display: flex;
+            align-items: center;
+
+            .tag {
+                font-size: 20rpx;
+                padding: 2rpx 6rpx;
+                border-radius: 4rpx;
+                margin-right: 8rpx;
+                font-weight: 500;
+                color: #FFFFFF;
+                line-height: 26rpx;
+                flex-shrink: 0;
+
+                &.self-tag {
+                    background-color: #FC3538;
+                }
+            }
+
+            .jd-tag {
+                width: 32rpx;
+                height: 32rpx;
+                flex-shrink: 0;
+                margin-right: 12rpx;
+            }
+
+            .shop-name {
+                white-space: nowrap;
+                font-size: 26rpx;
+                line-height: 26rpx;
+                color: #1A1A1A;
+                font-weight: 700;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+            }
+
+            .right-icon {
+                margin-right: 48rpx;
+            }
+        }
+
+        .order-status {
+            flex-shrink: 0;
+            font-size: 26rpx;
+
+            .status-warning {
+                display: flex;
+                align-items: center;
+                background-color: #FEE4E5;
+                border-radius: 24rpx;
+                height: 30rpx;
+                padding-right: 8rpx;
+
+                .status-badge {
+                    background-color: #E40C24;
+                    color: #FFFFFF;
+                    font-size: 22rpx;
+                    padding: 0 12rpx;
+                    height: 32rpx;
+                    line-height: 32rpx;
+                    border-radius: 16rpx;
+                    margin-right: 8rpx;
+                }
+
+                .status-desc {
+                    font-size: 22rpx;
+                    line-height: 24rpx;
+                    margin-left: 4rpx;
+                    color: #ED1C04;
+                }
+            }
+
+            .status-text {
+                font-size: 22rpx;
+
+                &.red {
+                    color: #ED1C04;
+                }
+
+                &.gray {
+                    color: #999999;
+                }
+
+                &.black {
+                    color: #1A1A1A;
+                }
+            }
+        }
+    }
+
+    .tracking-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #F9F9F9;
+        padding: 12rpx 20rpx 18rpx;
+        border-radius: 12rpx;
+        margin-bottom: 24rpx;
+
+        .tracking-content {
+            flex: 1;
+
+            .tracking-header {
+                display: flex;
+                align-items: center;
+                height: 32rpx;
+                margin-bottom: 14rpx;
+
+                .truck-icon {
+                    width: 32rpx;
+                    height: 32rpx;
+                    margin-right: 10rpx;
+                }
+
+                .tracking-title {
+                    font-size: 26rpx;
+                    color: #1A1A1A;
+                    font-weight: 700;
+                }
+            }
+
+            .tracking-desc {
+                font-size: 22rpx;
+                line-height: 22rpx;
+                color: #1A1A1A;
+                display: block;
+
+            }
+
+            .tracking-time {
+                margin-top: 12rpx;
+                font-size: 22rpx;
+                line-height: 22rpx;
+                color: #767676;
+            }
+        }
+
+        .right-icon {}
+    }
+
+    .product-box {
+        display: flex;
+        margin-bottom: 24rpx;
+        align-items: center;
+
+        .product-img {
+            width: 144rpx;
+            height: 144rpx;
+            border-radius: 12rpx;
+            flex-shrink: 0;
+            margin-right: 14rpx;
+            background-color: #F5F5F5;
+        }
+
+        .product-info {
+            flex: 1;
+            width: 100px;
+            display: flex;
+            flex-direction: column;
+
+            .product-title {
+                font-size: 26rpx;
+                color: #1A1A1A;
+                line-height: 36rpx;
+                white-space: nowrap;
+                text-overflow: hidden;
+                overflow: hidden;
+            }
+
+            .product-desc {
+                font-size: 22rpx;
+                line-height: 24rpx;
+                margin-top: 8rpx;
+                color: #87868E;
+                overflow: hidden;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                line-clamp: 2;
+                text-overflow: ellipsis;
+            }
+
+            .product-tags {
+                display: flex;
+                flex-wrap: wrap;
+                margin-top: 8rpx;
+
+                .tag {
+                    font-size: 20rpx;
+                    line-height: 20rpx;
+                    color: #C59446;
+                    margin-right: 12rpx;
+                }
+            }
+        }
+
+        .product-price-box {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            margin-left: 20rpx;
+
+            .price-wrap {
+                color: #1A1A1A;
+                font-size: 30rpx;
+                margin-bottom: 4rpx;
+                display: flex;
+                align-items: baseline;
+
+                .price-symbol {
+                    font-weight: 500;
+                }
+
+                .price-num {
+                    font-weight: 600;
+                }
+            }
+
+            .product-count {
+                font-size: 22rpx;
+                color: #87868E;
+            }
+        }
+    }
+
+    .promo-box {
+        background-color: #FEEFF2;
+        padding: 14rpx;
+        border-radius: 4rpx;
+        margin-bottom: 24rpx;
+        font-size: 22rpx;
+        line-height: 22rpx;
+
+        &.plus-promo {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #FFEDDF;
+            height: 52rpx;
+            padding: 0 16rpx;
+            border-radius: 8rpx;
+
+            .plus-row {
+                display: flex;
+                align-items: center;
+
+                .plus-tag {
+                    width: 56rpx;
+                    height: 26rpx;
+                    margin-right: 8rpx;
+                }
+
+                .promo-text {
+                    font-size: 22rpx;
+                    line-height: 22rpx;
+                    color: #654629;
+                }
+            }
+
+            .promo-action {
+                font-size: 22rpx;
+                color: #A3824E;
+            }
+        }
+
+        .text-basic {
+            font-size: 22rpx;
+            line-height: 22rpx;
+            color: #1A1A1A;
+            display: block;
+
+            .highlight {
+                font-size: 22rpx;
+                line-height: 22rpx;
+                color: #E31700;
+            }
+        }
+    }
+
+    .footer-actions {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .more-box {
+            display: flex;
+            align-items: center;
+
+            .more-text {
+                font-size: 24rpx;
+                color: #999999;
+            }
+        }
+
+        .empty-space {
+            flex: 1;
+        }
+
+        .action-buttons {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+
+            .btn {
+                position: relative;
+                height: 52rpx;
+                line-height: 52rpx;
+                padding: 0 24rpx;
+                border-radius: 8rpx;
+                font-size: 24rpx;
+                margin-left: 16rpx;
+                border: 1rpx solid #C7C7C7;
+                color: #1A1A1A;
+                background-color: #FFFFFF;
+
+                &.primary {
+                    border-color: #ED1C04;
+                    color: #ED1C04;
+                }
+
+                .btn-badge {
+                    box-sizing: border-box;
+                    position: absolute;
+                    top: -8px;
+                    right: -1px;
+                    background-image: url(/static/image/shopping/jingdong/bubble.png);
+                    background-size: 100% 100%;
+                    background-repeat: no-repeat;
+                    color: #FFFFFF;
+                    font-size: 10px;
+                    line-height: 11px;
+                    padding: 2px 4px 0;
+                    white-space: nowrap;
+                    width: 45px;
+                    height: 22px;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/pages.json b/pages.json
index 4fb605e..ccc2172 100644
--- a/pages.json
+++ b/pages.json
@@ -54,7 +54,8 @@
 				{
 					"path": "jingdong/list-index",
 					"style": {
-						"navigationBarTitleText": "京东列表首页"
+						"navigationBarTitleText": "京东列表首页",
+						"navigationStyle": "custom"
 					}
 				}
 			]
diff --git a/pages/balance/transfer/transfer.vue b/pages/balance/transfer/transfer.vue
index 5a3c116..a816a27 100644
--- a/pages/balance/transfer/transfer.vue
+++ b/pages/balance/transfer/transfer.vue
@@ -213,7 +213,10 @@ import {
 	util,
 	numberUtil
 } from '@/utils/common.js';
-const { appContext, proxy } = getCurrentInstance();
+const {
+	appContext,
+	proxy
+} = getCurrentInstance();
 
 const statusBarHeight = ref(0);
 const editPopup = ref(null);
@@ -604,7 +607,6 @@ const goBack = () => {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-top: 20rpx;
 }
 
 .status-box {
@@ -631,8 +633,8 @@ const goBack = () => {
 	display: flex;
 	align-items: baseline;
 	color: #fff;
-	margin-top: 40rpx;
-	margin-bottom: 72rpx;
+	margin-top: 20rpx;
+	margin-bottom: 60rpx;
 
 	.symbol {
 		font-size: 68rpx;
@@ -669,6 +671,7 @@ const goBack = () => {
 
 .content-section {
 	padding: 24rpx;
+	padding-bottom: 16rpx;
 	background-color: #F5F5F5;
 	border-radius: 30rpx 30rpx 0 0;
 }
@@ -981,7 +984,7 @@ const goBack = () => {
 }
 
 .footer-section {
-	padding: 8rpx 40rpx 0;
+	padding: 0px 40rpx 0;
 	display: flex;
 	justify-content: center;
 	padding-bottom: 24rpx;
diff --git a/pages/shopping/jingdong/list-index.vue b/pages/shopping/jingdong/list-index.vue
index fa264ae..9ecc1c6 100644
--- a/pages/shopping/jingdong/list-index.vue
+++ b/pages/shopping/jingdong/list-index.vue
@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view class="top-fixed">
 		<nav-bar title="京东" bgColor="#F0F4F9">
 			<template v-slot:center>
 				<view class="search-box">
@@ -8,24 +8,231 @@
 					<input class="input" type="text" placeholder="搜索我的订单" disabled />
 				</view>
 			</template>
+			<template v-slot:right>
+				<view class="right-box">
+					<image class="gift icon" src="/static/image/shopping/jingdong/gift.png" mode="aspectFit">
+					</image>
+					<image class="more icon" src="/static/image/shopping/jingdong/more.png" mode="aspectFit">
+					</image>
+				</view>
+			</template>
 		</nav-bar>
-
+		<view class="tab-list">
+			<view class="tab-item" v-for="(item, index) in tabList" :key="index"
+				:class="{ active: currentTab === index }" @click="switchTab(index)">
+				<text class="title">{{ item.name }}</text>
+				<view class="line" v-if="currentTab === index"></view>
+				<image v-if="item.icon" class="badge-icon" :src="item.icon" mode="heightFix"></image>
+			</view>
+		</view>
+		<view class="filter-wrapper">
+			<scroll-view class="filter-scroll" scroll-x="true" :show-scrollbar="false">
+				<view class="filter-list">
+					<view class="filter-item" v-for="(item, index) in filterList" :key="index"
+						:class="{ active: currentFilter === index }" @click="switchFilter(index)">
+						<text class="text">{{ item.name }}</text>
+						<text class="close-icon" v-if="currentFilter === index">×</text>
+					</view>
+				</view>
+			</scroll-view>
+			<view class="filter-btn">
+				<image class="filter-icon" src="/static/image/shopping/jingdong/shaixuan.png" mode="aspectFit"></image>
+				<text class="filter-text">筛选</text>
+			</view>
+		</view>
+	</view>
+	<view class="content" :style="{ paddingTop: contentPaddingTop }">
+		<shopping-card v-for="(item, index) in mockOrderList" :key="index" :item="item"></shopping-card>
+	</view>
+	<view class="bottom-fixed">
+		<view class="bottom-item">
+			<image class="like-icon" src="/static/image/shopping/jingdong/weinituijian.png" mode="aspectFit"></image>
+			<text>为你推荐</text>
+		</view>
+		<view class="upload-screenshot-box">
+			<view class="upload-screenshot-content">
+				<image class="upload-screenshot" src="/static/image/common/upload-screenshot.png" mode="aspectFit">
+				</image>
+				<view class="upload-screenshot-text">长按替换截图</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script setup>
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import ShoppingCard from '@/components/shopping/jingdong/shopping-card.vue';
+
+const contentPaddingTop = ref('0px');
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	setTimeout(() => {
+		const query = uni.createSelectorQuery().in(instance.proxy);
+		query.select('.top-fixed').boundingClientRect(data => {
+			if (data) {
+				contentPaddingTop.value = data.height + 'px';
+			}
+		}).exec();
+	}, 100);
+});
+
+const currentTab = ref(0);
+const tabList = ref([
+	{ name: '全部' },
+	{ name: '购物' },
+	{ name: '秒送', icon: '/static/image/shopping/jingdong/waimai.png' },
+	{ name: '服务', icon: '/static/image/shopping/jingdong/jiazheng.png', disabled: true }
+]);
+
+const switchTab = (index) => {
+	if (tabList.value[index].disabled) return;
+	currentTab.value = index;
+};
+
+const currentFilter = ref(1);
+const filterList = ref([
+	{ name: '待付款' },
+	{ name: '待收货' },
+	{ name: '待使用' },
+	{ name: '已完成' },
+	{ name: '待评价' },
+	{ name: '已取消' }
+]);
+
+const switchFilter = (index) => {
+	currentFilter.value = index;
+};
+
+const mockOrderList = ref([
+	{
+		shopType: 'self',
+		shopName: '安野屋 (AARYE) 京联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
+		statusType: 'warning',
+		statusDesc: '20小时11分钟',
+		image: '/static/image/shopping/jingdong/product1.png',
+		title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
+		desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
+		tags: ['无理由退货政策'],
+		price: '69.00',
+		count: 1,
+		promoType: 'text',
+		promoHighlight: '白条支付券0.5元优惠券',
+		buttons: [
+			{ text: '取消订单', type: 'default' },
+			{ text: '查看发票', type: 'default' },
+			{ text: '修改订单', type: 'default' },
+			{ text: '去支付', type: 'primary', badge: '减0.5元' }
+		]
+	},
+	{
+		shopType: 'none',
+		shopName: '甜小南旗舰店',
+		status: '正在出库',
+		statusColor: 'red',
+		trackingTitle: '仓库处理中',
+		trackingDesc: '预计 3月12日24:00 前发货，3月15日 24:00 前送达',
+		trackingTime: '2026-03-10 15:14:30',
+		image: '/static/image/shopping/jingdong/product1.png',
+		title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
+		desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
+		tags: ['无理由退货政策'],
+		price: '69.00',
+		count: 1,
+		promoType: 'plus',
+		promoText: '告别凑单, 享免运优惠',
+		buttons: [
+			{ text: '查看发票', type: 'default' },
+			{ text: '再次购买', type: 'default' },
+			{ text: '申请退款', type: 'default' },
+			{ text: '修改订单', type: 'default' }
+		]
+	},
+	{
+		shopType: 'self',
+		shopName: '甜小南旗舰店',
+		status: '完成',
+		statusColor: 'gray',
+		trackingTitle: '已签收',
+		trackingDesc: '您的订单已签收，可对快递员的服务进行评价或打赏哦~',
+		trackingTime: '2026-03-10 15:14:30',
+		image: '/static/image/shopping/jingdong/product1.png',
+		title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
+		desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
+		tags: ['无理由退货政策'],
+		price: '69.00',
+		count: 1,
+		promoType: 'plus',
+		promoText: '告别凑单, 享免运优惠',
+		hasMore: true,
+		buttons: [
+			{ text: '卖了换钱', type: 'default' },
+			{ text: '退还/售后', type: 'default' },
+			{ text: '再次购买', type: 'primary' }
+		]
+	},
+	{
+		shopType: 'jd',
+		shopName: '甜小南旗舰店',
+		status: '完成',
+		statusColor: 'gray',
+		image: '/static/image/shopping/jingdong/product1.png',
+		title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
+		desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
+		tags: ['无理由退货政策'],
+		price: '1669.00',
+		count: 1,
+		hasMore: true,
+		buttons: [
+			{ text: '再次购买', type: 'default' },
+			{ text: '申请退款', type: 'default' },
+			{ text: '修改订单', type: 'default' }
+		]
+	},
+	{
+		shopType: 'self',
+		shopName: '甜小南旗舰店',
+		status: '已取消',
+		statusColor: 'gray',
+		image: '/static/image/shopping/jingdong/product1.png',
+		title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
+		desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
+		tags: ['无理由退货政策'],
+		price: '1669.00',
+		count: 1,
+		buttons: [
+			{ text: '再次购买', type: 'default' },
+			{ text: '申请退款', type: 'default' },
+			{ text: '修改订单', type: 'primary' }
+		]
+	}
+]);
 </script>
 
 <style lang="less">
+.top-fixed {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 999;
+	background-color: #F0F4F9;
+}
+
 ::v-deep .uni-navbar__header-btns {
 	width: auto !important;
 }
 
+::v-deep .uni-navbar__header-container {
+	padding-right: 0 !important;
+}
+
 .search-box {
 	width: 100%;
 	background-color: #fff;
 	border-radius: 12rpx;
-	padding: 12rpx 16rpx;
+	padding: 0 16rpx;
+	height: 60rpx;
 	display: flex;
 	align-items: center;
 	border: 1rpx solid #E5E5E5;
@@ -44,4 +251,181 @@
 		color: #CCCCCC;
 	}
 }
+
+.right-box {
+	display: flex;
+	align-items: center;
+
+	.icon {
+		width: 40rpx;
+		height: 40rpx;
+		margin-left: 22rpx;
+	}
+}
+
+.tab-list {
+	display: flex;
+	align-items: center;
+	padding: 16rpx 36rpx 10rpx;
+	background-color: #F0F4F9;
+
+	.tab-item {
+		position: relative;
+		display: flex;
+		align-items: center;
+		margin-right: 58rpx;
+
+		.title {
+			font-size: 28rpx;
+			color: #1A1A1A;
+			font-weight: 700;
+			line-height: 28rpx;
+		}
+
+		&.active {
+			.title {
+				font-size: 28rpx;
+				color: #F51919;
+				font-weight: 700;
+			}
+		}
+
+		.line {
+			position: absolute;
+			bottom: -10rpx;
+			left: -5%;
+			transform: translateX(50%);
+			width: 30rpx;
+			height: 4rpx;
+			background-color: #F51919;
+			border-radius: 4rpx;
+		}
+
+		.badge-icon {
+			position: relative;
+			top: 0;
+			margin-left: 2rpx;
+			height: 32rpx;
+		}
+	}
+}
+
+.filter-wrapper {
+	display: flex;
+	align-items: center;
+	height: 64rpx;
+	padding: 0 0 0 24rpx;
+	background-color: #F0F4F9;
+	margin-top: 10rpx;
+	margin-bottom: 26rpx;
+
+	.filter-scroll {
+		flex: 1;
+		width: 0;
+		white-space: nowrap;
+
+		.filter-list {
+			height: 88rpx;
+			line-height: 88rpx;
+			padding-right: 24rpx;
+		}
+
+		.filter-item {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			vertical-align: middle;
+			height: 56rpx;
+			padding: 0 24rpx;
+			background-color: #FFFFFF;
+			border-radius: 8rpx;
+			margin-right: 16rpx;
+			border: 2rpx solid transparent;
+			box-sizing: border-box;
+
+			.text {
+				font-size: 26rpx;
+				color: #1A1A1A;
+			}
+
+			.close-icon {
+				font-size: 18px;
+				color: #E40C24;
+				margin-top: -10rpx;
+				line-height: 14px;
+				margin-left: 6rpx;
+				font-weight: 400;
+			}
+
+			&.active {
+				background-color: #FFECF5;
+				border-color: #E40C24;
+
+				.text {
+					color: #E40C24;
+				}
+			}
+		}
+	}
+
+	.filter-btn {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 82rpx;
+		height: 64rpx;
+		background-color: #F0F4F9;
+		position: relative;
+		z-index: 10;
+		box-shadow: -10rpx 0 10rpx -10rpx rgba(0, 0, 0, 0.1);
+
+		.filter-icon {
+			width: 28rpx;
+			height: 28rpx;
+			margin-bottom: 4rpx;
+		}
+
+		.filter-text {
+			font-size: 20rpx;
+			line-height: 20rpx;
+			color: #575757;
+		}
+	}
+}
+
+.content {
+	padding: 0 20rpx;
+}
+
+.bottom-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #1A1A1A;
+	font-size: 28rpx;
+	line-height: 26rpx;
+	font-weight: 500;
+	margin-bottom: 22rpx;
+}
+
+.like-icon {
+	width: 32rpx;
+	height: 32rpx;
+	margin-right: 8rpx;
+}
+
+.upload-screenshot-box {
+	width: 100%;
+	height: 540rpx;
+	background-color: #FFFFFF;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.upload-screenshot {
+		width: 92rpx;
+		height: 92rpx;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/static/image/shopping/jingdong/JD.png b/static/image/shopping/jingdong/JD.png
new file mode 100644
index 0000000..3aabdf7
Binary files /dev/null and b/static/image/shopping/jingdong/JD.png differ
diff --git a/static/image/shopping/jingdong/bubble.png b/static/image/shopping/jingdong/bubble.png
new file mode 100644
index 0000000..da14101
Binary files /dev/null and b/static/image/shopping/jingdong/bubble.png differ
diff --git a/static/image/shopping/jingdong/cangku.png b/static/image/shopping/jingdong/cangku.png
new file mode 100644
index 0000000..7f50570
Binary files /dev/null and b/static/image/shopping/jingdong/cangku.png differ
diff --git a/static/image/shopping/jingdong/dengdaifukuan.png b/static/image/shopping/jingdong/dengdaifukuan.png
new file mode 100644
index 0000000..da89352
Binary files /dev/null and b/static/image/shopping/jingdong/dengdaifukuan.png differ
diff --git a/static/image/shopping/jingdong/gift.png b/static/image/shopping/jingdong/gift.png
new file mode 100644
index 0000000..3712af2
Binary files /dev/null and b/static/image/shopping/jingdong/gift.png differ
diff --git a/static/image/shopping/jingdong/jiazheng.png b/static/image/shopping/jingdong/jiazheng.png
new file mode 100644
index 0000000..7f781b8
Binary files /dev/null and b/static/image/shopping/jingdong/jiazheng.png differ
diff --git a/static/image/shopping/jingdong/more.png b/static/image/shopping/jingdong/more.png
new file mode 100644
index 0000000..f3f7c74
Binary files /dev/null and b/static/image/shopping/jingdong/more.png differ
diff --git a/static/image/shopping/jingdong/plus.png b/static/image/shopping/jingdong/plus.png
new file mode 100644
index 0000000..3992e8b
Binary files /dev/null and b/static/image/shopping/jingdong/plus.png differ
diff --git a/static/image/shopping/jingdong/shaixuan.png b/static/image/shopping/jingdong/shaixuan.png
new file mode 100644
index 0000000..1512c43
Binary files /dev/null and b/static/image/shopping/jingdong/shaixuan.png differ
diff --git a/static/image/shopping/jingdong/waimai.png b/static/image/shopping/jingdong/waimai.png
new file mode 100644
index 0000000..12bee92
Binary files /dev/null and b/static/image/shopping/jingdong/waimai.png differ
diff --git a/static/image/shopping/jingdong/weinituijian.png b/static/image/shopping/jingdong/weinituijian.png
new file mode 100644
index 0000000..391971c
Binary files /dev/null and b/static/image/shopping/jingdong/weinituijian.png differ