更新

src/views/dynamic/dealDetail.vue

@@ -16,7 +16,16 @@
                 <p></p>
               </el-col>
               <el-col :span="22" class="center">
-                中间
+                <el-col :span="7" class="centerStatus">
+                  <el-steps direction="vertical" :active="dealDetails.status">
+                    <el-step title="正在洽谈"></el-step>
+                    <el-step title="达成意向"></el-step>
+                    <el-step title="交易完成" description=""></el-step>
+                  </el-steps>
+                </el-col>
+                <el-col :span="17" class="centerInfo">
+                  <el-image :src="infoUrl"></el-image>
+                </el-col>
               </el-col>
               <el-col :span="1" class="right">
                 <p></p>
@@ -42,6 +51,8 @@ export default {
   components: {},
   data: () => ({
     topUrl: require('@/assets/dynamic6.png'),
+    infoUrl: require('@/assets/dynamic7.png'),
+    dealDetails: {},
   }),
   created() {
     this.search();
@@ -56,7 +67,7 @@ export default {
     async search() {
       let res = await this.fetch(this.id);
       res.data.status = parseInt(res.data.status);
-      // this.$set(this, `dealDetails`, res.data);
+      this.$set(this, `dealDetails`, res.data);
       console.log(res);
     },
   },
@@ -120,6 +131,26 @@ export default {
 .main .two .info .center {
   width: 97%;
 }
+.main .two .info .center .centerStatus {
+  text-align: center;
+  padding: 0px 100px;
+  height: 400px;
+}
+/deep/.el-steps {
+  padding: 120px 0;
+}
+/deep/.el-step__title {
+  font-size: 30px;
+}
+/deep/.el-step__title.is-process {
+  color: #c3c3c3;
+}
+/deep/.el-step__title.is-finish {
+  color: #1c81bf;
+}
+.main .two .info .center .centerInfo {
+  padding: 50px 30px;
+}
 .main .two .info .right {
   width: 20px;
   height: 700px;