|
|
@@ -330,10 +330,10 @@ function render() {
|
|
|
animationDurationUpdate: 200,
|
|
|
animationEasingUpdate: 'linear',
|
|
|
grid: {
|
|
|
- left: '6%',
|
|
|
+ left: '5%',
|
|
|
top: '5%',
|
|
|
- right: '6%',
|
|
|
- bottom: '12%'
|
|
|
+ right: '5%',
|
|
|
+ bottom: '8%'
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
@@ -389,14 +389,6 @@ function render() {
|
|
|
selected: selectedDimension.value,
|
|
|
show: false
|
|
|
},
|
|
|
- // series: dimensions.value.map((item) => ({
|
|
|
- // name: item.name,
|
|
|
- // type: 'line',
|
|
|
- // smooth: true,
|
|
|
- // showSymbol: false,
|
|
|
- // color: item.color,
|
|
|
- // data: [] // 占位数组
|
|
|
- // }))
|
|
|
series: dimensions.value.map((item) => ({
|
|
|
name: item.name,
|
|
|
type: 'line',
|
|
|
@@ -675,7 +667,7 @@ onUnmounted(() => {
|
|
|
class="grid grid-cols-[260px_1fr] grid-rows-[80px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
|
|
|
>
|
|
|
<div
|
|
|
- class="grid-col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 border-solid px-6 flex items-center justify-between shrink-0"
|
|
|
+ class="grid-col-span-2 rounded-xl shadow-sm border border-gray-100 border-solid px-6 flex items-center justify-between shrink-0 bg-gradient-to-r from-blue-100 to-white"
|
|
|
>
|
|
|
<div class="flex items-center gap-4">
|
|
|
<div
|
|
|
@@ -715,14 +707,14 @@ onUnmounted(() => {
|
|
|
</div>
|
|
|
|
|
|
<el-scrollbar
|
|
|
- class="bg-white rounded-xl shadow-sm border border-gray-100 border-solid overflow-hidden"
|
|
|
+ class="rounded-xl shadow-sm border border-gray-100 border-solid overflow-hidden bg-gradient-to-b from-blue-100 to-white"
|
|
|
view-class="flex flex-col min-h-full"
|
|
|
v-loading="dimensionLoading"
|
|
|
>
|
|
|
<template v-for="citem in dimensionsContent" :key="citem.label">
|
|
|
<template v-if="citem.judgment ? Boolean(citem.value.length) : true">
|
|
|
<div
|
|
|
- class="sticky-title z-88 bg-white/95 flex justify-between items-center py-3 px-4 border-0 border-solid border-b border-gray-50"
|
|
|
+ class="sticky-title bg-blue-100 z-88 flex justify-between items-center py-3 px-4 border-0 border-solid"
|
|
|
>
|
|
|
<span class="font-bold text-sm text-gray-700! flex items-center gap-2">
|
|
|
<el-icon><component :is="citem.icon" /></el-icon>
|
|
|
@@ -741,7 +733,7 @@ onUnmounted(() => {
|
|
|
v-for="item in citem.value"
|
|
|
:key="item.identifier"
|
|
|
@click="handleClickSpec(item.name)"
|
|
|
- class="dimension-card group relative p-3 rounded-lg border border-solid bg-white border-gray-200 transition-all duration-300 cursor-pointer select-none"
|
|
|
+ class="dimension-card group relative p-3 rounded-lg border border-solid bg-transparent border-gray-300 transition-all duration-300 cursor-pointer select-none"
|
|
|
:class="{ 'is-active': selectedDimension[item.name] }"
|
|
|
:style="{
|
|
|
'--theme-color': item.color,
|
|
|
@@ -787,7 +779,7 @@ onUnmounted(() => {
|
|
|
</el-scrollbar>
|
|
|
|
|
|
<div
|
|
|
- class="bg-white rounded-xl shadow-sm border border-gray-100 border-solid p-4 flex flex-col"
|
|
|
+ class="rounded-xl shadow-sm border border-gray-100 border-solid p-4 flex flex-col bg-gradient-to-b from-blue-100 to-white"
|
|
|
>
|
|
|
<header class="flex items-center justify-between mb-4">
|
|
|
<h3 class="flex items-center gap-2">
|
|
|
@@ -821,7 +813,7 @@ onUnmounted(() => {
|
|
|
:style="{
|
|
|
'--theme-bg-hover': item.bgHover
|
|
|
}"
|
|
|
- class="w-8 h-full flex flex-col items-center justify-between py-2 gap-1 rounded-full group relative bg-gray-50 border border-solid border-transparent transition-all duration-300 hover:bg-[var(--theme-bg-hover)] hover-border-gray-200 hover:shadow-md cursor-pointer active:scale-95"
|
|
|
+ class="w-8 h-full flex flex-col items-center justify-between py-2 gap-1 rounded-full group relative bg-transparent border border-solid border-transparent transition-all duration-300 hover:bg-[var(--theme-bg-hover)] hover-border-gray-200 hover:shadow-md cursor-pointer active:scale-95"
|
|
|
@click="handleClickSpec(item.name)"
|
|
|
>
|
|
|
<span class="[writing-mode:sideways-lr] text-xs text-gray-400">{{ item.max }}</span>
|
|
|
@@ -859,32 +851,23 @@ onUnmounted(() => {
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
-/* Icon Fix */
|
|
|
:deep(.el-tag__content) {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 2px;
|
|
|
}
|
|
|
|
|
|
-/* Sticky Header */
|
|
|
.sticky-title {
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
}
|
|
|
|
|
|
-/*
|
|
|
- 核心样式：霓虹卡片效果
|
|
|
- 使用 CSS 变量实现动态颜色
|
|
|
-*/
|
|
|
-
|
|
|
-/* Hover 状态：背景微亮，边框变色 */
|
|
|
.dimension-card:hover {
|
|
|
background-color: var(--theme-bg-hover);
|
|
|
border-color: var(--theme-bg-active);
|
|
|
box-shadow: 0 4px 12px -2px rgb(0 0 0 / 5%);
|
|
|
}
|
|
|
|
|
|
-/* Active 状态：背景更亮，边框为主题色，带轻微发光投影 */
|
|
|
.dimension-card.is-active {
|
|
|
background-color: var(--theme-bg-active);
|
|
|
border-color: var(--theme-color);
|
|
|
@@ -893,7 +876,6 @@ onUnmounted(() => {
|
|
|
0 4px 12px -2px var(--theme-bg-active);
|
|
|
}
|
|
|
|
|
|
-/* 滚动条美化 */
|
|
|
:deep(.el-scrollbar__bar.is-vertical) {
|
|
|
right: 2px;
|
|
|
width: 4px;
|
Zimo