登录完成

web/src/App.vue

@@ -16,21 +16,91 @@ body {
   margin: 0;
 }
 
+@each $padMar, $pm in (mar:margin, pad:padding) {
+  @each $v in (8, 10, 16, 20, 32, 48, 56, 64, 80) {
+    @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
+      .#{$padMar}-#{$pos+$v} {
+        #{$pm}-#{$p}: #{$v}px
+      }
+    }
+    .#{$padMar}-#{$v} {
+      #{$pm}: #{$v}px
+    }
+    //纵向
+    .#{$padMar}-v#{$v} {
+      #{$pm}-top: #{$v}px;
+      #{$pm}-bottom: #{$v}px;
+    }
+    //横向
+    .#{$padMar}-h#{$v} {
+      #{$pm}-left: #{$v}px;
+      #{$pm}-right: #{$v}px;
+    }
+  }
+}
+
+@each $where in (sticky, fixed) {
+  @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
+    .#{$where}-#{$pos} {
+      position: fixed;
+      #{$p}: 0;
+      z-index: 202301031019;
+      width: 100%;
+    }
+  }
+}
+
+
+.flex {
+  display: flex;
+
+  &.spb {
+    justify-content: space-between;
+  }
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
+  &.column {
+    flex-direction: column;
+  }
+
+  &.start {
+    align-items: flex-start;
+  }
+
+  &.center {
+    align-items: center;
+  }
+}
+
 .fill {
   flex: 1;
   min-width: 0;
   min-height: 0;
 }
 
-.color-a2v1c5 {
-  color: #A2B1C5;
+.shrink {
+  flex-shrink: 0;
 }
 
-.mar-r30 {
-  margin-right: 30px;
+.avatar {
+  width: 40px;
+  height: 40px;
+
+  &.circle {
+    overflow: hidden;
+    border-radius: 50%;
+  }
 }
 
-.pad-w10 {
-  padding: 0 10px;
+.rtl {
+  direction: rtl;
 }
+
+.sub {
+  color: #999;
+}
+
 </style>