动态监测

src/views/live/dynamic/index.vue

@@ -3,10 +3,42 @@
     <div class="w_0100">
       <div class="w_1200">
         <div class="dynamicmain">
-          <el-col :span="12">展示成果</el-col>
-          <el-col :span="12">达成意愿</el-col>
-          <el-col :span="12">洽谈合作</el-col>
-          <el-col :span="12">发布需求</el-col>
+          <el-col :span="12" class="left"
+            ><el-col :span="12" class="left_title"><span>展示成果</span><span>MORE</span></el-col>
+            <el-table :data="resultTable" stripe style="width: 96%" border>
+              <el-table-column prop="time" label="时间"> </el-table-column>
+              <el-table-column prop="name" label="项目名称"> </el-table-column>
+              <el-table-column prop="sell_unit" label="营销单位"> </el-table-column>
+              <el-table-column prop="buy_unit" label="采购单位"> </el-table-column>
+            </el-table>
+          </el-col>
+          <el-col :span="12" class="left"
+            ><el-col :span="12" class="left_title"><span>达成意愿</span><span>MORE</span></el-col>
+            <el-table :data="willTable" stripe style="width: 96%" border>
+              <el-table-column prop="time" label="时间"> </el-table-column>
+              <el-table-column prop="name" label="项目名称"> </el-table-column>
+              <el-table-column prop="sell_unit" label="营销单位"> </el-table-column>
+              <el-table-column prop="buy_unit" label="采购单位"> </el-table-column>
+            </el-table>
+          </el-col>
+          <el-col :span="12" class="left"
+            ><el-col :span="12" class="left_title"><span>洽谈合作</span><span>MORE</span></el-col>
+            <el-table :data="cooperationTable" stripe style="width: 96%" border>
+              <el-table-column prop="time" label="时间"> </el-table-column>
+              <el-table-column prop="name" label="项目名称"> </el-table-column>
+              <el-table-column prop="sell_unit" label="营销单位"> </el-table-column>
+              <el-table-column prop="buy_unit" label="采购单位"> </el-table-column>
+            </el-table>
+          </el-col>
+          <el-col :span="12" class="left"
+            ><el-col :span="12" class="left_title"><span>发布需求</span><span>MORE</span></el-col>
+            <el-table :data="demandTable" stripe style="width: 96%" border>
+              <el-table-column prop="time" label="时间"> </el-table-column>
+              <el-table-column prop="name" label="项目名称"> </el-table-column>
+              <el-table-column prop="sell_unit" label="营销单位"> </el-table-column>
+              <el-table-column prop="buy_unit" label="采购单位"> </el-table-column>
+            </el-table>
+          </el-col>
         </div>
       </div>
     </div>
@@ -20,7 +52,32 @@ export default {
   props: {},
   components: {},
   data: () => {
-    return {};
+    return {
+      resultTable: [
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      ],
+      willTable: [
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+        { time: '2020-5-10', name: '十条数据', sell_unit: '营销单位', buy_unit: '采购单位' },
+      ],
+      cooperationTable: [
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+        { time: '2020-5-10', name: '十条数据', sell_unit: '营销单位', buy_unit: '采购单位' },
+      ],
+      demandTable: [
+        { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+        { time: '2020-5-10', name: '十条数据', sell_unit: '营销单位', buy_unit: '采购单位' },
+      ],
+    };
   },
   created() {},
   methods: {},
@@ -36,4 +93,40 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.left {
+  box-shadow: 0 0 10px #2d64b3;
+  width: 580px;
+  margin: 10px 10px;
+  min-height: 500px;
+}
+.left_title {
+  font-size: 18px;
+  color: #22529a;
+  line-height: 35px;
+  // border-bottom: 1px solid #e5e5e5;
+  width: 96%;
+  margin: 10px 10px 0 10px;
+}
+.left_title span:first-child {
+  margin: 0 10px;
+}
+.left_title span:last-child {
+  float: right;
+  margin: 0 10px;
+}
+/deep/.el-table td {
+  text-align: center;
+  padding: 0;
+  height: 40px;
+}
+/deep/.el-table th {
+  text-align: center;
+  padding: 0;
+  height: 40px;
+}
+/deep/ .el-table {
+  // min-height: 500px;
+  margin: 0 10px 10px 10px;
+}
+</style>