fix: 五维度样式处理

This commit is contained in:
yanghang
2025-07-18 11:15:55 +08:00
parent 8409783c26
commit 632a032143
2 changed files with 33 additions and 20 deletions
+31 -20
View File
@@ -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}{
+2
View File
@@ -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,