<template>
<div class="customer-panorama">
<title-bar :title="title" @clickLeft="onClick">
<van-icon slot="left" name="cross" size="24" />
</title-bar>
<div style="display: flex;height: calc(100vh - 60px)">
<div class="client">
<div class="client-top">
<div class="client-avatar"><img style="margin-left: 1px; margin-right: 16px" src="../../assets/svg/title.svg" alt="" /></div>
<div>{{ cus_name }}</div>
</div>
<div v-if="list.length > 0" class="client-central">
<div class="client-central-label-1">
<div v-for="(item, index) in list" :key="index" :style="{ color: item.color, background: item.backgroudColor }">{{ item.tag_name }}</div>
</div>
<!-- <div>标签二</div>-->
<!-- <div class="client-central-label-2">-->
<!-- <div>白名单</div>-->
<!-- <div>IT</div>-->
<!-- <div>金融</div>-->
<!-- <div>小微企业</div>-->
<!-- </div>-->
</div>
<div class="client-bottom">
<!-- <div @click="historical_label" class="historical-label">历史标签信息 ></div>-->
<div class="details">
<table-single-view :keyValue="keyValueSingle" :data="dataBasic"></table-single-view>
<!-- <div>法定代表人： {{ legal_name }}</div>-->
<!-- <div>注册资本：<span v-if="REG_CAP_CUR != ''">{{ REG_CAP_CUR }}万元人民币</span></div>-->
<!-- <div>成立日期：{{ nreg_start_date }}</div>-->
<!-- <div>电话： <a :href="'tel:' + phone" style="line-height: 20px">{{ phone }}</a></div>-->
<!-- <div>营业状态： 开业</div>-->
<!-- <div>企业类型： 其他有限企业责任公司</div>-->
<!-- <div>经营范围：智能手机、智能硬件、</div>-->
<!-- <div>地址：{{ address }}</div>-->
</div>
<div class="time-axis">
<div>
<div @click="getCompanyInfo"><img src="../../assets/svg/time-axis-2.svg" alt="" /><img src="../../assets/svg/time-axis-1.svg" alt="" /></div>
<div>企业时光轴</div>
</div>
<div>
<div @click="getCompanyMarket"><img src="../../assets/svg/time-axis-2.svg" alt="" /><img src="../../assets/svg/time-axis-1.svg" alt="" /></div>
<div>营销时光轴</div>
</div>
</div>
<div class="time-axis">
<button @click="navigation" class="navigation"><img style="margin-right: 10px" src="../../assets/svg/blue-navigation-logo.svg" alt="" />导航</button>
<button @click="navigation" class="client-medical-examination">客户体检</button>
</div>
</div>
</div>
<div class="customer-information v-scroller">
<div class="customer-information-card">
<div>基本信息</div>
<div class="customer-information-card-list">
<div v-for="item in jbxx" :key="item.key" @click="data_details(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 class="customer-information-card">
<div>关系图谱</div>
<div class="customer-information-card-list">
<div v-for="item in gxtp" :key="item.key" @click="data_details(item)" class="customer-information-content-card">
<svg class="icon icon-color" aria-hidden="true">
<use :xlink:href="'#' + item.iconcls"></use>
</svg>
<div>
{{ item.text }}
<div class="datanum" v-if="item.infoNum != ''">{{ item.infoNum }}</div>
</div>
</div>
</div>
</div>
<div class="customer-information-card">
<div>业务信息</div>
<div class="customer-information-card-list">
<div v-for="item in ywxx" :key="item.key" @click="data_details(item)" class="customer-information-content-card">
<div class="card-icon" style="background-color: #00c6ff">
<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 class="customer-information-card">
<div>风险信息</div>
<div class="customer-information-card-list">
<div v-for="item in fxxx" :key="item.key" @click="data_details(item)" class="customer-information-content-card">
<div class="card-icon" style="background-color: #00cac6">
<span class="icon iconfont iconstyle" :class="item.iconcls"></span>
</div>
<div>
{{ item.text }}
<div class="datanum" v-if="item.infoNum != ''"><div>{{ item.infoNum }}</div></div>
</div>
</div>
</div>
<div class="customer-information-card">
<div>初筛</div>
<div class="customer-information-card-list">
<div v-for="item in cs" :key="item.key" @click="data_details(item)" class="customer-information-content-card">
<div class="card-icon" style="background-color: #c280ff">
<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>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { NativeUI } from "@/public/ts/NativeUI";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import Public from '@/public/ts/Public';
import IF from "@/public/factory/InterFaceFactory";
import { forTime } from '@/public/ts/date.util';
import TableSingleView from "@/public/TableSingleView.vue";
import { getText } from '@/stores';
/**
* @Description 客户全景视图
* @Author JiangTao
* @Date 2021-10-23 下午 06:36
*/
@Component({
name: "CompanyDetails",
components: { TitleBar, TableSingleView },
})
export default class CompanyDetails extends Vue {
title = "客户全景视图"; // 页面标题
cus_name: string = "";
legal_name: string = "";
reg_cap_amt: string = "";
nreg_start_date : string = "";
phone: string = "";
address: string = "";
REG_CAP_CUR: string = "";
YQXX_num: any = 0; //舆情信息数量
list: any[] = [];
keyValueSingle = {
REPR_NAME: "法定代表人",
REG_CAP: "注册资本",
EST_DATE: "成立日期",
REPR_PHONE: "电话",
PT_STATE: "营业状态",
ENT_TYPE: "企业类型",
BUSI_SCOPE: "经营范围",
OP_LOCAL: "地址",
};
dataBasic = {};
jbxx = [
{
infoNum: 0,
text: "基本信息",
key: "Overview",
path: "Overview",
iconcls: "icon-a-jibenxinxi18x20ziyuan8",
},
{
infoNum: 0,
text: "财务信息",
key: "FinancialInformation",
path: "FinancialInformation",
iconcls: "icon-a-caiwuxinxi18x20ziyuan14",
},
{
infoNum: 0,
text: "公司章程",
key: "CompanyPolicy",
path: "CompanyPolicy",
iconcls: "icon-a-gongsizhangcheng20x20ziyuan12",
},
{
infoNum: 0,
text: "年报信息",
key: "AnnualReport",
path: "AnnualReport",
iconcls: "icon-a-nianbaoxinxi18x20ziyuan13",
},
{
infoNum: 0,
text: "评级情况",
key: "CustomerRatings",
path: "CustomerRatings",
iconcls: "icon-a-pingjiqingkuang20x18ziyuan34",
},
{
infoNum: 0,
text: "综合收益率",
key: "CustomerContribution",
path: "CustomerContribution",
iconcls: "icon-a-zongheshouyishuai20x20ziyuan35",
},
{
infoNum: 0,
text: "股权及动产抵押",
key: "EquityPledgeAndMovablePropertyPledge",
path: "EquityPledgeAndMovablePropertyPledge",
iconcls: "icon-a-guquanjidongchanzhiya18x20ziyuan9",
},
{
infoNum: 0,
text: "股票信息",
key: "StockInformation",
path: "StockInformation",
iconcls: "icon-a-gupiaoxinxi20x20ziyuan10",
},
];
gxtp = [
{
infoNum: 0,
text: "企业图谱",
key: "EnterpriseMap",
path: "EnterpriseMap",
iconcls: "icon-a-qiyetupu20x20ziyuan16",
},
{
infoNum: 0,
text: "关联方认定图",
key: "RelatedParty",
path: "RelatedParty",
iconcls: "icon-a-guanlianfang20x20ziyuan17",
},
{
infoNum: 0,
text: "集团图谱",
key: "FroupAndEconomicDependenceInformation",
path: "FroupAndEconomicDependenceInformation",
iconcls: "icon-a-jituanguanxi28x28ziyuan18",
},
];
sgz = [
{
infoNum: 0,
text: "企业时光轴",
key: "QYSGZ",
path: "QYSGZView",
iconcls: "iconshesuxinxixpx",
},
{
infoNum: 0,
text: "营销时光轴",
key: "YXSGZ",
path: "YXSGZView",
iconcls: "iconshesuxinxixpx",
},
];
ywxx = [
{
infoNum: 0,
text: "授信视图",
key: "UnifiedCustomerCreditView",
path: "UnifiedCustomerCreditView",
iconcls: "icon-a-shouxinshitu18x20ziyuan38",
},
{
infoNum: 0,
text: "担保视图",
key: "GuaranteeView",
path: "GuaranteeView",
iconcls: "icon-a-danbaoshitu28x28ziyuan22",
},
{
infoNum: 0,
text: "项目信息",
key: "ProjectInfo",
path: "ProjectInfo",
iconcls: "icon-a-xiangmuxinxi18x20ziyuan11",
},
{
infoNum: 0,
text: "企业存量业务查询",
key: "ApplicationStatus",
path: "ApplicationStatus",
iconcls: "icon-a-zaituyewu20x20ziyuan36",
},
{
infoNum: 0,
text: "高管存量业务查询",
key: "CreditStatusOfClientExecutives",
path: "CreditStatusOfClientExecutives",
iconcls: "icon-a-gaoguanshouxin18x20ziyuan39",
},
];
fxxx = [
{
infoNum: 0,
text: "舆情信息",
key: "PublicOpinionInformation",
path: "PublicOpinionInformation",
iconcls: "icon-a-yuqingxinxi20x18ziyuan23",
},
{
infoNum: 0,
text: "风险预警信号",
key: "RiskWarning",
path: "RiskWarning",
iconcls: "icon-ziyuan",
},
{
infoNum: 0,
text: "工商-历史变更",
key: "LSBG",
path: "LSBGView",
iconcls: "icon-lishijilu",
},
{
infoNum: 0,
text: "工商-异常经营名录",
key: "JYFX",
path: "YCJYMLView",
iconcls: "icon-a-jingyingfengxian18x20ziyuan24",
},
{
infoNum: 0,
text: "工商-处罚信息",
key: "CFXX",
path: "CFXXList",
iconcls: "icon-a-chufaxinxi18x20ziyuan25",
},
{
infoNum: 0,
text: "工商-清算",
key: "QSXX",
path: "ClearInformation",
iconcls: "icon-a-qingsuanxinxi18x20ziyuan26",
},
{
infoNum: 0,
text: "裁判文书",
key: "Judgment",
path: "Judgment",
iconcls: "icon-a-caipanwenshu18x20ziyuan27",
},
{
infoNum: 0,
text: "法院公告",
key: "FYGG",
path: "FYGGList",
iconcls: "icon-a-fayuangonggao18x20ziyuan28",
},
{
infoNum: 0,
text: "被执行人",
key: "ExecutedPerson",
path: "ExecutedPerson",
iconcls: "icon-a-beizhihangren20x20ziyuan29",
},
{
infoNum: 0,
text: "开庭公告",
key: "CourtAnnouncement",
path: "CourtAnnouncement",
iconcls: "icon-a-kaitinggonggao18x20ziyuan30",
},
{
infoNum: 0,
text: "案件流程",
key: "CaseProcess",
path: "CaseProcess",
iconcls: "icon-a-anjianliucheng20x20ziyuan31",
},
{
infoNum: 0,
text: "曝光台",
key: "ExposureTable",
path: "ExposureTable",
iconcls: "icon-a-puguangtai20x18ziyuan32",
},
{
infoNum: 0,
text: "司法查冻扣",
key: "JudicialDeduction",
path: "JudicialDeduction",
iconcls: "icon-a-sifachadongkou20x18ziyuan33",
},
];
cs = [
{
infoNum: 0,
text: "初筛历史",
key: "CustomerPreliminaryScreeningHistory",
path: "CustomerPreliminaryScreeningHistory",
iconcls: "icon-a-chushailishi20x20ziyuan37",
},
];
mounted() {
console.log(this.$store.getters.getCusInfo);
this.cus_name = this.$store.getters.getCusInfo.cus_name;
this.selectAll();
}
selectAll() {
Promise.all([
this.selectYQXX().then(() => {
this.selectJBXX();
}),
this.getCusInfoGS(),
// this.getRrisk(),
this.getCustInfo()
]).then(() => {
NativeUI.closeWaiting();
});
}
/**
* @Description 查询舆情信息数量
* @Author JiangTao
* @Date 2022-01-05 下午 05:48
*/
selectYQXX(pageNo = 1) {
this.YQXX_num = '0';
let param = {
entName: this.$store.getters.getCusInfo.cus_name,
beginDate: '',
endDate: '',
sentiment: '0',
sortOrder: '1',
pageIndex: pageNo,
pageSize: '',
ProdId: Public.getProdId(),
SvrCode: Public.getSvrCode(nettyApi.TRADE_CODE.selectYQXX),
ClientNo: this.$store.getters.getCusInfo.cus_id,
tc: nettyApi.TRADE_CODE.selectYQXX
};
return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
if (res.rc == "1") {
this.YQXX_num = res.totalCount;
} else {
if (res.ret_code != '4999999') {
NativeUI.toast(res.msg);
}
}
});
}
/**
* @Description 查询数据数量
* @Author JiangTao
* @Date 2022-01-05 下午 05:47
*/
selectJBXX() {
var param = {
pname: this.$store.getters.getCusInfo.cus_name,
tc: nettyApi.TRADE_CODE.selectJBXX
};
NativeUI.showWaiting('正在查询...');
return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
if (res.rc == "1") {
this.$set(this.fxxx, 0, { ...this.fxxx[0], infoNum: this.YQXX_num != "0" ? Number(this.YQXX_num) : 0 });
this.$set(this.fxxx, 6, { ...this.fxxx[6], infoNum: res.cpwsCount != "0" ? Number(res.cpwsCount) : 0 });
this.$set(this.fxxx, 7, { ...this.fxxx[7], infoNum: res.fyggCount != "0" ? Number(res.fyggCount) : 0 });
this.$set(this.fxxx, 8, { ...this.fxxx[8], infoNum: res.zxggCount != "0" ? Number(res.zxggCount) : 0 });
this.$set(this.fxxx, 9, { ...this.fxxx[9], infoNum: res.ktggCount != "0" ? Number(res.ktggCount) : 0 });
this.$set(this.fxxx, 10, { ...this.fxxx[10], infoNum: res.ajlcCount != "0" ? Number(res.ajlcCount) : 0 });
this.$set(this.fxxx, 11, { ...this.fxxx[11], infoNum: res.bgtCount != "0" ? Number(res.bgtCount) : 0 });
this.$set(this.fxxx, 12, { ...this.fxxx[12], infoNum: res.sifacdkCount != "0" ? Number(res.sifacdkCount) : 0 });
} else {
if (res.ret_code != '4999999') {
NativeUI.toast(res.msg);
}
}
});
}
/**
* @Description 获取工商客户详情
* @Author JiangTao
* @Date 2022-01-05 下午 05:14
*/
getCusInfoGS() {
let param = {
CUST_FULL_NAME: this.$store.getters.getCusInfo.cus_name,
CERT_ARRAY_INFO: [
{
CERT_TYPE: Public.getGScode(this.$store.getters.getCusInfo.cert_type),
CERT_NO: this.$store.getters.getCusInfo.cert_code
}
],
GS_QUERY_OPTION_ARRAY: [
{
GS_QUERY_OPTION_LIST: "1"
}
],
ProdId: Public.getProdId(),
SvrCode: Public.getSvrCode(nettyApi.TRADE_CODE.selectGSXXCX),
ClientNo: this.$store.getters.getCusInfo.cus_id,
tc: nettyApi.TRADE_CODE.selectGSXXCX
};
NativeUI.showWaiting("正在查询...");
return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
console.log(res);
NativeUI.closeWaiting();
if (res.rc == "1") {
this.dataBasic = res;
// this.legal_name = res.REPR_NAME;
// this.reg_cap_amt = res.REG_CAP;
(this.dataBasic as any).EST_DATE = forTime((this.dataBasic as any).EST_DATE);
(this.dataBasic as any).ENT_TYPE = getText((this.dataBasic as any).ENT_TYPE, "ENTTYPE");
(this.dataBasic as any).PT_STATE = getText((this.dataBasic as any).PT_STATE, "ENTSTATUS");
// this.phone = res.REPR_PHONE;
// this.address = res.OP_LOCAL;
// this.REG_CAP_CUR = getText(res.REG_CAP_CUR, "CURRENCY");
// if (this.REG_CAP_CUR == "人民币") {
// this.REG_CAP_CUR = "";
// }
} else {
if (res.ret_code != '4999999') {
NativeUI.toast(res.msg);
}
}
});
}
/**
* @Description 获取客户标签
* @Author JiangTao
* @Date 2022-01-05 下午 05:14
*/
getCustInfo() {
this.list = [];
var param = {
tc: nettyApi.TRADE_CODE.selectKHXQ,
cus_id: this.$store.getters.getCusInfo.cus_id,
cus_name: this.$store.getters.getCusInfo.cus_name,
cert_type: this.$store.getters.getCusInfo.cert_type,
cert_code: this.$store.getters.getCusInfo.cert_code
};
NativeUI.showWaiting('正在查询...');
return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
console.log(param);
console.log(res);
if (res.rc == "1") {
if (res.cusTagIColl && res.cusTagIColl.length > 0) {
for (let i = 0; i < res.cusTagIColl.length; i++) {
if (res.cusTagIColl[i].tag_color == "red") {
res.cusTagIColl[i].backgroudColor = "#FFDEDE";
res.cusTagIColl[i].color = "#FF0000";
} else if (res.cusTagIColl[i].tag_color == "dodgerblue") {
res.cusTagIColl[i].backgroudColor = "#E7F9FF";
res.cusTagIColl[i].color = "#0596FF";
} else if (res.cusTagIColl[i].tag_color == "green") {
res.cusTagIColl[i].backgroudColor = "#E1FFF3";
res.cusTagIColl[i].color = "#00C54F";
} else if (res.cusTagIColl[i].tag_color == "orange") {
res.cusTagIColl[i].backgroudColor = "#FFE4D9";
res.cusTagIColl[i].color = "#FF4003";
} else if (res.cusTagIColl[i].tag_color == "yellow") {
res.cusTagIColl[i].backgroudColor = "#FFF9E4";
res.cusTagIColl[i].color = "#FFB800";
}
this.list.push(res.cusTagIColl[i]);
}
console.log(this.list);
}
} else {
NativeUI.toast(res.msg);
}
});
}
data_details(item: any) {
this.$router.push({
path: item.path,
});
}
onClick() {
this.$router.go(-1);
}
navigation() {
console.log("navigation");
}
getCompanyInfo() {
this.$router.push({
path: "/customer-mgt/timeLine/customer-info/time-line/company-timeline",
});
}
getCompanyMarket() {
this.$router.push({
path: "/customer-mgt/timeLine/customer-info/time-line/enterprise-timeline",
});
}
//风险信息
risk_information() {
console.log("risk_information");
this.$router.push({
path: "/customer-mgt/customer-info/business-information/risk-information",
query: {
warn: "risk_information",
},
});
}
//集团及经济依存信息
froup_and_economic_dependence_information() {
this.$router.push({
path: "/customer-mgt/customer-info/relationship-graph/froup-and-economic-dependence-information",
query: {
warn: "froup_and_economic_dependence_information",
},
});
}
//客户经营信息
customer_management_information() {
this.$router.push({
path: "/customer-mgt/customer-info/business-application-status/customer-management-information",
query: {
warn: "customer_management_information",
},
});
}
//财务信息
financial_information() {
this.$router.push({
path: "/customer-mgt/customer-info/business-application-status/financial-information",
query: {
warn: "financial_information",
},
});
}
//历史标签信息
historical_label() {
this.$router.push({
path: "/customer-mgt/customer-info/history-information/customer-tagHistory",
query: {
warn: "historical_label",
},
});
}
}
</script>
<style scoped>
.customer-panorama {
width: 100%;
}
.client {
width: 25%;
height: 100%;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 10px;
}
.client-avatar {
width: 60px;
height: 60px;
background-color: rgba(208, 241, 255, 1);
border-radius: 4px;
display: inline-block;
padding: 5.2%;
background-image: url("../../assets/svg/blue-circle.svg");
background-position: center;
background-repeat: no-repeat;
}
.client-avatar img {
width: 100%;
}
.client-top {
width: 100%;
height: 65px;
display: flex;
}
.client-top > div:nth-child(2) {
width: 75%;
font-size: 20px;
color: #333333;
font-family: "Arial Normal", "Arial";
font-weight: bold;
padding-left: 4%;
}
.client-central {
width: 100%;
height: 10%;
overflow-y: auto;
padding: 5px 0px;
}
.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 {
display: flex;
flex-wrap:wrap;
justify-content: flex-start;
}
.client-central-label-1 div {
width: auto;
text-align: center;
font-size: 12px;
line-height: 21px;
padding: 3px 5px 0 5px;
margin-right: 3%;
margin-bottom: 5px;
border-radius: 3px;
}
.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: 95%;
padding-right: 3%;
margin: 0 auto;
}
.client-bottom > div:nth-child(3) {
height: 15%;
}
.historical-label {
display: flex;
justify-content: flex-end;
margin-bottom: 10%;
color: #02a4ec;
}
.customer-information div {
line-height: 30px;
font-family: "Arial Normal", "Arial";
}
.time-axis {
display: flex;
height: 8%;
width: 100%;
align-items: center;
justify-content: space-around;
flex-wrap: nowrap;
margin: 2% 0;
}
.time-axis > div > div:nth-child(1) {
width: 25px;
margin: 0 auto;
}
.navigation {
display: flex;
justify-content: center;
align-items: center;
width: 40%;
height: 35px;
margin: 10px auto;
background-color: white;
color: #02a4ec;
border: 1px solid #02a4ec;
font-size: 14px;
border-radius: 34px;
text-align: center;
padding: 5px 0;
}
.client-medical-examination {
display: flex;
justify-content: center;
align-items: center;
width: 40%;
height: 35px;
margin: 10px auto;
background-color: white;
color: #999999;
border: 1px solid rgba(153, 153, 153, 1);
font-size: 14px;
border-radius: 34px;
text-align: center;
padding: 5px 0;
}
.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;
}
.details > * {
font-family: "Arial Normal", "Arial";
margin: 2% 0;
}
.details {
height: 60%;
overflow-y: auto;
}
.customer-information {
width: 75%;
height: calc(100vh - 60px);
background-color: #f2f2f2;
padding: 1% 3% 1% 1.5%;
border-left: 1px solid #e8e8e8;
overflow-y: auto;
}
.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-content {
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgba(255, 255, 255, 1);
border: 2px solid rgba(254, 235, 237, 1);
border-radius: 10px;
padding: 2%;
}
h3 {
font-weight: bold;
margin-bottom: 0;
}
.customer-information-content > div {
display: flex;
align-items: center;
justify-content: space-between;
}
.customer-information-content > div > div:nth-child(2) {
font-size: 16px;
color: #00000099;
}
.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-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;
}
.information-surface-title-content div {
width: 25%;
margin: 1.4% 0;
padding-right: 5%;
font-size: 114.3%;
}
.information-surface-title-content div a {
display: flex;
align-items: flex-start;
}
.card-icon {
width: 40px;
height: 40px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.iconstyle {
height: 30px;
font-size: 20px !important;
color: white !important;
}
.datanum {
width: auto;
min-width: 25px;
height: 25px;
display: flex;
align-content: center;
justify-items: center;
text-align: center;
position: absolute;
top: -13px;
left: 90%;
background-color: #fd5065;
border-radius: 15px;
font-size: 16px;
padding-left: 5px;
padding-right: 5px;
color: white;
}
.datanum div {
width: auto;
margin: 0 auto;
line-height: 26px !important;
}
.icon-color {
width: 40px;
height: 40px;
}
::v-deep .ValueCls {
grid-template-columns: 1.7fr 3fr;
}
</style>