diff --git a/package-lock.json b/package-lock.json
index f1165a9..fb8aec7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5870,6 +5870,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
diff --git a/package.json b/package.json
index 9e81c26..e8c6618 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "axios": "^0.21.1",
     "element-ui": "^2.15.3",
     "mavon-editor": "^2.9.1",
+    "moment": "^2.29.1",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },
diff --git a/src/api/index.js b/src/api/index.js
index 5596743..69ba1a2 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -88,3 +88,35 @@ export const getPrice = query => {
       params: query
   });
 };
+// 挂牌公告列表
+export const assetNoticeList = query => {
+  return request({
+      url: '/api/user.Asset/assetNoticeList',
+      method: 'get',
+      params: query
+  });
+};
+// 资产详情
+export const assetInfo = query => {
+  return request({
+      url: '/api/user.Asset/assetInfo',
+      method: 'get',
+      params: query
+  });
+};
+// 判断是否能购买
+export const checkBuy = query => {
+  return request({
+      url: '/api/user.Order/checkBuy',
+      method: 'get',
+      params: query
+  });
+};
+// 资产分类详情
+export const assetClassInfo = query => {
+  return request({
+      url: '/api/user.Asset/assetClassInfo',
+      method: 'get',
+      params: query
+  });
+};
diff --git a/src/assets/img/order_process.png b/src/assets/img/order_process.png
new file mode 100644
index 0000000..7f47fff
Binary files /dev/null and b/src/assets/img/order_process.png differ
diff --git a/src/assets/img/order_stats.png b/src/assets/img/order_stats.png
new file mode 100644
index 0000000..5f18826
Binary files /dev/null and b/src/assets/img/order_stats.png differ
diff --git a/src/assets/img/order_stats1.png b/src/assets/img/order_stats1.png
new file mode 100644
index 0000000..b51737f
Binary files /dev/null and b/src/assets/img/order_stats1.png differ
diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue
index a3bb655..e0fb4c2 100644
--- a/src/components/common/Header.vue
+++ b/src/components/common/Header.vue
@@ -161,7 +161,7 @@ export default {
     }
   },
   created(){
-    console.info(this.$route)
+    // console.info(this.$route)
     this.activeClass=this.$route.path
     this.login_type=localStorage.getItem('login_type')
     this.UserConsole(this.login_type,1)
diff --git a/src/components/page/AssetDetails.vue b/src/components/page/AssetDetails.vue
index f2d4fa6..8197eab 100644
--- a/src/components/page/AssetDetails.vue
+++ b/src/components/page/AssetDetails.vue
@@ -3,45 +3,45 @@
     <div class="asset">
       <div class="asset_banner">
         <el-carousel trigger="click" height="425px" ref="carousel">
-          <el-carousel-item v-for="item in 4" :key="item">
-            <img src="../../assets/img/header_logo.png" alt="" class="asset_banner_img">
+          <el-carousel-item v-for="(item,index) in listingList.serial_img" :key="index">
+            <img :src="item" alt="" class="asset_banner_img">
           </el-carousel-item>
         </el-carousel>
         <div class="asset_banner1">
-          <img src="../../assets/img/header_logo.png" alt="" v-for="(item,index) in 4" :key="item" @click="setActiveItem(index)">
+          <img :src="item" alt="" v-for="(item,index) in listingList.serial_img" :key="index" @click="setActiveItem(index)">
         </div>
       </div>
 
       <div class="asset_info">
-        <p class="asset_info_title">东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</p>
+        <p class="asset_info_title">{{listingList.serial_name}}</p>
         <p class="asset_info_p">
           <span>评估价格：</span>
-          <span class="asset_info_span">¥ 99,980.00</span>
+          <span class="asset_info_span">¥ {{listingList.cartellino_type==1 ? listingList.price: listingList.start_auction_money}}</span>
         </p>
         <p class="asset_info_p">
           <span>资产类型：</span>
-          <span class="asset_info_span1">房屋</span>
+          <span class="asset_info_span1">{{listingList.asset_name}}</span>
         </p>
         <p class="asset_info_p">
           <span>所在地：</span>
-          <span class="asset_info_span1">广东省东莞市虎门区</span>
+          <span class="asset_info_span1">{{listingList.address_name}}</span>
         </p>
         <p class="asset_info_p">
           <span>交易方式：</span>
-          <span class="asset_info_span1">线下交易（物流配送）</span>
+          <span class="asset_info_span1">{{listingList.buy_mode==1 ? '线下交易' : '线上交易'}}（{{listingList.goods_mode==1? '现场交付' :'物流配送'}}）</span>
         </p>
         <p class="asset_info_p">
           <span>有效日期：</span>
-          <span class="asset_info_span1">2022年7月15日  14:00 前</span>
+          <span class="asset_info_span1">{{listingList.endtime}} 前</span>
         </p>
         <p class="asset_info_p">
           <span>数量：</span>
-          <el-input v-model="number" placeholder="请输入标的所在地" class="seach_input" ></el-input>
-          <span class="asset_info_span2">棵（可购数量20棵）</span>
+          <el-input v-model="listingList.pay_count" placeholder="请输入标的所在地" class="seach_input" ></el-input>
+          <span class="asset_info_span2">{{listingList.asset_unit}}（可购数量{{listingList.surplus_count}}{{listingList.asset_unit}}）</span>
         </p>
-        <p class="asset_info_p1">浏览记录 88次</p>
+        <p class="asset_info_p1">浏览记录 {{listingList.views}}次</p>
         <div class="asset_info_button">
-          <button class="purchase">立即购买</button>
+          <button class="purchase" @click="checkBuy">立即购买</button>
           <button class="collection">放入收藏</button>
         </div>
       </div>
@@ -54,17 +54,49 @@
         <div class="asset1_title_item">购买须知</div>
         <div class="asset1_title_item">历史评价</div>
       </div>
+      <div class="asset1_content">{{listingList.serial_content}}</div>
     </div>
   </div>
 </template>
 <script>
+import {assetInfo,checkBuy} from '../../api/index'
 export default {
   data(){
     return{
-      number:1
+      number:1,
+      query:{
+        id:'',
+        count:''
+      },
+      listingList:{}
     }
   },
+  created(){
+    this.query.id=this.$route.query.id
+    this.getData()
+  },
   methods:{
+    checkBuy(){
+      this.query.count=this.listingList.pay_count
+      checkBuy(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.$router.push({path:'/order/confirmOrder',query:{step:0}})
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    getData(){
+      assetInfo(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.listingList=res.data;
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
     setActiveItem(index){
       this.$refs.carousel.setActiveItem(index)
     }
@@ -99,11 +131,12 @@ export default {
     height: 108px;
     margin-top: 20px;
     display: flex;
-    justify-content: space-between;
+    /* justify-content: space-between; */
   }
   .asset_banner1 img{
     width: 147px;
     height: 100%;
+    margin-right: 20px;
   }
   .asset_info{
     margin-left: 20px;
@@ -189,4 +222,7 @@ export default {
     justify-content: center;
     font-weight: bold;
   }
+  .asset1_content{
+    padding: 20px ;
+  }
 </style>
diff --git a/src/components/page/ClassificationDetails.vue b/src/components/page/ClassificationDetails.vue
index 6afd054..ebf9c19 100644
--- a/src/components/page/ClassificationDetails.vue
+++ b/src/components/page/ClassificationDetails.vue
@@ -39,27 +39,27 @@
     </div>
 
     <div class="tabs">
-      <div class="tabs_item" @click="goDetails">
-        <img src="../../assets/img/header_logo.png" alt="" class="tabs_item_img">
-        <div class="tabs_item_lable">有形实物资产</div>
+      <div class="tabs_item" @click="goDetails(item.id)" v-for="(item,index) in listingList" :key="index">
+        <img :src="item.serial_img" alt="" class="tabs_item_img">
+        <div class="tabs_item_lable">{{item.top_class_name}}</div>
         <div class="tabs_item_content">
-          <p class="tabs_item_content_title">资产标题名称字数多的显示…</p>
+          <p class="tabs_item_content_title">{{item.serial_name}}</p>
           <p class="tabs_item_content_p">
             <span>评估价格： </span>
             <span class="tabs_item_content_span">￥</span>
-            <span class="tabs_item_content_span tabs_item_content_span1">800,000.00</span>
+            <span class="tabs_item_content_span tabs_item_content_span1">{{item.price}}</span>
           </p>
           <p class="tabs_item_content_p">
             <span>资产类型： </span>
-            <span class="tabs_item_content_span2 tabs_item_content_span3">房屋</span>
+            <span class="tabs_item_content_span2 tabs_item_content_span3">{{item.parent_class_name}}</span>
           </p>
           <p class="tabs_item_content_p">
             <span>所在地： </span>
-            <span class="tabs_item_content_span2 tabs_item_content_span3">深圳</span>
+            <span class="tabs_item_content_span2 tabs_item_content_span3">{{item.city}}</span>
           </p>
           <p class="tabs_item_content_p">
             <span>有效日期： </span>
-            <span class="tabs_item_content_span2 ">2022年7月15日  14:00 前</span>
+            <span class="tabs_item_content_span2 ">{{item.effective_date}}前</span>
           </p>
         </div>
       </div>
@@ -78,26 +78,42 @@
   </div>
 </template>
 <script>
+import {assetClassInfo} from '../../api/index'
 export default {
   data(){
     return{
       query:{
         page:1,
         limit:10,
-        input:'',
-        value:''
+        search_name:'',
+        status:''
       },
-      pageTotal:50
+      pageTotal:2,
+      listingList:[]
     }
   },
+  created(){
+    this.getData()
+  },
   methods:{
+    getData(){
+      assetClassInfo(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.listingList=res.data.list;
+          this.pageTotal=res.count
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
     // 分页导航
     handlePageChange(val) {
       this.$set(this.query, 'page', val);
       // this.getData();
     },
-    goDetails(){
-      this.$router.push('/AssetDetails')
+    goDetails(id){
+      this.$router.push({path:'/AssetDetails',query:{id:id}})
     }
   }
 }
@@ -136,7 +152,7 @@ export default {
     margin-top: 20px;
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
+    /* justify-content: space-between; */
   }
   .tabs_item{
     width: 283px;
@@ -147,6 +163,10 @@ export default {
     position: relative;
     border-radius: 5px;
     cursor: pointer;
+    margin-right: 20px;
+  }
+  .tabs_item:nth-child(n+4){
+    margin-right: 0;
   }
   .tabs_item_img{
     width: 100%;
diff --git a/src/components/page/Hoster/Listing.vue b/src/components/page/Hoster/Listing.vue
index 546ffa5..335decc 100644
--- a/src/components/page/Hoster/Listing.vue
+++ b/src/components/page/Hoster/Listing.vue
@@ -110,7 +110,7 @@
       </div>
       <div class="listing_flex">
         <el-form-item label="资产单位" prop="asset_unit" >
-          <el-input v-model="ruleForm.asset_unit"  onkeyup="value=value.replace(/[^\d]/g,'')"  placeholder="请输入单个资产单位的量词" class="listing_input"></el-input>
+          <el-input v-model="ruleForm.asset_unit"   placeholder="请输入单个资产单位的量词" class="listing_input"></el-input>
         </el-form-item>
         <el-form-item label="挂牌数量" prop="count">
           <el-input v-model="ruleForm.count"  onkeyup="value=value.replace(/[^\d]/g,'')"  placeholder="请输入需要挂牌资产的数量" class="listing_input"></el-input>
diff --git a/src/components/page/Listing.vue b/src/components/page/Listing.vue
index 607e4bf..46d892a 100644
--- a/src/components/page/Listing.vue
+++ b/src/components/page/Listing.vue
@@ -37,67 +37,19 @@
     </div>
 
     <div class="tabs">
-      <div class="tabs_item">
-        <img src="../../assets/img/header_logo.png" alt="" class="tabs_item_img">
+      <div class="tabs_item" v-for="(item,index) in listingList" :key="index">
+        <img :src="item.serial_img[0]" alt="" class="tabs_item_img">
         <div class="tabs_item_right">
-          <p class="tabs_item_right_p">910056</p>
-          <p class="tabs_item_right_p">东莞市大岭山镇大环村莞香非物质文化遗产保护园内在种植沉香树的采集</p>
+          <p class="tabs_item_right_p">{{item.cartellino_id}}</p>
+          <p class="tabs_item_right_p">{{item.serial_name}}</p>
           <div class="tabs_item_right_div">
             本次托管资产为：沉香树采集权的财产权。现代香结评定，依品质优劣可分司登记。最低品为白木香。此为香门除开，第一….
           </div>
-          <p class="tabs_item_right_p1">2021年7月16日 10:32:21</p>
-          <p class="tabs_item_right_p2" @click="goDetails">点击详情 ></p>
+          <p class="tabs_item_right_p1">{{item.create_time | formatDate('YYYY-MM-DD HH:mm:ss')}}</p>
+          <p class="tabs_item_right_p2" @click="goDetails(item.id)">点击详情 ></p>
           <p class="tabs_item_right_p3">
             <span class="tabs_item_right_span">托管方 </span>
-            <span>东莞市尚正堂莞香种植有限公司</span>
-          </p>
-        </div>
-      </div>
-      <div class="tabs_item">
-        <img src="../../assets/img/header_logo.png" alt="" class="tabs_item_img">
-        <div class="tabs_item_right">
-          <p class="tabs_item_right_p">910056</p>
-          <p class="tabs_item_right_p">东莞市大岭山镇大环村莞香非物质文化遗产保护园内在种植沉香树的采集</p>
-          <div class="tabs_item_right_div">
-            本次托管资产为：沉香树采集权的财产权。现代香结评定，依品质优劣可分司登记。最低品为白木香。此为香门除开，第一….
-          </div>
-          <p class="tabs_item_right_p1">2021年7月16日 10:32:21</p>
-          <p class="tabs_item_right_p2">点击详情 ></p>
-          <p class="tabs_item_right_p3">
-            <span class="tabs_item_right_span">托管方 </span>
-            <span>东莞市尚正堂莞香种植有限公司</span>
-          </p>
-        </div>
-      </div>
-      <div class="tabs_item">
-        <img src="../../assets/img/header_logo.png" alt="" class="tabs_item_img">
-        <div class="tabs_item_right">
-          <p class="tabs_item_right_p">910056</p>
-          <p class="tabs_item_right_p">东莞市大岭山镇大环村莞香非物质文化遗产保护园内在种植沉香树的采集</p>
-          <div class="tabs_item_right_div">
-            本次托管资产为：沉香树采集权的财产权。现代香结评定，依品质优劣可分司登记。最低品为白木香。此为香门除开，第一….
-          </div>
-          <p class="tabs_item_right_p1">2021年7月16日 10:32:21</p>
-          <p class="tabs_item_right_p2">点击详情 ></p>
-          <p class="tabs_item_right_p3">
-            <span class="tabs_item_right_span">托管方 </span>
-            <span>东莞市尚正堂莞香种植有限公司</span>
-          </p>
-        </div>
-      </div>
-      <div class="tabs_item">
-        <img src="../../assets/img/header_logo.png" alt="" class="tabs_item_img">
-        <div class="tabs_item_right">
-          <p class="tabs_item_right_p">910056</p>
-          <p class="tabs_item_right_p">东莞市大岭山镇大环村莞香非物质文化遗产保护园内在种植沉香树的采集</p>
-          <div class="tabs_item_right_div">
-            本次托管资产为：沉香树采集权的财产权。现代香结评定，依品质优劣可分司登记。最低品为白木香。此为香门除开，第一….
-          </div>
-          <p class="tabs_item_right_p1">2021年7月16日 10:32:21</p>
-          <p class="tabs_item_right_p2">点击详情 ></p>
-          <p class="tabs_item_right_p3">
-            <span class="tabs_item_right_span">托管方 </span>
-            <span>东莞市尚正堂莞香种植有限公司</span>
+            <span>{{item.firm_name}}</span>
           </p>
         </div>
       </div>
@@ -115,28 +67,51 @@
   </div>
 </template>
 <script>
+import {assetNoticeList} from '../../api/index'
 export default {
   data(){
     return{
       query:{
         page:1,
         limit:10,
-        input:'',
-        value:''
+        order_type:'',
+        order_name:'',
+        date:'',
+        min_price:'',
+        max_price:'',
+        cartellino_type:'',
+        username:'',
+        cartellino_id:'',
+        serial_name:'',
       },
-      pageTotal:50
+      pageTotal:0,
+      listingList:[]
     }
   },
+  created(){
+    this.getData()
+  },
   methods:{
-    goDetails(){
-      this.$router.push('/NoticeDetails')
+    getData(){
+      assetNoticeList(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.listingList=res.data.list;
+          this.pageTotal=res.count
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    goDetails(id){
+      this.$router.push({path:'/NoticeDetails',query:{id:id}})
     },
     // 分页导航
     handlePageChange(val) {
       this.$set(this.query, 'page', val);
       // this.getData();
     }
-  }
+  },
 }
 </script>
 <style scoped>
diff --git a/src/components/page/NoticeDetails.vue b/src/components/page/NoticeDetails.vue
index 3fe3e65..059650c 100644
--- a/src/components/page/NoticeDetails.vue
+++ b/src/components/page/NoticeDetails.vue
@@ -52,11 +52,17 @@
 export default {
   data(){
     return{
+      query:{
+        id:''
+      }
     }
   },
+  created(){
+    this.query.id=this.$route.query.id
+  },
   methods:{
     goDetails(){
-      this.$router.push('/AssetDetails')
+      this.$router.push({path:'/AssetDetails',query:{id:this.query.id}})
     }
   }
 }
diff --git a/src/components/page/Order/confirmOrder.vue b/src/components/page/Order/confirmOrder.vue
new file mode 100644
index 0000000..a2d538a
--- /dev/null
+++ b/src/components/page/Order/confirmOrder.vue
@@ -0,0 +1,264 @@
+<template>
+  <div>
+    <p class="title">确认订单信息</p>
+    <div class="order_head">
+      <div class="order_head_item" >资产名称</div>
+      <div class="order_head_item" >资产编号</div>
+      <div class="order_head_item" >资产分类</div>
+      <div class="order_head_item" >资产单价</div>
+      <div class="order_head_item" >交易数量</div>
+      <div class="order_head_item" >金额小计</div>
+    </div>
+    <p class="order_title">挂牌方：东莞市芳华沉香园林景观有限公司</p>
+    <div class="order_content">
+      <div class="order_content_item">
+        <img src="../../../assets/img/achievements_bg.png" alt="" class="order_content_item_img">
+        <span class="order_content_item_span">东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</span>
+      </div>
+      <div class="order_content_item">
+        <span>GM-BZ-165254</span>
+      </div>
+      <div class="order_content_item">
+        <span>采集权</span>
+      </div>
+      <div class="order_content_item">
+        <span>¥ 10,000.00</span>
+      </div>
+      <div class="order_content_item">
+        <span>3</span>
+      </div>
+      <div class="order_content_item">
+        <span class="order_price">¥ 30,000.00</span>
+      </div>
+    </div>
+    <div class="order_other">
+      <div class="order_other_item">
+        <div class="order_message">
+          <span>给挂牌方留言：</span>
+          <el-input
+            type="textarea"
+            class="order_message_input"
+            resize="none"
+            placeholder="请输入内容"
+            v-model="textarea">
+          </el-input>
+        </div>
+        <div class="order_other_item_right">
+          <div>
+            <span>契税： ¥ 1,500.00</span>
+            <span class="order_price">¥ 1,500.00</span>
+          </div>
+          <div>
+            <span>印花税： ¥ 1,500.00</span>
+            <span class="order_price">¥ 1,500.00</span>
+          </div>
+        </div>
+      </div>
+      <div class="order_other_item order_other_item1">
+        <span>金额合计  </span>
+        <span class="all_price"> ¥ 33,000.00</span>
+      </div>
+    </div>
+    <div class="order_foot">
+      <div class="order_info">
+        <p class="order_info_item">
+          <span class="order_info_span">实付款：</span>
+          <span class="order_info_span1">¥ 33,000.00</span>
+        </p>
+        <p class="order_info_item">
+          <span class="order_info_span">联系地址： </span>
+          <span >广东省 东莞市 虎门镇 华东区 讯发大厦2座B607</span>
+        </p>
+        <p class="order_info_item">
+          <span class="order_info_span">联系人： </span>
+          <span >陈阳明 13812345678</span>
+        </p>
+      </div>
+      <button class="order_button" @click="submit">提交订单</button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return{
+
+    }
+  },
+  methods:{
+    submit(){
+      this.$router.push({path:'/order/orderPayment',query:{step:1}})
+    }
+  }
+}
+</script>
+<style scoped>
+  .title{
+    font-size: 14px;
+    margin-bottom: 30px;
+  }
+  .order_head{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+    width: 100%;
+  }
+  .order_head_item{
+    width: 166px;
+    font-size: 12px;
+    color: #7F7F7F;
+    text-align: center;
+    border-bottom: 2px solid rgba(215, 215, 215, 1);
+    padding-bottom: 5px;
+  }
+  .order_head_item:first-child{
+    width:340px
+  }
+  .order_title{
+    font-size: 12px;
+    color: #7F7F7F;
+    margin-bottom: 5px;
+  }
+  .order_content{
+    height: 75px;
+    background-color: rgba(255, 255, 255, 0);
+    border-top: 1px dashed #AAAAAA;
+    border-bottom: 1px dashed #AAAAAA;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+  .order_content_item{
+    width: 166px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    box-sizing: border-box;
+  }
+  .order_content_item:first-child{
+    width:340px;
+    justify-content: flex-start;
+    padding-left: 20px;
+  }
+  .order_content_item:last-child{
+    justify-content: flex-end;
+    padding-right: 20px;
+  }
+  .order_content_item_img{
+    width: 55px;
+    height: 55px;
+    margin-right: 10px;
+  }
+  .order_content_item_span{
+    display: inline-block;
+    width: 240px;
+  }
+  .order_price{
+    color: #EB4747;
+  }
+  .order_other{
+    margin-bottom: 20px;
+  }
+  .order_other_item{
+    display: flex;
+    justify-content: space-between;
+    height: 103px;
+    width: 100%;
+  }
+  .order_message{
+    width: 596px;
+    padding: 10px 20px;
+    display: flex;
+    font-size: 12px;
+    background: #F2F2F2;
+    box-sizing: border-box;
+  }
+  .order_message .order_message_input{
+    width: 455px;
+    margin-left: 10px;
+  }
+  .order_message_input >>>.el-textarea__inner{
+    height: 75px;
+  }
+  .order_other_item_right{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .order_other_item_right>div{
+    width: 601px;
+    height: 50px;
+    background-color: rgba(242, 242, 242, 1);
+    font-size: 12px;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+  .order_other_item1{
+    height: 50px;
+    background: #F2F2F2;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 3px;
+    font-size: 14px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+  .all_price{
+    color: #EB4747;
+    font-weight: 650;
+  }
+  .order_other_item1>span:first-child{
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .order_info{
+    width: 400px;
+    height: 140px;
+    border-width: 2px;
+    border-style: solid;
+    border-color: rgba(137, 32, 31, 1);
+    text-align: right;
+    padding-right: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+  .order_info_item{
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    font-weight: 400;
+    color: #555555;
+  }
+  .order_info_span{
+    font-weight: 650;
+    color: #333333;
+  }
+  .order_info_span1{
+    font-size: 24px;
+    color: #EB4747;
+    font-weight: 650;
+  }
+  .order_button{
+    font-size: 14px;
+    color: #FFFFFF;
+    width: 160px;
+    height: 40px;
+    background: #89201F;
+    border: none;
+  }
+  .order_foot{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+</style>
diff --git a/src/components/page/Order/index.vue b/src/components/page/Order/index.vue
new file mode 100644
index 0000000..c415abd
--- /dev/null
+++ b/src/components/page/Order/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="body">
+    <p class="title">{{title[step]}}</p>
+    <el-steps :active="step" align-center class="step_bar">
+      <el-step title="确认订单" description="这是一段很长很长很长的描述性文字"></el-step>
+      <el-step title="订单付款" description="这是一段很长很长很长的描述性文字"></el-step>
+      <el-step title="线下签约" description="这是一段很长很长很长的描述性文字"></el-step>
+      <el-step title="确认交付" description="这是一段很长很长很长的描述性文字"></el-step>
+    </el-steps>
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+export  default{
+  data(){
+    return{
+      step:0,
+      title:['确认订单','订单付款','线下签约','确认交付']
+    }
+  },
+  created(){
+    this.step= parseInt(this.$route.query.step)
+  }
+}
+</script>
+<style scoped>
+  .body{
+    margin-top: 30px;
+  }
+  .title{
+    font-size: 18px;
+    margin-bottom: 20px;
+  }
+  .step_bar{
+    margin-bottom: 30px;
+  }
+  .step_bar>>>.el-step__icon{
+    width: 34px;
+    height: 34px;
+  }
+  .step_bar>>>.el-step.is-horizontal .el-step__line{
+    top: 17px;
+  }
+</style>
diff --git a/src/components/page/Order/orderDetails.vue b/src/components/page/Order/orderDetails.vue
new file mode 100644
index 0000000..f2d63a0
--- /dev/null
+++ b/src/components/page/Order/orderDetails.vue
@@ -0,0 +1,313 @@
+<template>
+  <div>
+    <div class="order_info">
+      <div class="order_info_left">
+        <div class="order_info_left_title">订单信息</div>
+        <div class="order_info_left_content">
+          <div class="order_info_left_content_item">
+            <span>联系地址： </span>
+            <span>广东省 东莞市 虎门镇 华东区 讯发大厦2座B607</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>联系人：  </span>
+            <span>陈阳明 13812345678</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>订单编号：  </span>
+            <span>851245854512</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>下单时间：  </span>
+            <span>2021-08-08 10:33:54</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>挂牌方：  </span>
+            <span>东莞市芳华沉香园林景观有限公司</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>摘牌方留言： </span>
+            <span></span>
+          </div>
+        </div>
+      </div>
+      <div class="order_info_right">
+        <div class="order_info_right_title">
+          <img src="../../../assets/img/order_stats1.png" alt="">
+          <span>订单状态：已完成</span>
+        </div>
+        <p class="order_info_right_tips">双方交易已完成！</p>
+        <div class="order_info_right_tips">
+          <span>您可以点击</span>
+          <button class="pay_button">交易凭证</button>
+          <span>下载资产交易凭证</span>
+        </div>
+      </div>
+    </div>
+    <div class="order_head">
+      <div class="order_head_item" >资产名称</div>
+      <div class="order_head_item" >资产编号</div>
+      <div class="order_head_item" >资产分类</div>
+      <div class="order_head_item" >资产单价</div>
+      <div class="order_head_item" >交易数量</div>
+      <div class="order_head_item" >金额小计</div>
+    </div>
+    <div class="order_content">
+      <div class="order_content_item">
+        <img src="../../../assets/img/achievements_bg.png" alt="" class="order_content_item_img">
+        <span class="order_content_item_span">东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</span>
+      </div>
+      <div class="order_content_item">
+        <span>GM-BZ-165254</span>
+      </div>
+      <div class="order_content_item">
+        <span>采集权</span>
+      </div>
+      <div class="order_content_item">
+        <span>¥ 10,000.00</span>
+      </div>
+      <div class="order_content_item">
+        <span>3</span>
+      </div>
+      <div class="order_content_item">
+        <span class="order_price">¥ 30,000.00</span>
+      </div>
+    </div>
+    <div class="order_other">
+      <div class="order_other_item">
+        <div class="order_message">
+          <span>给挂牌方留言：</span>
+          <el-input
+            type="textarea"
+            class="order_message_input"
+            resize="none"
+            placeholder="请输入内容"
+            v-model="textarea">
+          </el-input>
+        </div>
+        <div class="order_other_item_right">
+          <div>
+            <span>契税： ¥ 1,500.00</span>
+            <span class="order_price">¥ 1,500.00</span>
+          </div>
+          <div>
+            <span>印花税： ¥ 1,500.00</span>
+            <span class="order_price">¥ 1,500.00</span>
+          </div>
+        </div>
+      </div>
+      <div class="order_other_item order_other_item1">
+        <span>金额合计  </span>
+        <span class="all_price"> ¥ 33,000.00</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return{
+
+    }
+  },
+  methods:{
+  }
+}
+</script>
+<style scoped>
+  .order_info{
+    width: 100%;
+    min-height: 360px;
+    height: auto;
+    border: 1px solid rgba(215, 215, 215, 1);
+    margin-bottom: 30px;
+    display: flex;
+  }
+  .order_info_right{
+    width: 940px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 60px;
+    box-sizing: border-box;
+  }
+  .order_info_right_title{
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    margin-bottom: 35px;
+  }
+  .order_info_right_title img{
+    width: 30px;
+    height: 30px;
+    margin-right: 30px;
+  }
+  .order_info_right_tips{
+    font-size: 12px;
+    color: #555555;
+    display: flex;
+    align-items: center;
+    margin-left: 80px;
+    margin-bottom: 25px;
+  }
+  .order_time{
+    color: #89201F;
+  }
+  .pay_button{
+    width: 80px;
+    font-size: 12px;
+    color: #555555;
+    height: 30px;
+    border: 1px solid #D7D7D7;
+    margin: 0 20px;
+    cursor: pointer;
+  }
+
+  .order_info_left{
+    width: 250px;
+    border-right: 1px solid rgba(215, 215, 215, 1);
+    box-sizing: border-box;
+    background-color: #F2F2F2;
+  }
+  .order_info_left_title{
+    padding-left: 20px;
+    background-color: #E7E7E7;
+    display: flex;
+    height: 40px;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 650;
+    border-bottom: 1px solid rgba(215, 215, 215, 1);
+    box-sizing: border-box;
+  }
+  .order_info_left_content{
+    padding: 10px 20px;
+    min-height: 320px;
+    height: auto;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+  }
+  .order_info_left_content_item{
+    font-size: 12px;
+    color: #555555;
+    display: flex;
+    margin-bottom: 10px;
+  }
+  .order_info_left_content_item span:first-child{
+    display: inline-block;
+    width: 80px;
+    margin-right: 10px;
+  }
+  .order_info_left_content_item span:last-child{
+    display: inline-block;
+    width: 135px;
+  }
+  .order_head{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+    width: 100%;
+  }
+  .order_head_item{
+    width: 166px;
+    font-size: 12px;
+    color: #7F7F7F;
+    text-align: center;
+    border-bottom: 2px solid rgba(215, 215, 215, 1);
+    padding-bottom: 5px;
+  }
+  .order_head_item:first-child{
+    width:340px
+  }
+  .order_content{
+    height: 75px;
+    background-color: rgba(255, 255, 255, 0);
+    border-top: 1px dashed #AAAAAA;
+    border-bottom: 1px dashed #AAAAAA;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+  .order_content_item{
+    width: 166px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    box-sizing: border-box;
+  }
+  .order_content_item:first-child{
+    width:340px;
+    justify-content: flex-start;
+    padding-left: 20px;
+  }
+  .order_content_item:last-child{
+    justify-content: flex-end;
+    padding-right: 20px;
+  }
+  .order_content_item_img{
+    width: 55px;
+    height: 55px;
+    margin-right: 10px;
+  }
+  .order_content_item_span{
+    display: inline-block;
+    width: 240px;
+  }
+  .order_price{
+    color: #EB4747;
+  }
+  .order_other{
+    margin-bottom: 100px;
+  }
+  .order_other_item{
+    display: flex;
+    justify-content: space-between;
+    height: 103px;
+    width: 100%;
+  }
+  .order_message{
+    width: 596px;
+    padding: 10px 20px;
+    display: flex;
+    font-size: 12px;
+    background: #F2F2F2;
+    box-sizing: border-box;
+  }
+  .order_message .order_message_input{
+    width: 455px;
+    margin-left: 10px;
+  }
+  .order_message_input >>>.el-textarea__inner{
+    height: 75px;
+  }
+  .order_other_item_right{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .order_other_item_right>div{
+    width: 601px;
+    height: 50px;
+    background-color: rgba(242, 242, 242, 1);
+    font-size: 12px;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+  .order_other_item1{
+    height: 50px;
+    background: #F2F2F2;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 3px;
+    font-size: 14px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/src/components/page/Order/orderPayment.vue b/src/components/page/Order/orderPayment.vue
new file mode 100644
index 0000000..3d97616
--- /dev/null
+++ b/src/components/page/Order/orderPayment.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <p class="title">请选择支付方式</p>
+    <div class="order_content">
+      <div class="order_content_item">
+        <el-radio v-model="query.radio" label="1" class="order_content_item_radio">线下转账</el-radio>
+        <span>请使用平台账户登记的银行账号通过银行柜台转账至深圳文化产权交易所指定对公账户（开户行：中国农业银行    开户名称：深圳文化产权交易所    开户账号：6228480125447858588）</span>
+      </div>
+      <div class="order_content_item">
+        <el-radio v-model="query.radio" label="2" class="order_content_item_radio">网上银行</el-radio>
+        <span>跳转至网银时请认真核对收款方，以保障支付安全。（请使用平台账户登记的银行账号进行交易）</span>
+      </div>
+    </div>
+    <div class="order_foot">
+      <button class="order_button" @click="submit">下一步</button>
+    </div>
+    <p class="order_tips">付款金额可能超限，限额如下</p>
+    <div>
+      <img src="../../../assets/img/order_process.png" alt="" class="order_process">
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return{
+      query:{
+        radio:'1'
+      }
+    }
+  },
+  methods:{
+    submit(){
+      this.$router.push({path:'/order/orderPendingPay',query:{step:1}})
+    }
+  }
+}
+</script>
+<style scoped>
+  .title{
+    font-size: 14px;
+    margin-bottom: 30px;
+  }
+  .order_content{
+    border-top: 1px solid #DCDCDC;
+    border-bottom: 1px solid #DCDCDC;
+  }
+  .order_content_item{
+    height: 70px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: #AAAAAA;
+    font-size: 12px;
+    border-bottom: 1px solid #DCDCDC;
+  }
+  .order_content_item:last-child{
+    border-bottom: none;
+  }
+  .order_content_item_radio{
+    color: #333333;
+    margin-right: 30px;
+  }
+  .all_price{
+    color: #EB4747;
+    font-weight: 650;
+  }
+  .order_other_item1>span:first-child{
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .order_button{
+    font-size: 14px;
+    color: #FFFFFF;
+    width: 120px;
+    height: 40px;
+    background: #89201F;
+    border: none;
+  }
+  .order_foot{
+    display: flex;
+    margin: 15px 0;
+  }
+  .order_tips{
+    font-size: 12px;
+    margin-bottom: 20px;
+  }
+  .order_process{
+    width: 660px;
+  }
+</style>
diff --git a/src/components/page/Order/orderPendingPay.vue b/src/components/page/Order/orderPendingPay.vue
new file mode 100644
index 0000000..b47184e
--- /dev/null
+++ b/src/components/page/Order/orderPendingPay.vue
@@ -0,0 +1,318 @@
+<template>
+  <div>
+    <div class="order_info">
+      <div class="order_info_left">
+        <div class="order_info_left_title">订单信息</div>
+        <div class="order_info_left_content">
+          <div class="order_info_left_content_item">
+            <span>联系地址： </span>
+            <span>广东省 东莞市 虎门镇 华东区 讯发大厦2座B607</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>联系人：  </span>
+            <span>陈阳明 13812345678</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>订单编号：  </span>
+            <span>851245854512</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>下单时间：  </span>
+            <span>2021-08-08 10:33:54</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>挂牌方：  </span>
+            <span>东莞市芳华沉香园林景观有限公司</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>摘牌方留言： </span>
+            <span></span>
+          </div>
+        </div>
+      </div>
+      <div class="order_info_right">
+        <div class="order_info_right_title">
+          <img src="../../../assets/img/order_stats.png" alt="">
+          <span>订单状态：等待摘牌方付款</span>
+        </div>
+        <p class="order_info_right_tips">
+          您还有
+          <span class="order_time">23小时43分15秒</span>
+          来付款，超时订单自动关闭。订单关闭后3天内不能再重复购买同一个资产，为避免不便之处，请尽快付款！
+        </p>
+        <div class="order_info_right_tips">
+          <span>您可以</span>
+          <button class="pay_button">网银支付</button>
+          <span>或上传转账记录</span>
+          <span>点击上传</span>
+        </div>
+      </div>
+    </div>
+    <div class="order_head">
+      <div class="order_head_item" >资产名称</div>
+      <div class="order_head_item" >资产编号</div>
+      <div class="order_head_item" >资产分类</div>
+      <div class="order_head_item" >资产单价</div>
+      <div class="order_head_item" >交易数量</div>
+      <div class="order_head_item" >金额小计</div>
+    </div>
+    <div class="order_content">
+      <div class="order_content_item">
+        <img src="../../../assets/img/achievements_bg.png" alt="" class="order_content_item_img">
+        <span class="order_content_item_span">东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</span>
+      </div>
+      <div class="order_content_item">
+        <span>GM-BZ-165254</span>
+      </div>
+      <div class="order_content_item">
+        <span>采集权</span>
+      </div>
+      <div class="order_content_item">
+        <span>¥ 10,000.00</span>
+      </div>
+      <div class="order_content_item">
+        <span>3</span>
+      </div>
+      <div class="order_content_item">
+        <span class="order_price">¥ 30,000.00</span>
+      </div>
+    </div>
+    <div class="order_other">
+      <div class="order_other_item">
+        <div class="order_message">
+          <span>给挂牌方留言：</span>
+          <el-input
+            type="textarea"
+            class="order_message_input"
+            resize="none"
+            placeholder="请输入内容"
+            v-model="textarea">
+          </el-input>
+        </div>
+        <div class="order_other_item_right">
+          <div>
+            <span>契税： ¥ 1,500.00</span>
+            <span class="order_price">¥ 1,500.00</span>
+          </div>
+          <div>
+            <span>印花税： ¥ 1,500.00</span>
+            <span class="order_price">¥ 1,500.00</span>
+          </div>
+        </div>
+      </div>
+      <div class="order_other_item order_other_item1">
+        <span>金额合计  </span>
+        <span class="all_price"> ¥ 33,000.00</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return{
+
+    }
+  },
+  methods:{
+  }
+}
+</script>
+<style scoped>
+  .order_info{
+    width: 100%;
+    min-height: 360px;
+    height: auto;
+    border: 1px solid rgba(215, 215, 215, 1);
+    margin-bottom: 30px;
+    display: flex;
+  }
+  .order_info_right{
+    width: 940px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 60px;
+    box-sizing: border-box;
+  }
+  .order_info_right_title{
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    margin-bottom: 35px;
+  }
+  .order_info_right_title img{
+    width: 30px;
+    height: 30px;
+    margin-right: 30px;
+  }
+  .order_info_right_tips{
+    font-size: 12px;
+    color: #555555;
+    display: flex;
+    align-items: center;
+    margin-left: 80px;
+    margin-bottom: 25px;
+  }
+  .order_time{
+    color: #89201F;
+  }
+  .pay_button{
+    width: 80px;
+    font-size: 12px;
+    color: #555555;
+    height: 30px;
+    border: 1px solid #D7D7D7;
+    margin: 0 20px;
+    cursor: pointer;
+  }
+
+  .order_info_left{
+    width: 250px;
+    border-right: 1px solid rgba(215, 215, 215, 1);
+    box-sizing: border-box;
+    background-color: #F2F2F2;
+  }
+  .order_info_left_title{
+    padding-left: 20px;
+    background-color: #E7E7E7;
+    display: flex;
+    height: 40px;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 650;
+    border-bottom: 1px solid rgba(215, 215, 215, 1);
+    box-sizing: border-box;
+  }
+  .order_info_left_content{
+    padding: 10px 20px;
+    min-height: 320px;
+    height: auto;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+  }
+  .order_info_left_content_item{
+    font-size: 12px;
+    color: #555555;
+    display: flex;
+    margin-bottom: 10px;
+  }
+  .order_info_left_content_item span:first-child{
+    display: inline-block;
+    width: 80px;
+    margin-right: 10px;
+  }
+  .order_info_left_content_item span:last-child{
+    display: inline-block;
+    width: 135px;
+  }
+  .order_head{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+    width: 100%;
+  }
+  .order_head_item{
+    width: 166px;
+    font-size: 12px;
+    color: #7F7F7F;
+    text-align: center;
+    border-bottom: 2px solid rgba(215, 215, 215, 1);
+    padding-bottom: 5px;
+  }
+  .order_head_item:first-child{
+    width:340px
+  }
+  .order_content{
+    height: 75px;
+    background-color: rgba(255, 255, 255, 0);
+    border-top: 1px dashed #AAAAAA;
+    border-bottom: 1px dashed #AAAAAA;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+  .order_content_item{
+    width: 166px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    box-sizing: border-box;
+  }
+  .order_content_item:first-child{
+    width:340px;
+    justify-content: flex-start;
+    padding-left: 20px;
+  }
+  .order_content_item:last-child{
+    justify-content: flex-end;
+    padding-right: 20px;
+  }
+  .order_content_item_img{
+    width: 55px;
+    height: 55px;
+    margin-right: 10px;
+  }
+  .order_content_item_span{
+    display: inline-block;
+    width: 240px;
+  }
+  .order_price{
+    color: #EB4747;
+  }
+  .order_other{
+    margin-bottom: 100px;
+  }
+  .order_other_item{
+    display: flex;
+    justify-content: space-between;
+    height: 103px;
+    width: 100%;
+  }
+  .order_message{
+    width: 596px;
+    padding: 10px 20px;
+    display: flex;
+    font-size: 12px;
+    background: #F2F2F2;
+    box-sizing: border-box;
+  }
+  .order_message .order_message_input{
+    width: 455px;
+    margin-left: 10px;
+  }
+  .order_message_input >>>.el-textarea__inner{
+    height: 75px;
+  }
+  .order_other_item_right{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .order_other_item_right>div{
+    width: 601px;
+    height: 50px;
+    background-color: rgba(242, 242, 242, 1);
+    font-size: 12px;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+  .order_other_item1{
+    height: 50px;
+    background: #F2F2F2;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 3px;
+    font-size: 14px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/src/components/page/Purchaser/myOrder.vue b/src/components/page/Purchaser/myOrder.vue
index 806eebd..973b5d1 100644
--- a/src/components/page/Purchaser/myOrder.vue
+++ b/src/components/page/Purchaser/myOrder.vue
@@ -56,7 +56,7 @@
             <div class="order_item_info_content_all">¥ 31,080.00</div>
             <div>已完成</div>
             <div class="order_item_info_content_operation">
-              <p>订单详情</p>
+              <p @click="orderDetails">订单详情</p>
               <p>在线联系</p>
               <p>查看评价</p>
             </div>
@@ -103,6 +103,9 @@ export default {
     handlePageChange(val) {
       this.$set(this.query, 'page', val);
       // this.getData();
+    },
+    orderDetails(){
+      this.$router.push({path:'/order/orderDetails',query:{step:4}})
     }
   }
 }
@@ -236,5 +239,6 @@ export default {
   }
   .order_item_info_content_operation p{
     margin-bottom: 5px;
+    cursor: pointer;
   }
 </style>
diff --git a/src/main.js b/src/main.js
index 6e78010..14e7157 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,11 +5,20 @@ import App from './App'
 import router from './router'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+import moment from 'moment'
 Vue.config.productionTip = false
 
 Vue.use(ElementUI, {
   size: 'small'
 });
+Vue.filter('formatDate',function (input,fmtstring) {//当input为时间戳，需转为Number类型
+  if(input){
+    return moment(input*1000).format(fmtstring);
+}else{
+    return "";
+}
+});
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
diff --git a/src/router/index.js b/src/router/index.js
index adfad04..a5016b6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -113,6 +113,33 @@ export default new Router({
             component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Hoster/Listing.vue'),
             meta: { title: '资产挂牌' }
           },
+          {
+            path: '/Order',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Order/index.vue'),
+            meta: { title: '订单' },
+            children:[
+              {
+                path: 'confirmOrder',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Order/confirmOrder.vue'),
+                meta: { title: '确认订单' }
+              },
+              {
+                path: 'orderPayment',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Order/orderPayment.vue'),
+                meta: { title: '订单付款' }
+              },
+              {
+                path: 'orderPendingPay',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Order/orderPendingPay.vue'),
+                meta: { title: '订单付款' }
+              },
+              {
+                path: 'orderDetails',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Order/orderDetails.vue'),
+                meta: { title: '订单详情' }
+              },
+            ]
+          },
         ]
     }
   ]