diff --git a/assets/images/activity1.png b/assets/images/activity1.png
new file mode 100644
index 0000000..beaa1f5
Binary files /dev/null and b/assets/images/activity1.png differ
diff --git a/assets/images/activity2.png b/assets/images/activity2.png
new file mode 100644
index 0000000..c0225dd
Binary files /dev/null and b/assets/images/activity2.png differ
diff --git a/assets/images/avater2 copy.png b/assets/images/avater2 copy.png
new file mode 100644
index 0000000..1b54ddb
Binary files /dev/null and b/assets/images/avater2 copy.png differ
diff --git a/assets/images/banner copy.png b/assets/images/banner copy.png
new file mode 100644
index 0000000..6fed8e8
Binary files /dev/null and b/assets/images/banner copy.png differ
diff --git a/assets/images/bg-yy.png b/assets/images/bg-yy.png
new file mode 100644
index 0000000..3f169b6
Binary files /dev/null and b/assets/images/bg-yy.png differ
diff --git a/assets/images/crown.png b/assets/images/crown.png
new file mode 100644
index 0000000..4f6ceb1
Binary files /dev/null and b/assets/images/crown.png differ
diff --git a/assets/images/faxian.png b/assets/images/faxian.png
new file mode 100644
index 0000000..e3a2fe1
Binary files /dev/null and b/assets/images/faxian.png differ
diff --git a/assets/images/info copy.png b/assets/images/info copy.png
new file mode 100644
index 0000000..e46a65a
Binary files /dev/null and b/assets/images/info copy.png differ
diff --git a/assets/images/info.png b/assets/images/info.png
new file mode 100644
index 0000000..e46a65a
Binary files /dev/null and b/assets/images/info.png differ
diff --git a/assets/images/my_attention.png b/assets/images/my_attention.png
new file mode 100644
index 0000000..cf67522
Binary files /dev/null and b/assets/images/my_attention.png differ
diff --git a/assets/images/my_collect.png b/assets/images/my_collect.png
new file mode 100644
index 0000000..4d52865
Binary files /dev/null and b/assets/images/my_collect.png differ
diff --git a/assets/images/my_download.png b/assets/images/my_download.png
new file mode 100644
index 0000000..4703622
Binary files /dev/null and b/assets/images/my_download.png differ
diff --git a/assets/images/my_release.png b/assets/images/my_release.png
new file mode 100644
index 0000000..ef1836e
Binary files /dev/null and b/assets/images/my_release.png differ
diff --git a/assets/images/pingdao.png b/assets/images/pingdao.png
new file mode 100644
index 0000000..d95f718
Binary files /dev/null and b/assets/images/pingdao.png differ
diff --git a/assets/images/shouye.png b/assets/images/shouye.png
new file mode 100644
index 0000000..e3feaf5
Binary files /dev/null and b/assets/images/shouye.png differ
diff --git a/assets/images/talent-detail-bg.png b/assets/images/talent-detail-bg.png
new file mode 100644
index 0000000..6fd5aa3
Binary files /dev/null and b/assets/images/talent-detail-bg.png differ
diff --git a/assets/images/technicalCertificates.png b/assets/images/technicalCertificates.png
new file mode 100644
index 0000000..e72f51a
Binary files /dev/null and b/assets/images/technicalCertificates.png differ
diff --git a/assets/images/wode.png b/assets/images/wode.png
new file mode 100644
index 0000000..7bb41a0
Binary files /dev/null and b/assets/images/wode.png differ
diff --git a/components/m/RecommendItem/index.vue b/components/m/RecommendItem/index.vue
new file mode 100644
index 0000000..31518f3
--- /dev/null
+++ b/components/m/RecommendItem/index.vue
@@ -0,0 +1,181 @@
+<template>
+  <view class="design-list">
+    <view class="design-item" v-for="(item, index) in items" :key="index">
+      <view class="design-preview">
+        <image :src="item.image" mode="aspectFit"></image>
+      </view>
+      <view class="design-info">
+        <view class="design-title">{{ item.title }}</view>
+        <view class="design-author">by:{{ item.author }}</view>
+
+        <view class="design-stats">
+          <view class="stat-item">
+            <text class="iconfont">👁</text>
+            <text>{{ item.views }}</text>
+          </view>
+          <view class="stat-item">
+            <text class="iconfont">👍</text>
+            <text>{{ item.likes }}</text>
+          </view>
+          <view class="stat-item">
+            <text class="iconfont">💬</text>
+            <text>{{ item.comments }}</text>
+          </view>
+        </view>
+      </view>
+      <view class="design-action">
+        <button class="view-btn">查看</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "RecommendItem",
+  props: {
+    currentTab: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      items: [
+        {
+          id: 1,
+          title: "高压细水雾灭火推车描述",
+          author: "赵其",
+          image: "/static/images/activity1.png",
+          views: 128,
+          likes: 16,
+          comments: 35,
+          url: "/pages/drawings/detail?id=1",
+        },
+        {
+          id: 2,
+          title: "高压细水雾灭火推车描述",
+          author: "赵其",
+          image: "/static/images/activity2.png",
+          views: 128,
+          likes: 16,
+          comments: 35,
+          url: "/pages/drawings/detail?id=2",
+        },
+        {
+          id: 1,
+          title: "室内CAD模型设计室内CAD模型设计",
+          author: "张泽",
+          image: "/static/images/activity1.png",
+          views: 95,
+          likes: 12,
+          comments: 28,
+          url: "/pages/models/detail?id=1",
+        },
+        {
+          id: 1,
+          title: "CAD设计规范文档",
+          author: "李华",
+          image: "/static/images/activity2.png",
+          views: 156,
+          likes: 23,
+          comments: 42,
+          url: "/pages/documents/detail?id=1",
+        },
+      ],
+    };
+  },
+  methods: {
+    viewDetail(item) {
+      console.log("View detail for:", item.title);
+      uni.navigateTo({
+        url: item.url,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// 变量定义
+$primary-color: #007aff;
+$text-color: #333;
+$secondary-text: #666;
+$light-text: #999;
+$bg-color: #f0f4f9;
+$white: #fff;
+$border-color: #eee;
+$border-radius: 15rpx;
+.design-list {
+  //   padding: 10rpx 20rpx;
+
+  .design-item {
+    display: flex;
+    margin-bottom: 20rpx;
+    background-color: $white;
+    border-radius: $border-radius;
+    border: 1px solid $border-color;
+    padding: 17rpx 10rpx;
+    box-sizing: border-box;
+    position: relative;
+    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+
+    .design-preview {
+      width: 220rpx;
+      height: 168rpx;
+      overflow: hidden;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .design-info {
+      flex: 1;
+      padding: 0 20rpx;
+
+      .design-title {
+        font-size: 27rpx;
+        margin-bottom: 10rpx;
+      }
+
+      .design-author {
+        font-size: 25rpx;
+        color: $light-text;
+        margin-bottom: 30rpx;
+      }
+    }
+
+    .design-stats {
+      display: flex;
+
+      .stat-item {
+        display: flex;
+        align-items: center;
+        margin-right: 20rpx;
+        font-size: 24rpx;
+        color: $light-text;
+
+        .iconfont {
+          margin-right: 5rpx;
+        }
+      }
+    }
+
+    .design-action {
+      position: absolute;
+      right: 20rpx;
+      bottom: 20rpx;
+
+      .view-btn {
+        background-color: $primary-color;
+        color: $white;
+        font-size: 25rpx;
+        padding: 0rpx 25rpx !important;
+        border-radius: 5rpx;
+      }
+    }
+  }
+}
+</style>
diff --git a/components/m/detail-components/Works.vue b/components/m/detail-components/Works.vue
new file mode 100644
index 0000000..79cebea
--- /dev/null
+++ b/components/m/detail-components/Works.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="works">
+    <RecommendList />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'Works' })
+import RecommendList from "~/components/m/RecommendItem/index.vue";
+</script>
+
+<style lang="scss" scoped>
+.works {
+  width: 100%;
+}
+</style>
diff --git a/components/m/detail-components/certificates.vue b/components/m/detail-components/certificates.vue
new file mode 100644
index 0000000..f32905f
--- /dev/null
+++ b/components/m/detail-components/certificates.vue
@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="cert-item"
+    v-for="(cert, index) in talentInfo.certificates"
+    :key="index"
+  >
+    <div
+      v-if="index !== talentInfo.certificates.length - 1"
+      class="border-left"
+    ></div>
+    <div class="cert-dot"></div>
+    <div class="cert-info">
+      <span class="cert-year">{{ cert.year }}</span>
+      <span class="cert-desc">{{ cert.description }}</span>
+    </div>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'Certificates' })
+interface Certificate { year: string; description: string }
+interface TalentInfo { certificates: Certificate[] }
+defineProps<{ talentInfo: TalentInfo }>()
+</script>
+
+<style lang="scss" scoped>
+.border-left {
+  width: 1px;
+  height: calc(100%);
+  border-left: 2px dotted #e6f0ff;
+  position: absolute;
+  left: 7rpx;
+  top: 0;
+}
+// 证书列表
+.cert-item {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+}
+
+.cert-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background-color: #1a65ff;
+  //   margin-top: 12rpx;
+  margin-right: 20rpx;
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.cert-info {
+  flex: 1;
+  margin-bottom: 11rpx;
+  margin-top: -10rpx;
+  padding-bottom: 32rpx;
+}
+
+.cert-year {
+  font-size: 25rpx;
+  font-weight: bold;
+  color: #333;
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.cert-desc {
+  font-size: 21rpx;
+  color: #666;
+}
+</style>
diff --git a/components/m/detail-components/technicalCertificates.vue b/components/m/detail-components/technicalCertificates.vue
new file mode 100644
index 0000000..5ace29c
--- /dev/null
+++ b/components/m/detail-components/technicalCertificates.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="flex">
+    <div
+      class="cert-technicalCertificates"
+      v-for="(cert, index) in 10"
+      :key="index"
+    >
+      <img
+        class="cert-image"
+        :src="`https://picsum.photos/90/90?random=${index}`"
+        alt="certificate"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'TechnicalCertificates' })
+</script>
+
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 50rpx;
+}
+.cert-technicalCertificates {
+  width: 135rpx;
+  height: 191rpx;
+  .cert-image {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/components/m/home-components/ActivityBanner.vue b/components/m/home-components/ActivityBanner.vue
new file mode 100644
index 0000000..b938db4
--- /dev/null
+++ b/components/m/home-components/ActivityBanner.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="activity-section">
+    <div class="section-header">
+      <span class="section-title">最新活动</span>
+      <a href="/mobile/activity/list" class="view-all">
+        <span>查看全部</span>
+        <span class="chevron">›</span>
+      </a>
+    </div>
+
+    <div class="activity-scroll">
+      <div class="activity-container">
+        <div
+          class="activity-card"
+          v-for="(item, index) in activityList"
+          :key="index"
+          @click="goToActivity(item)"
+          :style="{ marginRight: index === activityList.length - 1 ? '40rpx' : '20rpx' }"
+        >
+          <img :src="item.image" class="activity-image" alt="activity" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from 'vue-router'
+  import { ref } from 'vue'
+  import activity1 from '~/assets/images/activity1.png'
+  import activity2 from '~/assets/images/activity2.png'
+  import activity3 from '~/assets/images/activity2.png'
+
+  const router = useRouter()
+  const activityList = ref([
+    { id: 1, title: '积分兑换有好礼', image: activity1, url: '/mobile/activity/detail?id=1' },
+    { id: 2, title: 'CAD高效学习', image: activity2, url: '/mobile/activity/detail?id=2' },
+    { id: 3, title: '学习有奖', image: activity3, url: '/mobile/activity/detail?id=3' },
+  ])
+
+  function goToActivity(item: { url: string }) {
+    router.push(item.url)
+  }
+</script>
+
+<style lang="scss" scoped>
+  .activity-section {
+    margin: 21.53rpx 0;
+    //   padding: 0 20rpx;
+  }
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20rpx;
+  }
+
+  .section-title {
+    font-size: 31rpx;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .view-all {
+    display: flex;
+    align-items: center;
+    font-size: 24rpx;
+    color: #666;
+    text-decoration: none;
+  }
+  .view-all .chevron {
+    margin-left: 4rpx;
+    font-size: 20rpx;
+  }
+
+  .activity-scroll {
+    width: 100%;
+    overflow-x: auto;
+    padding-left: 20rpx; // 左侧padding，与section对齐
+    margin-left: -20rpx; // 抵消父容器的padding
+  }
+
+  .activity-container {
+    display: inline-flex;
+    padding: 10rpx 0; // 留出阴影空间
+  }
+
+  .activity-card {
+    width: 330rpx;
+    height: 160rpx;
+    border-radius: 12rpx;
+    overflow: hidden;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+    transition: all 0.2s;
+
+    &:active {
+      transform: scale(0.98);
+      opacity: 0.9;
+    }
+  }
+
+  .activity-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+</style>
diff --git a/components/m/home-components/RecommendBanner.vue b/components/m/home-components/RecommendBanner.vue
new file mode 100644
index 0000000..b07bb2c
--- /dev/null
+++ b/components/m/home-components/RecommendBanner.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="recommend-section">
+    <div class="tab-navigation">
+      <div
+        v-for="(tab, index) in tabs"
+        :key="index"
+        class="tab-item"
+        :class="{ active: currentTab === index }"
+        @click="switchTab(index)"
+      >
+        <span>{{ tab.title }}</span>
+      </div>
+      <button class="view-all" @click="viewAll">
+        <span>查看全部</span>
+        <span class="icon-right">›</span>
+      </button>
+    </div>
+
+    <!-- 内容区域 -->
+    <recommend-list />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const currentTab = ref(0)
+const tabs = ref([
+  { title: '推荐图纸', type: 'drawings' },
+  { title: '推荐模型', type: 'models' },
+  { title: '推荐文本', type: 'documents' },
+])
+
+function switchTab(index: number) {
+  currentTab.value = index
+}
+
+function viewAll() {
+  const type = tabs.value[currentTab.value].type
+  router.push(`/mobile/${type}/list`)
+}
+</script>
+
+<style lang="scss" scoped>
+.recommend-section {
+  //   padding: 0 20rpx;
+  //   margin: 30rpx 0 50rpx;
+}
+
+.tab-navigation {
+  display: flex;
+  align-items: center;
+  margin-bottom: 25rpx;
+}
+
+.tab-item {
+  padding: 8rpx 0;
+  margin-right: 40rpx;
+  font-size: 29rpx;
+  color: #333;
+  position: relative;
+  transition: all 0.3s ease;
+
+  &.active {
+    color: #2970ff;
+    position: relative;
+
+    &::after {
+      content: "";
+      background-image: url("@/static/images/bg-yy.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      position: absolute;
+      bottom: 0rpx;
+      left: 0;
+      width: 100%;
+      height: 8px;
+    }
+  }
+}
+
+.view-all {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  font-size: 24rpx;
+  color: #666;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.view-all .icon-right {
+  margin-left: 4rpx;
+  font-size: 20rpx;
+}
+</style>
diff --git a/components/m/home-components/SearchBar.vue b/components/m/home-components/SearchBar.vue
new file mode 100644
index 0000000..f66d88c
--- /dev/null
+++ b/components/m/home-components/SearchBar.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="search-container">
+    <div class="search-input">
+      <span class="icon">🔍</span>
+      <input
+        v-model="searchValue"
+        type="text"
+        class="input"
+        placeholder="搜一搜"
+        @keyup.enter="onSearch"
+      />
+    </div>
+    <button class="search-btn" @click="onSearch">
+      <img src="~/assets/images/info.png" alt="info" />
+    </button>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const searchValue = ref('')
+function onSearch() {
+  console.log('Search for:', searchValue.value)
+}
+</script>
+
+<style scoped lang="scss">
+.search-container {
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.search-input {
+  display: flex;
+  align-items: center;
+  background: #efeff1;
+  border-radius: 32rpx;
+  padding: 0 22.11rpx;
+  flex: 1;
+}
+.search-input .icon { margin-right: 8px; }
+.search-input .input {
+  flex: 1;
+  height: 64rpx;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+.search-btn {
+  margin-left: 19.44rpx;
+  width: 43.75rpx;
+  height: 43.75rpx;
+  background-color: #fff;
+  border: none;
+  padding: 0;
+}
+.search-btn img {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/components/m/nav-bar/index.vue b/components/m/nav-bar/index.vue
new file mode 100644
index 0000000..86f15b9
--- /dev/null
+++ b/components/m/nav-bar/index.vue
@@ -0,0 +1,201 @@
+<template>
+  <!-- 顶部导航栏 -->
+  <view class="nav-bar">
+    <view class="nav-item active">全部</view>
+    <view class="nav-item">机械设备</view>
+    <view class="nav-item">零部件模型</view>
+    <view class="nav-item">交通运输</view>
+    <view class="nav-item">电子产品</view>
+    <view class="expand-btn" @tap="toggleCategoryMenu">
+      <text class="expand-icon">≡</text>
+    </view>
+  </view>
+
+  <!-- 全部分类浮窗 -->
+  <view
+    class="category-popup"
+    v-if="showCategoryMenu"
+    @tap.stop="closeCategoryMenu"
+  >
+    <view class="popup-content" @tap.stop>
+      <view class="category-list">
+        <view
+          :key="index"
+          v-for="(section, index) in categoryList"
+          class="category-item"
+          @tap="selectCategory(section)"
+        >
+          {{ section.name }}
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 筛选选项 -->
+  <view class="filter-bar">
+    <view class="filter-item"> 软件分类 <text class="icon-down">∨</text> </view>
+    <view class="filter-item"> 图纸类型 <text class="icon-down">∨</text> </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showCategoryMenu: false,
+      categoryList: [
+        { name: "机械设备", active: false },
+        { name: "零部件模型", active: false },
+        { name: "交通运输", active: false },
+        { name: "电子产品", active: false },
+        { name: "机械设备", active: false },
+        { name: "零部件模型", active: false },
+        { name: "交通运输", active: false },
+        { name: "电子产品", active: false },
+        { name: "机械设备", active: false },
+        { name: "零部件模型", active: false },
+        { name: "交通运输", active: false },
+        { name: "电子产品", active: false },
+      ],
+    };
+  },
+  methods: {
+    toggleCategoryMenu() {
+      this.showCategoryMenu = !this.showCategoryMenu;
+    },
+    closeCategoryMenu() {
+      this.showCategoryMenu = false;
+    },
+    selectCategory(section) {
+      // 演示用：显示toast提示
+    },
+  },
+  onLoad(options) {
+    console.log(options);
+    // 监听点击事件，点击页面空白处关闭菜单
+    uni.$on("page-click", () => {
+      if (this.showCategoryMenu) {
+        this.closeCategoryMenu();
+      }
+    });
+  },
+  onUnload() {
+    // 移除事件监听
+    uni.$off("page-click");
+  },
+};
+</script>
+
+<style scoped lang="scss">
+// 变量定义
+$primary-color: #007aff;
+$text-color: #333;
+$secondary-text: #666;
+$light-text: #999;
+$bg-color: #fff;
+$white: #fff;
+$border-color: #eee;
+$border-radius: 10rpx;
+$mask-bg: rgba(0, 0, 0, 0.5);
+.nav-bar {
+  display: flex;
+  background-color: $white;
+  padding: 10rpx 0;
+  position: relative;
+  padding-right: 60rpx;
+
+  .nav-item {
+    flex: 1;
+    text-align: center;
+    font-size: 25rpx;
+    padding: 15rpx 0;
+
+    &.active {
+      color: $primary-color;
+      font-weight: bold;
+    }
+  }
+  .expand-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .expand-icon {
+      font-size: 40rpx;
+      color: $text-color;
+    }
+  }
+}
+
+// 分类浮窗样式
+.category-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $mask-bg;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .popup-content {
+    width: 100%;
+    max-height: 80vh;
+    background-color: $white;
+    animation: slideDown 0.3s ease;
+    overflow-y: auto;
+
+    .category-list {
+      padding: 20rpx;
+      display: flex;
+      flex-wrap: wrap;
+
+      .category-item {
+        padding: 8rpx 12.94rpx;
+        box-sizing: border-box;
+        margin-right: 3%;
+        margin-bottom: 20rpx;
+        text-align: center;
+        font-size: 25rpx;
+        background-color: $bg-color;
+        border-radius: 4rpx;
+        border: 1px solid $border-color;
+        color: #666;
+      }
+    }
+  }
+}
+// 滑入动画
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0.5;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.filter-bar {
+  display: flex;
+  padding: 20rpx 30rpx;
+
+  .filter-item {
+    margin-right: 30rpx;
+    font-size: 25rpx;
+    color: $secondary-text;
+  }
+
+  .icon-down {
+    font-size: 24rpx;
+  }
+}
+</style>
diff --git a/layouts/m.vue b/layouts/m.vue
index 01c1509..d7c3530 100644
--- a/layouts/m.vue
+++ b/layouts/m.vue
@@ -11,7 +11,7 @@
 .m {
   width: 100%;
   height: 100%;
-  background-color: #f5f5f5;
+  background-color: #f8f8f8;
 }
 </style>
 
@@ -23,6 +23,7 @@
     min-width: unset !important;
     width: 100% !important;
     max-width: 100% !important;
+    background-color: #f8f8f8;
   }
   
   /* 重置 #__nuxt 容器的样式 */
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 81eeee6..75020d8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -12,7 +12,7 @@ export default defineNuxtConfig({
   debug: process.env.NODE_ENV === 'development', // 开启详细调试日志
 
   ssr: true,
-  modules: ['@unocss/nuxt', '@pinia/nuxt', '@element-plus/nuxt', 'pinia-plugin-persistedstate/nuxt'],
+  modules: ['@unocss/nuxt', '@pinia/nuxt', '@element-plus/nuxt', 'pinia-plugin-persistedstate/nuxt','@vant/nuxt'],
   unocss: {
     nuxtLayers: true,
   },
@@ -30,6 +30,19 @@ export default defineNuxtConfig({
       },
       postcss: {
         plugins: [
+          // 将 rpx 单位仅在移动端样式中转换为 px（在 px->vw 之前）
+          {
+            postcssPlugin: 'rpx-to-px-mobile-only',
+            Declaration(decl) {
+              const file = decl.source && decl.source.input && decl.source.input.file
+              if (!file) return
+              const normalized = file.replace(/\\/g, '/');
+              if (!/\/pages\/mobile\//.test(normalized)) return
+              if (typeof decl.value === 'string' && decl.value.includes('rpx')) {
+                decl.value = decl.value.replace(/(-?\d*\.?\d+)rpx/g, (_, n) => `${n}px`)
+              }
+            },
+          },
           postcsspxtoviewport({
             unitToConvert: 'px',
             viewportWidth: 750,
diff --git a/pages/mobile/channel/index.vue b/pages/mobile/channel/index.vue
new file mode 100644
index 0000000..02cf5f7
--- /dev/null
+++ b/pages/mobile/channel/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="page-channel">
+    <div class="text">交流频道</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+</script>
+
+<style scoped>
+.page-channel { padding: 16px; }
+.text { font-size: 16px; }
+</style>
\ No newline at end of file
diff --git a/pages/mobile/find/index.vue b/pages/mobile/find/index.vue
new file mode 100644
index 0000000..e56a031
--- /dev/null
+++ b/pages/mobile/find/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="page-find">
+    <div class="text">发现</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+</script>
+
+<style scoped>
+.page-find { padding: 16px; }
+.text { font-size: 16px; }
+</style>
\ No newline at end of file
diff --git a/pages/mobile/gloabal-cad-drawings/index.vue b/pages/mobile/gloabal-cad-drawings/index.vue
new file mode 100644
index 0000000..a6c5e9f
--- /dev/null
+++ b/pages/mobile/gloabal-cad-drawings/index.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="container">
+    <!-- 设计图列表 -->
+    <div class="design-list">
+      <div
+        class="design-item"
+        v-for="(item, index) in designList"
+        :key="index"
+      >
+        <div class="design-preview">
+          <img :src="item.image" alt="preview" />
+        </div>
+        <div class="design-info">
+          <div class="design-title">{{ item.title }}</div>
+          <div class="design-author">by:{{ item.author }}</div>
+
+          <div class="design-stats">
+            <div class="stat-item">
+              <span class="iconfont">👁</span>
+              <span>{{ item.views }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="iconfont">👍</span>
+              <span>{{ item.likes }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="iconfont">💬</span>
+              <span>{{ item.comments }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="design-action">
+          <button class="view-btn" @click="viewDesign(index)">查看</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+const designList = ref([
+  { title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity1.png', views: 128, likes: 16, comments: 35 },
+  { title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity2.png', views: 128, likes: 16, comments: 35 },
+  { title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity1.png', views: 128, likes: 16, comments: 35 },
+  { title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity2.png', views: 128, likes: 16, comments: 35 },
+])
+
+function viewDesign(index: number) {
+  router.push({ path: '/mobile/design-detail', query: { id: String(index) } })
+}
+
+onMounted(() => {
+  const titleFromQuery = (route.query.titleName as string) || '详情'
+  if (titleFromQuery) {
+    document.title = decodeURIComponent(titleFromQuery)
+  }
+})
+</script>
+
+<style lang="scss">
+// 变量定义
+$primary-color: #007aff;
+$text-color: #333;
+$secondary-text: #666;
+$light-text: #999;
+$bg-color: #fff;
+$white: #fff;
+$border-color: #eee;
+$border-radius: 10rpx;
+$mask-bg: rgba(0, 0, 0, 0.5);
+
+.container {
+  padding: 0;
+  background-color: $bg-color;
+  position: relative;
+}
+
+.design-list {
+  padding: 10rpx 20rpx;
+
+  .design-item {
+    display: flex;
+    margin-bottom: 20rpx;
+    background-color: $white;
+    border-radius: $border-radius;
+    border: 1px solid $border-color;
+    padding: 20rpx;
+    position: relative;
+    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+
+    .design-preview {
+      width: 220rpx;
+      height: 160rpx;
+      overflow: hidden;
+      border: 1px solid $border-color;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .design-info {
+      flex: 1;
+      padding: 0 20rpx;
+
+      .design-title {
+        font-size: 27rpx;
+        margin-bottom: 10rpx;
+      }
+
+      .design-author {
+        font-size: 25rpx;
+        color: $light-text;
+        margin-bottom: 30rpx;
+      }
+    }
+
+    .design-stats {
+      display: flex;
+
+      .stat-item {
+        display: flex;
+        align-items: center;
+        margin-right: 20rpx;
+        font-size: 24rpx;
+        color: $light-text;
+
+        .iconfont {
+          margin-right: 5rpx;
+        }
+      }
+    }
+
+    .design-action {
+      position: absolute;
+      right: 20rpx;
+      bottom: 20rpx;
+
+      .view-btn {
+        background-color: $primary-color;
+        color: $white;
+        font-size: 26rpx;
+        padding: 0rpx 25rpx;
+        border-radius: 5rpx;
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/mobile/index.vue b/pages/mobile/index.vue
index ac4c54b..48abb99 100644
--- a/pages/mobile/index.vue
+++ b/pages/mobile/index.vue
@@ -1,75 +1,197 @@
 <template>
-  <div class="mobile-page">
-    <h1 class="page-title">移动端页面</h1>
-    <div class="test-content">
-      <p>这是一个测试页面，用于验证移动端样式重置是否生效。</p>
-      <div class="test-box">
-        <p>测试盒子 - 宽度应该适应屏幕</p>
-      </div>
-      <div class="button-group">
-        <button class="el-button el-button--primary">主要按钮</button>
-        <button class="el-button el-button--default">默认按钮</button>
+  <div class="contains content">
+    <!-- Search Bar -->
+    <SearchBar />
+
+    <!-- Banner Section -->
+    <div class="banner-section">
+      <div class="banner-swiper">
+        <div class="banner-content">
+          <img src="~/assets/images/banner.png" alt="banner" />
+        </div>
       </div>
     </div>
+
+    <!-- Category Grid -->
+    <div class="category-grid">
+      <!-- First Row -->
+      <div class="category-row">
+        <div class="category-item" @click="navigateTo('图纸')">
+          <div class="category-icon yellow">
+            <span class="icon">✍️</span>
+          </div>
+          <span class="category-text">图纸</span>
+        </div>
+
+        <div class="category-item" @click="navigateTo('文本')">
+          <div class="category-icon blue">
+            <span class="icon">📄</span>
+          </div>
+          <span class="category-text">文本</span>
+        </div>
+
+        <div class="category-item" @click="navigateTo('模型')">
+          <div class="category-icon orange">
+            <span class="icon">📦</span>
+          </div>
+          <span class="category-text">模型</span>
+        </div>
+
+        <div class="category-item" @click="navigateTo('community')">
+          <div class="category-icon green">
+            <span class="icon">💬</span>
+          </div>
+          <span class="category-text">牛人社区</span>
+        </div>
+      </div>
+
+      <!-- Second Row -->
+      <div class="category-row">
+        <div class="category-item" @click="navigateTo('international')">
+          <div class="category-icon purple">
+            <span class="icon">🌐</span>
+          </div>
+          <span class="category-text">国外专区</span>
+        </div>
+
+        <div class="category-item" @click="navigateTo('channel')">
+          <div class="category-icon cyan">
+            <span class="icon">💬</span>
+          </div>
+          <span class="category-text">交流频道</span>
+        </div>
+
+        <div class="category-item"></div>
+        <div class="category-item"></div>
+      </div>
+    </div>
+  </div>
+  <!--  -->
+  <div class="bg-white"></div>
+  <div class="contains content">
+    <!--最新活动 -->
+    <ActivityBanner />
+  </div>
+  <div class="bg-white"></div>
+  <div class="contains content">
+    <!-- 推荐功能 -->
+    <RecommendBanner />
   </div>
 </template>
 
 <script setup lang="ts">
-definePageMeta({
-  layout: 'm'
-})
-  // Mobile specific logic can be added here
+definePageMeta({ layout: 'm' })
+import SearchBar from "~/components/m/home-components/SearchBar.vue";
+import ActivityBanner from "~/components/m/home-components/ActivityBanner.vue";
+import RecommendBanner from "~/components/m/home-components/RecommendBanner.vue";
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function navigateTo(category: string) {
+  router.push({ path: '/mobile/gloabal-cad-drawings', query: { titleName: encodeURIComponent(category) } })
+}
 </script>
 
-<style lang="scss" scoped>
-.mobile-page {
-  padding: 16px;
-  min-height: 100vh;
-  background: #f5f5f5;
-  box-sizing: border-box;
+<style scoped lang="scss">
+.content {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
 }
 
-.page-title {
-  font-size: 20px;
-  color: #333;
-  margin-bottom: 20px;
-  text-align: center;
+.banner-section {
+  margin-top: 20rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+  height: 300rpx;
 }
 
-.test-content {
-  background: #fff;
-  padding: 16px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-  
-  p {
-    margin-bottom: 12px;
-    line-height: 1.5;
-  }
-}
-
-.test-box {
+.banner-swiper {
   width: 100%;
-  height: 80px;
-  background: #e8f4fd;
-  border: 1px solid #b3d8ff;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 16px 0;
-  
-  p {
-    margin: 0;
-    color: #409eff;
-    font-weight: 500;
+  height: 100%;
+}
+
+.banner-content {
+  height: 100%;
+  img {
+    height: 100%;
   }
 }
 
-.button-group {
+.slogan-main {
+  font-size: 48rpx;
+  font-weight: bold;
+  margin-bottom: 10rpx;
+}
+
+.slogan-sub {
+  font-size: 38rpx;
+  font-weight: bold;
+  background-color: rgba(109, 200, 255, 0.8);
+  align-self: flex-start;
+  padding: 5rpx 20rpx;
+  border-radius: 5rpx;
+}
+
+.banner-graphics {
+  flex: 1;
+  position: relative;
+}
+
+.category-grid {
+  margin-top: 40rpx;
+}
+
+.category-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30rpx;
+}
+
+.category-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 22%;
+}
+
+.category-icon {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 20rpx;
   display: flex;
-  gap: 12px;
   justify-content: center;
-  margin-top: 20px;
+  align-items: center;
+  margin-bottom: 10rpx;
+}
+
+.yellow {
+  background-color: #ffd770;
+}
+
+.blue {
+  background-color: #70a1ff;
+}
+
+.orange {
+  background-color: #ff9f43;
+}
+
+.green {
+  background-color: #7bed9f;
+}
+
+.purple {
+  background-color: #a3a1ff;
+}
+
+.cyan {
+  background-color: #55e6c1;
+}
+
+.category-text {
+  font-size: 24rpx;
+  color: #333;
 }
 </style>
diff --git a/pages/mobile/message_notice/index.vue b/pages/mobile/message_notice/index.vue
new file mode 100644
index 0000000..a917e3b
--- /dev/null
+++ b/pages/mobile/message_notice/index.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="message-notice-container">
+    <div class="tab-navigation">
+      <div
+        v-for="(tab, index) in tabs"
+        :key="index"
+        :class="['tab-item', { active: activeTab === index }]"
+        @click="activeTab = index"
+      >
+        <span v-if="index === 0" class="iconfont icon-system"></span>
+        <span v-else-if="index === 1" class="iconfont icon-transaction"></span>
+        <span v-else class="iconfont icon-forum"></span>
+        {{ tab.name }}
+      </div>
+    </div>
+
+    <div class="message-content">
+      <template v-if="activeTab === 0">
+        <div
+          class="message-item"
+          v-for="(message, index) in systemMessages"
+          :key="index"
+        >
+          <div class="message-left">
+            <span class="iconfont icon-speaker"></span>
+            <span class="dot"></span>
+          </div>
+          <div class="message-body">
+            <div class="message-header">
+              <div class="message-title text-ellipsis">{{ message.title }}</div>
+              <div class="message-time">{{ message.time }}</div>
+            </div>
+            <div class="message-description">{{ message.content }}</div>
+          </div>
+        </div>
+      </template>
+
+      <template v-if="activeTab === 1">
+        <div class="empty-content">
+          <div class="notice-text">交易消息和论坛社区互动的图标统一下，样式一样</div>
+        </div>
+      </template>
+
+      <template v-if="activeTab === 2">
+        <div class="empty-content">
+          <div class="notice-text">交易消息和论坛社区互动的图标统一下，样式一样</div>
+        </div>
+      </template>
+    </div>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+import { ref } from 'vue'
+
+const activeTab = ref(0)
+const tabs = ref([
+  { name: '系统消息', icon: 'icon-system' },
+  { name: '交易消息', icon: 'icon-transaction' },
+  { name: '论坛社区互动', icon: 'icon-forum' },
+])
+
+const systemMessages = ref([
+  { title: '图夕夕金币充值有优惠!', content: '图夕夕限时优惠, 微信冲500送50金币, 充200送10金币', time: '2025-03-05 17:00:57' },
+  { title: '图夕夕金币充值有优惠!', content: '图夕夕限时优惠, 微信冲500送50金币, 充200送10金币图夕夕限时优惠, 微信冲500送50金币, 充200送10金币', time: '2025-03-05 17:00:57' },
+])
+
+const transactionMessages = ref<any[]>([])
+const forumMessages = ref<any[]>([])
+</script>
+
+<style>
+page {
+  background-color: #f5f7fa;
+  height: 100%;
+}
+
+.message-notice-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.tab-navigation {
+  display: flex;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.tab-item {
+  flex: 1;
+  padding: 30rpx 0;
+  text-align: center;
+  color: #666;
+  position: relative;
+  font-size: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-item .iconfont {
+  font-size: 32rpx;
+  margin-right: 10rpx;
+}
+
+.tab-item.active {
+  color: #4082ff;
+  font-weight: 500;
+}
+
+.tab-item.active::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 25%;
+  width: 50%;
+  height: 6rpx;
+  background-color: #4082ff;
+}
+
+.icon-system:before {
+  content: "🔔";
+}
+
+.icon-transaction:before {
+  content: "💰";
+}
+
+.icon-forum:before {
+  content: "💬";
+}
+
+.icon-speaker:before {
+  content: "📢";
+}
+
+.message-content {
+  flex: 1;
+  padding: 20rpx;
+  background-color: #f5f7fa;
+}
+
+.message-item {
+  display: flex;
+  background-color: #fff;
+  padding: 30rpx;
+  margin-bottom: 16rpx;
+  border-radius: 8rpx;
+  align-items: flex-start;
+  border-left: 6rpx solid transparent;
+  position: relative;
+}
+
+.message-left {
+  position: relative;
+  margin-right: 20rpx;
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.message-left .iconfont {
+  font-size: 40rpx;
+  color: #4082ff;
+}
+
+.dot {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background-color: #ff4d4f;
+}
+
+.message-body {
+  flex: 1;
+  overflow: hidden;
+}
+
+.message-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+
+.message-title {
+  font-weight: bold;
+  font-size: 28rpx;
+  color: #333;
+  flex: 1;
+}
+
+.message-time {
+  color: #999;
+  font-size: 24rpx;
+  text-align: right;
+  flex-shrink: 0;
+  margin-left: 20rpx;
+}
+
+.message-description {
+  color: #666;
+  font-size: 26rpx;
+  line-height: 1.5;
+}
+
+.empty-content {
+  height: 300rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #e6f0ff;
+  margin-top: 20rpx;
+  border-radius: 8rpx;
+}
+
+.notice-text {
+  color: #666;
+  font-size: 28rpx;
+}
+
+.page-title {
+  padding: 20rpx;
+  text-align: center;
+  font-size: 28rpx;
+  background-color: transparent;
+  color: #666;
+  border-top: 2rpx solid #eee;
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/pages/mobile/talent-detail/index.vue b/pages/mobile/talent-detail/index.vue
new file mode 100644
index 0000000..9a5cad9
--- /dev/null
+++ b/pages/mobile/talent-detail/index.vue
@@ -0,0 +1,309 @@
+<template>
+  <view class="talent-detail">
+    <!-- 个人信息卡片 -->
+    <view class="profile-card">
+      <view class="profile-header">
+        <view class="left-section">
+          <image
+            class="avatar"
+            :src="talentInfo.avatar"
+            mode="aspectFill"
+          ></image>
+          <view class="basic-info">
+            <view class="name-row">
+              <text class="name">{{ talentInfo.name }}</text>
+              <view class="tags">
+                <view
+                  class="tag"
+                  v-for="(tag, index) in talentInfo.tags"
+                  :key="index"
+                  >{{ tag }}</view
+                >
+              </view>
+            </view>
+            <text class="education">毕业院校：{{ talentInfo.education }}</text>
+          </view>
+        </view>
+        <div class="follow-btn" @click="followTalent">
+          {{ isFollowed ? "已关注" : "+ 关注" }}
+        </div>
+      </view>
+
+      <!-- 数据统计 -->
+      <view class="stats">
+        <view class="stat-item works">
+          <text class="stat-number">{{ talentInfo.worksCount }}</text>
+          <text class="stat-label">作品量</text>
+        </view>
+        <!-- 加跟竖线 隔离下 -->
+        <view class="stat-item-line"></view>
+        <view class="stat-item fans">
+          <text class="stat-number">{{ talentInfo.fansCount }}</text>
+          <text class="stat-label">粉丝量</text>
+        </view>
+      </view>
+      <!-- 个人简介 -->
+      <view class="section-header">
+        <image class="crown-icon" src="/static/images/crown.png"></image>
+        <text class="section-title">个人简介</text>
+      </view>
+      <text class="intro-text">{{ talentInfo.introduction }}</text>
+    </view>
+
+    <!-- 选项卡导航 -->
+    <view class="tab-nav">
+      <view
+        v-for="(tab, index) in tabs"
+        :key="index"
+        class="tab-item"
+        :class="{ active: currentTab === index }"
+        @click="switchTab(index)"
+      >
+        <text>{{ tab }}</text>
+      </view>
+    </view>
+
+    <!-- 技术证书内容 -->
+    <view class="tab-content" v-if="currentTab === 0">
+      <!-- 技术证书列表 图片展示 -->
+      <TechnicalCertificates />
+    </view>
+
+    <!-- 个人履历内容 -->
+    <view class="tab-content" v-if="currentTab === 1">
+      <!-- 个人履历内容 -->
+      <Certificates :talentInfo="talentInfo" />
+    </view>
+
+    <!-- 作品展示内容 -->
+    <view class="tab-content" v-if="currentTab === 2">
+      <!-- 作品展示内容 -->
+      <Works :talentInfo="talentInfo" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+import TechnicalCertificates from "~/components/m/detail-components/technicalCertificates.vue";
+import Certificates from "~/components/m/detail-components/certificates.vue";
+import Works from "~/components/m/detail-components/Works.vue";
+import { reactive, ref } from 'vue'
+
+const isFollowed = ref(false)
+const currentTab = ref(0)
+const tabs = ['技术证书', '个人履历', '作品展示']
+const talentInfo = reactive({
+  id: 1,
+  name: '王刚',
+  avatar: '/static/images/avater2.png',
+  tags: ['五金工具', '电子产品'],
+  education: '重庆工商大学',
+  worksCount: 876,
+  fansCount: 98,
+  introduction:
+    '你好！我是专注于工业设计和机械设计领域的专业设计师，擅长进行外观设计、结构设计、板金设计等各类工程设计工作。我拥有丰富的经验，能够为客户提供高质量的设计解决方案，包括PCB外壳设计、框架设计、运动仿真、逆向工程等。此外，我熟练使用Creo、CAD等设计软件，能够进行精准的3D建模、渲染、2D工程图绘制、CAD代画以及三维转二维等工作。',
+  certificates: [
+    { year: '2020年', description: '韩国内基211学府设计的一款月度采样机' },
+    { year: '2021年', description: '韩国内基211学府设计的一款月度采样机' },
+    { year: '2022年', description: '韩国内基211学府设计的一款月度采样机' },
+    { year: '2023年', description: '韩国内基211学府设计的一款月度采样机' },
+    { year: '2024年', description: '韩国内基211学府设计的一款月度采样机' },
+    { year: '2025年', description: '韩国内基211学府设计的一款月度采样机' },
+  ],
+})
+
+function followTalent() {
+  isFollowed.value = !isFollowed.value
+}
+function switchTab(index: number) {
+  currentTab.value = index
+}
+</script>
+
+<style lang="scss" scoped>
+.talent-detail {
+  min-height: 100vh;
+  background-color: #fff;
+  padding: 30rpx 30rpx 0;
+  background-image: url("@/static/images/talent-detail-bg.png");
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: top;
+
+  // 个人信息卡片样式
+  .profile-card {
+    background-color: #fff;
+    border-radius: 12rpx;
+    padding: 30rpx;
+    margin-bottom: 20rpx;
+    border: 1px solid #eee;
+    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+    margin-top: 164rpx;
+
+    .profile-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      .left-section {
+        display: flex;
+        align-items: flex-start;
+
+        .avatar {
+          width: 120rpx;
+          height: 120rpx;
+          border-radius: 50%;
+          margin-right: 20rpx;
+        }
+
+        .basic-info {
+          display: flex;
+          flex-direction: column;
+
+          .name-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10rpx;
+
+            .name {
+              font-size: 36rpx;
+              font-weight: bold;
+              margin-right: 20rpx;
+            }
+
+            .tags {
+              display: flex;
+
+              .tag {
+                font-size: 24rpx;
+                color: #1a65ff;
+                background-color: #e6f0ff;
+                padding: 4rpx 16rpx;
+                border-radius: 20rpx;
+                margin-right: 12rpx;
+              }
+            }
+          }
+
+          .education {
+            font-size: 28rpx;
+            color: #666;
+          }
+        }
+      }
+
+      .follow-btn {
+        width: 89rpx;
+        height: 44rpx;
+        border-radius: 7rpx;
+        border: 1px solid #d7d7d7;
+        text-align: center;
+        line-height: 44rpx;
+        font-size: 21rpx;
+        color: #0a6fff;
+      }
+    }
+
+    // 数据统计区域
+    .stats {
+      display: flex;
+      margin-top: 30rpx;
+      margin-left: 140rpx;
+
+      .stat-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .stat-number {
+          font-size: 40rpx;
+          font-weight: bold;
+          color: #333;
+          line-height: 1.2;
+        }
+
+        .stat-label {
+          font-size: 28rpx;
+          color: #999;
+          margin-top: 4rpx;
+        }
+      }
+
+      .stat-item-line {
+        width: 1px;
+        height: 90rpx;
+        background-color: #eee;
+        margin: 0 50rpx;
+      }
+    }
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      margin-top: 40rpx;
+      margin-bottom: 20rpx;
+      width: 100%;
+      justify-content: center;
+      height: 56rpx;
+      background: rgba(26, 101, 255, 0.1);
+      border-radius: 28rpx;
+
+      .crown-icon {
+        width: 40.97rpx;
+        height: 35.42rpx;
+        margin-right: 10rpx;
+      }
+
+      .section-title {
+        font-size: 29rpx;
+        font-weight: bold;
+        color: #333;
+      }
+    }
+
+    .intro-text {
+      font-size: 24rpx;
+      color: #666;
+      line-height: 1.6;
+    }
+  }
+
+  // 选项卡导航
+  .tab-nav {
+    display: flex;
+    background-color: #fff;
+    border-radius: 12rpx 12rpx 0 0;
+
+    .tab-item {
+      padding: 24rpx 0;
+      margin-right: 60rpx;
+      position: relative;
+      font-size: 25rpx;
+      color: #666;
+      transition: all 0.3s ease;
+
+      &.active {
+        color: #1a65ff;
+
+        &::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          bottom: 14rpx;
+          width: 100%;
+          height: 4rpx;
+          background-color: #1a65ff;
+        }
+      }
+    }
+  }
+
+  // 选项卡内容
+  .tab-content {
+    background-color: #fff;
+    border-radius: 0 0 12rpx 12rpx;
+    padding: 20rpx 0rpx;
+  }
+}
+</style>
diff --git a/pages/mobile/transaction_record/index.vue b/pages/mobile/transaction_record/index.vue
new file mode 100644
index 0000000..ef5f887
--- /dev/null
+++ b/pages/mobile/transaction_record/index.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="transaction-record">
+    <!-- Balance Card -->
+    <div class="balance-card">
+      <div class="balance-title">
+        <span>我的余额 (元)</span>
+        <span class="verify-text">🏅 资产保障中</span>
+      </div>
+      <div class="balance-amount">{{ balance.toFixed(2) }}</div>
+      <div class="action-buttons">
+        <div class="btn-recharge">充值</div>
+        <div class="btn-withdraw">提现</div>
+      </div>
+    </div>
+
+    <!-- Transaction Filter -->
+    <div class="transaction-filter">
+      <div class="filter-type">
+        <span>全部</span>
+      </div>
+      <div class="filter-date">
+        <label class="date-picker-trigger">
+          <span>当前时间: <span style="color:#4080ff">{{ currentMonth }}</span></span>
+          <input type="month" v-model="selectedMonth" @change="onMonthChange" />
+        </label>
+      </div>
+    </div>
+
+    <!-- Transaction List -->
+    <div class="transaction-list">
+      <div
+        v-for="(transaction, index) in transactions"
+        :key="index"
+        class="transaction-item"
+      >
+        <div class="transaction-info">
+          <span class="transaction-type">{{ transaction.type }}</span>
+          <span class="transaction-date">{{ transaction.date }}</span>
+        </div>
+        <div
+          class="transaction-amount"
+          :class="{ 'amount-positive': transaction.amount > 0 }"
+        >
+          <span>{{
+            transaction.amount > 0
+              ? "+" + transaction.amount
+              : transaction.amount
+          }}</span>
+          <span class="transaction-reference">{{ transaction.reference }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="transaction-footer">
+      <span>当前仅展示本月明细，切换查看更多</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+import { ref, onMounted } from 'vue'
+
+const balance = ref(6357.0)
+const selectedMonth = ref('')
+const currentMonth = ref('')
+const transactions = ref([
+  { type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
+  { type: '转出到银行卡', date: '2024-03-10 15:38', amount: 3578, reference: '56784' },
+  { type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
+  { type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
+  { type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
+  { type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
+])
+
+function onMonthChange(e: Event) {
+  const value = (e.target as HTMLInputElement).value // yyyy-mm
+  if (!value) return
+  const [y, m] = value.split('-')
+  currentMonth.value = `${y}.${m}`
+}
+
+onMounted(() => {
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = String(now.getMonth() + 1).padStart(2, '0')
+  currentMonth.value = `${year}.${month}`
+  selectedMonth.value = `${year}-${month}`
+})
+</script>
+
+<style>
+.transaction-record {
+  background-color: #f5f5f5;
+  padding-bottom: 20px;
+  height: 100%;
+}
+
+.balance-card {
+  background-color: white;
+  padding: 20px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.balance-title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.verify-text {
+  color: #4080ff;
+  font-size: 12px;
+  border: 1px solid #4080ff;
+  border-radius: 10px;
+  padding: 0 5px;
+  margin-left: 10px;
+}
+
+.balance-amount {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.btn-recharge,
+.btn-withdraw {
+  border: none;
+  padding: 8px 60rpx;
+  border-radius: 5px;
+  margin-right: 30rpx;
+  font-size: 28rpx;
+}
+
+.btn-recharge {
+  background-color: #4080ff;
+  color: white;
+}
+
+.btn-withdraw {
+  background-color: white;
+  border: 1px solid #ddd;
+  color: #333;
+}
+
+.transaction-filter {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  font-size: 14px;
+  color: #666;
+}
+
+.transaction-list {
+  background-color: white;
+}
+
+.transaction-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.transaction-type {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 5px;
+  display: block;
+}
+
+.transaction-date {
+  font-size: 12px;
+  color: #999;
+  display: block;
+}
+
+.transaction-amount {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  text-align: right;
+}
+
+.amount-positive {
+  color: #4caf50;
+}
+
+.transaction-reference {
+  font-size: 12px;
+  color: #999;
+  font-weight: normal;
+  margin-top: 5px;
+  display: block;
+}
+
+.transaction-footer {
+  text-align: center;
+  color: #999;
+  font-size: 12px;
+  padding: 15px;
+  background-color: white;
+  border-top: 1px solid #f0f0f0;
+}
+
+.date-picker-trigger {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/pages/mobile/user/index.vue b/pages/mobile/user/index.vue
new file mode 100644
index 0000000..e62e051
--- /dev/null
+++ b/pages/mobile/user/index.vue
@@ -0,0 +1,345 @@
+<template>
+  <div class="user-container">
+    <!-- 顶部蓝色背景 -->
+    <div class="top-bg"></div>
+
+    <!-- 用户信息卡片 -->
+    <div class="user-card">
+      <!-- 用户信息 -->
+      <div class="user-info">
+        <img class="avatar" src="/static/images/avater2.png" />
+        <div class="login-info">
+          <div class="login-text">登录/注册</div>
+          <div class="login-desc">登录注册后享受更多精彩内容</div>
+        </div>
+        <!-- 设置图标 -->
+        <div class="setting-icon">⚙️</div>
+      </div>
+
+      <!-- 数据统计 -->
+      <div class="data-stats">
+        <div class="stat-item">
+          <div class="stat-num">200</div>
+          <div class="stat-text">金币余额（元）</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-num">135</div>
+          <div class="stat-text">今日浏览量</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-num">370</div>
+          <div class="stat-text">今日收益（元）</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 资源中心区域 -->
+    <div class="resource-section">
+      <div class="section-title">资源中心</div>
+
+      <div class="resource-grid">
+        <div class="resource-item">
+          <div class="resource-icon blue">
+            <img
+              src="@/static/images/my_release.png"
+              alt=""
+              srcset=""
+              class="w-77rpx h-71rpx"
+            />
+          </div>
+          <span class="resource-text">我的发布</span>
+        </div>
+
+        <div class="resource-item">
+          <div class="resource-icon blue">
+            <img
+              src="@/static/images/my_download.png"
+              alt=""
+              srcset=""
+              class="w-98rpx h-68rpx"
+            />
+          </div>
+          <span class="resource-text">我的下载</span>
+        </div>
+
+        <div class="resource-item">
+          <div class="resource-icon blue">
+            <img
+              src="@/static/images/my_attention.png"
+              alt=""
+              srcset=""
+              class="w-76rpx h-77rpx"
+            />
+          </div>
+          <span class="resource-text">我的关注</span>
+        </div>
+
+        <div class="resource-item">
+          <div class="resource-icon blue">
+            <img
+              src="@/static/images/my_collect.png"
+              alt=""
+              srcset=""
+              class="w-64rpx h-73rpx"
+            />
+          </div>
+          <span class="resource-text">我的收藏</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 功能列表 -->
+    <div class="function-list">
+      <!-- 安全中心 -->
+      <div class="function-item" @click="navigateTo('/mobile/safety')">
+        <div class="function-left">
+          <div class="function-icon orange">✅</div>
+          <span class="function-text">安全中心</span>
+        </div>
+        <span>›</span>
+      </div>
+
+      <!-- 消息中心 -->
+      <div class="function-item" @click="navigateTo('/mobile/message_notice')">
+        <div class="function-left">
+          <div class="function-icon blue">🔔</div>
+          <span class="function-text">消息中心</span>
+        </div>
+        <span>›</span>
+      </div>
+
+      <!-- 交易记录 -->
+      <div
+        class="function-item"
+        @click="navigateTo('/mobile/transaction_record')"
+      >
+        <div class="function-left">
+          <div class="function-icon green">🧾</div>
+          <span class="function-text">交易记录</span>
+        </div>
+        <span>›</span>
+      </div>
+
+      <!-- 关于我们 -->
+      <div class="function-item" @click="navigateTo('/mobile/about')">
+        <div class="function-left">
+          <div class="function-icon purple">ℹ️</div>
+          <span class="function-text">关于我们</span>
+        </div>
+        <span>›</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+import { useRouter } from 'vue-router'
+const router = useRouter()
+function navigateTo(url: string) {
+  router.push(url)
+}
+</script>
+
+<style lang="scss" scoped>
+// 颜色变量
+$primary-color: #0080ff;
+$orange-color: #ff9500;
+$green-color: #34c759;
+$purple-color: #af52de;
+$text-primary: #333;
+$text-secondary: #999;
+$bg-color: #f7f7f7;
+$card-bg: #ffffff;
+$border-color: #f5f5f5;
+
+.user-container {
+  min-height: 100vh;
+  background-color: $bg-color;
+  position: relative;
+  padding-top: 127rpx;
+
+  // 顶部蓝色背景
+  .top-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 200rpx;
+    background-color: $primary-color;
+    z-index: 0;
+  }
+
+  // 用户信息卡片
+  .user-card {
+    position: relative;
+    margin: 0 20rpx;
+    padding: 30rpx;
+    background-color: $card-bg;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+    z-index: 1;
+
+    .user-info {
+      display: flex;
+      align-items: center;
+
+      .avatar {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 60rpx;
+        margin-right: 20rpx;
+        background-color: #f0f0f0;
+      }
+
+      .login-info {
+        flex: 1;
+
+        .login-text {
+          font-size: 34rpx;
+          font-weight: 500;
+          color: $text-primary;
+          margin-bottom: 8rpx;
+        }
+
+        .login-desc {
+          font-size: 24rpx;
+          color: $text-secondary;
+        }
+      }
+
+      .setting-icon {
+        padding: 10rpx;
+      }
+    }
+
+    // 数据统计
+    .data-stats {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 30rpx;
+
+      .stat-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .stat-num {
+          font-size: 36rpx;
+          font-weight: 500;
+          color: $text-primary;
+          margin-bottom: 10rpx;
+        }
+
+        .stat-text {
+          font-size: 24rpx;
+          color: $text-secondary;
+        }
+      }
+    }
+  }
+
+  // 资源中心
+  .resource-section {
+    margin: 20rpx;
+    padding: 30rpx;
+    background-color: $card-bg;
+    border-radius: 16rpx;
+
+    .section-title {
+      font-size: 30rpx;
+      font-weight: 500;
+      color: $text-primary;
+      margin-bottom: 30rpx;
+    }
+
+    .resource-grid {
+      display: flex;
+      justify-content: space-between;
+
+      .resource-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 25%;
+
+        .resource-icon {
+          width: 100rpx;
+          height: 100rpx;
+          border-radius: 50%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-bottom: 16rpx;
+
+          &.blue {
+            // background-color: $primary-color;
+          }
+        }
+
+        .resource-text {
+          font-size: 28rpx;
+          color: $text-primary;
+        }
+      }
+    }
+  }
+
+  // 功能列表
+  .function-list {
+    margin: 20rpx;
+    background-color: $card-bg;
+    border-radius: 16rpx;
+    overflow: hidden;
+
+    .function-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 30rpx;
+      border-bottom: 1px solid $border-color;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .function-left {
+        display: flex;
+        align-items: center;
+
+        .function-icon {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 50%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-right: 20rpx;
+
+          &.orange {
+            background-color: $orange-color;
+          }
+
+          &.blue {
+            background-color: $primary-color;
+          }
+
+          &.green {
+            background-color: $green-color;
+          }
+
+          &.purple {
+            background-color: $purple-color;
+          }
+        }
+
+        .function-text {
+          font-size: 30rpx;
+          color: $text-primary;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/mobile/user_info/index.vue b/pages/mobile/user_info/index.vue
new file mode 100644
index 0000000..8435925
--- /dev/null
+++ b/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>