<template>
  <!-- 杉德分账数据导出 -->
  <div class="page flex-col">
    <s-header
      :name="$t('subLedgerManage.exportOfShandeLedgerData')"
      :noback="false"
    ></s-header>
    <div class="group1 flex-col justify-between">
      <div class="bd2 flex-col">
        <div class="layer1 flex-col">
          <div class="main1 l-flex-between o-plr-20">
            <div class="tab l-f l-flex-e">
              <span class="o-mr-6 c-text-13" style="color: #404d74"
                >{{ $t("subLedgerManage.accountType") }}:</span
              >
              <kTabs @tabchg="tabChg" :tabList="tabList"></kTabs>
            </div>
            <div @click="noticeClk" class="l-flex-RC o-ml-6">
              <span class="c-text-13" style="color: #404d74">{{
                $t("subLedgerManage.filterAccounts")
              }}</span>
              <div class="bd4 flex-col"></div>
            </div>
          </div>
          <div class="main2 flex-col">
            <div class="bd5 flex-col justify-between">
              <div class="outer1 flex-row justify-between">
                <div class="ImageText1 flex-col">
                  <div class="group4 flex-row justify-between">
                    <div class="outer2 flex-col"></div>
                    <div class="TextGroup1 flex-col">
                      <span class="word6"
                        >{{ $t("merchantManage.total") }}{{ pageTotals
                        }}{{ $t("merchantManage.recordsInTotal") }}</span
                      >
                    </div>
                  </div>
                </div>
                <div @click="exportFile" class="l-flex-RC">
                  <span class="c-text-13 c-text-color">{{
                    $t("subLedgerManage.exportToExcel")
                  }}</span>
                  <div class="mod2 flex-col o-ml-6"></div>
                </div>
              </div>
              <img
                class="img1"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
              />
            </div>
          </div>
          <div class="cust_vantBorder">
            <van-field
              clearable
              v-model="settleParam.settAmount"
              :placeholder="
                $t('subLedgerManage.settleProcess.settleAmountPlaceholder')
              "
              :label="$t('subLedgerManage.settleProcess.settleAmount')"
            />
            <van-field
              clearable
              v-model="settleParam.notCalcAccount"
              :placeholder="
                $t('subLedgerManage.settleProcess.notAccountNumPlaceholder')
              "
              :label="$t('subLedgerManage.settleProcess.notAccountNum')"
            />
          </div>
          <div class="main5 flex-col">
            <span @click="settleClk" class="txt4">{{
              $t("subLedgerManage.settleProcess.settleProcess")
            }}</span>
          </div>
          <van-pull-refresh disabled v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('common.noMoreTxt')"
              @load="onLoad"
              :offset="300"
              :immediate-check="false"
            >
              <div v-for="item in tableData" :key="item.id">
                <div class="main6 flex-col"></div>
                <span class="word10">{{ item.bankName }}</span>
                <div class="main7 flex-row justify-between">
                  <span class="word11"
                    >{{ $t("subLedgerManage.account") }}：{{
                      item.bankChannelNo
                    }}</span
                  >
                  <span class="word12">id：{{ item.bankNo }}</span>
                </div>
                <div class="main8 flex-row">
                  <span class="txt5">￥</span>
                  <span class="word13">{{ item.totalSettleableBalance }}</span>
                  <span class="info3">￥</span>
                  <span class="txt6">{{ item.settleableBalance }}</span>
                </div>
                <div class="main9 flex-row justify-between">
                  <span class="txt7">{{
                    $t("subLedgerManage.settAmount")
                  }}</span>
                  <span class="info4">{{
                    $t("subLedgerManage.amouToBeSettled")
                  }}</span>
                </div>
                <div class="o-plr-15 o-pt-12">
                  <div class="main10 flex-col">
                    <span class="word14"
                      >{{ $t("subLedgerManage.lastSettTime") }}：{{
                        $M_FormatTime(item.modifyDate, "YYYY-MM-DD HH:MM:SS")
                      }}</span
                    >
                  </div>
                </div>
                <img
                  class="pic1"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
                />
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
    <!-- 筛选弹窗 -->
    <kDialog
      :dialogTitle="$t('subLedgerManage.search.title')"
      :confirmBtnTxt="$t('subLedgerManage.search.screen')"
      ref="kDialogRef"
      @confirmclk="confirmClk"
    >
      <template #content>
        <div class="cust_vantBorder">
          <!-- <van-field @click-input="busiInpClk" readonly clearable label-width="36" v-model="searchForm.businessName"
            :placeholder="$t('subLedgerManage.search.busiPlaceholder')" :label="$t('subLedgerManage.search.business')">
            <template #right-icon>
              <div class="l-flex-RC">
                <van-icon v-if="searchForm.businessName" @click="searchForm.businessName = ''" class="o-mr-6"
                  name="clear" />
                <van-icon @click="busiInpClk" name="arrow-down" />
              </div>
            </template>
          </van-field> -->
          <van-field
            clearable
            v-model="searchForm.accountName"
            :placeholder="$t('subLedgerManage.search.accoPlaceholder')"
            :label="$t('subLedgerManage.search.account')"
          />
        </div>
      </template>
    </kDialog>
    <!-- 结算弹窗 -->
    <kDialog
      :dialogTitle="$t('subLedgerManage.settleProcess.title')"
      :cancelBtnTxt="$t('subLedgerManage.settleProcess.cancelTxt')"
      :confirmBtnTxt="$t('subLedgerManage.settleProcess.confrimTxt')"
      ref="kDialogSettleRef"
      @confirmclk="confirmSettleClk"
    >
    </kDialog>
    <!-- 商家选择框 -->
    <van-popup v-model:show="busiPopShow" position="bottom">
      <van-picker
        :title="$t('subLedgerManage.search.busiPlaceholder')"
        :columns="busiPopList"
        :columns-field-names="busiPopFieldName"
        @confirm="busiPopConfirm"
        @cancel="busiPopCancel"
      />
    </van-popup>
  </div>
</template>
<script>
// 导入公用方法
import { $M_FormatTime, $M_ExportFile } from "@/common/js/utils";
// 导入接口
import {
  Api_getPageShandeMch,
  Api_getJiesuan,
  Api_getShandeMchListExport,
} from "@/service/subLedgerManage";
import { onMounted, reactive, ref, toRefs } from "vue";
import sHeader from "@/components/SimpleHeader";
import kTabs from "@/components/commom/kTabs/index.vue";
import kDialog from "@/components/commom/kDialog/index.vue";
import { useI18n } from "vue-i18n";
import { Toast } from "vant";
export default {
  components: { sHeader, kTabs, kDialog },
  setup() {
    // 点击导出按钮
    const exportFile = async () => {
      const param = {
        username: searchParam.username,
        type: searchParam.type,
        namelist: settleParam.notCalcAccount,
      };
      const { headers, data } = await Api_getShandeMchListExport(param);
      $M_ExportFile(data, headers);
    };
    // 分页
    const pageNo = ref(1);
    const pageSize = ref(20);
    const pageTotals = ref(0);
    const ruleData = reactive({
      tableData: [],
    });
    // 上拉刷新
    const loading = ref(true);
    const finished = ref(false);
    // 下拉刷新
    const refreshing = ref(false);
    onMounted(() => {
      onRefresh();
    });
    // 下拉刷新
    const onRefresh = (idx) => {
      ruleData.tableData = [];
      // 解决请求两次问题
      if (!idx) {
        finished.value = false;
      }
      loading.value = true;
      // 初始化分页
      pageNo.value = 1;
      pageSize.value = 20;
      getList();
    };
    // 上拉加载
    const onLoad = () => {
      pageNo.value++;
      getList();
    };
    // 请求参数
    const searchParam = reactive({
      username: "",
      type: "0",
      current: pageNo.value,
      size: pageSize.value,
    });
    // 获取列表数据
    const getList = () => {
      Api_getPageShandeMch(searchParam).then((res) => {
        console.log("res", res);
        const { data } = res.data;
        refreshing.value = false;
        ruleData.tableData.push(...data.records);
        pageTotals.value = data.total;
        // 加载状态结束
        loading.value = false;
        if (ruleData.tableData.length >= data.total) {
          finished.value = true;
        }
      });
    };
    const { t } = useI18n();
    // 对公账号和个人账号tab栏
    const tabList = ref([
      {
        name: t("subLedgerManage.corporateAccountNo"),
        icon: "",
        id: 1,
      },
      {
        name: t("subLedgerManage.personalAccount"),
        icon: "",
        id: 2,
      },
    ]);
    // 筛选条件
    const searchForm = reactive({
      businessName: "",
      accountName: "",
    });
    // 筛选弹窗
    const kDialogRef = ref(null);
    const kDialogSettleRef = ref(null);
    const busiPopShow = ref(false);
    const busiPopList = reactive([
      {
        name: "商户1",
        id: "1",
      },
      {
        name: "商户2",
        id: "2",
      },
    ]);
    const busiPopFieldName = reactive({
      text: "name",
      value: "id",
    });
    // 点击tab
    const tabChg = (e) => {
      searchParam.type = e;
      getList();
    };
    // 点击筛选
    const noticeClk = () => {
      kDialogRef.value.openDialog();
    };
    // 点击右侧按钮
    const confirmClk = () => {
      searchParam.username = searchForm.accountName;
      onRefresh(1);
    };
    // 筛选弹窗
    // 点击商家输入框
    const busiInpClk = () => {
      busiPopShow.value = true;
    };
    const busiPopConfirm = (e) => {
      console.log("e", e);
      busiPopShow.value = false;
      searchForm.businessName = e.name;
    };
    const busiPopCancel = () => {
      busiPopShow.value = false;
    };
    // 点击结算按钮
    const settleClk = () => {
      if (settleParam.settAmount === "") {
        Toast(t("subLedgerManage.settleProcess.settleAmountPlaceholder"));
        return;
      } else if (settleParam.notCalcAccount === "") {
        Toast(t("subLedgerManage.settleProcess.notAccountNumPlaceholder"));
        return;
      }
      kDialogSettleRef.value.openDialog();
    };
    // 结算参数
    const settleParam = reactive({
      settAmount: "",
      notCalcAccount: "",
    });
    // 结算弹窗
    const confirmSettleClk = () => {
      const param = {
        username: searchParam.username,
        type: searchParam.type,
        namelist: settleParam.notCalcAccount,
      };
      Api_getJiesuan(param).then((res) => {
        console.log(res);
      });
    };

    return {
      tabChg,
      tabList,
      confirmClk,
      noticeClk,
      kDialogRef,
      busiInpClk,
      busiPopShow,
      busiPopConfirm,
      busiPopList,
      busiPopFieldName,
      busiPopCancel,
      searchForm,
      confirmSettleClk,
      kDialogSettleRef,
      settleClk,

      pageNo,
      pageSize,
      loading,
      finished,
      refreshing,
      onRefresh,
      onLoad,
      ...toRefs(ruleData),
      $M_FormatTime,
      settleParam,
      exportFile,
      pageTotals,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common.less";

.page {
  background-color: #fff;
  position: relative;
  width: 100%;
  height: calc(100vh -88px);
  overflow: hidden;
  overflow-y: auto;

  .group1 {
    width: 100%;

    .bd2 {
      background-color: rgba(255, 255, 255, 1);
      height: 841px;
      margin-top: 1px;
      width: 100%;

      .layer1 {
        width: 100%;
        height: 782px;
        margin-top: 20px;

        .main1 {
          .tab {
            width: -moz-calc(100% - 70px);
            width: -webkit-calc(100% - 70px);
            width: calc(100% - 70px);
          }
          .bd4 {
            width: 8px;
            height: 4px;
            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1c99f1cd352b058ad101b7c1eb6d15122e6160c6b02d15b822f6558cdd7064e6)
              100% no-repeat;
          }
        }

        .main2 {
          background-color: rgba(255, 255, 255, 1);
          height: 54px;
          margin-top: 22px;
          width: 100%;

          .bd5 {
            width: 100%;
            height: 37px;
            margin-top: 17px;

            .outer1 {
              width: 100%;
              height: 19px;
              padding: 0 19px;

              .ImageText1 {
                height: 18px;
                width: 79px;

                .group4 {
                  width: 79px;
                  height: 18px;

                  .outer2 {
                    width: 16px;
                    height: 18px;
                    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6eab9bb59f4e323434f0d4ea3d3c086c0609bf09fb931e0f032488e88a0ebc56) -1px -1px
                      no-repeat;
                  }

                  .TextGroup1 {
                    height: 14px;
                    width: 56px;

                    .word6 {
                      width: 56px;
                      height: 14px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 14px;
                      font-family: PingFangSC-Semibold;
                      text-align: left;
                      white-space: nowrap;
                      line-height: 14px;
                      display: block;
                    }
                  }
                }
              }

              .mod2 {
                width: 8px;
                height: 10px;
                border: 0.5px solid rgba(64, 77, 116, 0.5);
                background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/9ac7ff8f493743d69dc937dcc0299f82_mergeImage.png)
                  100% no-repeat;
                margin-top: 4px;
              }
            }

            .img1 {
              width: 100%;
              height: 2px;
              margin-top: 16px;
            }
          }
        }

        .main3 {
          width: 345px;
          height: 38px;
          margin: 20px 0 0 15px;

          .word7 {
            width: 52px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            margin-top: 13px;
            display: block;
          }

          .layer3 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 2px;
            height: 38px;
            border: 0.5px solid rgba(185, 186, 208, 1);
            width: 277px;

            .word8 {
              width: 21px;
              height: 13px;
              overflow-wrap: break-word;
              color: rgba(64, 77, 116, 1);
              font-size: 13px;
              text-align: left;
              white-space: nowrap;
              line-height: 13px;
              display: block;
              margin: 13px 0 0 6px;
            }
          }
        }

        .main4 {
          width: 345px;
          height: 38px;
          margin: 15px 0 0 15px;

          .word9 {
            width: 65px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            margin-top: 13px;
            display: block;
          }

          .bd6 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 2px;
            height: 38px;
            border: 0.5px solid rgba(185, 186, 208, 1);
            width: 273px;

            .info2 {
              width: 21px;
              height: 13px;
              overflow-wrap: break-word;
              color: rgba(64, 77, 116, 1);
              font-size: 13px;
              text-align: left;
              white-space: nowrap;
              line-height: 13px;
              display: block;
              margin: 13px 0 0 6px;
            }
          }
        }

        .main5 {
          border-radius: 17px;
          height: 34px;
          border: 1px solid rgba(77, 106, 221, 1);
          width: 120px;
          margin: 20px auto;

          .txt4 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(77, 106, 221, 1);
            font-size: 15px;
            font-family: PingFangSC-Medium;
            text-align: center;
            white-space: nowrap;
            line-height: 15px;
            display: block;
            margin: 11px 0 0 30px;
          }
        }

        .main6 {
          background-color: rgba(245, 245, 245, 1);
          width: 100%;
          height: 10px;
          margin-top: 20px;
        }

        .word10 {
          width: 140px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
          text-align: left;
          white-space: nowrap;
          line-height: 14px;
          display: block;
          margin: 20px 0 0 15px;
        }

        .main7 {
          width: 278px;
          height: 13px;
          margin: 10px 0 0 15px;

          .word11 {
            width: 163px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }

          .word12 {
            width: 195px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }

        .main8 {
          width: 230px;
          height: 30px;
          margin: 12px 0 0 15px;

          .txt5 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            margin-top: 8px;
            display: block;
          }

          .word13 {
            width: 53px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }

          .info3 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(77, 193, 147, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            display: block;
            margin: 8px 0 0 100px;
          }

          .txt6 {
            width: 49px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(77, 193, 147, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }
        }

        .main9 {
          width: 227px;
          height: 13px;
          margin: 1px 0 0 15px;

          .txt7 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }

          .info4 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }

        .main10 {
          background-color: rgba(246, 247, 252, 1);
          border-radius: 1px;
          height: 29px;
          width: 100%;

          .word14 {
            width: 208px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
            margin: 8px 0 0 10px;
          }
        }

        .pic1 {
          width: 100%;
          height: 2px;
          margin-top: 14px;
        }

        .txt8 {
          width: 140px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
          text-align: left;
          white-space: nowrap;
          line-height: 14px;
          display: block;
          margin: 20px 0 0 15px;
        }

        .main11 {
          width: 263px;
          height: 13px;
          margin: 10px 0 0 15px;

          .word15 {
            width: 63px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }

          .word16 {
            width: 180px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }

        .main12 {
          width: 230px;
          height: 30px;
          margin: 12px 0 0 15px;

          .word17 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            margin-top: 8px;
            display: block;
          }

          .info5 {
            width: 53px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }

          .word18 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(77, 193, 147, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            display: block;
            margin: 8px 0 0 100px;
          }

          .word19 {
            width: 49px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(77, 193, 147, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }
        }

        .main13 {
          width: 227px;
          height: 13px;
          margin: 1px 0 0 15px;

          .word20 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }

          .txt9 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }

        .main14 {
          background-color: rgba(246, 247, 252, 1);
          border-radius: 1px;
          height: 29px;
          width: 345px;
          margin: 12px 0 0 15px;

          .info6 {
            width: 208px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
            margin: 8px 0 0 10px;
          }
        }

        .pic2 {
          width: 100%;
          height: 2px;
          margin-top: 14px;
        }

        .info7 {
          width: 140px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
          text-align: left;
          white-space: nowrap;
          line-height: 14px;
          display: block;
          margin: 20px 0 0 15px;
        }

        .main15 {
          width: 276px;
          height: 13px;
          margin: 10px 0 0 15px;

          .word21 {
            width: 63px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }

          .word22 {
            width: 193px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }

        .main16 {
          width: 230px;
          height: 30px;
          margin: 12px 0 0 15px;

          .info8 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            margin-top: 8px;
            display: block;
          }

          .word23 {
            width: 53px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }

          .txt10 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(77, 193, 147, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            display: block;
            margin: 8px 0 0 100px;
          }

          .word24 {
            width: 49px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(77, 193, 147, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }
        }

        .main17 {
          width: 227px;
          height: 13px;
          margin: 1px 0 0 15px;

          .txt11 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }

          .word25 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }

        .main18 {
          background-color: rgba(246, 247, 252, 1);
          border-radius: 1px;
          height: 29px;
          width: 345px;
          margin: 12px 0 0 15px;

          .word26 {
            width: 208px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
            margin: 8px 0 0 10px;
          }
        }
      }
    }
  }
}
</style>

