人员详情-居民需求模块开发2

src/assets/scss/modules/visual/c/common.scss

@@ -0,0 +1,19 @@
+@mixin scrollBar {
+    &::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+        border-radius: 8px;
+        box-shadow: inset 0 0 5px rgba(#00023f, 0.2);
+        background: linear-gradient(270deg, #0063fe, #0095ff);
+    }
+    &::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        box-shadow: inset 0 0 5px rgba(#00023f, 0.2);
+        border-radius: 8px;
+        background: darken(#0c81fe, 20);
+    }
+}

src/assets/scss/modules/visual/people.scss

@@ -1,5 +1,6 @@
 @import "../../c/config";
 @import "../../c/function";
+@import "./c/common";
 
 .g-cpt {
     display: flex;
@@ -452,6 +453,44 @@
             display: block;
         }
     }
+    .tb {
+        height: 300px;
+        overflow-y: scroll;
+        @include scrollBar;
+    }
+}
+
+.m-row {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+
+    .m-list {
+        width: calc(50% - 3px);
+
+        .title {
+            padding: 10px;
+            font-size: 22px;
+            font-family: PingFang SC;
+            font-weight: 800;
+            color: #ffffff;
+            display: flex;
+            align-items: center;
+
+            img {
+                display: block;
+                margin-right: 5px;
+            }
+            span {
+                display: block;
+            }
+        }
+        .list {
+            height: 480px;
+            overflow-y: scroll;
+            @include scrollBar;
+        }
+    }
 }
 
 .m-pagination {

src/views/modules/visual/basicinfo/people.vue

@@ -300,6 +300,7 @@
 
           <div class="tb">
             <cpt-tb
+              :col-list="demand.colList"
               :loading="demand.loading"
               :header="demand.header"
               :list="demand.list"
@@ -319,6 +320,28 @@
           </div>
         </cpt-card>
       </div>
+
+      <div class="m-row">
+        <div class="m-list">
+          <cpt-card>
+            <div class="title">
+              <img src="@/assets/img/shuju/title-tip.png" />
+              <span>上报事件</span>
+            </div>
+            <div class="list"></div>
+          </cpt-card>
+        </div>
+
+        <div class="m-list">
+          <cpt-card>
+            <div class="title">
+              <img src="@/assets/img/shuju/title-tip.png" />
+              <span>积分记录</span>
+            </div>
+            <div class="list"></div>
+          </cpt-card>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -362,6 +385,32 @@ export default {
 
       demand: {
         loading: true,
+        colList: [
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "15%",
+          },
+          {
+            align: "center",
+            width: "15%",
+          },
+          {
+            align: "center",
+            width: "40%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+        ],
         header: ["序号", "服务时间", "需求类型", "需求内容", "状态", "操作"],
         list: [],
         pageSize: 5,
@@ -462,7 +511,6 @@ export default {
         pageSize: this.demand.pageSize,
       };
 
-      this.demand.loading = true;
       const { data, code, msg } = await requestPost(url, params);
       this.demand.loading = false;
 

src/views/modules/visual/cpts/tb.vue

@@ -1,11 +1,20 @@
 <template>
   <div class="m-table">
     <table class="table" border="0" cellspacing="0" cellpadding="0">
-      <tr class="table-header">
+      <col
-        <th class="table-header-th" v-for="item in header" :key="item">
+        :align="item.align"
-          {{ item }}
+        :width="item.width"
-        </th>
+        :key="'col' + index"
-      </tr>
+        v-for="(item, index) in colList"
+      />
+
+      <thead>
+        <tr class="table-header">
+          <th class="table-header-th" v-for="item in header" :key="item">
+            {{ item }}
+          </th>
+        </tr>
+      </thead>
       <tbody class="table-body">
         <tr class="table-body-tr" v-for="(value, index) in list" :key="index">
           <td class="td" v-for="(item, indexs) in value" :key="indexs">
@@ -52,6 +61,17 @@ export default {
     ScreenLoading,
   },
   props: {
+    colList: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   align: "center",
+          //   width: "50%",
+          // },
+        ];
+      },
+    },
     header: {
       type: Array,
       required: false,
@@ -166,17 +186,18 @@ export default {
   }
 
   .table-status {
-    height: 200px;
+    position: relative;
+    height: 300px;
 
     // 暂无数据
     .no-data {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
       &-img {
-        width: 249px;
+        position: absolute;
-        height: 172px;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
       }
     }
   }