完成首页UI

2025-05-01 16:17:51 +08:00
parent fcb7ef0f35
commit b50b8a1852
32 changed files with 614 additions and 32 deletions
--- a/src/pages/user.vue
+++ b/src/pages/user.vue
@@ -0,0 +1,96 @@
+<script setup>
+
+</script>
+
+<template>
+  <view class="user-container">
+    <navigator open-type="navigateBack" hover-class="back-hover" class="back-btn">返回</navigator>
+    <view class="user-header">
+      <view class="avatar-box">
+        <image class="avatar" src="/static/avatar.png" mode="aspectFill" />
+      </view>
+      <text class="username">用户名</text>
+    </view>
+    <view class="user-info">
+      <view class="info-item">
+        <text class="label">ID</text>
+        <text class="value">10001</text>
+      </view>
+      <view class="info-item">
+        <text class="label">注册时间</text>
+        <text class="value">2024-01-01</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.user-container {
+  padding: 2rem;
+}
+
+.user-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.avatar-box {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.avatar {
+  width: 100%;
+  height: 100%;
+}
+
+.username {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.user-info {
+  background-color: #ffffff;
+  border-radius: 10px;
+  padding: 1rem;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.8rem 0;
+  border-bottom: 1px solid #eee;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.label {
+  color: #666;
+}
+
+.value {
+  color: #333;
+}
+
+.back-btn {
+  position: fixed;
+  top: 2rem;
+  left: 2rem;
+  padding: 0.5rem 1rem;
+  background-color: #007AFF;
+  color: #fff;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+.back-hover {
+  opacity: 0.8;
+}
+</style>