diff --git a/app.json b/app.json
index 7fb5859..7f0361f 100644
--- a/app.json
+++ b/app.json
@@ -12,7 +12,8 @@
     "pages/help/community/index",
     "pages/help/address/index/index",
     "pages/help/address/edit/index",
-    "pages/shop/detail/index"
+    "pages/shop/detail/index",
+    "pages/shop/success/index"
   ],
   "window": {
     "navigationBarTextStyle": "black",
diff --git a/app.wxss b/app.wxss
index eb00a7a..8434d30 100644
--- a/app.wxss
+++ b/app.wxss
@@ -4,6 +4,7 @@ page{
   line-height: 1;
   background-color:#F5F5F5;
   color: #222222;
+  padding-bottom:80rpx;
 }
 
 button{
@@ -105,6 +106,13 @@ checkbox .wx-checkbox-input{
   border-radius: 50%;
 }
 
+page-container .content{
+  border-radius: 24rpx 24rpx 0 0;
+  background-color: #F5F5F5;
+  min-height: 200rpx;
+  /* padding:20rpx; */
+}
+
 .page-container{
   background-color: #fff;
   border-radius: 20rpx;
@@ -113,4 +121,46 @@ checkbox .wx-checkbox-input{
 }
 .page-container.shadow{
   box-shadow: 0px 6px 6px 1px rgba(0, 0, 0, 0.05);
+}
+
+
+.tags{
+  display: flex;
+  gap: 10rpx;
+}
+.tags .tag{
+  font-size:20rpx;
+  padding:6rpx 10rpx;
+  color: #888888;
+  border: 0.5px solid rgba(153, 153, 153, 0.5);
+  border-radius: 6rpx;
+}
+.spliter{
+  border-bottom: 1px solid rgba(153, 153, 153, 0.2);
+}
+.money,.money-promation,.money-normal,.money-disable{
+  font-size: 36rpx;
+  font-weight: 500;
+}
+.money::before,.money-promation::before,.money-normal::before,.money-disable::before{
+  content: "¥";
+  font-size: 80%;
+}
+.money{
+  color:#EB0000;
+}
+.money-promation{
+  color:#FF8400;
+}
+.money-promation::before{
+  content: "-¥";
+}
+.money-normal{
+  color:unset;
+}
+.money-disable{
+  color:#888888;
+  text-decoration: line-through;
+  font-size: 28rpx;
+  font-weight:normal;
 }
\ No newline at end of file
diff --git a/assets/icon/order/empty@2x.png b/assets/icon/order/empty@2x.png
new file mode 100644
index 0000000..e82b8bf
Binary files /dev/null and b/assets/icon/order/empty@2x.png differ
diff --git a/assets/imgs/for_test/1.jpg b/assets/imgs/for_test/1.jpg
new file mode 100644
index 0000000..fe33050
Binary files /dev/null and b/assets/imgs/for_test/1.jpg differ
diff --git a/assets/imgs/for_test/1.png b/assets/imgs/for_test/1.png
deleted file mode 100644
index 724212a..0000000
Binary files a/assets/imgs/for_test/1.png and /dev/null differ
diff --git a/assets/imgs/for_test/2.jpg b/assets/imgs/for_test/2.jpg
new file mode 100644
index 0000000..4f1e914
Binary files /dev/null and b/assets/imgs/for_test/2.jpg differ
diff --git a/assets/imgs/for_test/2.png b/assets/imgs/for_test/2.png
deleted file mode 100644
index 8c308c2..0000000
Binary files a/assets/imgs/for_test/2.png and /dev/null differ
diff --git a/assets/imgs/for_test/jd.png b/assets/imgs/for_test/jd.png
index 14d6754..282503d 100644
Binary files a/assets/imgs/for_test/jd.png and b/assets/imgs/for_test/jd.png differ
diff --git a/assets/imgs/for_test/woman.png b/assets/imgs/for_test/woman.png
index e68cc2d..e25b8d2 100644
Binary files a/assets/imgs/for_test/woman.png and b/assets/imgs/for_test/woman.png differ
diff --git a/components/navbar/index.json b/components/navbar/index.json
index e8cfaaf..c07b0d2 100644
--- a/components/navbar/index.json
+++ b/components/navbar/index.json
@@ -1,4 +1,5 @@
 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {},
+  "styleIsolation": "shared"
 }
\ No newline at end of file
diff --git a/components/shopItem/index.js b/components/shopItem/index.js
new file mode 100644
index 0000000..2a3b201
--- /dev/null
+++ b/components/shopItem/index.js
@@ -0,0 +1,24 @@
+// components/shop/index.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})
\ No newline at end of file
diff --git a/components/shopItem/index.json b/components/shopItem/index.json
new file mode 100644
index 0000000..c07b0d2
--- /dev/null
+++ b/components/shopItem/index.json
@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "usingComponents": {},
+  "styleIsolation": "shared"
+}
\ No newline at end of file
diff --git a/components/shopItem/index.wxml b/components/shopItem/index.wxml
new file mode 100644
index 0000000..d9e6163
--- /dev/null
+++ b/components/shopItem/index.wxml
@@ -0,0 +1,18 @@
+<view class="page-container shop-item">
+  <image class="logo" src="/assets/imgs/for_test/jd.png"/>
+  <view class="content">
+    <view class="line1">京东养车</view>
+    <view class="line2">
+      <view class="line2-1">燎原路228号御景湾</view>
+      <view class="line2-2">100m</view>
+    </view>
+    <view class="line-coupon">
+      <label class="money">22.9</label>
+      <label class="money-disable">22.9</label>【5座】标准洗车
+    </view>
+    <view class="line-coupon">
+      <label class="money">22.9</label>
+      <label class="money-disable">22.9</label>【5座】标准洗车
+    </view>
+  </view>
+</view>
\ No newline at end of file
diff --git a/components/shopItem/index.wxss b/components/shopItem/index.wxss
new file mode 100644
index 0000000..ec1ceb8
--- /dev/null
+++ b/components/shopItem/index.wxss
@@ -0,0 +1,49 @@
+.shop-item{
+  display: flex;
+}
+.shop-item .logo{
+  width:180rpx;height:180rpx;
+}
+.shop-item .content{
+  flex:1;
+  margin-left:18rpx;
+}
+.shop-item .line1{
+  font-size:34rpx;
+  font-weight: 600;
+}
+.shop-item .line2{
+  font-size: 26rpx;
+  display: flex;
+  color:#888888;
+  margin-top:26rpx;
+  padding-bottom:16rpx;
+}
+.shop-item .line2-1{
+  flex:1;
+}
+.shop-item .line-coupon{
+  font-size: 26rpx;
+  margin-top: 20rpx;
+  position: relative;
+}
+.shop-item .line-coupon::before{
+  content: '惠';
+  width:34rpx;height:34rpx;
+  font-size:22rpx;
+  border-radius: 8rpx;
+  background-color: #FF8400;
+  color: #fff;
+  display: inline-block;
+  text-align: center;
+  line-height: 34rpx;
+  vertical-align: top;
+  margin-right: 8rpx;
+}
+.shop-item .money{
+  font-size: 32rpx;
+}
+.shop-item .money-disable{
+  font-size: 28rpx;
+  margin-left:10rpx;
+}
\ No newline at end of file
diff --git a/pages/order/index/index.js b/pages/order/index/index.js
index c67a9aa..d78d36d 100644
--- a/pages/order/index/index.js
+++ b/pages/order/index/index.js
@@ -5,7 +5,11 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    tabIndex:0
+  },
+  changeTab(event){
+    const tabIndex = event.currentTarget.dataset.index;
+    this.setData({tabIndex})
   },
 
   /**
diff --git a/pages/order/index/index.json b/pages/order/index/index.json
index 8835af0..e5c8349 100644
--- a/pages/order/index/index.json
+++ b/pages/order/index/index.json
@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "nav-bar":"/components/navbar"
+  },
+  "navigationStyle": "custom"
 }
\ No newline at end of file
diff --git a/pages/order/index/index.wxml b/pages/order/index/index.wxml
index e1f0723..3e91ac3 100644
--- a/pages/order/index/index.wxml
+++ b/pages/order/index/index.wxml
@@ -1,2 +1,14 @@
-<!--pages/order/index/index.wxml-->
-<text>pages/order/index/index.wxml</text>
\ No newline at end of file
+<nav-bar class="nav-bar"/>
+<view class="tab-bar">
+  <view class="item-container {{tabIndex==0?'current':''}}" bind:tap="changeTab" data-index="0">
+    <view class="item">跑腿服务</view>
+  </view>
+  <view class="item-container {{tabIndex==1?'current':''}}" bind:tap="changeTab" data-index="1">
+    <view class="item">团购省钱</view>
+  </view>
+</view>
+
+<view class="list-empty">
+  <image class="icon" src="/assets/icon/order/empty@2x.png"/>
+  <view class="text">暂无相关订单</view>
+</view>
\ No newline at end of file
diff --git a/pages/order/index/index.wxss b/pages/order/index/index.wxss
index 5c40035..3ff9023 100644
--- a/pages/order/index/index.wxss
+++ b/pages/order/index/index.wxss
@@ -1 +1,47 @@
-/* pages/order/index/index.wxss */
\ No newline at end of file
+.nav-bar{
+  background-color: #fff;
+}
+.tab-bar{
+  display: flex;
+  justify-content: space-between;
+  background-color: #fff;
+  font-size: 34rpx;
+  font-weight: 600;
+}
+.tab-bar .item-container{
+  padding:0 110rpx;
+}
+.tab-bar .item{
+  position: relative;
+  padding:40rpx 0;
+  color: #7C8695;
+  transition-duration: .4s;
+}
+.tab-bar .item::before{
+  opacity: 0;
+  content: "";
+  height:8rpx;
+  width:100%;
+  position: absolute;
+  bottom:0;
+  background-color: #1A4DEB;
+  transition-duration: .4s;
+}
+.tab-bar .current .item{
+  color: #000;
+}
+.tab-bar .current .item::before{
+  opacity: 1;
+}
+
+.list-empty{
+  text-align: center;
+  margin-top:380rpx;
+}
+.list-empty .icon{
+  width:160rpx;height:160rpx;
+}
+.list-empty .text{
+  font-size:30rpx;
+  color:#7C8695
+}
\ No newline at end of file
diff --git a/pages/shop/detail/index.js b/pages/shop/detail/index.js
index cc52cef..1c8bd41 100644
--- a/pages/shop/detail/index.js
+++ b/pages/shop/detail/index.js
@@ -5,7 +5,18 @@ Page({
    * 页面的初始数据
    */
   data: {
+    isShowConfirm:false
+  },
 
+  showConfirm(){
+    this.setData({
+      isShowConfirm:true
+    })
+  },
+  goToSuccess(){
+    wx.navigateTo({
+      url: '/pages/shop/success/index',
+    })
   },
 
   /**
diff --git a/pages/shop/detail/index.wxml b/pages/shop/detail/index.wxml
index 0570cfc..7f1a01b 100644
--- a/pages/shop/detail/index.wxml
+++ b/pages/shop/detail/index.wxml
@@ -1,10 +1,10 @@
 <view class="swiper-container">
   <swiper class="swiper" >
     <swiper-item class="item">
-      <image class="image" src="/assets/imgs/for_test/1.png" mode="aspectFit"/>
+      <image class="image" src="/assets/imgs/for_test/1.jpg" mode="aspectFit"/>
     </swiper-item>
     <swiper-item class="item">
-      <image class="image" src="/assets/imgs/for_test/2.png" mode="aspectFit"/>
+      <image class="image" src="/assets/imgs/for_test/2.jpg" mode="aspectFit"/>
     </swiper-item>
   </swiper>
   <view class="nav">
@@ -64,8 +64,44 @@
             <label>消费金抵扣</label>
           </view>
         </view>
-        <button class="button" size="mini" type="primary">抢购</button>
+        <button class="button" size="mini" type="primary" bind:tap="showConfirm">抢购</button>
       </view>
     </view>
   </view>
-</view>
\ No newline at end of file
+</view>
+
+
+<page-container show="{{isShowConfirm}}" round close-on-slide-down>
+  <view class="content pc-content">
+    <view class="page-container">
+      <view class="info">
+        <image class="image" src="/assets/imgs/for_test/woman.png"/>
+        <view class="right">
+          <view class="title">【督导】洗剪吹+修眉</view>
+          <view class="tags">
+            <view class="tag">周一至周五可用</view>
+            <view class="tag">随时退</view>
+          </view>
+        </view>
+      </view>
+      <view class="kv">
+        <view class="key">团购价</view>
+        <view class="value">
+          <label class="money-normal">88.0</label>
+        </view>
+      </view>
+      <view class="spliter"></view>
+      <view class="kv">
+        <view class="key">消费金抵扣</view>
+        <view class="value">
+          <label class="money-promation">9.0</label>
+        </view>
+      </view>
+      <view class="kv">
+        <view class="key"></view>
+        <view class="value">合计：<label class="money">79.0</label></view>
+      </view>
+    </view>
+    <button class="button" type="primary" bind:tap="goToSuccess">立即购买</button>
+  </view>
+</page-container>
\ No newline at end of file
diff --git a/pages/shop/detail/index.wxss b/pages/shop/detail/index.wxss
index 52fd61f..bfe09c4 100644
--- a/pages/shop/detail/index.wxss
+++ b/pages/shop/detail/index.wxss
@@ -44,7 +44,6 @@
   margin-top:20rpx;
 }
 .shop-info .spliter{
-  border-bottom: 1px solid rgba(153, 153, 153, 0.2);
   margin:16rpx 0 30rpx 0;
 }
 .shop-info .address .left{
@@ -122,33 +121,19 @@
   font-weight: 500;
 }
 .group-buy .item .right .tags{
-  display: flex;
-  gap: 10rpx;
   margin-top:20rpx;
 }
-.group-buy .item .right .tag{
-  font-size:20rpx;
-  padding:6rpx 10rpx;
-  color: #888888;
-  border: 0.5px solid rgba(153, 153, 153, 0.5);
-  border-radius: 6rpx;
-  
+.group-buy .item .right .bl-money{
+  display: flex;
+  align-items: center;
 }
 .group-buy .item .right .money{
   color:#EB0000;
   font-size: 32rpx;
 }
-.group-buy .item .right .money::before{
-  content:"¥";
-  font-size: 24rpx;
-}
 .group-buy .item .right .money-disable{
-  color: #888888;
-  text-decoration: line-through;
   margin-left: 10rpx;
-}
-.group-buy .item .right .money-disable::before{
-  content:"¥";
+  font-size: 24rpx;
 }
 .group-buy .item .promation{
   border-radius: 6rpx;
@@ -177,4 +162,36 @@
   font-weight: normal;
   line-height: 1;
   padding:14rpx 36rpx;
-}
\ No newline at end of file
+}
+
+.pc-content .info{
+  display: flex;
+  padding-bottom:10rpx
+}
+.pc-content .info .image{
+  width:160rpx;height:160rpx;
+}
+.pc-content .info .right{
+  flex:1;
+  margin-left:40rpx;
+}
+.pc-content .info .tags{
+  margin-top:20rpx;
+}
+.pc-content .info .title{
+  font-size: 36rpx;
+}
+.pc-content .kv{
+  display: flex;
+  margin:30rpx;
+}
+.pc-content .kv .key{
+  flex:1;
+  font-size:29rpx;
+}
+.pc-content .kv .value{
+  font-size: 26rpx;
+}
+.pc-content .button{
+  margin:20rpx 20rpx 50rpx;
+}
diff --git a/pages/shop/index/index.json b/pages/shop/index/index.json
index e5c8349..eb94160 100644
--- a/pages/shop/index/index.json
+++ b/pages/shop/index/index.json
@@ -1,6 +1,7 @@
 {
   "usingComponents": {
-    "nav-bar":"/components/navbar"
+    "nav-bar":"/components/navbar",
+    "shop-item":"/components/shopItem"
   },
   "navigationStyle": "custom"
 }
\ No newline at end of file
diff --git a/pages/shop/index/index.wxml b/pages/shop/index/index.wxml
index c181aa4..ca17f66 100644
--- a/pages/shop/index/index.wxml
+++ b/pages/shop/index/index.wxml
@@ -12,7 +12,7 @@
 </view>
 
 <view class="shop-list">
-  <view class="page-container item" wx:for="{{3}}" bind:tap="goToDetail" wx:key="index">
+  <shop-item wx:for="{{3}}" bind:tap="goToDetail" wx:key="index">
     <image class="logo" src="/assets/imgs/for_test/jd.png"/>
     <view class="content">
       <view class="line1">京东养车</view>
@@ -21,13 +21,13 @@
         <view class="line2-2">100m</view>
       </view>
       <view class="line-coupon">
-        <label class="money">¥22.9</label>
-        <label class="money-disable">¥22.9</label>【5座】标准洗车
+        <label class="money">22.9</label>
+        <label class="money-disable">22.9</label>【5座】标准洗车
       </view>
       <view class="line-coupon">
-        <label class="money">¥22.9</label>
-        <label class="money-disable">¥22.9</label>【5座】标准洗车
+        <label class="money">22.9</label>
+        <label class="money-disable">22.9</label>【5座】标准洗车
       </view>
     </view>
-  </view>
+  </shop-item>
 </view>
\ No newline at end of file
diff --git a/pages/shop/index/index.wxss b/pages/shop/index/index.wxss
index 43bff68..b184944 100644
--- a/pages/shop/index/index.wxss
+++ b/pages/shop/index/index.wxss
@@ -13,8 +13,8 @@
 }
 .consume .money{
   font-size: 70rpx;
-  font-weight: 600;
   margin-top:40rpx;
+  color:#fff;
 }
 .consume .tips{
   position:absolute;
@@ -42,56 +42,3 @@
 .btns .item:not([type=primary]){
   background-color: #fff;
 }
-
-.shop-list .item{
-  display: flex;
-}
-.shop-list .item .logo{
-  width:180rpx;height:180rpx;
-}
-.shop-list .item .content{
-  flex:1;
-  margin-left:18rpx;
-}
-.shop-list .item .line1{
-  font-size:34rpx;
-  font-weight: 600;
-}
-.shop-list .item .line2{
-  font-size: 26rpx;
-  display: flex;
-  color:#888888;
-  margin-top:26rpx;
-  padding-bottom:16rpx;
-}
-.shop-list .item .line2-1{
-  flex:1;
-}
-.shop-list .item .line-coupon{
-  font-size: 26rpx;
-  margin-top: 20rpx;
-  position: relative;
-}
-.shop-list .item .line-coupon::before{
-  content: '惠';
-  width:34rpx;height:34rpx;
-  font-size:22rpx;
-  border-radius: 8rpx;
-  background-color: #FF8400;
-  color: #fff;
-  display: inline-block;
-  text-align: center;
-  line-height: 34rpx;
-  vertical-align: top;
-  margin-right: 8rpx;
-}
-.shop-list .item .money{
-  font-size: 32rpx;
-  color:#EB0000;
-  font-weight:500
-}
-.shop-list .item .money-disable{
-  font-size: 28rpx;
-  color: #888888;
-  text-decoration: line-through;
-}
\ No newline at end of file
diff --git a/pages/shop/success/index.js b/pages/shop/success/index.js
new file mode 100644
index 0000000..a96b9ac
--- /dev/null
+++ b/pages/shop/success/index.js
@@ -0,0 +1,66 @@
+// pages/shop/success/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})
\ No newline at end of file
diff --git a/pages/shop/success/index.json b/pages/shop/success/index.json
new file mode 100644
index 0000000..3d08559
--- /dev/null
+++ b/pages/shop/success/index.json
@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "shop-item":"/components/shopItem"
+  }
+}
\ No newline at end of file
diff --git a/pages/shop/success/index.wxml b/pages/shop/success/index.wxml
new file mode 100644
index 0000000..2c83db0
--- /dev/null
+++ b/pages/shop/success/index.wxml
@@ -0,0 +1,8 @@
+<view class="success">
+  <icon class="icon" type="success" size="120rpx" color="#1A4DEB"/>
+  <view class="text">支付成功</view>
+  <button class="button" plain>前往查看订单</button>
+</view>
+<view class="shop-list">
+  <shop-item wx:for="{{3}}" wx:key="index"/>
+</view>
\ No newline at end of file
diff --git a/pages/shop/success/index.wxss b/pages/shop/success/index.wxss
new file mode 100644
index 0000000..a290eb3
--- /dev/null
+++ b/pages/shop/success/index.wxss
@@ -0,0 +1,24 @@
+.success{
+  background-color: #fff;
+  text-align: center;
+  padding:100rpx 0;
+}
+.success .text{
+  font-size: 36rpx;
+  font-weight: 500;
+  margin-top:30rpx;
+}
+.success .button{
+  margin:100rpx 112rpx 0;
+  border: 1rpx solid rgba(124, 134, 149, 0.5);
+  border-radius: 60rpx;
+}
+
+.shop-list{
+  margin-top:-20rpx;
+  border-radius: 30rpx 30rpx 0 0;
+  position: relative;
+  z-index: 1;
+  background-color: #F5F5F5;
+  padding-top:20rpx;
+}
\ No newline at end of file