大中社区底部表格静态完成

shuzhixiangzheng/src/assets/base.css

@@ -107,4 +107,35 @@
 }
 .el-pagination__jump{
   color: #fff !important;
+}
+
+/* 大中社区下面的表格 */
+#dezhizhaihaiPage .el-table__body-wrapper{
+  height: 160px;
+  overflow-y: auto;
+}
+
+/* 滚动条样式 */
+#dezhizhaihaiPage .el-table__body-wrapper::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 2px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+  }
+  #dezhizhaihaiPage .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #0b61c5;
+  }
+  #dezhizhaihaiPage .el-table__body-wrapper::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background   : #ededed;
+  }
+  #dezhizhaihaiPage .el-table .el-table__cell{
+    text-align: left !important;
+  }
+#dezhizhaihaiPage .el-table .el-table__cell {
+  padding: 5px 0;
 }

shuzhixiangzheng/src/components/OtherChilds/Dezhizhaihai.vue

@@ -1,39 +1,110 @@
 <template>
-    <div id="dezhizhaihaiPage">
-        <div ></div>
+  <div id="dezhizhaihaiPage">
+    <div class="table">
+      <el-table
+        :header-cell-style="{
+          background: '#0b61c5',
+          color: '#fff',
+          'font-weight': 700,
+        }"
+        :data="data"
+        style="width: 100%"
+      >
+        <el-table-column label="灾害点名称">
+          <template #default="{ row }">
+            <div class="rowOne" :title="row.name">{{ row.name }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" width="100">
+          <template #default="{ row }">
+            <div class="rowTow" :title="row.type">{{ row.type }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="影响人口" width="80">
+          <template #default="{ row }">
+            <div class="rowThree" :title="row.num">{{ row.num }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
-  </template>
+  </div>
+</template>
   
   <script>
-    export default {
-      name: 'dezhizhaihaiPage',
-      components: {
-      },
-      data() {
-        return {
-         
-        }
-      },
-      mounted() {
-        
-      },
-      methods: {
-        
-      }
-    }
-  
-  </script>
+export default {
+  name: "dezhizhaihaiPage",
+  components: {},
+  data() {
+    return {
+      data: [
+        {
+          id: 1,
+          name: "月亮山东路水务局宿舍等13户屋后滑坡",
+          type: "滑坡",
+          num: 48.0,
+        },
+        { id: 2, name: "金湾666666666", type: "滑坡隐患点", num: 32.0 },
+        {
+          id: 3,
+          name: "月亮山东路水务局宿舍等13户屋后滑坡",
+          type: "滑坡",
+          num: 48.0,
+        },
+        { id: 4, name: "金湾666666666", type: "滑坡隐患点", num: 32.0 },
+        {
+          id: 5,
+          name: "月亮山东路水务局宿舍等13户屋后滑坡",
+          type: "滑坡",
+          num: 48.0,
+        },
+        { id: 6, name: "金湾666666666", type: "滑坡隐患点", num: 32.0 },
+        {
+          id: 7,
+          name: "月亮山东路水务局宿舍等13户屋后滑坡",
+          type: "滑坡",
+          num: 48.0,
+        },
+        { id: 8, name: "金湾666666666", type: "滑坡隐患点", num: 32.0 },
+      ],
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
   
   
   <style scoped>
- 
-  #dezhizhaihaiPage{
-      position: absolute;
-      width: 100%;
-      height: 25%;
-      z-index: 2;
-      top:75%;
-      /* background-color: rgb(0, 0, 255,0.4); */
-  }
-  </style>
+#dezhizhaihaiPage {
+  position: absolute;
+  width: 100%;
+  height: 25%;
+  z-index: 2;
+  top: 75%;
+  /* background-color: rgb(0, 0, 255,0.4); */
+}
+#dezhizhaihaiPage .table {
+  width: 90%;
+  height: 100%;
+  margin: 12px auto 0;
+}
+#dezhizhaihaiPage .rowOne {
+  width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#dezhizhaihaiPage .rowTow {
+  width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#dezhizhaihaiPage .rowThree {
+  width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>