<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> 优易贷
</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> 住房按揭
</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> 随意分
</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>