0506

project.config.json

@@ -1,96 +1,108 @@
 {
-  "description": "项目配置文件",
-  "packOptions": {
-    "ignore": []
-  },
-  "setting": {
-    "urlCheck": false,
-    "es6": true,
-    "enhance": false,
-    "postcss": true,
-    "preloadBackgroundData": false,
-    "minified": true,
-    "newFeature": true,
-    "coverView": true,
-    "nodeModules": false,
-    "autoAudits": false,
-    "showShadowRootInWxmlPanel": true,
-    "scopeDataCheck": false,
-    "uglifyFileName": false,
-    "checkInvalidKey": true,
-    "checkSiteMap": true,
-    "uploadWithSourceMap": true,
-    "compileHotReLoad": false,
-    "useMultiFrameRuntime": true,
-    "useApiHook": true,
-    "useApiHostProcess": false,
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
+    "description": "项目配置文件",
+    "packOptions": {
+        "ignore": []
     },
-    "enableEngineNative": false,
-    "bundle": false,
-    "useIsolateContext": true,
-    "useCompilerModule": true,
-    "userConfirmedUseCompilerModuleSwitch": false,
-    "userConfirmedBundleSwitch": false,
-    "packNpmManually": false,
-    "packNpmRelationList": [],
-    "minifyWXSS": true
-  },
-  "compileType": "miniprogram",
-  "libVersion": "2.16.1",
-  "appid": "wx47bde0e3d49633b4",
-  "projectname": "%E5%8D%A1%E7%89%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F",
-  "cloudfunctionTemplateRoot": "",
-  "watchOptions": {
-    "ignore": []
-  },
-  "debugOptions": {
-    "hidedInDevtools": []
-  },
-  "scripts": {},
-  "simulatorType": "wechat",
-  "simulatorPluginLibVersion": {},
-  "miniprogramRoot": "dist-wechat/",
-  "condition": {
-    "search": {
-      "list": []
-    },
-    "conversation": {
-      "list": []
-    },
-    "plugin": {
-      "list": []
+    "setting": {
+        "urlCheck": false,
+        "es6": true,
+        "enhance": false,
+        "postcss": true,
+        "preloadBackgroundData": false,
+        "minified": true,
+        "newFeature": true,
+        "coverView": true,
+        "nodeModules": false,
+        "autoAudits": false,
+        "showShadowRootInWxmlPanel": true,
+        "scopeDataCheck": false,
+        "uglifyFileName": false,
+        "checkInvalidKey": true,
+        "checkSiteMap": true,
+        "uploadWithSourceMap": true,
+        "compileHotReLoad": false,
+        "useMultiFrameRuntime": true,
+        "useApiHook": true,
+        "useApiHostProcess": false,
+        "babelSetting": {
+            "ignore": [],
+            "disablePlugins": [],
+            "outputPath": ""
+        },
+        "enableEngineNative": false,
+        "bundle": false,
+        "useIsolateContext": true,
+        "useCompilerModule": true,
+        "userConfirmedUseCompilerModuleSwitch": false,
+        "userConfirmedBundleSwitch": false,
+        "packNpmManually": false,
+        "packNpmRelationList": [],
+        "minifyWXSS": true
     },
-    "game": {
-      "list": []
+    "compileType": "miniprogram",
+    "libVersion": "2.16.1",
+    "appid": "wx47bde0e3d49633b4",
+    "projectname": "%E5%8D%A1%E7%89%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F",
+    "cloudfunctionTemplateRoot": "",
+    "watchOptions": {
+        "ignore": []
     },
-    "gamePlugin": {
-      "list": []
+    "debugOptions": {
+        "hidedInDevtools": []
     },
-    "miniprogram": {
-      "list": [
-        {
-          "id": -1,
-          "name": "消息",
-          "pathName": "/pages/news",
-          "scene": null
+    "scripts": {},
+    "simulatorType": "wechat",
+    "simulatorPluginLibVersion": {},
+    "miniprogramRoot": "dist-wechat/",
+    "condition": {
+        "search": {
+            "list": []
+        },
+        "conversation": {
+            "list": []
+        },
+        "plugin": {
+            "list": []
+        },
+        "game": {
+            "list": []
         },
-        {
-          "id": -1,
-          "name": "聊天页面",
-          "pathName": "/pages/chat",
-          "scene": null
+        "gamePlugin": {
+            "list": []
         },
-        {
-          "id": -1,
-          "name": "我的",
-          "pathName": "/pages/mine",
-          "scene": null
+        "miniprogram": {
+            "list": [
+                {
+                    "id": -1,
+                    "name": "消息",
+                    "pathName": "/pages/news",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "聊天页面",
+                    "pathName": "/pages/chat",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "我的",
+                    "pathName": "/pages/mine",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "订单详情",
+                    "pathName": "/pages/order",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "我买到的",
+                    "pathName": "/pages/allorder",
+                    "scene": null
+                }
+            ]
         }
-      ]
     }
-  }
-}
+}

src/pages/Home.vue

@@ -1,7 +1,5 @@
 <config>
 {
-    "navigationBarTitleText": "游戏王OCG",
-    "navigationBarBackgroundColor": "#ffffff",
     "navigationBarTextStyle": "black",
     "backgroundTextStyle":"light",
     "navigationStyle": "custom"
@@ -22,7 +20,7 @@
                 right-icon="back-top"
                 :value="value"
                 shape="round"
-                background="#ff976a"
+                background="none"
                 placeholder="搜索拼箱...."
             />
             <div class="box-tab">
@@ -39,16 +37,15 @@
         </div>
         <div class="box-con" v-if="conduct">
             <div class="box-con-Cards">
-                <div class="box-con-left"><img src="../static/imgs/2.jpeg" alt="" /></div>
+                <img src="../static/imgs/2.jpeg" alt="" />
                 <div class="box-con-right">
                     <p class="box-con-tit">DP20 简中 传说之决斗者编3</p>
                     <div class="box-con-today">
-                        <p class="box-con-p">距离结束</p>
-                        <p class="box-con-p2">1天</p>
-                        <p class="box-con-p2">20:35:06</p>
+                        <p>距离结束</p>
+                        <p class="box-con-p2">1天 20:35:06</p>
                     </div>
                     <div class="box-con-today">
-                        <p class="box-con-p">已拼箱</p>
+                        <p>已拼箱</p>
                         <p class="box-con-p2">10/24</p>
                     </div>
                     <div class="box-con-money">
@@ -64,22 +61,21 @@
         </div>
         <div class="box-con" v-if="complete">
             <div class="box-con-Cards">
-                <div class="box-con-left"><img src="../native/imgs/marker.png" alt="" /></div>
+                <img src="../native/imgs/marker.png" alt="" />
                 <div class="box-con-right">
-                    <p class="box-con-tit">DP21 简中 传说之决斗者编3</p>
+                    <p class="box-con-tit">DP20 简中 传说之决斗者编3</p>
                     <div class="box-con-today">
-                        <p class="box-con-p">距离结束</p>
-                        <p class="box-con-p2">10天</p>
-                        <p class="box-con-p2">20:35:06</p>
+                        <p>距离结束</p>
+                        <p class="box-con-p2">1天 20:35:06</p>
                     </div>
                     <div class="box-con-today">
-                        <p class="box-con-p">已拼箱</p>
+                        <p>已拼箱</p>
                         <p class="box-con-p2">10/24</p>
                     </div>
                     <div class="box-con-money">
                         <div class="box-con-num">
-                            <img src="../static/imgs/icon_jiage@3x.png" alt="" />
-                            <p>1020</p>
+                            <img src="../static/imgs/icon_jiage.png" alt="" />
+                            <p>320</p>
                         </div>
                         <van-button type="warning" @click="Details">立即拼箱</van-button>
                     </div>
@@ -89,22 +85,21 @@
         </div>
         <div class="box-con" v-if="overdue">
             <div class="box-con-Cards">
-                <div class="box-con-left"><img src="../static/imgs/megalo_logo.png" alt="" /></div>
+                <img src="../static/imgs/megalo_logo.png" alt="" />
                 <div class="box-con-right">
-                    <p class="box-con-tit">DP22 简中 传说之决斗者编3</p>
+                    <p class="box-con-tit">DP20 简中 传说之决斗者编3</p>
                     <div class="box-con-today">
-                        <p class="box-con-p">距离结束</p>
-                        <p class="box-con-p2">8天</p>
-                        <p class="box-con-p2">20:35:06</p>
+                        <p>距离结束</p>
+                        <p class="box-con-p2">1天 20:35:06</p>
                     </div>
                     <div class="box-con-today">
-                        <p class="box-con-p">已拼箱</p>
+                        <p>已拼箱</p>
                         <p class="box-con-p2">10/24</p>
                     </div>
                     <div class="box-con-money">
                         <div class="box-con-num">
                             <img src="../static/imgs/icon_jiage.png" alt="" />
-                            <p>1320</p>
+                            <p>320</p>
                         </div>
                         <van-button type="warning" @click="Details">立即拼箱</van-button>
                     </div>
@@ -123,7 +118,8 @@ export default {
             value: '',
             conduct: true,
             complete: false,
-            overdue: false
+            overdue: false,
+            show: false
         };
     },
     methods: {
@@ -161,23 +157,16 @@ export default {
     /deep/ .van-button__text {
         height: 20px;
         font-size: 14px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #ffffff;
         line-height: 20px;
     }
-    // tab卡
-    /deep/ .van-tabs {
-        height: 0;
-    }
     // 搜索
     /deep/ .van-search {
         height: 0;
         margin-left: 5px;
     }
     /deep/ .van-search__content {
-        width: 345px;
-        height: 40px;
         border-radius: 8px;
     }
     .container-bg {
@@ -195,8 +184,7 @@ export default {
     span {
         height: 34px;
         font-size: 24px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
+        font-weight: bold;
         color: #ffffff;
         line-height: 34px;
         margin-left: 20px;
@@ -221,7 +209,6 @@ export default {
             .box-top-sp {
                 height: 22px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #ffffff;
                 line-height: 19px;
@@ -238,7 +225,6 @@ export default {
             width: 42px;
             height: 24px;
             font-size: 14px;
-            font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
             color: #ffffff;
             line-height: 24px;
@@ -252,12 +238,10 @@ export default {
         .box-con-Cards {
             padding: 32px 20px 27px 25px;
             display: flex;
-            .box-con-left {
-                img {
-                    width: 90px;
-                    height: 130px;
-                    border-radius: 6px;
-                }
+            img {
+                width: 90px;
+                height: 130px;
+                border-radius: 6px;
             }
             .box-con-right {
                 width: 237px;
@@ -265,8 +249,7 @@ export default {
                 .box-con-tit {
                     height: 24px;
                     font-size: 16px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                     margin-bottom: 10px;
@@ -274,10 +257,9 @@ export default {
             }
             .box-con-today {
                 display: flex;
-                .box-con-p {
+                p {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #c8c9cc;
                     line-height: 24px;
@@ -285,7 +267,6 @@ export default {
                 .box-con-p2 {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #ff6c00;
                     line-height: 24px;
@@ -303,12 +284,11 @@ export default {
                     img {
                         width: 10px;
                         height: 10px;
-                        margin-top: 8px;
+                        margin-top: 9px;
                     }
                     p {
                         height: 22px;
                         font-size: 24px;
-                        font-family: OSP-DIN, OSP;
                         font-weight: normal;
                         color: #f42202;
                         line-height: 22px;

src/pages/add.vue

@@ -9,15 +9,36 @@
 <template>
     <div class="container">
         <div class="box">
-            <div class="box-con" @click="add">
-                <div class="box-con-top">
-                    <p>收货人</p>
-                    <span class="box-con-span">小明</span>
-                    <span class="box-con-code">17635849638</span>
+            <div class="box-con">
+                <div @click="add">
+                    <div class="box-con-top">
+                        <p>收货人</p>
+                        <span class="box-con-span">小明</span>
+                        <span class="box-con-code">17635849638</span>
+                    </div>
+                    <div class="box-con-top">
+                        <p>收货地址</p>
+                        <span class="box-con-sp">江苏 南京 玄武区 中山路18号德基广场二楼216</span>
+                    </div>
                 </div>
-                <div class="box-con-top">
-                    <p>收货地址</p>
-                    <span class="box-con-sp">江苏 南京 玄武区 中山路18号德基广场二楼216</span>
+                <div class="box-con-buttom">
+                    <div class="box-con-default">默认</div>
+                    <div class="box-con-edit">编辑</div>
+                </div>
+            </div>
+        </div>
+        <div class="box">
+            <div class="box-con">
+                <div @click="add">
+                    <div class="box-con-top">
+                        <p>收货人</p>
+                        <span class="box-con-span">小明</span>
+                        <span class="box-con-code">17635849638</span>
+                    </div>
+                    <div class="box-con-top">
+                        <p>收货地址</p>
+                        <span class="box-con-sp">江苏 南京 玄武区 中山路18号德基广场二楼216</span>
+                    </div>
                 </div>
                 <div class="box-con-buttom">
                     <div class="box-con-default">默认</div>
@@ -54,9 +75,9 @@ export default {
 <style lang="less" scoped>
 .container {
     background: #f5f7fa;
-    height: 724px;
+    padding-top: 8px;
     .box {
-        padding: 16px 20px;
+        padding: 8px 20px;
         .box-con {
             background: #ffffff;
             border-radius: 12px;
@@ -68,7 +89,6 @@ export default {
                     width: 68px;
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #c8c9cc;
                     line-height: 24px;
@@ -76,8 +96,7 @@ export default {
                 .box-con-span {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                     margin-left: 2px;
@@ -85,8 +104,7 @@ export default {
                 .box-con-code {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                     margin-left: 14px;
@@ -94,8 +112,7 @@ export default {
                 .box-con-sp {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                     margin-left: 12px;
@@ -103,8 +120,8 @@ export default {
             }
             .box-con-buttom {
                 display: flex;
-                margin: 40px 0 0 167px;
-                flex-wrap: wrap;
+                margin: 40px 10px 0 0;
+                justify-content: flex-end;
                 .box-con-default {
                     width: 60px;
                     height: 32px;
@@ -113,7 +130,6 @@ export default {
                     line-height: 32px;
                     border: 1px solid #000;
                     font-size: 13px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #c8c9cc;
                     margin-right: 16px;
@@ -125,8 +141,7 @@ export default {
                     border-radius: 4px;
                     border: 1px solid #ff6c00;
                     font-size: 13px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
+                    font-weight: bold;
                     text-align: center;
                     line-height: 32px;
                     color: #ff6c00;
@@ -134,18 +149,17 @@ export default {
             }
         }
     }
-}
-.container-but {
-    width: 290px;
-    height: 48px;
-    background: #ff6c00;
-    border-radius: 12px;
-    font-size: 16px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #ffffff;
-    text-align: center;
-    line-height: 48px;
-    margin: 6px 43px;
+    .container-but {
+        width: 290px;
+        height: 48px;
+        background: #ff6c00;
+        border-radius: 12px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        text-align: center;
+        line-height: 48px;
+        margin: 6px 43px;
+    }
 }
 </style>

src/pages/address.vue

@@ -10,16 +10,10 @@
     <div class="container">
         <div class="box-top">
             <p>平台担保交易，确认收货后，钱款才会打入对方账户</p>
-            <!-- <van-notice-bar scrollable text="平台担保交易，确认收货后，钱款才会打入对方账户" /> -->
-            <!-- <van-notice-bar
-                color="#FF6C00"
-                background="#ecf9ff"
-                text="平台担保交易，确认收货后，钱款才会打入对方账户"
-            /> -->
         </div>
         <div class="box-address">
             <div class="box-lr">
-                <span class="box-lr-sp">选择收获地址</span>
+                <span class="box-lr-sp">{{ addres ? addres : '选择收获地址' }}</span>
                 <span @click="address">></span>
             </div>
         </div>
@@ -30,12 +24,11 @@
         </div>
         <div class="box-con">
             <div class="box-con-Cards">
-                <div class="box-con-left"><img src="../static/imgs/home_top_bg.png" alt="" /></div>
+                <img src="../static/imgs/home_top_bg.png" alt="" />
                 <div class="box-con-right">
                     <p class="box-con-tit">1105皇权破晓</p>
                     <div class="box-con-today">
-                        <p class="box-con-p">卡盒选号:</p>
-                        <p class="box-con-p2">卡包02—A</p>
+                        <p>卡盒选号: 卡包02—A</p>
                     </div>
                     <div class="box-con-money">
                         <div class="box-con-num">
@@ -67,7 +60,6 @@
         <div class="box-buttom">
             <div class="box-buttom-con">
                 <p>订单留言</p>
-                <!-- <p class="box-buttom-p2">选填，备注对本次交易的说明</p> -->
                 <form class="box-buttom-p2" action="">选填，备注对本次交易的说明</form>
             </div>
         </div>
@@ -84,7 +76,9 @@
 <script>
 export default {
     data() {
-        return {};
+        return {
+            addres: ''
+        };
     },
     methods: {
         address() {
@@ -102,7 +96,6 @@ export default {
 </script>
 <style lang="less" scoped>
 .container {
-    // position: relative;
     // 按钮
     /deep/ .van-button {
         height: 48px;
@@ -110,7 +103,6 @@ export default {
         background: #ff6c00;
         border-radius: 12px;
         font-size: 16px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #ffffff;
     }
@@ -125,7 +117,6 @@ export default {
             width: 299px;
             height: 18px;
             font-size: 13px;
-            font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
             color: #000000;
             line-height: 48px;
@@ -133,7 +124,6 @@ export default {
     }
     .box-address {
         height: 120px;
-        // background: chocolate;
         .box-lr {
             display: flex;
             align-items: center;
@@ -142,7 +132,6 @@ export default {
             .box-lr-sp {
                 height: 26px;
                 font-size: 16px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #c8c9cc;
                 line-height: 120px;
@@ -150,6 +139,7 @@ export default {
             span {
                 height: 11px;
                 line-height: 120px;
+                font-weight: bold;
             }
         }
     }
@@ -169,8 +159,7 @@ export default {
         p {
             height: 22px;
             font-size: 14px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
+            font-weight: bold;
             color: #000000;
             line-height: 22px;
             margin-left: 2px;
@@ -183,12 +172,10 @@ export default {
         .box-con-Cards {
             margin: 16px 0 20px 20px;
             display: flex;
-            .box-con-left {
-                img {
-                    width: 90px;
-                    height: 130px;
-                    border-radius: 6px;
-                }
+            img {
+                width: 90px;
+                height: 130px;
+                border-radius: 6px;
             }
             .box-con-right {
                 width: 237px;
@@ -196,12 +183,10 @@ export default {
                 .box-con-tit {
                     height: 24px;
                     font-size: 16px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                     margin: 5px 0 10px 0;
-                    // margin-bottom: 10px;
                 }
             }
             .box-con-today {
@@ -211,22 +196,12 @@ export default {
                 border-radius: 6px;
                 width: 142px;
                 align-items: center;
-                .box-con-p {
-                    height: 24px;
-                    font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #303133;
-                    line-height: 24px;
-                }
-                .box-con-p2 {
+                p {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #303133;
                     line-height: 24px;
-                    margin-left: 5px;
                 }
             }
             .box-con-money {
@@ -244,7 +219,6 @@ export default {
                     p {
                         height: 22px;
                         font-size: 14px;
-                        font-family: OSP-DIN, OSP;
                         font-weight: normal;
                         color: #c8c9cc;
                         line-height: 22px;
@@ -253,7 +227,6 @@ export default {
                 p {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #c8c9cc;
                     line-height: 24px;
@@ -270,23 +243,20 @@ export default {
             p {
                 height: 20px;
                 font-size: 14px;
-                font-family: PingFangSC-Medium, PingFang SC;
-                font-weight: 500;
+                font-weight: bold;
                 color: #000000;
                 line-height: 20px;
             }
             .box-buttom-p {
                 height: 22px;
                 font-size: 16px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
+                font-weight: bold;
                 color: #000000;
                 line-height: 22px;
             }
             .box-buttom-p2 {
                 height: 22px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #c8c9cc;
             }
@@ -308,7 +278,6 @@ export default {
             span {
                 height: 22px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #c8c9cc;
                 line-height: 22px;
@@ -321,7 +290,6 @@ export default {
             p {
                 height: 22px;
                 font-size: 24px;
-                font-family: OSP-DIN, OSP;
                 font-weight: normal;
                 color: #f42202;
                 line-height: 22px;

src/pages/allorder.vue

@@ -0,0 +1,489 @@
+<config>
+{
+    "navigationBarTitleText": "我买到的",
+    "navigationBarBackgroundColor": "#ffffff",
+    "navigationBarTextStyle": "black",
+    "backgroundTextStyle":"light"
+}
+</config>
+<template>
+    <div class="container">
+        <van-tabs @click="onClick">
+            <van-tab title="全部">
+                <!-- 待支付 -->
+                <div class="box-con">
+                    <div class="box-con2">
+                        <div class="box-tit">
+                            <div>
+                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
+                                <p>光之城卡牌</p>
+                            </div>
+                            <div class="box-tit-seller">待支付</div>
+                        </div>
+                        <div class="box-con-Cards">
+                            <img src="../static/imgs/4.jpeg" alt="" />
+                            <div class="box-con-right">
+                                <p class="box-con-tit">1105皇权破晓</p>
+                                <div class="box-con-today">
+                                    <p>卡盒选号: 卡包02—A</p>
+                                </div>
+                                <div class="box-con-money">
+                                    <div class="box-con-num">
+                                        <p>¥320</p>
+                                    </div>
+                                    <p>×1</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="box-num">
+                            <span>实际支付</span>
+                            <span class="num">¥970</span>
+                        </div>
+                        <div class="box-bor"></div>
+                        <div class="box-butm">
+                            <div class="box-but">取消订单</div>
+                            <div class="box-but2">立即支付</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 代发货 -->
+                <div class="box-con">
+                    <div class="box-con2">
+                        <div class="box-tit">
+                            <div>
+                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
+                                <p>光之城卡牌</p>
+                            </div>
+                            <div class="box-tit-seller">待发货</div>
+                        </div>
+                        <div class="box-con-Cards">
+                            <img src="../static/imgs/1.jpeg" alt="" />
+                            <div class="box-con-right">
+                                <p class="box-con-tit">1105皇权破晓</p>
+                                <div class="box-con-today">
+                                    <p>卡盒选号: 卡包02—A</p>
+                                </div>
+                                <div class="box-con-money">
+                                    <div class="box-con-num">
+                                        <p>¥320</p>
+                                    </div>
+                                    <p>×1</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="box-num">
+                            <span>实际支付</span>
+                            <span class="num">¥970</span>
+                        </div>
+                        <div class="box-bor"></div>
+                        <div class="box-butm">
+                            <div class="box-but3">查看订单</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 待收货 -->
+                <div class="box-con">
+                    <div class="box-con2">
+                        <div class="box-tit">
+                            <div>
+                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
+                                <p>光之城卡牌</p>
+                            </div>
+                            <div class="box-tit-seller">待收货</div>
+                        </div>
+                        <div class="box-con-Cards">
+                            <img src="../static/imgs/2.jpeg" alt="" />
+                            <div class="box-con-right">
+                                <p class="box-con-tit">1105皇权破晓</p>
+                                <div class="box-con-today">
+                                    <p>卡盒选号: 卡包02—A</p>
+                                </div>
+                                <div class="box-con-money">
+                                    <div class="box-con-num">
+                                        <p>¥320</p>
+                                    </div>
+                                    <p>×1</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="box-num">
+                            <span>实际支付</span>
+                            <span class="num">¥970</span>
+                        </div>
+                        <div class="box-bor"></div>
+                        <div class="box-butm">
+                            <div class="box-but">查看物流</div>
+                            <div class="box-but2">确认收货</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 已完成 -->
+                <div class="box-con">
+                    <div class="box-con2">
+                        <div class="box-tit">
+                            <div>
+                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
+                                <p>光之城卡牌</p>
+                            </div>
+                            <div class="box-tit-seller">已完成</div>
+                        </div>
+                        <div class="box-con-Cards">
+                            <img src="../static/imgs/3.jpeg" alt="" />
+                            <div class="box-con-right">
+                                <p class="box-con-tit">1105皇权破晓</p>
+                                <div class="box-con-today">
+                                    <p>卡盒选号: 卡包02—A</p>
+                                </div>
+                                <div class="box-con-money">
+                                    <div class="box-con-num">
+                                        <p>¥320</p>
+                                    </div>
+                                    <p>×1</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="box-num">
+                            <span>实际支付</span>
+                            <span class="num">¥970</span>
+                        </div>
+                        <div class="box-bor"></div>
+                        <div class="box-butm">
+                            <div class="box-but">申请售后</div>
+                            <div class="box-but3">查看订单</div>
+                        </div>
+                    </div>
+                </div>
+            </van-tab>
+            <van-tab title="待支付">
+                <div class="box-con">
+                    <div class="box-con2">
+                        <div class="box-tit">
+                            <div>
+                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
+                                <p>光之城卡牌</p>
+                            </div>
+                            <div class="box-tit-seller">待支付</div>
+                        </div>
+                        <div class="box-con-Cards">
+                            <img src="../static/imgs/4.jpeg" alt="" />
+                            <div class="box-con-right">
+                                <p class="box-con-tit">1105皇权破晓</p>
+                                <div class="box-con-today">
+                                    <p>卡盒选号: 卡包02—A</p>
+                                </div>
+                                <div class="box-con-money">
+                                    <div class="box-con-num">
+                                        <p>¥320</p>
+                                    </div>
+                                    <p>×1</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="box-num">
+                            <span>实际支付</span>
+                            <span class="num">¥970</span>
+                        </div>
+                        <div class="box-bor"></div>
+                        <div class="box-butm">
+                            <div class="box-but">取消订单</div>
+                            <div class="box-but2">立即支付</div>
+                        </div>
+                    </div>
+                </div>
+            </van-tab>
+            <van-tab title="待发货">
+                <div class="box-con">
+                    <div class="box-con2">
+                        <div class="box-tit">
+                            <div>
+                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
+                                <p>光之城卡牌</p>
+                            </div>
+                            <div class="box-tit-seller">待发货</div>
+                        </div>
+                        <div class="box-con-Cards">
+                            <img src="../static/imgs/1.jpeg" alt="" />
+                            <div class="box-con-right">
+                                <p class="box-con-tit">1105皇权破晓</p>
+                                <div class="box-con-today">
+                                    <p>卡盒选号: 卡包02—A</p>
+                                </div>
+                                <div class="box-con-money">
+                                    <div class="box-con-num">
+                                        <p>¥320</p>
+                                    </div>
+                                    <p>×1</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="box-num">
+                            <span>实际支付</span>
+                            <span class="num">¥970</span>
+                        </div>
+                        <div class="box-bor"></div>
+                        <div class="box-butm">
+                            <div class="box-but3">查看订单</div>
+                        </div>
+                    </div>
+                </div>
+            </van-tab>
+            <van-tab title="待收货">
+                <div class="box-con">
+                    <div class="box-con2">
+                        <div class="box-tit">
+                            <div>
+                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
+                                <p>光之城卡牌</p>
+                            </div>
+                            <div class="box-tit-seller">待收货</div>
+                        </div>
+                        <div class="box-con-Cards">
+                            <img src="../static/imgs/2.jpeg" alt="" />
+                            <div class="box-con-right">
+                                <p class="box-con-tit">1105皇权破晓</p>
+                                <div class="box-con-today">
+                                    <p>卡盒选号: 卡包02—A</p>
+                                </div>
+                                <div class="box-con-money">
+                                    <div class="box-con-num">
+                                        <p>¥320</p>
+                                    </div>
+                                    <p>×1</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="box-num">
+                            <span>实际支付</span>
+                            <span class="num">¥970</span>
+                        </div>
+                        <div class="box-bor"></div>
+                        <div class="box-butm">
+                            <div class="box-but">查看物流</div>
+                            <div class="box-but2">确认收货</div>
+                        </div>
+                    </div>
+                </div>
+            </van-tab>
+            <van-tab title="已完成">
+                <div class="box-con">
+                    <div class="box-con2">
+                        <div class="box-tit">
+                            <div>
+                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
+                                <p>光之城卡牌</p>
+                            </div>
+                            <div class="box-tit-seller">已完成</div>
+                        </div>
+                        <div class="box-con-Cards">
+                            <img src="../static/imgs/3.jpeg" alt="" />
+                            <div class="box-con-right">
+                                <p class="box-con-tit">1105皇权破晓</p>
+                                <div class="box-con-today">
+                                    <p>卡盒选号: 卡包02—A</p>
+                                </div>
+                                <div class="box-con-money">
+                                    <div class="box-con-num">
+                                        <p>¥320</p>
+                                    </div>
+                                    <p>×1</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="box-num">
+                            <span>实际支付</span>
+                            <span class="num">¥970</span>
+                        </div>
+                        <div class="box-bor"></div>
+                        <div class="box-butm">
+                            <div class="box-but">申请售后</div>
+                            <div class="box-but3">查看订单</div>
+                        </div>
+                    </div>
+                </div>
+            </van-tab>
+        </van-tabs>
+    </div>
+</template>
+<script>
+import ProductInfo from '../components/productInfo.vue';
+export default {
+    // components: {
+    //     ProductInfo
+    // },
+    data() {
+        return {};
+    },
+    methods: {
+        onClick(event) {}
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    background: #f5f7fa;
+    /deep/ .van-tabs__line {
+        width: 0px;
+        height: 0px;
+    }
+    .box-con {
+        background: #ffffff;
+        border-radius: 12px;
+        margin: 8px 16px;
+        padding-bottom: 5px;
+        .box-con2 {
+            margin: 16px 16px;
+            .box-tit {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding-top: 16px;
+                div {
+                    display: flex;
+                    align-items: center;
+                    img {
+                        width: 17px;
+                        height: 17px;
+                    }
+                    p {
+                        height: 22px;
+                        font-size: 14px;
+                        font-weight: bold;
+                        color: #000000;
+                        line-height: 22px;
+                        margin-left: 2px;
+                    }
+                }
+                .box-tit-seller {
+                    height: 22px;
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #ff6c00;
+                    line-height: 22px;
+                }
+            }
+            .box-con-Cards {
+                margin: 16px 0 20px 20px;
+                display: flex;
+                img {
+                    width: 90px;
+                    height: 130px;
+                    border-radius: 6px;
+                }
+                .box-con-right {
+                    width: 237px;
+                    margin-left: 8px;
+                    .box-con-tit {
+                        height: 24px;
+                        font-size: 16px;
+                        font-weight: bold;
+                        color: #000000;
+                        line-height: 24px;
+                        margin: 5px 0 10px 0;
+                    }
+                }
+                .box-con-today {
+                    display: flex;
+                    height: 30px;
+                    background: #f5f7fa;
+                    border-radius: 6px;
+                    width: 142px;
+                    align-items: center;
+                    p {
+                        height: 24px;
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #303133;
+                        line-height: 24px;
+                    }
+                }
+                .box-con-money {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-top: 28px;
+                    .box-con-num {
+                        display: flex;
+                        align-items: center;
+                        img {
+                            width: 16px;
+                            height: 16px;
+                        }
+                        p {
+                            height: 22px;
+                            font-size: 14px;
+                            font-weight: normal;
+                            color: #c8c9cc;
+                            line-height: 22px;
+                        }
+                    }
+                    p {
+                        height: 24px;
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #c8c9cc;
+                        line-height: 24px;
+                    }
+                }
+            }
+            .box-num {
+                text-align: right;
+                span {
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #000000;
+                }
+                .num {
+                    font-size: 16px;
+                    font-weight: bold;
+                    color: #f42202;
+                    padding-left: 10px;
+                }
+            }
+            .box-bor {
+                width: 303px;
+                height: 1px;
+                background: #f5f7fa;
+                margin: 19px 0 16px 0;
+            }
+            .box-butm {
+                display: flex;
+                justify-content: flex-end;
+                .box-but {
+                    width: 80px;
+                    height: 36px;
+                    border-radius: 8px;
+                    border: 1px solid #c8c9cc;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #c8c9cc;
+                    line-height: 36px;
+                    text-align: center;
+                    margin-right: 12px;
+                }
+                .box-but2 {
+                    width: 80px;
+                    height: 36px;
+                    background: #ff6c00;
+                    border-radius: 8px;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #ffffff;
+                    line-height: 36px;
+                    text-align: center;
+                }
+                .box-but3 {
+                    width: 80px;
+                    height: 36px;
+                    border-radius: 8px;
+                    border: 1px solid #ff6c00;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #ff6c00;
+                    line-height: 36px;
+                    text-align: center;
+                }
+            }
+        }
+    }
+}
+</style>

src/pages/details.vue

@@ -8,7 +8,22 @@
 </config>
 <template>
     <div class="container">
-        <div><img src="../static/imgs/1.jpeg" alt="" /></div>
+        <!-- <swiper class="cover">
+            <swiper-item v-for="item in packageInfo.img" :key="item">
+                <img class="cover-img" mode="aspectFill" :src="item" />
+            </swiper-item>
+        </swiper> -->
+        <swiper style="height:335px;" :autoplay="true" :indicator-dots="true">
+            <swiper-item>
+                <img src="../static/imgs/1.jpeg" alt="" />
+            </swiper-item>
+            <swiper-item>
+                <img src="../static/imgs/2.jpeg" alt="" />
+            </swiper-item>
+            <swiper-item>
+                <img src="../static/imgs/3.jpeg" alt="" />
+            </swiper-item>
+        </swiper>
         <div class="box-tit">1105皇权破晓 卡包拼箱 全80种</div>
         <div class="box-live">
             <img src="../native/imgs/icon_kapai_zhibo@3x.png" alt="" />
@@ -55,7 +70,7 @@
         </div>
         <div class="box-footer">
             <div class="box-cat">
-                <div>{{ selman ? selman : '选卡' }}</div>
+                <div>{{ selman ? selman : '请选择卡包' }}</div>
                 <div @click="selection">></div>
             </div>
             <van-action-sheet :show="show" title="选择卡包">
@@ -83,7 +98,7 @@
                         <img src="../static/imgs/icon_kefu@3x.png" alt="" />
                         <p>客服</p>
                     </div>
-                    <div class="box-follow">
+                    <div class="box-follow" @click="follows">
                         <img src="../static/imgs/icon_guanzhu@3x.png" alt="" />
                         <p>关注</p>
                     </div>
@@ -118,22 +133,23 @@ export default {
         },
         alls(item) {
             this.selman = item;
+        },
+        follows() {
+            wx.redirectTo({
+                url: './follow'
+            });
         }
     }
 };
 </script>
 <style lang="less" scoped>
 .container {
-    /deep/ .van-action-sheet {
-        // margin: 20px 20px;
-    }
     /deep/ .van-button {
         width: 210px;
         height: 48px;
         background: #ff6c00;
         border-radius: 12px;
         font-size: 16px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #ffffff;
     }
@@ -146,8 +162,7 @@ export default {
     .box-tit {
         height: 24px;
         font-size: 20px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
+        font-weight: bold;
         color: #000000;
         line-height: 24px;
         margin: 20px 0 10px 0;
@@ -168,7 +183,6 @@ export default {
         p {
             height: 22px;
             font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
             color: #ffffff;
             line-height: 22px;
@@ -177,7 +191,6 @@ export default {
     }
     .box-money {
         display: flex;
-        // align-items: center;
         margin: 15px 0 30px 0;
         img {
             width: 10px;
@@ -187,7 +200,6 @@ export default {
         p {
             height: 22px;
             font-size: 30px;
-            font-family: OSP-DIN, OSP;
             font-weight: normal;
             color: #f42202;
             line-height: 22px;
@@ -202,12 +214,10 @@ export default {
             height: 80px;
             background: #ff6c00;
             border-radius: 8px;
-            // opacity: 0.15;
             opacity: 0.7;
             p {
                 height: 22px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: rgba(0, 0, 0, 0.3);
                 line-height: 22px;
@@ -217,7 +227,6 @@ export default {
             span {
                 height: 26px;
                 font-size: 16px;
-                font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
                 // color: #ff6c00;
                 color: #000000;
@@ -231,12 +240,10 @@ export default {
             height: 80px;
             background: #ff6c00;
             border-radius: 8px;
-            // opacity: 0.15;
             opacity: 0.7;
             p {
                 height: 22px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: rgba(0, 0, 0, 0.3);
                 line-height: 22px;
@@ -246,9 +253,7 @@ export default {
             span {
                 height: 26px;
                 font-size: 16px;
-                font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
-                // color: #ff6c00;
                 color: #000000;
                 line-height: 26px;
                 text-align: center;
@@ -278,15 +283,13 @@ export default {
                     p {
                         height: 24px;
                         font-size: 15px;
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: 500;
+                        font-weight: bold;
                         color: #000000;
                         line-height: 24px;
                     }
                     span {
                         height: 22px;
                         font-size: 12px;
-                        font-family: PingFangSC-Regular, PingFang SC;
                         font-weight: 400;
                         color: rgba(0, 0, 0, 0.3);
                         line-height: 22px;
@@ -299,7 +302,6 @@ export default {
                 background: #f5f7fa;
                 border-radius: 8px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #939599;
                 line-height: 34px;
@@ -311,15 +313,13 @@ export default {
         width: 72px;
         height: 28px;
         font-size: 18px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
+        font-weight: bold;
         color: #000000;
         line-height: 28px;
         margin-top: 30px;
     }
     .box-details {
         font-size: 14px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #303133;
         line-height: 28px;
@@ -342,11 +342,17 @@ export default {
             display: flex;
             justify-content: space-between;
             margin-right: 44px;
+            div {
+                height: 28px;
+                font-size: 16px;
+                font-weight: bold;
+                color: #000000;
+                line-height: 28px;
+            }
         }
         p {
             height: 28px;
             font-size: 16px;
-            font-family: PingFangSC-Medium, PingFang SC;
             font-weight: 500;
             color: #000000;
             line-height: 28px;
@@ -365,7 +371,6 @@ export default {
                 p {
                     height: 14px;
                     font-size: 10px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #1a1a1a;
                     line-height: 14px;
@@ -387,7 +392,6 @@ export default {
             .van-box-p {
                 height: 24px;
                 font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #939599;
                 line-height: 36px;
@@ -401,7 +405,6 @@ export default {
                     background: #ffffff;
                     border-radius: 8px;
                     font-size: 16px;
-                    font-family: PingFangSC-Medium, PingFang SC;
                     font-weight: 500;
                     color: #000000;
                     text-align: center;
@@ -420,7 +423,6 @@ export default {
                 opacity: 0.7;
                 border-radius: 12px 0px 0px 12px;
                 font-size: 13px;
-                font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
                 color: #ffffff;
                 text-align: center;
@@ -432,7 +434,6 @@ export default {
                 background: #ff6c00;
                 border-radius: 0px 12px 12px 0px;
                 font-size: 16px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #ffffff;
                 text-align: center;

src/pages/follow.vue

@@ -0,0 +1,114 @@
+<config>
+{
+    "navigationBarTitleText": "我的关注",
+    "navigationBarBackgroundColor": "#ffffff",
+    "navigationBarTextStyle": "black",
+    "backgroundTextStyle":"light"
+}
+</config>
+<template>
+    <div class="follow">
+        <div class="box-con-Cards">
+            <img src="../static/imgs/2.jpeg" alt="" />
+            <div class="box-con-right">
+                <p class="box-con-tit">DP20 简中 传说之决斗者编3</p>
+                <div class="box-con-today">
+                    <p>距离结束</p>
+                    <p class="box-con-p2">1天 20:35:06</p>
+                </div>
+                <div class="box-con-today">
+                    <p>已拼箱</p>
+                    <p class="box-con-p2">10/24</p>
+                </div>
+                <div class="box-con-money">
+                    <div class="box-con-num">
+                        <img src="../static/imgs/icon_jiage.png" alt="" />
+                        <p>320</p>
+                    </div>
+                    <van-button>取消关注</van-button>
+                </div>
+            </div>
+        </div>
+        <div class="box-border"></div>
+    </div>
+</template>
+<script>
+export default {
+    data() {}
+};
+</script>
+<style lang="less" scoped>
+.follow {
+    /deep/ .van-button {
+        border-radius: 8px;
+        background: #ffffff;
+        border: 1px solid #c8c9cc;
+        font-size: 14px;
+        font-weight: 400;
+        color: #c8c9cc;
+        line-height: 36px;
+        text-align: center;
+    }
+    .box-con-Cards {
+        padding: 32px 20px 27px 25px;
+        display: flex;
+        img {
+            width: 90px;
+            height: 130px;
+            border-radius: 6px;
+        }
+        .box-con-right {
+            width: 237px;
+            margin-left: 8px;
+            .box-con-tit {
+                height: 24px;
+                font-size: 16px;
+                font-weight: bold;
+                color: #000000;
+                line-height: 24px;
+                margin-bottom: 10px;
+            }
+        }
+        .box-con-today {
+            display: flex;
+            p {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #c8c9cc;
+                line-height: 24px;
+            }
+            .box-con-p2 {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ff6c00;
+                line-height: 24px;
+                margin-left: 1px;
+            }
+        }
+        .box-con-money {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 13px;
+            .box-con-num {
+                display: flex;
+                align-items: center;
+                img {
+                    width: 10px;
+                    height: 10px;
+                    margin-top: 9px;
+                }
+                p {
+                    height: 22px;
+                    font-size: 24px;
+                    font-weight: normal;
+                    color: #f42202;
+                    line-height: 22px;
+                }
+            }
+        }
+    }
+}
+</style>

src/pages/order.vue

@@ -1,6 +1,6 @@
 <config>
 {
-    "navigationBarBackgroundColor": "#FF7F1F",
+    "navigationBarBackgroundColor": "#ff6c00",
     "navigationBarTextStyle": "black",
     "backgroundTextStyle":"light"
 }
@@ -9,7 +9,7 @@
     <div class="container">
         <div class="box-top">
             <p>卖家已发货</p>
-            <h3>宝贝正在飞奔到你的怀中</h3>
+            <h3>宝贝正在飞奔到你的怀中!</h3>
         </div>
         <div class="box-adderss">
             <div class="box-adderss-con">
@@ -18,7 +18,7 @@
                     <p>南京市场八部的 王智元 揽件</p>
                     <span class="box-adderss-span">2019-05-20 08:45:56</span>
                 </div>
-                <div class="box-adderss-right">></div>
+                <div class="box-adderss-right" @click="logistics">></div>
             </div>
             <div class="box-border"></div>
             <div class="box-adderss-con">
@@ -40,12 +40,11 @@
         </div>
         <div class="box-con">
             <div class="box-con-Cards">
-                <div class="box-con-left"><img src="../static/imgs/4.jpeg" alt="" /></div>
+                <img src="../static/imgs/4.jpeg" alt="" />
                 <div class="box-con-right">
                     <p class="box-con-tit">1105皇权破晓</p>
                     <div class="box-con-today">
-                        <p class="box-con-p">卡盒选号:</p>
-                        <p class="box-con-p2">卡包02—A</p>
+                        <p>卡盒选号: 卡包02—A</p>
                     </div>
                     <div class="box-con-money">
                         <div class="box-con-num">
@@ -113,24 +112,41 @@
         <div class="box-footer">
             <div class="box-footer-con">
                 <p>成交时间</p>
-                <p class="box-footer-p">2021-05-20 07:54:36</p>
+                <p class="box-footer-p">2021-05-20 07:54:46</p>
             </div>
         </div>
         <div class="box-footer-nav">
-            <van-notice-bar
-                color="#FF6C00"
-                background="#ecf9ff"
-                text="为了保障您的售后服务，收货时请拍摄完整的快递开封视频避免纠纷"
-            />
+            <van-notice-bar color="#FF6C00" text="为了保障您的售后服务，收货时请拍摄完整的快递开封视频避免纠纷" />
             <div class="box-btn">
-                <div class="box-btn-left" :style="{ background: `url${require('../static/imgs/btn_02@3x.png')}` }">
-                    查看物流
+                <div class="box-btn-left" :style="{ backgroundImage: `url(/native/imgs/btn_02@3x.png)` }">
+                    删除订单
+                </div>
+                <div class="box-btn-right" :style="{ backgroundImage: `url(/native/imgs/btn_01@3x.png)` }">
+                    申请售后
                 </div>
-                <!--<div class="box-btn-right">查看物流</div> -->
-                <img src="../static/imgs/btn_02@3x.png" alt="" />
-                <img src="../static/imgs/btn_01@3x.png" alt="" />
             </div>
         </div>
+        <van-dialog use-slot title="快递详情" :showConfirmButton="false" :show="show">
+            <div v-for="(item, index) in steps" :key="index">
+                <div class="dialog-con">
+                    <div>
+                        <span>物流快递：百世快递</span>
+                    </div>
+                    <div>
+                        <span>物流单号：46313451613311020</span>
+                        <span class="dialog-cv">复制</span>
+                    </div>
+                    <div class="dialog-border"></div>
+                </div>
+                <div class="steps-con">
+                    <div class="steps-time">{{ item.time }}</div>
+                    <van-steps :steps="steps" direction="vertical">
+                        <div>{{ item.text }}</div>
+                        <div>{{ item.desc }}</div>
+                    </van-steps>
+                </div>
+            </div>
+        </van-dialog>
     </div>
 </template>
 
@@ -138,30 +154,47 @@
 export default {
     name: '',
     data() {
-        return {};
+        return {
+            show: false,
+            steps: [
+                {
+                    text: '江苏省南京市玄武区派件员 王智元',
+                    desc: '15686868686正在为你派件',
+                    activeColor: '#000',
+                    time: '02-20 08:28'
+                }
+            ]
+        };
+    },
+    methods: {
+        logistics() {
+            this.show = true;
+            console.log(this.steps);
+        }
     }
 };
 </script>
 <style lang="less" scoped>
 .container {
+    /deep/ .van-step__circle-container {
+        height: 0;
+    }
     padding-bottom: 120px;
     .box-top {
-        height: 190px;
+        height: 102px;
         background: #ff6c00;
         margin-bottom: 20px;
         p {
             height: 34px;
             font-size: 24px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
+            font-weight: bold;
             color: #ffffff;
             line-height: 34px;
-            padding: 91px 0 0 20px;
+            padding: 11px 0 0 20px;
         }
         h3 {
             height: 24px;
             font-size: 14px;
-            font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
             color: #ffffff;
             line-height: 24px;
@@ -187,23 +220,20 @@ export default {
                 span {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                 }
                 p {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                 }
                 .box-adderss-span {
                     height: 24px;
                     font-size: 13px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #c8c9cc;
                     line-height: 24px;
@@ -243,8 +273,7 @@ export default {
             p {
                 height: 22px;
                 font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
+                font-weight: bold;
                 color: #000000;
                 line-height: 22px;
                 margin-left: 2px;
@@ -253,7 +282,6 @@ export default {
         .box-tit-seller {
             height: 22px;
             font-size: 14px;
-            font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
             color: #ff6c00;
             line-height: 22px;
@@ -266,12 +294,10 @@ export default {
         .box-con-Cards {
             margin: 16px 0 20px 20px;
             display: flex;
-            .box-con-left {
-                img {
-                    width: 90px;
-                    height: 130px;
-                    border-radius: 6px;
-                }
+            img {
+                width: 90px;
+                height: 130px;
+                border-radius: 6px;
             }
             .box-con-right {
                 width: 237px;
@@ -279,12 +305,10 @@ export default {
                 .box-con-tit {
                     height: 24px;
                     font-size: 16px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                     margin: 5px 0 10px 0;
-                    // margin-bottom: 10px;
                 }
             }
             .box-con-today {
@@ -294,22 +318,12 @@ export default {
                 border-radius: 6px;
                 width: 142px;
                 align-items: center;
-                .box-con-p {
-                    height: 24px;
-                    font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #303133;
-                    line-height: 24px;
-                }
-                .box-con-p2 {
+                p {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #303133;
                     line-height: 24px;
-                    margin-left: 5px;
                 }
             }
             .box-con-money {
@@ -327,7 +341,6 @@ export default {
                     p {
                         height: 22px;
                         font-size: 14px;
-                        font-family: OSP-DIN, OSP;
                         font-weight: normal;
                         color: #c8c9cc;
                         line-height: 22px;
@@ -336,7 +349,6 @@ export default {
                 p {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #c8c9cc;
                     line-height: 24px;
@@ -353,23 +365,20 @@ export default {
             p {
                 height: 20px;
                 font-size: 14px;
-                font-family: PingFangSC-Medium, PingFang SC;
-                font-weight: 500;
+                font-weight: bold;
                 color: #000000;
                 line-height: 20px;
             }
             .box-buttom-p {
                 height: 22px;
                 font-size: 16px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
+                font-weight: bold;
                 color: #000000;
                 line-height: 22px;
             }
             .box-buttom-p2 {
                 height: 22px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #c8c9cc;
             }
@@ -389,7 +398,6 @@ export default {
                     border-radius: 2px;
                     border: 1px solid #c8c9cc;
                     font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #c8c9cc;
                     line-height: 20px;
@@ -399,7 +407,6 @@ export default {
             p {
                 height: 24px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #939599;
                 line-height: 24px;
@@ -407,7 +414,6 @@ export default {
             .box-footer-p {
                 height: 22px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #000000;
                 line-height: 22px;
@@ -428,7 +434,6 @@ export default {
             p {
                 text-align: center;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #000000;
                 line-height: 44px;
@@ -438,20 +443,68 @@ export default {
             display: flex;
             justify-content: space-between;
             margin: 6px 20px 0 20px;
-            img {
+            .box-btn-left {
                 width: 163px;
                 height: 48px;
+                background-position: center;
+                background-size: 100% 100%;
+                font-size: 16px;
+                font-weight: 400;
+                color: #ffffff;
+                text-align: center;
+                line-height: 48px;
             }
-            .box-btn-left {
-
+            .box-btn-right {
                 width: 163px;
                 height: 48px;
+                background-position: center;
+                background-size: 100% 100%;
+                font-size: 16px;
+                font-weight: 400;
+                color: #ffffff;
+                text-align: center;
+                line-height: 48px;
             }
-            .box-btn-right {
-            //     background: url('../static/imgs/btn_01@3x.png') no-repeat;
-            //     width: 163px;
-            //     height: 48px;
-            // }
+        }
+    }
+    .dialog-con {
+        margin: 12px 0 0 9px;
+        span {
+            height: 20px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #1a1a1a;
+            line-height: 20px;
+        }
+        .dialog-cv {
+            width: 40px;
+            height: 20px;
+            border-radius: 2px;
+            border: 1px solid #c8c9cc;
+            font-size: 12px;
+            font-weight: 400;
+            color: #c8c9cc;
+            line-height: 20px;
+            text-align: center;
+            margin-left: 8px;
+        }
+        .dialog-border {
+            width: 315px;
+            height: 1px;
+            background: #f2f4f5;
+            margin: 10px 0 15px 0;
+        }
+    }
+    .steps-con {
+        display: flex;
+        .steps-time {
+            width: 37px;
+            height: 34px;
+            font-size: 12px;
+            font-weight: 500;
+            color: #1a1a1a;
+            line-height: 17px;
+            margin: 10px 0 22px 11px;
         }
     }
 }

src/pages/receiving.vue

@@ -51,7 +51,6 @@ export default {
         height: 70px;
         line-height: 70px;
         font-size: 14px;
-        font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
         color: #000000;
         // line-height: 24px;
@@ -79,7 +78,6 @@ export default {
             p {
                 height: 18px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #000000;
                 line-height: 18px;
@@ -96,7 +94,6 @@ export default {
                 border-radius: 12px;
                 opacity: 0.3;
                 font-size: 16px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #ffffff;
                 text-align: center;
@@ -109,7 +106,6 @@ export default {
                 border-radius: 12px;
                 border: 1px solid #ff6c00;
                 font-size: 16px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #ff6c00;
                 text-align: center;