775 lines
21 KiB
Vue
775 lines
21 KiB
Vue
<template>
|
||
<div class="all" v-loading="loading">
|
||
<div class="tabs">
|
||
<div
|
||
v-for="item in tabList"
|
||
:key="item.value"
|
||
class="tab_item"
|
||
:class="{ active: item.value === activeTab }"
|
||
@click="handleTabClick(item.value)"
|
||
>
|
||
{{ item.label }}
|
||
</div>
|
||
</div>
|
||
<!--transform: scale(0.9); transform-origin: top left -->
|
||
<!-- 全部 start -->
|
||
<div class="content" v-if="!activeTab">
|
||
<div class="card_view" style="display: flex; width: 100%; height: 486px">
|
||
<div class="top_left">
|
||
<div class="bg_view">
|
||
<div style="margin-top: -20px">
|
||
<text class="bg_view_title">已使用企业量</text>
|
||
<el-tooltip content="历史上曾登录财报页面的用户。" effect="dark" placement="top">
|
||
<img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" />
|
||
</el-tooltip>
|
||
</div>
|
||
<text class="bg_view_num">{{ stTotal.companyNumsUsed || 0 }}/{{ stTotal.companyNumsAll || 0 }}</text>
|
||
</div>
|
||
|
||
<div class="top_left_item" style="margin-top: 20px">
|
||
<div style="display: flex; align-items: center">
|
||
<div class="line_point" style="background: #ffb100"></div>
|
||
<text class="left_item_title">今日新增用户</text>
|
||
<el-tooltip content="当天第一次登录财保的企业。" effect="dark" placement="top">
|
||
<img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" style="margin-left: 5px" />
|
||
</el-tooltip>
|
||
</div>
|
||
|
||
<div>
|
||
<text class="left_item_num">{{ stTotal.todayNewCompanyNums ? stTotal.todayNewCompanyNums : 0 }}</text>
|
||
<text class="left_item_unit">家</text>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="top_left_item">
|
||
<div style="display: flex; align-items: center">
|
||
<div class="line_point" style="background: #00be67"></div>
|
||
<text class="left_item_title">尝试使用ESG企业数</text>
|
||
<img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" style="margin-left: 5px" />
|
||
</div>
|
||
|
||
<div>
|
||
<text class="left_item_num">{{ stTotal.esgNums ? stTotal.esgNums : 0 }}</text>
|
||
<text class="left_item_unit">家</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 各运营中心使用分布 -->
|
||
<div class="top_right" style="flex: 1; margin-left: 30px">
|
||
<DashboardBar :data="stTotal.fenbu" v-if="Session.get('roleName') != 'operate'" />
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 20px; width: 100%; height: 438px; margin-top: 20px">
|
||
<div class="card_view" style="width: 50%; height: 100%">
|
||
<DashboardLine :data="stTotal.user"></DashboardLine>
|
||
</div>
|
||
<div class="card_view" style="width: 50%; height: 100%; display: flex; padding: 20px">
|
||
<div class="nums" style="border-right: 1px solid #e5e5e5; padding-left: 30px">
|
||
<NumView
|
||
style="height: 33%"
|
||
icon="icon_yuqing"
|
||
title="已使用企业舆情"
|
||
numType="0"
|
||
tips="点击进入舆情页面。"
|
||
:num="stTotal.yqNums"
|
||
></NumView>
|
||
<NumView
|
||
style="height: 33%"
|
||
icon="icon_dianziqian"
|
||
title="已使用电子签"
|
||
numType="1"
|
||
tips="电子签功能激活。"
|
||
:num="stTotal.esignNums"
|
||
></NumView>
|
||
<NumView
|
||
style="height: 33%"
|
||
icon="icon_jianjiao"
|
||
title="已使用文件检校"
|
||
numType="2"
|
||
tips="2024年8月1日后上传文件。（2024年7月19日，批量上传过一各文件）"
|
||
:num="stTotal.reportCheckNums"
|
||
></NumView>
|
||
</div>
|
||
|
||
<div class="nums" style="padding-left: 60px">
|
||
<NumView style="height: 33%" icon="icon_baogao" title="已使用报告生成" numType="3" tips="下载插件。" :num="stTotal.reportNums"></NumView>
|
||
<NumView
|
||
style="height: 33%"
|
||
icon="icon_xuanfa"
|
||
title="已使用报告宣发"
|
||
numType="4"
|
||
tips="点击分享或点击资讯链接。"
|
||
:num="stTotal.infoNums"
|
||
></NumView>
|
||
<NumView
|
||
style="height: 33%"
|
||
icon="icon_duanxin"
|
||
title="企业短信触达率"
|
||
numType="5"
|
||
tips="发送舆情/信披短信到企业。"
|
||
:num="stTotal.smsNums"
|
||
></NumView>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 全部 end -->
|
||
|
||
<!-- esg start -->
|
||
<div class="content" v-if="activeTab == 'esg'">
|
||
<div class="card_view" style="display: flex; width: 100%; height: 486px; flex-direction: column; gap: 30px">
|
||
<div style="width: 100%; gap: 30px; display: flex">
|
||
<EsgItem
|
||
label="尝试使用企业"
|
||
:value="stEsg.tryUsedNums"
|
||
:companyTotal="stTotal.companyNumsAll || 0"
|
||
color="#DFECFD"
|
||
tips="点击ESG进入。"
|
||
></EsgItem>
|
||
<EsgItem
|
||
label="已使用企业"
|
||
:value="stEsg.alreadyUsedNums"
|
||
:companyTotal="stTotal.companyNumsAll || 0"
|
||
color="#DFECFD"
|
||
tips="完成初级问卷填写数量、标准问卷填写数量、诊断报告下载数量、ESG报告下载四项之一。"
|
||
></EsgItem>
|
||
<EsgItem
|
||
label="初级问卷填写数量"
|
||
:value="stEsg.chuNums"
|
||
:companyTotal="stTotal.companyNumsAll || 0"
|
||
color="#DFECFD"
|
||
tips="开始填写初级问卷内容。"
|
||
></EsgItem>
|
||
<EsgItem
|
||
label="初级问卷填写完成数量"
|
||
:value="stEsg.chuFinishNums"
|
||
:companyTotal="stTotal.companyNumsAll || 0"
|
||
color="#DFECFD"
|
||
tips="初级问卷内容填写完成。"
|
||
></EsgItem>
|
||
</div>
|
||
|
||
<div style="width: 100%; gap: 30px; display: flex">
|
||
<EsgItem
|
||
label="标准问卷填写数量"
|
||
:value="stEsg.biaoNums"
|
||
:companyTotal="stTotal.companyNumsAll || 0"
|
||
color="#FCF6E3"
|
||
tips="开始填写标准问卷内容。"
|
||
></EsgItem>
|
||
<EsgItem
|
||
label="标准问卷填写完成数量"
|
||
:value="stEsg.biaoFinishNums"
|
||
:companyTotal="stTotal.companyNumsAll || 0"
|
||
color="#FCF6E3"
|
||
tips="标准问卷填写完成。"
|
||
></EsgItem>
|
||
<EsgItem
|
||
label="诊断报告导出数量"
|
||
:value="stEsg.exportNums"
|
||
:companyTotal="stTotal.companyNumsAll || 0"
|
||
color="#FCF6E3"
|
||
tips="下载诊断报告。"
|
||
></EsgItem>
|
||
<EsgItem
|
||
label="ESG报告导出数量"
|
||
:value="stEsg.esgExportNums"
|
||
:companyTotal="stTotal.companyNumsAll || 0"
|
||
color="#FCF6E3"
|
||
tips="下载ESG报告。"
|
||
></EsgItem>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- esg end -->
|
||
<!-- 舆情 start -->
|
||
<div class="content" style="display: flex; gap: 30px" v-if="activeTab == 'yuqing'">
|
||
<div class="yq_left" style="gap: 30px">
|
||
<div class="card_view" style="display: flex; width: 400px; height: 208px; flex-direction: column; gap: 15px; justify-content: center">
|
||
<div>
|
||
<text class="yq_title">已使用企业数</text>
|
||
<el-tooltip content="点击进入舆情页面。" effect="dark" placement="top">
|
||
<img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" />
|
||
</el-tooltip>
|
||
</div>
|
||
<text class="yq_content">{{ stYq.companyNumsUsed || 0 }}</text>
|
||
<text class="yq_sub_content">企业总数：{{ stYq.companyNumsAll || 0 }}</text>
|
||
</div>
|
||
<div class="card_view" style="display: flex; width: 400px; height: 208px; flex-direction: column; gap: 15px; justify-content: center">
|
||
<div>
|
||
<text class="yq_title">重度使用用户数</text>
|
||
<el-tooltip content="点击搜索或查看详情。" effect="dark" placement="top">
|
||
<img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" />
|
||
</el-tooltip>
|
||
</div>
|
||
<text class="yq_content">{{ stYq.companyNmusUsedZhong || 0 }}</text>
|
||
<text class="yq_sub_content">企业总数：{{ stYq.companyNumsUsed || 0 }}</text>
|
||
</div>
|
||
</div>
|
||
<div class="yq_right" style="flex: 1">
|
||
<div class="card_view" style="width: 100%; height: 100%">
|
||
<DashboardLine :data="stYq.user"></DashboardLine>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 舆情 end -->
|
||
|
||
<!-- 检校 start -->
|
||
<div style="min-height: 100vh; width: 80vw; margin-left: -12vw" v-if="activeTab == 'jianjiao'">
|
||
<!-- :style="{ scale: isScaleDown ? '0.87' : '1', transformOrigin: 'top center' }" -->
|
||
<div>
|
||
<component :is="com[stroes.userInfos.roles[0]]" :key="stroes.userInfos.roles[0]" />
|
||
</div>
|
||
</div>
|
||
<!-- 检校 end -->
|
||
|
||
<!-- 其他 start -->
|
||
<div class="content" style="display: flex; flex-direction: column; gap: 30px" v-if="activeTab == 'qita'">
|
||
<div class="qita_row">
|
||
<div class="card_view" style="display: flex; width: 50vw; height: 630px; flex-direction: column; gap: 15px">
|
||
<CardViewTitle
|
||
linePointColor="#0779ff"
|
||
title="报告宣发（智能财讯）"
|
||
subTitle="已使用企业"
|
||
:subNum="stQita?.reportXuan?.nums"
|
||
titleType="0"
|
||
></CardViewTitle>
|
||
<DashboardLine style="margin-top: 50px" :data="stQita?.reportXuan?.user" lineType="0"> </DashboardLine>
|
||
</div>
|
||
<div class="card_view" style="display: flex; width: 50vw; height: 630px; flex-direction: column; gap: 15px">
|
||
<CardViewTitle
|
||
linePointColor="#FFB100"
|
||
title="智能信披库"
|
||
subTitle="已使用企业数"
|
||
:subNum="stQita?.smartInfo?.nums"
|
||
subTitle2="重度使用企业数"
|
||
:subNum2="stQita?.smartInfo?.numsZhong"
|
||
titleType="1"
|
||
></CardViewTitle>
|
||
<DashboardLine style="margin-top: 50px" :data="stQita?.smartInfo?.user" lineType="1"> </DashboardLine>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="qita_row">
|
||
<div class="card_view" style="display: flex; width: 50vw; height: 630px; flex-direction: column; gap: 15px">
|
||
<CardViewTitle
|
||
titleType="2"
|
||
linePointColor="#01BE66"
|
||
title="报告生成"
|
||
subTitle="已使用企业数"
|
||
:subNum="stQita?.report?.nums"
|
||
></CardViewTitle>
|
||
<DashboardLine style="margin-top: 50px" :data="stQita?.report?.user" lineType="2"></DashboardLine>
|
||
</div>
|
||
|
||
<div class="card_view" style="display: flex; width: 50vw; height: 630px; flex-direction: column; gap: 15px">
|
||
<CardViewTitle
|
||
titleType="3"
|
||
linePointColor="#F64458"
|
||
title="电子签"
|
||
subTitle="已使用企业数"
|
||
:subNum="stQita?.esign?.companyNmusUsed"
|
||
></CardViewTitle>
|
||
|
||
<div class="r_item">
|
||
<div>
|
||
<text class="qita_tiem_title">已使用企业数</text>
|
||
<!-- <img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" /> -->
|
||
</div>
|
||
<text class="qita_tiem_content">{{ stQita?.esign?.companyNmusUsed || 0 }}</text>
|
||
<text class="qita_tiem_sub_content">企业总数：{{ stQita?.esign?.companyNumsAll || 0 }}</text>
|
||
</div>
|
||
|
||
<div class="r_item">
|
||
<div>
|
||
<text class="qita_tiem_title">重度使用企业数</text>
|
||
<!-- <img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" /> -->
|
||
</div>
|
||
<text class="qita_tiem_content">{{ stQita?.esign?.companyNmusUsedZhong || 0 }}</text>
|
||
<text class="qita_tiem_sub_content">企业总数：{{ stQita?.esign?.companyNmusUsed || 0 }}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 其他 end -->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, ref, onUnmounted } from 'vue';
|
||
import DashboardBar from './charts/DashboardBar.vue';
|
||
import DashboardLine from './charts/DashboardLine.vue';
|
||
import NumView from './components/NumView.vue';
|
||
import CardViewTitle from './components/CardViewTitle.vue';
|
||
import { Session } from '/@/utils/storage';
|
||
import { defineAsyncComponent } from 'vue';
|
||
import { getStTotal, getStYq, getStOther, getStEsg } from '/@/api/api';
|
||
import { useUserInfo } from '/@/stores/userInfo';
|
||
import EsgItem from './components/EsgItem.vue';
|
||
|
||
// 定义需要缩小的分辨率阈值，例如小于1024px时缩小
|
||
const SCALE_THRESHOLD = 1480;
|
||
// 缩小比例，例如缩小到原来的0.8倍
|
||
const SCALE_RATIO = 0.8;
|
||
|
||
// 判断是否需要缩小
|
||
const isScaleDown = ref(window.innerWidth < SCALE_THRESHOLD);
|
||
|
||
const inWidth = ref(window.innerWidth);
|
||
// 处理窗口大小变化
|
||
const handleResize = () => {
|
||
isScaleDown.value = window.innerWidth < SCALE_THRESHOLD;
|
||
};
|
||
|
||
// 引入组件
|
||
const com = {
|
||
// 中证报监管
|
||
Director: defineAsyncComponent(() => import('/@/views/pages/dashboard/components/index.vue')),
|
||
// 分中心
|
||
subCenter: defineAsyncComponent(() => import('/@/views/pages/dashboard/components/index.vue')),
|
||
operate: defineAsyncComponent(() => import('/@/views/pages/dashboard/components/index.vue')),
|
||
// 证监会
|
||
CSRC: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
|
||
// 全国监管
|
||
QJJG: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
|
||
// 全国监管子账号
|
||
QJJGC: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
|
||
// 地方监管主账号
|
||
DFJG: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
|
||
// 地方监管子账号
|
||
DFJGC: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
|
||
// 交易所主账号
|
||
JYS: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
|
||
// 交易所子账号
|
||
JYSC: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
|
||
};
|
||
|
||
// 获取账号信息
|
||
const stroes = useUserInfo();
|
||
|
||
const activeTab = ref(null);
|
||
|
||
const tabList = ref([
|
||
{
|
||
label: '总体',
|
||
value: null,
|
||
},
|
||
{
|
||
label: 'ESG',
|
||
value: 'esg',
|
||
},
|
||
{
|
||
label: '舆情',
|
||
value: 'yuqing',
|
||
},
|
||
{
|
||
label: '检校',
|
||
value: 'jianjiao',
|
||
},
|
||
{
|
||
label: '其他',
|
||
value: 'qita',
|
||
},
|
||
]);
|
||
|
||
const stTotal = ref({
|
||
companyNumsAll: 0, // 总企业数
|
||
companyNmusUsed: 0, // 已使用企业数
|
||
todayNewCompanyNums: 0, // 今日新增数
|
||
// 各运营中心使用分布
|
||
fenbu: {
|
||
// name: ['string1', 'string2', 'string3', 'string4', 'string5'],
|
||
// usedNums: ['100', '300', '500', '600', '700'],
|
||
// usedRate: ['80', '90', '30', '20', '50'],
|
||
},
|
||
// 近三月用户趋势
|
||
user: {
|
||
// time: ['80', '90', '30', '20', '50'],
|
||
// data: ['100', '300', '500', '600', '700'],
|
||
},
|
||
yqNums: 0, // 已使用企业舆情
|
||
reportNums: 0, // 已使用报告生成
|
||
esignNums: 0, // 已使用电子签
|
||
infoNums: 0, // 已使用报告宣发
|
||
reportCheckNums: 0, // 已使用文件检校
|
||
smsNums: 0, // 短信触达
|
||
});
|
||
|
||
// 运营账号看板-总体
|
||
async function getStTotalFn() {
|
||
loading.value = true;
|
||
let { code, data } = await getStTotal({});
|
||
if (code == 200) {
|
||
stTotal.value = data;
|
||
console.log('🚀 ~ getStTotalFn ~ stTotal.value:', stTotal.value);
|
||
}
|
||
loading.value = false;
|
||
}
|
||
|
||
const stYq = ref({
|
||
companyNumsAll: 0, // 总企业数
|
||
companyNmusUsed: 0, // 已使用企业数
|
||
companyNmusUsedZhong: 0, // 重度使用数
|
||
user: {
|
||
// time: ['80', '90', '30', '20', '50'],
|
||
// data: ['100', '300', '500', '600', '700'],
|
||
},
|
||
});
|
||
// 运营账号看板-舆情
|
||
async function getStYqFn() {
|
||
loading.value = true;
|
||
let { code, data } = await getStYq({});
|
||
if (code == 200) {
|
||
stYq.value = data;
|
||
}
|
||
loading.value = false;
|
||
}
|
||
|
||
const stQita = ref({
|
||
reportXuan: {
|
||
nums: 0, // 已使用报告宣发总数
|
||
user: {
|
||
// time: ['80', '90', '30', '20', '50'],
|
||
// data: ['100', '300', '500', '600', '700'],
|
||
},
|
||
},
|
||
smartInfo: {
|
||
nums: 0, // 已使用智能信披库总数
|
||
numsZhong: 0, // 重度使用数
|
||
user: {
|
||
// time: ['80', '90', '30', '20', '50'],
|
||
// data: ['100', '300', '500', '600', '700'],
|
||
},
|
||
},
|
||
report: {
|
||
nums: 0, // 已使用报告生成总数
|
||
user: {
|
||
// time: ['80', '90', '30', '20', '50'],
|
||
// data: ['100', '300', '500', '600', '700'],
|
||
},
|
||
},
|
||
esign: {
|
||
companyNumsAll: 0, // 总企业数
|
||
companyNmusUsed: 0, // 使用企业数
|
||
companyNmusUsedZhong: 0, // 重度使用企业数
|
||
},
|
||
});
|
||
|
||
const stEsg = ref({
|
||
tryUsedNums: 0, // 尝试使用esg企业数
|
||
alreadyUsedNums: 0, // 已使用esg企业数
|
||
chuNums: 0, // 初级问卷填写数量
|
||
chuFinishNums: 0, // 初级问卷填写完成数量
|
||
biaoNums: 0, // 标准问卷填写数量
|
||
biaoFinishNums: 0, // 标准问卷填写完成数量
|
||
exportNums: 0, // 诊断报告导出数量
|
||
esgExportNums: 0, // esg报告导出数量
|
||
});
|
||
|
||
const loading = ref(false);
|
||
// 运营账号看板-其他
|
||
async function getStOtherFn() {
|
||
loading.value = true;
|
||
let { code, data } = await getStOther({});
|
||
if (code == 200) {
|
||
stQita.value = data;
|
||
}
|
||
loading.value = false;
|
||
}
|
||
|
||
// 处理tab点击事件
|
||
const handleTabClick = (tabValue) => {
|
||
activeTab.value = tabValue;
|
||
|
||
if (tabValue === null) {
|
||
getStTotalFn();
|
||
} else if (tabValue === 'yuqing') {
|
||
getStYqFn();
|
||
} else if (tabValue === 'qita') {
|
||
getStOtherFn();
|
||
} else if (tabValue === 'esg') {
|
||
getStEsgFn();
|
||
}
|
||
};
|
||
|
||
async function getStEsgFn() {
|
||
loading.value = true;
|
||
|
||
let { code, data } = await getStEsg({});
|
||
loading.value = false;
|
||
|
||
if (code == 200) {
|
||
stEsg.value = data;
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 运营账号看板-总体
|
||
getStTotalFn();
|
||
// // 运营账号看板-舆情
|
||
// getStYqFn();
|
||
// // 运营账号看板-其他
|
||
// getStOtherFn();
|
||
|
||
window.addEventListener('resize', handleResize);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', handleResize);
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
$minWidth: 68.75rem;
|
||
$contentWidth: 85vw;
|
||
|
||
.all {
|
||
background-color: #f5f7fd;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 20px;
|
||
padding: 20px;
|
||
width: 100vw;
|
||
align-items: center;
|
||
overflow: auto;
|
||
}
|
||
|
||
.tabs {
|
||
width: $contentWidth;
|
||
min-width: $minWidth;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
gap: 20px;
|
||
|
||
.tab_item {
|
||
padding: 10px 20px;
|
||
cursor: pointer;
|
||
|
||
width: 98px;
|
||
height: 32px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
|
||
display: flex;
|
||
text-align: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.active {
|
||
background: #0779ff;
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
width: $contentWidth;
|
||
min-width: $minWidth;
|
||
}
|
||
|
||
.card_view {
|
||
background: #ffffff;
|
||
box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
padding: 30px;
|
||
}
|
||
|
||
.bg_view {
|
||
width: 397px;
|
||
height: 186px;
|
||
box-shadow: 0px 2px 12px 0px rgba(128, 131, 134, 0.2);
|
||
border-radius: 8px;
|
||
background: url('../../../assets/dashboard/bg_pic.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 1.875rem;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.bg_view_title {
|
||
width: 140px;
|
||
height: 28px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: normal;
|
||
font-size: 20px;
|
||
color: #5f6063;
|
||
line-height: 28px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.bg_view_num {
|
||
width: 236px;
|
||
height: 56px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 40px;
|
||
color: #1a1a1a;
|
||
line-height: 56px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.icon_qustion {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.top_left {
|
||
width: 397px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.line_point {
|
||
width: 10px;
|
||
height: 36px;
|
||
}
|
||
|
||
.top_left_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 80px;
|
||
}
|
||
|
||
.left_item_title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #5f6063;
|
||
line-height: 22px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.left_item_num {
|
||
width: 84px;
|
||
height: 40px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28px;
|
||
color: #1a1a1a;
|
||
line-height: 40px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.top_right {
|
||
width: 50%;
|
||
height: 100%;
|
||
}
|
||
|
||
.nums {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
// align-items: center;
|
||
|
||
width: 50%;
|
||
height: 100%;
|
||
}
|
||
|
||
.yq_left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.yq_title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 20px;
|
||
color: #222222;
|
||
line-height: 28px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.yq_content {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 32px;
|
||
color: #1a1a1a;
|
||
line-height: 45px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.yq_sub_content {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20px;
|
||
color: #5f6063;
|
||
line-height: 28px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.qita_row {
|
||
display: flex;
|
||
gap: 30px;
|
||
}
|
||
|
||
.r_item {
|
||
// width: 605px;
|
||
height: 208px;
|
||
background: #dfecfd;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
padding: 30px;
|
||
}
|
||
|
||
.qita_tiem_title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #5f6063;
|
||
line-height: 22px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.qita_tiem_content {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 32px;
|
||
color: #1a1a1a;
|
||
line-height: 45px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.qita_tiem_sub_content {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20px;
|
||
color: #5f6063;
|
||
line-height: 28px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* 缩小状态 */
|
||
.scale-down {
|
||
/* 缩放内容 */
|
||
transform: scale(var(--scale-ratio, 0.8));
|
||
/* 计算缩放后的偏移量，使内容居中 */
|
||
transform-origin: top center;
|
||
/* 调整容器宽度，避免边缘被截断 */
|
||
width: calc(1 / var(--scale-ratio, 0.8) * 100%);
|
||
margin: 0 auto;
|
||
}
|
||
</style>
|