<template>
	<view class="pagebox">
		<view class="topbox">
			<u-navbar title="LILY"
					  :border-bottom="false"
					  :background="bgc"
					  title-color='#FFFFFF'
					  title-size='36'
					  height='36'></u-navbar>
			<view class="echarts">
				<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
				<l-echart ref="chart"
						  @finished="initChart"></l-echart>
			</view>
			<view class="infobigbox">
				<view class="logo">
					<image src="https://file.langsi.online/yasiimg/web/static/ubtuFZZ3dgSoSc444qIg"
						   style="z-index: 0;"></image>
				</view>
				<view class="infobox">

					<view class="infobox_top">
						<view class="infobox_top_left">
							<view class="infobox_top_lefttop">
								今日学习（分）
							</view>
							<view class="infobox_top_leftbot">
								320
							</view>
						</view>
						<view class="infobox_top_right">
							<view class="infobox_top_righttop">
								较昨日
							</view>
							<view class="infobox_top_rightbot">
								20%
							</view>
						</view>
					</view>
					<view class="infobox_bot">
						<view class="infobox_bot_cont">
							<view class="infobox_bot_cont_top">
								总学习（时）
							</view>
							<view class="infobox_bot_cont_bot">
								320
							</view>
						</view>
						<view class="infobox_bot_cont">
							<view class="infobox_bot_cont_top">
								今日做题（道）
							</view>
							<view class="infobox_bot_cont_bot">
								4300
							</view>
						</view>
						<view class="infobox_bot_cont">
							<view class="infobox_bot_cont_top">
								今日问AI（次）
							</view>
							<view class="infobox_bot_cont_bot">
								43
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="study_info_box">

				<view class="study_info_top">
					<view class="study_info_top_left">
						作业完成情况
					</view>
					<view class="study_info_top_right">
						本周
						<view class="iconfont icon-arow_down"></view>
					</view>
				</view>
				<view class="study_info_cont_box">

					<view class="study_info_cont">
						<view class="data">Mon</view>
						<view class="study_box">
							<view class="study"
								  v-for="(item, index) in sdydata"
								  :key="index"
								  :style="{ backgroundColor: item.background }"></view>
						</view>

					</view>
					<view class="study_info_cont">
						<view class="data">Tue</view>
						<view class="study_box">
							<view class="study"
								  v-for="(item, index) in sdydata"
								  :key="index"
								  :style="{ backgroundColor: item.background }"></view>
						</view>

					</view>
					<view class="study_info_cont">
						<view class="data">Wed</view>
						<view class="study_box">
							<view class="study"
								  v-for="(item, index) in sdydata"
								  :key="index"
								  :style="{ backgroundColor: item.background }"></view>
						</view>

					</view>
					<view class="study_info_cont">
						<view class="data">Thu</view>
						<view class="study_box">
							<view class="study"
								  v-for="(item, index) in sdydata"
								  :key="index"
								  :style="{ backgroundColor: item.background }"></view>
						</view>

					</view>
					<view class="study_info_cont">
						<view class="data">Fri</view>
						<view class="study_box">
							<view class="study"
								  v-for="(item, index) in sdydata"
								  :key="index"
								  :style="{ backgroundColor: item.background }"></view>
						</view>

					</view>
					<view class="study_info_cont">
						<view class="data">Sat</view>
						<view class="study_box">
							<view class="study"
								  v-for="(item, index) in sdydata"
								  :key="index"
								  :style="{ backgroundColor: item.background }"></view>
						</view>

					</view>
					<view class="study_info_cont">
						<view class="data">Sun</view>
						<view class="study_box">
							<view class="study"
								  v-for="(item, index) in sdydata"
								  :key="index"
								  :style="{ backgroundColor: item.background }"></view>
						</view>

					</view>
				</view>


			</view>
		</view>
		<view class="work_info">
			<view class="work_info_top">
				<view class="work_info_top_text">
					作业记录
				</view>
				<view class="work_info_top_right">
					作业记录
					<view class="iconfont icon-arow_down"></view>
				</view>
			</view>
			<view class="work_card">
				<view class="work_card_top">
					<view class="work_card_top_left">
						<view class="work_card_top_left_img">
							<image src="https://file.langsi.online/yasiimg/web/static/u07sCQb6mW6OSamVr1Va"></image>
						</view>
						课后作业
					</view>
					<view class="work_card_top_right">
						进行中
					</view>
				</view>
				<view class="work_card_cont_box">
					<view class="work_card_cont">
						<view class="work_card_cont_point"></view>
						<view class="work_card_cont_text">
							IELTS 18-Test 2-Part 1
						</view>
						<view class="work_card_cont_tag">
							听力
						</view>
					</view>
					<view class="work_card_cont">
						<view class="work_card_cont_point"></view>
						<view class="work_card_cont_text">
							IELTS 18-Test 2-Part 1
						</view>
						<view class="work_card_cont_tag">
							听力
						</view>
					</view>
					<view class="work_card_cont">
						<view class="work_card_cont_point"></view>
						<view class="work_card_cont_text">
							IELTS 18-Test 2-Part 1
						</view>
						<view class="work_card_cont_tag">
							听力
						</view>
					</view>
				</view>
				<view class="work_card_info_box">
					<view class="work_card_info_top">
						<view class="work_card_info_topimg">
							<image src="https://file.langsi.online/yasiimg/web/static/uw2jJ5BraHhwDDaIZ0MC"></image>
						</view>
						描述
					</view>
					<view class="work_card_info_bot">
						最好在中午十二点之前完成交上作业，过期不候
					</view>
				</view>
				<view class="work_card_info_box">
					<view class="work_card_info_top">
						<view class="work_card_info_topimg">
							<image src="https://file.langsi.online/yasiimg/web/static/uhApaomh5maFP29oecp3">

							</image>
						</view>
						时间
					</view>

					<view class="work_card_info_bot">
						02-12 12:00
					</view>
				</view>
			</view>
			<view class="work_card"
				  :class="isalready == true ? 'act1' : ''">
				<view class="work_card_top">
					<view class="work_card_top_left">
						<view class="work_card_top_left_img">
							<image src="https://file.langsi.online/yasiimg/web/static/u07sCQb6mW6OSamVr1Va"></image>
						</view>
						课后作业
					</view>
					<view class="work_card_top_right"
						  :class="isalready == true ? 'act2' : ''">
						进行中
					</view>
				</view>
				<view class="work_card_cont_box">
					<view class="work_card_cont">
						<view class="work_card_cont_point"></view>
						<view class="work_card_cont_text">
							IELTS 18-Test 2-Part 1
						</view>
						<view class="work_card_cont_tag">
							听力
						</view>
					</view>
					<view class="work_card_cont">
						<view class="work_card_cont_point"></view>
						<view class="work_card_cont_text">
							IELTS 18-Test 2-Part 1
						</view>
						<view class="work_card_cont_tag">
							听力
						</view>
					</view>
					<view class="work_card_cont">
						<view class="work_card_cont_point"></view>
						<view class="work_card_cont_text">
							IELTS 18-Test 2-Part 1
						</view>
						<view class="work_card_cont_tag">
							听力
						</view>
					</view>
				</view>
				<view class="work_card_info_box">
					<view class="work_card_info_top">
						<view class="work_card_info_topimg">
							<image src="https://file.langsi.online/yasiimg/web/static/uw2jJ5BraHhwDDaIZ0MC"></image>
						</view>
						描述
					</view>
					<view class="work_card_info_bot">
						最好在中午十二点之前完成交上作业，过期不候
					</view>
				</view>
				<view class="work_card_info_box">
					<view class="work_card_info_top">
						<view class="work_card_info_topimg">
							<image src="https://file.langsi.online/yasiimg/web/static/uhApaomh5maFP29oecp3">

							</image>
						</view>
						时间
					</view>

					<view class="work_card_info_bot">
						02-12 12:00
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

// import echarts from '@/common/echarts.min2.js' /*chart.min.js为在线定制*/
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
	components: {
		mpvueEcharts, LEchart
	},
	data() {
		return {
			// echarts,
			totalScore: 10,
			grammaticalScore: 8,
			vocabularyScore: 8,
			pronounceScore: 8,
			fluencyScore: 8,
			bgc: {
				backgroundColor: "transparent",
			},
			sdydata: [],
			isalready: true,
			// https://file.langsi.online/yasiimg/web/static/uBHiWpVS8LQdX241DdjX
		}
	},
	onLoad(option) {



		this.changedata()
	},

	methods: {
		async initChart() {
			let _this = this

			const option = {
				color: ['#d1f7ff', '#95c6fd'],
				legend: { // 图例组件

				},
				backgroundColor: 'transparent',
				radar: [{ // 雷达图坐标系组件，只适用于雷达图。
					center: ['50%', '50%'],
					// 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
					radius: '70rpx',
					// 圆的半径，数组的第一项是内半径，第二项是外半径。
					startAngle: 90,
					// 坐标系起始角度，也就是第一个指示器轴的角度。[ default: 90 ]
					name: { // (圆外的标签)雷达图每个指示器名称的配置项。
						formatter: '{value}',
						textStyle: {
							fontSize: '24rpx',
							color: '#4DA1FF'
						}
					},
					nameGap: 5,
					// 指示器名称和指示器轴的距离。[ default: 15 ]
					splitNumber: 1,
					// (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
					shape: 'circle',
					// 雷达图绘制类型，支持 'polygon'(多边形) 和 'circle'(圆)。[ default: 'polygon' ]
					axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
						lineStyle: {
							color: '#daedff',
							// 坐标轴线线的颜色。
							width: 1,
							// 坐标轴线线宽。
							type: 'solid',
							// 坐标轴线线的类型。
						}
					},
					splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
						lineStyle: {
							color: ['#daedff', '#daedff', '#daedff', '#daedff', '#daedff', '#91c5ff'],
							// 分隔线颜色
							width: 1,
							// 分隔线线宽
							type: ['solid', 'dashed'],
							// 坐标轴线线的类型
						}
					},
					splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
						show: true,
						areaStyle: { // 分隔区域的样式设置。
							color: ' #E1F0FF',
							// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
						}
					},
					indicator: [
						{ // 雷达图的指示器，用来指定雷达图中的多个变量（维度）,跟data中 value 对应
							name: '平均成绩/分' + ' ' + Number(_this.totalScore).toFixed(1),
							// 指示器名称
							max: 100,
							// 指示器的最大值，可选，建议设置
							color: '#FFFFFF ' // 标签特定的颜色。
						},
						{
							name: '写作' + ' ' + Number(_this.grammaticalScore).toFixed(1),
							max: 100,
							color: '#FFFFFF' // 标签特定的颜色。
						},
						{
							name: '阅读' + ' ' + Number(_this.vocabularyScore).toFixed(1),
							max: 100,
							color: '#FFFFFF' // 标签特定的颜色。
						},
						{
							name: '口语' + ' ' + Number(_this.pronounceScore).toFixed(1),
							max: 100,
							color: '#FFFFFF' // 标签特定的颜色。
						},
						{
							name: '听力' + ' ' + Number(_this.fluencyScore).toFixed(1),
							max: 100,
							color: '#FFFFFF' // 标签特定的颜色。
						}]
				}],
				series: [{
					name: '雷达图',
					// 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
					type: 'radar',
					// 系列类型: 雷达图
					itemStyle: { // 折线拐点标志的样式。

						normal: { // 普通状态时的样式
							lineStyle: {
								width: 2,
								color: '#3F9AFF',
							},
							opacity: 1
						},
						emphasis: { // 高亮时的样式
							lineStyle: {
								width: 0,
								color: '#60abff',
							},
							opacity: 1
						}
					},
					data: [
						//                         { // 雷达图的数据是多变量（维度）的
						//                             name: '',
						//                             // 数据项名称
						//                             value: [100, 100, 100, 100, 100],
						//                             // 其中的value项数组是具体的数据，每个值跟 radar.indicator 一一对应。
						//                             symbol: 'circle',
						//                             // 单个数据标记的图形。
						//                             symbolSize: 0,
						//                             // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
						//                             // label: { // 单个拐点文本的样式设置
						//                             //     normal: {
						//                             //         show: false,
						//                             //         // 单个拐点文本的样式设置。[ default: false ]
						//                             //         position: 'top',
						//                             //         // 标签的位置。[ default: top ]
						//                             //         distance: 5,
						//                             //         // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
						//                             //         color: '#d1f7ff',
						//                             //         // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
						//                             //         fontSize: 14,
						//                             //         // 文字的字体大小
						//                             //         formatter: function(params) {
						//                             //             return params.value;
						//                             //         }
						//                             //     }
						//                             // },
						//                             itemStyle: { // 单个拐点标志的样式设置。
						//                                 normal: {
						//                                     borderColor: '#d1f7ff',
						//                                     // 拐点的描边颜色。[ default: '#000' ]
						//                                     borderWidth: 0,
						//                                     // 拐点的描边宽度，默认不描边。[ default: 0 ]
						//                                 }

						//                             },
						//                             lineStyle: { // 单项线条样式。
						//                                 normal: {
						//                                     opacity: 0.5,// 图形透明度
						//                                     width: 2,
						//                                     color: '#d1f7ff',
						//                                 },
						//                                 emphasis: { // 高亮时的样式
						//                                     width: 2,
						//                                     color: '#d1f7ff',
						//                                     opacity: 1
						//                                 }
						//                             },
						//                             areaStyle: { // 单项区域填充样式
						//                                 normal: {
						//                                     color: '#d1f7ff' // 填充的颜色。[ default: "#000" ]
						//                                 }
						//                             }
						//                         },
						{
							name: '',
							value: [Number(_this.grammaticalScore).toFixed(1) * 10, Number(_this.grammaticalScore).toFixed(1) * 10, Number(_this.vocabularyScore).toFixed(1) * 10, Number(_this.pronounceScore).toFixed(1) * 10, Number(_this.fluencyScore).toFixed(1) * 10],
							symbol: 'circle',
							symbolSize: 0,
							// label: {
							//     normal: {
							//         show: false,
							//         position: 'top',
							//         distance: 5,
							//         color: '#95c6fd',
							//         fontSize: 14,
							//         formatter: function(params) {
							//             return params.value;
							//         }
							//     }
							// },
							itemStyle: {
								normal: {
									borderColor: '##3F9AFF',
									borderWidth: 0,
								}
							},
							lineStyle: {
								normal: {
									opacity: 0.5,
									width: 2,
									color: '#2D7CE6',
								},
								emphasis: { // 高亮时的样式
									width: 2,
									color: '#2D7CE6',
									opacity: 1
								}
							},
							areaStyle: {
								normal: {
									color: '#2D7CE6'
								}
							}
						}]
				},
				]
			};
			const chart = await this.$refs.chart.init(echarts);
			chart.setOption(option)
			//return chart
		},

		changedata() {
			this.sdydata = [];

			for (let i = 0; i < 10; i++) {
				const isStudy = Math.random() < 0.5;
				let totalNum = "0";
				let alreadyNum = "0";

				if (isStudy) {
					totalNum = String(Math.floor(Math.random() * 100));
					alreadyNum = String(Math.floor(Math.random() * (parseInt(totalNum) + 1)));
				}

				this.sdydata.push({
					isStudy,
					totalNum,
					alreadyNum,
				});
			}

			for (let i = 0; i < this.sdydata.length; i++) {
				const item = this.sdydata[i];
				if (item.isStudy) {
					const percentage = (parseInt(item.alreadyNum) / parseInt(item.totalNum)) * 100;
					const color = this.getColorByPercentage(percentage);
					item.background = color;
				} else {
					item.background = '#F6F6F6';
				}
			}

			console.log(this.sdydata, 'this.sdydata');
		},
		getColorByPercentage(percentage) {
			// 将百分比转换为透明度
			const alpha = percentage / 100;

			// 返回颜色值，使用计算得到的透明度
			return `rgba(61, 202, 211, ${alpha})`;
		}


	}
}
</script>

<style  lang="scss">
page {
	background: #F7F9FC;
	padding-bottom: 50rpx;
}


.pagebox {

	width: 750rpx;

	.topbox {
		// display: flex;
		// flex-wrap: wrap;
		padding: 0 32rpx;
		width: 750rpx;
		height: 1345.92rpx;
		background-image: url("https://file.langsi.online/yasiimg/web/static/uBHiWpVS8LQdX241DdjX");
		background-size: cover;
		background-position: center;

		.echarts {
			margin-top: 70rpx;
			margin-left: auto;
			margin-right: 20rpx;
			width: 400rpx;
			height: 300rpx;
			// background:transparent;
		}

		.infobigbox {
			width: 686rpx;
			position: relative;

			.logo {
				position: absolute;
				left: 20rpx;
				top: -342rpx;
				width: 220rpx;
				height: 485.82rpx;
				z-index: 0 !important;
			}

			.infobox {
				position: relative;
				width: 686rpx;

				background: rgba(255, 255, 255, 0.7);
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				border: 2rpx solid #FFFFFF;
				//  z-index: 999;

				.infobox_top {
					display: flex;
					flex-wrap: nowrap;

					// align-items: center;
					.infobox_top_left {
						width: 196rpx;
						margin-top: 48rpx;
						margin-left: 100rpx;

						.infobox_top_lefttop {
							font-size: 28rpx;
							font-family: 'PingFang';
							font-weight: 400;
							color: #2E4975;

						}

						.infobox_top_leftbot {
							font-size: 76rpx;
							font-family: 'PingFang';
							font-weight: 800;
							color: #2E4975;
							margin-top: 12rpx;
						}
					}

					.infobox_top_right {
						margin-left: 112rpx;
						margin-top: 78rpx;

						.infobox_top_righttop {
							font-size: 24rpx;
							font-family:'PingFang','PingFang';
							font-weight: 800;
							color: #2E4975;
						}

						.infobox_top_rightbot {
							margin-top: 4rpx;
							font-size: 40rpx;
							font-family:'PingFang','PingFang';
							font-weight: 800;
							color: #F18F21;
						}
					}
				}

				.infobox_bot {
					margin-left: 32rpx;
					margin-top: 32rpx;
					margin-bottom: 32rpx;
					width: 622rpx;
					height: 126rpx;
					background: #F6F6F6;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-around;
					align-items: center;

					.infobox_bot_cont {
						width: 140rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						.infobox_bot_cont_top {
							font-size: 20rpx;
							font-family:'PingFang','PingFang';
							font-weight: 500;
							color: #2E4975;
						}

						.infobox_bot_cont_bot {
							margin-top: 8rpx;
							font-size: 36rpx;
							font-family:'PingFang','PingFang';
							font-weight: 800;
							color: #2E4975;
						}
					}
				}
			}
		}

		.study_info_box {
			// position: absolute;
			margin-top: 20rpx;
			width: 686rpx;
			padding: 32rpx;
			// height: 365rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.study_info_top {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;

				.study_info_top_left {
					font-size: 28rpx;
					font-family:'PingFang','PingFang';
					font-weight: 800;
					color: #2E4975;
				}

				.study_info_top_right {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					font-size: 24rpx;
					font-family:'PingFang','PingFang';
					font-weight: 500;
					color: rgba(46, 73, 117, 0.65);
					line-height: 38rpx;

					.icon-arow_down {
						margin-left: 8rpx;
						font-size: 16rpx;
						color: #2E4975;
					}
				}
			}

			.study_info_cont_box {
				margin-top: 32rpx;
				display: flex;
				// flex-wrap: warp;
				flex-wrap: wrap;

				.study_info_cont {
					margin-top: 4rpx;
					display: flex;
					flex-wrap: nowrap;
					align-content: center;

					// justify-content: space-between;
					.data {
						width: 40rpx;
						font-size: 20rpx;
						font-family:'PingFang','PingFang';
						font-weight: 500;
						color: #2E4975;
					}

					.study_box {
						margin-left: 12rpx;
						display: flex;
						flex-wrap: nowrap;
						justify-content: space-between;

						.study {
							margin-right: 2rpx;
							width: 57.4rpx;
							height: 32.41rpx;
							background: #F6F6F6;
						}
					}
				}
			}

		}

	}

	.work_info {

		margin-top: 40rpx;
		padding: 0 32rpx;

		.work_info_top {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;

			.work_info_top_text {
				font-size: 32rpx;
				font-family:'PingFang','PingFang';
				font-weight: 800;
				color: #2E4975;
			}

			.work_info_top_right {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				font-size: 24rpx;
				font-family:'PingFang','PingFang';
				font-weight: 500;
				color: rgba(7, 47, 90, 0.6);

				.icon-arow_down {
					margin-left: 8rpx;
					font-size: 16rpx;
					color: #2E4975;
				}
			}
		}

		.work_card {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			width: 686rpx;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			border-left: 8rpx solid #F18F21;

			.work_card_top {
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;

				.work_card_top_left {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					font-size: 28rpx;
					font-family:'PingFang','PingFang';
					font-weight: 800;
					color: #2E4975;

					.work_card_top_left_img {
						margin-right: 8rpx;
						width: 38rpx;
						height: 32rpx;
					}
				}

				.work_card_top_right {
					font-size: 24rpx;
					font-family:'PingFang','PingFang';
					font-weight: 500;
					color: #F18F21;
				}

				.act2 {
					color: #2D7CE6;
				}
			}

			.work_card_cont_box {
				margin-top: 16rpx;
				padding: 24rpx;
				width: 100%;
				background: #F9F9F9;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.work_card_cont:last-child {
					margin-bottom: 0;
				}

				.work_card_cont {
					margin-bottom: 24rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					.work_card_cont_point {
						width: 8rpx;
						height: 8rpx;
						background: #2E4975;
						border-radius: 50%;
					}

					.work_card_cont_text {
						margin-left: 20rpx;
						font-size: 24rpx;
						font-family:'PingFang','PingFang';
						font-weight: 500;
						color: #2E4975;
					}

					.work_card_cont_tag {
						margin-left: 30rpx;
						padding: 8rpx 18rpx;
						background: #FFF2E4;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						font-size: 20rpx;
						font-family:'PingFang','PingFang';
						font-weight: 500;
						color: #F18F21;
					}

				}
			}

			.work_card_info_box {
				display: flex;
				flex-wrap: wrap;
				margin-top: 22rpx;

				.work_card_info_top {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					width: 100%;
					font-size: 20rpx;
					font-family:'PingFang','PingFang';
					font-weight: 500;
					color: rgba(46, 73, 117, 0.6);

					.work_card_info_topimg {
						margin-right: 8rpx;
						width: 18.74rpx;
						height: 20rpx;
					}
				}

				.work_card_info_bot {
					margin-top: 4rpx;
					font-size: 24rpx;
					font-family:'PingFang','PingFang';
					font-weight: 500;
					color: #2E4975;
				}
			}
		}

		.act1 {
			border-left: 8rpx solid #2D7CE6;
		}
	}
}</style>