init

2026-10-25 23:33:42 +08:00
parent c5a6ada6a6
commit 7ec6bd789f
23 changed files with 1473 additions and 110 deletions
@@ -0,0 +1,89 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family:
+    'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial,
+    sans-serif;
+  font-size: 14px;
+  color: $text-color-primary;
+  background-color: $bg-page;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: $color-primary;
+  text-decoration: none;
+}
+
+/* 页面容器：所有业务页面根节点统一使用 */
+.app-container {
+  padding: $container-padding;
+}
+
+/* 工具栏：搜索栏与操作按钮之间 */
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+/* 首屏 loading */
+.app-loading {
+  @include flex-center;
+
+  height: 100%;
+
+  &__spinner {
+    width: 36px;
+    height: 36px;
+    border: 3px solid $border-color;
+    border-top-color: $color-primary;
+    border-radius: 50%;
+    animation: app-loading-rotate 0.8s linear infinite;
+  }
+}
+
+@keyframes app-loading-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 滚动条 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(144, 147, 153, 0.3);
+  border-radius: 3px;
+}
+
+/* 页面切换动画 */
+.fade-transform-enter-active,
+.fade-transform-leave-active {
+  transition: all $transition-duration;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-12px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(12px);
+}