|
@@ -3,15 +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="message">
|
|
|
- {{ dealDetails.content }}
|
|
|
+ <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>
|
|
@@ -20,19 +34,32 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions } = createNamespacedHelpers('transaction');
|
|
|
export default {
|
|
|
name: 'dealDetail',
|
|
|
props: {},
|
|
|
components: {},
|
|
|
data: () => ({
|
|
|
- dealDetails: {
|
|
|
- status: 2,
|
|
|
- content: '信息',
|
|
|
- },
|
|
|
+ topUrl: require('@/assets/dynamic6.png'),
|
|
|
}),
|
|
|
- created() {},
|
|
|
- computed: {},
|
|
|
- methods: {},
|
|
|
+ created() {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ id() {
|
|
|
+ return this.$route.query.id;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions(['fetch']),
|
|
|
+ async search() {
|
|
|
+ let res = await this.fetch(this.id);
|
|
|
+ res.data.status = parseInt(res.data.status);
|
|
|
+ // this.$set(this, `dealDetails`, res.data);
|
|
|
+ console.log(res);
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -47,4 +74,71 @@ export default {
|
|
|
min-height: 600px;
|
|
|
margin: 30px 0;
|
|
|
}
|
|
|
+.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%;
|
|
|
+}
|
|
|
+.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>
|