更新 航次列表样式字段

src/App.vue

@@ -73,7 +73,7 @@ export default {
 .main-section {
   margin: 24px 0 0 24px;
   height: calc(100% - 76px);
-  overflow: scroll;
+  overflow-y: auto;
 }
 
 .line-container-p18 {

src/views/voyage/voyageList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="line-container-p24">
-    <div style="display: flex; justify-content: space-between">
+    <div class="df jcsb aic">
       <div class="df aic">
         <div
           @click="changeVoyageType(0)"
@@ -54,7 +54,7 @@
           <el-radio :label="1">升序</el-radio>
         </el-radio-group> -->
         <el-input
-          placeholder="请输入货主名称/船名/MMSi"
+          placeholder="请输入货主名称/船名/MMSI"
           prefix-icon="el-icon-search"
           v-model="term"
           clearable
@@ -204,13 +204,18 @@
         </span>
       </template>
     </el-dialog>
-    <el-table :data="tableData" stripe style="width: 100%; margin-top: 24px">
-      <el-table-column
+    <el-table
+      :data="tableData"
+      stripe
+      style="width: 100%; margin-top: 24px"
+      :row-style="rowStyle"
+    >
+      <!-- <el-table-column
         type="index"
         label="序号"
         min-width="80"
         align="center"
-      ></el-table-column>
+      ></el-table-column> -->
       <el-table-column
         prop="voyageName"
         label="航次名称"
@@ -220,18 +225,19 @@
       <el-table-column
         prop="loadDiscPort"
         label="装货港-卸货港"
-        min-width="200"
+        min-width="160"
         align="center"
       ></el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         prop="setSailTime"
         label="开航时间"
         min-width="100"
         align="center"
-      ></el-table-column>
+      ></el-table-column> -->
       <el-table-column
         prop="expectedArrivalTime"
         label="预计到港时间"
+        sortable
         min-width="100"
         align="center"
       ></el-table-column>
@@ -248,29 +254,42 @@
       <el-table-column
         prop="daysInPort"
         label="在港天数"
+        sortable
         min-width="80"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="todayPhotoCount"
         label="今日照片"
-        min-width="80"
+        min-width="70"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="cargo"
         label="货种"
-        min-width="80"
+        min-width="70"
         align="center"
       ></el-table-column>
 
       <el-table-column
         prop="tons"
-        label="吨位(吨)"
+        label="装载吨位"
+        min-width="80"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="tons"
+        label="已卸货吨位"
         min-width="80"
         align="center"
       ></el-table-column>
       <el-table-column
+        prop="tons"
+        label="剩余吨位"
+        min-width="80"
+        align="center"
+      ></el-table-column>
+      <!-- <el-table-column
         prop="waybillStatus"
         sortable
         label="签单状态"
@@ -286,7 +305,7 @@
               : "已签单"
           }}
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <!-- <el-table-column
         prop="transStatus"
         label="船舶状态"
@@ -295,15 +314,15 @@
       ></el-table-column> -->
       <el-table-column
         prop="hasInsurance"
-        label="保险单状态"
-        min-width="100"
+        label="保险状态"
+        min-width="70"
         align="center"
       >
         <template v-slot="scope">
           {{ scope.row.hasInsurance == 0 ? "未购买" : "已购买" }}
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         sortable
         prop="createTime"
         label="创建时间"
@@ -315,7 +334,7 @@
         label="备注"
         min-width="100"
         align="center"
-      ></el-table-column>
+      ></el-table-column> -->
       <el-table-column label="操作" min-width="80" align="center">
         <template v-slot="scope">
           <el-button
@@ -338,7 +357,7 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
 import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import store from "../../store";
@@ -347,412 +366,360 @@ import md5 from "md5";
 import api from "../../apis/fetch";
 import _ from "lodash";
 
-export default {
-  setup() {
-    let currentPage = ref(1);
-    let term = ref("");
-    let tableData = ref([]);
-    let total = ref(0);
-    let status = ref(0);
-    async function getVoyageList() {
-      tableData.value = [];
-
-      let res = await api.getVoyageList({
-        cargoOwnerId: 0,
-        shipId: 0,
-        status: status.value,
-        term: term.value,
-        currentPage: currentPage.value,
-        size: 10,
-      });
-      term.value = "";
-      if (res.data.status == 0) {
-        tableData.value = res.data.result;
-        total.value = res.data.total;
-      } else {
-        ElNotification({
-          type: "error",
-          title: res.data.msg,
-        });
-      }
-    }
-    function changeVoyageType(s) {
-      term.value = "";
-      currentPage.value = 1;
-      status.value = s;
-      getVoyageList();
-    }
-    async function voyageDetail(id) {
-      router.push({
-        path: "/voyage/voyageDetail",
-        query: {
-          id,
-        },
-      });
-    }
-    function pageChange(e) {
-      currentPage.value = e;
-      getVoyageList();
-    }
-
-    function goToVoyageAdd() {
-      router.push({
-        path: "/voyage/voyageAdd",
-      });
-    }
-    let voyageAddDialogVisible = ref(false);
-    const rules = reactive({
-      rules: {
-        voyageName: [
-          { required: false, message: "请填写航次名称", trigger: "blur" },
-        ],
-        shipName: [{ required: true, message: "请选择船舶", trigger: "blur" }],
-        cargoOwnerName: [
-          { required: true, message: "请选择货主", trigger: "blur" },
-        ],
-        startTime: [
-          { required: true, message: "请填写开始时间", trigger: "blur" },
-        ],
-        loadPort: [
-          { required: true, message: "请填写装货港", trigger: "blur" },
-        ],
-        dischargeProt: [
-          { required: true, message: "请填写卸货港", trigger: "blur" },
-        ],
-        cargo: [{ required: true, message: "请填写货种", trigger: "blur" }],
-        tons: [{ required: false, message: "请填写吨位", trigger: "blur" }],
-        pieces: [{ required: false, message: "请填写件数", trigger: "blur" }],
-      },
-    });
-    let voyageForm = reactive({
-      voyageForm: {
-        voyageName: "",
-        cargoOwnerId: "",
-        cargoOwnerName: "",
-        startTime: "",
-        endTime: "",
-        loadPort: "",
-        dischargeProt: "",
-        cargo: "",
-        tons: "",
-        loadPortId: "",
-        dischargeProtId: "",
-        shipId: "",
-        shipName: "",
-      },
+let currentPage = ref(1);
+let term = ref("");
+let tableData = ref([]);
+let total = ref(0);
+let status = ref(0);
+async function getVoyageList() {
+  tableData.value = [];
+
+  let res = await api.getVoyageList({
+    cargoOwnerId: 0,
+    shipId: 0,
+    status: status.value,
+    term: term.value,
+    currentPage: currentPage.value,
+    size: 10,
+  });
+  term.value = "";
+  if (res.data.status == 0) {
+    tableData.value = res.data.result;
+    total.value = res.data.total;
+  } else {
+    ElNotification({
+      type: "error",
+      title: res.data.msg,
     });
+  }
+}
+function changeVoyageType(s) {
+  term.value = "";
+  currentPage.value = 1;
+  status.value = s;
+  getVoyageList();
+}
+async function voyageDetail(id) {
+  router.push({
+    path: "/voyage/voyageDetail",
+    query: {
+      id,
+    },
+  });
+}
+function pageChange(e) {
+  currentPage.value = e;
+  getVoyageList();
+}
 
-    function clear(type) {
-      setTimeout(() => {
-        switch (type) {
-          case "shipId": {
-            let index = ref(-1);
-            for (let i in shipsCache.value) {
-              if (
-                voyageForm.voyageForm.shipName == shipsCache.value[i].shipName
-              ) {
-                index.value = i;
-                break;
-              }
-            }
-            if (index.value != -1) {
-              voyageForm.voyageForm.shipId =
-                shipsCache.value[index.value].shipId;
-            } else {
-              let b = shipsCache.value.some((item) => {
-                return (
-                  item.shipId == voyageForm.voyageForm.shipId &&
-                  item.shipName == voyageForm.voyageForm.shipName
-                );
-              });
-              voyageForm.voyageForm["shipId"] = "";
-              voyageForm.voyageForm["shipName"] = "";
-            }
+function goToVoyageAdd() {
+  router.push({
+    path: "/voyage/voyageAdd",
+  });
+}
+let voyageAddDialogVisible = ref(false);
+const rules = ref({
+  voyageName: [{ required: false, message: "请填写航次名称", trigger: "blur" }],
+  shipName: [{ required: true, message: "请选择船舶", trigger: "blur" }],
+  cargoOwnerName: [{ required: true, message: "请选择货主", trigger: "blur" }],
+  startTime: [{ required: true, message: "请填写开始时间", trigger: "blur" }],
+  loadPort: [{ required: true, message: "请填写装货港", trigger: "blur" }],
+  dischargeProt: [{ required: true, message: "请填写卸货港", trigger: "blur" }],
+  cargo: [{ required: true, message: "请填写货种", trigger: "blur" }],
+  tons: [{ required: false, message: "请填写吨位", trigger: "blur" }],
+  pieces: [{ required: false, message: "请填写件数", trigger: "blur" }],
+});
+let voyageForm = ref({
+  voyageName: "",
+  cargoOwnerId: "",
+  cargoOwnerName: "",
+  startTime: "",
+  endTime: "",
+  loadPort: "",
+  dischargeProt: "",
+  cargo: "",
+  tons: "",
+  loadPortId: "",
+  dischargeProtId: "",
+  shipId: "",
+  shipName: "",
+});
+
+function clear(type) {
+  setTimeout(() => {
+    switch (type) {
+      case "shipId": {
+        let index = ref(-1);
+        for (let i in shipsCache.value) {
+          if (voyageForm.voyageForm.shipName == shipsCache.value[i].shipName) {
+            index.value = i;
             break;
           }
-          case "cargoOwnerId": {
-            let index = ref(-1);
-            for (let i in cargoOwnersCache.value) {
-              if (
-                voyageForm.voyageForm.cargoOwnerName ==
-                cargoOwnersCache.value[i].userName
-              ) {
-                index.value = i;
-                break;
-              }
-            }
-            if (index.value != -1) {
-              voyageForm.voyageForm.cargoOwnerId =
-                cargoOwnersCache.value[index.value].userId;
-            } else {
-              let b = cargoOwnersCache.value.some((item) => {
-                return (
-                  item.userId == voyageForm.voyageForm.cargoOwnerId &&
-                  item.userName == voyageForm.voyageForm.cargoOwnerName
-                );
-              });
-              if (!b) {
-                voyageForm.voyageForm["cargoOwnerId"] = "";
-                voyageForm.voyageForm["cargoOwnerName"] = "";
-              }
-            }
-
+        }
+        if (index.value != -1) {
+          voyageForm.voyageForm.shipId = shipsCache.value[index.value].shipId;
+        } else {
+          let b = shipsCache.value.some((item) => {
+            return (
+              item.shipId == voyageForm.voyageForm.shipId &&
+              item.shipName == voyageForm.voyageForm.shipName
+            );
+          });
+          voyageForm.voyageForm["shipId"] = "";
+          voyageForm.voyageForm["shipName"] = "";
+        }
+        break;
+      }
+      case "cargoOwnerId": {
+        let index = ref(-1);
+        for (let i in cargoOwnersCache.value) {
+          if (
+            voyageForm.voyageForm.cargoOwnerName ==
+            cargoOwnersCache.value[i].userName
+          ) {
+            index.value = i;
             break;
           }
-          case "loadPort": {
-            let index = ref(-1);
-            for (let i in colCache.value) {
-              if (voyageForm.voyageForm.loadPort == colCache.value[i].value) {
-                index.value = i;
-                break;
-              }
-            }
-            if (index.value != -1) {
-              voyageForm.voyageForm.loadPortId =
-                colCache.value[index.value].key;
-            } else {
-              let b = colCache.value.some((item) => {
-                return (
-                  item.value == voyageForm.voyageForm.loadPort &&
-                  item.key == voyageForm.voyageForm.loadPortId
-                );
-              });
-              if (!b) {
-                voyageForm.voyageForm["loadPort"] = "";
-                voyageForm.voyageForm["loadPortId"] = "";
-              }
-            }
-
-            break;
+        }
+        if (index.value != -1) {
+          voyageForm.voyageForm.cargoOwnerId =
+            cargoOwnersCache.value[index.value].userId;
+        } else {
+          let b = cargoOwnersCache.value.some((item) => {
+            return (
+              item.userId == voyageForm.voyageForm.cargoOwnerId &&
+              item.userName == voyageForm.voyageForm.cargoOwnerName
+            );
+          });
+          if (!b) {
+            voyageForm.voyageForm["cargoOwnerId"] = "";
+            voyageForm.voyageForm["cargoOwnerName"] = "";
           }
+        }
 
-          case "dischargeProt": {
-            let index = ref(-1);
-            for (let i in colCache.value) {
-              if (
-                voyageForm.voyageForm.dischargeProt == colCache.value[i].value
-              ) {
-                index.value = i;
-                break;
-              }
-            }
-            if (index.value != -1) {
-              voyageForm.voyageForm.dischargeProtId =
-                colCache.value[index.value].key;
-            } else {
-              let b = colCache.value.some((item) => {
-                return (
-                  item.value == voyageForm.voyageForm.dischargeProt &&
-                  item.key == voyageForm.voyageForm.dischargeProtId
-                );
-              });
-              if (!b) {
-                voyageForm.voyageForm["dischargeProt"] = "";
-                voyageForm.voyageForm["dischargeProtId"] = "";
-              }
-            }
+        break;
+      }
+      case "loadPort": {
+        let index = ref(-1);
+        for (let i in colCache.value) {
+          if (voyageForm.voyageForm.loadPort == colCache.value[i].value) {
+            index.value = i;
             break;
           }
         }
-      }, 200);
-    }
-    let addVoyageForm = ref(null);
-
-    async function addVoyage() {
-      addVoyageForm.value.validate(async (valid) => {
-        if (valid) {
-          console.log("提交", voyageForm.voyageForm);
-          let res = await api.addVoyage({
-            ...voyageForm.voyageForm,
+        if (index.value != -1) {
+          voyageForm.voyageForm.loadPortId = colCache.value[index.value].key;
+        } else {
+          let b = colCache.value.some((item) => {
+            return (
+              item.value == voyageForm.voyageForm.loadPort &&
+              item.key == voyageForm.voyageForm.loadPortId
+            );
           });
-          if (res.data.status == 0) {
-            ElNotification({
-              title: res.data.msg,
-              type: "success",
-            });
-            resetAddVoyageForm();
-            getVoyageList();
-          } else {
-            console.log(res);
-            ElNotification({
-              title: res.data.msg,
-              type: "error",
-            });
+          if (!b) {
+            voyageForm.voyageForm["loadPort"] = "";
+            voyageForm.voyageForm["loadPortId"] = "";
           }
-        } else {
-          console.log("未提交", voyageForm.voyageForm);
         }
-      });
-    }
 
-    let shipsCache = ref([]);
-    let colCache = ref([]);
-    let cargoOwnersCache = ref([]);
+        break;
+      }
 
-    const searchShip = _.debounce(
-      async (queryString, cb) => {
-        if (!queryString) return;
-        let res = await api.searchShip({
-          term: queryString,
-        });
-        let ships = [];
-        if (res.data.status == 0) {
-          ships = res.data.result;
-          for (let i of ships) {
-            i.value = `${i.shipName}`;
+      case "dischargeProt": {
+        let index = ref(-1);
+        for (let i in colCache.value) {
+          if (voyageForm.voyageForm.dischargeProt == colCache.value[i].value) {
+            index.value = i;
+            break;
           }
-          shipsCache.value = ships;
-          cb(ships);
         }
-      },
-      1000,
-      { leading: true }
-    );
-
-    const selectShip = (item) => {
-      voyageForm.voyageForm.shipId = item.shipId;
-    };
-
-    const searchCargoOwner = _.debounce(
-      async (queryString, cb) => {
-        if (!queryString) return;
-        let res = await api.searchUser({
-          term: queryString,
-          identity: 2,
-        });
-        let cargoOwners = [];
-        if (res.data.status == 0) {
-          cargoOwners = res.data.result;
-          for (let i of cargoOwners) {
-            i.value = `${i.userName}`;
+        if (index.value != -1) {
+          voyageForm.voyageForm.dischargeProtId =
+            colCache.value[index.value].key;
+        } else {
+          let b = colCache.value.some((item) => {
+            return (
+              item.value == voyageForm.voyageForm.dischargeProt &&
+              item.key == voyageForm.voyageForm.dischargeProtId
+            );
+          });
+          if (!b) {
+            voyageForm.voyageForm["dischargeProt"] = "";
+            voyageForm.voyageForm["dischargeProtId"] = "";
           }
-          cargoOwnersCache.value = cargoOwners;
-          cb(cargoOwners);
-        }
-      },
-      1000,
-      { leading: true }
-    );
-
-    const selectCargoOwner = (item) => {
-      voyageForm.voyageForm.cargoOwnerId = item.userId;
-    };
-
-    const getCol = _.debounce(
-      async (queryString, cb) => {
-        if (!queryString) return;
-        let res = await api.getCol({
-          term: queryString,
-        });
-        if (res.data.status == 0) {
-          colCache.value = [...colCache.value, ...res.data.result];
-          colCache.value = _.uniqBy(colCache.value, "key");
-
-          cb(res.data.result);
         }
-      },
-      1000,
-      { leading: true }
-    );
-
-    const selectLoadPort = (item) => {
-      voyageForm.voyageForm.loadPortId = item.key;
-      voyageForm.voyageForm.loadPort = item.value;
-    };
-
-    const selectDischargeProt = (item) => {
-      voyageForm.voyageForm.dischargeProtId = item.key;
-      voyageForm.voyageForm.dischargeProt = item.value;
-    };
-
-    function resetAddVoyageForm() {
-      voyageAddDialogVisible.value = false;
-      addVoyageForm.value.resetFields();
+        break;
+      }
     }
-
-    let sortradio = ref(0);
-
-    let isUpLoading = ref(false);
-    function upFYDISuccess(e) {
-      if (e.status == 0) {
-        ElNotification.success({
-          title: "成功",
-          duration: 2000,
-          message: e.msg,
+  }, 200);
+}
+let addVoyageForm = ref(null);
+
+async function addVoyage() {
+  addVoyageForm.value.validate(async (valid) => {
+    if (valid) {
+      console.log("提交", voyageForm.voyageForm);
+      let res = await api.addVoyage({
+        ...voyageForm.voyageForm,
+      });
+      if (res.data.status == 0) {
+        ElNotification({
+          title: res.data.msg,
+          type: "success",
         });
+        resetAddVoyageForm();
+        getVoyageList();
       } else {
-        ElNotification.error({
-          title: "失败",
-          duration: 2000,
-          message: e.msg,
+        console.log(res);
+        ElNotification({
+          title: res.data.msg,
+          type: "error",
         });
       }
-      isUpLoading.value = false;
-      FYDIModalVisable.value = false;
-      FYDIParams.value.cargoOwnerId = "";
-      cargoOwnerCompanyStr.value = "";
+    } else {
+      console.log("未提交", voyageForm.voyageForm);
     }
+  });
+}
 
-    function beforeFYDI() {
-      isUpLoading.value = true;
-    }
+let shipsCache = ref([]);
+let colCache = ref([]);
+let cargoOwnersCache = ref([]);
 
-    let FYDIModalVisable = ref(false);
-    let FYDIParams = ref({
-      cargoOwnerId: "",
+const searchShip = _.debounce(
+  async (queryString, cb) => {
+    if (!queryString) return;
+    let res = await api.searchShip({
+      term: queryString,
     });
-    let cargoOwnerCompanyStr = ref("");
-    function selectCargoOwnerUpload(item) {
-      FYDIParams.value.cargoOwnerId = item.key;
+    let ships = [];
+    if (res.data.status == 0) {
+      ships = res.data.result;
+      for (let i of ships) {
+        i.value = `${i.shipName}`;
+      }
+      shipsCache.value = ships;
+      cb(ships);
     }
+  },
+  1000,
+  { leading: true }
+);
+
+const selectShip = (item) => {
+  voyageForm.voyageForm.shipId = item.shipId;
+};
 
-    function FYDIModalClose() {
-      isUpLoading.value = false;
-      FYDIModalVisable.value = false;
-      FYDIParams.value.cargoOwnerId = "";
-      cargoOwnerCompanyStr.value = "";
+const searchCargoOwner = _.debounce(
+  async (queryString, cb) => {
+    if (!queryString) return;
+    let res = await api.searchUser({
+      term: queryString,
+      identity: 2,
+    });
+    let cargoOwners = [];
+    if (res.data.status == 0) {
+      cargoOwners = res.data.result;
+      for (let i of cargoOwners) {
+        i.value = `${i.userName}`;
+      }
+      cargoOwnersCache.value = cargoOwners;
+      cb(cargoOwners);
     }
+  },
+  1000,
+  { leading: true }
+);
 
-    getVoyageList();
-    onMounted(() => {});
-
-    return {
-      currentPage,
-      term,
-      tableData,
-      total,
-      status,
-      changeVoyageType,
-      getVoyageList,
-      voyageDetail,
-      pageChange,
-      goToVoyageAdd,
-      addVoyage,
-      voyageAddDialogVisible,
-      addVoyageForm,
-      ...toRefs(rules),
-      ...toRefs(voyageForm),
-      searchShip,
-      selectShip,
-      searchCargoOwner,
-      selectCargoOwner,
-      resetAddVoyageForm,
-      getCol,
-      selectLoadPort,
-      selectDischargeProt,
-      clear,
-      sortradio,
-      upFYDISuccess,
-      beforeFYDI,
-      isUpLoading,
-      FYDIModalVisable,
-      FYDIParams,
-      cargoOwnerCompanyStr,
-      selectCargoOwnerUpload,
-      FYDIModalClose,
-    };
+const selectCargoOwner = (item) => {
+  voyageForm.voyageForm.cargoOwnerId = item.userId;
+};
+
+const getCol = _.debounce(
+  async (queryString, cb) => {
+    if (!queryString) return;
+    let res = await api.getCol({
+      term: queryString,
+    });
+    if (res.data.status == 0) {
+      colCache.value = [...colCache.value, ...res.data.result];
+      colCache.value = _.uniqBy(colCache.value, "key");
+
+      cb(res.data.result);
+    }
   },
+  1000,
+  { leading: true }
+);
+
+const selectLoadPort = (item) => {
+  voyageForm.voyageForm.loadPortId = item.key;
+  voyageForm.voyageForm.loadPort = item.value;
+};
+
+const selectDischargeProt = (item) => {
+  voyageForm.voyageForm.dischargeProtId = item.key;
+  voyageForm.voyageForm.dischargeProt = item.value;
 };
+
+function resetAddVoyageForm() {
+  voyageAddDialogVisible.value = false;
+  addVoyageForm.value.resetFields();
+}
+
+let sortradio = ref(0);
+
+let isUpLoading = ref(false);
+function upFYDISuccess(e) {
+  if (e.status == 0) {
+    ElNotification.success({
+      title: "成功",
+      duration: 2000,
+      message: e.msg,
+    });
+  } else {
+    ElNotification.error({
+      title: "失败",
+      duration: 2000,
+      message: e.msg,
+    });
+  }
+  isUpLoading.value = false;
+  FYDIModalVisable.value = false;
+  FYDIParams.value.cargoOwnerId = "";
+  cargoOwnerCompanyStr.value = "";
+}
+
+function beforeFYDI() {
+  isUpLoading.value = true;
+}
+
+let FYDIModalVisable = ref(false);
+let FYDIParams = ref({
+  cargoOwnerId: "",
+});
+let cargoOwnerCompanyStr = ref("");
+function selectCargoOwnerUpload(item) {
+  FYDIParams.value.cargoOwnerId = item.key;
+}
+
+function FYDIModalClose() {
+  isUpLoading.value = false;
+  FYDIModalVisable.value = false;
+  FYDIParams.value.cargoOwnerId = "";
+  cargoOwnerCompanyStr.value = "";
+}
+
+function rowStyle({ row }) {
+  let rowStyle = {};
+  if (row.daysInPort >= 30) {
+    rowStyle.color = "red";
+    return rowStyle;
+  }
+}
+onMounted(() => {
+  getVoyageList();
+});
 </script>
 <style scoped>
 .search-btn {