lucas/go-view-fetch
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式优化

Browse Source
This commit is contained in:
Free-sss 2025-08-21 21:35:17 +08:00
parent 60d4e7ee69
commit 777c68a1a9
2 changed files with 2 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,6 @@ import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { TopAlarmsConfig } from './index'
import dataJson from './data.json'
import { chartInitConfig } from '@/settings/designSetting'
export const option = {
dataset: dataJson.source,
title: '未处置报警数TOP5',
@ -16,15 +15,14 @@ export const option = {
dropdownOptions: ['当日', '当月', '当年'],
dropdownDefault: '当日',
iconColor: '#00E5FF',
letterSpacing:2,
letterSpacing: 1,
paddingX: 40,
paddingY: -5,
isShowButton: false
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = TopAlarmsConfig.key
public chartConfig = TopAlarmsConfig
public option = option
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
}

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

@ -3,9 +3,6 @@
<div class="go-top-alarms">
<div class="header">
<div class="title">
<!-- <div class="title-prefix">
<svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
</div> -->
<div class="title-text">
<span :style="{
color: option.titleColor,
@ -122,25 +119,11 @@ const handleSelect = (key: string) => {
display: flex;
align-items: center;
// .title-prefix {
// width: 40px;
// height: 35px;
// background-image: linear-gradient(to bottom, #2e69e0, #1e55a7);
// clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
// display: flex;
// justify-content: center;
// align-items: center;
// .title-icon {
// font-size: 22px;
// }
// }
.title-text {
height: 35px;
display: flex;
align-items: center;
// background-image: linear-gradient(to bottom, #17325f, #0e2142);
padding: 0 20px 0 20px;
margin-left: 0px;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
@ -190,10 +173,8 @@ const handleSelect = (key: string) => {
'info value'
'bar bar';
align-items: center;
// margin-right: 10px;
padding: 0 10px;
gap: 6px 15px;
// background-color: antiquewhite;
.item-info {
grid-area: info;
@ -202,14 +183,12 @@ const handleSelect = (key: string) => {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// background-color: yellowgreen;
.rank {
font-weight: normal;
margin-right: 10px;
display: flex;
align-items: center;
// background-color: #fff;
.rank-icon {
display: inline-block;
@ -235,22 +214,18 @@ const handleSelect = (key: string) => {
text-align: right;
// font-size: 16px;
font-weight: normal;
// background-color: aquamarine;
}
.progress-bar-wrapper {
grid-area: bar;
width: calc(100% - 60px);
/* Adjust width to not overlap value */
position: relative;
left: 20px;
/* Align with name */
}
.progress-bar {
width: 100%;
height: 5px;
// background-color: rgba(42, 58, 91, 0.5);
border-radius: 1px;
overflow: hidden;