<template>
  <div class="page flex-col">
    <NavBar title="精选理财" />
    <div class="layer1 flex-col">
      <GroupTitle
        class="mt-4"
        title="精选理财"
        subtitle="安稳省心 爆款甄选"
        iconName="icon-shaixuan"
        @filter="showFilter"
      />
      <FnsCard4 />
      <FnsCard4 />
      <FnsCard4 />
      <FnsCard4 />
      <FnsCard4 />
      <FnsCard4 />
      <FnsCard4 />
      <FnsCard4 />
    </div>
    <PopUp
      title="筛选"
      :show="show"
      :setShow="(v) => (show = v)"
      @clickLeft="clickReset"
      @clickRight="clickConfirm"
    >
      <FnsFilter
        :bankList="bankList"
        :selectedBanks="selectedBanks"
        :setBanks="(v) => (selectedBanks = v)"
        :peridList="peridList"
        :selectedPerids="selectedPerids"
        :setSelectedPerids="(v) => (selectedPerids = v)"
        :min="min"
        :max="max"
        :setMin="(v) => (min = v)"
        :setMax="(v) => (max = v)"
      />
    </PopUp>
  </div>
</template>
<script>
import NavBar from "@/components/NavBar/index.vue";
import GroupTitle from "@/components/GroupTitle/index.vue";
import FnsCard4 from "@/components/FnsCard4/index.vue";
import PopUp from "@/components/PopUp/index.vue";
import FnsFilter from "@/components/PopUpContent/FnsFilter/index.vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: {
    PopUp,
    NavBar,
    GroupTitle,
    FnsFilter,
    FnsCard4,
  },
  data() {
    return {
      show: false,
      bankList: [
        {
          name: "zhongguo",
          id: 1,
        },
        {
          name: "df",
          id: 12,
        },
        {
          name: "43",
          id: 13,
        },
        {
          name: "zhongg3456uo",
          id: 14,
        },
        {
          name: "zhong345guo",
          id: 15,
        },
      ],
      selectedBanks: [],
      peridList: [
        { id: 1, name: "lsdkfj" },
        { id: 12, name: "lsdkfj" },
        { id: 31, name: "lsdkfj" },
        { id: 14, name: "lsdkfj" },
        { id: 15, name: "lsdkfj" },
      ],
      selectedPerids: [],
      min: undefined,
      max: undefined,

      reqParams: {
        selectedBanks: [],
        selectedPerids: [],
        min: undefined,
        max: undefined,
      },
    };
  },
  methods: {
    showFilter() {
      this.show = true;
      this.selectedBanks = this.reqParams.selectedBanks;
      this.selectedPerids = this.reqParams.selectedPerids;
      this.max = this.reqParams.max;
      this.min = this.reqParams.min;
    },
    clickReset() {
      this.selectedBanks = [];
      this.selectedPerids = [];
      this.min = undefined;
      this.max = undefined;
    },
    clickConfirm() {
      this.reqParams = {
        ...this.reqParams,
        selectedBanks: this.selectedBanks,
        selectedPerids: this.selectedPerids,
        min: this.min,
        max: this.max,
      };
      this.show = false;
    },
  },
});
</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>
