<template>
  <div class="d-page customer-panorama">
    <title-bar :title="title" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div style="display: flex">
      <div class="client">
        <div class="client-top">
          <div class="client-avatar">
            <svg v-if="dataBasic.SEX != '—' ? dataBasic.SEX == '男' : true" class="icon" aria-hidden="true">
              <use xlink:href="#icon-nanxing-gerentouxiangxpx"></use>
            </svg>
            <svg v-if="dataBasic.SEX != '—' ? dataBasic.SEX == '女' : false" class="icon" aria-hidden="true">
              <use xlink:href="#icon-nvxing-gerentouxiangxpx"></use>
            </svg>
          </div>
          <div>{{ CUSTOMERNAME }}</div>
          <div>
            <div v-if="CSTRISKLEVEL == '01'" class="list-cell-node1"></div>
            <div v-else-if="CSTRISKLEVEL == '02'" class="list-cell-node2"></div>
            <div v-else-if="CSTRISKLEVEL == '03'" class="list-cell-node3"></div>
            <div v-else-if="CSTRISKLEVEL == ''" class="list-cell-node4"></div>
          </div>
        </div>
        <div class="client-central">
          <!-- 图标 -->
          <div class="flex-hbox list-left">
            <div :style="badgebox" class="badge-box">
              <div v-show="userSelectedInfo.IS_LOAN_OVDUE == '1'" class="d-tag tag-green tag-position">贷款逾期</div>
              <div v-show="userSelectedInfo.IS_CRDCD_OVDUE == '1'" class="d-tag tag-gold tag-position">信用卡逾期</div>
              <div v-show="userSelectedInfo.IS_BLKLIST_CST == '1'" class="d-tag tag-blue tag-position">名单客户</div>
              <div v-show="userSelectedInfo.IS_PAYROLL_SALARY == '1'" class="d-tag tag-green tag-position">代发工资</div>
              <div v-show="userSelectedInfo.HAS_HOS_FUND_ACCT == '1'" class="d-tag tag-gold tag-position">公积金存款帐户</div>
              <div v-show="userSelectedInfo.IS_HOS_LOAN_CST == '1'" class="d-tag tag-blue tag-position">住房按揭帐户</div>
              <div v-show="userSelectedInfo.HAS_OFFI_CARD == '1'" class="d-tag tag-green tag-position">公务卡</div>
              <div v-show="userSelectedInfo.CRDCD_FLAG == '1'" class="d-tag tag-gold tag-position">信用卡</div>
            </div>
            <div v-if="labelnum > '3'" class="up-down-box">
              <van-icon v-show="!arrowStatus" @click="switchClick" color="#0000004c" size="20" name="arrow-down" />
              <van-icon v-show="arrowStatus" @click="switchClick" color="#0000004c" size="20" name="arrow-up" />
            </div>
          </div>
        </div>
        <div class="client-bottom">
          <div class="customer-information">
            <table-single-view :keyValue="keyValueSingleTop" :data="dataBasic"></table-single-view>
            <table-single-view :keyValue="keyValueSingle" :data="dataBasicAUM"></table-single-view>
            <table-single-view :keyValue="keyValueSingleBottom" :data="dataBasic"></table-single-view>
          </div>
          <div style="height: 20%;display: flex;align-items: center;justify-content: center">
            <button class="navigation">
              <div @click="navigation"><img style="margin-right: 10px" src="../../assets/svg/blue-navigation-logo.svg" alt="" />导航
              </div>
            </button>
          </div>
        </div>
      </div>
      <div class="client-operate">
        <div>
          <van-tabs animated @change="checkMod" color="#FF574C" line-width="100px" title-active-color="#FF574C" v-model="activetype">
            <van-tab title="优易贷额度" v-if="active == 0">
              <div class="rotationCard" style="background-color: #D5E9FF;">
                <div style="background-color: #0076FF;box-shadow: 0 4px 5px #6791d0" class="rotationCard1"><span
                  class="iconfont icon-a-caiwuxinxi18x20ziyuan14" style="font-size: 24px"></span>&nbsp;优易贷
                </div>
                <div class="rotationCard2">
                  <div class="rotationCard2-data1">
                    <div>{{ (userInfo.YBALANCE && userInfo.YBALANCE != "0.0") ? userInfo.YBALANCE : "--" }}</div>
                    <div>授信额度(元)</div>
                  </div>
                  <div class="rotationCard2-data1">
                    <div>{{ (userInfo.YBUSINESSSUM && userInfo.YBUSINESSSUM != "0.0") ? userInfo.YBUSINESSSUM : "--"
                      }}
                    </div>
                    <div>可用额度(元)</div>
                  </div>
                </div>
                <div class="rotationCard3"></div>
              </div>
            </van-tab>
            <van-tab title="住房按揭额度" v-if="active == 0">
              <div class="rotationCard" style="background-color: #FFE4CE;">
                <div style="background-color: #FD7F3B;box-shadow: 0 4px 5px #ce8256" class="rotationCard1"><span
                  class="iconfont icon-a-caiwuxinxi18x20ziyuan14" style="font-size: 24px"></span>&nbsp;住房按揭
                </div>
                <div class="rotationCard2">
                  <div class="rotationCard2-data1">
                    <div>{{ (userInfo.ZBALANCE && userInfo.ZBALANCE != "0.0") ? userInfo.ZBALANCE : "--" }}</div>
                    <div>住房按揭额度(元)</div>
                  </div>
                  <div class="rotationCard2-data1">
                    <div>{{ (userInfo.ZBUSINESSSUM && userInfo.ZBUSINESSSUM != "0.0") ? userInfo.ZBUSINESSSUM : "--"
                      }}
                    </div>
                    <div>贷款余额(元)</div>
                  </div>
                </div>
                <div class="rotationCard3"></div>
              </div>
            </van-tab>
            <van-tab title="随意分" v-if="active == 1">
              <div class="rotationCard" style="background-color: #FFE9E8;">
                <div style="background-color: #FF4242;box-shadow: 0 4px 5px #d37979" class="rotationCard1"><span
                  class="iconfont icon-a-caiwuxinxi18x20ziyuan14" style="font-size: 24px"></span>&nbsp;随意分
                </div>
                <div class="rotationCard2">
                  <div class="rotationCard2-data1">
                    <div>{{ (userInfo.YBALANCE && userInfo.YBALANCE != "0.0") ? userInfo.YBALANCE : "--" }}</div>
                    <div>贷款金额(元)</div>
                  </div>
                  <div class="rotationCard2-data1">
                    <div>{{ (userInfo.YBUSINESSSUM && userInfo.YBUSINESSSUM != "0.0") ? userInfo.YBUSINESSSUM : "--"
                      }}
                    </div>
                    <div>贷款余额(元)</div>
                  </div>
                </div>
                <div class="rotationCard3"></div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
        <div class="label">
          <div class="customer-information-card">
            <div>个人信息</div>
            <div class="customer-information-card-list">
              <div v-for="item in grxx" :key="item.key" @click="onGridItemClick(item)" class="customer-information-content-card">
                <div class="card-icon" style="background-color: #558fff">
                  <span class="icon iconfont iconstyle" :class="item.iconcls"></span>
                </div>
                <div>
                  {{ item.text }}
                  <div class="datanum" v-if="item.infoNum != ''">{{ item.infoNum }}</div>
                </div>
              </div>
            </div>
          </div>
<!--          <div @click="personal_profiles" class="label-personal-profiles">-->
<!--            <div><img style="height: 100%" src="../../assets/images/personal-profiles-logo.png" alt="" /></div>-->
<!--            <div>个人概况</div>-->
<!--          </div>-->
<!--          <div @click="financial_information" class="label-financial-information">-->
<!--            <div><img style="height: 100%" src="../../assets/images/financial-information-logo.png" alt="" /></div>-->
<!--            <div>家庭资产及财务信息</div>-->
<!--          </div>-->
<!--          <div @click="employer" class="label-employer">-->
<!--            <div><img style="height: 100%" src="../../assets/images/employer-logo.png" alt="" /></div>-->
<!--            <div>工作单位</div>-->
<!--          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import { NativeUI } from "@/public/ts/NativeUI";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import IF from "@/public/factory/InterFaceFactory";
import TableSingleView from "@/public/TableSingleView.vue";
import "swiper/swiper.scss";
import { Tab, Tabs } from "vant";
import { getText } from "@/stores";

Vue.use(Tab);
Vue.use(Tabs);

/**
 * @Description 个人全景视图
 * @Author JiangTao
 * @Date 2021-11-02 下午 03:36
 */
@Component({
  name: "PersonalDetails",
  components: { TitleBar, Swiper, SwiperSlide, TableSingleView }
})
export default class PersonalDetails extends Vue {
  title = "个人全景视图"; // 页面标题
  userInfo = {};
  active: any = 0;
  activetype = 0;
  CUSTOMERNAME = "";
  CSTRISKLEVEL = ""; //风险信息
  arrowStatus = false; //箭头方向，下为false
  userSelectedInfo = {}; //个人客户信息查询
  CUSTOMERID: any = this.$route.query.CUSTOMERID;
  // userSelectedInfo = {
  //   BLKLIST_TYPE: '',
  //   CRDCD_FLAG: '1',
  //   DEPOSIT_BAL: '0.00',
  //   HAS_HOS_FUND_ACCT: '1',
  //   HAS_OFFI_CARD: '1',
  //   IS_BLKLIST_CST: '1',
  //   IS_CRDCD_OVDUE: '1',
  //   IS_HOS_LOAN_CST: '1',
  //   IS_LOAN_OVDUE: '1',
  //   IS_PAYROLL_SALARY: '1',
  //   YEAR_AUM: '0.00'
  // };
  grxx = [
    {
      infoNum: '',
      text: '基本信息',
      key: 'GRJBXX', //个人基本信息
      path: 'PersonalProfiles',
      iconcls: 'icon-a-jibenxinxi18x20ziyuan8'
    },
    {
      infoNum: '',
      text: '工作单位',
      key: 'GZDW',
      path: 'Employer',
      iconcls: 'icon-a-gongzuodanwei20x18ziyuan53'
    },
    {
      infoNum: '',
      text: '家庭财务信息',
      key: 'JTCWXX',
      path: 'FamilyFinancialInformation',
      iconcls: 'icon-a-jiatingcaiwuxinxi20x20ziyuan52'
    },
    {
      infoNum: '',
      text: '授信一览',
      key: 'SXYL',
      path: 'CreditDetails',
      iconcls: 'icon-a-shouxinshitu18x20ziyuan38'
    }
  ];
  keyValueSingleTop = {
    SEX: "性别",
    CERTIDTYPE: "证件类型",
    CERTID: "证件号码",
    MARRIAGE: "婚姻状态",
    EMPLOYMENT: "工作单位",
    MOBILETELEPHONE: "手机号码"
  };
  keyValueSingle = {
    YEAR_AUM: "年日均AUM"
  };
  keyValueSingleBottom = {
    INPUTDATE: "成为我行客户时间"
  };
  dataBasic = {
    CERTID: "—",
    CERTIDTYPE: "—",
    MARRIAGE: "—",
    MOBILETELEPHONE: "—",
    EMPLOYMENT: "—",
    INPUTDATE: "—",
    SEX: "—"
  };
  dataBasicAUM = {
    YEAR_AUM: "—"
  };
  badgebox = {};
  labelnum = 5; //标签数量

  checkMod(index: any) {
    this.activetype = index;
  };
  onClick() {
    this.$router.go(-1);
  }

  navigation() {
  }
  onGridItemClick(item: any) {
    console.log(item);
    this.$router.push({
      path: item.path,
      query: {
        CUSTOMERID: this.CUSTOMERID,
        tel: (this.dataBasic as any).MOBILETELEPHONE
      }
    });
  };

  personal_profiles() {
    this.$router.push({
      path: "/PersonalProfiles",
      query: {
        CUSTOMERID: this.CUSTOMERID
      }
    });
  }

  financial_information() {
    this.$router.push({
      path: "/FamilyFinancialInformation",
      query: {
        CUSTOMERID: this.CUSTOMERID
      }
    });
  }

  employer() {
    this.$router.push({
      path: "/Employer",
      query: {
        CUSTOMERID: this.CUSTOMERID
      }
    });
  }

  mounted() {
    this.CUSTOMERID = this.$route.query.CUSTOMERID;
    this.active = this.$route.query.active;
    this.userInfo = this.$store.getters.getCusInfo;
    this.CSTRISKLEVEL = (this.userInfo as any).CSTRISKLEVEL;
    this.CUSTOMERNAME = (this.userInfo as any).CUSTOMERNAME;
    this.dataBasic.CERTID = (this.userInfo as any).CERTID != "" ? (this.userInfo as any).CERTID : "—";
    this.dataBasic.CERTIDTYPE = (this.userInfo as any).CERTTYPE != "" ? (this.userInfo as any).CERTTYPE : "—";
    if ((this.userInfo as any).CERTID != "") {
      this.dataBasic.CERTID = this.dataBasic.CERTID.substring(0, 4) + "****" + this.dataBasic.CERTID.substring(this.dataBasic.CERTID.length - 4);
    }
    this.dataBasic.MARRIAGE = (this.userInfo as any).MARRIAGE != "" ? (this.userInfo as any).MARRIAGE : "—";
    this.dataBasic.MOBILETELEPHONE = (this.userInfo as any).MOBILETELEPHONE != "" ? (this.userInfo as any).MOBILETELEPHONE : "—";
    this.dataBasic.INPUTDATE = (this.userInfo as any).INPUTDATE != "" ? (this.userInfo as any).INPUTDATE : "—";
    this.dataBasic.SEX = (this.userInfo as any).SEX != "" ? (this.userInfo as any).SEX : "—";
    this.selectPersonInfo();
    this.selectPeronalInfo();
    this.selectInfoWork();
  }

  // 查询个人详细信息
  selectPersonInfo() {
    const param = {
      CUSTOMERID: this.$route.query.CUSTOMERID,
      tc: nettyApi.TRADE_CODE.selectPersonInfoDetail
    };
    NativeUI.showWaiting('正在查询...');
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      console.log(res);
      NativeUI.closeWaiting();
      if (res.rc == '1') {
        (this.dataBasic as any).MOBILETELEPHONE = res.MOBILETELEPHONE;
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  // 查询工作单位信息
  selectInfoWork() {
    const param = {
      CUSTOMERID: (this.userInfo as any).CUSTOMERID,
      tc: nettyApi.TRADE_CODE.selectPersonalWorkInfo
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      console.log("===========", res);
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        this.dataBasic.EMPLOYMENT = res.EMPLOYMENT;
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  /**
   * @Description 标签的展开收起
   * @Author JiangTao
   * @Date 2022-01-17 下午 09:05
   */
  switchClick() {
    this.arrowStatus = !this.arrowStatus;
    if (this.arrowStatus) {
      this.badgebox = { height: "auto" };
    } else {
      this.badgebox = { height: "25px" };
    }
  }

  // 个人客户信息查询
  selectPeronalInfo() {
    this.labelnum = 0;
    const param = {
      CUST_NO: (this.userInfo as any).MFCUSTOMERID || (this.userInfo as any).CUSTOMERID, //'1001785074',
      CUST_NAME: (this.userInfo as any).CUSTOMERNAME, //'杨章'
      tc: nettyApi.TRADE_CODE.selectPeronInfo
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        this.userSelectedInfo = res;
        if (this.userSelectedInfo["YEAR_AUM"] && this.userSelectedInfo["YEAR_AUM"] != "") {
          this.dataBasicAUM.YEAR_AUM = this.userSelectedInfo["YEAR_AUM"];
        }
        if (this.userSelectedInfo["IS_LOAN_OVDUE"] && this.userSelectedInfo["IS_LOAN_OVDUE"] == "1") {
          this.labelnum = this.labelnum + 1;
        }
        if (this.userSelectedInfo["IS_CRDCD_OVDUE"] && this.userSelectedInfo["IS_CRDCD_OVDUE"] == "1") {
          this.labelnum = this.labelnum + 1;
        }
        if (this.userSelectedInfo["IS_BLKLIST_CST"] && this.userSelectedInfo["IS_BLKLIST_CST"] == "1") {
          this.labelnum = this.labelnum + 1;
        }
        if (this.userSelectedInfo["IS_PAYROLL_SALARY"] && this.userSelectedInfo["IS_PAYROLL_SALARY"] == "1") {
          this.labelnum = this.labelnum + 1;
        }
        if (this.userSelectedInfo["HAS_HOS_FUND_ACCT"] && this.userSelectedInfo["HAS_HOS_FUND_ACCT"] == "1") {
          this.labelnum = this.labelnum + 1;
        }
        if (this.userSelectedInfo["IS_HOS_LOAN_CST"] && this.userSelectedInfo["IS_HOS_LOAN_CST"] == "1") {
          this.labelnum = this.labelnum + 1;
        }
        if (this.userSelectedInfo["HAS_OFFI_CARD"] && this.userSelectedInfo["HAS_OFFI_CARD"] == "1") {
          this.labelnum = this.labelnum + 1;
        }
        if (this.userSelectedInfo["CRDCD_FLAG"] && this.userSelectedInfo["CRDCD_FLAG"] == "1") {
          this.labelnum = this.labelnum + 1;
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.customer-panorama {
  width: 100%;
}

.client {
  width: 25%;
  height: calc(100vh - 60px);
  padding-left: 10px;
  padding-top: 10px;
}

.client-avatar svg {
  width: 50px;
  height: 60px;
}

.client-avatar img {
  width: 100%;
}

.client-top {
  width: 90%;
  height: 10%;
  //max-height: 10%;
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.client-top > div:nth-child(2) {
  width: auto;
  font-size: 20px;
  color: #333333;
  font-family: "Arial Normal", "Arial";
  font-weight: bold;
  padding-left: 10px;
  margin-right: 10px;
}

.client-central {
  width: 100%;
  height: auto;
  max-height: 70px;
  margin: 2% 0;
}

.client-central > div:nth-child(1) {
  color: #02a4ec;
  font-size: 13px;
  margin-bottom: 1.5%;
  margin-left: 1%;
}

.client-central > div:nth-child(3) {
  color: #c280ff;
  font-size: 13px;
  margin-bottom: 1.5%;
  margin-left: 1%;
}

.client-central-label-1,
.client-central-label-2 {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 5%;
}

.client-central-label-1 div,
.client-central-label-2 div {
  width: 22.3%;
  padding-top: 0.75%;
  padding-bottom: 0.45%;
  text-align: center;
  font-size: 13px;
  color: #02a4ec;
  margin-right: 3%;
  border-radius: 3px;
  background-color: #d0f1ff;
}

.client-central-label-2 div {
  color: #c280ff;
  background-color: #f9f1ff;
}

.client-central-label-2 > div:nth-child(1) {
  background-color: white;
  color: black;
  border: 1px solid rgba(170, 170, 170, 1);
}

.client-bottom {
  width: 93%;
  height: 75%;
  overflow-y: auto;
  padding-right: 3%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-content: space-around;
}

.customer-information {
  height: 80%;
  overflow-y: auto;
  overflow-x: hidden;
}

.customer-information div {
  line-height: 30px;
  font-family: "Arial Normal", "Arial";
}

.navigation {
  height: 45px;
  width: 170px;
  background-color: white;
  color: #02a4ec;
  border: 1px solid #02a4ec;
  font-size: 16px;
  border-radius: 34px;
  padding: 10px 0;
}

.navigation div {
  font-size: 16px;
}

.client-label ul li {
  list-style-type: disc;
  padding-left: -5px;
  display: inline-block;
  padding-right: 35px;
  margin-left: 10px;
  color: #02a4ec;
}

.client-info ul li {
  font-size: 14px;
  line-height: 30px;
}

.client-operate {
  width: 75%;
  height: calc(100vh - 60px);
  background-color: #f2f2f2;
  padding: 6px 10px;
  border-left: 1px solid #e8e8e8;
  overflow-y: auto;
}
.client-operate > div:nth-child(1) {
  background-color: white;
  border-radius: 15px;
  height: 50%;
}

.carousel {
  width: 100%;
  height: 50%;
  background-color: white;
}
::v-deep .van-tabs__track {
  margin-top: 2%;
}
.label {
  width: 100%;
  height: 46%;
  padding: 2%;
  margin-top: 1.5%;
  background-color: white;
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
}

.label-personal-profiles {
  width: 32.5%;
  height: 100%;
  background-color: #bfd5ff;
  border-radius: 15px;
}

.label-financial-information {
  width: 32.5%;
  height: 100%;
  background-color: #ffe0c4;
  border-radius: 15px;
}

.label-employer {
  width: 32.5%;
  height: 100%;
  background-color: #efe5ff;
  border-radius: 15px;
}

.label-personal-profiles > div:nth-child(1),
.label-financial-information > div:nth-child(1),
.label-employer > div:nth-child(1) {
  height: 50%;
  width: 53%;
  margin: 10% auto 0 auto;
  display: flex;
  justify-content: center;
}

.label-personal-profiles > div:nth-child(2),
.label-financial-information > div:nth-child(2),
.label-employer > div:nth-child(2) {
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-family: "苹方 粗体", "苹方 中等", "苹方";
  margin-top: 5%;
}

.thumb-example {
  height: 100%;
}

.swiper-container {
  background-color: #000;
}
.gallery-top {
  height: 100% !important;
  width: 100%;
}

::v-deep .swiper-container {
  background-color: rgb(255, 0, 0, 0);
}

::v-deep .ValueCls {
  grid-template-columns: 1.3fr 2fr;
}

.list-left {
  line-height: 28px;
  display: flex;
  align-items: flex-end;
}

.badge-box {
  width: 85%;
  line-height: 18px;
  height: 25px;
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow-y: hidden;
}

.d-tag {
  min-width: 70px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 21px;
  padding: 0 6px;
  border-radius: 2px;
}

.tag-gold {
  color: #ffb900;
  background-color: #fff7cc;
}

.tag-blue {
  color: #00a3ff;
  background-color: #d3efff;
}

.tag-green {
  color: #00d2e0;
  background-color: rgba(204, 253, 255, 1);
}

.tag-position {
  margin: 3px 4px;
}

.up-down-box {
  width: auto;
  height: 20px;
}

.list-cell-node1 {
  width: 12px;
  height: 12px;
  background-color: #e64e31;
  border-radius: 10px;
}

.list-cell-node2 {
  width: 12px;
  height: 12px;
  background-color: #ef8b3f;
  border-radius: 10px;
}

.list-cell-node3 {
  width: 12px;
  height: 12px;
  background-color: #f1c142;
  border-radius: 10px;
}

.list-cell-node4 {
  width: 12px;
  height: 12px;
  background-color: #70d87f;
  border-radius: 10px;
}

.rotationCard {
  width: 100%;
  height: 96%;
  padding: 15px 20px;
  border-radius: 15px;
}

.rotationCard1 {
  width: 170px;
  height: 32%;
  max-height: 50px;
  border-radius: 30px;
  font-size: 24px;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rotationCard2 {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 50%;
  margin: 2% 0 10px 0;
}

.rotationCard2-data1 > div:nth-child(1) {
  font-size: 38px;
  font-weight: bold;
}

.rotationCard2-data1 > div:nth-child(2) {
  font-size: 20px;
  line-height: 40px;
}

.rotationCard2-data2 > div:nth-child(1) {
  font-size: 38px;
  font-weight: bold;
  color: #FF1E1E;
}

.rotationCard2-data2 > div:nth-child(2) {
  font-size: 20px;
  line-height: 40px;
}

.rotationCard3 {
  height: 15%;
  text-align: left;
  font-size: 20px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
::v-deep .van-tab__pane {
  height: 90%;
}
::v-deep .van-tabs__wrap {
  width: 25%;
}
::v-deep .van-tabs {
  padding: 0 30px 20px 30px;
  height: 100%;
}
::v-deep .van-tabs__content--animated {
  height: 90%;
}
.customer-information-card {
  width: 100%;
}
.customer-information-card > div:nth-child(1) {
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  padding-top: 2%;
  padding-left: 2px;
  margin-bottom: 10px;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
}
.customer-information-card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-content: space-between;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.customer-information div {
  line-height: 30px;
  font-family: "Arial Normal", "Arial";
}
.customer-information-content-card {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: rgba(255, 255, 255, 1);
  padding-left: 15%;
  border-radius: 7px;
  box-shadow: 0 0 6px #dedede;
}
.customer-information-content-card > div:nth-child(2) {
  width: auto;
  max-width: 70px;
  font-size: 16px;
  margin-left: 10%;
  padding: 0;
  line-height: 22px;
  position: relative;
}
.iconstyle {
  height: 30px;
  font-size: 20px !important;
  color: white !important;
}
.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
