From 632a032143d5431eab26e1fac569f476e29c7377 Mon Sep 17 00:00:00 2001
From: yanghang <icho.yang@scai-global.com>
Date: Fri, 18 Jul 2025 11:15:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BA=94=E7=BB=B4=E5=BA=A6=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/course/components/chartFive.vue | 51 ++++++++++++++---------
 src/pages/course/index.vue                |  2 +
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/pages/course/components/chartFive.vue b/src/pages/course/components/chartFive.vue
index 5928e501..27533000 100644
--- a/src/pages/course/components/chartFive.vue
+++ b/src/pages/course/components/chartFive.vue
@@ -1,10 +1,11 @@
 <template>
 	<view class="chart-box" :style="allStyle">
 		<view class="cont-box">
+			<view v-for="width in 5" :class="'total-line total-line' + width"></view>
 			<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
 			<view class="data-box">
 				<view class="line-box">
-				<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
+					<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
 				</view>
 			</view>
 		</view>
@@ -152,29 +153,39 @@
 			left: 50%;
 			transform: translate(-50%, -50%);
 			margin-top: 25rpx;
-			&::before{
-				content: '';
-				display: block;
-				width: 100%;
+			
+			.total-line{
+				width: 57.7%;
 				height:  3rpx;
 				background-color: rgba(255, 255, 255, .3);
 				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-				z-index: 20;
-			}
-			&::after{
-				content: '';
-				display: block;
-				height: 100%;
-				width:  3rpx;
-				background-color: rgba(255, 255, 255, .3);
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
+				overflow: hidden;
 				z-index: 20;
+				&.total-line1{
+					top: 40.5%;
+					left: 49.5%;
+					transform: rotateZ(162deg);
+				}
+				&.total-line2{
+					top: 40.5%;
+					left:-6.5%;
+					transform: rotateZ(18deg);
+				}
+				&.total-line3{
+					top: 21.5%;
+					left: 21%;
+					transform: rotateZ(-90deg);
+				}
+				&.total-line4{
+					top: 72.5%;
+					left: 4.5%;
+					transform: rotateZ(-54deg);
+				}
+				&.total-line5{
+					top: 72.5%;
+					left: 37.5%;
+					transform: rotateZ(-126deg);
+				}
 			}
 			@for $i from 1 through 3 {
 				.percent-#{$i*25}{
diff --git a/src/pages/course/index.vue b/src/pages/course/index.vue
index 92b24b85..72a62137 100644
--- a/src/pages/course/index.vue
+++ b/src/pages/course/index.vue
@@ -80,6 +80,7 @@
 						</view>
 					</view>
 					<view class="right-course-list">
+						<chartFive/>
 						<view 
 							class="type-list" 
 							v-for="item in courseListTreeShow" 
@@ -116,6 +117,7 @@
 <script setup>
 import CourseItem from "@/components/course-item/course-item.vue"
 import common from '@/common/common'
+import chartFive from './components/chartFive.vue'
 import {
 	getPrdLineTypeListApi,
 	getTraTagListApi,