前端代码

web/src/style/main.scss

@@ -0,0 +1,78 @@
+@use '@/style/iconfont.css';
+@use "./transition.scss";
+
+.html-grey {
+  filter: grayscale(100%);
+}
+
+.html-weakenss {
+  filter: invert(80%);
+}
+
+.kra-table-box {
+  @apply kra-surface;
+  .el-table {
+    @apply border-x border-t border-b-0 border-table-border border-solid -mx-[1px];
+    border-radius: var(--kra-radius, 0.75rem);
+  }
+}
+
+.kra-btn-list {
+  @apply mb-3 flex items-center flex-wrap gap-2;
+  .el-button+.el-button{
+    @apply ml-0 !important;
+  }
+  .el-upload{
+    .el-button{
+      @apply ml-0 !important;
+    }
+  }
+}
+
+#nprogress .bar {
+  background: #29d !important;
+}
+.kra-customer-icon {
+  @apply w-4 h-4;
+}
+
+::-webkit-scrollbar {
+  @apply hidden;
+}
+
+.kra-search-box {
+  @apply kra-surface pb-0;
+}
+
+.kra-content-box {
+  @apply kra-surface;
+}
+
+.kra-form-box {
+  @apply kra-surface;
+}
+
+/* 树节点：统一圆角 + 柔和悬浮/选中背景，观感与全站一致（作用于所有 el-tree）。
+   用插值输出 rgb()，避免 Sass 误解析 rgb() 内的 / */
+.el-tree {
+  background: transparent;
+  .el-tree-node__content {
+    height: 34px;
+    border-radius: var(--kra-radius, 8px);
+    transition: background-color 0.2s ease;
+    &:hover {
+      background: #{'rgb(var(--primary-color) / 0.08)'};
+    }
+  }
+}
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background: #{'rgb(var(--primary-color) / 0.15)'} !important;
+  color: rgb(var(--primary-color));
+}
+
+.el-dropdown {
+  outline: none;
+  * {
+    outline: none;
+  }
+}