更新

src/views/dynamic/index copy.vue

@@ -0,0 +1,242 @@
+<template>
+  <div id="index">
+    <el-col :span="24" class="main">
+      <el-col :span="12" class="left">
+        <el-col :span="1" class="leftTitle">
+          <p>展<br />示<br />成<br />果</p>
+          <p></p>
+        </el-col>
+        <el-col :span="23" class="infoLeft">
+          <el-table :data="resultTable" stripe style="width: 96%" border>
+            <el-table-column prop="time" label="时间"> </el-table-column>
+            <el-table-column prop="name" label="项目名称" :show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="sell_unit" label="营销单位" :show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="buy_unit" label="采购单位" :show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="24" class="leftListDown"><span></span><span @click="turnToList('展示成果')">MORE</span></el-col>
+      </el-col>
+      <el-col :span="12" class="right">
+        <el-col :span="24" class="rightListTop"><span @click="turnToList('达成意愿')">MORE</span><span></span></el-col>
+        <el-col :span="23" class="infoRight">
+          <el-table :data="willTable" stripe style="width: 96%" border>
+            <el-table-column prop="time" label="时间"> </el-table-column>
+            <el-table-column prop="name" label="项目名称" :show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="sell_unit" label="营销单位" :show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="buy_unit" label="采购单位" :show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="1" class="rightTitle">
+          <p></p>
+          <p>达<br />成<br />意<br />愿</p>
+        </el-col>
+      </el-col>
+      <el-col :span="24">
+        <el-image :src="dongtaiImage" class="dongtaiImage"></el-image>
+      </el-col>
+      <el-col :span="12" class="left">
+        <el-col :span="1" class="leftTitle">
+          <p>洽<br />谈<br />合<br />作</p>
+          <p></p>
+        </el-col>
+        <el-col :span="23" class="infoRight">
+          <el-table :data="cooperationTable" stripe style="width: 96%" border>
+            <el-table-column prop="time" label="时间"> </el-table-column>
+            <el-table-column prop="name" label="项目名称" :show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="sell_unit" label="营销单位" :show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="buy_unit" label="采购单位" :show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="24" class="leftListDown"><span></span><span @click="turnToList('洽谈合作')">MORE</span></el-col>
+      </el-col>
+      <el-col :span="12" class="right">
+        <el-col :span="24" class="rightListTop"><span @click="turnToList('发布需求')">MORE</span><span></span></el-col>
+        <el-col :span="23" class="infoLeft">
+          <el-table :data="demandTable" stripe style="width: 96%" border>
+            <el-table-column prop="time" label="时间"> </el-table-column>
+            <el-table-column prop="name" label="项目名称" :show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="sell_unit" label="营销单位" :show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="buy_unit" label="采购单位" :show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="1" class="rightTitle">
+          <p></p>
+          <p>发<br />布<br />需<br />求</p>
+        </el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: () => ({
+    dongtaiImage: require('@/assets/live/main2.png'),
+    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() {},
+  computed: {
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+
+  methods: {
+    turnToList(column_name) {
+      this.$router.push({ path: '/dynamic/list', query: { column_name: column_name } });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.dongtaiImage {
+  width: 100%;
+  height: 100%;
+}
+.main {
+  width: 80%;
+  margin: 0 auto;
+  float: none;
+}
+.left {
+  float: left;
+  height: 500px;
+  margin: 30px 0 30px 0;
+  overflow: hidden;
+}
+.leftTitle {
+  text-align: center;
+  position: relative;
+}
+.leftTitle p:first-child {
+  font-size: 18px;
+  color: #044b79;
+  font-weight: bold;
+}
+.leftTitle p:last-child {
+  float: left;
+  width: 2px;
+  height: 402px;
+  background-color: #044b79;
+  margin: 0 5px;
+  position: absolute;
+  left: 9px;
+}
+.infoLeft {
+  height: 480px;
+  padding: 0 10px;
+}
+.leftListDown {
+  position: relative;
+}
+.leftListDown span:first-child {
+  display: inline-block;
+  width: 80%;
+  height: 3px;
+  background: rgba(4, 75, 121, 0.37);
+  margin: 0 10px 0 0;
+  position: absolute;
+  left: -10px;
+  top: 10px;
+}
+.leftListDown span:last-child {
+  font-size: 16px;
+  float: right;
+  padding: 0 15px 0 0;
+  color: #044b79;
+  font-weight: 700;
+  cursor: pointer;
+}
+.right {
+  float: right;
+  height: 500px;
+  overflow: hidden;
+  margin: 30px 0 30px 0;
+}
+.rightListTop {
+  position: relative;
+}
+.rightListTop span:first-child {
+  font-size: 16px;
+  float: left;
+  padding: 0 0 0 15px;
+  color: #044b79;
+  font-weight: 700;
+  cursor: pointer;
+}
+.rightListTop span:last-child {
+  display: inline-block;
+  width: 80%;
+  height: 3px;
+  background: rgba(4, 75, 121, 0.37);
+  margin: 0 10px 0 0;
+  position: absolute;
+  right: -10px;
+  top: 10px;
+}
+.infoRight {
+  height: 480px;
+  padding: 0 10px;
+}
+.rightTitle {
+  text-align: center;
+}
+.rightTitle p:first-child {
+  width: 2px;
+  height: 370px;
+  background: #044b79;
+  position: relative;
+  left: 10px;
+  top: -20px;
+}
+.rightTitle p:last-child {
+  font-size: 18px;
+  font-weight: bold;
+  color: #044b79;
+}
+/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;
+  top: 10px;
+}
+</style>

src/views/dynamic/index.vue

@@ -1,70 +1,33 @@
 <template>
   <div id="index">
-    <el-col :span="24" class="main">
-      <el-col :span="12" class="left">
-        <el-col :span="1" class="leftTitle">
-          <p>展<br />示<br />成<br />果</p>
-          <p></p>
-        </el-col>
-        <el-col :span="23" class="infoLeft">
-          <el-table :data="resultTable" stripe style="width: 96%" border>
-            <el-table-column prop="time" label="时间"> </el-table-column>
-            <el-table-column prop="name" label="项目名称" :show-overflow-tooltip="true"> </el-table-column>
-            <el-table-column prop="sell_unit" label="营销单位" :show-overflow-tooltip="true"> </el-table-column>
-            <el-table-column prop="buy_unit" label="采购单位" :show-overflow-tooltip="true"> </el-table-column>
-          </el-table>
-        </el-col>
-        <el-col :span="24" class="leftListDown"><span></span><span @click="turnToList('展示成果')">MORE</span></el-col>
+    <el-row>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="24" class="dataShow">
+            <el-col :span="24" class="top">
+              统计监测
+            </el-col>
+            <el-col :span="8" class="user">
+              平台用户，在线用户
+            </el-col>
+            <el-col :span="8" class="city">
+              举办展示次数，按地区
+            </el-col>
+            <el-col :span="8" class="data">
+              正在洽谈，达成意向，交易成功
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="dealShow">
+            <el-col :span="24" class="top">
+              交易动态
+            </el-col>
+            <el-col :span="24" class="data">
+              数据展示
+            </el-col>
+          </el-col>
+        </div>
       </el-col>
-      <el-col :span="12" class="right">
-        <el-col :span="24" class="rightListTop"><span @click="turnToList('达成意愿')">MORE</span><span></span></el-col>
-        <el-col :span="23" class="infoRight">
-          <el-table :data="willTable" stripe style="width: 96%" border>
-            <el-table-column prop="time" label="时间"> </el-table-column>
-            <el-table-column prop="name" label="项目名称" :show-overflow-tooltip="true"> </el-table-column>
-            <el-table-column prop="sell_unit" label="营销单位" :show-overflow-tooltip="true"> </el-table-column>
-            <el-table-column prop="buy_unit" label="采购单位" :show-overflow-tooltip="true"> </el-table-column>
-          </el-table>
-        </el-col>
-        <el-col :span="1" class="rightTitle">
-          <p></p>
-          <p>达<br />成<br />意<br />愿</p>
-        </el-col>
-      </el-col>
-      <el-col :span="24">
-        <el-image :src="dongtaiImage" class="dongtaiImage"></el-image>
-      </el-col>
-      <el-col :span="12" class="left">
-        <el-col :span="1" class="leftTitle">
-          <p>洽<br />谈<br />合<br />作</p>
-          <p></p>
-        </el-col>
-        <el-col :span="23" class="infoRight">
-          <el-table :data="cooperationTable" stripe style="width: 96%" border>
-            <el-table-column prop="time" label="时间"> </el-table-column>
-            <el-table-column prop="name" label="项目名称" :show-overflow-tooltip="true"> </el-table-column>
-            <el-table-column prop="sell_unit" label="营销单位" :show-overflow-tooltip="true"> </el-table-column>
-            <el-table-column prop="buy_unit" label="采购单位" :show-overflow-tooltip="true"> </el-table-column>
-          </el-table>
-        </el-col>
-        <el-col :span="24" class="leftListDown"><span></span><span @click="turnToList('洽谈合作')">MORE</span></el-col>
-      </el-col>
-      <el-col :span="12" class="right">
-        <el-col :span="24" class="rightListTop"><span @click="turnToList('发布需求')">MORE</span><span></span></el-col>
-        <el-col :span="23" class="infoLeft">
-          <el-table :data="demandTable" stripe style="width: 96%" border>
-            <el-table-column prop="time" label="时间"> </el-table-column>
-            <el-table-column prop="name" label="项目名称" :show-overflow-tooltip="true"> </el-table-column>
-            <el-table-column prop="sell_unit" label="营销单位" :show-overflow-tooltip="true"> </el-table-column>
-            <el-table-column prop="buy_unit" label="采购单位" :show-overflow-tooltip="true"> </el-table-column>
-          </el-table>
-        </el-col>
-        <el-col :span="1" class="rightTitle">
-          <p></p>
-          <p>发<br />布<br />需<br />求</p>
-        </el-col>
-      </el-col>
-    </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -73,170 +36,82 @@ export default {
   name: 'index',
   props: {},
   components: {},
-  data: () => ({
-    dongtaiImage: require('@/assets/live/main2.png'),
-    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: '采购单位' },
-    ],
-  }),
+  data: () => ({}),
   created() {},
-  computed: {
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-
-  methods: {
-    turnToList(column_name) {
-      this.$router.push({ path: '/dynamic/list', query: { column_name: column_name } });
-    },
-  },
+  computed: {},
+  methods: {},
 };
 </script>
 
 <style lang="less" scoped>
-.dongtaiImage {
-  width: 100%;
-  height: 100%;
-}
-.main {
+.w_1200 {
   width: 80%;
   margin: 0 auto;
-  float: none;
 }
-.left {
+.main {
+  float: left;
+  width: 100%;
+  margin: 20px 0;
+  min-height: 600px;
+}
+.dataShow {
   float: left;
+  width: 100%;
   height: 500px;
-  margin: 30px 0 30px 0;
   overflow: hidden;
+  margin: 0 0 30px 0;
+  border: 1px solid red;
 }
-.leftTitle {
-  text-align: center;
-  position: relative;
-}
-.leftTitle p:first-child {
+.dataShow .top {
+  float: left;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
   font-size: 18px;
-  color: #044b79;
+  padding: 0 15px;
   font-weight: bold;
 }
-.leftTitle p:last-child {
-  float: left;
-  width: 2px;
-  height: 402px;
-  background-color: #044b79;
-  margin: 0 5px;
-  position: absolute;
-  left: 9px;
-}
-.infoLeft {
-  height: 480px;
-  padding: 0 10px;
-}
-.leftListDown {
-  position: relative;
+.dataShow .user {
+  width: 32%;
+  height: 460px;
+  overflow: hidden;
+  border: 1px solid red;
+  margin: 0 30px 0 0;
 }
-.leftListDown span:first-child {
-  display: inline-block;
-  width: 80%;
-  height: 3px;
-  background: rgba(4, 75, 121, 0.37);
-  margin: 0 10px 0 0;
-  position: absolute;
-  left: -10px;
-  top: 10px;
+.dataShow .city {
+  width: 32%;
+  height: 460px;
+  overflow: hidden;
+  border: 1px solid red;
+  margin: 0 30px 0 0;
 }
-.leftListDown span:last-child {
-  font-size: 16px;
-  float: right;
-  padding: 0 15px 0 0;
-  color: #044b79;
-  font-weight: 700;
-  cursor: pointer;
+.dataShow .data {
+  width: 32%;
+  height: 460px;
+  overflow: hidden;
+  border: 1px solid red;
+  margin: 0;
 }
-.right {
-  float: right;
+.dealShow {
+  float: left;
+  width: 100%;
   height: 500px;
   overflow: hidden;
-  margin: 30px 0 30px 0;
-}
-.rightListTop {
-  position: relative;
+  border: 1px solid blue;
 }
-.rightListTop span:first-child {
-  font-size: 16px;
+.dealShow .top {
   float: left;
-  padding: 0 0 0 15px;
-  color: #044b79;
-  font-weight: 700;
-  cursor: pointer;
-}
-.rightListTop span:last-child {
-  display: inline-block;
-  width: 80%;
-  height: 3px;
-  background: rgba(4, 75, 121, 0.37);
-  margin: 0 10px 0 0;
-  position: absolute;
-  right: -10px;
-  top: 10px;
-}
-.infoRight {
-  height: 480px;
-  padding: 0 10px;
-}
-.rightTitle {
-  text-align: center;
-}
-.rightTitle p:first-child {
-  width: 2px;
-  height: 370px;
-  background: #044b79;
-  position: relative;
-  left: 10px;
-  top: -20px;
-}
-.rightTitle p:last-child {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
   font-size: 18px;
+  padding: 0 15px;
   font-weight: bold;
-  color: #044b79;
 }
-/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;
-  top: 10px;
+.dealShow .data {
+  height: 460px;
+  overflow: hidden;
+  border: 1px solid red;
+  margin: 0;
 }
 </style>