zS/go-viee-fetch-Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore：统一小标题css：

Browse Source 
font-family: 'CustomFont';
    font-style: italic;
    letter-spacing: 0.5px;
    color: #eee;
    text-shadow: 1px 3px 10px #000000;
    font-size: 16px;
This commit is contained in:
Free-sss 2025-09-01 16:57:25 +08:00
parent 35acd39545
commit 18f975bc4a
24 changed files with 220 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHaz/config.ts
View File

@ -37,7 +37,7 @@ export const option = {
fontSize: 12,
title: '近60分钟报警信息',
titleSize: 16,
titleColor: '#ffffff',
titleColor: '#eee',
fontWeight: 'normal',
fontStyle: 'italic',
paddingX: 50,

2
src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/config.ts
View File

@ -38,7 +38,7 @@ export const option = {
fontSize: 12,
title: '近60分钟报警信息',
titleSize: 16,
titleColor: '#ffffff',
titleColor: '#eee',
fontWeight: 'normal',
fontStyle: 'italic',
paddingX: 45,

5
src/packages/components/Charts/HazardousChemicalsSpace/MaxTrimHaz/config.ts
View File

@ -38,7 +38,7 @@ export const FontStyleObject = {
export const option = {
dataset: '危化品库场景数据看板',
fontSize: 38,
fontColor: '#ffffff',
fontColor: '#eee',
paddingX: 35,
paddingY: 6,
textAlign: 'start', // 水平对齐方式
@ -48,7 +48,8 @@ export const option = {
letterSpacing: 10,
fontFamily: 'CustomFont',
writingMode: 'horizontal-tb',
backgroundColor: '#00000000'
backgroundColor: '#00000000',
fontShadowColor: '#000000'
}

2
src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/config.ts
View File

@ -31,7 +31,7 @@ export const option = {
dataset: dataJson.source,
title: '未处置报警数TOP5',
titleColor: '#ffffff',
titleColor: '#eee',
titleSize: 16,
rankColor: '#5AA1AD',
nameColor: '#eeeeee',

8
src/packages/components/Charts/HazardousChemicalsSpace/index.ts
View File

@ -2,17 +2,17 @@ import { yushiVideoConfig } from './yushiVideoHaz/index'
import { MaxTrimConfig } from './MaxTrimHaz/index'
import { PieCenterConfig } from './PieCenterHaz/index'
import { LineDropdownConfig } from './LineDropdownHaz/index'
import { AlarmListConfig } from './AlarmListHaz/index'
// import { AlarmListConfig } from './AlarmListHaz/index'
import { LineGraph01 } from './LineGraph01Haz/index'
import {TopAlarmsConfig} from './TopAlarmsHaz/index'
import { TopAlarmsConfig } from './TopAlarmsHaz/index'
import AlarmListHazCConfig from './AlarmListHazC'
export default [
yushiVideoConfig,
MaxTrimConfig,
MaxTrimConfig,
PieCenterConfig,
LineDropdownConfig,
AlarmListConfig,
// AlarmListConfig,
LineGraph01,
TopAlarmsConfig,
AlarmListHazCConfig

13
src/packages/components/Charts/MyComponents/AlarmList/config.ts
View File

@ -37,14 +37,13 @@ export const option = {
itemHeight: 28,
fontSize: 12,
title: '近60分钟报警信息',
titleSize: 17,
titleColor: '#ffffff',
iconColor: '#00E5FF',
titleSize: 16,
titleColor: '#eee',
fontWeight: 'normal',
fontStyle: 'normal',
paddingX: 40,
paddingY: -30,
letterSpacing: 1,
fontStyle: 'italc',
paddingX: 50,
paddingY: -25,
letterSpacing: 0.5,
isShowButton: false
}

7
src/packages/components/Charts/MyComponents/AlarmList/index.vue
View File

@ -179,6 +179,13 @@ onUnmounted(() => {
display: flex;
align-items: center;
padding: 0 20px 0 20px;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
}

8
src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
View File

@ -14,8 +14,8 @@ export const option = {
itemHeight: 28,
fontSize: 11,
title: '设备实时在线概况',
titleSize: 17,
titleColor: '#ffffff',
titleSize: 16,
titleColor: '#eee',
iconColor: '#00E5FF',
onlineRate: 75,
onlineDevice: 23,
@ -27,8 +27,8 @@ export const option = {
progressBgColor: 'rgba(0, 0, 0, 0.1)',
progressTextColor: '#DDE3E9',
paddingX: 60,
paddingY: -4,
letterSpacing: 1
paddingY: -1,
letterSpacing: 0.5
}
export default class Config extends PublicConfigClass implements CreateComponentType {

9
src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
View File

@ -351,4 +351,13 @@ SmallBorder {
}
}
}
.title-text {
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
</style>

97
src/packages/components/Charts/MyComponents/LineDropdown/index.vue
View File

@ -276,42 +276,42 @@ const handleDropdownChange = () => {
/* 添加边框样式到父容器 */
border-radius: 8px;
padding: 1px;
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.8) 0%,
rgba(200, 200, 200, 0.6) 25%,
rgba(150, 150, 150, 0.5) 50%,
rgba(100, 100, 100, 0.4) 75%,
rgba(60, 60, 60, 0.3) 100%);
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.8) 0%,
rgba(200, 200, 200, 0.6) 25%,
rgba(150, 150, 150, 0.5) 50%,
rgba(100, 100, 100, 0.4) 75%,
rgba(60, 60, 60, 0.3) 100%);
transition: all 0.3s ease;
}
/* hover状态的彩色渐变边框 */
.dropdown-container:hover {
background: linear-gradient(to bottom,
rgba(58, 160, 255, 1) 0%,
rgba(98, 255, 198, 0.8) 25%,
rgba(54, 110, 255, 1) 50%,
rgba(28, 234, 160, 0.8) 75%,
rgba(58, 160, 255, 1) 100%);
background: linear-gradient(to bottom,
rgba(58, 160, 255, 1) 0%,
rgba(98, 255, 198, 0.8) 25%,
rgba(54, 110, 255, 1) 50%,
rgba(28, 234, 160, 0.8) 75%,
rgba(58, 160, 255, 1) 100%);
}
/* focus状态的增强彩色渐变边框 */
.dropdown-container:focus-within {
background: linear-gradient(to bottom,
rgba(58, 160, 255, 1) 0%,
rgba(98, 255, 198, 1) 25%,
rgba(54, 110, 255, 1) 50%,
rgba(28, 234, 160, 1) 75%,
rgba(58, 160, 255, 1) 100%);
background: linear-gradient(to bottom,
rgba(58, 160, 255, 1) 0%,
rgba(98, 255, 198, 1) 25%,
rgba(54, 110, 255, 1) 50%,
rgba(28, 234, 160, 1) 75%,
rgba(58, 160, 255, 1) 100%);
}
.custom-dropdown1 {
/* 渐变背景 */
background: linear-gradient(135deg,
rgba(25, 35, 45, 0.95) 0%,
rgba(15, 25, 35, 0.95) 50%,
rgba(35, 45, 55, 0.95) 100%);
background: linear-gradient(135deg,
rgba(25, 35, 45, 0.95) 0%,
rgba(15, 25, 35, 0.95) 50%,
rgba(35, 45, 55, 0.95) 100%);
/* 移除边框，因为已经移到父容器 */
border: none;
border-radius: 7px;
@ -335,10 +335,10 @@ const handleDropdownChange = () => {
box-shadow: 0 6px 20px rgba(58, 160, 255, 0.2);
transform: translateY(-1px);
/* 增强背景渐变 */
background: linear-gradient(135deg,
rgba(35, 45, 55, 0.95) 0%,
rgba(25, 35, 45, 0.95) 50%,
rgba(45, 55, 65, 0.95) 100%);
background: linear-gradient(135deg,
rgba(35, 45, 55, 0.95) 0%,
rgba(25, 35, 45, 0.95) 50%,
rgba(45, 55, 65, 0.95) 100%);
}
.custom-dropdown1:focus {
@ -357,7 +357,7 @@ const handleDropdownChange = () => {
border: none;
transition: all 0.2s ease;
cursor: pointer;
/* 添加细微的边框分隔 */
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
@ -408,7 +408,7 @@ const handleDropdownChange = () => {
transform: translateY(-50%) rotate(180deg);
}
.custom-dropdown1:focus + .dropdown-arrow {
.custom-dropdown1:focus+.dropdown-arrow {
transform: translateY(-50%) rotate(180deg);
color: rgba(58, 160, 255, 1);
text-shadow: 0 0 8px rgba(58, 160, 255, 0.5);
@ -462,32 +462,19 @@ const handleDropdownChange = () => {
}
}
.header-title{
position: absolute;
top: 0;
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
}
.header-title{
position: absolute;
top: 0;
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
.header-title {
position: absolute;
top: 0;
height: 45px;
line-height: 45px;
left: 80px;
white-space: nowrap;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
.svg {

16
src/packages/components/Charts/MyComponents/LineGraph01/index.vue
View File

@ -641,13 +641,15 @@ onUnmounted(() => {
.buttonContent span {
font-size: 15px;
color: #ffffff;
letter-spacing: 2px;
font-weight: 500;
text-shadow: -4px -4px 10px #3B8ED4;
padding: 0;
margin: 0;
padding-left: 5px;
margin: -5px;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
</style>

6
src/packages/components/Charts/MyComponents/LineGraph02/config.ts
View File

@ -102,9 +102,9 @@ export const option = {
const configSet = {
titlefontWeight: 'normal',
titlefontSize: 17,
titlefontStyle: 'normal',
titlecolor: '#ffffff',
titlefontSize: 16,
titlefontStyle: 'italic',
titlecolor: '#eee',
titlePaddingX: 0,
titlePaddingY: 0,
isShowButton: true

12
src/packages/components/Charts/MyComponents/LineGraph02/index.vue
View File

@ -420,11 +420,11 @@ onUnmounted(() => {
.buttonContent span {
font-size: 17px;
color: #ffffff;
letter-spacing: 1px;
font-weight: normal;
text-shadow: -4px -4px 10px #3B8ED4;
padding: 0;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
</style>

5
src/packages/components/Charts/MyComponents/MaxTrim/config.ts
View File

@ -37,12 +37,13 @@ export const FontStyleObject = {
export const option = {
dataset: '储罐区监控',
fontSize: 38,
fontColor: '#ffffff',
fontColor: '#eee',
paddingX: 35,
paddingY: 6,
textAlign: 'start', // 水平对齐方式
fontWeight: 'bold',
fontWeight: 'normal',
fontStyle: 'italic',
fontShadowColor:'#000000',
// 字间距
letterSpacing: 10,
writingMode: 'horizontal-tb',

5
src/packages/components/Charts/MyComponents/MaxTrim/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="go-text-box">
<div class="content" >
<div class="content">
{{ option.dataset }}
</div>
<svg width="1920" height="94" class="svg" viewBox="0 0 1920 94" fill="none"
@ -333,7 +333,8 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
font-weight: v-bind('fontWeight');
font-style: v-bind('fontStyle');
background-color: v-bind('backgroundColor');
text-shadow: 0px 4px 3px v-bind('fontShadowColor');
text-shadow: 0px 4px 3px v-bind('fontShadowColor');
font-family: 'CustomFont';
}
.go-text-box .svg {

4
src/packages/components/Charts/MyComponents/ParkingScene/config.ts
View File

@ -6,8 +6,8 @@ import dataJson from './data.json'
export const option = {
dataset: dataJson.source,
title: '场景分布概况',
titleColor: '#ffffff',
titleSize: 20,
titleColor: '#eee',
titleSize: 16,
linkColor: '#00E5FF',
linkText: '查看更多>>',
sceneNameColor: '#ccc',

19
src/packages/components/Charts/MyComponents/ParkingScene/index.vue
View File

@ -255,7 +255,8 @@ const option = computed(() => props.chartConfig.option)
}
.scene-item:nth-child(n+2) {
margin-top: 7px;;
margin-top: 7px;
;
}
.scene-header {
@ -275,7 +276,7 @@ const option = computed(() => props.chartConfig.option)
}
.scene-metrics {
height: 46px;
width: 384px;
margin: 0 auto;
@ -354,16 +355,18 @@ const option = computed(() => props.chartConfig.option)
.header-title {
position: absolute;
top: 0;
top: 3px;
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
.svg {

13
src/packages/components/Charts/MyComponents/PieCenter/index.vue
View File

@ -397,18 +397,19 @@ onMounted(() => {
}
}
.header-title{
.header-title {
position: absolute;
top: 0;
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
.svg {

4
src/packages/components/Charts/MyComponents/SceneDistribution/config.ts
View File

@ -6,8 +6,8 @@ import dataJson from './data.json'
export const option = {
dataset: dataJson.source,
title: '场景分布概况',
titleColor: '#E6F7FF',
titleSize: 18,
titleColor: '#eee',
titleSize: 16,
labelColor: '#E6F7FF',
labelSize: 16,
valueColor: '#ffffff',

64
src/packages/components/Charts/MyComponents/SceneDistribution/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="go-border-box">
<svg class="svg" viewBox="0 0 400 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg class="svg" viewBox="0 0 400 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="&#229;&#176;&#143;&#230;&#160;&#135;&#233;&#162;&#152;">
<g id="&#232;&#131;&#140;&#230;&#157;&#191;">
<path id="Vector" opacity="0.4"
@ -197,23 +197,26 @@
</svg>
<div class="go-scene-distribution">
<div class="header-title">场景分布概况</div>
<div class="content">
<div v-for="(item, index) in option.dataset" :key="index" class="scene-item">
<div class="item-title" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ item.title }}</div>
<div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label }}</div>
<div class="cube-container">
<img :src="getImageUrl(item.image)" class="cube-image" />
</div>
<div class="value-container">
<span class="item-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px', }">{{ item.value }}</span>
<div class="header-title">场景分布概况</div>
<div class="content">
<div v-for="(item, index) in option.dataset" :key="index" class="scene-item">
<div class="item-title" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ item.title
}}</div>
<div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label
}}</div>
<div class="cube-container">
<img :src="getImageUrl(item.image)" class="cube-image" />
</div>
<div class="value-container">
<span class="item-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px', }">{{
item.value }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@ -268,7 +271,7 @@ const getImageUrl = (name: string) => {
box-sizing: border-box;
.item-title {
margin-top:10px;
margin-top: 10px;
margin-bottom: 8px;
font-family: 'Microsoft YaHei', 'Arial', sans-serif;
line-height: 1.2;
@ -365,18 +368,19 @@ const getImageUrl = (name: string) => {
}
}
.header-title{
position: absolute;
top: 0;
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
.header-title {
position: absolute;
top: 0;
height: 45px;
line-height: 45px;
left: 80px;
white-space: nowrap;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
.svg {
@ -385,6 +389,4 @@ const getImageUrl = (name: string) => {
}
</style>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

6
src/packages/components/Charts/MyComponents/TopAlarms/config.ts
View File

@ -5,8 +5,8 @@ import dataJson from './data.json'
export const option = {
dataset: dataJson.source,
title: '未处置报警数TOP5',
titleColor: '#ffffff',
titleSize: 17,
titleColor: '#eee',
titleSize: 16,
rankColor: '#5AA1AD',
nameColor: '#eeeeee',
valueColor: '#eeeeee',
@ -15,7 +15,7 @@ export const option = {
dropdownOptions: ['当日', '当月', '当年'],
dropdownDefault: '当日',
iconColor: '#00E5FF',
letterSpacing: 1,
letterSpacing: 0.5,
paddingX: 40,
paddingY: -5,
isShowButton: false

8
src/packages/components/Charts/MyComponents/TopAlarms/index.vue
View File

@ -127,6 +127,14 @@ const handleSelect = (key: string) => {
padding: 0 20px 0 20px;
margin-left: 0px;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
}

8
src/packages/components/Charts/MyComponents/WorkshopScene/config.ts
View File

@ -24,14 +24,14 @@ export const FontStyleObject = {
export const option = {
dataset: dataJson.source,
title: '场景分布概况',
titleColor: '#ffffff',
titleSize: 20,
titleColor: '#eee',
titleSize: 16,
iconColor: '#00E5FF',
fontWeight: 'normal',
fontStyle: 'normal',
fontStyle: 'italic',
paddingX: 10,
paddingY: -12,
letterSpacing: 1,
letterSpacing: 0.5,
isShowButton: false,
linkColor: '#00E5FF',
linkText: '',

78
src/packages/components/Charts/MyComponents/WorkshopScene/index.vue
View File

@ -19,37 +19,43 @@
</div>
<div class="content">
<div class="scene-row" :style="{ backgroundImage: `url(${backgrounds[0]})` }">
<div class="scene-name-1" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">危化品库</div>
<div class="metrics-container">
<div class="metric-top-1">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262</div>
<div class="scene-name-1" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">
危化品库</div>
<div class="metrics-container">
<div class="metric-top-1">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
</div>
<div class="metric-top-2">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262
</div>
</div>
<div class="metric-top-2">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852
</div>
</div>
</div>
</div>
<div class="scene-row reverse" :style="{ backgroundImage: `url(${backgrounds[1]})` }">
<div class="scene-name-2" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">危废品库</div>
<div class="metrics-container">
<div class="metric-bottom-1">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852</div>
<div class="scene-name-2" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">
危废品库</div>
<div class="metrics-container">
<div class="metric-bottom-1">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
</div>
<div class="metric-bottom-2">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852
</div>
</div>
<div class="metric-bottom-2">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262
</div>
</div>
</div>
</div>
</div>
@ -99,7 +105,7 @@ const option = computed(() => props.chartConfig.option)
.title {
display: flex;
align-items: center;
margin-left: 35px;
margin-left: 35px;
margin-top: 5px;
.title-text {
@ -107,6 +113,13 @@ const option = computed(() => props.chartConfig.option)
display: flex;
align-items: center;
padding: 0 20px 0 20px;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
}
@ -140,7 +153,7 @@ const option = computed(() => props.chartConfig.option)
margin-right: 90px;
margin-left: 25px;
}
.metrics-container {
margin-right: auto;
margin-left: 0;
@ -196,7 +209,8 @@ const option = computed(() => props.chartConfig.option)
margin: 0 30px;
position: relative;
&::before, &::after {
&::before,
&::after {
content: '';
position: absolute;
left: -2px;
@ -205,9 +219,11 @@ const option = computed(() => props.chartConfig.option)
background-color: #00E5FF;
border-radius: 50%;
}
&::before {
top: -1px;
}
&::after {
bottom: -1px;
}
@ -241,23 +257,25 @@ const option = computed(() => props.chartConfig.option)
left: 9px; // Visually center the value under the text
}
}
.metric-top-1 {
position: relative;
left: -85px;
}
.metric-top-2 {
position: relative;
left: -30px;
}
.metric-bottom-1 {
position: relative;
left: 15px;
}
.metric-bottom-2 {
position: relative;
left:70px;
left: 70px;
}
}
</style>