<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">
								{{workinfo.todayStudyPoint}}
							</view>
						</view>
						<view class="infobox_top_right">
							<view class="infobox_top_righttop">
								较昨日
							</view>
							<view class="infobox_top_rightbot" style="color: #2D7CE6; " v-if="isup">
								<view class="iconfont icon-xiangshangjiantoucuxiao">
								</view>
								<view class="text">
									{{beforyes}}%
								</view>

							</view>
							<view class="infobox_top_rightbot" v-if="beforyes==0" style="color: #2E4975;">
								<view class="text">
									{{beforyes}}%
								</view>
							</view>
							<view class="infobox_top_rightbot" v-if="isup==false">
							<view class="iconfont icon-xiangxiajiantoucuxiao">
							</view>
							<view class="text">
								{{beforyes}}%
							</view>
							
							</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">
								{{workinfo.askAiNum}}
							</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" v-for="(item, index) in sdydata" :key="index">
						<view class="data" v-if="index==1">Sun</view>
						<view class="data" v-if="index==2">Mon</view>
						<view class="data" v-if="index==3">Tus</view>
						<view class="data" v-if="index==4">Wed</view>
						<view class="data" v-if="index==5">Thu</view>
						<view class="data" v-if="index==6">Fri</view>
						<view class="data" v-if="index==7">Sat</view>

						<view class="study_box">
							<view class="study" v-for="(items,indexs) in item" :key="indexs"
								:style="{ backgroundColor: items.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" v-if="false">
					作业记录
					<view class="iconfont icon-arow_down"></view>
				</view>
			</view>
			<view class="card_bigbox">
				<view class="work_card" v-for="(item,index ) in works" :key="index" @click="toworkdetail(item.id)"
					:class="item.status === 1 ? 'act1' : (item.status === '2' ? 'act3' : 'default')">
					<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 class="txt" v-html="highlightSearch(item.name)">
								
							</view>
							
						</view>
						<view class="work_card_top_right" :class="item.status == 1 ? 'act2' : ''">
							进行中
						</view>
					</view>
					<view class="work_card_cont_box">
						<!-- v-if="indexs<3" -->
						<view class="work_card_cont" v-for="(items,indexs ) in item.infos" :key="indexs" v-if="indexs<3">
							<view class="work_card_cont_point"></view>
							<view class="work_card_cont_text" v-if="items.classify==1||items.classify==2">
								{{items.paperName}}-{{items.testName}}-{{items.partName}}
							</view>
							<view class="work_card_cont_text" v-if="items.classify==4" style="display: inline-flex;flex-wrap: nowrap;">
								{{items.moduleName}}-{{items.partName}}-<view style="width:140rpx;	overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{items.questionName}}</view>-跟读
							</view>
							<view class="work_card_cont_text" v-if="items.classify==3">
								{{items.paperName}}-{{items.testName}}-{{items.partName}}
							</view>
							<view class="work_card_cont_tag" v-if="items.classify==1"
								style="background: rgba(27,225,178,0.1);color: #1BE1B2;">
								听力
							</view>
							<view class="work_card_cont_tag" v-if="items.classify==2"
								style="background: rgba(242,182,42,0.2);color: #F2AA02 ;">
								阅读
							</view>
							<view class="work_card_cont_tag" v-if="items.classify==3"
								style="background:rgba(63,122,242,0.2);color: #3F7AF2 ;">
								写作
							</view>
							<view class="work_card_cont_tag" v-if="items.classify==4"
								style="background: rgba(242,63,235,0.1);color: #F23FEB  ;">
								口语
							</view>
			
						</view>
						<view class="work_card_cont" v-if="item.infos.length>3">
							<view class="work_card_cont_point" style="margin-right: 10rpx;"></view>
							<view class="work_card_cont_point" style="margin-right: 10rpx;"></view>
							<view class="work_card_cont_point"></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">
							{{item.des}}
						</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">
							{{item.doneTime}}
							<!-- {{ formatTimestamp(item.createTime) }} -->
						</view>
					</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,
				id: 1523,
				workinfo: {},
				orgworkinfo: {},
				beforyes: '',
				isup: '',
				works:{}
				// https://file.langsi.online/yasiimg/web/static/uBHiWpVS8LQdX241DdjX
			}
		},
		onLoad(option) {



			// this.changedata()
			this.getinfo()
		},

		methods: {
			highlightSearch(name) {
				// 使用正则表达式替换匹配到的 searchKeyword 为带有颜色的文字
				if (this.searchKeyword) {
					const regex = new RegExp(this.searchKeyword, 'gi');
					return name.replace(regex, match => `<span style="color: #2D7CE6 ;">${match}</span>`);
				}
				return name;
			},
			getinfo() {
				this.$u.get(
					`https://api.admin-v2.langsi.online/admin-api/classroom/work-record/statistics?memberId=${this.id}`
				).then(res => {


					if (res.code == 0) {
						this.workinfo = res.data
						this.sdydata = this.workinfo.weekWorkStatistics
						this.orgworkinfo = JSON.parse(JSON.stringify(res.data));
						const percentageChange = ((this.workinfo.todayStudyPoint - this.workinfo
							.yesterdayStudyPoint) / Math.abs(this.workinfo.yesterdayStudyPoint)) * 100;

						// Determine whether it's an improvement or decline
						this.isup = percentageChange > 0;

						// Assign the absolute percentage change to this.beforyes
						this.beforyes = Math.abs(percentageChange);
						this.changedata()

						// this.classlist = res.data.list
						// this.isloding = false

					}
				})
				this.$u.get(
					`https://api.admin-v2.langsi.online/admin-api/classroom/work-member/list?memberId=${501}`
				).then(res => {
				
				
					if (res.code == 0) {
						this.works = res.data
						
				
						// this.classlist = res.data.list
						// this.isloding = false
				
					}
				})
			},
			async initChart() {
				let _this = this

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

					},
					backgroundColor: 'transparent',
					radar: [{ // 雷达图坐标系组件，只适用于雷达图。
						center: ['50%', '55%'],
						// 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
						radius: '60rpx',
						// 圆的半径，数组的第一项是内半径，第二项是外半径。
						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[1][0].times = 10
				for (const key in this.sdydata) {
					if (this.sdydata.hasOwnProperty(key)) {
						const items = this.sdydata[key];

						// Loop through each item in the structure
						for (const item of items) {
							// Compare times with maxTimes and calculate the percentage
							const percentage = (item.times / this.workinfo.maxTimes) * 100;

							// Get the background color using the getColorByPercentage method
							const backgroundColor = this.getColorByPercentage(percentage);

							// Add the background property to the item
							item.background = backgroundColor;
						}
					}
				}
				console.log(this.sdydata, 'sdydatasdydata');
			},
			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;
			padding-bottom: 20rpx;
			border-radius: 20rpx;
			// 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 {
								display: flex;
								flex-wrap: nowrap;
								margin-top: 4rpx;
								align-items: flex-end;
								/* Align items at the bottom */
								color: #F18F21;

								.icon-xiangshangjiantoucuxiao {
									font-size: 16rpx;
									margin-bottom: 12rpx;
								}

								.icon-xiangxiajiantoucuxiao {
									font-size: 16rpx;
									margin-bottom: 12rpx;
								}

								.text {
									font-size: 40rpx;
									font-family: 'PingFang', 'PingFang';
									font-weight: 800;
								}
							}
						}
					}

					.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-bottom: 20rpx;
					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;
					}
				}
			}

			.card_bigbox {
				.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;
							}
							.txt{
								font-size: 28rpx;
								font-family: 'PingFang', 'PingFang';
								font-weight: 800;
								color: #2E4975;
							}
						}
			
						.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;
						width: 100%;
			
						.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;
				}
			
				.act3 {
					border-left: 8rpx solid #DFDFDF;
				}
			}
			
			.act1 {
				border-left: 8rpx solid #2D7CE6;
			}
		}
	}
</style>