Add user profile page

src/assets/css/constants.scss

@@ -10,6 +10,7 @@ $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
 $font-secondary-color: #9E9E9E;
 $focus-color: #DDDDDD;
+$divide-color: rgba(204, 204, 204, 0.66);
 $border-color: rgba(204, 204, 204, 0.33);
 $url-color: rgba(102, 102, 102, .8);
 $url-active-color: #ccc;

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%;
+          }
+        }
+      }
+    }
+  }
+}

src/assets/svg/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1001.627381 394.106435a44.521739 44.521739 0 1 1-88.598261 0V208.228174l-398.914783 398.914783a54.049391 54.049391 0 1 1-76.577391-76.310261l397.579131-397.490087h-182.984348a44.78887 44.78887 0 1 1 0-89.043479h298.740869c1.335652 0 2.226087 0.534261 3.561739 0.623305s1.78087-0.623304 2.671305-0.623305a40.069565 40.069565 0 0 1 27.158261 11.620174c1.157565 0.667826 2.226087 1.513739 3.116521 2.448696 0.890435 0.979478 1.78087 2.092522 2.671305 3.161043a41.360696 41.360696 0 0 1 11.575652 27.158261c0 0.979478-0.445217 1.825391-0.445218 2.80487s0.445217 2.359652 0.445218 3.650783v298.963478zM111.192598 934.956522h712.347826v-400.695652h89.043479v400.695652a89.043478 89.043478 0 0 1-89.043479 89.043478H111.192598a89.043478 89.043478 0 0 1-89.043478-89.043478V222.608696a89.043478 89.043478 0 0 1 89.043478-89.043479h400.695652v89.043479H111.192598v712.347826z" /></svg>