样式修改

src/views/systemManagement/companyList/components/companyDataDialog.vue

@@ -348,12 +348,12 @@ export default {
     overflow-y: scroll;
   }
   .form_body::-webkit-scrollbar {
-    width: 10px;
+    width: 6px;
     background-color: #5e666a;
     border-radius: 4px;
   }
   .form_body::-webkit-scrollbar-thumb {
-    width: 9px;
+    width: 5px;
     background-color: #3c4b4a;
     border-radius: 4px;
   }
@@ -387,6 +387,10 @@ export default {
       }
     }
   }
+  .commerceMessage {
+    background: #6C8097;
+    border: 1px solid #495461;
+  }
   /* 为适应上传图片表单布局把企业工商表单拆分 */
   .commerceMessage_one {
     display: flex;

src/views/systemManagement/companyList/index.vue

@@ -21,7 +21,7 @@
               >
               </el-input>
               <div class="top_search_button">
-                <i class="el-icon-search"></i>
+                <i class="el-icon-search" @click="getData_icon()"></i>
               </div>
             </div>
             <div class="top_add_btn">
@@ -33,7 +33,7 @@
             <ul>
               <li v-for="item in company_data" :key="item.id">
                 <img :src="item.picUrl" alt="" />
-                <span class="company_name"> {{ item.companyName }} </span>
+                <span class="company_name"> {{ item.name }} </span>
                 <div class="company_label">
                   <div
                     class="company_label_data"
@@ -43,7 +43,7 @@
                     {{ val }}
                   </div>
                 </div>
-                <span class="company_unit"> {{ item.companyAddress }}</span>
+                <span class="company_unit"> {{ item.unit }}</span>
                 <!-- 遮罩层 -->
                 <div class="image_mask">
                   <div class="btn">
@@ -60,10 +60,11 @@
           <!-- 分页区域 -->
           <div class="footer">
             <el-pagination
-              @size-change="handleSizeChange"
+              :background="true"
               @current-change="handleCurrentChange"
               :page-sizes="[6]"
-              :page-size="100"
+              :page-size="pageSize"
+              :current-page="pageNum"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total"
             >
@@ -80,6 +81,7 @@
 import CompanyDataDialog from "./components/companyDataDialog";
 import ClearDialog from "./components/clearDialog";
 import { getCompanyList } from "@/api/systemManagement";
+import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
 export default {
   name: "companyList",
   components: {
@@ -89,18 +91,7 @@ export default {
   data() {
     return {
       searchCompany: "",
-      company_data: [
+      company_data: [],
-        {
-          value: "1",
-          name: "宁波镇海兴达化工有限公司",
-          unit: "宁波镇海兴达化工有限公司工业园",
-        },
-        { value: "2" },
-        { value: "3" },
-        { value: "4" },
-        { value: "5" },
-        { value: "6" },
-      ],
       pageSize: 6,
       pageNum: 1,
       total: "",
@@ -125,12 +116,41 @@ export default {
       const params = {
         pageSize: this.pageSize,
         pageNum: this.pageNum,
+        companyName: this.searchCompany, // 查询框条件
       };
       getCompanyList(params).then((res) => {
-        console.log("res.data", res.data);
+        if (res.code === 200) {
-        // this.company_data = res.data;
+          console.log("res.data", res);
+          this.company_data = res.data;
+          this.total = res.total;
+        } else {
+          this.$message.warnning(res.msg);
+        }
       });
     },
+    // 放大镜点击查询防恶意点击
+    getData_icon: debounce(function () {
+      const params = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        companyName: this.searchCompany, // 查询框条件
+      };
+      console.log("params", params);
+      getCompanyList(params).then((res) => {
+        if (res.code === 200) {
+          console.log("res.data", res);
+          this.company_data = res.data;
+          this.total = res.total;
+        } else {
+          this.$message.warnning(res.msg);
+        }
+      });
+    }, 300),
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pageNum = val;
+      this.getData();
+    },
   },
 };
 </script>
@@ -189,7 +209,7 @@ export default {
           }
         }
         .top_search_button {
-          width: 10%;
+          width: 7%;
           height: 100%;
           border-radius: 0px 4px 4px 0px;
           background: #0e3936;
@@ -198,7 +218,7 @@ export default {
           cursor: pointer;
           .el-icon-search {
             color: #fff;
-            padding: 12% 0;
+            padding: 11% 0;
           }
         }
         .top_search_button:focus,
@@ -214,13 +234,13 @@ export default {
           border: 1px solid #4a6072;
           color: #fff;
           border-radius: 0px !important;
-          background: #323f43;
+          background: url("~@/assets/companyFile/btn05.png") no-repeat !important;
+          background-size: 100% 100% !important;
         }
         .el-button:focus,
         .el-button:hover {
-          color: #34e1b3;
+          text-shadow: 0 0 9px #34e1b3;
-          background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+          filter: brightness(150%);
-          background-size: 100% 100% !important;
         }
       }
     }
@@ -245,16 +265,18 @@ export default {
           img {
             margin-left: 1%;
             margin-top: 1.2%;
-            width: 98%;
+            width: 99%;
-            height: 97%;
+            height: 98.4%;
           }
           /* 公司图片相关信息区域 */
           .company_name {
             position: absolute;
             z-index: 2;
             color: #fff;
+            text-shadow: 0 0 9px #ffe6d9;
             left: 10px;
             bottom: 70px;
+            font-size: 18px;
           }
           .company_label {
             display: flex;
@@ -268,7 +290,7 @@ export default {
               padding: 0px 5px 0px 5px;
               height: 30px;
               color: #34e1b3;
-              background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+              background: url("~@/assets/companyFile/btn04.png") no-repeat !important;
               background-size: 100% 100% !important;
               margin-right: 5px;
             }
@@ -287,7 +309,7 @@ export default {
             width: 100%;
             height: 100%;
             bottom: 0;
-            background: rgba(101, 101, 101, 0.6);
+            background: rgba(73, 72, 72, 0.6);
             color: #ffffff;
             opacity: 0;
             /* 图片鼠标经过按钮 */
@@ -297,32 +319,38 @@ export default {
               button {
                 height: 40px;
                 margin-right: 25px;
-                font-size: 24px;
+                font-size: 18px;
                 color: #fff;
                 border: 1px;
                 border-radius: 0px;
                 cursor: pointer;
               }
               button.check {
-                background: #126a58;
+                background: url("~@/assets/companyFile/btn05.png") no-repeat !important;
+                background-size: 100% 100% !important;
               }
               /* 点击高亮 */
+              button.check:hover,
               button.check:focus {
-                background: #29b397;
+                filter: brightness(150%);
               }
               button.change {
-                background: rgb(7, 72, 92);
+                background: url("~@/assets/companyFile/btn06.png") no-repeat !important;
+                background-size: 100% 100% !important;
               }
               /* 点击高亮 */
+              button.change:hover,
               button.change:focus {
-                background: rgb(19, 125, 158);
+                filter: brightness(150%);
               }
               button.clear {
-                background: rgb(107, 14, 14);
+                background: url("~@/assets/companyFile/btn07.png") no-repeat !important;
+                background-size: 100% 100% !important;
               }
               /* 点击高亮 */
+              button.clear:hover,
               button.clear:focus {
-                background: rgb(151, 28, 28);
+                filter: brightness(150%);
               }
             }
           }
@@ -331,12 +359,21 @@ export default {
           opacity: 1;
           cursor: default;
         }
+        li:hover .company_label_data {
+          opacity: 0;
+        }
+        li:hover span {
+          opacity: 0;
+        }
       }
     }
     /* 底部分页展示区域 */
     .footer {
       .el-pagination {
-        margin-left: 82%;
+        margin-left: 59%;
+        /deep/.el-pagination__total {
+          color: #fff;
+        }
         /deep/.el-input__inner {
           border-radius: 0px;
           background: #3c4b4a;