696 lines
30 KiB
Vue
696 lines
30 KiB
Vue
<template>
|
||
<div class="portraitPerson">
|
||
<div class="right-wrap-left-title f22 pl-16 f-weight600">人物画像</div>
|
||
<div class="flex-row">
|
||
<div class="right-wrap-left-tab" :style="'height:'+`${rightContentHeight}`+'px'">
|
||
<el-tooltip
|
||
popper-class="custom-tooltip"
|
||
effect="dark"
|
||
content="XXX"
|
||
placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 1" :class="rightActive == 1 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 1 ? `hx-1-active` : 'hx-1'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="身份信息" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 2" :class="rightActive == 2 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 2 ? `hx-2-active` : 'hx-2'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="地理位置" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 3" :class="rightActive == 3 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 3 ? `hx-3-active` : 'hx-3'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="经济状况" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 4" :class="rightActive == 4 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 4 ? `hx-4-active` : 'hx-4'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="雇佣状态" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 5" :class="rightActive == 5 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 5 ? `hx-5-active` : 'hx-5'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="信用报告" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 6" :class="rightActive == 6 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 6 ? `hx-6-active` : 'hx-6'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="信贷记录" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 7" :class="rightActive == 7 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 7 ? `hx-7-active` : 'hx-7'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="信用卡" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 8" :class="rightActive == 8 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 8 ? `hx-8-active` : 'hx-8'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="负债情况" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 9" :class="rightActive == 9 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 9 ? `hx-9-active` : 'hx-9'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="婚姻状况" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 11" :class="rightActive == 11 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 11 ? `hx-12-active` : 'hx-12'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="家庭成员" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 12" :class="rightActive == 12 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 12 ? `hx-11-active` : 'hx-11'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="消费行为" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 13" :class="rightActive == 13 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 13 ? `hx-13-active` : 'hx-13'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="还款行为" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 14" :class="rightActive == 14 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 14 ? `hx-14-active` : 'hx-14'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="风险评估" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 15" :class="rightActive == 15 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 15 ? `hx-15-active` : 'hx-15'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="建议措施" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 16" :class="rightActive == 16 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 16 ? `hx-16-active` : 'hx-16'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="right-wrap-left-content">
|
||
<div class="hx-1-content" v-if="rightActive == 1">
|
||
<div class="f12 pl-16 pt-16 pb-6">人物画像</div>
|
||
<el-scrollbar :style="'height:'+`${CommunicationcontentHeight}`+'px'">
|
||
<div class="p-16 personghximg">
|
||
<!-- 基本信息 -->
|
||
<div class="position_info character-info theme-blue">
|
||
<div class="character-info-title">基本信息</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名姓名姓</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 家庭情况 -->
|
||
<div class="position_family character-info theme-green">
|
||
<div class="character-info-title">家庭情况</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 执行情况 -->
|
||
<div class="position_carry character-info theme-pink">
|
||
<div class="character-info-title">执行情况</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 财务资产情况 -->
|
||
<div class="position_finance character-info theme-yellow">
|
||
<div class="character-info-title">财务资产情况</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
</div>
|
||
<!-- 风险情况 -->
|
||
<div class="position_risk character-info theme-pink2">
|
||
<div class="character-info-title">风险情况</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
</div>
|
||
<!-- 适诉情况 -->
|
||
<div class="position_lawsuit character-info theme-purple">
|
||
<div class="character-info-title">适诉情况</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">陈继平</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
<div class="portrait-marker" v-if="rightActive != 1">
|
||
<el-scrollbar :style="'height:'+`${portraitcontentHeight}`+'px'">
|
||
<div class="flex-column p-16">
|
||
<div class="f18">基本信息</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>身份信息</div>
|
||
<div class="person-info flex-column mt-16">
|
||
<span>姓名：<a class="color-000">XXXXX</a></span>
|
||
<span>性别：<a class="color-000">XXXXX</a></span>
|
||
<span>年龄：<a class="color-000">XXXXX</a></span>
|
||
<span>手机号码：<a class="color-000">XXXXX</a></span>
|
||
<span>身份证号：<a class="color-000">XXXXX</a></span>
|
||
</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>地理位置</div>
|
||
<div class="flex-column">
|
||
<span class="mt-8">户籍所在地：</span>
|
||
<span class="mt-8">
|
||
<el-cascader size="small" v-model="portraitInfo.value1" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }" ></el-cascader>
|
||
</span>
|
||
<span class="mt-8">
|
||
<el-input size="small" v-model="portraitInfo.input" placeholder="请输入详细地址"></el-input>
|
||
</span>
|
||
<span class="mt-8">常住地址：</span>
|
||
<span class="mt-8">
|
||
<el-cascader size="small" v-model="portraitInfo.value2" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }"></el-cascader>
|
||
</span>
|
||
<span class="mt-8">
|
||
<el-input size="small" v-model="portraitInfo.input" placeholder="请输入详细地址"></el-input>
|
||
</span>
|
||
<span class="mt-8">工作地点：</span>
|
||
<span class="mt-8">
|
||
<el-cascader size="small" v-model="portraitInfo.value3" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }" ></el-cascader>
|
||
</span>
|
||
<span class="mt-8">
|
||
<el-input size="small" v-model="portraitInfo.input" placeholder="请输入详细地址"></el-input>
|
||
</span>
|
||
</div>
|
||
<div class="f18 mt-16">经济状况</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>经济收入</div>
|
||
<div class="box-list">
|
||
<span>收入0-5K</span>
|
||
<span>收入5-10K</span>
|
||
<span>收入10K以上</span>
|
||
<span>无收入</span>
|
||
</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>雇佣状态</div>
|
||
<div class="box-list">
|
||
<span>待业</span>
|
||
<span>零工</span>
|
||
<span>稳定工作</span>
|
||
<span>个体户</span>
|
||
<span>小微企业</span>
|
||
<span>企业法人</span>
|
||
</div>
|
||
<div class="f18 mt-16">信用历史</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>信用报告</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>信贷记录</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>信用卡</div>
|
||
<div class="f18 mt-16">财务资产和负债</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>财产情况</div>
|
||
<div class="box-list">
|
||
<span>有房</span>
|
||
<span>有车</span>
|
||
<span>存款</span>
|
||
<span>投资</span>
|
||
<span>小微企业</span>
|
||
<span>企业法人</span>
|
||
</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>负债情况</div>
|
||
<div class="box-list">
|
||
<span>多头借贷</span>
|
||
<span>信用卡负债</span>
|
||
<span>银行其他负债</span>
|
||
<span>非银负债</span>
|
||
<span>民间借贷或高利贷</span>
|
||
<span>负债0-10W</span>
|
||
<span>负债10-50W</span>
|
||
<span>负债50-100W</span>
|
||
<span>负债100W以上</span>
|
||
<span>存在还款竞争</span>
|
||
</div>
|
||
|
||
<div class="f18 mt-16">家庭状况</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>婚姻状况</div>
|
||
<div class="box-list">
|
||
<span>未婚</span>
|
||
<span>已婚</span>
|
||
<span>离婚</span>
|
||
</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>家庭成员</div>
|
||
<div class="box-list">
|
||
<span>无子女</span>
|
||
<span>有子女</span>
|
||
<span>有父母</span>
|
||
<span>无父母</span>
|
||
</div>
|
||
<div class="f18 mt-16">行为分析</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>消费行为</div>
|
||
<div class="box-list">
|
||
<span>收入匹配消费</span>
|
||
<span>超前消费</span>
|
||
<span>滞后消费</span>
|
||
<span>日常消费</span>
|
||
<span>娱乐消费</span>
|
||
<span>奢侈品消费</span>
|
||
<span>冲动消费</span>
|
||
<span>本地消费</span>
|
||
<span>异地消费</span>
|
||
<span>线上消费</span>
|
||
<span>消费增长</span>
|
||
<span>消费下降</span>
|
||
</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>还款行为</div>
|
||
<div class="box-list">
|
||
<span>按时还</span>
|
||
<span>不按时还</span>
|
||
</div>
|
||
<div class="f18 mt-16">风险评估和建议</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>风险评估</div>
|
||
<div class="box-list">
|
||
<span>低风险</span>
|
||
<span>中风险</span>
|
||
<span>高风险</span>
|
||
</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>建议措施</div>
|
||
<div class="box-list">
|
||
<span>调整还款计划</span>
|
||
<span>增加收入</span>
|
||
<span>减少支出</span>
|
||
</div>
|
||
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import chinalist from 'china-location/dist/location.json';
|
||
import ChinaLocation from 'china-location';
|
||
import api from "@/services/caseManagement";
|
||
export default {
|
||
components: {
|
||
uploadFile: () => import('@/components/uploadFile.vue'),//上传
|
||
},
|
||
props: {
|
||
caseId: {
|
||
type: String,
|
||
default: () => {
|
||
return ''
|
||
},
|
||
},
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
debtorEntityList:[],
|
||
portraitInfo:{},
|
||
initlocation: null,
|
||
provinces: [],
|
||
rightActive: 1,
|
||
debtorProfiles:[],
|
||
};
|
||
},
|
||
computed: {
|
||
// 左侧
|
||
leftContentHeight() {
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh - 100
|
||
},
|
||
// 获取右侧滚动高度
|
||
rightContentHeight() {
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh - 57
|
||
},
|
||
// 获取抽屉drawer的内容高度
|
||
OfficecontentHeight() {
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh - 185
|
||
},
|
||
CommunicationcontentHeight() {
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh - 57 - 90
|
||
},
|
||
portraitcontentHeight() {
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh - 57 - 130
|
||
},
|
||
},
|
||
mounted() {
|
||
this.initlocation = new ChinaLocation(chinalist);
|
||
this.getCaseInfoById()
|
||
|
||
},
|
||
methods: {
|
||
loadOptions(node, resolve) {
|
||
const { level } = node;
|
||
// 模拟异步加载数据
|
||
setTimeout(() => {
|
||
if(level == 0)
|
||
{
|
||
this.provinces = []
|
||
this.initlocation.currentProvinces.forEach(item =>{
|
||
this.provinces.push({value: item.code,label: item.name,leaf: false})
|
||
})
|
||
}
|
||
if(level == 1)
|
||
{
|
||
let location = new ChinaLocation(chinalist);
|
||
location.changeProvince(node.value);
|
||
let children = []
|
||
location.currentCities.forEach(item =>{
|
||
children.push({value: item.code,label: item.name,leaf: false})
|
||
})
|
||
resolve(children)
|
||
}
|
||
if(level == 2)
|
||
{
|
||
let location = new ChinaLocation(chinalist);
|
||
location.changeProvince(node.parent.value);
|
||
location.changeCity(node.value);
|
||
let children = []
|
||
location.currentDistricts.forEach(item =>{
|
||
children.push({value: item.code,label: item.name,leaf: true})
|
||
})
|
||
resolve(children)
|
||
}
|
||
}, 100);
|
||
},
|
||
// 获取详情
|
||
getCaseInfoById() {
|
||
let _that = this
|
||
api.getCaseInfoById(this.caseId).then(res => {
|
||
if (!res.code) {
|
||
this.debtorEntityList = res.debtorEntityList
|
||
}
|
||
this.getdebtorProfile()
|
||
})
|
||
},
|
||
// 标签列表
|
||
getdebtorProfile(){
|
||
api.debtorProfile_labels({}).then(res => {
|
||
if (!res.code) {
|
||
this.debtorProfiles = res;
|
||
}
|
||
})
|
||
// 查询当前债务人画像
|
||
let debtorId = ''
|
||
let debtors = this.debtorEntityList.find(item =>{ return item.role == 'DEBTOR'})
|
||
if(debtors != undefined)
|
||
{
|
||
debtorId = debtors.id
|
||
}
|
||
|
||
api.debtorProfile_getByDebtorId(debtorId).then(res => {
|
||
if (!res.code) {
|
||
// this.debtorProfiles = res;
|
||
}
|
||
})
|
||
|
||
},
|
||
|
||
handleSubmit() {
|
||
if(!this.$clickThrottle()) { return }//防止重复点击
|
||
console.log(this.mrObj,'this.mrObj')
|
||
// caseMaterial.addCaseFile(this.repaymentObj).then(res => {
|
||
// this.$parent.getFileCaseList()
|
||
// this.handleClose()
|
||
// this.$message.success("操作成功");
|
||
// })
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.portraitPerson{
|
||
.right-wrap-left-title{
|
||
width: 100%;
|
||
line-height: 47px;
|
||
border-bottom: 1px solid var(--fill-3, #E5E6EB);
|
||
background-color: #F7F8FA;
|
||
}
|
||
.right-wrap-left-tab{
|
||
width: 48px;
|
||
background-color: #F7F8FA;
|
||
.left-tab-icon{
|
||
width: 100%;
|
||
height: 40px;
|
||
.tabs-svg{
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
}
|
||
.active {
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
.right-wrap-left-content{
|
||
width: 318px;
|
||
background-color: #FFFFFF;
|
||
|
||
.hx-1-content{
|
||
.personghximg{
|
||
background: url('~@/assets/image/Vector.png') no-repeat;
|
||
height: 100%;
|
||
display: block;
|
||
background-size: auto 100%;
|
||
background-position: center;
|
||
}
|
||
.character-info{
|
||
width: calc(50% - 5px);
|
||
// border: 1px solid;
|
||
padding: 4px;
|
||
color: #4E5969;
|
||
.character-info-title{
|
||
line-height: 20px;
|
||
font-size: 12px;
|
||
}
|
||
.character-info-details{
|
||
margin-bottom: 2px;
|
||
font-size: 10px;
|
||
.character-info-details-label{
|
||
width: 40%;
|
||
text-align: right;
|
||
line-height: 16px;
|
||
padding-right: 4px;
|
||
}
|
||
.character-info-details-text{
|
||
width: 60%;
|
||
text-align: left;
|
||
line-height: 16px;
|
||
padding-left: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// position_info position_family position_carry position_finance position_risk position_lawsuit
|
||
.position_info{position:absolute; top: 110px;left: 8px;}
|
||
.position_family{position:absolute; top: 300px;left: 8px;}
|
||
.position_carry{position:absolute; top: 400px;left: 8px;}
|
||
|
||
.position_finance{position:absolute; top: 160px;left: 160px;}
|
||
.position_risk{position:absolute; top: 350px;left: 160px;}
|
||
.position_lawsuit{position:absolute; top: 460px;left: 160px;}
|
||
|
||
.theme-blue{
|
||
.character-info-title{
|
||
color: #4787F0;
|
||
}
|
||
.character-info-details{
|
||
.character-info-details-label{
|
||
background-color: #BBD3FB;
|
||
}
|
||
.character-info-details-text{
|
||
background-color: #165DFFB2;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
//
|
||
.theme-green{
|
||
.character-info-title{
|
||
color: #00A870;
|
||
}
|
||
.character-info-details{
|
||
.character-info-details-label{
|
||
background-color: #00B42A33;
|
||
}
|
||
.character-info-details-text{
|
||
background-color: #00B42AB2;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.theme-pink{
|
||
.character-info-title{
|
||
color: #F36DA0;
|
||
}
|
||
.character-info-details{
|
||
.character-info-details-label{
|
||
background-color: #F36DA033;
|
||
}
|
||
.character-info-details-text{
|
||
background-color: #F36DA0B2;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.theme-yellow{
|
||
.character-info-title{
|
||
color: #ED7B2F;
|
||
}
|
||
.character-info-details{
|
||
.character-info-details-label{
|
||
background-color: #ED7B2F33;
|
||
}
|
||
.character-info-details-text{
|
||
background-color: #ED7B2FB2;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.theme-pink2{
|
||
.character-info-title{
|
||
color: #F36D78;
|
||
}
|
||
.character-info-details{
|
||
.character-info-details-label{
|
||
background-color: #F36D7833;
|
||
}
|
||
.character-info-details-text{
|
||
background-color: #F36D78B2;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.theme-purple{
|
||
.character-info-title{
|
||
color: #936DF3;
|
||
}
|
||
.character-info-details{
|
||
.character-info-details-label{
|
||
background-color: #936DF333;
|
||
}
|
||
.character-info-details-text{
|
||
background-color: #936DF3B2;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.portrait-marker{
|
||
/* 方法1 */
|
||
.dot {
|
||
margin-left: 5px;
|
||
position: relative;
|
||
padding-left: 10px; /* 调整圆点与文本之间的距离 */
|
||
}
|
||
|
||
.dot::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background-color: #000; /* 圆点的颜色 */
|
||
}
|
||
|
||
.person-info{
|
||
color: #86909C;
|
||
border:solid 1px #E5E6EB;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
span{
|
||
padding: 5px 10px;
|
||
}
|
||
span:nth-child(even) {
|
||
background-color: #F7F8FA;
|
||
}
|
||
}
|
||
.box-list{
|
||
span{
|
||
border:solid 1px #E5E6EB;
|
||
border-radius: 3px;
|
||
padding: 5px 10px;
|
||
display: inline-block;
|
||
margin-top: 10px;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.portraitPerson{
|
||
.el-scrollbar__view{height: 100%;}
|
||
}
|
||
</style> |