动态监测

src/style/style.css

@@ -1509,160 +1509,6 @@ p {
 /* 动态监测开始 */
 /* 动态监测top+down取于科技超市,无需改动 */
 /* 动态监测主体开始 */
-.dynamicmain {
-	height: 300px;
-}
-
-.dynamicinfo1 {
-	box-shadow: 0 0 10px #2d64b3;
-	border-radius: 10px;
-	margin: 10px 20px 0 0;
-	width: 565px;
-	float: left;
-	height: 448px;
-	overflow: hidden;
-	background: #fff;
-}
-
-.dynamicinfo2 {
-	box-shadow: 0 0 10px #2d64b3;
-	border-radius: 10px;
-	margin: 10px 0 20px 0;
-	width: 615px;
-	float: left;
-	height: 448px;
-	overflow: hidden;
-	background: #fff;
-}
-
-.dynamicmaintitle {
-	font-size: 18px;
-	color: #22529a;
-	padding: 20px 20px 0 20px;
-}
-
-.dynamicmore {
-	float: right;
-}
-
-.dynamictables {
-	padding: 0 10px;
-	float: left;
-	height: 394px;
-	overflow: hidden;
-}
-
-.dynamictable {
-	margin: -10px 0 0 0;
-}
-
-.dynamictable td,
-th {
-	border: 1px solid #cad9ea;
-	color: #666;
-	height: 34px;
-	text-align: center;
-	width: 134px;
-}
-
-.dynamictable tr:hover td {
-	background-color: #005293;
-	color: #ffffff;
-}
-
-.dynamictable2 tr:hover td {
-	background-color: #005293;
-	color: #ffffff;
-}
-
-.dynamictable3 tr:hover td {
-	background-color: #005293;
-	color: #ffffff;
-}
-
-.dynamictable thead th {
-	background-color: #CCE8EB;
-	width: 100px;
-}
-
-.dynamictable tr:nth-child(odd) {
-	background: #fff;
-}
-
-.dynamictable tr:nth-child(even) {
-	background: #F5FAFA;
-}
-
-.dynamictable2 {
-	margin: -10px 0 0 0;
-}
-
-.dynamictable2 td,
-th {
-	border: 1px solid #cad9ea;
-	color: #666;
-	height: 34px;
-	text-align: center;
-	width: 147px;
-}
-
-.dynamictable2 thead th {
-	background-color: #CCE8EB;
-	width: 100px;
-}
-
-.dynamictable2 tr:nth-child(odd) {
-	background: #fff;
-}
-
-.dynamictable2 tr:nth-child(even) {
-	background: #F5FAFA;
-}
-
-.dynamictables3 {
-	padding: 0 10px;
-	float: left;
-	height: 405px;
-	overflow: hidden;
-	width: 1180px;
-}
-
-.dynamictable3 {
-	margin: -10px 0 0 0;
-}
-
-.dynamictable3 td,
-th {
-	border: 1px solid #cad9ea;
-	color: #666;
-	height: 34px;
-	text-align: center;
-	width: 293px;
-}
-
-.dynamictable3 thead th {
-	background-color: #CCE8EB;
-	width: 100px;
-}
-
-.dynamictable3 tr:nth-child(odd) {
-	background: #fff;
-}
-
-.dynamictable3 tr:nth-child(even) {
-	background: #F5FAFA;
-}
-
-.dynamicinfo3 {
-	box-shadow: 0 0 10px #2d64b3;
-	border-radius: 10px;
-	margin: 10px 0 10px 0;
-	height: 465px;
-	float: left;
-	overflow: hidden;
-	width: 1200px;
-	background: #fff;
-}
 
 
 /* 动态监测主体结束 */

src/views/live/dynamic/index.vue

@@ -3,284 +3,10 @@
     <div class="w_0100">
       <div class="w_1200">
         <div class="dynamicmain">
-          <div class="one">
-            <div class="dynamicinfo1">
-              <div class="dynamicmaintitle"><span> 对项目的交易</span><span class="dynamicmore">MORE</span></div>
-
-              <div class="dynamictables">
-                <table class="dynamictable">
-                  <tr>
-                    <th>营销单位</th>
-                    <th>采购单位</th>
-                    <th>产品交易</th>
-                    <th>交易状态</th>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-
-            <div class="dynamicinfo2">
-              <div class="dynamicmaintitle"><span> 未交易</span><span class="dynamicmore">MORE</span></div>
-
-              <div class="dynamictables">
-                <table class="dynamictable2">
-                  <tr>
-                    <th>营销单位</th>
-                    <th>采购单位</th>
-                    <th>产品交易</th>
-                    <th>交易状态</th>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                  <tr>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                    <td>312321</td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-            <div>
-              <div class="dynamicinfo3">
-                <div class="dynamicmaintitle"><span> 未交易</span><span class="dynamicmore">MORE</span></div>
-                <div class="dynamictables3">
-                  <table class="dynamictable3">
-                    <tr>
-                      <th>营销单位</th>
-                      <th>采购单位</th>
-                      <th>产品交易</th>
-                      <th>交易状态</th>
-                    </tr>
-                    <tr>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                    </tr>
-                    <tr>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                    </tr>
-                    <tr>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                    </tr>
-                    <tr>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                    </tr>
-                    <tr>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                    </tr>
-                    <tr>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                    </tr>
-                    <tr>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                    </tr>
-                    <tr>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                    </tr>
-                    <tr>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                    </tr>
-                    <tr>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                    </tr>
-
-                    <tr>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                    </tr>
-                    <tr>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                      <td>312321</td>
-                    </tr>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
+          <el-col :span="12">展示成果</el-col>
+          <el-col :span="12">达成意愿</el-col>
+          <el-col :span="12">洽谈合作</el-col>
+          <el-col :span="12">发布需求</el-col>
         </div>
       </div>
     </div>

src/views/live/service/index.vue

@@ -7,37 +7,31 @@
             <div class="infoleft">
               <div class="lefttop"><span class="title"> |</span> 政务公开</div>
               <ul>
-                <li><img :src="img1" /></li>
-                <li><img :src="img2" /></li>
-                <li><img :src="img3" /></li>
-                <li><img :src="img4" /></li>
-                <li><img :src="img5" /></li>
-                <li><img :src="img6" /></li>
-                <li><img :src="img7" /></li>
-                <li><img :src="img8" /></li>
+                <li v-for="(item, index) in zhengwuList" :key="index">
+                  <a href="">
+                    <el-image :src="item.pic"></el-image>
+                  </a>
+                </li>
               </ul>
             </div>
             <div class="inforight">
               <div class="lefttop"><span class="title"> |</span> 常用服务</div>
               <ul>
-                <li><img :src="img9" /></li>
-                <li><img :src="img10" /></li>
-                <li><img :src="img11" /></li>
-                <li><img :src="img12" /></li>
-                <li><img :src="img13" /></li>
-                <li><img :src="img14" /></li>
+                <li v-for="(item, index) in serviceList" :key="index">
+                  <a href="">
+                    <el-image :src="item.pic"></el-image>
+                  </a>
+                </li>
               </ul>
             </div>
-
             <div class="infocontext">
               <div class="contexttop"><span class="title"> |</span> 公众参与</div>
               <ul>
-                <li><img :src="img15" class="newimg" /></li>
-                <li><img :src="img16" class="newimg" /></li>
-                <li><img :src="img17" class="newimg" /></li>
-                <li><img :src="img18" class="newimg" /></li>
-                <li><img :src="img19" class="newimg" /></li>
-                <li><img :src="img20" class="newimg" /></li>
+                <li v-for="(item, index) in gongzhongList" :key="index">
+                  <a href="">
+                    <el-image :src="item.pic"></el-image>
+                  </a>
+                </li>
               </ul>
             </div>
           </div>
@@ -55,27 +49,75 @@ export default {
   components: {},
   data: () => {
     return {
-      img: require('@/assets/live/测试图片.jpg'),
-      img1: require('@/assets/live/zhengwu1.jpg'),
-      img2: require('@/assets/live/zhengwu2.jpg'),
-      img3: require('@/assets/live/zhengwu3.jpg'),
-      img4: require('@/assets/live/zhengwu4.jpg'),
-      img5: require('@/assets/live/zhengwu5.jpg'),
-      img6: require('@/assets/live/zhengwu6.jpg'),
-      img7: require('@/assets/live/zhengwu7.jpg'),
-      img8: require('@/assets/live/zhengwu8.jpg'),
-      img9: require('@/assets/live/changyong1.jpg'),
-      img10: require('@/assets/live/changyong2.jpg'),
-      img11: require('@/assets/live/changyong3.jpg'),
-      img12: require('@/assets/live/changyong4.jpg'),
-      img13: require('@/assets/live/changyong5.jpg'),
-      img14: require('@/assets/live/changyong6.jpg'),
-      img15: require('@/assets/live/gongzhong1.jpg'),
-      img16: require('@/assets/live/gongzhong2.jpg'),
-      img17: require('@/assets/live/gongzhong3.jpg'),
-      img18: require('@/assets/live/gongzhong4.jpg'),
-      img19: require('@/assets/live/gongzhong5.jpg'),
-      img20: require('@/assets/live/gongzhong6.jpg'),
+      // 政务公开
+      zhengwuList: [
+        {
+          pic: require('@/assets/live/zhengwu1.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu2.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu3.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu4.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu5.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu6.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu7.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu8.jpg'),
+        },
+      ],
+      // 常用服务
+      serviceList: [
+        {
+          pic: require('@/assets/live/changyong1.jpg'),
+        },
+        {
+          pic: require('@/assets/live/changyong2.jpg'),
+        },
+        {
+          pic: require('@/assets/live/changyong3.jpg'),
+        },
+        {
+          pic: require('@/assets/live/changyong4.jpg'),
+        },
+        {
+          pic: require('@/assets/live/changyong5.jpg'),
+        },
+        {
+          pic: require('@/assets/live/changyong6.jpg'),
+        },
+      ],
+      // 公众参与
+      gongzhongList: [
+        {
+          pic: require('@/assets/live/gongzhong1.jpg'),
+        },
+        {
+          pic: require('@/assets/live/gongzhong2.jpg'),
+        },
+        {
+          pic: require('@/assets/live/gongzhong3.jpg'),
+        },
+        {
+          pic: require('@/assets/live/gongzhong4.jpg'),
+        },
+        {
+          pic: require('@/assets/live/gongzhong5.jpg'),
+        },
+        {
+          pic: require('@/assets/live/gongzhong6.jpg'),
+        },
+      ],
     };
   },
   created() {},
@@ -119,12 +161,12 @@ export default {
   position: relative;
   bottom: 1px;
   margin: 10px 10px 20px 10px;
+  font-size: 18px;
 }
 .title {
   padding: 0px 0 1px 1px;
   background: #005293;
 }
-
 .infoleft ul li {
   float: left;
   width: 120px;
@@ -154,6 +196,7 @@ export default {
   position: relative;
   bottom: 1px;
   margin: 10px 10px 20px 10px;
+  font-size: 18px;
 }
 
 .infocontext ul li {
@@ -161,7 +204,6 @@ export default {
   width: 185px;
   height: 146px;
   margin: 0px 0px 0 13px;
-  // margin: 0 13px 15px 14px;
 }
 .newimg {
   width: 185px;