我的页面

2025-09-11 17:38:24 +08:00
parent a0f751c2c0
commit 04833ef1bc
7 changed files with 366 additions and 7 deletions
@@ -0,0 +1,143 @@
+<template>
+  <view class="user-avatar-card-ctn">
+    <view class="upper-box">
+      <view class="left-box">
+        <view class="ss-flex" style="align-items: flex-end">
+          <view style="font-size: 36rpx; margin-right: 12rpx">{{
+            userInfo?.nickname || nickname
+          }}</view>
+          <view style="color: #999999; font-size: 24rpx">检测时间：2024-08-09 15:51</view>
+        </view>
+        <view class="ss-flex user-info-block">
+          <view class="user-info-item">女</view>
+          <view class="user-info-item">31岁</view>
+          <view class="user-info-item">168cm</view>
+          <view class="user-info-item">50kg</view>
+        </view>
+      </view>
+      <view class="right-box">
+        <image
+          class="avatar-img"
+          :src="
+            isLogin && userInfo.avatar
+              ? sheep.$url.cdn(userInfo.avatar)
+              : sheep.$url.static('/static/img/shop/default_avatar.png')
+          "
+          mode="aspectFill"
+          @tap="sheep.$router.go('/pages/user/info')"
+        >
+        </image>
+      </view>
+    </view>
+    <view class="below-box">
+      <ul class="attr-ul ss-flex">
+        <li class="attr-li">
+          <view class="label">脸型</view>
+          <view class="value">标准脸</view>
+          <view class="line" />
+        </li>
+        <li class="attr-li">
+          <view class="label">肤色</view>
+          <view class="value">冷肤色</view>
+          <view class="line" />
+        </li>
+        <li class="attr-li">
+          <view class="label">色彩偏好</view>
+          <view class="value">中高明度</view>
+          <view class="line" />
+        </li>
+        <li class="attr-li">
+          <view class="label">色彩定位</view>
+          <view class="value">中高纯度</view>
+        </li>
+      </ul>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import sheep from '@/sheep';
+
+  // 是否登录
+  const isLogin = computed(() => sheep.$store('user').isLogin);
+
+  // 用户信息
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+</script>
+
+<style lang="scss" scoped>
+  .user-avatar-card-ctn {
+    width: 100%;
+    background: #000;
+    color: #fff;
+    padding: 36rpx 24rpx;
+    box-sizing: border-box;
+    .upper-box {
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .left-box {
+        .user-info-block {
+          margin-top: 24rpx;
+          font-size: 24rpx;
+          .user-info-item {
+            padding: 4rpx 8rpx;
+            background: linear-gradient(
+              to right,
+              rgba(255, 255, 255, 0.4),
+              rgba(255, 255, 255, 0.2)
+            );
+            margin-right: 10rpx;
+            border-radius: 6rpx;
+          }
+        }
+      }
+
+      .right-box {
+        width: 144rpx;
+        height: 144rpx;
+        border-radius: 50%;
+
+        .avatar-img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .below-box {
+      width: 100%;
+      margin-top: 48rpx;
+      .attr-ul {
+        width: 100%;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        .attr-li {
+          width: 25%;
+          position: relative;
+          .label {
+            color: #999999;
+            font-size: 24rpx;
+          }
+          .value {
+            color: #fff;
+            font-size: 32rpx;
+            margin-top: 16rpx;
+          }
+          .line {
+            width: 1rpx;
+            height: 100%;
+            background: #fff;
+            position: absolute;
+            right: 30rpx;
+            top: 0;
+          }
+        }
+      }
+    }
+  }
+</style>