<template>
	<div class="datasub">
		<div class="datasub-left">
			<div class="left">
				<div class="left-title">
					<img src="./assets/icon01.png" alt="" />
					<div class="tit">资助领域分布情况</div>
					<el-select v-model="value1" placeholder="Select" class="select">
						<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="left-main">
					<div class="left-main-echarts" ref="leftChartRef"></div>
				</div>
			</div>
			<div class="left">
				<div class="left-title">
					<img src="./assets/icon03.png" alt="" />
					<div class="tit">机构资助领域情况</div>
					<el-select v-model="value2" placeholder="Select" class="select">
						<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
                <div class="left-main1">
                    <div class="left-sankey-echarts" ref="leftSankeyRef"></div>
                </div>
			</div>
		</div>
		<div class="datasub-right">
			<div class="right">
				<div class="right-title">
					<img src="./assets/icon02.png" alt="" />
					<div class="tit">资助经费变化情况</div>
					<el-select v-model="value" placeholder="Select" class="select">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="right-main">
					<div class="right-main-echarts" ref="rightChartRef"></div>
                    <div class="right-main-tit">亿美元</div>
				</div>
			</div>
			<div class="right">
				<div class="right-title">
					<img src="./assets/icon03.png" alt="" />
					<div class="tit">承研主体排名</div>
					<el-select v-model="value3" placeholder="Select" class="select">
						<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="right-main1">
					<div class="uni-item" v-for="(item, index) in universityData" :key="index">
						<div class="uni-left">
							<img :src="item.img" class="uni-img" />
							<div class="uni-name">{{ item.name }}</div>
						</div>
						<div class="uni-middle">
							<div class="uni-bar" :style="{ width: (item.value / 24) * 100 + '%', background: item.color }"></div>
						</div>
						<div class="uni-right">{{ item.value }}项</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import NSF from "./assets/NSF.png";
import DARPA from "./assets/DARPA.png";
import NASA from "./assets/NASA.png";
import NIH from "./assets/NIH.png";
import NIST from "./assets/NIST.png";

import img01 from "./assets/斯坦福大学.png"
import img02 from "./assets/加州大学旧金山分校.png"
import img03 from "./assets/宾夕法尼亚大学.png"
import img04 from "./assets/约翰斯·霍普金斯大学.png"
import img05 from "./assets/康奈尔大学.png"
import img06 from "./assets/华盛顿大学.png"
import img07 from "./assets/麻省理工大学.png"


const value = ref("近十年");
const value1 = ref("2025年");
const value2 = ref("2025年");
const value3 = ref("2025年");

const universityData = [
	{
		name: "斯坦福大学",
		img: img01,
		value: 24,
		color: "linear-gradient(270deg, #D15054 0%, rgba(209,80,84,0) 100%)"
	},
	{
		name: "加州大学旧金山分校",
		img: img02,
		value: 18,
		color: "linear-gradient(270deg, #F69C45 0%, rgba(246,156,69,0) 100%)"
	},
	{
		name: "宾夕法尼亚大学",
		img: img03,
		value: 12,
		color: "linear-gradient(270deg, #EBC818 0%, rgba(235,200,24,0) 100%)"
	},
	{
		name: "约翰斯·霍普金斯大学",
		img: img04,
		value: 11,
		color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
	},
	{
		name: "康奈尔大学",
		img: img05,
		value: 10,
		color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
	},
	{
		name: "华盛顿大学（圣路易斯）",
		img: img06,
		value: 6,
		color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
	},
	{
		name: "麻省理工大学",
		img: img07,
		value: 4,
		color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
	}
];

const options = [
	{
		value: "近十年",
		label: "近十年"
	},
	{
		value: "近五年",
		label: "近五年"
	}
];
const options1 = [
	{
		value: "2025年",
		label: "2025年"
	},
	{
		value: "2024年",
		label: "2024年"
	}
];

const leftChartRef = ref(null);
const rightChartRef = ref(null);
const leftSankeyRef = ref(null);
let leftChart;
let rightChart;
let leftSankey;

const initLeftDonut = () => {
	if (!leftChartRef.value) return;
	if (leftChart) leftChart.dispose();
	leftChart = echarts.init(leftChartRef.value);
	const data = [
		{ name: "集成电路", value: 50 },
		{ name: "人工智能", value: 46 },
		{ name: "通信网络", value: 40 },
		{ name: "能源", value: 32 },
		{ name: "先进制造", value: 31 },
		{ name: "生物科技", value: 31 },
		{ name: "航空航天", value: 30 },
		{ name: "新材料", value: 24 }
	];
	const colors = [
		"rgba(105, 177, 255, 1)", // 集成电路
		"rgba(255, 192, 105, 1)", // 人工智能
		"rgba(135, 232, 222, 1)", // 通信网络
		"rgba(89, 126, 247, 1)", // 能源
		"rgba(214, 228, 255, 1)", // 先进制造
		"rgba(255, 120, 117, 1)", // 生物科技
		"rgba(179, 127, 235, 1)", // 航空航天
		"rgba(255, 163, 158, 1)" // 新材料
	];
	const option = {
		color: colors,
		tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
		series: [
			{
				type: "pie",
				radius: [96, 120],
				center: ["50%", "50%"],
				avoidLabelOverlap: true,
				itemStyle: { borderWidth: 0 },
				label: {
					show: true,
					position: "outside",
					alignTo: "edge",
					formatter: ({ name, value, percent }) => `{name|${name}}  {value|${value}项}  {percent|${percent}%}`,
					minMargin: 5,
					edgeDistance: 10,
					lineHeight: 15,
					rich: {
						name: {
							fontSize: 16,
							fontFamily: "Microsoft YaHei",
							fontWeight: 700,
							lineHeight: 24,
							color: "rgb(59, 65, 75)"
						},
						value: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: "rgb(95, 101, 108)"
						},
						percent: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: "rgb(95, 101, 108)"
						}
					}
				},
				labelLine: {
					show: true,
					length: 30,
					length2: 0,
					maxSurfaceAngle: 80
				},
				labelLayout: function (params) {
					const isLeft = params.labelRect.x < leftChart.getWidth() / 2;
					const points = params.labelLinePoints;
					// 导航线终点在标签下方
					const lineY = params.labelRect.y + params.labelRect.height;
					points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
					points[2][1] = lineY;
					points[1][1] = lineY;
					return {
						labelLinePoints: points
					};
				},
				data: data.map((d, i) => ({
					...d,
					labelLine: { lineStyle: { color: colors[i], width: 1 } }
				}))
			}
		]
	};
	leftChart.setOption(option);
};

const initRightLine = () => {
	if (!rightChartRef.value) return;
	if (rightChart) rightChart.dispose();
	rightChart = echarts.init(rightChartRef.value);
	const years = ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"];
	const nsf = [75, 35, 45, 60, 72, 68, 95, 85, 82, 80, 80, 86];
	const darpa = [55, 40, 48, 42, 60, 65, 70, 78, 60, 92, 85, 80];
	const nasa = [60, 42, 28, 25, 30, 35, 40, 52, 38, 60, 36, 42];
	const nih = [38, 25, 22, 28, 30, 34, 40, 60, 28, 35, 22, 34];
	const nist = [40, 28, 22, 20, 24, 26, 30, 50, 25, 20, 18, 15];
	const colorMap = {
		NSF: "rgba(20, 89, 187, 1)",
		DARPA: "rgba(206, 79, 81, 1)",
		NASA: "rgba(255, 172, 77, 1)",
		NIH: "rgba(19, 168, 168, 1)",
		NIST: "rgba(114, 46, 209, 1)"
	};
	const option = {
		color: [colorMap.NSF, colorMap.DARPA, colorMap.NASA, colorMap.NIH, colorMap.NIST],
		grid: { left: 40, right: 80, top: 20, bottom: 40 },
		tooltip: { trigger: "axis" },
		legend: { show: false },
		xAxis: {
			type: "category",
			data: years,
			boundaryGap: false,
			axisLine: { show: false },
			axisTick: { show: false },
			axisLabel: {
				color: "rgba(132, 136, 142, 1)",
				fontSize: 14,
				fontFamily: "Microsoft YaHei",
				fontWeight: 400,
				lineHeight: 22
			}
		},
		yAxis: {
			type: "value",
			min: 0,
			max: 100,
			splitLine: { show: true, lineStyle: { color: "#e6e6e6", type: "dashed" } },
			axisLine: { show: false },
			axisTick: { show: false },
			axisLabel: {
				color: "rgba(132, 136, 142, 1)",
				fontSize: 14,
				fontFamily: "Microsoft YaHei",
				fontWeight: 400,
				lineHeight: 22
			}
		},
		series: [
			{
				name: "NSF",
				type: "line",
				data: nsf,
				symbol: "none",
				showSymbol: false,
				endLabel: {
					show: true,
					formatter: () => `{NSF| }  {t_NSF|NSF}`,
					rich: {
						NSF: { backgroundColor: { image: NSF }, width: 16, height: 16 },
						t_NSF: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: colorMap.NSF
						}
					}
				},
				areaStyle: { color: "rgba(20,89,187,0.12)" }
			},
			{
				name: "DARPA",
				type: "line",
				data: darpa,
				symbol: "none",
				showSymbol: false,
				endLabel: {
					show: true,
					formatter: () => `{DARPA| }  {t_DARPA|DARPA}`,
					rich: {
						DARPA: { backgroundColor: { image: DARPA }, width: 16, height: 16 },
						t_DARPA: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: colorMap.DARPA
						}
					}
				},
				areaStyle: { color: "rgba(206,79,81,0.12)" }
			},
			{
				name: "NASA",
				type: "line",
				data: nasa,
				symbol: "none",
				showSymbol: false,
				endLabel: {
					show: true,
					formatter: () => `{NASA| }  {t_NASA|NASA}`,
					rich: {
						NASA: { backgroundColor: { image: NASA }, width: 16, height: 16 },
						t_NASA: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: colorMap.NASA
						}
					}
				},
				areaStyle: { color: "rgba(255,172,77,0.12)" }
			},
			{
				name: "NIH",
				type: "line",
				data: nih,
				symbol: "none",
				showSymbol: false,
				endLabel: {
					show: true,
					formatter: () => `{NIH| }  {t_NIH|NIH}`,
					rich: {
						NIH: { backgroundColor: { image: NIH }, width: 16, height: 16 },
						t_NIH: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: colorMap.NIH
						}
					}
				},
				areaStyle: { color: "rgba(19,168,168,0.12)" }
			},
			{
				name: "NIST",
				type: "line",
				data: nist,
				symbol: "none",
				showSymbol: false,
				endLabel: {
					show: true,
					formatter: () => `{NIST| }  {t_NIST|NIST}`,
					rich: {
						NIST: { backgroundColor: { image: NIST }, width: 16, height: 16 },
						t_NIST: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: colorMap.NIST
						}
					}
				},
				areaStyle: { color: "rgba(114,46,209,0.12)" }
			}
		]
	};
    rightChart.setOption(option);
};

const initLeftSankey = () => {
    if (!leftSankeyRef.value) return;
    if (leftSankey) leftSankey.dispose();
    leftSankey = echarts.init(leftSankeyRef.value);
    const leftNodes = [
        { name: "美国国防高级研究计划局DARPA" },
        { name: "美国国家科学基金会NSF" },
        { name: "美国国家航空航天局NASA" },
        { name: "美国国立卫生研究院NIH" },
        { name: "美国农业部USDA" },
        { name: "国家标准与技术研究院NIST" },
        { name: "美国能源部DOE" }
    ];
    const rightNodes = [
        { name: "人工智能" },
        { name: "生物科技" },
        { name: "量子科技" },
        { name: "新材料" },
        { name: "集成电路" },
        { name: "通信网络" },
        { name: "能源" },
        { name: "先进制造" },
        { name: "航空航天" }
    ];
    const nodes = [...leftNodes, ...rightNodes];
    const links = [
        { source: "美国国防高级研究计划局DARPA", target: "人工智能", value: 20 },
        { source: "美国国防高级研究计划局DARPA", target: "量子科技", value: 10 },
        { source: "美国国防高级研究计划局DARPA", target: "通信网络", value: 8 },
        { source: "美国国家科学基金会NSF", target: "生物科技", value: 16 },
        { source: "美国国家科学基金会NSF", target: "集成电路", value: 12 },
        { source: "美国国家科学基金会NSF", target: "新材料", value: 9 },
        { source: "美国国家航空航天局NASA", target: "航空航天", value: 22 },
        { source: "美国国家航空航天局NASA", target: "通信网络", value: 6 },
        { source: "美国国立卫生研究院NIH", target: "生物科技", value: 24 },
        { source: "美国农业部USDA", target: "先进制造", value: 8 },
        { source: "国家标准与技术研究院NIST", target: "集成电路", value: 14 },
        { source: "国家标准与技术研究院NIST", target: "新材料", value: 10 },
        { source: "美国能源部DOE", target: "能源", value: 18 },
        { source: "美国能源部DOE", target: "通信网络", value: 6 }
    ];
    const leftColor = {
        "美国国防高级研究计划局DARPA": "#722ED1",
        "美国国家科学基金会NSF": "#0A57A6",
        "美国国家航空航天局NASA": "#2266FF",
        "美国国立卫生研究院NIH": "#FFCC00",
        "美国农业部USDA": "#AA0000",
        "国家标准与技术研究院NIST": "#FF8888",
        "美国能源部DOE": "#0088AA"
    };
    const rightColor = {
        人工智能: "#B05FA0",
        生物科技: "#5070DD",
        量子科技: "#8AAA7C",
        新材料: "#6D7860",
        集成电路: "#0CA8DF",
        通信网络: "#6D7860",
        能源: "#8AAA7C",
        先进制造: "#B47B5D",
        航空航天: "#A7C74C"
    };
    const option = {
        tooltip: { trigger: "item" },
        series: [{
            type: "sankey",
            data: nodes.map(n => ({ name: n.name, itemStyle: { color: leftColor[n.name] || rightColor[n.name] || "#bbb" } })),
            links: [
                { source: "美国国防高级研究计划局DARPA", target: "人工智能", value: 25 },
                { source: "美国国防高级研究计划局DARPA", target: "量子科技", value: 8 },
                { source: "美国国防高级研究计划局DARPA", target: "新材料", value: 10 },
                { source: "美国国防高级研究计划局DARPA", target: "集成电路", value: 10 },
                { source: "美国国防高级研究计划局DARPA", target: "通信网络", value: 9 },
                { source: "美国国防高级研究计划局DARPA", target: "先进制造", value: 8 },

                { source: "美国国家科学基金会NSF", target: "人工智能", value: 20 },
                { source: "美国国家科学基金会NSF", target: "生物科技", value: 12 },
                { source: "美国国家科学基金会NSF", target: "量子科技", value: 8 },
                { source: "美国国家科学基金会NSF", target: "新材料", value: 12 },
                { source: "美国国家科学基金会NSF", target: "集成电路", value: 20 },
                { source: "美国国家科学基金会NSF", target: "通信网络", value: 9 },
                { source: "美国国家科学基金会NSF", target: "能源", value: 4 },
                { source: "美国国家科学基金会NSF", target: "先进制造", value: 10 },
                { source: "美国国家科学基金会NSF", target: "航空航天", value: 6 },

                { source: "美国国家航空航天局NASA", target: "人工智能", value: 15 },
                { source: "美国国家航空航天局NASA", target: "量子科技", value: 6 },
                { source: "美国国家航空航天局NASA", target: "集成电路", value: 15 },
                { source: "美国国家航空航天局NASA", target: "通信网络", value: 9 },
                { source: "美国国家航空航天局NASA", target: "能源", value: 6 },
                { source: "美国国家航空航天局NASA", target: "先进制造", value: 10 },
                { source: "美国国家航空航天局NASA", target: "航空航天", value: 18 },

                { source: "美国国立卫生研究院NIH", target: "人工智能", value: 20 },
                { source: "美国国立卫生研究院NIH", target: "量子科技", value: 4 },
                { source: "美国国立卫生研究院NIH", target: "集成电路", value: 15 },
                { source: "美国国立卫生研究院NIH", target: "通信网络", value: 8 },
                { source: "美国国立卫生研究院NIH", target: "能源", value: 6 },
                { source: "美国国立卫生研究院NIH", target: "先进制造", value: 10 },
                { source: "美国国立卫生研究院NIH", target: "航空航天", value: 4 },

                { source: "美国农业部USDA", target: "人工智能", value: 20 },
                { source: "美国农业部USDA", target: "新材料", value: 11 },
                { source: "美国农业部USDA", target: "通信网络", value: 5 },
                { source: "美国农业部USDA", target: "能源", value: 2 },
                { source: "美国农业部USDA", target: "先进制造", value: 10 },
                { source: "美国农业部USDA", target: "航空航天", value: 4 },

                { source: "国家标准与技术研究院NIST", target: "量子科技", value: 4 },
                { source: "国家标准与技术研究院NIST", target: "先进制造", value: 4 },
                { source: "国家标准与技术研究院NIST", target: "航空航天", value: 4 },

                { source: "美国能源部DOE", target: "新材料", value: 11 },
                { source: "美国能源部DOE", target: "集成电路", value: 20 },
                { source: "美国能源部DOE", target: "通信网络", value: 5 },
                { source: "美国能源部DOE", target: "能源", value: 12 },
                { source: "美国能源部DOE", target: "先进制造", value: 8 },
                { source: "美国能源部DOE", target: "航空航天", value: 4 }
            ],
            sort: 'none',
            layoutIterations: 0,
            draggable: false,
            nodeAlign: "justify",
            orient: "horizontal",
            left: 10,
            right: 70,
            top: 0,
            bottom: 0,
            nodeWidth: 40,
            nodeGap: 10,
            lineStyle: { color: "#E7E7E8", opacity: 0.8, curveness: 0.5 },
            emphasis: { focus: "adjacency" },
            label: { 
                show: true, 
                color: "rgb(59, 65, 75)", 
                fontSize: 14, 
                fontFamily: "Microsoft YaHei", 
                fontWeight: 400, 
                lineHeight: 16,
                formatter: (params) => {
                    const map = {
                        "美国国防高级研究计划局DARPA": "美国国防高级研究计划局\nDARPA",
                        "美国国家科学基金会NSF": "美国国家科学基金会\nNSF",
                        "美国国家航空航天局NASA": "美国国家航空航天局\nNASA",
                        "美国国立卫生研究院NIH": "美国国立卫生研究院\nNIH",
                        "美国农业部USDA": "美国农业部\nUSDA",
                        "国家标准与技术研究院NIST": "国家标准与技术研究院\nNIST",
                        "美国能源部DOE": "美国能源部\nDOE"
                    };
                    return map[params.name] || params.name;
                },
                position: 'right'
            }
        }]
    };
    leftSankey.setOption(option);
};
const handleResize = () => {
    if (leftChart) leftChart.resize();
    if (rightChart) rightChart.resize();
    if (leftSankey) leftSankey.resize();
};

onMounted(() => {
    initLeftDonut();
    initRightLine();
    initLeftSankey();
    window.addEventListener("resize", handleResize);
});
onBeforeUnmount(() => {
    window.removeEventListener("resize", handleResize);
    if (leftChart) {
        leftChart.dispose();
        leftChart = null;
    }
    if (rightChart) {
        rightChart.dispose();
        rightChart = null;
    }
    if (leftSankey) {
        leftSankey.dispose();
        leftSankey = null;
    }
});
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.datasub {
	width: 1600px;
	height: 936px;
	display: flex;
	justify-content: space-between;
	.datasub-left {
		width: 792px;
		height: 936px;
		.left {
			width: 792px;
			height: 460px;
			margin-right: 16px;
			margin-bottom: 16px;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background-color: #fff;
			.left-title {
				width: 792px;
				height: 48px;
				border-bottom: 1px solid rgb(234, 236, 238);
				position: relative;
				img {
					width: 19px;
					height: 19px;
					position: absolute;
					top: 16px;
					left: 21px;
				}
				.tit {
					margin-left: 60px;
					height: 48px;
					padding: 11px 0;
					font-size: 20px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 26px;
					color: rgb(5, 95, 194);
				}
				.select {
					width: 120px;
					height: 28px;
					padding: 0px 12px;
					position: absolute;
					top: 11px;
					right: 31px;
				}
			}
			.left-main {
				width: 792px;
				height: 412px;
				padding: 52px 60px 78px 61px;
				.left-main-echarts {
					width: 100%;
					height: 100%;
				}
			}
            .left-main1 {
                width: 792px;
                height: 412px;
                padding: 30px 30px 30px 30px;
                .left-sankey-echarts {
                    width: 100%;
                    height: 100%;
                }
            }
		}
	}
	.datasub-right {
		width: 792px;
		height: 936px;
		.right {
			width: 792px;
			height: 460px;
			border-radius: 10px;
			margin-bottom: 16px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background-color: #fff;
			.right-title {
				width: 792px;
				height: 48px;
				border-bottom: 1px solid rgb(234, 236, 238);
				position: relative;
				img {
					width: 19px;
					height: 19px;
					position: absolute;
					top: 16px;
					left: 21px;
				}
				.tit {
					margin-left: 60px;
					height: 48px;
					padding: 11px 0;
					font-size: 20px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 26px;
					color: rgb(5, 95, 194);
				}
				.select1 {
					width: 155px;
					height: 28px;
					padding: 0px 12px;
					position: absolute;
					top: 11px;
					right: 163px;
				}
				.select {
					width: 120px;
					height: 28px;
					padding: 0px 12px;
					position: absolute;
					top: 11px;
					right: 31px;
				}
			}
			.right-main {
				width: 792px;
				height: 421px;
				padding: 40px 5px 30px 22px;
                position: relative;
				.right-main-echarts {
					width: 100%;
					height: 100%;
				}
                .right-main-tit {
                    position: absolute;
                    top: 18px;
                    right: 83px;
                    font-size: 14px;
                    font-weight: 400;
                    font-family: "Microsoft YaHei";
                    line-height: 22px;
                    color: rgb(132, 136, 142);
                }
			}
			.right-main1 {
				width: 792px;
				height: 421px;
				padding: 43px 29px 45px 20px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.uni-item {
					width: 100%;
					height: 24px;
					display: flex;
					align-items: center;
					.uni-left {
						width: 280px;
						display: flex;
						align-items: center;
						.uni-img {
							width: 24px;
							height: 24px;
							margin-right: 15px;
						}
						.uni-name {
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(59, 65, 75);
						}
					}
					.uni-middle {
						flex: 1;
						height: 8px;
						display: flex;
						align-items: center;
						padding-left: 20px;
						.uni-bar {
							height: 8px;
							border-radius: 4px;
						}
					}
					.uni-right {
						width: 50px;
						text-align: right;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
					}
				}
			}
		}
	}
}
</style>
