ChuangHengWx/pages/pdf.vue

<template>
    <view class="page-wrappe">
		<view class="pdf-container" :style="{'transform':'scale('+scale+')'}">
			<!-- 封面 -->
			<view class="cd_box fm2 adffc" style="margin-top: 20px;height: 868px;">
				<img class="fm2-logo" src="https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fm_logo.png">
				<img class="fm2-perill" src="https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fm_perill.png">
				<view class="fm2-line"></view>
				<view class="fm2-p">团队发展动态评估报告(基础版)</view>
				<view class="fm2-texts adf">
					<view class="fm2-texts-pre"><span style="letter-spacing: 2.5px;">报告撰写人：</span>{{ '甜梦（中国）巧克力有限公司' }}</view>
					<view class="fm2-texts-pre"><span>团队结构类型：</span>{{ '团队结构类型：' }}</view>
					<view class="fm2-texts-pre"><span>团队职能类型：</span>{{ '团队职能类型：' }}</view>
					<view class="fm2-texts-pre"><span style="letter-spacing: 6px;">报告时间：</span>{{ '2025-11-25' }}</view>
				</view>
			</view>
			<!-- 介绍 -->
			<view class="cd_box">
				<view class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_title_bg.png)'}">
					<view class="vt-left">介绍<span>PERILL模型简介</span></view>
					<view class="vt-right">团队发展动态评估报告(基础版)</view>
				</view>
				<view class="v2-box">
					<img class="vb-img1" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+'intro'+'_box_img1.png'">
					<img class="vb-img2" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+'intro'+'_box_img2.png'">
					<view class="v2-p">PERILL团队发展动态评估源于团队教练辅导领域的先驱、管理思维与团队绩效领域的权威、全球顶尖团队教练David Clutterbuck教授及其团队通过深入研究，提炼出影响团队绩效的140多个基于实证的因素，整合而成的团队诊断和提升工具-PERILL模型。</view>
					<view class="v2-p" style="margin-top: 8px;">创衡国际基于10多年来在全球与200多家具有前瞻性的国际公司以及国内具有行业代表性公司的合作经验，结合CCMI的PERILL测评工具，在中国推出的团队发展动态评估系统，旨在帮助团队更全面、更有效地从六个维度评估团队的发展现状，为支持团队成为高价值团队提供全景式的客观诊断。</view>
					<view class="v2-p" style="margin-top: 8px;">PERILL团队发展动态评估的主体内容由<span>36</span>个关于团队的描述组成。</view>
				</view>
				<view class="v2-six">
					<view class="vsix-title">PERILL六大纬度</view>
					<view class="vsix-p">PERILL诊断提供了一个复杂的团队系统概览，它并非针对孤立的问题，也不是简单的优缺点，而是着眼于团队系统的复杂性。它 通过6个影响因素(如下所述)提出问题，以揭示团队系统各要素之间的联系，以及这些联系如何影响团队的高效运作能力。</view>
					<view class="vsix-boxs">
						<view class="vsb adfac" v-for="(item,index) in sixWd" :key="index">
							<img class="vsb-img" :src="item.image"/>
							<view class="vsb-right">
								<view class="vsbr-top adfac">
									<view class="vsbrt-type" :style="{'background':item.color}">{{ item.type }}</view>
									<view class="vsbrt-title" :style="{'color':item.color}">{{ item.title }}</view>
								</view>
								<view class="vsbr-desc">{{ item.desc }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 总体诊断分析 -->
			<view class="cd_box adffc">
				<view class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+'intro'+'_top_title_bg2.png)'}">
					<view class="vt-left">总体诊断分析</view>
					<view class="vt-right">团队发展动态评估报告(基础版)</view>
				</view>
				<view class="v2-box" @click="downloadZtzdfxImg">
					<img class="vb-img1" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+'intro'+'_box_img1.png'">
					<img class="vb-img2" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+'intro'+'_box_img2.png'">
					<view class="v2-p2">报告的核心是PERILL诊断分析下的整体团队表现。这包括团队在PERILL模型每个关键要素上的综合得分，通过结合得分和置信指数，我们能够展示出高功能领域和低功能域。</view>
					<view class="v2-p2" style="margin-top: 16px;">下面的条形图上的位置标记显示了团队在各个支柱上的总分。</view>
					<view style="width:100%;height:200px;" class="pdfEchart">
						<l-echart ref="ztzdfxRef" :canvas2d="true" @finished="initZtzdfxChart"></l-echart>
					</view>
				</view>
				<view class="v2-data">
					<view class="vd-title" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+'intro'+'_title_bg1.png)'}">诊断结果</view>
					<view class="v2-p" v-html="'后端返回数据后端返回数据 后端返回数据 '"></view>
				</view>
				<view class="v2-data" style="flex: 1;margin-top: 20px;">
					<view class="vd-title vt2" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+'intro'+'_title_bg2.png)'}">团队提升&教练建议</view>
					<view class="v2-p" v-html="'后端返回数据后端返回数据 后端返回数据 '"></view>
				</view>
			</view>
			<!-- 多维度 -->
			<template v-if="reportData&&reportData.dimensionAnalysis&&reportData.dimensionAnalysis.length">
				<div class="cd_box adffc" style="border: none;" v-for="(item,index) in reportData.dimensionAnalysis" :key="index">
					<div class="v2-top adfacjb" :style="{'background-image':'url('+'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+typeDict[item.title]+'_title_bg.png)'}">
						<div class="vt-left" :class="{'black':item.title==='目的与动机'}">{{ item.title }}</div>
						<div class="vt-right">团队发展动态评估报告(基础版)</div>
					</div>
					<div class="v2-box" :style="{'border':'1px solid '+item.bcolor}">
						<img class="vb-img1" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+typeDict[item.title]+'_box_img1.png'">
						<img class="vb-img2" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+typeDict[item.title]+'_box_img2.png'">
						<div class="v2-p2">{{ item.desc }}</div>
						<div class="v2-p2" style="margin-top: 16px;">评分总体分布</div>
						<div class="vb-table" :style="{'border':'1px solid '+item.bcolor}">
							<div class="vbt-pre adfac" v-for="i in 5" :key="item">
								<div class="vbtp-left adfacjc" :class="{'black':item.title==='目的与动机'}" :style="{'background':item.titlecolor}">{{ '宗旨共融，同心共识' }}</div>
								<div class="vbtp-right" :style="{'border':'1px solid '+item.bcolor}">
									<div class="vbtpr-title">{{ '团队成员能够共同阐述其共享目的，并且在团队使命上保持高度一致。' }}</div>
									<div class="vbtpr-jd">
										<div class="vj_num" :style="{'width':(4/5*100)+'%','background':item.pfztfb}"></div>   
										<div class="vj-val" :style="{'border':'1px solid '+item.bcolor,'left':'calc('+(4/5*100)+'% - 12px)','box-shadow':'0px 2px 6px 0px '+item.bcolor}">{{ 4 }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="v2-data" :style="{'border':'1px solid '+item.bcolor}">
						<div class="vd-title vt3" :class="{'black':item.title==='目的与动机'}" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+typeDict[item.title]+'_title_bg1.png)'}">诊断结果</div>
						<div class="v2-p3">纬度得分</div>
						<div class="vd-wd adfac" :style="{'background':item.wddf}">
							<div class="vdwd-pre">维度加权总分：<span>{{ 34 }}</span></div>
							<div class="vdwd-pre vp">维度同意度总分（未加权）：<span>{{ 34 }}</span></div>
							<div class="vdwd-pre">维度权重：<span>{{ 34 }}</span></div>
						</div>
						<div class="v2-p3" style="margin-top: 16px;">团队维度诊断结果</div>
						<div class="v2-p" style="margin-top: 8px;" v-html="'后端返回数据 后端返回数据 后端返回数据 后端返回数据 后端返回数据 后端返回数据 '"></div>
					</div>
					<div class="v2-data" :style="{'border':'1px solid '+item.bcolor}" style="flex: 1;margin-top: 15px;">
						<div class="vd-title vt3" :class="{'black':item.title==='目的与动机'}" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+typeDict[item.title]+'_title_bg1.png)'}">诊断建议</div>
						<div class="v2-p" v-html="'后端返回数据 后端返回数据 后端返回数据 后端返回数据 后端返回数据 后端返回数据 '"></div>
					</div>
				</div>
			</template>
		</view>
   </view>
</template>

<script name="">
	import { BaseApi } from '@/http/baseApi.js';
	import * as echarts from '@/components/lime-echart/static/echarts.min.js'
	import lEchart from '@/components/lime-echart/components/l-echart/l-echart.vue'
    
    export default {
        name: 'ZtzdfxChart',
   //      props: {
			// reportData: {
			//     type: Object,
			//     default: null
			// }
   //      },
		components:{ lEchart },
        data() {
        return {
            reportData: null,
			isChartReady: false,
			scale:1,
            typeDict: {
				'目的与动机': 'zzdj',
				'外部流程及系统与架构': 'wbjg',
				'人际关系': 'rjgx',
				'内部流程及系统与架构': 'nbjg',
				'学习': 'xx',
				'领导力': 'ldl'
            },
            sixWd: [
				{
				  image: 'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_img_p.png',
				  type: 'P',
				  title: '宗旨与动机',
				  desc: '指团队共享的目的和存在的意义, 包含对共同的愿景，目标和优先级的清晰度。',
				  color: '#833479'
				},
				{
				  image: 'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_img_e.png',
				  type: 'E',
				  title: '外部流程、系统与结构',
				  desc: '指团队与其外部利益相关者 - 客户，供应商，股东，组织内的其他团队等的互动关联。',
				  color: '#199C9C'
				},
				{
				  image: 'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_img_r.png',
				  type: 'R',
				  title: '人际关系',
				  desc: '指团队成员如何共同工作–他们是否相互尊重对方的能力，足够心理安全以能够坦诚相对，真正关心彼此的幸福感。',
				  color: '#FEDA60'
				},
				{
				  image: 'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_img_i.png',
				  type: 'I',
				  title: '内部流程、系统与结构',
				  desc: '指团队如何管理工作流程，互相支持和高质量的沟通和决策（包括工作任务和团队感情）。',
				  color: '#7AABED'
				},
				{
				  image: 'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_img_l.png',
				  type: 'L',
				  title: '学习',
				  desc: '指团队应对多变的环境和保持持续的进步和成长的能力。团队如何提高绩效（如何完成今天的任务）、能力（如何提高技能和资源以处理明天的任务）和容量（长期的愿景， 如何用更少的资源做更多的事情）',
				  color: '#8093A3'
				},
				{
				  image: 'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_img_l2.png',
				  type: 'L',
				  title: '领导力',
				  desc: '指团队认为需要怎样的领导行为能够让他们，作为个人或者团队做到最好。团队可以和他们的领导者讨论他们的责任，以帮助领导者成为他们需要的领导者。',
				  color: '#0096D8'
				}
            ],
        };
    },
    mounted() {
        // reportData.value = props.reportData;
        this.reportData = {
            dimensionAnalysis: [
				{title:'目的与动机',bcolor:'#FFE796',titlecolor:'#FFE796',wddf:'linear-gradient( 90deg, rgba(255,215,80,0.34) 0%, rgba(251,225,130,0.09) 100%)',
					pfztfb:'linear-gradient( 90deg, #FEDA60 0%, #FBE182 100%)',
					desc:`「宗旨与动机」维度，我们旨在探究是否存在一个清晰的存在理由和明确的方向，能够激发团队成员的动力并吸引他们的想象力，以及个人与集体的身份认同是否围绕共同的目标，并达成一致。`},
				{title:'外部流程及系统与架构',bcolor:'#E4D2E1',titlecolor:'#BA8EB4',wddf:'linear-gradient( 90deg, #F5EFF5 0%, #FAF2F9 100%)',
					pfztfb:'linear-gradient( 90deg, #833479 0%, #9F6196 100%)',
					desc:`「外部流程、系统与结构」维度，我们旨在探究团队如何与各种利益相关者互动，他们与团队的利益相关方各自如何寻求了解对方，以及现有系统和流程的有效性，以帮助管理不同的期望和需求。`},
				{title:'人际关系',bcolor:'#B3DEDE',titlecolor:'#66BDBD',wddf:'linear-gradient( 90deg, #E8F5F5 0%, #F0F8F8 100%)',
					pfztfb:'linear-gradient( 90deg, #189B9B 0%, #64BBBB 100%)',
					desc:`「人际关系」维度，我们旨在探究团队成员如何相互交流、信任程度、尊重和关心的程度，以及团队成员之间的关系如何促进（或破坏）协作。`},
				{title:'内部流程及系统与架构',bcolor:'#C7DCF8',titlecolor:'#95BDF1',wddf:'linear-gradient( 90deg, #E3ECF8 0%, #F2F5F9 100%)',
					pfztfb:'linear-gradient( 90deg, #7AABED 0%, #AFCDF5 100%)',
					desc:`「内部流程、系统与结构」维度，我们旨在探究团队如何在平衡责任与自主权方面进行协作。我们关注团队的敏捷程度、沟通方式以及决策过程的有效性。`},
				{title:'学习',bcolor:'#E6EAED',titlecolor:'#8093A3',wddf:'linear-gradient( 90deg, #EDF0F2 0%, #F2F4F6 100%)',
					pfztfb:'linear-gradient( 90deg, #4D697E 0%, #8093A3 100%)',
					desc:`「学习」维度，我们旨在探究团队如何提高其绩效、技能和资源以应对当前和未来的任务。我们还希望了解团队如何管理能力和提高效率。`},
				{title:'领导力',bcolor:'#D4EDF8',titlecolor:'#3BB6D9',wddf:'linear-gradient( 90deg, #E6F5FB 0%, #F3FCFB 100%)',
					pfztfb:'linear-gradient( 90deg, #0096D8 0%, #5CC9DA 100%)',
					desc:`「领导力」维度，我们旨在探究领导素质和行为如何对团队功能和其他因素产生调节影响，以及这是积极的还是消极的。`}
            ]
        };
		
		this.calculateScaleAndPosition();
		uni.onWindowResize(() => {
			this.calculateScaleAndPosition();
		});
    },
    methods: {
		calculateScaleAndPosition() {
		    uni.getSystemInfo({
				success: (res) => {
				    const screenWidth = res.windowWidth; // 手机屏幕的宽度
				    const pcContentWidth = 630; // PC端内容的原始宽度
				    this.scale = screenWidth / pcContentWidth;
				    this.$nextTick(() => {
						if (this.$refs.ztzdfxRef) {
							this.initZtzdfxChart();
						}
					});
				}
		    });
		},
		downloadZtzdfxImg(){
			if (!this.isChartReady) return console.log('图表尚未准备好');
			
			const chartRef = this.$refs.ztzdfxRef;
			if (!chartRef) return console.log('无法找到图表组件');
			
			chartRef.canvasToTempFilePath({
				success: async (res) => {
					const imgUrl = await this.uploadFilePromise(res.tempFilePath);
					console.log(imgUrl,'imgUrl');
				},
				fail: (err) => {
					console.log('生成图片失败:', err);
				}
			});
		},
		uploadFilePromise(url) {
		  return new Promise((resolve, reject) => {
		    let a = uni.uploadFile({
		      url: BaseApi+'/uploadFile',
		      filePath: url,
		      name: 'file',
		      success: (res) => {
		        setTimeout(() => {
					let data = JSON.parse(res.data)
					if(data&&data.code===0){
						resolve(data.data);
					}else this.$showToast(data?.msg)
		        }, 1000);
		      },
			  fail: err =>{
				resolve('');
			  }
		    });
		  });
		},
		async initZtzdfxChart() {
            let xdata = ['目的与动机', '外部流程及系统与架构', '关系', '内部流程及系统与架构', '学习', '领导力'].reverse();
            let yvalue = [40, 25, 30, 35, 33, 47].reverse();
            let ycolor = [['#FEDA60', '#FBE182'], ['#833479', '#9F6196'], ['#189B9B', '#64BBBB'], ['#7AABED', '#AFCDF5'], ['#4D697E', '#8093A3'], ['#0096D8', '#5CC9DA']].reverse();
            let yData = yvalue.map((v, i) => {
				return {
					value: v,
					itemStyle: {
						color: new echarts.graphic.LinearGradient(
							0, 0, 1, 0,
							[
								{ offset: 0, color: ycolor[i][0] },
								{ offset: 1, color: ycolor[i][1] }
							]
						),
                        borderRadius: [0, 4, 4, 0] 
					}
				};
			});
            const chart = await this.$refs.ztzdfxRef.init(echarts);
            let option = {
				grid: {
                  left: '2%',
                  right: '10%',
                  bottom:  '0%',
                  top: '10%',
				  containLabel: true
				},
				xAxis: {
				  type: 'value',
				  boundaryGap: [0, 0.01],
                  axisLabel: {
                    fontSize: 10
                  }
				},
				yAxis: {
				  type: 'category',
				  data: xdata,
				  axisLabel: {
					color: '#193D59',
					fontSize: 10
				  }
				},
				series: [
				  {
					type: 'bar',
					barWidth: '8px',
					data: yData
				  }
				]
            };
            chart.setOption(option);
			this.isChartReady = true;
        },
      }
    };
</script>

<style scoped lang="scss">
	.page-wrappe{
		width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		.pdf-container{
			width: 630px;
			padding: 0 20rpx;
			box-sizing: border-box;
			transform-origin: top left;
			//   position: absolute;
			//   left: 0;
			//   top: 0;
			//   box-sizing: border-box;
		}
	}
	
    .cd_box{
        padding: 20px 0 30px;
        box-sizing: border-box;
        position: relative;
        height: 890px;
        color: #111111;
        .cb_db{
            .cb_db_l{
                font-family: STSongti-SC, STSongti-SC;
                font-weight: 400;
                font-size: 10px;
                color: #FFFFFF;
                line-height: 16px;
                padding-left: 32px;
                &.cdl{
                    color: #111111;
                    padding-left: 0;
                }
            }
        }
    
        .cd_page{
            width: 100%;
            font-family: STSongti-SC, STSongti-SC;
            font-weight: 400;
            font-size: 10px;
            color: #111111;
            line-height: 16px;
            text-align: center;
            position: absolute;
            bottom: 20px;
        }
    
        p{
            font-family: STSongti-SC, STSongti-SC;
            font-weight: 400;
            font-size: 10px;
            color: #252525;
            line-height: 14px;
            margin-top: 20px;
            &.p2{
                font-size: 12px;
                line-height: 16px;
            }
            &.p3{
                font-size: 12px;
                line-height: 16px;
                color: #33A7A7;
            }
        }
    
        .bp{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 20px;
            color: #111111;
            line-height: 24px;
        }
    
        .big_title{
            font-family: STSongti-SC, STSongti-SC;
            font-weight: bold;
            font-size: 32px;
            color: #009191;
            line-height: 45px;
            margin-top: 20px;
        }
    
        &.fm{
            background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/report/fm_bg.png') no-repeat;
            background-size: 100% 100%;
            position: relative;
        } 
        &.fm2{
            background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fm_bg.png') no-repeat;
            background-size: 100% 100%;
            position: relative;
            justify-content: flex-end;
            padding: 0 40px 30px;
            box-sizing: border-box;
        }
        .fm2-logo{
            width: 163px;
            height: 44px;
            position: absolute;
            top: 48px;
            left: 30px;
        }
        .fm2-perill{
            width: 308px;
            height: 58px;
        }
        .fm2-line{
            width: calc(100% - 87px);
            height: 1px;
            background: rgba(255,255,255,0.12);
            margin-top: 12px;
        }
        .fm2-p{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 38px;
            color: #FFDF73;
            line-height: 48px;
            margin-top: 12px;
        }
        .fm2-texts{
            margin-top: 15px;
            overflow: hidden;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .fm2-texts-pre{
            width: 50%;
            margin-top: 15px;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 12px;
            text-align: left;
        }
    
        .fm_img{
            width: 178px;
            height: 48px;
            margin: 20px 0 0 28px
        }
    
        .fm_info{
            width: 100%;
            padding: 0 51px 41px 51px;
            position: absolute;
            bottom: 0;
            .fi_p{
                font-family: Helvetica;
                font-size: 48px;
                color: #FFD750;
                line-height: 58px;
                text-align: left;
            }
            .fi_line{
                width: 161px;
                height: 2px;
                background: #FFFFFF;
                margin-top: 5px;
            }
            .fi_title{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 46px;
                color: #FFFFFF;
                line-height: 67px;
                text-align: left;
                margin-top: 10px;
            }
            .fi_tip{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 20px;
                margin-top: 2px;
            }
            .fi_xx{
                margin-top: 15px;
                .fi_xx_pre{
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 10px;
                    color: #99D3D3;
                    line-height: 14px;
                    &.ml{
                        margin-left: 16px;
                    }
                }
            }
        }
    
        .cb_content{
            padding: 28px 32px 0;
            &.jxpjmddj{
                padding: 28px 0 0;
            }
        }
    
        &.js{
            .js_boxs{
                margin-top: 26px;
                display: flex;
                justify-content: space-between;
                .jb_pre{
                    width: calc(20% - 10px);
                    height: 302px;
                    border-radius: 0px 18px 0px 18px;
                    border: 2px solid #33A7A7;
                    padding-left: 10px;
                    box-sizing: border-box;
                    position: relative;
                    .jbp_zm{
                        width: 32px;
                        height: 32px;
                        background: #33A7A7;
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: bold;
                        font-size: 22px;
                        color: #FFFFFF;
                        line-height: 27px;
                        text-align: center;
                        position: absolute;
                        left: 0;
                        right: 0;
                    }
                    img{
                        width: 48px;
                        height: 48px;
                        margin: 35px 32px 0 15px;
                    }
                    .jbp_title{
                        width: 100%;
                        height: 30px;
                        padding: 0 20px 7px 0;
                        border-bottom: 2px solid #33A7A7;
                        box-sizing: border-box;
                        font-family: STSongti-SC, STSongti-SC;
                        font-weight: bold;
                        font-size: 9px;
                        color: #111111;
                        line-height: 16px;
                        margin-top: 10px;
                    }
                    p{
                        font-family: STSongti-SC, STSongti-SC;
                        font-weight: 400;
                        font-size: 9px;
                        color: #111111;
                        line-height: 14px;
                        padding: 7px 0 0 0;
                        &:last-child{
                            margin-top: 14px;
                        }
                    }
                    &.jp1{
                        border: 2px solid #833479;
                        .jbp_zm{
                            background: #833479;
                        }
                        .jbp_title{
                            color: #833479;
                            border-bottom: 2px solid #833479;
                        }
                        .jbp_title{
                            color: #833479;
                        }
                    }
                    &.jp2{
                        border: 2px solid #009191;
                        .jbp_zm{
                            background: #009191;
                        }
                        .jbp_title{
                            color: #009191;
                            border-bottom: 2px solid #009191;
                        }
                    }
                    &.jp3{
                        border: 2px solid #193D59;
                        .jbp_zm{
                            background: #193D59;
                        }
                        .jbp_title{
                            color: #193D59;
                            border-bottom: 2px solid #193D59;
                        }
                    }
                    &.jp4{
                        border: 2px solid #FFD750;
                        .jbp_zm{
                            background: #FFD750;
                        }
                        .jbp_title{
                            color: #FFD750;
                            border-bottom: 2px solid #FFD750;
                        }
                    }
                    &.jp5{
                        border: 2px solid #AFCDF5;
                        .jbp_zm{
                            background: #AFCDF5;
                        }
                        .jbp_title{
                            color: #AFCDF5;
                            border-bottom: 2px solid #AFCDF5;
                        }
                    }
                }
            }
            .js_single_box{
                margin-top: 20px;
                width: 100%;
                height: 112px;
                border-radius: 0px 18px 0px 18px;
                border: 2px solid #898989;
                padding-bottom: 10px;
                position: relative;
                .jsb_zm{
                    width: 32px;
                    height: 32px;
                    background: #898989;
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 22px;
                    color: #FFFFFF;
                    line-height: 32px;
                    text-align: center;
                    position: absolute;
                    left: 0;
                    right: 0;
                }
                .jsb_l{
                    width: 111px;
                    img{
                        width: 48px;
                        height: 48px;
                        margin-top: 30px;
                    }
                    p{
                        font-family: STSongti-SC, STSongti-SC;
                        font-weight: 400;
                        font-size: 10px;
                        color: #898989;
                        line-height: 16px;
                        margin-top: 0px;
                    }
                }
                .jsb_r{
                    border-left: 2px solid #898989;
                    padding: 10px 22px;
                    flex: 1;
                    font-family: STSongti-SC, STSongti-SC;
                    font-weight: 400;
                    font-size: 10px;
                    color: #111111;
                    line-height: 16px;
                }
    
            }
        }
    
        .mddj_title{
            img{
                width: 65px;
                height: 45px;
            }
            span{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 800;
                font-size: 32px;
                color: #009191;
                line-height: 40px;
                margin-left: 8px;
            }
        }
        .mddj_tip{
            font-size: 12px;
            margin-top: 30px;
        }
        .mddj_top{
            justify-content: space-between;
            margin-top: 42px;
            .tt_pre{
                width: calc(100% / 3 - 5px);
                .ttp_l{
                    width: 27px;
                    height: 48px;
                    &.tl1{
                        background: #D6BBD2;
                    }
                    &.tl2{
                        background: #FFE796;
                    }
                    &.tl3{
                        background: #AD78A6;
                    }
                }
                .ttp_r{
                    width: calc(100% - 27px);
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 10px;
                    color: #252525;
                    line-height: 14px;
                    padding-left: 4px;
                    box-sizing: border-box;
                }
            }
        }
        .mddj_table{
            margin-top: 33px;
            .mt_l{
                flex: 1;
                box-sizing: border-box;
            }
            .mt_r{
                .mr_pre{
                    font-size: 10px;
                    color: #FFFFFF;
                    width: 27px;
                    padding: 0 4px;
                    box-sizing: border-box;
                    height: 100px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
            }
            .mt_top{
                background: #833479;
                .mt_l{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 20px;
                    color: #FFFFFF;
                    line-height: 20px;
                    padding-left: 14px;
                }
            }
            .mt_list{
                border: 3px solid #833479;
                .ml_pre{
                    border-bottom: 1px solid #E5E7EB;
                    &:last-child{
                        border: none;
                    }
                    &:nth-child(odd){
                        background: #F4F4F4;
                    }
                    &:nth-child(even){
                        background: #FFFFFF;
                    }
    
                    .mt_l{
                        padding: 10px 12px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 10px;
                        color: #252525;
                        line-height: 16px;
                        box-sizing: border-box;
                    }
    
                    .mp_pre{
                        width: 27px;
                        height: 100%;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 10px;
                        color: #1D2129;
                        line-height: 13px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        &.mp1{
                            background: #D6BBD2;
                        }
                        &.mp2{
                            background: #FFE796;
                        }
                        &.mp3{
                            background: #AD78A6; 
                        }
                    }
                }
            }
        }
    
        .pjgx_title{
            font-size: 32px;
            color: #F09216;
            margin-top: 20px;
        }
    
        .mddj_boxs{
            margin-top: 10px;
            .mb_item{
                padding: 20px 0;
                border-bottom: 1px dotted #33A7A7;
    
                .mbi_title{
                    background: rgba(131,52,120,0.12);
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 10px;
                    color: #33A7A7;
                    line-height: 14px;
                    padding: 5px;
                    display: inline;
                }
                .mbi_text{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 10px;
                    color: #111111;
                    line-height: 14px;
                    margin-top: 10px;
                }
            }
        }
    
        .cyfx_boxs{
            margin-top: 5px;
            display: flex;
            .cyfxb_box{
                width: calc(100% / 4 - 1px);
                border-left: 1px dotted #C1C7D2;
                padding: 0 5px;
                box-sizing: border-box;
                .cbb_top{
                    padding: 9px 0;
                    border-bottom: 1px dotted #C1C7D2;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 20px;
                    color: #33A7A7;
                    line-height: 24px;
                    text-align: right;
                    &.red{
                        color: #AD78A6;
                    }
                }
                .cbb_bottom{
                    .cbbb_item{
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-top: 10px;
                        min-height: 64px;
                        .ci_l{
                            width: calc(100% - 42px);
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 10px;
                            color: #252525;
                            line-height: 16px;
                            padding-right: 10px;
                            box-sizing: border-box;
                        }
                        .ci_r{
                            width: 42px;
                            height: 42px;
                            .circle {
                                position: relative;
                                width: 39px;
                                height: 39px;
                                border-radius: 50%;
                                border: 3px solid #FFE796;
                                background-color: transparent;
                            }
                    
                            .semi-circle {
                                position: absolute;
                                top: -3px;
                                right: -3px;
                                width: 39px;
                                height: 39px;
                                border-radius: 100%;
                                background: conic-gradient(
                                    #33A7A7 0deg,                          /* 起始点 */
                                    #33A7A7 calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */
                                    transparent calc(var(--percentage, 0) * 3.6deg), /* 切割的部分，使用透明 */
                                    transparent 360deg                 /* 圆的结束 */
                                );
                                z-index: 2;
                                &.red{
                                    background: conic-gradient(
                                        #AD78A6 0deg,                          /* 起始点 */
                                        #AD78A6 calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */
                                        transparent calc(var(--percentage, 0) * 3.6deg), /* 切割的部分，使用透明 */
                                        transparent 360deg                 /* 圆的结束 */
                                    );
                                }
                            }
                    
                            .number {
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                left: 0;
                                top: 0;
                                background: #FFFFFF;
                                font-family: PingFang-SC, PingFang-SC;
                                font-weight: 800;
                                font-size: 18px;
                                color: #33A7A7;
                                z-index: 3;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                border-radius: 50%;
                                &.red{
                                    color: #AD78A6;
                                }
                            }
                        }
                    }
                }
            }
        }
        
        .jxpjmddj_box{
            border-radius: 0px 6px 0px 6px;
            border: 1px solid #E5E7EB;
            margin-top: 20px;
            padding: 8px;
            .jb_title{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #252525;
                line-height: 16px;
            }
            .jb_title2{
                margin-top: 12px;
                font-family: PingFangSC, PingFang SC;
                font-weight: bold;
                font-size: 20px;
                color: #833479;
                line-height: 16px;
            }
            .jb_text{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 10px;
                color: #252525;
                line-height: 16px;
                margin-top: 10px;
            }
        }
    
        .xxfx_title{
            margin-top: 40px;
            .xt_pre{
                width: 58px;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 16px;
                color: #666666;
                line-height: 16px;
                text-align: center;
            }
        }
        .xxfx_list{
            .xl_item{
                margin-top: 20px;
                .xli_l{
                    width: 177px;
                    .xl_pre{
                        width: 58px;
                        font-family: PangMenZhengDaoBiaoTiTiMianFeiBan, PangMenZhengDaoBiaoTiTiMianFeiBan;
                        font-weight: bolder;
                        font-size: 20px;
                        color: #666666;
                        line-height: 16px;
                        text-align: center;
                        &.red{
                            color: #33A7A7;
                        }
                    }
                }
                .xli_r{
                    width: calc(100% - 177px);
                    .xr_p{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 10px;
                        color: #252525;
                        line-height: 10px;
                    }
                    .xr_tb{
                        width: 100%;
                        height: 4px;
                        margin-top: 26px;
                        position: relative;
                        .xt_pre{
                            width: calc(100% / 3);
                            height: 100%;
                            &.p1{
                                background: #33A7A7;
                            }
                            &.p2{
                                background: rgba(118,30,106,0.6);
                            }
                            &.p3{
                                background: #FFE796;
                            }
                        }
                        .xt_score{
                            position: absolute;
                            left: 14px;
                            top: -20px;
                            .xts_num{
                                background: #FFFFFF;
                                box-shadow: 0px 4px 10px 0px rgba(118,30,106,0.08);
                                border-radius: 8px;
                                border: 1px solid rgba(131,52,120,0.19);
                                font-family: PangMenZhengDao, PangMenZhengDao;
                                font-weight: bold;
                                font-size: 12px;
                                line-height: 16px;
                                padding: 10px 8px;
                                white-space: nowrap;
                                &.red{
                                    color: #33A7A7;
                                }
                                &.green{
                                    color: #AD78A6;
                                }
                            }
                            .xts_box{
                                flex: 1;
                                height: 13px;
                                background: #8F2E7C;
                            }
                        }
                    }
                }
            }
        }
    
        .next_box{
            margin-top: 10px;
            background: rgba(118,30,106,0.05);
            border-radius: 0px 6px 0px 6px;
            padding: 8px 8px;
            .nb_title{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 12px;
                color: #33A7A7;
                line-height: 16px;
            }
            .nb_p{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 10px;
                color: #111111;
                line-height: 16px;
                margin-top: 6px;
            }
            .nb_sj{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 10px;
                color: #252525;
                line-height: 20px;
                padding-left: 18px;
            }
        }
        .next_tip{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 10px;
            color: #252525;
            line-height: 16px;
            margin-top: 20px;
        }
    
        .team_title{
            margin-top: 20px;
            font-size: 20px;
            font-weight: bold;
            line-height: 24px;
            color: #111111;
        }
        .team_p{
            font-size: 10px;
            line-height: 16px;
            color: #111111;
            margin-top: 6px;
        }
    
        .cc_table{
            margin-top: 11px;
            table{
                width: 100%;
                border-collapse: separate;
                border-spacing: 1px;
                background-color: #EFEFEF;
                tr{
                    td{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 10px;
                        color: #111111;
                        line-height: 16px;
                        min-height: 28px;
                        background: #FFFFFF;
                        padding: 5px 5px;
                        &.red{
                            background: #33A7A7;
                            color: #FFFFFF;
                        }
                        &.pink{
                            width: 58px;
                            background: #DCBAD4;
                        }
                        &.yellow{
                            background: #FFD750;
                        }
                        &.th{
                            text-align: center;
                        }
                        &.title{
                            width: 27px;
                            text-align: center;
                        }
                    }
                }
            }
        }
    
        .team_table{
            margin-top: 10px;
            table{
                width: 100%;
                border-collapse: separate;
                border-spacing: 1px;
                background-color: #EFEFEF;
                tr{
                    td{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 10px;
                        color: #252525;
                        line-height: 16px;
                        padding: 6px 10px;
                        background: #FFFFFF;
                        &.mw{
                            width: 50px;
                            padding: 5px;
                        }
                        &.tc{
                            height: 140px;
                        }
                    }
                    &.th td{
                        background: #33A7A7;
                        color: #FFFFFF;
                    }
                }
            }
        }
    
        .ztzdfx_box{
            width: 320px;
            margin-top: 16px;
            .zb_text{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 12px;
                color: #009191;
                line-height: 24px;
            }
            .zb_title{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 10px;
                color: #252525;
                line-height: 10px;
                margin-top: 6px;
            }
            .zb_line{
                width: 100%;
                height: 1px;
                background: #1D2129;
                margin-top: 9px;
            }
            .zb_pre{
                margin-top: 8px;
                .zbp_dian{
                    width: 10px;
                    height: 10px;
                    border-radius: 5px;
                    &.zd1{
                        background: #FFD650;
                    }
                    &.zd2{
                        background: #751E6A;
                    }
                    &.zd3{
                        background: #012846;
                    }
                }
                span{
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 10px;
                    color: #252525;
                    line-height: 10px;
                    margin-left: 8px;
                }
            }
            .zb_memo{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 10px;
                color: #252525;
                line-height: 14px;
                margin-top: 7px;
            }
        }
        
        .cb_content{
            &.box_dj{
                .mddj_title span{
                    color: #833479;
                }
                .p3{
                    color: #111111;
                }
                .mbi_title{
                    background: #833479;
                    font-weight: bold;
                    font-size: 10px;
                    color: #FFFFFF;
                    line-height: 14px;
                }
                .mb_item{
                    border-bottom: 1px dotted #833479;
                }
            }
    
            &.box_wbjg{
                .mddj_title span{
                    color: #009191;
                }
                .p3{
                    color: #111111;
                }
                .mbi_title{
                    background: #009191;
                    font-weight: bold;
                    font-size: 10px;
                    color: #FFFFFF;
                    line-height: 14px;
                }
                .mb_item{
                    border-bottom: 1px dotted #009191;
                }
            }
    
            &.box_gx{
                .mddj_title span{
                    color: #002846;
                }
                .p3{
                    color: #111111;
                }
                .mbi_title{
                    background: #002846;
                    font-weight: bold;
                    font-size: 10px;
                    color: #FFFFFF;
                    line-height: 14px;
                }
                .mb_item{
                    border-bottom: 1px dotted #002846;
                }
            }
    
            &.box_nbjg{
                .mddj_title span{
                    color: #FFD750;
                }
                .p3{
                    color: #111111;
                }
                .mbi_title{
                    background: #FFD750;
                    font-weight: bold;
                    font-size: 10px;
                    color: #FFFFFF;
                    line-height: 14px;
                }
                .mb_item{
                    border-bottom: 1px dotted #FFD750;
                }
                .mbi_title{
                    color: #252525;
                }
            }
    
            &.box_xx{
                .mddj_title span{
                    color: #AFCDF5;
                }
                .p3{
                    color: #111111;
                }
                .mbi_title{
                    background: #AFCDF5;
                    font-weight: bold;
                    font-size: 10px;
                    color: #FFFFFF;
                    line-height: 14px;
                }
                .mb_item{
                    border-bottom: 1px dotted #AFCDF5;
                }
                .mbi_title{
                    color: #252525;
                }
            }
    
            &.box_ldl{
                .mddj_title span{
                    color: #898989;
                }
                .p3{
                    color: #111111;
                }
                .mbi_title{
                    background: #898989;
                    font-weight: bold;
                    font-size: 10px;
                    color: #FFFFFF;
                    line-height: 14px;
                }
                .mb_item{
                    border-bottom: 1px dotted #898989;
                }
                .mbi_title{
                    color: #FFF;
                }
            }
    
            &.other{
                .mddj_title span{
                    font-weight: 800;
                    font-size: 32px;
                    color: #252525;
                    line-height: 32px;
                }
                .nb_title{
                    font-weight: bold;
                    font-size: 12px;
                    color: #252525;
                    line-height: 16px;
                }
                .next_box{
                    background: #F7FAFE;
                }
            }
        }
    
        .v2-top{
            width: 100%;
            height: 49px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding: 0 8px 0 32px;
			box-sizing: border-box;
            .vt-left{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 24px;
                color: #FFFFFF;
                span{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 20px;
                    color: #199C9C;
                    margin-left: 40px;
                }
                &.black{
                    color: #002846;
                }
            }
            .vt-right{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 8px;
                color: #002846;
                line-height: 14px;
                text-align: right;
            }
        }
    
        .v2-box{
            margin-top: 13px;
            background: #FFFFFF;
            border-radius: 10px;
            border: 1px solid #33A7A7;
            padding: 16px 16px 18px;
            position: relative;
            .vb-img1{
                width: 48px;
                height: 6px;
                position: absolute;
                left: 12px;
                top: -3px;
            }
            .vb-img2{
                width: 44px;
                height: 20px;
                position: absolute;
                left: 16px;
                bottom: -10px;
            }
        }
    
        .v2-p{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #002846;
            line-height: 16px;
            span{
                font-family: DIN, DIN;
                font-weight: bold;
                font-size: 14px;
                color: #009191;
                line-height: 14px;
                margin: 0 10px;
            }
        }
        .v2-p2{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 12px;
            color: #002846;
            line-height: 16px;
        }
        .v2-p3{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 14px;
            color: #002846;
            line-height: 20px;
        }
    
        .v2-six{
            flex: 1;
            margin-top: 29px;
            background: #F1F9F9;
            border-radius: 10px;
            position: relative;
            padding: 46px 16px 25px;
            .vsix-title{
                width: 234px;
                height: 42px;
                background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_box_title_bg.png') no-repeat;
                background-size: 100% 100%;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 20px;
                color: #FFFFFF;
                line-height: 42px;
                text-align: center;
                position: absolute;
                left: 50%;
                margin-left: -117px;
                top: -10px;
            }
            .vsix-p{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 10px;
                color: #002846;
                line-height: 16px;
            }
            .vsix-boxs{
                margin-top: 16px;
                overflow: hidden;
                .vsb{
                    margin-top: 2px;
                    background: #FFFFFF;
                    border-radius: 8px;
                    padding: 12px 16px 12px 24px;
                    .vsb-img{
                        width: 48px;
                        height: 48px;
                    }
                    .vsb-right{
                        width: calc(100% - 77px);
                        margin-left: 29px;
                        padding-left: 24px;
                        box-sizing: border-box;
                        position: relative;
                        &::before{
                            content: '';
                            width: 1px;
                            height: 48px;
                            background: #E6EAED;
                            position: absolute;
                            left: 0;
                            top: 50%;
                            margin-top: -24px;
                        }
                        .vsbr-top{
                            .vsbrt-type{
                                width: 24px;
                                height: 24px;
                                border-radius: 4px;
                                font-family: PingFang-SC, PingFang-SC;
                                font-weight: bold;
                                font-size: 20px;
                                color: #FFFFFF;
                                line-height: 24px;
                                text-align: center;
                            }
                            .vsbrt-title{
                                font-family: PingFang-SC, PingFang-SC;
                                font-weight: bold;
                                font-size: 14px;
                                line-height: 16px;
                                margin-left: 8px;
                            }
                        }
                        .vsbr-desc{
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 10px;
                            color: #002846;
                            line-height: 16px;
                            margin-top: 10px;
                        }
                    }
                }
            }
        }
    
        .v2-data{
            background: #FFFFFF;
            border-radius: 10px;
            border: 1px solid #AEDADA;
            width: calc(100% - 9px);
            padding: 46px 16px 16px;
			box-sizing: border-box;
            margin: 27px 0 0 8px;
            position: relative;
            .vd-title{
                width: 134px;
                height: 44px;
                background-size: 100%;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 30px;
                padding-left: 24px;
                box-sizing: border-box;
                position: absolute;
                top: -1px;
                left: -9px;
                &.vt2{
                    width: 224px;
                }
                &.vt3{
                    line-height: 36px;
                }
                &.black{
                    color: #002846;
                }
            }
        }
    
        .vd-wd{
            margin-top: 8px;
            width: 100%;
            height: 34px;
            border-radius: 6px;
            padding: 0 10px;
            box-sizing: border-box;
            .vdwd-pre{
                width: 30%;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #4D697E;
                line-height: 34px;
                text-align: left;
                &.vp{
                    width: 40%;
                }
                span{
                    font-family: DIN, DIN;
                    font-weight: bold;
                    font-size: 14px;
                    color: #002846;
                    line-height: 20px;
                }
            }
        }
    
        .vb-table{
            margin-top: 11px;
            border: 1px solid #FFE796;
            border-radius: 4px;
            .vbt-pre{
                height: 44px;
                .vbtp-left{
					width: 110px;
					height: 44px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 10px;
					color: #FFFFFF;
					line-height: 14px;
					border-bottom: 1px solid #FFFFFF;
					&.black{
						color: #002846;
					}
                }
                .vbtp-right{
                    width: calc(100% - 110px);
                    height: 44px;
                    padding: 0 18px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    .vbtpr-title{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 9px;
                        color: #193D59;
                        line-height: 10px;
                    }
                    .vbtpr-jd{
                        margin-top: 7px;
                        width: 100%;
                        height: 6px;
                        background: #F0F2F8;
                        border-radius: 3px;
                        position: relative;
                        .vj_num{
                            position: absolute;
                            height: 6px;
                            left: 0;
                            top: 0;
                        }
                        .vj-val{
                            background: #FFFFFF;
                            border-radius: 4px;
                            padding: 4px 7px;
                            font-family: DIN, DIN;
                            font-weight: bold;
                            font-size: 12px;
                            color: #002846;
                            line-height: 10px;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            z-index: 2;
                        }
                    }
                }
                &:last-child{
                    .vbtp-left,.vbtp-right{
                        border: none;
                    }
                }
            }
        }
    }

    .cd_box{
        width: 100%;
        height: 891px;
        color: #A1A1A1;
    }
</style>