Add user profile page

2024-02-22 17:59:42 +08:00
parent 380b82f9a9
commit d2e0f32f5b
8 changed files with 550 additions and 8 deletions
--- a/src/assets/css/pages/user/index.scss
+++ b/src/assets/css/pages/user/index.scss
@@ -0,0 +1,135 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=user] .root-content {
+  padding: {
+    top: 80px;
+    left: 30px;
+    right: 30px;
+    bottom: 30px;
+  };
+
+  .card-box {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    align-items: center;
+    min-width: 900px;
+    padding-bottom: 20px;
+
+    > :not(:first-child) {
+      padding: {
+        left: 60px;
+        right: 60px;
+      };
+    }
+
+    .divide {
+      height: 1px;
+      width: calc(100% - 120px);
+      background-color: constants.$divide-color;
+      margin: {
+        left: 60px;
+        right: 60px;
+      };
+    }
+
+    .info {
+      margin-left: 40px;
+      transform: translateY(-40px);
+
+      > * {
+        flex: 0 0 auto;
+      }
+
+      .avatar-box {
+        background-color: white;
+        padding: 4px;
+        border-radius: 50%;
+        box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
+
+        .avatar {
+          background-color: transparent !important;
+        }
+      }
+
+      .info-name {
+        margin: {
+          top: 20px;
+          left: 24px;
+        };
+        justify-content: center;
+
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .nickname {
+          font-size: 2.4em;
+          font-weight: bolder;
+          color: constants.$production-color;
+        }
+
+        .url {
+          > span {
+            margin-left: 8px;
+          }
+        }
+      }
+    }
+
+    .title {
+      align-items: center;
+
+      .content {
+        padding: {
+          bottom: 30px;
+        };
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .text {
+          font-size: 1.6em;
+          font-weight: bolder;
+        }
+
+        .operation {
+          gap: 10px;
+        }
+      }
+    }
+
+    .table {
+      gap: 24px;
+
+      padding: {
+        top: 30px;
+        bottom: 20px;
+      };
+
+      .row {
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .label {
+          font-size: 1.4em;
+          font-weight: bolder;
+          width: 400px;
+        }
+
+        .input {
+          width: 400px;
+
+          > * {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}