diff --git a/src/assets/images/pull-bottom.png b/src/assets/images/pull-bottom.png
new file mode 100644
index 0000000..a3ae623
Binary files /dev/null and b/src/assets/images/pull-bottom.png differ
diff --git a/src/assets/images/pull-top.png b/src/assets/images/pull-top.png
new file mode 100644
index 0000000..99985c8
Binary files /dev/null and b/src/assets/images/pull-top.png differ
diff --git a/src/views/components/dialog/index.vue b/src/views/components/dialog/index.vue
index cbcaaaf..ba4fdf3 100644
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@@ -121,8 +121,8 @@ export default {
       }
       .close {
         position: absolute;
-        width: 20px;
-        height: 20px;
+        width: 50px;
+        height: 50px;
         right: 0px;
         top: 6px;
         cursor: pointer;
diff --git a/src/views/components/shop/components/tab2.vue b/src/views/components/shop/components/tab2.vue
index 0900da6..ddce890 100644
--- a/src/views/components/shop/components/tab2.vue
+++ b/src/views/components/shop/components/tab2.vue
@@ -7,6 +7,47 @@
       </div>
     </div>
     <div class="search-gr">
+      <div class="itemtwo">
+        <div class="left">
+          <div class="ball"></div>
+          <div class="content">执法人员：</div>
+        </div>
+        <div class="input-right">
+          <el-input placeholder="请输入" v-model="input"> </el-input>
+        </div>
+      </div>
+      <div class="itemtwo">
+        <div class="left">
+          <div class="ball"></div>
+          <div class="content">网格：</div>
+        </div>
+        <div class="right">
+          <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="itemtwo">
+        <div class="left">
+          <div class="ball"></div>
+          <div class="content">排查日期：</div>
+        </div>
+        <div class="right">
+          <el-date-picker
+            v-model="dateTime"
+            type="datetime"
+            placeholder="请选择"
+          >
+          </el-date-picker>
+          <img class="data_icon" src="@/assets/images/timeIcon.png" alt="" />
+        </div>
+      </div>
       <div class="btn-reset">
         <div class="icon-reset"></div>
         <span class="text">重置</span>
@@ -24,26 +65,60 @@
         <span>是否发现隐患</span>
         <span>是否发起整改工单</span>
       </div>
-      <div class="tb-content">
-        <span>张天</span>
-        <span>网格1</span>
-        <span>2023-09-12</span>
-        <span>否</span>
-        <span>否</span>
-      </div>
-      <div class="tb-content_">
-        <span>张天</span>
-        <span>网格1</span>
-        <span>2023-09-12</span>
-        <span>否</span>
-        <span>否</span>
+      <div class="tb-list">
+        <div v-for="(item, ind) in 10" :key="ind">
+          <div class="tb-content">
+            <span>张天</span>
+            <span>网格1</span>
+            <span>2023-09-12</span>
+            <span>否</span>
+            <span>否</span>
+          </div>
+          <div class="tb-content_">
+            <span>张天</span>
+            <span>网格1</span>
+            <span>2023-09-12</span>
+            <span>否</span>
+            <span>否</span>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      input: "",
+      dateTime: "",
+      value: "",
+      options: [
+        {
+          value: "1",
+          label: "网格1",
+        },
+        {
+          value: "2",
+          label: "网格2",
+        },
+        {
+          value: "3",
+          label: "网格3",
+        },
+        {
+          value: "4",
+          label: "网格4",
+        },
+        {
+          value: "5",
+          label: "网格5",
+        },
+      ],
+    };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -53,7 +128,7 @@ export default {};
   align-items: center;
 
   .icon-bar {
-    width: 4px;
+    width: 5px;
     height: 12px;
     background-color: #5ba1d2;
     display: block;
@@ -69,12 +144,157 @@ export default {};
 
 .search-gr {
   display: flex;
-  margin: 10px 64px;
+  margin: 10px 0;
+
+  .itemtwo {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+    .left {
+      display: flex;
+      align-items: center;
+      .ball {
+        width: 4px;
+        height: 4px;
+        background: #daebff;
+        box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
+          0px 0px 5px 0px rgba(229, 241, 255, 0.25);
+        border-radius: 20px 20px 20px 20px;
+        margin-right: 15px;
+      }
+      .content {
+        font-size: 14px;
+        font-family: "Source Han Sans CN-Medium";
+        font-weight: 500;
+        color: #cccccc;
+        line-height: 20px;
+      }
+    }
+    .right {
+      background-image: url("../../../../assets/images/timebg.png");
+      // width: 120px;
+      // height: 35px;
+      background-size: 100% 100%;
+      position: relative;
+      ::v-deep .el-input__prefix {
+        display: none;
+      }
+      ::v-deep .el-date-editor {
+        background-color: transparent;
+        width: 120px;
+        .el-input__inner {
+          background-color: transparent;
+          border: none;
+          width: 100%;
+          height: 35px;
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Medium";
+          font-weight: 500;
+          color: #e9f4ff;
+          padding-left: 12px;
+        }
+        .el-input__inner::placeholder {
+          /* 在这里添加你想要修改的 placeholder 样式 */
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Regular";
+          font-weight: 400;
+          color: #d3eef2;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
+        }
+      }
+      ::v-deep .el-select {
+        background-color: transparent;
+        width: 120px;
+        .el-input
+          .el-input__suffix
+          .el-input__suffix-inner
+          .el-icon-arrow-up::before {
+          content: "";
+          background: url("../../../../assets/images/pull-bottom.png") center
+            center no-repeat;
+          background-size: 100% 100%;
+          position: absolute;
+          width: 11px;
+          height: 11px;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+        .el-input__suffix .el-input__suffix-inner .el-select__caret {
+          width: 22px;
+        }
+        .el-input__suffix {
+          margin-right: 5px;
+        }
+        .el-input__inner {
+          background-color: transparent;
+          border: none;
+          width: 100%;
+          height: 35px;
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Medium";
+          font-weight: 500;
+          color: #e9f4ff;
+        }
+        .el-input__inner::placeholder {
+          /* 在这里添加你想要修改的 placeholder 样式 */
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Regular";
+          font-weight: 400;
+          color: #d3eef2;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
+        }
+      }
+      .data_icon {
+        position: absolute;
+        right: 10px;
+        top: 8px;
+        width: 20px;
+      }
+    }
+    .input-right {
+      ::v-deep .el-input {
+        background: rgba(0, 60, 116, 0.2);
+        box-shadow: inset 0px 0px 6px 0px #00c2ff;
+        border-radius: 2px;
+        border: 1px solid rgba(181, 207, 255, 0.5);
+        .el-input__inner {
+          background-color: transparent;
+          width: 120px;
+          height: 30px;
+          color: #fff;
+          border: none;
+        }
+        .el-input__inner::placeholder {
+          /* 在这里添加你想要修改的 placeholder 样式 */
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Regular";
+          font-weight: 400;
+          color: #d3eef2;
+          line-height: 20px;
+        }
+      }
+      ::v-deep .el-input__suffix {
+        line-height: 44px;
+        color: #d3eef2;
+        right: 10px;
+        cursor: pointer;
+        .el-icon-search:before {
+          font-size: 24px;
+          color: #d3eef2;
+        }
+      }
+    }
+  }
   .btn-reset {
     display: flex;
     align-items: center;
     border-radius: 2px 2px 2px 2px;
     border: 1px solid rgba(181, 207, 255, 0.5);
+    margin-right: 10px;
+    padding: 4px 16px;
     .icon-reset {
       width: 24px;
       height: 24px;
@@ -96,7 +316,7 @@ export default {};
     padding: 4px 16px;
     background: rgba(255, 125, 64, 0.8);
     box-shadow: inset 0px 0px 13px 0px #f6b463;
-    border-radius: 2px 2px 2px 2px;
+    border-radius: 2px;
     border: 1px solid rgba(181, 207, 255, 0.5);
     .icon-search {
       width: 24px;
@@ -129,6 +349,10 @@ export default {};
   }
 }
 
+.tb-list {
+  height: 400px;
+  overflow-y: auto;
+}
 .tb-content {
   width: 100%;
   background: rgba(216, 216, 216, 0.1);
diff --git a/src/views/components/shop/components/tab3.vue b/src/views/components/shop/components/tab3.vue
index 60265f6..c01b895 100644
--- a/src/views/components/shop/components/tab3.vue
+++ b/src/views/components/shop/components/tab3.vue
@@ -1,7 +1,381 @@
-<template></template>
+<template>
+  <div>
+    <div>
+      <div class="title">
+        <span class="icon-bar"></span>
+        <span class="subtitle">整改过程信息</span>
+      </div>
+    </div>
+    <div class="search-gr">
+      <div class="itemtwo">
+        <div class="left">
+          <div class="ball"></div>
+          <div class="content">整改工单编号：</div>
+        </div>
+        <div class="input-right">
+          <el-input placeholder="请输入" v-model="input"> </el-input>
+        </div>
+      </div>
+      <div class="itemtwo">
+        <div class="left">
+          <div class="ball"></div>
+          <div class="content">网格：</div>
+        </div>
+        <div class="right">
+          <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="itemtwo">
+        <div class="left">
+          <div class="ball"></div>
+          <div class="content">排查日期：</div>
+        </div>
+        <div class="right">
+          <el-date-picker
+            v-model="dateTime"
+            type="datetime"
+            placeholder="请选择"
+          >
+          </el-date-picker>
+          <img class="data_icon" src="@/assets/images/timeIcon.png" alt="" />
+        </div>
+      </div>
+      <div class="btn-reset">
+        <div class="icon-reset"></div>
+        <span class="text">重置</span>
+      </div>
+      <div class="btn-search">
+        <div class="icon-search"></div>
+        <span class="text">查询</span>
+      </div>
+    </div>
+    <div>
+      <div class="tb-header">
+        <span>整改工单编号</span>
+        <span>整改期限</span>
+        <span>是否整改完成</span>
+        <span>是否通过复查</span>
+      </div>
+
+      <div class="tb-list">
+        <div v-for="(item, ind) in 10" :key="ind">
+          <div class="tb-content">
+            <span>202309120001</span>
+            <span>2023-09-12</span>
+            <span>否</span>
+            <span>否</span>
+          </div>
+          <div class="tb-content_">
+            <span>202309120001</span>
+            <span>2023-09-12</span>
+            <span>否</span>
+            <span>否</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      input: "",
+      dateTime: "",
+      value: "",
+      options: [
+        {
+          value: "1",
+          label: "网格1",
+        },
+        {
+          value: "2",
+          label: "网格2",
+        },
+        {
+          value: "3",
+          label: "网格3",
+        },
+        {
+          value: "4",
+          label: "网格4",
+        },
+        {
+          value: "5",
+          label: "网格5",
+        },
+      ],
+    };
+  },
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.title {
+  margin-bottom: 14px;
+  display: flex;
+  align-items: center;
+
+  .icon-bar {
+    width: 5px;
+    height: 12px;
+    background-color: #5ba1d2;
+    display: block;
+  }
+
+  .subtitle {
+    margin-left: 10px;
+    font-size: 14px;
+    font-family: Source Han Sans-Medium, Source Han Sans;
+    color: #e9f4ff;
+  }
+}
+
+.search-gr {
+  display: flex;
+  margin: 10px 0;
+
+  .itemtwo {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+    .left {
+      display: flex;
+      align-items: center;
+      .ball {
+        width: 4px;
+        height: 4px;
+        background: #daebff;
+        box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
+          0px 0px 5px 0px rgba(229, 241, 255, 0.25);
+        border-radius: 20px 20px 20px 20px;
+        margin-right: 15px;
+      }
+      .content {
+        font-size: 14px;
+        font-family: "Source Han Sans CN-Medium";
+        font-weight: 500;
+        color: #cccccc;
+        line-height: 20px;
+      }
+    }
+    .right {
+      background-image: url("../../../../assets/images/timebg.png");
+      // width: 120px;
+      // height: 35px;
+      background-size: 100% 100%;
+      position: relative;
+      ::v-deep .el-input__prefix {
+        display: none;
+      }
+      ::v-deep .el-date-editor {
+        background-color: transparent;
+        width: 120px;
+        .el-input__inner {
+          background-color: transparent;
+          border: none;
+          width: 100%;
+          height: 35px;
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Medium";
+          font-weight: 500;
+          color: #e9f4ff;
+          padding-left: 12px;
+        }
+        .el-input__inner::placeholder {
+          /* 在这里添加你想要修改的 placeholder 样式 */
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Regular";
+          font-weight: 400;
+          color: #d3eef2;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
+        }
+      }
+      ::v-deep .el-select {
+        background-color: transparent;
+        width: 120px;
+        .el-input
+          .el-input__suffix
+          .el-input__suffix-inner
+          .el-icon-arrow-up::before {
+          content: "";
+          background: url("../../../../assets/images/pull-bottom.png") center
+            center no-repeat;
+          background-size: 100% 100%;
+          position: absolute;
+          width: 11px;
+          height: 11px;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+        .el-input__suffix .el-input__suffix-inner .el-select__caret {
+          width: 22px;
+        }
+        .el-input__suffix {
+          margin-right: 5px;
+        }
+        .el-input__inner {
+          background-color: transparent;
+          border: none;
+          width: 100%;
+          height: 35px;
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Medium";
+          font-weight: 500;
+          color: #e9f4ff;
+        }
+        .el-input__inner::placeholder {
+          /* 在这里添加你想要修改的 placeholder 样式 */
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Regular";
+          font-weight: 400;
+          color: #d3eef2;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
+        }
+      }
+      .data_icon {
+        position: absolute;
+        right: 10px;
+        top: 8px;
+        width: 20px;
+      }
+    }
+    .input-right {
+      ::v-deep .el-input {
+        background: rgba(0, 60, 116, 0.2);
+        box-shadow: inset 0px 0px 6px 0px #00c2ff;
+        border-radius: 2px;
+        border: 1px solid rgba(181, 207, 255, 0.5);
+        .el-input__inner {
+          background-color: transparent;
+          width: 120px;
+          height: 30px;
+          color: #fff;
+          border: none;
+        }
+        .el-input__inner::placeholder {
+          /* 在这里添加你想要修改的 placeholder 样式 */
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Regular";
+          font-weight: 400;
+          color: #d3eef2;
+          line-height: 20px;
+        }
+      }
+      ::v-deep .el-input__suffix {
+        line-height: 44px;
+        color: #d3eef2;
+        right: 10px;
+        cursor: pointer;
+        .el-icon-search:before {
+          font-size: 24px;
+          color: #d3eef2;
+        }
+      }
+    }
+  }
+  .btn-reset {
+    display: flex;
+    align-items: center;
+    border-radius: 2px 2px 2px 2px;
+    border: 1px solid rgba(181, 207, 255, 0.5);
+    margin-right: 10px;
+    padding: 4px 16px;
+    .icon-reset {
+      width: 24px;
+      height: 24px;
+      background-image: url("../../../../assets/images/icon-reset.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    .text {
+      margin-left: 10px;
+      font-size: 14px;
+      font-family: Source Han Sans-Regular, Source Han Sans;
+      color: #d3eef2;
+    }
+  }
+  .btn-search {
+    display: flex;
+    align-items: center;
+    padding: 4px 16px;
+    background: rgba(255, 125, 64, 0.8);
+    box-shadow: inset 0px 0px 13px 0px #f6b463;
+    border-radius: 2px;
+    border: 1px solid rgba(181, 207, 255, 0.5);
+    .icon-search {
+      width: 24px;
+      height: 24px;
+      background-image: url("../../../../assets/images/icon-search.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    .text {
+      margin-left: 10px;
+      font-size: 14px;
+      font-family: Source Han Sans-Regular, Source Han Sans;
+      color: #d3eef2;
+    }
+  }
+}
+.tb-header {
+  width: 100%;
+  background: rgba(7, 127, 255, 0.1608);
+  display: flex;
+  border-top: 1px solid #077fff;
+  padding: 10px 20px;
+  span {
+    flex: 1;
+    font-size: 14px;
+    font-family: Source Han Sans-Regular, Source Han Sans;
+    font-weight: 400;
+    color: #d3eef2;
+  }
+}
+
+.tb-list {
+  height: 400px;
+  overflow-y: auto;
+}
+
+.tb-content {
+  width: 100%;
+  background: rgba(216, 216, 216, 0.1);
+  display: flex;
+  padding: 10px 20px;
+  span {
+    flex: 1;
+    font-size: 14px;
+    font-family: Source Han Sans-Regular, Source Han Sans;
+    font-weight: 400;
+    color: #d3eef2;
+  }
+}
+.tb-content_ {
+  width: 100%;
+  background: rgba(216, 216, 216, 0.3);
+  display: flex;
+  padding: 10px 20px;
+  span {
+    flex: 1;
+    font-size: 14px;
+    font-family: Source Han Sans-Regular, Source Han Sans;
+    font-weight: 400;
+    color: #d3eef2;
+  }
+}
+</style>
diff --git a/src/views/components/shop/components/tab4.vue b/src/views/components/shop/components/tab4.vue
index 60265f6..dd5ab5a 100644
--- a/src/views/components/shop/components/tab4.vue
+++ b/src/views/components/shop/components/tab4.vue
@@ -1,7 +1,361 @@
-<template></template>
+<template>
+  <div>
+    <div>
+      <div class="title">
+        <span class="icon-bar"></span>
+        <span class="subtitle">过期未整改告警</span>
+      </div>
+    </div>
+    <div class="search-gr">
+      <div class="itemtwo">
+        <div class="left">
+          <div class="ball"></div>
+          <div class="content">整改工单编号：</div>
+        </div>
+        <div class="input-right">
+          <el-input placeholder="请输入" v-model="input"> </el-input>
+        </div>
+      </div>
+      <div class="itemtwo">
+        <div class="left">
+          <div class="ball"></div>
+          <div class="content">排查日期：</div>
+        </div>
+        <div class="right">
+          <el-date-picker
+            v-model="dateTime"
+            type="datetime"
+            placeholder="请选择"
+          >
+          </el-date-picker>
+          <img class="data_icon" src="@/assets/images/timeIcon.png" alt="" />
+        </div>
+      </div>
+      <div class="btn-reset">
+        <div class="icon-reset"></div>
+        <span class="text">重置</span>
+      </div>
+      <div class="btn-search">
+        <div class="icon-search"></div>
+        <span class="text">查询</span>
+      </div>
+    </div>
+    <div>
+      <div class="tb-header">
+        <span>整改工单编号</span>
+        <span>整改期限</span>
+        <span>告警时间</span>
+      </div>
+
+      <div class="tb-list">
+        <div v-for="(item, ind) in 10" :key="ind">
+          <div class="tb-content">
+            <span>202309120001</span>
+            <span>2023-09-12</span>
+            <span>2023-09-13</span>
+          </div>
+          <div class="tb-content_">
+            <span>202309120001</span>
+            <span>2023-09-12</span>
+            <span>2023-09-13</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      input: "",
+      dateTime: "",
+      value: "",
+      options: [
+        {
+          value: "1",
+          label: "网格1",
+        },
+        {
+          value: "2",
+          label: "网格2",
+        },
+        {
+          value: "3",
+          label: "网格3",
+        },
+        {
+          value: "4",
+          label: "网格4",
+        },
+        {
+          value: "5",
+          label: "网格5",
+        },
+      ],
+    };
+  },
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.title {
+  margin-bottom: 14px;
+  display: flex;
+  align-items: center;
+
+  .icon-bar {
+    width: 5px;
+    height: 12px;
+    background-color: #5ba1d2;
+    display: block;
+  }
+
+  .subtitle {
+    margin-left: 10px;
+    font-size: 14px;
+    font-family: Source Han Sans-Medium, Source Han Sans;
+    color: #e9f4ff;
+  }
+}
+
+.search-gr {
+  display: flex;
+  margin: 10px 0;
+
+  .itemtwo {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+    .left {
+      display: flex;
+      align-items: center;
+      .ball {
+        width: 4px;
+        height: 4px;
+        background: #daebff;
+        box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
+          0px 0px 5px 0px rgba(229, 241, 255, 0.25);
+        border-radius: 20px 20px 20px 20px;
+        margin-right: 15px;
+      }
+      .content {
+        font-size: 14px;
+        font-family: "Source Han Sans CN-Medium";
+        font-weight: 500;
+        color: #cccccc;
+        line-height: 20px;
+      }
+    }
+    .right {
+      background-image: url("../../../../assets/images/timebg.png");
+      // width: 120px;
+      // height: 35px;
+      background-size: 100% 100%;
+      position: relative;
+      ::v-deep .el-input__prefix {
+        display: none;
+      }
+      ::v-deep .el-date-editor {
+        background-color: transparent;
+        width: 120px;
+        .el-input__inner {
+          background-color: transparent;
+          border: none;
+          width: 100%;
+          height: 35px;
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Medium";
+          font-weight: 500;
+          color: #e9f4ff;
+          padding-left: 12px;
+        }
+        .el-input__inner::placeholder {
+          /* 在这里添加你想要修改的 placeholder 样式 */
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Regular";
+          font-weight: 400;
+          color: #d3eef2;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
+        }
+      }
+      ::v-deep .el-select {
+        background-color: transparent;
+        width: 120px;
+        .el-input
+          .el-input__suffix
+          .el-input__suffix-inner
+          .el-icon-arrow-up::before {
+          content: "";
+          background: url("../../../../assets/images/pull-bottom.png") center
+            center no-repeat;
+          background-size: 100% 100%;
+          position: absolute;
+          width: 11px;
+          height: 11px;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+        .el-input__suffix .el-input__suffix-inner .el-select__caret {
+          width: 22px;
+        }
+        .el-input__suffix {
+          margin-right: 5px;
+        }
+        .el-input__inner {
+          background-color: transparent;
+          border: none;
+          width: 100%;
+          height: 35px;
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Medium";
+          font-weight: 500;
+          color: #e9f4ff;
+        }
+        .el-input__inner::placeholder {
+          /* 在这里添加你想要修改的 placeholder 样式 */
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Regular";
+          font-weight: 400;
+          color: #d3eef2;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
+        }
+      }
+      .data_icon {
+        position: absolute;
+        right: 10px;
+        top: 8px;
+        width: 20px;
+      }
+    }
+    .input-right {
+      ::v-deep .el-input {
+        background: rgba(0, 60, 116, 0.2);
+        box-shadow: inset 0px 0px 6px 0px #00c2ff;
+        border-radius: 2px;
+        border: 1px solid rgba(181, 207, 255, 0.5);
+        .el-input__inner {
+          background-color: transparent;
+          width: 120px;
+          height: 30px;
+          color: #fff;
+          border: none;
+        }
+        .el-input__inner::placeholder {
+          /* 在这里添加你想要修改的 placeholder 样式 */
+          font-size: 14px;
+          font-family: "Source Han Sans CN-Regular";
+          font-weight: 400;
+          color: #d3eef2;
+          line-height: 20px;
+        }
+      }
+      ::v-deep .el-input__suffix {
+        line-height: 44px;
+        color: #d3eef2;
+        right: 10px;
+        cursor: pointer;
+        .el-icon-search:before {
+          font-size: 24px;
+          color: #d3eef2;
+        }
+      }
+    }
+  }
+  .btn-reset {
+    display: flex;
+    align-items: center;
+    border-radius: 2px 2px 2px 2px;
+    border: 1px solid rgba(181, 207, 255, 0.5);
+    margin-right: 10px;
+    padding: 4px 16px;
+    .icon-reset {
+      width: 24px;
+      height: 24px;
+      background-image: url("../../../../assets/images/icon-reset.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    .text {
+      margin-left: 10px;
+      font-size: 14px;
+      font-family: Source Han Sans-Regular, Source Han Sans;
+      color: #d3eef2;
+    }
+  }
+  .btn-search {
+    display: flex;
+    align-items: center;
+    padding: 4px 16px;
+    background: rgba(255, 125, 64, 0.8);
+    box-shadow: inset 0px 0px 13px 0px #f6b463;
+    border-radius: 2px;
+    border: 1px solid rgba(181, 207, 255, 0.5);
+    .icon-search {
+      width: 24px;
+      height: 24px;
+      background-image: url("../../../../assets/images/icon-search.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    .text {
+      margin-left: 10px;
+      font-size: 14px;
+      font-family: Source Han Sans-Regular, Source Han Sans;
+      color: #d3eef2;
+    }
+  }
+}
+.tb-header {
+  width: 100%;
+  background: rgba(7, 127, 255, 0.1608);
+  display: flex;
+  border-top: 1px solid #077fff;
+  padding: 10px 20px;
+  span {
+    flex: 1;
+    font-size: 14px;
+    font-family: Source Han Sans-Regular, Source Han Sans;
+    font-weight: 400;
+    color: #d3eef2;
+  }
+}
+
+.tb-list {
+  height: 400px;
+  overflow-y: auto;
+}
+
+.tb-content {
+  width: 100%;
+  background: rgba(216, 216, 216, 0.1);
+  display: flex;
+  padding: 10px 20px;
+  span {
+    flex: 1;
+    font-size: 14px;
+    font-family: Source Han Sans-Regular, Source Han Sans;
+    font-weight: 400;
+    color: #d3eef2;
+  }
+}
+.tb-content_ {
+  width: 100%;
+  background: rgba(216, 216, 216, 0.3);
+  display: flex;
+  padding: 10px 20px;
+  span {
+    flex: 1;
+    font-size: 14px;
+    font-family: Source Han Sans-Regular, Source Han Sans;
+    font-weight: 400;
+    color: #d3eef2;
+  }
+}
+</style>