更新

src/views/dynamic/dealDetail.vue

@@ -3,19 +3,29 @@
     <el-row>
       <div class="w_1200">
         <el-col :span="24" class="main">
-          <el-col :span="24" class="top">
-            <el-steps :active="dealDetails.status" align-center>
-              <el-step title="正在洽谈" description="正在洽谈"></el-step>
-              <el-step title="达成意向" description="达成意向"></el-step>
-              <el-step title="交易完成" description="交易完成"></el-step>
-            </el-steps>
+          <el-col :span="24" class="one">
+            <el-image :src="topUrl"></el-image>
           </el-col>
-          <el-col :span="24" class="info">
-            <p>营销人： {{ dealDetails.market_username }}</p>
-            <p>购买人: {{ dealDetails.username }}</p>
-
-            <p>产品名称: {{ dealDetails.product_name }}</p>
-            <p>说明： {{ dealDetails.description }}</p>
+          <el-col :span="24" class="two">
+            <el-col :span="24" class="top">
+              <span></span>
+            </el-col>
+            <el-col :span="24" class="info">
+              <el-col :span="1" class="left">
+                <p>项目详情</p>
+                <p></p>
+              </el-col>
+              <el-col :span="22" class="center">
+                中间
+              </el-col>
+              <el-col :span="1" class="right">
+                <p></p>
+                <p>项目详情</p>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="top down">
+              <span></span>
+            </el-col>
           </el-col>
         </el-col>
       </div>
@@ -31,7 +41,7 @@ export default {
   props: {},
   components: {},
   data: () => ({
-    dealDetails: {},
+    topUrl: require('@/assets/dynamic6.png'),
   }),
   created() {
     this.search();
@@ -46,7 +56,8 @@ 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);
     },
   },
 };
@@ -63,10 +74,71 @@ export default {
   min-height: 600px;
   margin: 30px 0;
 }
-.info {
-  min-height: 500px;
+.main .one {
+  height: 160px;
+  overflow: hidden;
+}
+.main .two .top {
+  float: left;
+  width: 100%;
+  height: 1px;
+}
+.main .two .top span {
+  float: right;
+  width: 30%;
+  height: 1px;
+  background: #9cb9cb;
+}
+.main .two .down span {
+  float: left;
+}
+.main .two .info {
+  height: 700px;
+  overflow: hidden;
+}
+.main .two .info .left {
+  width: 20px;
+  height: 700px;
+}
+.main .two .info .left p:first-child {
+  float: left;
+  width: 100%;
+  height: 100px;
+  font-size: 18px;
+  color: #003e70;
+  font-weight: bold;
+}
+.main .two .info .left p:last-child {
+  float: left;
+  width: 2px;
+  height: 600px;
+  background: #003e70;
+  margin: 0;
+  position: relative;
+  left: 5px;
+}
+.main .two .info .center {
+  width: 97%;
 }
-.info p {
-  padding: 20px 0 20px 0;
+.main .two .info .right {
+  width: 20px;
+  height: 700px;
+}
+.main .two .info .right p:first-child {
+  float: left;
+  width: 2px;
+  height: 600px;
+  background: #003e70;
+  margin: 0;
+  position: relative;
+  left: 5px;
+}
+.main .two .info .right p:last-child {
+  float: left;
+  width: 100%;
+  height: 100px;
+  font-size: 18px;
+  color: #003e70;
+  font-weight: bold;
 }
 </style>