1345 lines
48 KiB
Vue
1345 lines
48 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="content-wrapper">
|
|
<div class="header-title" ref="searchHeightRef">
|
|
<el-icon class="title-icon"><TrendCharts /></el-icon>
|
|
资产总览
|
|
</div>
|
|
<div class="header-con" ref="searchHeightRef">
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Wallet /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">净资产</div>
|
|
<div class="num">
|
|
{{
|
|
(
|
|
parseFloat(debitTotalBalance) +
|
|
parseFloat(investBalance) -
|
|
parseFloat(unClearedOnlineDebt) -
|
|
parseFloat(creditBalance) -
|
|
parseFloat(peopleLendHistory)
|
|
).toFixed(2)
|
|
}}<span>元</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-red">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><DocumentCopy /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">总负债</div>
|
|
<div class="num">{{ (parseFloat(unClearedOnlineDebt) + parseFloat(creditBalance) + parseFloat(peopleLendHistory)).toFixed(2) }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-blue" v-hasPermi="['invest:debitCard']">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Coin /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">储蓄账户余额</div>
|
|
<div class="num">{{ debitTotalBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><CreditCard /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">储蓄卡余额</div>
|
|
<div class="num">{{ debitBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:onlineLend', 'invest:creditCard']" ref="searchHeightRef">
|
|
<div class="item gradient-purple" v-hasPermi="['invest:futureStocks:list']">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><TrendCharts /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">投资账户余额</div>
|
|
<div class="num">{{ investBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-red" v-hasPermi="['invest:onlineLend']">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Warning /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">未结清贷款本息</div>
|
|
<div class="num">{{ unClearedOnlineDebt }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange" v-hasPermi="['invest:onlineLend']">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><User /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">人情欠款</div>
|
|
<div class="num">{{ peopleLendHistory }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-blue" v-hasPermi="['invest:creditCard']">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><CreditCard /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">信用卡已使用额度</div>
|
|
<div class="num">{{ creditBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-title" v-hasPermi="['invest:debitCard']" ref="searchHeightRef">
|
|
<el-icon class="title-icon"><Coin /></el-icon>
|
|
储蓄账户信息
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:debitCard']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><CreditCard /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">I类储蓄卡</div>
|
|
<div class="num">{{ debitICount }}<span>张</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Postcard /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">II类储蓄卡</div>
|
|
<div class="num">{{ debitIICount }}<span>张</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple" v-show="debitOnlineCount > 0">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Iphone /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">网络账户</div>
|
|
<div class="num">{{ debitOnlineCount }}<span>个</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange" v-show="storedValueCardCount > 0">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Ticket /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">储值卡</div>
|
|
<div class="num">{{ storedValueCardCount }}<span>张</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:debitCard']" ref="searchHeightRef">
|
|
<div class="item gradient-gray" v-show="otherDebitCount > 0">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><More /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">其他账户</div>
|
|
<div class="num">{{ otherDebitCount }}<span>个</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Wallet /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">储蓄账户余额</div>
|
|
<div class="num">{{ debitTotalBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Coin /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">储蓄卡余额</div>
|
|
<div class="num">{{ debitBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple" v-show="debitOnlineCount > 0">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Monitor /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">网络账户余额</div>
|
|
<div class="num">{{ debitOnlineBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="header-con"
|
|
v-show="storedValueCardCount > 0 || housingFundBalance > 0 || medicalBalance > 0 || personalPensionBalance > 0"
|
|
v-hasPermi="['invest:debitCard']"
|
|
ref="searchHeightRef"
|
|
>
|
|
<div class="item gradient-orange" v-show="storedValueCardCount > 0">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Ticket /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">储值卡余额</div>
|
|
<div class="num">{{ storedValueCardBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-blue" v-show="housingFundBalance > 0">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><House /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">住房公积金余额</div>
|
|
<div class="num">{{ housingFundBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green" v-show="medicalBalance > 0">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><FirstAidKit /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">职工医保余额</div>
|
|
<div class="num">{{ medicalBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple" v-show="personalPensionBalance > 0">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Van /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">个人养老金余额</div>
|
|
<div class="num">{{ personalPensionBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-title" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
|
|
<el-icon class="title-icon"><CreditCard /></el-icon>
|
|
信用卡信息
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><CreditCard /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">信用卡总数</div>
|
|
<div class="num">{{ creditCount }}<span>张</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Histogram /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">总额度</div>
|
|
<div class="num">{{ creditLimit }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Money /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">已使用额度</div>
|
|
<div class="num">{{ creditBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Wallet /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">可用额度</div>
|
|
<div class="num">{{ creditAvailableLimit }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><DataLine /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">信用卡使用率</div>
|
|
<div class="num">{{ creditBillRate }}<span>%</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Document /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">当月账单</div>
|
|
<div class="num">{{ currentCreditBill }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Calendar /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">当月分期本息</div>
|
|
<div class="num">{{ creditInstallment }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
|
|
<div class="item gradient-red">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Timer /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">未结清分期</div>
|
|
<div class="num">{{ unclearedCreditInstallmentCount }}<span>笔</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Coin /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">未结清分期本息</div>
|
|
<div class="num">{{ unclearedCreditInstallment }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Money /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">未结清分期本金</div>
|
|
<div class="num">{{ unclearedCreditInstallmentPrinciple }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><PriceTag /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">未结清分期利息</div>
|
|
<div class="num">{{ unclearedCreditInstallmentInterest }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><CircleCheck /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">已结清分期</div>
|
|
<div class="num">{{ clearedCreditInstallmentCount }}<span>笔</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Coin /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">已结清分期本息</div>
|
|
<div class="num">{{ clearedCreditInstallmentDebt }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Money /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">已结清分期本金</div>
|
|
<div class="num">{{ clearedCreditInstallmentPrinciple }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><PriceTag /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">已结清分期利息</div>
|
|
<div class="num">{{ clearedCreditInstallmentInterest }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><DataAnalysis /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">上月账单使用率</div>
|
|
<div class="num">{{ lastMonthUsedRate }}<span>%</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Document /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">上月账单</div>
|
|
<div class="num">{{ lastMonthUsedLimit }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><TrendCharts /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">近6个月账单使用率</div>
|
|
<div class="num">{{ lastSixMonthUsedRate }}<span>%</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><DataLine /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">近6个月账单平均使用额度</div>
|
|
<div class="num">{{ lastSixMonthUsedLimit }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-title" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
|
|
<el-icon class="title-icon"><Briefcase /></el-icon>
|
|
借贷账户信息
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Briefcase /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">贷款账户</div>
|
|
<div class="num">{{ onlineLendCount }}<span>个</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-red">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Warning /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">未结清贷款本息</div>
|
|
<div class="num">{{ unClearedOnlineDebt }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><User /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">人情账户</div>
|
|
<div class="num">{{ peopleLendCount }}<span>人</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Money /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">人情欠款</div>
|
|
<div class="num">{{ peopleLendHistory }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Calendar /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">当月应还款</div>
|
|
<div class="num">{{ dueOnlineDebt }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><CircleCheck /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">当月已还款</div>
|
|
<div class="num">{{ repaidOnlineDebt }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Clock /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">当月待还款</div>
|
|
<div class="num">{{ leftOnlineDebt }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
|
|
<div class="item gradient-red">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Timer /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">未结清贷款</div>
|
|
<div class="num">{{ unclearedOnlineDebtCount }}<span>笔</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Money /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">未结清贷款本金</div>
|
|
<div class="num">{{ unClearedOnlineDebtPrinciple }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><PriceTag /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">未结清贷款利息</div>
|
|
<div class="num">{{ unClearedOnlineDebtInterest }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><CircleCheck /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">已结清贷款</div>
|
|
<div class="num">{{ clearedOnlineDebtCount }}<span>笔</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Money /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">已结清贷款本金</div>
|
|
<div class="num">{{ clearedOnlineDebtPrinciple }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><PriceTag /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">已结清贷款利息</div>
|
|
<div class="num">{{ clearedOnlineDebtInterest }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-title" v-hasPermi="['invest:posmachine:list']" ref="searchHeightRef">
|
|
<el-icon class="title-icon"><ShoppingCart /></el-icon>
|
|
POS机信息
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:posmachine:list']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Printer /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">POS机</div>
|
|
<div class="num">{{ posCount }}<span>台</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><DataBoard /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">当月刷卡次数</div>
|
|
<div class="num">{{ currentMonthCount }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Money /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">当月刷卡金额</div>
|
|
<div class="num">{{ currentMonthAmount }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><PriceTag /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">当月刷卡手续费</div>
|
|
<div class="num">{{ currentMonthCommission }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:posmachine:list']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Calendar /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">当年刷卡次数</div>
|
|
<div class="num">{{ currentYearCount }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Coin /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">当年刷卡金额</div>
|
|
<div class="num">{{ currentYearAmount }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><PriceTag /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">当年刷卡手续费</div>
|
|
<div class="num">{{ currentYearCommission }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:posmachine:list']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><DataAnalysis /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">累计刷卡次数</div>
|
|
<div class="num">{{ accumulateCount }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Wallet /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">累计刷卡金额</div>
|
|
<div class="num">{{ accumulateAmount }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><PriceTag /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">累计刷卡手续费</div>
|
|
<div class="num">{{ accumulateCommission }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-title" v-hasPermi="['invest:futureStocks:list']" ref="searchHeightRef">
|
|
<el-icon class="title-icon"><TrendCharts /></el-icon>
|
|
投资账户信息
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:futureStocks:list']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Postcard /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">股票账户</div>
|
|
<div class="num">{{ stocksCount }}<span>个</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><DataLine /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">期货账户</div>
|
|
<div class="num">{{ futuresCount }}<span>个</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Wallet /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">投资账户余额</div>
|
|
<div class="num">{{ investBalance }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:futureStocks:list']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><TrendCharts /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">本月投资收益</div>
|
|
<div class="num">{{ currentMonthInvest }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Sunrise /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">本月投资盈利</div>
|
|
<div class="num">{{ currentMonthIncome }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-red">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Sunset /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">本月投资亏损</div>
|
|
<div class="num">{{ currentMonthExpenses }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:futureStocks:list']" ref="searchHeightRef">
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Trophy /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">总收益</div>
|
|
<div class="num">{{ totalIncome }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><DataLine /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">期货收益</div>
|
|
<div class="num">{{ futuresIncome }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Histogram /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">股票收益</div>
|
|
<div class="num">{{ stocksIncome }}<span>元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-title" v-hasPermi="['invest:creditQueryRecord:list']" ref="searchHeightRef">
|
|
<el-icon class="title-icon"><Document /></el-icon>
|
|
征信信息
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:creditQueryRecord:list']" ref="searchHeightRef">
|
|
<div class="item gradient-red">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Warning /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">近1月硬查询</div>
|
|
<div class="num">{{ lastOneMonths }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Search /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">近2月硬查询</div>
|
|
<div class="num">{{ lastTwoMonths }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><View /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">近3月硬查询</div>
|
|
<div class="num">{{ lastThreeMonths }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Document /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">近6月硬查询</div>
|
|
<div class="num">{{ lastSixMonths }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:creditQueryRecord:list']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Calendar /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">近1年硬查询</div>
|
|
<div class="num">{{ lastOneYears }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Histogram /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">近2年硬查询</div>
|
|
<div class="num">{{ lastTwoYears }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><DataAnalysis /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">总硬查询</div>
|
|
<div class="num">{{ lastAllYears }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-con" v-hasPermi="['invest:creditQueryRecord:list']" ref="searchHeightRef">
|
|
<div class="item gradient-blue">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><User /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">近6月个人查询</div>
|
|
<div class="num">{{ lastSixMonthQueryCount }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-green">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Management /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">近6月贷后管理</div>
|
|
<div class="num">{{ lastSixMonthsAfterLoan }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-orange">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><Monitor /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">近2年贷后管理</div>
|
|
<div class="num">{{ lastTwoYearsAfterLoan }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item gradient-purple">
|
|
<div class="icon-wrapper">
|
|
<el-icon class="item-icon"><DataBoard /></el-icon>
|
|
</div>
|
|
<div class="info-sum">
|
|
<div class="title">贷后管理总数</div>
|
|
<div class="num">{{ totalAfterLoan }}<span>次</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup name="facilityType">
|
|
import {
|
|
getPosAccountsInfo,
|
|
getInvestAccountsInfo,
|
|
getCreditReportInfo,
|
|
getLendAccountsInfo,
|
|
getCreditAccountsInfo,
|
|
getDebitAccountsInfo
|
|
} from '@/api/invest/accountAnalysis.js'
|
|
|
|
//POS机信息
|
|
const posCount = ref(0) //POS机总数
|
|
const currentMonthAmount = ref(0) //当月刷卡金额
|
|
const currentMonthCommission = ref(0) //当月刷卡手续费
|
|
const currentMonthCount = ref(0) //当月刷卡次数
|
|
const currentYearAmount = ref(0) //当年刷卡金额
|
|
const currentYearCommission = ref(0) //当年刷卡手续费
|
|
const currentYearCount = ref(0) //当年刷卡次数
|
|
const accumulateAmount = ref(0) //累计刷卡金额
|
|
const accumulateCommission = ref(0) //累计刷卡手续费
|
|
const accumulateCount = ref(0) //累计刷卡次数
|
|
|
|
//投资账户信息
|
|
const stocksCount = ref(0) //股票账户
|
|
const futuresCount = ref(0) //期货账户
|
|
const currentMonthInvest = ref(0) //当月收益
|
|
const currentMonthIncome = ref(0) //当月盈利
|
|
const currentMonthExpenses = ref(0) //当月亏损
|
|
const futuresIncome = ref(0) //期货收益
|
|
const totalIncome = ref(0) //投资总收益
|
|
const stocksIncome = ref(0) //股票收益
|
|
const investBalance = ref(0) //投资账户余额
|
|
|
|
//储蓄账户信息
|
|
const debitCount = ref(0) //储蓄卡总数
|
|
const debitICount = ref(0) //I类储蓄卡总数
|
|
const debitIICount = ref(0) //II类储蓄卡总数
|
|
const debitOnlineCount = ref(0) //网络账户总数
|
|
const storedValueCardCount = ref(0) //储值卡总数
|
|
const otherDebitCount = ref(0) //其他账户数
|
|
const storedValueCardBalance = ref(0) //储值卡余额
|
|
const housingFundBalance = ref(0) //公积金余额
|
|
const medicalBalance = ref(0) //医保余额
|
|
const debitOnlineBalance = ref(0) //网络账户余额
|
|
const personalPensionBalance = ref(0) //个人养老金余额
|
|
const otherDebitBalance = ref(0) //其他余额
|
|
const debitBalance = ref(0) //储蓄卡余额
|
|
const debitTotalBalance = ref(0) //储蓄账户余额
|
|
|
|
//借贷账户信息
|
|
const peopleLendHistory = ref(0) //人情借贷余额
|
|
const peopleLendCount = ref(0) //人情账户
|
|
const onlineLendCount = ref(0) //贷款账户
|
|
const unclearedOnlineDebtCount = ref(0) //未结清贷款账户数
|
|
const unClearedOnlineDebt = ref(0) //未结清贷款本息
|
|
const unClearedOnlineDebtPrinciple = ref(0) //未结清贷款本金
|
|
const unClearedOnlineDebtInterest = ref(0) //未结清贷款利息
|
|
const clearedOnlineDebtCount = ref(0) //已结清贷款账户数
|
|
const clearedOnlineDebt = ref(0) //已结清贷款本息
|
|
const clearedOnlineDebtPrinciple = ref(0) //已结清贷款本金
|
|
const clearedOnlineDebtInterest = ref(0) //已结清贷款利息
|
|
const dueOnlineDebt = ref(0) //本月应还贷款
|
|
const repaidOnlineDebt = ref(0) //本月已还贷款
|
|
const leftOnlineDebt = ref(0) //本月剩余应还贷款
|
|
|
|
//信用卡信息
|
|
const creditInstallmentHistory = ref(0)
|
|
const creditCount = ref(0) //信用卡数量
|
|
const currentCreditBill = ref(0)
|
|
const creditInstallment = ref(0)
|
|
const creditLimit = ref(0) //信用卡额度
|
|
const lastSixMonthUsedLimit = ref(0) //近6月使用额度
|
|
const lastSixMonthUsedRate = ref(0) //近6月使用率
|
|
const lastMonthUsedLimit = ref(0) //上月已用额度
|
|
const lastMonthUsedRate = ref(0) //上月使用率
|
|
const creditBalance = ref(0) //信用卡余额
|
|
const creditAvailableLimit = ref(0) //信用卡可用额度
|
|
const creditBillRate = ref(0) //信用卡使用率
|
|
const unclearedCreditInstallmentCount = ref(0) //未结清分期数量
|
|
const unclearedCreditInstallment = ref(0) //未结清分期本息
|
|
const unclearedCreditInstallmentPrinciple = ref(0) //未结清分期本金
|
|
const unclearedCreditInstallmentInterest = ref(0) //未结清分期利息
|
|
const clearedCreditInstallmentCount = ref(0) //已结清分期数量
|
|
const clearedCreditInstallmentDebt = ref(0) //已结清分期本息
|
|
const clearedCreditInstallmentPrinciple = ref(0) //已结清分期本金
|
|
const clearedCreditInstallmentInterest = ref(0) //已结清分期利息
|
|
|
|
//征信报告信息
|
|
const lastOneMonths = ref(0) //近1月硬查询
|
|
const lastTwoMonths = ref(0) //近2月硬查询
|
|
const lastThreeMonths = ref(0) //近3月硬查询
|
|
const lastSixMonths = ref(0) //近6月硬查询
|
|
const lastOneYears = ref(0) //近1年硬查询
|
|
const lastTwoYears = ref(0) //近2年硬查询
|
|
const lastAllYears = ref(0) //所有硬查询
|
|
const lastSixMonthQueryCount = ref(0) //近6月个人查询
|
|
const lastSixMonthsAfterLoan = ref(0) //近6月贷后管理
|
|
const lastTwoYearsAfterLoan = ref(0) //近2年贷后管理
|
|
const totalAfterLoan = ref(0) //总贷后管理
|
|
|
|
const getInvestAccountsInfoData = () => {
|
|
getInvestAccountsInfo().then((res) => {
|
|
stocksCount.value = res.data.stocksCount
|
|
futuresCount.value = res.data.futuresCount
|
|
totalIncome.value = res.data.totalIncome
|
|
futuresIncome.value = res.data.futuresIncome
|
|
stocksIncome.value = res.data.stocksIncome
|
|
investBalance.value = res.data.investBalance
|
|
currentMonthInvest.value = res.data.currentMonthInvest
|
|
currentMonthIncome.value = res.data.currentMonthIncome
|
|
currentMonthExpenses.value = res.data.currentMonthExpenses
|
|
})
|
|
}
|
|
|
|
const getPosAccountsInfoData = () => {
|
|
getPosAccountsInfo().then((res) => {
|
|
posCount.value = res.data.posCount
|
|
currentMonthAmount.value = res.data.currentMonthAmount
|
|
currentMonthCommission.value = res.data.currentMonthCommission
|
|
currentMonthCount.value = res.data.currentMonthCount
|
|
currentYearAmount.value = res.data.currentYearAmount
|
|
currentYearCommission.value = res.data.currentYearCommission
|
|
currentYearCount.value = res.data.currentYearCount
|
|
accumulateAmount.value = res.data.accumulateAmount
|
|
accumulateCommission.value = res.data.accumulateCommission
|
|
accumulateCount.value = res.data.accumulateCount
|
|
})
|
|
}
|
|
|
|
const getCreditAccountsInfoData = () => {
|
|
getCreditAccountsInfo().then((res) => {
|
|
creditCount.value = res.data.creditCount
|
|
currentCreditBill.value = res.data.currentCreditBill
|
|
creditInstallment.value = res.data.creditInstallment
|
|
creditLimit.value = res.data.creditLimit
|
|
lastSixMonthUsedLimit.value = res.data.lastSixMonthUsedLimit
|
|
lastSixMonthUsedRate.value = res.data.lastSixMonthUsedRate
|
|
lastMonthUsedLimit.value = res.data.lastMonthUsedLimit
|
|
lastMonthUsedRate.value = res.data.lastMonthUsedRate
|
|
creditBalance.value = res.data.creditBalance
|
|
creditAvailableLimit.value = res.data.creditAvailableLimit
|
|
creditBillRate.value = res.data.creditBillRate
|
|
unclearedCreditInstallmentCount.value = res.data.unclearedCreditInstallmentCount
|
|
unclearedCreditInstallment.value = res.data.unclearedCreditInstallment
|
|
unclearedCreditInstallmentPrinciple.value = res.data.unclearedCreditInstallmentPrinciple
|
|
unclearedCreditInstallmentInterest.value = res.data.unclearedCreditInstallmentInterest
|
|
clearedCreditInstallmentCount.value = res.data.clearedCreditInstallmentCount
|
|
clearedCreditInstallmentDebt.value = res.data.clearedCreditInstallmentDebt
|
|
clearedCreditInstallmentPrinciple.value = res.data.clearedCreditInstallmentPrinciple
|
|
clearedCreditInstallmentInterest.value = res.data.clearedCreditInstallmentInterest
|
|
})
|
|
}
|
|
const getLendAccountsInfoData = () => {
|
|
getLendAccountsInfo().then((res) => {
|
|
peopleLendCount.value = res.data.peopleLendCount
|
|
onlineLendCount.value = res.data.onlineLendCount
|
|
unClearedOnlineDebt.value = res.data.unClearedOnlineDebt
|
|
creditInstallmentHistory.value = res.data.creditInstallmentHistory
|
|
peopleLendHistory.value = res.data.peopleLendHistory
|
|
unclearedOnlineDebtCount.value = res.data.unclearedOnlineDebtCount
|
|
clearedOnlineDebtCount.value = res.data.clearedOnlineDebtCount
|
|
clearedOnlineDebt.value = res.data.clearedOnlineDebt
|
|
dueOnlineDebt.value = res.data.dueOnlineDebt
|
|
repaidOnlineDebt.value = res.data.repaidOnlineDebt
|
|
leftOnlineDebt.value = res.data.leftOnlineDebt
|
|
unClearedOnlineDebtPrinciple.value = res.data.unClearedOnlineDebtPrinciple
|
|
unClearedOnlineDebtInterest.value = res.data.unClearedOnlineDebtInterest
|
|
clearedOnlineDebtPrinciple.value = res.data.clearedOnlineDebtPrinciple
|
|
clearedOnlineDebtInterest.value = res.data.clearedOnlineDebtInterest
|
|
})
|
|
}
|
|
const getCreditReportInfoData = () => {
|
|
getCreditReportInfo().then((res) => {
|
|
lastOneMonths.value = res.data.lastOneMonths
|
|
lastTwoMonths.value = res.data.lastTwoMonths
|
|
lastThreeMonths.value = res.data.lastThreeMonths
|
|
lastSixMonths.value = res.data.lastSixMonths
|
|
lastOneYears.value = res.data.lastOneYears
|
|
lastTwoYears.value = res.data.lastTwoYears
|
|
lastAllYears.value = res.data.lastAllYears
|
|
lastSixMonthQueryCount.value = res.data.lastSixMonthQueryCount
|
|
lastSixMonthsAfterLoan.value = res.data.lastSixMonthsAfterLoan
|
|
lastTwoYearsAfterLoan.value = res.data.lastTwoYearsAfterLoan
|
|
totalAfterLoan.value = res.data.totalAfterLoan
|
|
})
|
|
}
|
|
const getDebitAccountsInfoData = () => {
|
|
getDebitAccountsInfo().then((res) => {
|
|
debitCount.value = res.data.debitCount
|
|
debitICount.value = res.data.debitICount
|
|
debitIICount.value = res.data.debitIICount
|
|
debitOnlineCount.value = res.data.debitOnlineCount
|
|
storedValueCardCount.value = res.data.storedValueCardCount
|
|
debitBalance.value = res.data.debitBalance
|
|
debitTotalBalance.value = res.data.debitTotalBalance
|
|
debitOnlineBalance.value = res.data.debitOnlineBalance
|
|
storedValueCardBalance.value = res.data.storedValueCardBalance
|
|
housingFundBalance.value = res.data.housingFundBalance
|
|
medicalBalance.value = res.data.medicalBalance
|
|
personalPensionBalance.value = res.data.personalPensionBalance
|
|
otherDebitBalance.value = res.data.otherDebitBalance
|
|
otherDebitCount.value = res.data.otherDebitCount
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
getInvestAccountsInfoData()
|
|
getPosAccountsInfoData()
|
|
getDebitAccountsInfoData()
|
|
getCreditAccountsInfoData()
|
|
getLendAccountsInfoData()
|
|
getCreditReportInfoData()
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
background: #f5f7fa;
|
|
padding: 20px;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content-wrapper {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding-right: 10px;
|
|
padding-bottom: 40px;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(102, 126, 234, 0.3);
|
|
border-radius: 4px;
|
|
transition: background 0.3s;
|
|
|
|
&:hover {
|
|
background: rgba(102, 126, 234, 0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
margin-bottom: 20px;
|
|
padding-left: 12px;
|
|
border-left: 4px solid #667eea;
|
|
display: flex;
|
|
align-items: center;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
|
|
padding: 16px 20px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);
|
|
|
|
.title-icon {
|
|
margin-right: 12px;
|
|
font-size: 22px;
|
|
color: #667eea;
|
|
}
|
|
}
|
|
|
|
.header-con {
|
|
width: 100%;
|
|
min-height: 100px;
|
|
background-color: transparent;
|
|
margin-bottom: 20px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 20px;
|
|
|
|
.item {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 24px;
|
|
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.08), 0 0 0 1px rgba(102, 126, 234, 0.05);
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
list-style: none !important;
|
|
|
|
&::before,
|
|
&::after {
|
|
display: none !important;
|
|
content: none !important;
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
display: block !important;
|
|
}
|
|
|
|
&:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15), 0 0 0 1px rgba(102, 126, 234, 0.1);
|
|
|
|
&::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.icon-wrapper {
|
|
transform: scale(1.08);
|
|
|
|
.item-icon {
|
|
transform: rotate(8deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-wrapper {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 20px;
|
|
flex-shrink: 0;
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.05) 100%);
|
|
border: 1px solid rgba(102, 126, 234, 0.1);
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
&::before,
|
|
&::after {
|
|
display: none !important;
|
|
content: none !important;
|
|
}
|
|
|
|
.item-icon {
|
|
font-size: 40px;
|
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
}
|
|
|
|
.info-sum {
|
|
flex: 1;
|
|
min-width: 0;
|
|
|
|
&::before,
|
|
&::after {
|
|
display: none !important;
|
|
content: none !important;
|
|
}
|
|
|
|
.title {
|
|
color: #909399;
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.5px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
&::before,
|
|
&::after {
|
|
display: none !important;
|
|
content: none !important;
|
|
}
|
|
}
|
|
|
|
.num {
|
|
font-size: 28px;
|
|
font-family: DIN, Arial, sans-serif;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
line-height: 1.2;
|
|
word-break: break-all;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
white-space: nowrap;
|
|
|
|
&::before,
|
|
&::after {
|
|
display: none !important;
|
|
content: none !important;
|
|
}
|
|
|
|
span {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
font-weight: 500;
|
|
background: none;
|
|
-webkit-text-fill-color: #909399;
|
|
margin-left: 0;
|
|
|
|
&::before,
|
|
&::after {
|
|
display: none !important;
|
|
content: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Color variants - icon colors only
|
|
&.gradient-blue {
|
|
.icon-wrapper .item-icon {
|
|
color: #409eff;
|
|
}
|
|
}
|
|
|
|
&.gradient-green {
|
|
.icon-wrapper .item-icon {
|
|
color: #67c23a;
|
|
}
|
|
}
|
|
|
|
&.gradient-orange {
|
|
.icon-wrapper .item-icon {
|
|
color: #e6a23c;
|
|
}
|
|
}
|
|
|
|
&.gradient-purple {
|
|
.icon-wrapper .item-icon {
|
|
color: #9c27b0;
|
|
}
|
|
}
|
|
|
|
&.gradient-red {
|
|
.icon-wrapper .item-icon {
|
|
color: #f56c6c;
|
|
}
|
|
}
|
|
|
|
&.gradient-gray {
|
|
.icon-wrapper .item-icon {
|
|
color: #909399;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Responsive design
|
|
@media (max-width: 1400px) {
|
|
.header-con {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.header-con {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.app-container {
|
|
padding: 16px;
|
|
|
|
.header-title {
|
|
font-size: 16px;
|
|
padding: 14px 18px;
|
|
|
|
.title-icon {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-con {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
|
|
.item {
|
|
padding: 20px;
|
|
|
|
.icon-wrapper {
|
|
width: 56px;
|
|
height: 56px;
|
|
|
|
.item-icon {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
|
|
.info-sum .num {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|