11

src/views/dynamic/index.vue

@@ -21,7 +21,8 @@
             <el-image :src="centerImage"></el-image>
           </el-col>
           <el-col :span="24" class="dealShow">
-            <el-col :span="24" class="dealInfo">
+            <gzcy :list="gzcyList"></gzcy>
+            <!-- <el-col :span="24" class="dealInfo">
               <el-col :span="1" class="dealInfoTit">
                 <p>交易动态</p>
                 <p></p>
@@ -33,7 +34,7 @@
                 <p></p>
                 <p>交易动态</p>
               </el-col>
-            </el-col>
+            </el-col> -->
           </el-col>
         </div>
       </el-col>
@@ -46,12 +47,42 @@ import userTwo from './parts/userTwo.vue';
 import pie from './parts/down-pie.vue';
 // import topRight from './parts/top-right.vue';
 import maps from './parts/map.vue';
+// 公众参与
+import gzcy from './parts/gzcy.vue';
+
 export default {
   name: 'index',
   props: {},
-  components: { userTwo, maps, pie },
+  components: { userTwo, maps, gzcy },
   data: () => ({
     centerImage: require('@/assets/dynamic5.png'),
+    // 公众参与
+    gzcyList: [
+      {
+        url: require('@a/zhfw.png'),
+        title: '展会服务',
+      },
+      {
+        url: require('@a/fb.png'),
+        title: '我要发布',
+      },
+      {
+        url: require('@a/zxzx.png'),
+        title: '在线咨询',
+      },
+      {
+        url: require('@a/jy.png'),
+        title: '建言献策',
+      },
+      {
+        url: require('@a/wsdc.png'),
+        title: '网上调查',
+      },
+      {
+        url: require('@a/lbyx.png'),
+        title: '举报邮箱',
+      },
+    ],
   }),
   created() {},
   computed: {},
@@ -226,75 +257,77 @@ export default {
   height: 140px;
 }
 .dealShow {
-  float: left;
   width: 100%;
-  height: 500px;
   overflow: hidden;
-}
-.dealShow .top {
-  float: left;
-  width: 100%;
-  height: 1px;
-}
-.dealShow .top span {
-  float: right;
-  width: 30%;
-  height: 1px;
-  background: #9cb9cb;
-}
-.dealShow .down span {
-  float: left;
-  width: 35%;
-  height: 1px;
-  background: #9cb9cb;
-}
-.dealShow .dealInfo {
-  float: left;
-  width: 100%;
-  height: 489px;
-}
-.dealShow .dealInfo .dealInfoTit {
-  width: 20px;
-  height: 496px;
-}
-.dealShow .dealInfo .dealInfoTit p:first-child {
-  float: left;
-  width: 100%;
-  height: 100px;
-  font-size: 18px;
-  color: #003e70;
-  font-weight: bold;
-}
-.dealShow .dealInfo .dealInfoTit p:last-child {
-  float: left;
-  width: 2px;
-  height: 395px;
-  background: #003e70;
-  margin: 0;
-  position: relative;
-  left: 5px;
-}
-.dealShow .dealInfo .dealInfoTitTwo p:first-child {
-  float: left;
-  width: 2px;
-  height: 395px;
-  background: #003e70;
-  margin: 0;
-  position: relative;
-  left: 10px;
-}
-.dealShow .dealInfo .dealInfoTitTwo p:last-child {
-  float: left;
-  width: 100%;
-  height: 100px;
-  font-size: 18px;
-  color: #003e70;
-  font-weight: bold;
-  background: transparent;
-}
-.dealShow .dealInfo .dealInfoLeft {
-  height: 495px;
-  margin: 0 15px;
-  padding: 45px 0;
-}
+  height: 525px;
+  box-shadow: 0 0 10px #2d64b3;
+  border-radius: 10px;
+  margin: 15px 0 0 0;
+}
+// .dealShow .top {
+//   float: left;
+//   width: 100%;
+//   height: 1px;
+// }
+// .dealShow .top span {
+//   float: right;
+//   width: 30%;
+//   height: 1px;
+//   background: #9cb9cb;
+// }
+// .dealShow .down span {
+//   float: left;
+//   width: 35%;
+//   height: 1px;
+//   background: #9cb9cb;
+// }
+// .dealShow .dealInfo {
+//   float: left;
+//   width: 100%;
+//   height: 489px;
+// }
+// .dealShow .dealInfo .dealInfoTit {
+//   width: 20px;
+//   height: 496px;
+// }
+// .dealShow .dealInfo .dealInfoTit p:first-child {
+//   float: left;
+//   width: 100%;
+//   height: 100px;
+//   font-size: 18px;
+//   color: #003e70;
+//   font-weight: bold;
+// }
+// .dealShow .dealInfo .dealInfoTit p:last-child {
+//   float: left;
+//   width: 2px;
+//   height: 395px;
+//   background: #003e70;
+//   margin: 0;
+//   position: relative;
+//   left: 5px;
+// }
+// .dealShow .dealInfo .dealInfoTitTwo p:first-child {
+//   float: left;
+//   width: 2px;
+//   height: 395px;
+//   background: #003e70;
+//   margin: 0;
+//   position: relative;
+//   left: 10px;
+// }
+// .dealShow .dealInfo .dealInfoTitTwo p:last-child {
+//   float: left;
+//   width: 100%;
+//   height: 100px;
+//   font-size: 18px;
+//   color: #003e70;
+//   font-weight: bold;
+//   background: transparent;
+// }
+// .dealShow .dealInfo .dealInfoLeft {
+//   height: 495px;
+//   margin: 0 15px;
+//   padding: 45px 0;
+// }
 </style>

src/views/dynamic/parts/gzcy.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="gzcy">
+    <el-row>
+      <el-col :span="24" class="gzcy">
+        <el-col :span="24" class="top">
+          <el-col :span="20" class="topLeft">
+            <span></span>
+            <span>公众参与</span>
+          </el-col>
+          <el-col :span="4" class="topRight" style="display:none;">
+            <i class="el-icon-more"></i>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="8" class="list" v-for="(item, index) in list" :key="index">
+            <el-image :src="item.url" style="width:150px;height:130px"></el-image>
+            <p>{{ item.title }}</p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'gzcy',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.gzcy {
+  // 公用栏目名称样式
+  padding: 0 20px;
+  .top {
+    height: 50px;
+    line-height: 50px;
+    border-bottom: 1px solid #ccc;
+    margin: 0 0 15px 0;
+    .topLeft {
+      span:nth-child(1) {
+        display: inline-block;
+        width: 4px;
+        height: 20px;
+        background: #005293;
+        margin: 0px 10px 0 0;
+        position: relative;
+        top: 3px;
+      }
+      span:nth-child(2) {
+        font-size: 20px;
+        color: #005293;
+      }
+    }
+    .topRight {
+      text-align: right;
+    }
+  }
+  .info {
+    .list {
+      text-align: center;
+      background: #f1f1f1;
+      margin: 0 30px 15px 0;
+      width: 365px;
+      p {
+        height: 40px;
+        line-height: 40px;
+        background: #13227a;
+        font-size: 18px;
+        color: #fff;
+      }
+      .el-image {
+        margin: 20px 0;
+      }
+    }
+    .list:nth-child(3n) {
+      margin: 0 0 15px 0;
+    }
+    .list:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>