|
|
@@ -15,12 +15,14 @@
|
|
|
|
|
|
<!-- Header -->
|
|
|
<div class="relative z-10 mb-2 flex-shrink-0">
|
|
|
- <div class="flex items-center justify-center border-b-2 border-cyan-500/30 pb-2 gap-8">
|
|
|
- <h1 class="text-xl font-bold text-cyan-300 flex-6 tracking-wider">
|
|
|
+ <div
|
|
|
+ class="flex items-center justify-center border-b-2 border-cyan-500/30 pb-2 gap-8 relative"
|
|
|
+ >
|
|
|
+ <h1 class="text-xl font-bold text-cyan-300 flex-6 tracking-wider relative z-10">
|
|
|
{{ dataInfo.groupName }}
|
|
|
</h1>
|
|
|
|
|
|
- <div class="flex flex-4 items-center gap-8 text-sm">
|
|
|
+ <div class="flex flex-4 items-center gap-8 text-sm relative z-10">
|
|
|
<div
|
|
|
style="border: 0.5px solid #085b77"
|
|
|
class="px-4 py-1.5 bg-cyan-500/10 border border-cyan-500/30 skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
|
|
|
@@ -54,11 +56,17 @@
|
|
|
<div class="panel h-full flex flex-col">
|
|
|
<!-- PSA核心参数 -->
|
|
|
<div class="flex-1 border-b border-cyan-500/30 pb-1 mb-1 min-h-0 flex flex-col">
|
|
|
- <div class="flex justify-between items-center panel-title mb-1 flex-shrink-0">
|
|
|
- <h4 class="text-sm">PSA核心参数</h4>
|
|
|
- <dv-decoration3 style="width: 100px; height: 20px" />
|
|
|
+ <div class="flex justify-between items-center mb-1 flex-shrink-0 relative">
|
|
|
+ <h4
|
|
|
+ class="text-sm text-cyan-300 absolute left-0 top-0 w-full h-6 flex items-center justify-center z-10"
|
|
|
+ >
|
|
|
+ PSA核心参数
|
|
|
+ </h4>
|
|
|
+ <div class="absolute inset-0 panel-title"></div>
|
|
|
</div>
|
|
|
|
|
|
+ <div class="panel-bottom"></div>
|
|
|
+
|
|
|
<div class="space-y-1 overflow-y-auto overflow-x-hidden flex-1 min-h-0">
|
|
|
<DataRow
|
|
|
v-for="item in psaData"
|
|
|
@@ -327,13 +335,6 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.grid-pattern {
|
|
|
- background-image: linear-gradient(rgba(6, 182, 212, 0.3) 1px, transparent 1px),
|
|
|
- linear-gradient(90deg, rgba(6, 182, 212, 0.3) 1px, transparent 1px);
|
|
|
- background-size: 50px 50px;
|
|
|
- animation: gridMove 20s linear infinite;
|
|
|
-}
|
|
|
-
|
|
|
.scan-line {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
@@ -438,4 +439,30 @@ onUnmounted(() => {
|
|
|
max-width: 100vw !important;
|
|
|
max-height: 100vh !important;
|
|
|
}
|
|
|
+
|
|
|
+.panel-title {
|
|
|
+ color: rgb(103, 232, 249);
|
|
|
+ font-size: 0.875rem;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 1px solid rgba(6, 182, 212, 0.3);
|
|
|
+ padding-bottom: 0.25rem;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background-image: url('@/assets/imgs/border-title.png');
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ height: 20px; /* 固定高度以适配图片 */
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+/* 底部兜底图 */
|
|
|
+.panel-bottom {
|
|
|
+ background-image: url('@/assets/imgs/bottom.png');
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ height: 10px;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 0.5rem;
|
|
|
+}
|
|
|
</style>
|
