diff --git a/supplied-h5/src/assets/joyful-selection/hero-bg.png b/supplied-h5/src/assets/joyful-selection/hero-bg.png
new file mode 100644
index 0000000..6e51483
Binary files /dev/null and b/supplied-h5/src/assets/joyful-selection/hero-bg.png differ
diff --git a/supplied-h5/src/assets/joyful-selection/products/bluetooth-earbuds.png b/supplied-h5/src/assets/joyful-selection/products/bluetooth-earbuds.png
new file mode 100644
index 0000000..5dfe379
Binary files /dev/null and b/supplied-h5/src/assets/joyful-selection/products/bluetooth-earbuds.png differ
diff --git a/supplied-h5/src/assets/joyful-selection/products/gift-box.png b/supplied-h5/src/assets/joyful-selection/products/gift-box.png
new file mode 100644
index 0000000..44e8d3e
Binary files /dev/null and b/supplied-h5/src/assets/joyful-selection/products/gift-box.png differ
diff --git a/supplied-h5/src/assets/joyful-selection/products/mini-oven.png b/supplied-h5/src/assets/joyful-selection/products/mini-oven.png
new file mode 100644
index 0000000..d5feefa
Binary files /dev/null and b/supplied-h5/src/assets/joyful-selection/products/mini-oven.png differ
diff --git a/supplied-h5/src/assets/joyful-selection/products/smart-speaker.png b/supplied-h5/src/assets/joyful-selection/products/smart-speaker.png
new file mode 100644
index 0000000..62a7793
Binary files /dev/null and b/supplied-h5/src/assets/joyful-selection/products/smart-speaker.png differ
diff --git a/supplied-h5/src/router/index.js b/supplied-h5/src/router/index.js
index 409d9ec..5809428 100644
--- a/supplied-h5/src/router/index.js
+++ b/supplied-h5/src/router/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import SupplierHome from '@/view/index.vue'
+import JoyfulSelectionLayout from '@/view/joyful-selection/layout.vue'
 import JoyfulSelectionHome from '@/view/joyful-selection/index.vue'
 import JoyfulSelectionProductList from '@/view/joyful-selection/products/index.vue'
 import JoyfulSelectionProductDetail from '@/view/joyful-selection/product-detail/index.vue'
@@ -23,18 +24,24 @@ Vue.use(Router)
 export default new Router({
   routes: [
     { path: '/', component: SupplierHome },
-    { path: '/joyful-selection', component: JoyfulSelectionHome },
-    { path: '/joyful-selection/products', component: JoyfulSelectionProductList },
-    { path: '/joyful-selection/product-detail', component: JoyfulSelectionProductDetail },
-    { path: '/joyful-selection/cart', component: JoyfulSelectionCart },
-    { path: '/joyful-selection/cart/edit', component: JoyfulSelectionCartEdit },
-    { path: '/joyful-selection/checkout', component: JoyfulSelectionCheckout },
-    { path: '/joyful-selection/payment', component: JoyfulSelectionPayment },
-    { path: '/joyful-selection/payment-confirm', component: JoyfulSelectionPaymentConfirm },
-    { path: '/joyful-selection/payment-success', component: JoyfulSelectionPaymentSuccess },
-    { path: '/joyful-selection/orders', component: JoyfulSelectionOrders },
-    { path: '/joyful-selection/profile', component: JoyfulSelectionProfile },
-    { path: '/joyful-selection/points', component: JoyfulSelectionPoints },
+    {
+      path: '/joyful-selection',
+      component: JoyfulSelectionLayout,
+      children: [
+        { path: '', component: JoyfulSelectionHome },
+        { path: 'products', component: JoyfulSelectionProductList },
+        { path: 'product-detail', component: JoyfulSelectionProductDetail },
+        { path: 'cart', component: JoyfulSelectionCart },
+        { path: 'cart/edit', component: JoyfulSelectionCartEdit },
+        { path: 'checkout', component: JoyfulSelectionCheckout },
+        { path: 'payment', component: JoyfulSelectionPayment },
+        { path: 'payment-confirm', component: JoyfulSelectionPaymentConfirm },
+        { path: 'payment-success', component: JoyfulSelectionPaymentSuccess },
+        { path: 'orders', component: JoyfulSelectionOrders },
+        { path: 'profile', component: JoyfulSelectionProfile },
+        { path: 'points', component: JoyfulSelectionPoints }
+      ]
+    },
     { path: '/home-living', component: HomeLiving },
     { path: '/happy-shopping', component: HappyShopping },
     { path: '/fresh-fruit', component: FreshFruit },
diff --git a/supplied-h5/src/view/joyful-selection/cart/checkout/index.vue b/supplied-h5/src/view/joyful-selection/cart/checkout/index.vue
index 70405ea..32b44e3 100644
--- a/supplied-h5/src/view/joyful-selection/cart/checkout/index.vue
+++ b/supplied-h5/src/view/joyful-selection/cart/checkout/index.vue
@@ -1,3 +1,50 @@
-<template><main class="checkout-page"><van-nav-bar title="确认订单" left-arrow @click-left="$router.back()"/><van-cell-group inset><van-cell title="收货人：张三　138****8888" label="浙江省杭州市余杭区文一西路 888 号 1203 室" is-link/></van-cell-group><van-cell-group inset title="配送方式"><van-cell title="预计送达：5月20日（周二）" value="快速配送 免邮"/></van-cell-group><van-cell-group inset><van-card v-for="item in goods" :key="item" :title="item" price="69.90" :thumb="teaImage" num="1"/></van-cell-group><van-field v-model="remark" label="订单备注" placeholder="选填，给商家留言"/><section class="amount"><p>商品金额 <b>¥287.90</b></p><p>运费 <b>¥0.00</b></p><p>优惠券 <b>暂无优惠券</b></p></section><van-submit-bar :price="28790" button-text="提交订单" @submit="$router.push('/joyful-selection/payment')"/></main></template>
-<script>import teaImage from '@/assets/joyful-selection/products/tea-set.png';export default{name:'JoyfulSelectionCheckout',data:()=>({teaImage,remark:'',goods:['简约北欧风陶瓷餐具套装','便携式榨汁机 家用小型','智能声波电动牙刷']})}</script>
-<style scoped>.checkout-page{min-height:100vh;padding-bottom:60px;background:#f7f7f7}.van-cell-group{margin:10px 12px}.amount{margin:10px 12px;padding:10px 16px;border-radius:10px;background:#fff;font-size:13px}.amount p{display:flex;justify-content:space-between}.amount b{font-weight:normal}.van-submit-bar{bottom:0}</style>
+<template>
+  <main class="checkout-page">
+    <van-nav-bar title="确认订单" left-arrow @click-left="$router.back()" />
+    <van-cell-group inset>
+      <van-cell title="收货人：张三　138****8888" label="浙江省杭州市余杭区文一西路 888 号 1203 室" is-link />
+    </van-cell-group>
+    <van-cell-group inset title="配送方式">
+      <van-cell title="预计送达：5月20日（周二）" value="快速配送 免邮" />
+    </van-cell-group>
+    <van-cell-group inset>
+      <van-card
+        v-for="item in goods"
+        :key="item.id"
+        :title="item.name"
+        :desc="item.desc"
+        :price="item.price"
+        :thumb="item.image"
+        num="1"
+      />
+    </van-cell-group>
+    <van-field v-model="remark" label="订单备注" placeholder="选填，给商家留言" />
+    <section class="amount">
+      <p>商品金额 <b>¥297.90</b></p>
+      <p>运费 <b>¥0.00</b></p>
+      <p>优惠券 <b>暂无优惠券</b></p>
+    </section>
+    <van-submit-bar :price="29790" button-text="提交订单" @submit="$router.push('/joyful-selection/payment')" />
+  </main>
+</template>
+
+<script>
+import { joyfulProducts } from '../../product-data'
+
+export default {
+  name: 'JoyfulSelectionCheckout',
+  data: () => ({
+    remark: '',
+    goods: joyfulProducts.slice(0, 3)
+  })
+}
+</script>
+
+<style scoped>
+.checkout-page { min-height: 100vh; padding-bottom: 60px; background: #f7f7f7; }
+.van-cell-group { margin: 10px 12px; }
+.amount { margin: 10px 12px; padding: 10px 16px; border-radius: 10px; background: #fff; font-size: 13px; }
+.amount p { display: flex; justify-content: space-between; }
+.amount b { font-weight: normal; }
+.van-submit-bar { bottom: 0; }
+</style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/edit/index.vue b/supplied-h5/src/view/joyful-selection/cart/edit/index.vue
index b63d2a4..1aad777 100644
--- a/supplied-h5/src/view/joyful-selection/cart/edit/index.vue
+++ b/supplied-h5/src/view/joyful-selection/cart/edit/index.vue
@@ -1,3 +1,42 @@
-<template><main class="edit-page"><van-nav-bar title="购物车" right-text="完成" @click-right="$router.push('/joyful-selection/cart')"/><section><van-card v-for="item in goods" :key="item" :title="item" price="69.90" :thumb="teaImage"><template #footer><van-stepper v-model="count" theme="round" button-size="22"/></template></van-card></section><van-submit-bar button-text="删除" @submit="remove"><van-checkbox v-model="checked">全选</van-checkbox></van-submit-bar></main></template>
-<script>import teaImage from '@/assets/joyful-selection/products/tea-set.png';import {Toast} from 'vant';export default{name:'JoyfulSelectionCartEdit',data:()=>({teaImage,checked:false,count:1,goods:['简约北欧风陶瓷餐具套装','便携式榨汁机 家用小型','智能声波电动牙刷','大容量双肩电脑背包']}),methods:{remove(){Toast('请选择要删除的商品')}}}</script>
-<style scoped>.edit-page{min-height:100vh;padding-bottom:60px;background:#f7f7f7}.edit-page section{padding:0 12px}.edit-page .van-card{margin-top:10px;border-radius:10px;background:#fff}</style>
+<template>
+  <main class="edit-page">
+    <van-nav-bar title="购物车" right-text="完成" @click-right="$router.push('/joyful-selection/cart')" />
+    <section>
+      <van-card
+        v-for="item in goods"
+        :key="item.id"
+        :title="item.name"
+        :desc="item.desc"
+        :price="item.price"
+        :thumb="item.image"
+      >
+        <template #footer><van-stepper v-model="item.count" theme="round" button-size="22" /></template>
+      </van-card>
+    </section>
+    <van-submit-bar button-text="删除" @submit="remove">
+      <van-checkbox v-model="checked">全选</van-checkbox>
+    </van-submit-bar>
+  </main>
+</template>
+
+<script>
+import { Toast } from 'vant'
+import { joyfulProducts } from '../../product-data'
+
+export default {
+  name: 'JoyfulSelectionCartEdit',
+  data: () => ({
+    checked: false,
+    goods: joyfulProducts.map(item => ({ ...item, count: 1 }))
+  }),
+  methods: {
+    remove() { Toast('请选择要删除的商品') }
+  }
+}
+</script>
+
+<style scoped>
+.edit-page { min-height: 100vh; padding-bottom: 60px; background: #f7f7f7; }
+.edit-page section { padding: 0 12px; }
+.edit-page .van-card { margin-top: 10px; border-radius: 10px; background: #fff; }
+</style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/index.vue b/supplied-h5/src/view/joyful-selection/cart/index.vue
index 75e1815..d8f03d9 100644
--- a/supplied-h5/src/view/joyful-selection/cart/index.vue
+++ b/supplied-h5/src/view/joyful-selection/cart/index.vue
@@ -1,3 +1,42 @@
-<template><main class="cart-page"><van-nav-bar title="购物车" right-text="编辑" @click-right="$router.push('/joyful-selection/cart/edit')"/><van-notice-bar text="满 199 元包邮，快去凑单吧～" left-icon="info-o"/><section class="cart-list"><van-card v-for="item in goods" :key="item.name" :title="item.name" :price="item.price" :thumb="teaImage"><template #tags><van-tag plain type="danger">精选</van-tag></template><template #footer><van-stepper v-model="item.count" theme="round" button-size="22"/></template></van-card></section><van-submit-bar :price="28790" button-text="去结算（3）" @submit="$router.push('/joyful-selection/checkout')"><van-checkbox v-model="checked">全选</van-checkbox></van-submit-bar><van-tabbar route><van-tabbar-item icon="wap-home-o" to="/joyful-selection">首页</van-tabbar-item><van-tabbar-item icon="apps-o" to="/joyful-selection/products">分类</van-tabbar-item><van-tabbar-item icon="cart-o" to="/joyful-selection/cart">购物车</van-tabbar-item><van-tabbar-item icon="user-o" to="/joyful-selection/profile">我的</van-tabbar-item></van-tabbar></main></template>
-<script>import teaImage from '@/assets/joyful-selection/products/tea-set.png';export default{name:'JoyfulSelectionCart',data:()=>({teaImage,checked:true,goods:[{name:'简约北欧风陶瓷餐具套装',price:'69.90',count:1},{name:'便携式榨汁机 家用小型',price:'89.00',count:1},{name:'智能声波电动牙刷',price:'129.00',count:1}]})}</script>
-<style scoped lang="less">.cart-page{min-height:100vh;padding-bottom:106px;background:#f7f7f7}.cart-list{padding:0 12px}.cart-list .van-card{margin-top:10px;border-radius:10px;background:#fff}.cart-list ::v-deep .van-card__price{color:#ff5b20;font-weight:bold}.van-submit-bar{bottom:50px}</style>
+<template>
+  <main class="cart-page">
+    <van-nav-bar title="购物车" right-text="编辑" @click-right="$router.push('/joyful-selection/cart/edit')" />
+    <van-notice-bar text="满 199 元包邮，快去凑单吧～" left-icon="info-o" />
+    <section class="cart-list">
+      <van-card
+        v-for="item in goods"
+        :key="item.id"
+        :title="item.name"
+        :desc="item.desc"
+        :price="item.price"
+        :thumb="item.image"
+      >
+        <template #tags><van-tag plain type="danger">{{ item.tag }}</van-tag></template>
+        <template #footer><van-stepper v-model="item.count" theme="round" button-size="22" /></template>
+      </van-card>
+    </section>
+    <van-submit-bar :price="29790" button-text="去结算（3）" @submit="$router.push('/joyful-selection/checkout')">
+      <van-checkbox v-model="checked">全选</van-checkbox>
+    </van-submit-bar>
+  </main>
+</template>
+
+<script>
+import { joyfulProducts } from '../product-data'
+
+export default {
+  name: 'JoyfulSelectionCart',
+  data: () => ({
+    checked: true,
+    goods: joyfulProducts.slice(0, 3).map(item => ({ ...item, count: 1 }))
+  })
+}
+</script>
+
+<style scoped lang="less">
+.cart-page { min-height: 100vh; padding-bottom: 106px; background: #f7f7f7; }
+.cart-list { padding: 0 12px; }
+.cart-list .van-card { margin-top: 10px; border-radius: 10px; background: #fff; }
+.cart-list ::v-deep .van-card__price { color: #ff5b20; font-weight: bold; }
+.van-submit-bar { bottom: 50px; }
+</style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/payment-confirm/index.vue b/supplied-h5/src/view/joyful-selection/cart/payment-confirm/index.vue
index 78b5bc1..766a75c 100644
--- a/supplied-h5/src/view/joyful-selection/cart/payment-confirm/index.vue
+++ b/supplied-h5/src/view/joyful-selection/cart/payment-confirm/index.vue
@@ -1,3 +1,3 @@
-<template><main class="confirm-page"><van-nav-bar title="确认支付" left-arrow @click-left="$router.back()"/><section><p>支付金额</p><b>¥ 287.90</b></section><van-popup v-model="show" round position="bottom" :style="{height:'42%'}" :close-on-click-overlay="false"><article><h2>确认支付</h2><p>您即将使用微信支付</p><p>支付金额 <b>¥287.90</b></p><div><van-button round @click="$router.back()">取消</van-button><van-button round type="danger" @click="$router.push('/joyful-selection/payment-success')">确认支付</van-button></div></article></van-popup></main></template>
+<template><main class="confirm-page"><van-nav-bar title="确认支付" left-arrow @click-left="$router.back()"/><section><p>支付金额</p><b>¥ 297.90</b></section><van-popup v-model="show" round position="bottom" :style="{height:'42%'}" :close-on-click-overlay="false"><article><h2>确认支付</h2><p>您即将使用微信支付</p><p>支付金额 <b>¥297.90</b></p><div><van-button round @click="$router.back()">取消</van-button><van-button round type="danger" @click="$router.push('/joyful-selection/payment-success')">确认支付</van-button></div></article></van-popup></main></template>
 <script>export default{name:'JoyfulSelectionPaymentConfirm',data:()=>({show:true})}</script>
 <style scoped>.confirm-page{min-height:100vh;background:#f7f7f7;text-align:center}.confirm-page section{margin:15px;padding:30px;border-radius:12px;background:#fff}.confirm-page section b{font-size:26px}.confirm-page article{padding:20px;text-align:center}.confirm-page article p{color:#666;font-size:13px}.confirm-page article div{display:flex;gap:10px;margin-top:40px}.confirm-page article .van-button{flex:1}</style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/payment-success/index.vue b/supplied-h5/src/view/joyful-selection/cart/payment-success/index.vue
index 3eb86d9..c358370 100644
--- a/supplied-h5/src/view/joyful-selection/cart/payment-success/index.vue
+++ b/supplied-h5/src/view/joyful-selection/cart/payment-success/index.vue
@@ -1,3 +1,3 @@
-<template><main class="success-page"><van-icon name="checked" color="#20bd58" size="68"/><h2>支付成功</h2><b>¥ 287.90</b><section><p>订单编号 <span>YX2024051812345678</span></p><p>支付方式 <span>微信支付</span></p><p>支付时间 <span>2024-05-18 14:35:28</span></p></section><div><van-button round @click="$router.push('/joyful-selection/orders')">查看订单</van-button><van-button round type="danger" @click="$router.push('/joyful-selection')">继续购物</van-button></div></main></template>
+<template><main class="success-page"><van-icon name="checked" color="#20bd58" size="68"/><h2>支付成功</h2><b>¥ 297.90</b><section><p>订单编号 <span>YX2024051812345678</span></p><p>支付方式 <span>微信支付</span></p><p>支付时间 <span>2024-05-18 14:35:28</span></p></section><div><van-button round @click="$router.push('/joyful-selection/orders')">查看订单</van-button><van-button round type="danger" @click="$router.push('/joyful-selection')">继续购物</van-button></div></main></template>
 <script>export default{name:'JoyfulSelectionPaymentSuccess'}</script>
 <style scoped>.success-page{min-height:100vh;padding:80px 30px;text-align:center;background:#fff}.success-page h2{margin:15px 0 10px;font-size:17px}.success-page>b{font-size:22px}.success-page section{margin-top:42px;text-align:left;color:#888;font-size:12px}.success-page section p{display:flex;justify-content:space-between}.success-page section span{color:#333}.success-page>div{display:flex;gap:10px;margin-top:35px}.success-page .van-button{flex:1}</style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/payment/index.vue b/supplied-h5/src/view/joyful-selection/cart/payment/index.vue
index b918c62..709950a 100644
--- a/supplied-h5/src/view/joyful-selection/cart/payment/index.vue
+++ b/supplied-h5/src/view/joyful-selection/cart/payment/index.vue
@@ -1,3 +1,3 @@
-<template><main class="payment-page"><van-nav-bar title="确认支付" left-arrow @click-left="$router.back()"/><section class="pay-total"><p>支付金额</p><b>¥ 287.90</b></section><van-cell-group inset title="订单信息"><van-cell title="订单编号" value="YX2024051812345678"/><van-cell title="收货人" value="张三　138****8888"/></van-cell-group><van-radio-group v-model="payType"><van-cell-group inset title="支付方式"><van-cell title="微信支付" icon="wechat-pay" clickable @click="payType='wechat'"><template #right-icon><van-radio name="wechat"/></template></van-cell><van-cell title="支付宝支付" icon="alipay" clickable @click="payType='alipay'"><template #right-icon><van-radio name="alipay"/></template></van-cell><van-cell title="银联支付" icon="credit-pay" clickable @click="payType='union'"><template #right-icon><van-radio name="union"/></template></van-cell><van-cell title="余额支付（余额：¥32.00）" icon="gold-coin-o" clickable @click="payType='balance'"><template #right-icon><van-radio name="balance"/></template></van-cell></van-cell-group></van-radio-group><van-button class="pay-button" round type="danger" block @click="$router.push('/joyful-selection/payment-confirm')">立即支付 ¥287.90</van-button></main></template>
+<template><main class="payment-page"><van-nav-bar title="确认支付" left-arrow @click-left="$router.back()"/><section class="pay-total"><p>支付金额</p><b>¥ 297.90</b></section><van-cell-group inset title="订单信息"><van-cell title="订单编号" value="YX2024051812345678"/><van-cell title="收货人" value="张三　138****8888"/></van-cell-group><van-radio-group v-model="payType"><van-cell-group inset title="支付方式"><van-cell title="微信支付" icon="wechat-pay" clickable @click="payType='wechat'"><template #right-icon><van-radio name="wechat"/></template></van-cell><van-cell title="支付宝支付" icon="alipay" clickable @click="payType='alipay'"><template #right-icon><van-radio name="alipay"/></template></van-cell><van-cell title="银联支付" icon="credit-pay" clickable @click="payType='union'"><template #right-icon><van-radio name="union"/></template></van-cell><van-cell title="余额支付（余额：¥32.00）" icon="gold-coin-o" clickable @click="payType='balance'"><template #right-icon><van-radio name="balance"/></template></van-cell></van-cell-group></van-radio-group><van-button class="pay-button" round type="danger" block @click="$router.push('/joyful-selection/payment-confirm')">立即支付 ¥297.90</van-button></main></template>
 <script>export default{name:'JoyfulSelectionPayment',data:()=>({payType:'wechat'})}</script>
 <style scoped>.payment-page{min-height:100vh;background:#f7f7f7}.pay-total{padding:25px;text-align:center;background:#fff}.pay-total p{margin:0;color:#666;font-size:13px}.pay-total b{display:block;margin-top:10px;font-size:26px}.van-cell-group{margin:10px 12px}.pay-button{position:fixed;right:16px;bottom:20px;left:16px;width:calc(100% - 32px)}</style>
diff --git a/supplied-h5/src/view/joyful-selection/index.vue b/supplied-h5/src/view/joyful-selection/index.vue
index 9c15478..af349dc 100644
--- a/supplied-h5/src/view/joyful-selection/index.vue
+++ b/supplied-h5/src/view/joyful-selection/index.vue
@@ -6,23 +6,23 @@
       <div class="hero-copy">
         <h1>品质生活 悦享好物</h1>
         <p>精选好物，悦享品质生活</p>
-        <van-button size="mini" round @click="$router.push('/joyful-selection/products')">立即抢购</van-button>
+        <van-button size="mini" round @click="$router.push('/joyful-selection/products')">立即选购</van-button>
       </div>
-      <van-image class="hero-art" :src="supplierImage" fit="contain" />
     </section>
 
     <van-grid :column-num="5" :border="false" class="category-grid">
       <van-grid-item v-for="item in categories" :key="item.name" @click="$router.push('/joyful-selection/products')">
         <template #icon>
-          <div class="category-icon" :style="{ backgroundColor: item.background }"><van-icon :name="item.icon"
-              :color="item.color" /></div>
+          <div class="category-icon" :style="{ backgroundColor: item.background }">
+            <van-icon :name="item.icon" :color="item.color" />
+          </div>
         </template>
         <template #text><span class="category-title">{{ item.name }}</span></template>
       </van-grid-item>
     </van-grid>
 
     <section class="product-section">
-      <header class="section-head"><b>今日特惠</b><a @click="$router.push('/joyful-selection/products')">更多 ›</a></header>
+      <header class="section-head"><b>限时秒杀</b><a @click="$router.push('/joyful-selection/products')">更多 ›</a></header>
       <div class="product-row">
         <article v-for="item in flashProducts" :key="item.name" @click="goProductDetail(item)">
           <van-image :src="item.image" fit="cover" />
@@ -45,26 +45,17 @@
       </div>
     </section>
 
-    <van-tabbar route active-color="#ff5b20" inactive-color="#777">
-      <van-tabbar-item icon="wap-home-o" to="/joyful-selection">首页</van-tabbar-item>
-      <van-tabbar-item icon="apps-o" to="/joyful-selection/products">分类</van-tabbar-item>
-      <van-tabbar-item icon="cart-o" to="/joyful-selection/cart">购物车</van-tabbar-item>
-      <van-tabbar-item icon="user-o" to="/joyful-selection/profile">我的</van-tabbar-item>
-    </van-tabbar>
   </main>
 </template>
 
 <script>
-import supplierImage from '@/assets/supplier-icons/joyful-selection.png'
-import teaImage from '@/assets/joyful-selection/products/tea-set.png'
+import { joyfulProducts } from './product-data'
 
 export default {
   name: 'JoyfulSelectionHome',
   data() {
-    const productImages = [teaImage, teaImage, teaImage, teaImage]
     return {
       keyword: '',
-      supplierImage,
       categories: [
         { name: '精选推荐', icon: 'like', color: '#ff6e8a', background: '#fff0f3' },
         { name: '居家生活', icon: 'shop-o', color: '#54b8e6', background: '#e9f8ff' },
@@ -77,23 +68,13 @@ export default {
         { name: '超值专区', icon: 'label', color: '#ec8c3d', background: '#fff4e9' },
         { name: '全部分类', icon: 'apps-o', color: '#989898', background: '#f5f5f5' }
       ],
-      flashProducts: [
-        { name: '香氛洗护', price: '59.9', image: productImages[0] },
-        { name: '品质茶具', price: '99.0', image: productImages[1] },
-        { name: '绿植盆栽', price: '39.9', image: productImages[2] },
-        { name: '声波牙刷', price: '129.0', image: productImages[3] }
-      ],
-      hotProducts: [
-        { name: '护颈枕', price: '89.0', image: productImages[2] },
-        { name: '简约花瓶', price: '59.0', image: productImages[0] },
-        { name: '香薰礼盒', price: '69.0', image: productImages[1] },
-        { name: '轻享水杯', price: '49.0', image: productImages[3] }
-      ]
+      flashProducts: joyfulProducts,
+      hotProducts: [joyfulProducts[2], joyfulProducts[0], joyfulProducts[1], joyfulProducts[3]]
     }
   },
   methods: {
     goProductDetail(item) {
-      this.$router.push({ path: '/joyful-selection/product-detail', query: { title: item.name, price: item.price } })
+      this.$router.push({ path: '/joyful-selection/product-detail', query: { id: item.id } })
     }
   }
 }
@@ -129,52 +110,46 @@ export default {
 
 .hero {
   position: relative;
-  display: flex;
-  height: 108px;
+  min-height: 100px;
   margin: 10px 10px 0;
   overflow: hidden;
   border-radius: 8px;
-  background: linear-gradient(114deg, #8c77fb 0%, #c2b9ff 100%);
+  background-image: url('~@/assets/joyful-selection/hero-bg.png');
+  background-size: cover;
+  background-position: center;
 }
 
 .hero-copy {
   position: relative;
   z-index: 1;
-  padding: 21px 0 0 18px;
-  color: #26214f;
+  width: 52%;
+  padding: 20px 0 13px 18px;
+  color: #3a348d;
 }
 
 .hero-copy h1 {
   margin: 0;
+  color: #4b40b5;
   font-size: 17px;
   font-weight: 700;
-  letter-spacing: .2px;
+  letter-spacing: 0;
 }
 
 .hero-copy p {
-  margin: 5px 0 11px;
-  color: #5f579e;
+  margin: 5px 0 10px;
+  color: #7068bd;
   font-size: 10px;
 }
 
 .hero-copy .van-button {
-  min-width: 53px;
-  height: 19px;
+  min-width: 58px;
+  height: 20px;
   border: 0;
   color: #fff;
   font-size: 9px;
   background: #6f5ee9;
 }
 
-.hero-art {
-  position: absolute;
-  right: 11px;
-  bottom: -8px;
-  width: 119px;
-  height: 119px;
-  filter: drop-shadow(0 10px 8px rgba(72, 58, 176, .2));
-}
-
 .category-grid {
   margin: 8px 10px 9px;
   overflow: hidden;
@@ -183,7 +158,7 @@ export default {
 }
 
 .category-grid ::v-deep .van-grid-item__content {
-  padding: 10px 0 7px;
+  padding: 8px 0 6px;
   background: transparent;
 }
 
@@ -193,20 +168,20 @@ export default {
 
 .category-icon {
   display: flex;
-  width: 30px;
-  height: 30px;
+  width: 38px;
+  height: 38px;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
 }
 
 .category-icon .van-icon {
-  font-size: 18px;
+  font-size: 24px;
 }
 
 .category-title {
   display: block;
-  margin-top: 8px;
+  margin-top: 6px;
   color: #4d4d4d;
   font-size: 9px;
 }
@@ -254,12 +229,19 @@ export default {
 
 .product-row .van-image {
   width: 100%;
-  height: 56px;
+  aspect-ratio: 1 / 1;
+  height: auto;
   overflow: hidden;
   border-radius: 4px;
   background: #f5f5f5;
 }
 
+.product-row ::v-deep .van-image__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .product-meta {
   display: flex;
   align-items: center;
@@ -288,12 +270,4 @@ export default {
   margin-bottom: 6px;
 }
 
-.joy-home ::v-deep .van-tabbar-item__icon {
-  margin-bottom: 2px;
-  font-size: 20px;
-}
-
-.joy-home ::v-deep .van-tabbar-item__text {
-  font-size: 10px;
-}
 </style>
diff --git a/supplied-h5/src/view/joyful-selection/layout.vue b/supplied-h5/src/view/joyful-selection/layout.vue
new file mode 100644
index 0000000..5c4856a
--- /dev/null
+++ b/supplied-h5/src/view/joyful-selection/layout.vue
@@ -0,0 +1,37 @@
+<template>
+  <main class="joyful-layout">
+    <router-view />
+    <van-tabbar v-if="showTabbar" route active-color="#ff5b20" inactive-color="#777">
+      <van-tabbar-item icon="wap-home-o" to="/joyful-selection">首页</van-tabbar-item>
+      <van-tabbar-item icon="apps-o" to="/joyful-selection/products">分类</van-tabbar-item>
+      <van-tabbar-item icon="cart-o" to="/joyful-selection/cart">购物车</van-tabbar-item>
+      <van-tabbar-item icon="user-o" to="/joyful-selection/profile">我的</van-tabbar-item>
+    </van-tabbar>
+  </main>
+</template>
+
+<script>
+export default {
+  name: 'JoyfulSelectionLayout',
+  computed: {
+    showTabbar() {
+      return ['/joyful-selection', '/joyful-selection/products', '/joyful-selection/cart', '/joyful-selection/profile'].includes(this.$route.path)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.joyful-layout {
+  min-height: 100vh;
+}
+
+.joyful-layout ::v-deep .van-tabbar-item__icon {
+  margin-bottom: 2px;
+  font-size: 20px;
+}
+
+.joyful-layout ::v-deep .van-tabbar-item__text {
+  font-size: 10px;
+}
+</style>
diff --git a/supplied-h5/src/view/joyful-selection/product-data.js b/supplied-h5/src/view/joyful-selection/product-data.js
new file mode 100644
index 0000000..1c3badf
--- /dev/null
+++ b/supplied-h5/src/view/joyful-selection/product-data.js
@@ -0,0 +1,53 @@
+import bluetoothEarbudsImage from '@/assets/joyful-selection/products/bluetooth-earbuds.png'
+import miniOvenImage from '@/assets/joyful-selection/products/mini-oven.png'
+import smartSpeakerImage from '@/assets/joyful-selection/products/smart-speaker.png'
+import giftBoxImage from '@/assets/joyful-selection/products/gift-box.png'
+
+export const joyfulProducts = [
+  {
+    id: 'bluetooth-earbuds',
+    name: '小米蓝牙耳机 Air2 SE',
+    desc: '轻盈半入耳，通勤运动都好听',
+    detail: '舒适半入耳设计，配合便携充电盒，日常通勤、运动和在线会议都能保持清晰稳定的聆听体验。',
+    price: '69.90',
+    originPrice: '99.90',
+    category: '数码家电',
+    tag: '积分兑换',
+    image: bluetoothEarbudsImage
+  },
+  {
+    id: 'mini-oven',
+    name: '奶油白家用迷你烤箱',
+    desc: '小巧不占地，早餐烘焙好帮手',
+    detail: '紧凑台式机身搭配可视化炉门，适合烤吐司、蛋挞和小份点心，让厨房日常更轻松。',
+    price: '129.00',
+    originPrice: '169.00',
+    category: '居家生活',
+    tag: '新品上架',
+    image: miniOvenImage
+  },
+  {
+    id: 'smart-speaker',
+    name: '黑曜智能音箱 Pro',
+    desc: '语音唤醒，沉浸听感',
+    detail: '圆柱一体式声学结构，支持语音互动和日常音乐播放，适合卧室、书房与办公桌面使用。',
+    price: '99.00',
+    originPrice: '139.00',
+    category: '数码家电',
+    tag: '热门推荐',
+    image: smartSpeakerImage
+  },
+  {
+    id: 'gift-box',
+    name: '橙意惊喜礼盒',
+    desc: '精致包装，送礼更有心意',
+    detail: '亮橙礼盒搭配丝带包装，适合节日福利、积分兑换礼和日常心意礼赠场景。',
+    price: '59.90',
+    originPrice: '89.90',
+    category: '食品饮料',
+    tag: '品质精选',
+    image: giftBoxImage
+  }
+]
+
+export const getJoyfulProduct = id => joyfulProducts.find(item => item.id === id) || joyfulProducts[0]
diff --git a/supplied-h5/src/view/joyful-selection/product-detail/index.vue b/supplied-h5/src/view/joyful-selection/product-detail/index.vue
index 2584ca7..b445803 100644
--- a/supplied-h5/src/view/joyful-selection/product-detail/index.vue
+++ b/supplied-h5/src/view/joyful-selection/product-detail/index.vue
@@ -1,17 +1,20 @@
 <template>
   <main class="detail-page">
     <van-nav-bar title="商品详情" left-arrow @click-left="$router.back()" />
-    <van-image class="product-image" :src="teaImage" fit="cover" />
+    <van-image class="product-image" :src="product.image" fit="cover" />
     <section class="product-info">
-      <h1>{{ productTitle }}</h1>
-      <p>精选优质瓷土，简约百搭，为品质生活增添仪式感</p>
-      <div><b>¥{{ productPrice }}</b><del>¥89.90</del><van-tag type="danger" plain>精选</van-tag></div>
+      <h1>{{ product.name }}</h1>
+      <p>{{ product.detail }}</p>
+      <div><b>¥{{ product.price }}</b><del>¥{{ product.originPrice }}</del><van-tag type="danger" plain>{{ product.tag }}</van-tag></div>
     </section>
     <van-cell-group inset title="商品服务">
       <van-cell title="正品保障" value="极速发货 · 售后无忧" />
       <van-cell title="配送" value="满 99 元免配送费" />
     </van-cell-group>
-    <section class="detail-content"><h2>商品详情</h2><p>精致器型与温润釉色，适合日常用餐、下午茶与礼赠场景。</p></section>
+    <section class="detail-content">
+      <h2>商品详情</h2>
+      <p>{{ product.desc }}</p>
+    </section>
     <van-goods-action>
       <van-goods-action-icon icon="chat-o" text="客服" dot />
       <van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="$router.push('/joyful-selection/cart')" />
@@ -23,13 +26,12 @@
 </template>
 
 <script>
-import teaImage from '@/assets/joyful-selection/products/tea-set.png'
+import { getJoyfulProduct } from '../product-data'
+
 export default {
   name: 'JoyfulSelectionProductDetail',
-  data: () => ({ teaImage }),
   computed: {
-    productTitle() { return this.$route.query.title || '简约北欧风陶瓷餐具套装' },
-    productPrice() { return this.$route.query.price || '69.90' }
+    product() { return getJoyfulProduct(this.$route.query.id) }
   }
 }
 </script>
diff --git a/supplied-h5/src/view/joyful-selection/products/index.vue b/supplied-h5/src/view/joyful-selection/products/index.vue
index e778016..b30fc3d 100644
--- a/supplied-h5/src/view/joyful-selection/products/index.vue
+++ b/supplied-h5/src/view/joyful-selection/products/index.vue
@@ -1,3 +1,319 @@
-<template><main class="product-page"><van-nav-bar title="商品列表" left-arrow @click-left="$router.back()"/><van-tabs v-model="active" color="#715ef1"><van-tab v-for="tab in tabs" :key="tab" :title="tab"/></van-tabs><section class="layout"><aside><span v-for="category in categories" :key="category" :class="{active: category===selected}" @click="selected=category">{{ category }}</span></aside><div class="goods"><van-card v-for="item in goods" :key="item.name" :title="item.name" :desc="item.desc" :price="item.price" :thumb="teaImage" @click="goProductDetail(item)"><template #tags><van-tag plain type="danger">精选</van-tag></template><template #footer><van-button icon="cart-o" size="mini" round type="danger" @click.stop="$router.push('/joyful-selection/cart')"/></template></van-card></div></section><van-tabbar route><van-tabbar-item icon="wap-home-o" to="/joyful-selection">首页</van-tabbar-item><van-tabbar-item icon="apps-o" to="/joyful-selection/products">分类</van-tabbar-item><van-tabbar-item icon="cart-o" to="/joyful-selection/cart">购物车</van-tabbar-item><van-tabbar-item icon="user-o" to="/joyful-selection/profile">我的</van-tabbar-item></van-tabbar></main></template>
-<script>import teaImage from '@/assets/joyful-selection/products/tea-set.png';export default{name:'JoyfulSelectionProductList',data:()=>({teaImage,active:0,selected:'推荐',tabs:['综合','销量','价格','筛选'],categories:['推荐','居家生活','数码家电','美妆个护','食品饮料','母婴玩具','服饰鞋包','运动户外'],goods:[{name:'简约北欧风陶瓷餐具套装',desc:'精致实用，悦享生活',price:'69.90'},{name:'便携式榨汁机 家用小型',desc:'鲜榨果汁随时享',price:'89.00'},{name:'100%纯棉舒适四件套',desc:'柔软亲肤，安心睡眠',price:'179.00'},{name:'智能声波电动牙刷',desc:'高频洁净，呵护口腔',price:'129.00'}]}),methods:{goProductDetail(item){this.$router.push({path:'/joyful-selection/product-detail',query:{title:item.name,price:item.price}})}}}</script>
-<style scoped lang="less">.product-page{min-height:100vh;padding-bottom:56px;background:#fff}.layout{display:flex}.layout aside{width:86px;flex:none;background:#f7f7f7}.layout aside span{display:block;padding:16px 8px;text-align:center;color:#666;font-size:12px}.layout aside .active{background:#fff;color:#ff5b20;font-weight:bold}.goods{flex:1;min-width:0;padding:0 9px}.goods .van-card{margin:10px 0;background:#fff}.goods ::v-deep .van-card__price{color:#ff5b20;font-weight:bold}</style>
+<template>
+  <main class="product-page">
+    <div class="fixed-top">
+      <van-nav-bar title="商品列表" left-arrow @click-left="$router.back()" />
+      <van-tabs v-model="active" color="#ff5b20" title-active-color="#ff5b20" title-inactive-color="#333">
+        <van-tab v-for="tab in tabs" :key="tab" :title="tab" />
+      </van-tabs>
+    </div>
+
+    <section class="layout">
+      <aside>
+        <span
+          v-for="category in categories"
+          :key="category"
+          :class="{ active: category === selected }"
+          @click="selected = category"
+        >
+          {{ category }}
+        </span>
+      </aside>
+
+      <div class="goods">
+        <article v-for="item in visibleGoods" :key="item.id" class="goods-item" @click="goProductDetail(item)">
+          <van-image class="goods-thumb" :src="item.image" fit="cover" />
+          <div class="goods-info">
+            <h3>{{ item.name }}</h3>
+            <van-tag class="goods-tag" plain type="danger">{{ item.tag }}</van-tag>
+            <div class="goods-bottom">
+              <b>¥{{ item.price }}</b>
+              <span>已售{{ item.sales }}</span>
+              <button type="button" class="cart-button" @click.stop="$router.push('/joyful-selection/cart')">
+                <van-icon name="cart-o" />
+              </button>
+            </div>
+          </div>
+        </article>
+      </div>
+    </section>
+
+  </main>
+</template>
+
+<script>
+import { joyfulProducts } from '../product-data'
+
+const productImages = joyfulProducts.map(item => item.image)
+
+const categorySeeds = {
+  居家生活: [
+    ['cream-oven', '奶油白家用迷你烤箱', '小巧不占地，早餐烘焙好帮手', '129.00', '1.2万件', productImages[1]],
+    ['cotton-bedding', '100%纯棉舒适四件套', '柔软亲肤，安心睡眠', '179.00', '6453件', productImages[1]],
+    ['aroma-gift', '橙意香薰礼盒套装', '淡雅留香，装点居家空间', '59.90', '8321件', productImages[3]],
+    ['desktop-vase', '简约北欧陶瓷花瓶', '清新配色，点亮桌面角落', '39.90', '3180件', productImages[3]]
+  ],
+  数码家电: [
+    ['earbuds-air2', '小米蓝牙耳机 Air2 SE', '轻盈半入耳，通勤运动都好听', '69.90', '1.2万件', productImages[0]],
+    ['smart-speaker-pro', '黑曜智能音箱 Pro', '语音唤醒，沉浸听感', '99.00', '2.1万件', productImages[2]],
+    ['electric-toothbrush', '智能声波电动牙刷', '高频洁净，呵护口腔', '129.00', '2.1万件', productImages[0]],
+    ['dual-charger', '双口快充充电器 30W', '小巧便携，多设备快充', '69.00', '5632件', productImages[2]]
+  ],
+  美妆个护: [
+    ['skin-care-box', '植萃保湿护肤礼盒', '水润修护，清爽不粘腻', '99.90', '4820件', productImages[3]],
+    ['aroma-wash', '香氛洗护旅行套装', '温和清洁，清新留香', '59.90', '7932件', productImages[3]],
+    ['makeup-mirror', '便携补光化妆镜', '高清镜面，随时补妆', '49.90', '3651件', productImages[2]],
+    ['hand-cream', '滋润护手霜三支装', '细腻滋养，轻柔香气', '39.90', '5280件', productImages[3]]
+  ],
+  食品饮料: [
+    ['orange-gift', '橙意惊喜零食礼盒', '精致包装，送礼更有心意', '59.90', '6324件', productImages[3]],
+    ['coffee-cup', '咖啡随行杯组合', '锁温防漏，醇香随行', '49.90', '3520件', productImages[0]],
+    ['tea-snack', '下午茶点心礼盒', '多种风味，一盒满足', '69.90', '4891件', productImages[3]],
+    ['fruit-drink', '轻享果饮礼盒', '清爽酸甜，聚会常备', '79.90', '2976件', productImages[3]]
+  ],
+  母婴玩具: [
+    ['baby-bottle', '安心防摔儿童水杯', '轻巧易握，出门好携带', '39.90', '4250件', productImages[0]],
+    ['toy-blocks', '益智拼搭积木套装', '色彩柔和，陪伴成长', '89.00', '2186件', productImages[3]],
+    ['kids-night-light', '柔光儿童陪伴夜灯', '温和光线，安心入睡', '69.90', '3548件', productImages[2]],
+    ['baby-towel', '纯棉柔软浴巾两件装', '亲肤吸水，日常必备', '59.90', '2761件', productImages[1]]
+  ],
+  服饰鞋包: [
+    ['laptop-backpack', '大容量双肩电脑背包', '分区收纳，通勤出行轻松装', '149.00', '1.6万件', productImages[3]],
+    ['mini-bag', '轻巧通勤斜挎小包', '简洁百搭，日常实用', '79.90', '5321件', productImages[3]],
+    ['silk-scarf', '柔软撞色丝巾礼盒', '细腻亲肤，点亮穿搭', '69.90', '2680件', productImages[3]],
+    ['canvas-tote', '简约帆布托特包', '大容量开口，随手能装', '49.90', '6412件', productImages[3]]
+  ],
+  运动户外: [
+    ['sport-bottle', '运动便携保温水杯', '长效锁温，户外随行', '49.90', '7342件', productImages[0]],
+    ['neck-massager', '筋膜放松按摩仪 Mini', '轻巧便携，舒缓酸胀', '99.00', '3921件', productImages[2]],
+    ['camping-light', '户外便携露营灯', '多档照明，夜晚更安心', '79.00', '2568件', productImages[2]],
+    ['fitness-band', '弹力健身拉力带套装', '居家训练，轻松塑形', '29.90', '4396件', productImages[1]]
+  ]
+}
+
+const goods = Object.entries(categorySeeds).flatMap(([category, items]) =>
+  items.map(([id, name, desc, price, sales, image]) => ({
+    id,
+    name,
+    desc,
+    price,
+    sales,
+    image,
+    category,
+    tag: '赠品'
+  }))
+)
+
+export default {
+  name: 'JoyfulSelectionProductList',
+  data: () => ({
+    active: 0,
+    selected: '推荐',
+    tabs: ['综合', '销量', '价格↕', '筛选⌄'],
+    categories: ['推荐', '居家生活', '数码家电', '美妆个护', '食品饮料', '母婴玩具', '服饰鞋包', '运动户外'],
+    goods
+  }),
+  computed: {
+    visibleGoods() {
+      return this.selected === '推荐'
+        ? this.goods.slice(0, 10)
+        : this.goods.filter(item => item.category === this.selected)
+    }
+  },
+  methods: {
+    goProductDetail(item) {
+      this.$router.push({ path: '/joyful-selection/product-detail', query: { id: item.id } })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.product-page {
+  min-height: 100vh;
+  padding: 90px 0 56px;
+  background: #fff;
+}
+
+.fixed-top {
+  position: fixed;
+  z-index: 20;
+  top: 0;
+  right: 0;
+  left: 0;
+  background: #fff;
+}
+
+.fixed-top ::v-deep .van-nav-bar {
+  height: 46px;
+  box-shadow: none;
+}
+
+.fixed-top ::v-deep .van-nav-bar__title {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.fixed-top ::v-deep .van-tabs__wrap {
+  height: 44px;
+}
+
+.fixed-top ::v-deep .van-tab {
+  color: #333;
+  font-size: 12px;
+}
+
+.fixed-top ::v-deep .van-tab--active {
+  color: #ff5b20;
+  font-weight: 600;
+}
+
+.fixed-top ::v-deep .van-tabs__line {
+  width: 18px;
+  height: 2px;
+  border-radius: 2px;
+  background: #ff5b20;
+}
+
+.layout {
+  display: flex;
+  align-items: flex-start;
+}
+
+.layout aside {
+  position: sticky;
+  top: 90px;
+  width: 78px;
+  height: calc(100vh - 146px);
+  flex: none;
+  overflow-y: auto;
+  background: #f8f8f8;
+}
+
+.layout aside span {
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  color: #777;
+  font-size: 12px;
+  line-height: 1.2;
+  text-align: center;
+}
+
+.layout aside .active {
+  position: relative;
+  background: #fff;
+  color: #222;
+  font-weight: 700;
+}
+
+.layout aside .active::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 3px;
+  height: 18px;
+  border-radius: 0 3px 3px 0;
+  background: #ff5b20;
+  content: '';
+  transform: translateY(-50%);
+}
+
+.goods {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 10px 12px;
+}
+
+.goods-item {
+  display: flex;
+  min-height: 96px;
+  gap: 10px;
+  padding: 0 0 13px;
+  background: #fff;
+}
+
+.goods-item + .goods-item {
+  margin-top: 13px;
+}
+
+.goods-thumb {
+  width: 88px;
+  height: 88px;
+  flex: none;
+  overflow: hidden;
+  border-radius: 4px;
+  background: #f6f6f6;
+}
+
+.goods-info {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  padding-top: 2px;
+}
+
+.goods-info h3 {
+  display: -webkit-box;
+  overflow: hidden;
+  min-height: 34px;
+  margin: 0 0 5px;
+  color: #222;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 17px;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.goods-tag {
+  width: fit-content;
+  transform: scale(.86);
+  transform-origin: left center;
+}
+
+.goods-bottom {
+  display: flex;
+  align-items: center;
+  margin-top: auto;
+}
+
+.goods-bottom b {
+  color: #ff5b20;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.goods-bottom span {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  margin-left: 9px;
+  color: #aaa;
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cart-button {
+  display: flex;
+  width: 26px;
+  height: 26px;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ff7a3c;
+  border-radius: 50%;
+  color: #ff5b20;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(255, 91, 32, .12);
+}
+
+.cart-button .van-icon {
+  font-size: 17px;
+}
+
+</style>
diff --git a/supplied-h5/src/view/joyful-selection/profile/index.vue b/supplied-h5/src/view/joyful-selection/profile/index.vue
index 772ffba..84f39b5 100644
--- a/supplied-h5/src/view/joyful-selection/profile/index.vue
+++ b/supplied-h5/src/view/joyful-selection/profile/index.vue
@@ -1,3 +1,59 @@
-<template><main class="profile-page"><section class="profile-top"><van-image round width="48" height="48" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/><div><b>张三</b><p>欢迎来到悦享优选</p></div><van-icon name="ellipsis"/></section><section class="asset"><div><small>我的积分</small><b>2368</b></div><div><small>成长值</small><b>3680</b></div><div><small>优惠券</small><b>5</b></div></section><section class="panel"><div class="panel-title">我的订单 <span @click="$router.push('/joyful-selection/orders')">全部订单 ›</span></div><van-grid :column-num="5" :border="false"><van-grid-item icon="balance-pay" text="待付款"/><van-grid-item icon="logistics" text="待发货"/><van-grid-item icon="send-gift-o" text="待收货"/><van-grid-item icon="todo-list-o" text="已完成"/><van-grid-item icon="after-sale" text="售后"/></van-grid></section><section class="panel"><div class="panel-title">我的服务</div><van-grid :column-num="4" :border="false"><van-grid-item icon="star-o" text="我的收藏"/><van-grid-item icon="clock-o" text="浏览记录"/><van-grid-item icon="location-o" text="收货地址"/><van-grid-item icon="coupon-o" text="优惠券"/><van-grid-item icon="gift-o" text="积分商城" @click="$router.push('/joyful-selection/points')"/><van-grid-item icon="service-o" text="客户服务"/><van-grid-item icon="edit" text="意见反馈"/><van-grid-item icon="setting-o" text="设置"/></van-grid></section><van-tabbar route><van-tabbar-item icon="wap-home-o" to="/joyful-selection">首页</van-tabbar-item><van-tabbar-item icon="apps-o" to="/joyful-selection/products">分类</van-tabbar-item><van-tabbar-item icon="cart-o" to="/joyful-selection/cart">购物车</van-tabbar-item><van-tabbar-item icon="user-o" to="/joyful-selection/profile">我的</van-tabbar-item></van-tabbar></main></template>
-<script>export default{name:'JoyfulSelectionProfile'}</script>
-<style scoped>.profile-page{min-height:100vh;padding-bottom:50px;background:#f7f7f7}.profile-top{display:flex;align-items:center;gap:12px;padding:24px 20px;background:linear-gradient(135deg,#dcd8ff,#f9f8ff)}.profile-top div{flex:1}.profile-top b{font-size:17px}.profile-top p{margin:4px 0 0;color:#777;font-size:11px}.asset{display:flex;margin:-3px 12px 12px;padding:14px;border-radius:10px;background:#fff}.asset div{display:grid;flex:1;gap:6px;text-align:center}.asset small{color:#777;font-size:11px}.asset b{color:#ff5b20}.panel{margin:10px 12px;border-radius:10px;background:#fff}.panel-title{padding:13px;font-size:13px;font-weight:bold}.panel-title span{float:right;color:#999;font-size:11px;font-weight:normal}.panel ::v-deep .van-grid-item__text{font-size:10px}</style>
+<template>
+  <main class="profile-page">
+    <section class="profile-top">
+      <van-image round width="48" height="48" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+      <div><b>张三</b><p>欢迎来到悦享优选</p></div>
+      <van-icon name="ellipsis" />
+    </section>
+    <section class="asset">
+      <div><small>我的积分</small><b>2368</b></div>
+      <div><small>成长值</small><b>3680</b></div>
+      <div><small>优惠券</small><b>5</b></div>
+    </section>
+    <section class="panel">
+      <div class="panel-title">我的订单 <span @click="$router.push('/joyful-selection/orders')">全部订单 ›</span></div>
+      <van-grid :column-num="5" :border="false">
+        <van-grid-item icon="balance-pay" text="待付款" />
+        <van-grid-item icon="logistics" text="待发货" />
+        <van-grid-item icon="send-gift-o" text="待收货" />
+        <van-grid-item icon="todo-list-o" text="已完成" />
+        <van-grid-item icon="after-sale" text="售后" />
+      </van-grid>
+    </section>
+    <section class="panel">
+      <div class="panel-title">我的服务</div>
+      <van-grid :column-num="4" :border="false">
+        <van-grid-item icon="star-o" text="我的收藏" />
+        <van-grid-item icon="clock-o" text="浏览记录" />
+        <van-grid-item icon="location-o" text="收货地址" />
+        <van-grid-item icon="coupon-o" text="优惠券" />
+        <van-grid-item icon="gift-o" text="积分商城" @click="$router.push('/joyful-selection/points')" />
+        <van-grid-item icon="service-o" text="客户服务" />
+        <van-grid-item icon="edit" text="意见反馈" />
+        <van-grid-item icon="setting-o" text="设置" />
+      </van-grid>
+    </section>
+  </main>
+</template>
+
+<script>
+export default {
+  name: 'JoyfulSelectionProfile'
+}
+</script>
+
+<style scoped>
+.profile-page { min-height: 100vh; padding-bottom: 70px; background: #f7f7f7; }
+.profile-top { display: flex; align-items: center; gap: 12px; padding: 24px 20px; background: linear-gradient(135deg, #dcd8ff, #f9f8ff); }
+.profile-top div { flex: 1; }
+.profile-top b { font-size: 17px; }
+.profile-top p { margin: 4px 0 0; color: #777; font-size: 11px; }
+.asset { display: flex; margin: -3px 12px 12px; padding: 14px; border-radius: 10px; background: #fff; }
+.asset div { display: grid; flex: 1; gap: 6px; text-align: center; }
+.asset small { color: #777; font-size: 11px; }
+.asset b { color: #ff5b20; }
+.panel { margin: 10px 12px; border-radius: 10px; background: #fff; }
+.panel-title { padding: 13px; font-size: 13px; font-weight: bold; }
+.panel-title span { float: right; color: #999; font-size: 11px; font-weight: normal; }
+.panel ::v-deep .van-grid-item__text { font-size: 10px; }
+</style>
diff --git a/supplied-h5/src/view/joyful-selection/profile/orders/index.vue b/supplied-h5/src/view/joyful-selection/profile/orders/index.vue
index 2b55937..065bdcc 100644
--- a/supplied-h5/src/view/joyful-selection/profile/orders/index.vue
+++ b/supplied-h5/src/view/joyful-selection/profile/orders/index.vue
@@ -1,3 +1,48 @@
-<template><main class="orders-page"><van-nav-bar title="我的订单" left-arrow @click-left="$router.back()"/><van-tabs v-model="active"><van-tab v-for="tab in tabs" :key="tab" :title="tab"/></van-tabs><section><article v-for="order in orders" :key="order.id"><header><span>订单号：{{ order.id }}</span><b :class="order.status">{{ order.status }}</b></header><van-card title="简约北欧风陶瓷餐具套装" desc="共 3 件商品" price="287.90" :thumb="teaImage"/><footer><span>合计：<b>¥287.90</b></span><van-button size="small" round plain type="danger">查看详情</van-button></footer></article></section></main></template>
-<script>import teaImage from '@/assets/joyful-selection/products/tea-set.png';export default{name:'JoyfulSelectionOrders',data:()=>({teaImage,active:0,tabs:['全部','待付款','待发货','待收货','已完成','售后'],orders:[{id:'YX2024051812345678',status:'待发货'},{id:'YX2024051509876543',status:'待收货'},{id:'YX2024051211223344',status:'已完成'}]})}</script>
-<style scoped>.orders-page{min-height:100vh;background:#f7f7f7}.orders-page section{padding:0 12px}.orders-page article{margin-top:10px;border-radius:10px;background:#fff}.orders-page header,.orders-page footer{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;color:#999;font-size:11px}.orders-page header b{color:#ff5b20}.orders-page .已完成{color:#27ae60}.orders-page footer b{color:#222}.orders-page .van-card{background:#fff}</style>
+<template>
+  <main class="orders-page">
+    <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />
+    <van-tabs v-model="active">
+      <van-tab v-for="tab in tabs" :key="tab" :title="tab" />
+    </van-tabs>
+    <section>
+      <article v-for="order in orders" :key="order.id">
+        <header><span>订单号：{{ order.id }}</span><b :class="order.status">{{ order.status }}</b></header>
+        <van-card
+          :title="order.product.name"
+          desc="共 3 件商品"
+          price="297.90"
+          :thumb="order.product.image"
+        />
+        <footer><span>合计：<b>¥297.90</b></span><van-button size="small" round plain type="danger">查看详情</van-button></footer>
+      </article>
+    </section>
+  </main>
+</template>
+
+<script>
+import { joyfulProducts } from '../../product-data'
+
+export default {
+  name: 'JoyfulSelectionOrders',
+  data: () => ({
+    active: 0,
+    tabs: ['全部', '待付款', '待发货', '待收货', '已完成', '售后'],
+    orders: [
+      { id: 'YX2024051812345678', status: '待发货', product: joyfulProducts[0] },
+      { id: 'YX2024051509876543', status: '待收货', product: joyfulProducts[1] },
+      { id: 'YX2024051211223344', status: '已完成', product: joyfulProducts[2] }
+    ]
+  })
+}
+</script>
+
+<style scoped>
+.orders-page { min-height: 100vh; background: #f7f7f7; }
+.orders-page section { padding: 0 12px; }
+.orders-page article { margin-top: 10px; border-radius: 10px; background: #fff; }
+.orders-page header, .orders-page footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #999; font-size: 11px; }
+.orders-page header b { color: #ff5b20; }
+.orders-page .已完成 { color: #27ae60; }
+.orders-page footer b { color: #222; }
+.orders-page .van-card { background: #fff; }
+</style>