Merge pull request '分页样式统一更换封装组件' (#138) from lukeyan into master

Reviewed-on: #138

src/components/publicModule/lkyPagination.vue

@@ -74,6 +74,7 @@ export default {
   height: 5vh;
   display: flex;
   flex-direction: row-reverse;
+  margin-top: 1vh;
   /deep/.el-pagination.is-background .btn-next,
   /deep/.el-pagination.is-background .btn-prev,
   /deep/.el-pagination.is-background .el-pager li {

src/components/publicModule/lkyTable.vue

@@ -394,6 +394,7 @@ export default {
   height: 5vh;
   display: flex;
   flex-direction: row-reverse;
+  margin-top: 1vh;
   /deep/.el-pagination.is-background .btn-next,
   /deep/.el-pagination.is-background .btn-prev,
   /deep/.el-pagination.is-background .el-pager li {

src/views/closeLoopDispose/components/backlog.vue

@@ -67,19 +67,15 @@
           </el-table-column>
         </el-table>
         <!-- 分页 -->
-        <div class="table_pagination">
+        <lkyPagination
-          <el-pagination
+          :page_sizes="page_sizes"
-            :background="true"
+          :pageSize="pageSize"
-            @size-change="handleSizeChange"
+          :pageNum="pageNum"
-            @current-change="handleCurrentChange"
+          :total="total"
-            :page-sizes="[5, 10]"
+          :pagination_width="pagination_width"
-            :page-size="pageSize"
+          @size_change="size_change"
-            :current-page="pageNum"
+          @num_change="num_change"
-            layout="total, sizes, prev, pager, next, jumper"
+        ></lkyPagination>
-            :total="total"
-          >
-          </el-pagination>
-        </div>
       </div>
     </div>
   </div>
@@ -126,6 +122,8 @@ export default {
         ],
       },
       table_data: [],
+      page_sizes: [5, 10],
+      pagination_width: "96",
       pageSize: 10,
       pageNum: 1,
       total: 0,
@@ -399,64 +397,4 @@ export default {
     }
   }
 }
-.table_pagination {
-  width: 96vw;
-  height: 5vh;
-  display: flex;
-  flex-direction: row-reverse;
-  /deep/.el-input--suffix .el-input__inner {
-    color: #fff;
-    border: 0.1px solid #277f79;
-    border-radius: 0px;
-    background: rgba(0, 0, 0, 0);
-    width: 5vw;
-    height: 2.6vh;
-    line-height: 2.6vh;
-  }
-  /deep/.el-input__icon {
-    color: #fff;
-    line-height: 2.6vh;
-    height: 2.6vh;
-  }
-  /deep/.el-pagination {
-    margin-top: 1vh;
-    .el-pagination__total {
-      color: #fff;
-    }
-    .el-input__inner {
-      border-radius: 0px;
-      border: 0.1px solid #28847e;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    .btn-prev {
-      border-radius: 0px;
-      border: 0.1px solid #28847e;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    ul {
-      li {
-        border: 0.1px solid #28847e;
-        background: #3c4b4a;
-        color: #fff;
-      }
-    }
-    .btn-next {
-      border: 0.1px solid #28847e;
-      border-radius: 0px;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    .el-pager {
-      li {
-        border: 0.1px solid #28847e;
-        background: #3c4b4a !important;
-      }
-    }
-  }
-  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
-    border: 2px solid #76eae4;
-  }
-}
 </style>

src/views/closeLoopDispose/components/backlogDetailPicture.vue

@@ -60,6 +60,23 @@
         <div class="line_item_one"></div>
         <div class="line_item_two"></div>
       </div>
+      <!-- 流程点 -->
+      <div class="next_point">
+        <div class="next_point_item_one">
+          <div class="next_point_item_one_text">1.转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_two">
+          <div class="next_point_item_two_text">1.转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_three">
+          <div class="next_point_item_three_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+      <!-- 流程线 -->
+      <div class="line_three_i">
+        <div class="line_item_one"></div>
+        <div class="line_item_two"></div>
+      </div>
       <!-- 流程线 -->
       <div class="line_four">
         <div class="line_item"></div>
@@ -208,32 +225,32 @@ export default {
       }
     }
     .line_one {
-      width: 10vw;
+      width: 5vw;
       height: 60vh;
       display: flex;
       justify-content: center;
       align-items: center;
       .line_item {
-        width: 10vw;
+        width: 5vw;
         height: 2px;
         background: #278961;
       }
     }
     .line_two {
-      width: 8vw;
+      width: 4vw;
       height: 60vh;
       display: flex;
       flex-direction: column-reverse;
       justify-content: center;
       .line_item_one {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-left: 2px solid #278961;
         border-bottom: 2px solid #278961;
         border-top: 1px solid #278961;
       }
       .line_item_two {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-left: 2px solid #278961;
         border-top: 2px solid #278961;
@@ -325,20 +342,41 @@ export default {
       }
     }
     .line_three {
-      width: 8vw;
+      width: 4vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: center;
+      .line_item_one {
+        width: 4vw;
+        height: 15vh;
+        // border-right: 2px solid #747b7e;
+        border-bottom: 2px solid #747b7e;
+        border-top: 1px solid #747b7e;
+      }
+      .line_item_two {
+        width: 4vw;
+        height: 15vh;
+        // border-right: 2px solid #747b7e;
+        border-top: 2px solid #747b7e;
+        border-bottom: 1px solid #747b7e;
+      }
+    }
+    .line_three_i {
+      width: 4vw;
       height: 60vh;
       display: flex;
       flex-direction: column-reverse;
       justify-content: center;
       .line_item_one {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-right: 2px solid #747b7e;
         border-bottom: 2px solid #747b7e;
         border-top: 1px solid #747b7e;
       }
       .line_item_two {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-right: 2px solid #747b7e;
         border-top: 2px solid #747b7e;

src/views/closeLoopDispose/components/complete.vue

@@ -84,19 +84,15 @@
           </el-table-column>
         </el-table>
         <!-- 分页 -->
-        <div class="table_pagination">
+        <lkyPagination
-          <el-pagination
+          :page_sizes="page_sizes"
-            :background="true"
+          :pageSize="pageSize"
-            @size-change="handleSizeChange"
+          :pageNum="pageNum"
-            @current-change="handleCurrentChange"
+          :total="total"
-            :page-sizes="[5, 10]"
+          :pagination_width="pagination_width"
-            :page-size="pageSize"
+          @size_change="size_change"
-            :current-page="pageNum"
+          @num_change="num_change"
-            layout="total, sizes, prev, pager, next, jumper"
+        ></lkyPagination>
-            :total="total"
-          >
-          </el-pagination>
-        </div>
       </div>
     </div>
   </div>
@@ -151,6 +147,8 @@ export default {
         ],
       },
       table_data: [],
+      page_sizes: [5, 10],
+      pagination_width: "96",
       pageSize: 10,
       pageNum: 1,
       total: 0,
@@ -278,14 +276,14 @@ export default {
           return "驳回";
       }
     },
-    handleSizeChange(val) {
+    // 分页--每页多少条
-      console.log(`每页 ${val} 条`);
+    size_change(val) {
       this.pageNum = 1;
       this.pageSize = val;
       this.search_data();
     },
-    handleCurrentChange(val) {
+    // 分页--前往哪一页
-      console.log(`当前页: ${val}`);
+    num_change(val) {
       this.pageNum = val;
       this.search_data();
     },
@@ -433,64 +431,4 @@ export default {
     }
   }
 }
-.table_pagination {
-  width: 96vw;
-  height: 5vh;
-  display: flex;
-  flex-direction: row-reverse;
-  /deep/.el-input--suffix .el-input__inner {
-    color: #fff;
-    border: 0.1px solid #277f79;
-    border-radius: 0px;
-    background: rgba(0, 0, 0, 0);
-    width: 5vw;
-    height: 2.6vh;
-    line-height: 2.6vh;
-  }
-  /deep/.el-input__icon {
-    color: #fff;
-    line-height: 2.6vh;
-    height: 2.6vh;
-  }
-  /deep/.el-pagination {
-    margin-top: 1vh;
-    .el-pagination__total {
-      color: #fff;
-    }
-    .el-input__inner {
-      border-radius: 0px;
-      border: 0.1px solid #28847e;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    .btn-prev {
-      border-radius: 0px;
-      border: 0.1px solid #28847e;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    ul {
-      li {
-        border: 0.1px solid #28847e;
-        background: #3c4b4a;
-        color: #fff;
-      }
-    }
-    .btn-next {
-      border: 0.1px solid #28847e;
-      border-radius: 0px;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    .el-pager {
-      li {
-        border: 0.1px solid #28847e;
-        background: #3c4b4a !important;
-      }
-    }
-  }
-  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
-    border: 2px solid #76eae4;
-  }
-}
 </style>

src/views/closeLoopDispose/components/completeDetailPicture.vue

@@ -60,6 +60,23 @@
         <div class="line_item_one"></div>
         <div class="line_item_two"></div>
       </div>
+      <!-- 流程点 -->
+      <div class="next_point">
+        <div class="next_point_item_one">
+          <div class="next_point_item_one_text">1.转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_two">
+          <div class="next_point_item_two_text">1.转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_three">
+          <div class="next_point_item_three_text">1.转处置任务治安大队</div>
+        </div>
+      </div>
+      <!-- 流程线 -->
+      <div class="line_three_i">
+        <div class="line_item_one"></div>
+        <div class="line_item_two"></div>
+      </div>
       <!-- 流程线 -->
       <div class="line_four">
         <div class="line_item"></div>
@@ -208,32 +225,32 @@ export default {
       }
     }
     .line_one {
-      width: 10vw;
+      width: 5vw;
       height: 60vh;
       display: flex;
       justify-content: center;
       align-items: center;
       .line_item {
-        width: 10vw;
+        width: 5vw;
         height: 2px;
         background: #278961;
       }
     }
     .line_two {
-      width: 8vw;
+      width: 4vw;
       height: 60vh;
       display: flex;
       flex-direction: column-reverse;
       justify-content: center;
       .line_item_one {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-left: 2px solid #278961;
         border-bottom: 2px solid #278961;
         border-top: 1px solid #278961;
       }
       .line_item_two {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-left: 2px solid #278961;
         border-top: 2px solid #278961;
@@ -325,20 +342,41 @@ export default {
       }
     }
     .line_three {
-      width: 8vw;
+      width: 4vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: center;
+      .line_item_one {
+        width: 4vw;
+        height: 15vh;
+        // border-right: 2px solid #747b7e;
+        border-bottom: 2px solid #747b7e;
+        border-top: 1px solid #747b7e;
+      }
+      .line_item_two {
+        width: 4vw;
+        height: 15vh;
+        // border-right: 2px solid #747b7e;
+        border-top: 2px solid #747b7e;
+        border-bottom: 1px solid #747b7e;
+      }
+    }
+    .line_three_i {
+      width: 4vw;
       height: 60vh;
       display: flex;
       flex-direction: column-reverse;
       justify-content: center;
       .line_item_one {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-right: 2px solid #747b7e;
         border-bottom: 2px solid #747b7e;
         border-top: 1px solid #747b7e;
       }
       .line_item_two {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-right: 2px solid #747b7e;
         border-top: 2px solid #747b7e;

src/views/closeLoopDispose/components/copy.vue

@@ -81,19 +81,15 @@
           </el-table-column>
         </el-table>
         <!-- 分页 -->
-        <div class="table_pagination">
+        <lkyPagination
-          <el-pagination
+          :page_sizes="page_sizes"
-            :background="true"
+          :pageSize="pageSize"
-            @size-change="handleSizeChange"
+          :pageNum="pageNum"
-            @current-change="handleCurrentChange"
+          :total="total"
-            :page-sizes="[5, 10]"
+          :pagination_width="pagination_width"
-            :page-size="pageSize"
+          @size_change="size_change"
-            :current-page="pageNum"
+          @num_change="num_change"
-            layout="total, sizes, prev, pager, next, jumper"
+        ></lkyPagination>
-            :total="total"
-          >
-          </el-pagination>
-        </div>
       </div>
     </div>
   </div>
@@ -148,6 +144,8 @@ export default {
         ],
       },
       table_data: [],
+      page_sizes: [5, 10],
+      pagination_width: "96",
       pageSize: 10,
       pageNum: 1,
       total: 0,
@@ -273,14 +271,14 @@ export default {
           return "驳回";
       }
     },
-    handleSizeChange(val) {
+    // 分页--每页多少条
-      console.log(`每页 ${val} 条`);
+    size_change(val) {
       this.pageNum = 1;
       this.pageSize = val;
       this.search_data();
     },
-    handleCurrentChange(val) {
+    // 分页--前往哪一页
-      console.log(`当前页: ${val}`);
+    num_change(val) {
       this.pageNum = val;
       this.search_data();
     },
@@ -427,64 +425,4 @@ export default {
     }
   }
 }
-.table_pagination {
-  width: 96vw;
-  height: 5vh;
-  display: flex;
-  flex-direction: row-reverse;
-  /deep/.el-input--suffix .el-input__inner {
-    color: #fff;
-    border: 0.1px solid #277f79;
-    border-radius: 0px;
-    background: rgba(0, 0, 0, 0);
-    width: 5vw;
-    height: 2.6vh;
-    line-height: 2.6vh;
-  }
-  /deep/.el-input__icon {
-    color: #fff;
-    line-height: 2.6vh;
-    height: 2.6vh;
-  }
-  /deep/.el-pagination {
-    margin-top: 1vh;
-    .el-pagination__total {
-      color: #fff;
-    }
-    .el-input__inner {
-      border-radius: 0px;
-      border: 0.1px solid #28847e;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    .btn-prev {
-      border-radius: 0px;
-      border: 0.1px solid #28847e;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    ul {
-      li {
-        border: 0.1px solid #28847e;
-        background: #3c4b4a;
-        color: #fff;
-      }
-    }
-    .btn-next {
-      border: 0.1px solid #28847e;
-      border-radius: 0px;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    .el-pager {
-      li {
-        border: 0.1px solid #28847e;
-        background: #3c4b4a !important;
-      }
-    }
-  }
-  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
-    border: 2px solid #76eae4;
-  }
-}
 </style>

src/views/closeLoopDispose/components/copyDetailPicture.vue

@@ -27,7 +27,7 @@
     <div class="picture_item">
       <div class="start_point">
         <div class="start_point_item">
-          <div class="start_point_item_text">1.转处置任务治安大队</div>
+          <div class="start_point_item_text">转处置任务治安大队</div>
         </div>
       </div>
       <div class="line_one">
@@ -46,13 +46,13 @@
       <!-- 流程点 -->
       <div class="next_point">
         <div class="next_point_item_one">
-          <div class="next_point_item_one_text">1.转处置任务治安大队</div>
+          <div class="next_point_item_one_text">转处置任务治安大队</div>
         </div>
         <div class="next_point_item_two">
-          <div class="next_point_item_two_text">1.转处置任务治安大队</div>
+          <div class="next_point_item_two_text">转处置任务治安大队</div>
         </div>
         <div class="next_point_item_three">
-          <div class="next_point_item_three_text">1.转处置任务治安大队</div>
+          <div class="next_point_item_three_text">转处置任务治安大队</div>
         </div>
       </div>
       <!-- 流程线 -->
@@ -60,6 +60,23 @@
         <div class="line_item_one"></div>
         <div class="line_item_two"></div>
       </div>
+      <!-- 流程点 -->
+      <div class="next_point">
+        <div class="next_point_item_one">
+          <div class="next_point_item_one_text">转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_two">
+          <div class="next_point_item_two_text">转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_three">
+          <div class="next_point_item_three_text">转处置任务治安大队</div>
+        </div>
+      </div>
+      <!-- 流程线 -->
+      <div class="line_three_i">
+        <div class="line_item_one"></div>
+        <div class="line_item_two"></div>
+      </div>
       <!-- 流程线 -->
       <div class="line_four">
         <div class="line_item"></div>
@@ -71,7 +88,7 @@
       <!-- 流程终结点 -->
       <div class="end_point">
         <div class="end_point_item">
-          <div class="end_point_item_text">1.转处置任务治安大队</div>
+          <div class="end_point_item_text">转处置任务治安大队</div>
         </div>
       </div>
     </div>
@@ -208,32 +225,32 @@ export default {
       }
     }
     .line_one {
-      width: 10vw;
+      width: 5vw;
       height: 60vh;
       display: flex;
       justify-content: center;
       align-items: center;
       .line_item {
-        width: 10vw;
+        width: 5vw;
         height: 2px;
         background: #278961;
       }
     }
     .line_two {
-      width: 8vw;
+      width: 4vw;
       height: 60vh;
       display: flex;
       flex-direction: column-reverse;
       justify-content: center;
       .line_item_one {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-left: 2px solid #278961;
         border-bottom: 2px solid #278961;
         border-top: 1px solid #278961;
       }
       .line_item_two {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-left: 2px solid #278961;
         border-top: 2px solid #278961;
@@ -325,20 +342,41 @@ export default {
       }
     }
     .line_three {
-      width: 8vw;
+      width: 4vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: center;
+      .line_item_one {
+        width: 4vw;
+        height: 15vh;
+        // border-right: 2px solid #747b7e;
+        border-bottom: 2px solid #747b7e;
+        border-top: 1px solid #747b7e;
+      }
+      .line_item_two {
+        width: 4vw;
+        height: 15vh;
+        // border-right: 2px solid #747b7e;
+        border-top: 2px solid #747b7e;
+        border-bottom: 1px solid #747b7e;
+      }
+    }
+    .line_three_i {
+      width: 4vw;
       height: 60vh;
       display: flex;
       flex-direction: column-reverse;
       justify-content: center;
       .line_item_one {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-right: 2px solid #747b7e;
         border-bottom: 2px solid #747b7e;
         border-top: 1px solid #747b7e;
       }
       .line_item_two {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-right: 2px solid #747b7e;
         border-top: 2px solid #747b7e;

src/views/closeLoopDispose/components/myCourse.vue

@@ -78,19 +78,15 @@
           </el-table-column>
         </el-table>
         <!-- 分页 -->
-        <div class="table_pagination">
+        <lkyPagination
-          <el-pagination
+          :page_sizes="page_sizes"
-            :background="true"
+          :pageSize="pageSize"
-            @size-change="handleSizeChange"
+          :pageNum="pageNum"
-            @current-change="handleCurrentChange"
+          :total="total"
-            :page-sizes="[5, 10]"
+          :pagination_width="pagination_width"
-            :page-size="pageSize"
+          @size_change="size_change"
-            :current-page="pageNum"
+          @num_change="num_change"
-            layout="total, sizes, prev, pager, next, jumper"
+        ></lkyPagination>
-            :total="total"
-          >
-          </el-pagination>
-        </div>
       </div>
     </div>
   </div>
@@ -145,6 +141,8 @@ export default {
         ],
       },
       table_data: [],
+      page_sizes: [5, 10],
+      pagination_width: "96",
       pageSize: 10,
       pageNum: 1,
       total: 0,
@@ -200,7 +198,6 @@ export default {
     },
     // 详情点击跳转
     check_details(val) {
-      console.log("12344", val);
       this.$emit("change_to_detail", val); // 通知跳转
     },
     // 转换时间格式
@@ -278,14 +275,14 @@ export default {
           return "驳回";
       }
     },
-    handleSizeChange(val) {
+    // 分页--每页多少条
-      console.log(`每页 ${val} 条`);
+    size_change(val) {
       this.pageNum = 1;
       this.pageSize = val;
       this.search_data();
     },
-    handleCurrentChange(val) {
+    // 分页--前往哪一页
-      console.log(`当前页: ${val}`);
+    num_change(val) {
       this.pageNum = val;
       this.search_data();
     },
@@ -440,64 +437,4 @@ export default {
     // border: 0.1px solid #2f6363;
   }
 }
-.table_pagination {
-  width: 96vw;
-  height: 5vh;
-  display: flex;
-  flex-direction: row-reverse;
-  /deep/.el-input--suffix .el-input__inner {
-    color: #fff;
-    border: 0.1px solid #277f79;
-    border-radius: 0px;
-    background: rgba(0, 0, 0, 0);
-    width: 5vw;
-    height: 2.6vh;
-    line-height: 2.6vh;
-  }
-  /deep/.el-input__icon {
-    color: #fff;
-    line-height: 2.6vh;
-    height: 2.6vh;
-  }
-  /deep/.el-pagination {
-    margin-top: 1vh;
-    .el-pagination__total {
-      color: #fff;
-    }
-    .el-input__inner {
-      border-radius: 0px;
-      border: 0.1px solid #28847e;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    .btn-prev {
-      border-radius: 0px;
-      border: 0.1px solid #28847e;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    ul {
-      li {
-        border: 0.1px solid #28847e;
-        background: #3c4b4a;
-        color: #fff;
-      }
-    }
-    .btn-next {
-      border: 0.1px solid #28847e;
-      border-radius: 0px;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    .el-pager {
-      li {
-        border: 0.1px solid #28847e;
-        background: #3c4b4a !important;
-      }
-    }
-  }
-  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
-    border: 2px solid #76eae4;
-  }
-}
 </style>

src/views/closeLoopDispose/components/myCourseDetailPicture.vue

@@ -27,7 +27,7 @@
     <div class="picture_item">
       <div class="start_point">
         <div class="start_point_item">
-          <div class="start_point_item_text">1.转处置任务治安大队</div>
+          <div class="start_point_item_text">转处置任务治安大队</div>
         </div>
       </div>
       <div class="line_one">
@@ -46,13 +46,13 @@
       <!-- 流程点 -->
       <div class="next_point">
         <div class="next_point_item_one">
-          <div class="next_point_item_one_text">1.转处置任务治安大队</div>
+          <div class="next_point_item_one_text">转处置任务治安大队</div>
         </div>
         <div class="next_point_item_two">
-          <div class="next_point_item_two_text">1.转处置任务治安大队</div>
+          <div class="next_point_item_two_text">转处置任务治安大队</div>
         </div>
         <div class="next_point_item_three">
-          <div class="next_point_item_three_text">1.转处置任务治安大队</div>
+          <div class="next_point_item_three_text">转处置任务治安大队</div>
         </div>
       </div>
       <!-- 流程线 -->
@@ -60,6 +60,23 @@
         <div class="line_item_one"></div>
         <div class="line_item_two"></div>
       </div>
+      <!-- 流程点 -->
+      <div class="next_point">
+        <div class="next_point_item_one">
+          <div class="next_point_item_one_text">转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_two">
+          <div class="next_point_item_two_text">转处置任务治安大队</div>
+        </div>
+        <div class="next_point_item_three">
+          <div class="next_point_item_three_text">转处置任务治安大队</div>
+        </div>
+      </div>
+      <!-- 流程线 -->
+      <div class="line_three_i">
+        <div class="line_item_one"></div>
+        <div class="line_item_two"></div>
+      </div>
       <!-- 流程线 -->
       <div class="line_four">
         <div class="line_item"></div>
@@ -208,32 +225,32 @@ export default {
       }
     }
     .line_one {
-      width: 10vw;
+      width: 5vw;
       height: 60vh;
       display: flex;
       justify-content: center;
       align-items: center;
       .line_item {
-        width: 10vw;
+        width: 5vw;
         height: 2px;
         background: #278961;
       }
     }
     .line_two {
-      width: 8vw;
+      width: 4vw;
       height: 60vh;
       display: flex;
       flex-direction: column-reverse;
       justify-content: center;
       .line_item_one {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-left: 2px solid #278961;
         border-bottom: 2px solid #278961;
         border-top: 1px solid #278961;
       }
       .line_item_two {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-left: 2px solid #278961;
         border-top: 2px solid #278961;
@@ -325,20 +342,41 @@ export default {
       }
     }
     .line_three {
-      width: 8vw;
+      width: 4vw;
+      height: 60vh;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: center;
+      .line_item_one {
+        width: 4vw;
+        height: 15vh;
+        // border-right: 2px solid #747b7e;
+        border-bottom: 2px solid #747b7e;
+        border-top: 1px solid #747b7e;
+      }
+      .line_item_two {
+        width: 4vw;
+        height: 15vh;
+        // border-right: 2px solid #747b7e;
+        border-top: 2px solid #747b7e;
+        border-bottom: 1px solid #747b7e;
+      }
+    }
+    .line_three_i {
+      width: 4vw;
       height: 60vh;
       display: flex;
       flex-direction: column-reverse;
       justify-content: center;
       .line_item_one {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-right: 2px solid #747b7e;
         border-bottom: 2px solid #747b7e;
         border-top: 1px solid #747b7e;
       }
       .line_item_two {
-        width: 8vw;
+        width: 4vw;
         height: 15vh;
         border-right: 2px solid #747b7e;
         border-top: 2px solid #747b7e;

src/views/systemManagement/companyList/index.vue

@@ -70,7 +70,7 @@
             </ul>
           </div>
           <!-- 分页区域 -->
-          <div class="footer">
+          <!-- <div class="footer">
             <el-pagination
               :background="true"
               @current-change="handleCurrentChange"
@@ -81,7 +81,16 @@
               :total="total"
             >
             </el-pagination>
-          </div>
+          </div> -->
+          <lkyPagination
+            :page_sizes="page_sizes"
+            :pageSize="pageSize"
+            :pageNum="pageNum"
+            :total="total"
+            :pagination_width="pagination_width"
+            @size_change="size_change"
+            @num_change="num_change"
+          ></lkyPagination>
         </div>
       </el-card>
     </div>
@@ -105,9 +114,11 @@ export default {
     return {
       searchCompany: "",
       company_data: [],
+      page_sizes: [6],
       pageSize: 6,
       pageNum: 1,
-      total: "",
+      total: 0,
+      pagination_width: "84",
     };
   },
   created() {
@@ -159,8 +170,14 @@ export default {
         }
       });
     }, 300),
-    handleCurrentChange(val) {
+    // 分页--每页多少条
-      console.log(`当前页: ${val}`);
+    size_change(val) {
+      this.pageNum = 1;
+      this.pageSize = val;
+      this.getData();
+    },
+    // 分页--前往哪一页
+    num_change(val) {
       this.pageNum = val;
       this.getData();
     },
@@ -184,7 +201,7 @@ export default {
 <style lang="less" scoped>
 /* card统一样式 */
 .el-card.box-card.is-always-shadow {
-  height: calc(100vh - 116px);
+  height: calc(100vh - 120px);
   /* 控制card布局高度,用于适配 */
   position: relative;
 
@@ -498,67 +515,6 @@ export default {
         }
       }
     }
-
-    /* 底部分页展示区域 */
-    .footer {
-      height: 5vh;
-      display: flex;
-      flex-direction: row-reverse;
-      /deep/.el-input--suffix .el-input__inner {
-        color: #fff;
-        border: 0.1px solid #277f79;
-        border-radius: 0px;
-        background: rgba(0, 0, 0, 0);
-        width: 5vw;
-        height: 2.6vh;
-        line-height: 2.6vh;
-      }
-      /deep/.el-input__icon {
-        color: #fff;
-        line-height: 2.6vh;
-        height: 2.6vh;
-      }
-      /deep/.el-pagination {
-        margin-top: 1vh;
-        .el-pagination__total {
-          color: #fff;
-        }
-        .el-input__inner {
-          border-radius: 0px;
-          border: 0.1px solid #28847e;
-          background: #3c4b4a;
-          color: #fff;
-        }
-        .btn-prev {
-          border-radius: 0px;
-          border: 0.1px solid #28847e;
-          background: #3c4b4a;
-          color: #fff;
-        }
-        ul {
-          li {
-            border: 0.1px solid #28847e;
-            background: #3c4b4a;
-            color: #fff;
-          }
-        }
-        .btn-next {
-          border: 0.1px solid #28847e;
-          border-radius: 0px;
-          background: #3c4b4a;
-          color: #fff;
-        }
-        .el-pager {
-          li {
-            border: 0.1px solid #28847e;
-            background: #3c4b4a !important;
-          }
-        }
-      }
-      /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
-        border: 2px solid #76eae4;
-      }
-    }
   }
 }
 </style>

src/views/systemManagement/companyScore/index.vue

@@ -63,19 +63,15 @@
           :table_data="table_data"
           :jump_params="jump_params"
         ></CompanyTable>
-        <div class="table_pagination">
+        <lkyPagination
-          <el-pagination
+          :page_sizes="page_sizes"
-            :background="true"
+          :pageSize="pageSize"
-            @size-change="handleSizeChange"
+          :pageNum="pageNum"
-            @current-change="handleCurrentChange"
+          :total="total"
-            :page-sizes="[5, 10]"
+          :pagination_width="pagination_width"
-            :page-size="pageSize"
+          @size_change="size_change"
-            :current-page="pageNum"
+          @num_change="num_change"
-            layout="total, sizes, prev, pager, next, jumper"
+        ></lkyPagination>
-            :total="total"
-          >
-          </el-pagination>
-        </div>
       </div>
     </div>
   </el-card>
@@ -117,9 +113,11 @@ export default {
       jump_params: {}, // 跳转时携带入参
       show_value: "",
       table_data: [],
+      page_sizes: [5, 10],
       pageSize: 10,
       pageNum: 1,
-      total: 0,
+      total: 16,
+      pagination_width: "85.2",
     };
   },
   created() {
@@ -211,14 +209,14 @@ export default {
           this.$message.warning("企业查询失败");
         });
     },
-    handleSizeChange(val) {
+    // 分页--每页多少条
-      console.log(`每页 ${val} 条`);
+    size_change(val) {
       this.pageNum = 1;
       this.pageSize = val;
       this.search();
     },
-    handleCurrentChange(val) {
+    // 分页--前往哪一页
-      console.log(`当前页: ${val}`);
+    num_change(val) {
       this.pageNum = val;
       this.search();
     },
@@ -229,7 +227,8 @@ export default {
 /* card统一样式 */
 .el-card.box-card.is-always-shadow {
   border: 0px;
-  height: 88vh; /* 控制card布局高度,用于适配 */
+  /* 控制card布局高度,用于适配 */
+  height: calc(100vh - 120px);
   position: relative;
   background: url("~@/assets/companyFile/22136.png") no-repeat !important;
   background-size: 100% 100% !important;
@@ -274,98 +273,38 @@ export default {
         background: #4d8f89;
       }
     }
-  }
+    /deep/.el-input--suffix .el-input__inner {
-  .table_body {
-    width: 85.2vw;
-    height: 68vh;
-    margin-top: 3vh;
-    // border: 0.1px solid #4d8f89;
-  }
-  /deep/.el-input--suffix .el-input__inner {
-    color: #fff;
-    border: 0.1px solid #34a6a6;
-    border-radius: 0px;
-    background: rgba(0, 0, 0, 0);
-    width: 10vw;
-    height: 4vh;
-  }
-  /deep/ .el-input.el-input--prefix {
-    width: 10vw;
-  }
-  /deep/.el-input__icon {
-    color: #fff;
-    line-height: 4vh;
-    height: 4vh;
-  }
-  /deep/ .search_right_input.el-input {
-    .el-input__inner {
       color: #fff;
-      border: 0.1px solid #495e70;
+      border: 0.1px solid #34a6a6;
       border-radius: 0px;
       background: rgba(0, 0, 0, 0);
-      width: 16vw;
+      width: 10vw;
       height: 4vh;
     }
-  }
+    /deep/ .el-input.el-input--prefix {
-}
+      width: 10vw;
-.table_pagination {
-  width: 85.2vw;
-  height: 5vh;
-  display: flex;
-  flex-direction: row-reverse;
-  /deep/.el-input--suffix .el-input__inner {
-    color: #fff;
-    border: 0.1px solid #34a6a6;
-    border-radius: 0px;
-    background: rgba(0, 0, 0, 0);
-    width: 5vw;
-    height: 2.6vh;
-    line-height: 2.6vh;
-  }
-  /deep/.el-input__icon {
-    color: #fff;
-    line-height: 2.6vh;
-    height: 2.6vh;
-  }
-  /deep/.el-pagination {
-    margin-top: 1vh;
-    .el-pagination__total {
-      color: #fff;
-    }
-    .el-input__inner {
-      border-radius: 0px;
-      border: 0.1px solid #28847e;
-      background: #3c4b4a;
-      color: #fff;
     }
-    .btn-prev {
+    /deep/.el-input__icon {
-      border-radius: 0px;
-      border: 0.1px solid #28847e;
-      background: #3c4b4a;
       color: #fff;
+      line-height: 4vh;
+      height: 4vh;
     }
-    ul {
+    /deep/ .search_right_input.el-input {
-      li {
+      .el-input__inner {
-        border: 0.1px solid #28847e;
-        background: #3c4b4a;
         color: #fff;
-      }
+        border: 0.1px solid #495e70;
-    }
+        border-radius: 0px;
-    .btn-next {
+        background: rgba(0, 0, 0, 0);
-      border: 0.1px solid #28847e;
+        width: 16vw;
-      border-radius: 0px;
+        height: 4vh;
-      background: #3c4b4a;
-      color: #fff;
-    }
-    .el-pager {
-      li {
-        border: 0.1px solid #28847e;
-        background: #3c4b4a !important;
       }
     }
   }
-  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+  .table_body {
-    border: 2px solid #76eae4;
+    width: 85.2vw;
+    height: 68vh;
+    margin-top: 3vh;
+    // border: 0.1px solid #4d8f89;
   }
 }
 </style>

src/views/systemManagement/correlationEquipment/index.vue

@@ -148,7 +148,8 @@ export default {
 /* card统一样式 */
 .el-card.box-card.is-always-shadow {
   border: 0px;
-  height: 88.5vh; /* 控制card布局高度,用于适配 */
+  /* 控制card布局高度,用于适配 */
+  height: calc(100vh - 120px);
   position: relative;
   background: url("~@/assets/companyFile/22136.png") no-repeat !important;
   background-size: 100% 100% !important;

src/views/systemManagement/safeIndex/index.vue

@@ -324,7 +324,8 @@ export default {
 /* card统一样式 */
 .el-card.box-card.is-always-shadow {
   border: 0px;
-  height: 88vh; /* 控制card布局高度,用于适配 */
+  /* 控制card布局高度,用于适配 */
+  height: calc(100vh - 120px);
   position: relative;
   background: url("~@/assets/companyFile/22136.png") no-repeat !important;
   background-size: 100% 100% !important;