Переглянути джерело

chore(styles): 添加全局样式

1. 隐藏 tabs 边框
2. 绘制状态渐变圆点
3. 居中显示 loading
wangcong 2 місяців тому
батько
коміт
ab64334f60
1 змінених файлів з 49 додано та 0 видалено
  1. 49 0
      src/styles/global.scss

+ 49 - 0
src/styles/global.scss

@@ -79,6 +79,10 @@
   }
 }
 
+.hide-tabs-border > div.ant-tabs-nav::before {
+  border: none;
+}
+
 .button-tabs-card {
   font-size: 14px;
   font-weight: 500;
@@ -125,3 +129,48 @@
     }
   }
 }
+
+.status-dot {
+  // 定义控制变量 (可外部覆盖)
+  --status-dot-rgb: 103, 194, 58; // RGB 颜色分量 (绿色)
+
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  aspect-ratio: 1; // 保持 1:1 宽高比
+  background-color: rgba(var(--status-dot-rgb), 0.3);
+  border-radius: 50%;
+
+  // 同心圆通用样式
+  &::before,
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    aspect-ratio: 1;
+    content: '';
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  // 中间层
+  &::before {
+    width: 50%;
+    background-color: rgba(var(--status-dot-rgb), 0.6);
+  }
+
+  // 核心层
+  &::after {
+    width: 25%;
+    background-color: rgba(var(--status-dot-rgb), 1);
+  }
+}
+
+.center-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}