feat: first commit

2025-03-31 22:34:22 +08:00
commit d25187c9c8
390 changed files with 57031 additions and 0 deletions
--- a/src/fragments/profile/view/index.less
+++ b/src/fragments/profile/view/index.less
@ -0,0 +1,209 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.profile-view-fragment {
+  padding-bottom: 88rpx;
+  
+  &__header {
+    position: relative;
+    width: 100%;
+
+    &__swiper {
+      width: 100%;
+      height: 1080px;
+    }
+
+    &__swiper-item {
+      width: 100%;
+      height: 1080px;
+      position: relative;
+    }
+
+    &__cover {
+      width: 100%;
+      height: 100%;
+    }
+
+    &__cover-preview {
+      width: 70px;
+      height: 70px;
+      position: absolute;
+      top: 50%;
+      right: 50%;
+      transform: translate3d(50%, -50%, 0);
+    }
+
+    &__edit-video {
+      position: absolute;
+      top: 32px;
+      right: 24px;
+      width: 176px;
+      height: 56px;
+      line-height: 56px;
+      text-align: center;
+      font-size: 28px;
+      font-weight: 400;
+      color: #FFFFFF;
+      background: #0000005C;
+      border-radius: 48px;
+    }
+
+    &__banner {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 72px;
+      padding: 0 24px;
+      .flex-row();
+      justify-content: space-between;
+      font-size: 32px;
+      line-height: 48px;
+      font-weight: 500;
+      color: #FFFFFF;
+      box-sizing: border-box;
+      background: linear-gradient(349.14deg, rgba(0, 0, 0, 0.3) 13.62%, rgba(0, 0, 0, 0.195) 126.8%);
+    }
+
+    &__video-size {
+      font-size: 24px;
+      font-weight: 400;
+    }
+  }
+
+  &__body {
+    margin: 24px;
+    // 底部按钮栏高度 + 边距
+    margin-bottom: calc(24px + 24px);
+    // margin-bottom: calc(112px + 24px);
+    width: calc(100% - 48px);
+    background: #FFFFFF;
+    border-radius: 16px;
+  }
+
+  &__divider {
+    position: absolute;
+    left: 24px;
+    right: 24px;
+    bottom: 0;
+    height: 1px;
+    background: #E0E0E0;
+  }
+
+  &__basic-info {
+    position: relative;
+    padding: 40px;
+
+    &__name-container {
+      .flex-row();
+    }
+
+    &__name {
+      font-size: 36px;
+      line-height: 48px;
+      font-weight: 500;
+      color: @blColor;
+    }
+
+    &__edit {
+      font-size: 28px;
+      line-height: 32px;
+      font-weight: 400;
+      color: @blHighlightColor;
+      margin-left: 8px;
+    }
+
+    &__content {
+      font-size: 24px;
+      line-height: 40px;
+      font-weight: 400;
+      color: @blColor;
+      margin-top: 12px;
+    }
+  }
+
+  &__info-group {
+    position: relative;
+    width: 100%;
+    padding: 40px;
+    box-sizing: border-box;
+  }
+
+  &__info-group__header {
+    .flex-row();
+    justify-content: space-between;
+
+    &__title {
+      font-size: 28px;
+      line-height: 40px;
+      font-weight: 500;
+      color: @blColor;
+    }
+
+    &__edit {
+      font-size: 28px;
+      line-height: 32px;
+      font-weight: 400;
+      color: @blHighlightColor;
+    }
+  }
+
+  &__info-group__items {
+    .flex-row();
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  &__info-group__item {
+    width: 50%;
+    margin-top: 32px;
+
+    &.full-line {
+      width: 100%;
+    }
+
+    &__title {
+      font-size: 24px;
+      line-height: 36px;
+      font-weight: 400;
+      color: @blColorG1;
+    }
+
+    &__value {
+      font-size: 28px;
+      line-height: 40px;
+      font-weight: 500;
+      color: @blColor;
+      margin-top: 4px;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+  }
+
+  &__footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background: #FFFFFF;
+    padding: 12px 32px;
+    box-shadow: 0px -4px 20px 0px #00000014;
+    box-sizing: border-box;
+
+    &__buttons {
+      .flex-row();
+
+      &__share {
+        .button(@height: 88px, @fontSize: 32px, @fontWeight: 500, @borderRadius: 48px);
+        flex: 1 1;
+        color: @blHighlightColor;
+        background: @blHighlightBg;
+      }
+
+      &__manager {
+        .button(@height: 88px, @fontSize: 32px, @fontWeight: 500, @borderRadius: 48px);
+        flex: 2 2;
+        margin-left: 32px;
+      }
+    }
+
+  }
+}