feat: 添加移动端页面组件和图片资源

pages/mobile/user_info/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="user-info-container">
+    <div class="info-item">
+      <div class="label">头像</div>
+      <div class="value">
+        <img :src="userInfo.avatar" alt="User Avatar" class="avatar" />
+      </div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">用户名</div>
+      <div class="value">{{ userInfo.username }}</div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">真实姓名</div>
+      <div class="value">
+        {{ userInfo.realName }}
+        <span v-if="userInfo.verified" class="verified-badge">已认证</span>
+      </div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">手机号</div>
+      <div class="value">{{ userInfo.phone }}</div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">邮箱</div>
+      <div class="value">{{ userInfo.email }}</div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">城市</div>
+      <div class="value">{{ userInfo.city }}</div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">技能标签</div>
+      <div class="value">
+        <span v-for="(tag, index) in userInfo.tags" :key="index" class="tag">
+          #{{ tag }}
+        </span>
+      </div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">技能证书</div>
+      <div class="value certificates">
+        <img
+          v-for="(cert, index) in userInfo.certificates"
+          :key="index"
+          :src="cert"
+          alt="Certificate"
+          class="certificate-image"
+        />
+      </div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">个人简介</div>
+      <div class="value bio">{{ userInfo.bio }}</div>
+    </div>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+import { reactive } from 'vue'
+
+const userInfo = reactive({
+  avatar: "/static/images/avater2.png",
+  username: "王刚",
+  realName: "王刚",
+  verified: true,
+  phone: "138******96",
+  email: "651234754@qq.com",
+  city: "重庆",
+  tags: ["五金工具", "电子产品"],
+  certificates: [
+    "/static/images/cert1.jpg",
+    "/static/images/cert2.jpg",
+    "/static/images/cert3.jpg",
+  ],
+  bio: "你好！我是专注于工业设计和机械设计领域...",
+})
+</script>
+
+<style scoped>
+.user-info-container {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.info-item {
+  display: flex;
+  padding: 12px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.label {
+  width: 80px;
+  color: #666;
+  font-size: 14px;
+}
+
+.value {
+  flex: 1;
+  text-align: right;
+  color: #333;
+  font-size: 14px;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.verified-badge {
+  background-color: #4080ff;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  margin-left: 10px;
+}
+
+.tag {
+  margin-left: 8px;
+  color: #4080ff;
+}
+
+.certificates {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.certificate-image {
+  width: 60px;
+  height: 80px;
+  margin-left: 10px;
+  object-fit: cover;
+}
+
+.bio {
+  text-align: left;
+  line-height: 1.5;
+}
+</style>