<template>
  <div class="page">
    <NavBar title="全部产品" />
    <div class="layer1 flex-col">
      <GroupTitle class="mt-4" title="产品精选" iconName="icon-shaixuan" @filter="showFilter" />
    </div>
    <!-- 产品列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onLoad"
    >
      <LoanCard
        v-for="item in state"
        :key="item.uuid"
        :max_amount="item.max_amount"
        :product_name="item.product_name"
        :features="item.features"
        :inst_name="item.inst_name"
        @click="
          $router.push({ name: 'LoanDetail', params: { uuid: item.uuid } })
        "
        class="mt-2.5"
      />
    </van-list>
    <!-- 筛选框 -->
    <PopUp
      title="筛选"
      :show="show"
      :setShow="setShow"
      @clickLeft="clickReset"
      @clickRight="clickConfirm"
    >
      <LoanFilter
        :bankList="bankList"
        :selectedBanks="selectedBanks"
        :setBanks="(v) => (selectedBanks = v)"
        :peridList="peridList"
        :selectedPerids="selectedPerids"
        :setSelectedPerids="(v) => (selectedPerids = v)"
        :typeList="typeList"
        :selectedTypes="selectedTypes"
        :setSelectedTypes="(v) => (selectedTypes = v)"
        :min="min"
        :max="max"
        :setMin="(v) => (min = +Number.parseFloat(v).toFixed(4))"
        :setMax="(v) => (max = +Number.parseFloat(v).toFixed(4))"
        :min2="min2"
        :max2="max2"
        :setMin2="(v) => (min2 = v)"
        :setMax2="(v) => (max2 = v)"
        :checkAmountValid="checkAmountValid"
      />
    </PopUp>
  </div>
</template>

<script lang="ts">
import NavBar from "@/components/NavBar/index.vue";
import GroupTitle from "@/components/GroupTitle/index.vue";
import PopUp from "@/components/PopUp/index.vue";
import LoanFilter from "@/components/PopUpContent/LoanFilter/index.vue";
import LoanCard from "@/components/Loan/LoanCard/index.vue";
import {
  defineComponent,
  ref,
  computed,
  onMounted,
  reactive,
  onUnmounted,
} from "vue";
import { queryDirectLoanReq } from "@/service/LoanProductService/index";
import { useRoute, useRouter } from "vue-router";
import {
  queryLoanProductList,
  queryLoanProductInfo,
  queryBankList,
} from "@/service/LoanProductService/index";
import { simpleItemInfo } from "@/views/withMenu/Loan/types";
import { eProductStatus, iLoanProdcutItem } from "@/service/LoanProductService/type";
import { Skeleton, Toast } from "vant";
import {
  loanSearchState,
  setSearchResult,
  clearSearchResult,
} from "@/store/loanSearchResultStore";

export default defineComponent({
  components: {
    PopUp,
    NavBar,
    GroupTitle,
    LoanCard,
    LoanFilter,
    Skeleton,
    Toast,
  },
  setup() {
    const mode = ref(+useRoute().params.mode);

    onMounted(() => {
      fetchBanks();
      /* 状态为空时获取list */
      if (loanSearchState.result.length == 0) {
        fetchList();
      }
    });

    onUnmounted(() => {
      /* 返回Loan主页时需清空list */
      if (useRoute().name === "Loan") {
        clearSearchResult();
      }
    });

    const onLoad = () => {
      current.value++;
      offset.value = (current.value - 1) * LIST_SIZE;
      if (offset.value >= total.value) {
        finished.value = true;
        return;
      } else {
        finished.value = false;
        fetchList();
      }
    };
    const current = ref(1);
    const LIST_SIZE: number = 7;
    const offset = ref(0);
    const loading = ref(false);
    const finished = ref(false);
    const total = ref(0);
    const state = computed(() => {
      return loanSearchState.result;
    });

    const bankList = computed(() => {
      return banks;
    });

    let banks: Array<{ id: number; name: String }> = reactive([]);

    const fetchList = () => {
      loading.value = true;
      queryLoanProductList({
        limit: LIST_SIZE,
        offset: offset.value,
        loan_type: mode.value,
        product_status: eProductStatus.published
      }).then((ret) => {
        loading.value = false;
        if (ret.code === 200) {
          total.value = ret.data.total;

          const promiseList = [] as Promise<any>[];

          ret.data.uuid.map((uuid) => {
            const promise = queryLoanProductInfo({ uuid }).then((ret) => {
              const { max_amount, inst_name, uuid, features, product_name } =
                ret.data;
              return {
                max_amount,
                product_name,
                features,
                inst_name,
                uuid,
              };
            });
            promiseList.push(promise);
          }
          );
          Promise.all(promiseList).then((list) => {
            list.forEach(i => {
              setSearchResult(i)
            })
          })
        }
      });
    };

    const fetchBanks = () => {
      queryBankList().then((ret) => {
        if (ret.code === 200) {
          ret.data.item.map((item) => {
            banks.push({ id: item.code, name: item.name });
          });
        }
      });
    };

    return {
      mode,
      state,
      bankList,
      loading,
      onLoad,
      finished,
    };
  },
  data() {
    return {
      show: false,
      peridList: [
        { id: { date: 1 }, name: "1年" },
        { id: { date: 3 }, name: "3年" },
        { id: { date: 10 }, name: "10年" },
      ],
      typeList: [
        { id: { guarantee_type: 1 }, name: "信用" },
        { id: { guarantee_type: 2 }, name: "抵押" },
        { id: { guarantee_type: 3 }, name: "保证" },
        { id: { guarantee_type: 4 }, name: "贴现" },
        { id: { guarantee_type: 5 }, name: "综合" },
        { id: { guarantee_type: 6 }, name: "质押" },
      ],

      selectedBanks: [] as Array<number>,
      selectedPerids: [] as Array<any>,
      selectedTypes: [] as Array<number>,

      min: undefined as undefined | number,
      max: undefined as undefined | number,
      min2: undefined as undefined | number,
      max2: undefined as undefined | number,

      reqParams: {
        selectedBanks: [] as Array<number>,
        selectedPerids: [] as Array<any>,
        selectedTypes: [] as Array<any>,
        min: undefined as undefined | number,
        max: undefined as undefined | number,
        min2: undefined as undefined | number,
        max2: undefined as undefined | number,
      },

      list: [] as Array<iLoanProdcutItem>,
    };
  },
  methods: {
    setShow(v: boolean) {
      this.show = v;
    },
    // checkInterstValid(): boolean {
    //   let isValid = true;
    //   if (this.max && this.min) {
    //     if (this.max <= this.min) {
    //       isValid = false;
    //       Toast.fail("最高利率必须大于最低利率");
    //     } else {
    //       isValid = true;
    //     }
    //   }
    //   return isValid;
    // },
    checkAmountValid(): boolean {
      let isValid = true;
      if (this.max2 && this.min2) {
        if (this.max2 <= this.min2) {
          isValid = false;
          Toast.fail("最高额度必须大于最低额度");
        } else {
          isValid = true;
        }
      }
      return isValid;
    },
    showFilter() {
      this.show = true;
      this.selectedBanks = this.reqParams.selectedBanks;
      this.selectedPerids = this.reqParams.selectedPerids;
      this.selectedTypes = this.reqParams.selectedTypes;
      this.max = this.reqParams.max;
      this.min = this.reqParams.min;
      this.max2 = this.reqParams.max2;
      this.min2 = this.reqParams.min2;
    },
    clickReset() {
      this.selectedBanks = [];
      this.selectedPerids = [];
      this.selectedTypes = [];
      this.min = undefined;
      this.max = undefined;
      this.min2 = undefined;
      this.max2 = undefined;
    },
    // 多选确认
    // clickConfirm() {
    //   this.reqParams = {
    //     ...this.reqParams,
    //     selectedBanks: this.selectedBanks,
    //     selectedPerids: this.selectedPerids,
    //     min: this.min,
    //     max: this.max,
    //     min2: this.min2,
    //     max2: this.max2,
    //   };
    //   this.show = false;
    // },

    // 单选确认
    clickConfirm() {
      this.reqParams = {
        ...this.reqParams,
        selectedBanks: this.selectedBanks,
        selectedPerids: this.selectedPerids,
        selectedTypes: this.selectedTypes,
        min: this.min,
        max: this.max,
        min2: this.min2,
        max2: this.max2,
      };
      if (this.checkAmountValid()) {
        this.queryList();
        this.show = false;
      }
    },
    queryList() {
      this.loading = true;
      queryDirectLoanReq({
        rate: +this.reqParams.min! ? +this.reqParams.min! : 0,
        min_amount: +this.reqParams.min2! ? +this.reqParams.min2! : 0,
        max_amount: +this.reqParams.max2! ? +this.reqParams.max2! : 9999,
        bank_code: this.reqParams.selectedBanks[0],
        date: this.reqParams.selectedPerids[0] ? this.reqParams.selectedPerids[0].date : undefined,
        loan_type: this.mode,
        product_status: 4,
        guarantee_type: this.reqParams.selectedTypes[0]
          ? this.reqParams.selectedTypes[0].guarantee_type
          : undefined,
      }).then((ret) => {
        if (ret.code == 200) {
          this.loading = false;
          clearSearchResult();
          ret.data.items.map((item) => {
            const { max_amount, inst_name, uuid, features, product_name } =
              item;
            setSearchResult({
              max_amount,
              product_name,
              features,
              inst_name,
              uuid,
            });
          });
        }
      });
    },
  },
});
</script>
<style lang="less" scoped>
.page {
  z-index: 1;
  position: relative;
  background-color: rgba(247, 247, 250, 1);
  justify-content: flex-start;
  align-items: flex-start;
}

.layer1 {
  z-index: auto;
  width: 100%;
}

.layer2 {
  z-index: auto;
  width: 358px;
  height: 18px;
}

.word1 {
  z-index: 17;
  width: 54px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 15px;
  letter-spacing: -0.30000001192092896px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 15px;
  text-align: center;
}

.main1 {
  z-index: 11;
  width: 17px;
  height: 11px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng39aeef61ebf4c04e189be0f880a1d512b1f31f81101ab4916ee829da20fbd661) -1px -1px
    no-repeat;
  margin: 5px 0 0 237px;
}

.main2 {
  z-index: 7;
  width: 16px;
  height: 11px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8b86eb1dc9460d0dbc2bca7ceceed1b7dcd69dd2157029edccb420d28cf9b047) -1px
    0px no-repeat;
  margin: 5px 0 0 5px;
}

.label1 {
  z-index: 4;
  width: 23px;
  height: 8px;
  margin: 6px 0 0 6px;
}

.info1 {
  z-index: 78;
  width: 65px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangHK-Medium;
  white-space: nowrap;
  line-height: 22px;
  text-align: center;
}

.word2 {
  z-index: 79;
  width: 102px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  margin: 3px 0 0 14px;
}

.label2 {
  z-index: 80;
  width: 16px;
  height: 16px;
  margin: 3px 0 0 133px;
}

.layer4 {
  z-index: auto;
  width: 343px;
  height: 114px;
  justify-content: space-between;
  margin: 20px 0 0 17px;
}

.outer1 {
  z-index: 23;
  height: 114px;
  border-radius: 20px;
  border-width: 1px;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
  width: 335px;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 0 16px 20px;
}

.block1 {
  z-index: auto;
  width: 191px;
  height: 78px;
  justify-content: space-between;
}

.group1 {
  z-index: auto;
  width: 73px;
  height: 50px;
  margin-top: 15px;
}

.txt1 {
  z-index: 28;
  width: 61px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(240, 58, 48, 1);
  font-size: 20px;
  font-family: PingFangHK-Semibold;
  white-space: nowrap;
  line-height: 28px;
  text-align: center;
  align-self: flex-start;
  margin-left: 3px;
}

.word3 {
  z-index: 32;
  width: 73px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  margin-top: 5px;
}

.group2 {
  z-index: 33;
  width: 1px;
  height: 78px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
    0px no-repeat;
}

.group3 {
  z-index: auto;
  width: 98px;
  height: 74px;
}

.txt2 {
  z-index: 29;
  width: 98px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangHK-Semibold;
  white-space: nowrap;
  line-height: 22px;
  text-align: center;
}

.txt3 {
  z-index: 30;
  width: 86px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 14px;
  letter-spacing: 0.1679999977350235px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 20px;
  text-align: center;
  align-self: flex-start;
  margin-top: 5px;
}

.info2 {
  z-index: 31;
  width: 92px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  align-self: flex-start;
  margin-top: 10px;
}

.outer2 {
  z-index: 26;
  width: 6px;
  height: 9px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng70c7ac37d37e44856a8b49947aa31eed8f33d7ab806cf2d9ff723d50672c3b9e)
    0px 0px no-repeat;
  margin-top: 41px;
}

.layer5 {
  z-index: auto;
  width: 343px;
  height: 114px;
  justify-content: space-between;
  margin: 10px 0 0 17px;
}

.bd1 {
  z-index: 35;
  height: 114px;
  border-radius: 20px;
  border-width: 1px;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
  width: 335px;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 0 16px 20px;
}

.group4 {
  z-index: auto;
  width: 260px;
  height: 78px;
  justify-content: space-between;
}

.group5 {
  z-index: auto;
  width: 73px;
  height: 50px;
  margin-top: 15px;
}

.info3 {
  z-index: 40;
  width: 58px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(240, 58, 48, 1);
  font-size: 20px;
  font-family: PingFangHK-Semibold;
  white-space: nowrap;
  line-height: 28px;
  text-align: center;
  align-self: flex-start;
  margin-left: 4px;
}

.word4 {
  z-index: 44;
  width: 73px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  margin-top: 5px;
}

.group6 {
  z-index: 45;
  width: 1px;
  height: 78px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
    0px no-repeat;
}

.group7 {
  z-index: auto;
  width: 167px;
  height: 74px;
}

.txt4 {
  z-index: 41;
  width: 167px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangHK-Semibold;
  white-space: nowrap;
  line-height: 22px;
  text-align: center;
}

.info4 {
  z-index: 42;
  width: 86px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 14px;
  letter-spacing: 0.1679999977350235px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 20px;
  text-align: center;
  align-self: flex-start;
  margin-top: 5px;
}

.txt5 {
  z-index: 43;
  width: 92px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  align-self: flex-start;
  margin-top: 10px;
}

.bd2 {
  z-index: 38;
  width: 6px;
  height: 9px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng43ebde3e0d3f341174c4a41153b4afdb2634d25c5cef2768a049679f755813a7)
    0px 0px no-repeat;
  margin-top: 41px;
}

.layer6 {
  z-index: 47;
  height: 114px;
  border-radius: 20px;
  border-width: 1px;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
  align-self: flex-end;
  width: 335px;
  justify-content: flex-end;
  align-items: flex-start;
  margin: 10px 8px 0 0;
  padding: 0 0 16px 20px;
}

.section1 {
  z-index: auto;
  width: 185px;
  height: 78px;
  justify-content: space-between;
}

.box1 {
  z-index: auto;
  width: 73px;
  height: 50px;
  margin-top: 15px;
}

.info5 {
  z-index: 48;
  width: 62px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(240, 58, 48, 1);
  font-size: 20px;
  font-family: PingFangHK-Semibold;
  white-space: nowrap;
  line-height: 28px;
  text-align: center;
  align-self: flex-start;
  margin-left: 2px;
}

.info6 {
  z-index: 52;
  width: 73px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  margin-top: 5px;
}

.box2 {
  z-index: 53;
  width: 1px;
  height: 78px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
    0px no-repeat;
}

.box3 {
  z-index: auto;
  width: 92px;
  height: 74px;
}

.word5 {
  z-index: 49;
  width: 65px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangHK-Semibold;
  white-space: nowrap;
  line-height: 22px;
  text-align: center;
  align-self: flex-start;
}

.txt6 {
  z-index: 50;
  width: 57px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 14px;
  letter-spacing: 0.1679999977350235px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 20px;
  text-align: center;
  align-self: flex-start;
  margin-top: 5px;
}

.word6 {
  z-index: 51;
  width: 92px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  margin-top: 10px;
}

.layer7 {
  z-index: 55;
  height: 114px;
  border-radius: 20px;
  border-width: 1px;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
  align-self: flex-end;
  width: 335px;
  justify-content: flex-end;
  align-items: flex-start;
  margin: 10px 8px 0 0;
  padding: 0 0 16px 20px;
}

.section2 {
  z-index: auto;
  width: 185px;
  height: 78px;
  justify-content: space-between;
}

.wrap1 {
  z-index: auto;
  width: 73px;
  height: 50px;
  margin-top: 15px;
}

.txt7 {
  z-index: 56;
  width: 62px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(240, 58, 48, 1);
  font-size: 20px;
  font-family: PingFangHK-Semibold;
  white-space: nowrap;
  line-height: 28px;
  text-align: center;
  align-self: flex-start;
  margin-left: 2px;
}

.info7 {
  z-index: 60;
  width: 73px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  margin-top: 5px;
}

.wrap2 {
  z-index: 61;
  width: 1px;
  height: 78px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
    0px no-repeat;
}

.wrap3 {
  z-index: auto;
  width: 92px;
  height: 74px;
}

.txt8 {
  z-index: 57;
  width: 65px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangHK-Semibold;
  white-space: nowrap;
  line-height: 22px;
  text-align: center;
  align-self: flex-start;
}

.info8 {
  z-index: 58;
  width: 57px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 14px;
  letter-spacing: 0.1679999977350235px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 20px;
  text-align: center;
  align-self: flex-start;
  margin-top: 5px;
}

.txt9 {
  z-index: 59;
  width: 92px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  margin-top: 10px;
}

.layer8 {
  z-index: 63;
  height: 114px;
  border-radius: 20px;
  border-width: 1px;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
  align-self: flex-end;
  width: 335px;
  justify-content: flex-end;
  align-items: flex-start;
  margin: 10px 8px 0 0;
  padding: 0 0 16px 20px;
}

.main3 {
  z-index: auto;
  width: 185px;
  height: 78px;
  justify-content: space-between;
}

.box4 {
  z-index: auto;
  width: 73px;
  height: 50px;
  margin-top: 15px;
}

.txt10 {
  z-index: 64;
  width: 62px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(240, 58, 48, 1);
  font-size: 20px;
  font-family: PingFangHK-Semibold;
  white-space: nowrap;
  line-height: 28px;
  text-align: center;
  align-self: flex-start;
  margin-left: 2px;
}

.word7 {
  z-index: 68;
  width: 73px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  margin-top: 5px;
}

.box5 {
  z-index: 69;
  width: 1px;
  height: 78px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
    0px no-repeat;
}

.box6 {
  z-index: auto;
  width: 92px;
  height: 74px;
}

.word8 {
  z-index: 65;
  width: 65px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangHK-Semibold;
  white-space: nowrap;
  line-height: 22px;
  text-align: center;
  align-self: flex-start;
}

.info9 {
  z-index: 66;
  width: 57px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 14px;
  letter-spacing: 0.1679999977350235px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 20px;
  text-align: center;
  align-self: flex-start;
  margin-top: 5px;
}

.txt11 {
  z-index: 67;
  width: 92px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  margin-top: 10px;
}

.layer9 {
  z-index: 19;
  height: 28px;
  align-items: center;
}

.main4 {
  z-index: auto;
  width: 201px;
  height: 22px;
  justify-content: space-between;
}

.bd3 {
  z-index: 92;
  width: 16px;
  height: 16px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngbd286f871df361d77a59e4d06a98bd81b81c3bf9b82240cabd0a2599ffc15392)
    2px -1px no-repeat;
  margin-top: 5px;
}

.info10 {
  z-index: 20;
  width: 65px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 22px;
  text-align: center;
}

.layer10 {
  z-index: 25;
  position: absolute;
  left: 306px;
  top: 154px;
  width: 56px;
  height: 30px;
  border-radius: 15px 0 0 15px;
  background-color: rgba(255, 145, 13, 1);
}

.word9 {
  z-index: 27;
  position: absolute;
  left: 321px;
  top: 158px;
  width: 29px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  letter-spacing: 0.1679999977350235px;
  font-family: PingFangHK-Medium;
  white-space: nowrap;
  line-height: 20px;
  text-align: center;
}

.layer11 {
  z-index: 37;
  position: absolute;
  left: 306px;
  top: 278px;
  width: 56px;
  height: 30px;
  border-radius: 15px 0 0 15px;
  background-color: rgba(53, 85, 220, 1);
}

.txt12 {
  z-index: 39;
  position: absolute;
  left: 321px;
  top: 282px;
  width: 29px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  letter-spacing: 0.1679999977350235px;
  font-family: PingFangHK-Medium;
  white-space: nowrap;
  line-height: 20px;
  text-align: center;
}

.layer12 {
  z-index: 71;
  height: 114px;
  border-radius: 20px;
  border-width: 1px;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
  width: 335px;
  justify-content: flex-end;
  align-items: flex-start;
  position: absolute;
  left: 20px;
  top: 763px;
  padding: 0 0 16px 22px;
}

.layer13 {
  z-index: auto;
  width: 156px;
  height: 78px;
}

.info11 {
  z-index: 72;
  width: 62px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(240, 58, 48, 1);
  font-size: 20px;
  font-family: PingFangHK-Semibold;
  white-space: nowrap;
  line-height: 28px;
  text-align: center;
  margin-top: 15px;
}

.bd4 {
  z-index: 75;
  width: 1px;
  height: 78px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngfeebb919020bb7ef135b93939ebfdbb759f4f9d1c08e335e6a66571c347bff55) -1px
    0px no-repeat;
  margin-left: 19px;
}

.bd5 {
  z-index: auto;
  width: 65px;
  height: 47px;
  margin-left: 9px;
}

.txt13 {
  z-index: 73;
  width: 65px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangHK-Semibold;
  white-space: nowrap;
  line-height: 22px;
  text-align: center;
}

.word10 {
  z-index: 74;
  width: 57px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 14px;
  letter-spacing: 0.1679999977350235px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 20px;
  text-align: center;
  align-self: flex-start;
  margin-top: 5px;
}
</style>
