fix: 五维度样式处理
This commit is contained in:
@@ -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}{
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user