feat: 更新移动端页面，添加新活动展示和分类图标，优化样式

nuxt.config.ts

@@ -30,19 +30,6 @@ 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,

pages/mobile/index.vue

@@ -1,14 +1,29 @@
 <template>
   <div class="contains content">
     <!-- Search Bar -->
-    <SearchBar />
+    <div class="search-container">
+      <!-- <span class="icon">🔍</span> -->
+      <!-- <input v-model="searchValue" type="text" class="input" placeholder="搜一搜" @keyup.enter="onSearch" /> -->
+      <van-search shape="round" class="vant-input" background="#fff" placeholder="请输入搜索关键词" />
+    </div>
 
     <!-- Banner Section -->
     <div class="banner-section">
       <div class="banner-swiper">
-        <div class="banner-content">
+        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+          <van-swipe-item>
             <img src="~/assets/images/banner.png" alt="banner" />
-        </div>
+          </van-swipe-item>
+          <van-swipe-item>
+            <img src="~/assets/images/banner.png" alt="banner" />
+          </van-swipe-item>
+          <van-swipe-item>
+            <img src="~/assets/images/banner.png" alt="banner" />
+          </van-swipe-item>
+          <van-swipe-item>
+            <img src="~/assets/images/banner.png" alt="banner" />
+          </van-swipe-item>
+        </van-swipe>
       </div>
     </div>
 
@@ -17,46 +32,47 @@
       <!-- First Row -->
       <div class="category-row">
         <div class="category-item" @click="navigateTo('图纸')">
-          <div class="category-icon yellow">
+          <div class="category-icon">
-            <span class="icon">✍️</span>
+            <!-- <span class="icon">✍️</span> -->
+            <img src="~/assets/images/tuzhi (3).png" alt="banner" />
           </div>
           <span class="category-text">图纸</span>
         </div>
 
         <div class="category-item" @click="navigateTo('文本')">
-          <div class="category-icon blue">
+          <div class="category-icon">
-            <span class="icon">📄</span>
+            <img src="~/assets/images/tuzhi (2).png" alt="banner" />
           </div>
           <span class="category-text">文本</span>
         </div>
 
         <div class="category-item" @click="navigateTo('模型')">
-          <div class="category-icon orange">
+          <div class="category-icon">
-            <span class="icon">📦</span>
+            <img src="~/assets/images/tuzhi (1).png" alt="banner" />
           </div>
           <span class="category-text">模型</span>
         </div>
 
         <div class="category-item" @click="navigateTo('community')">
-          <div class="category-icon green">
+          <div class="category-icon">
-            <span class="icon">💬</span>
+            <img src="~/assets/images/tuzhi (4).png" alt="banner" />
           </div>
           <span class="category-text">牛人社区</span>
         </div>
       </div>
 
       <!-- Second Row -->
-      <div class="category-row">
+      <div class="category-row mb-[10px]!">
         <div class="category-item" @click="navigateTo('international')">
-          <div class="category-icon purple">
+          <div class="category-icon">
-            <span class="icon">🌐</span>
+            <img src="~/assets/images/tuzhi (5).png" alt="banner" />
           </div>
           <span class="category-text">国外专区</span>
         </div>
 
         <div class="category-item" @click="navigateTo('channel')">
-          <div class="category-icon cyan">
+          <div class="category-icon">
-            <span class="icon">💬</span>
+            <img src="~/assets/images/tuzhi (6).png" alt="banner" />
           </div>
           <span class="category-text">交流频道</span>
         </div>
@@ -67,99 +83,480 @@
     </div>
   </div>
   <!--  -->
-  <div class="bg-white"></div>
+  <div class="divider"></div>
   <div class="contains content">
     <!--最新活动 -->
-    <ActivityBanner />
+    <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="bg-white"></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 ? '0px' : '9px' }"
+          >
+            <img :src="item.image" class="activity-image" alt="activity" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="divider"></div>
   <div class="contains content">
     <!-- 推荐功能 -->
-    <RecommendBanner />
+    <!-- <RecommendBanner /> -->
+    <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 class="design-list">
+        <div class="design-item" v-for="(item, index) in items" :key="index">
+          <div class="design-preview">
+            <img :src="activity2" mode="aspectFit"></img>
+          </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">
+                <img class="img1" src="~/assets/images/home-l (2).png" alt="banner" />
+                <span>{{ item.views }}</span>
+              </div>
+              <div class="stat-item">
+                <img class="img2" src="~/assets/images/home-l (3).png" alt="banner" />
+                <span>{{ item.likes }}</span>
+              </div>
+              <div class="stat-item">
+                <img class="img3" src="~/assets/images/home-l (1).png" alt="banner" />
+                <span>{{ item.comments }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="design-action">
+            <button class="view-btn">查看</button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-definePageMeta({ layout: 'm' })
+  definePageMeta({ layout: 'm' })
-import SearchBar from "~/components/m/home-components/SearchBar.vue";
+  // import SearchBar from '~/components/m/home-components/SearchBar.vue'
-import ActivityBanner from "~/components/m/home-components/ActivityBanner.vue";
+  import ActivityBanner from '~/components/m/home-components/ActivityBanner.vue'
-import RecommendBanner from "~/components/m/home-components/RecommendBanner.vue";
+  import RecommendBanner from '~/components/m/home-components/RecommendBanner.vue'
-import { useRouter } from 'vue-router'
+  import { useRouter } from 'vue-router'
+  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 router = useRouter()
 
-function navigateTo(category: string) {
+  function navigateTo(category: string) {
     router.push({ path: '/mobile/gloabal-cad-drawings', query: { titleName: encodeURIComponent(category) } })
-}
+  }
+
+  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)
+  }
+
+  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`)
+  }
+
+  const 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',
+    },
+  ]
+
+  const viewDetail = (item: any) => {
+    console.log('View detail for:', item.title)
+    // uni.navigateTo({
+    //   url: item.url,
+    // });
+  }
 </script>
 
 <style scoped lang="scss">
-.content {
+  // 变量定义
+  $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 {
+    .design-item {
+      display: flex;
+      margin-bottom: 20px;
+      background-color: $white;
+      border-radius: $border-radius;
+      border: 1px solid $border-color;
+      padding: 17px 10px;
+      box-sizing: border-box;
+      position: relative;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+      .design-preview {
+        width: 220px;
+        height: 168px;
+        overflow: hidden;
+
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .design-info {
+        flex: 1;
+        padding: 0 20px;
+
+        .design-title {
+          font-size: 27px;
+          margin-bottom: 10px;
+        }
+
+        .design-author {
+          font-size: 25px;
+          color: $light-text;
+          margin-bottom: 30px;
+        }
+      }
+
+      .design-stats {
+        display: flex;
+
+        .stat-item {
+          display: flex;
+          align-items: center;
+          margin-right: 20px;
+          font-size: 24px;
+          color: $light-text;
+
+          img {
+            margin-right: 4px;
+          }
+
+          .img1 {
+            width: 32px;
+            height: 24px;
+          }
+          .img2 {
+            width: 26px;
+            height: 28px;
+          }
+          .img3 {
+            width: 28px;
+            height: 26px;
+          }
+        }
+      }
+
+      .design-action {
+        position: absolute;
+        right: 20px;
+        top: 70px;
+
+        .view-btn {
+          background-color: $primary-color;
+          color: $white;
+          font-size: 25px;
+          padding: 10px 26px !important;
+          border-radius: 5px;
+          border:none;
+        }
+      }
+    }
+  }
+  .recommend-section {
+    //   padding: 0 20rpx;
+    //   margin: 30rpx 0 50rpx;
+  }
+
+  .tab-navigation {
+    display: flex;
+    align-items: center;
+    margin-bottom: 25px;
+  }
+
+  .tab-item {
+    padding: 8px 0;
+    margin-right: 40px;
+    font-size: 29px;
+    color: #333;
+    position: relative;
+    transition: all 0.3s ease;
+
+    &.active {
+      color: #2970ff;
+      position: relative;
+
+      &::after {
+        content: '';
+        background-image: url('~/assets/images/bg-yy.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        position: absolute;
+        bottom: 1px;
+        left: 0;
+        width: 100%;
+        height: 8px;
+      }
+    }
+  }
+
+  .view-all {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    font-size: 25px;
+    color: #666;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+  .view-all .icon-right {
+    margin-left: 4rpx;
+    font-size: 25px;
+  }
+  .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: 31px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .view-all {
+    display: flex;
+    align-items: center;
+    font-size: 25px !important;
+    color: #666;
+    text-decoration: none;
+  }
+  .view-all .chevron {
+    margin-left: 4px;
+    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: 10px 0px 0px 0px !important; // 留出阴影空间
+  }
+
+  .activity-card {
+    width: 292px;
+    height: 125px;
+    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;
+  }
+
+  .search-container {
+    background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+    .vant-input {
+      flex: 1;
+      padding: 0px !important;
+      /* 设置 Vant Search 内部输入高度 */
+      --van-search-input-height: 65px;
+      :deep(.van-search__content) {
+        min-height: 65px;
+      }
+      :deep(.van-field__control) {
+        height: 65px;
+        line-height: 65px;
+      }
+    }
+  }
+  .divider {
+    height: 17px;
+    background-color: #f8f8f8;
+    border-radius: 1px;
+  }
+  .content {
     display: flex;
     flex-direction: column;
     background-color: #fff;
     padding: 21px;
     box-sizing: border-box;
-}
+  }
 
-.banner-section {
+  .banner-section {
     margin-top: 25px;
     border-radius: 20px;
     overflow: hidden;
     height: 285px;
-}
-
-.banner-swiper {
-  width: 100%;
-  height: 100%;
-}
-
-.banner-content {
-  height: 100%;
-  img {
-    height: 100%;
-    width: 100%;
   }
-}
 
-.slogan-main {
+  .banner-swiper {
+    width: 100%;
+    height: 100%;
+    .my-swipe {
+      height: 100%;
+      .van-swipe-item {
+        color: #fff;
+        font-size: 20px;
+        height: 100%;
+        text-align: center;
+        background-color: #39a9ed;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .slogan-main {
     font-size: 48rpx;
     font-weight: bold;
     margin-bottom: 10rpx;
-}
+  }
 
-.slogan-sub {
+  .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 {
+  .banner-graphics {
     flex: 1;
     position: relative;
-}
+  }
 
-.category-grid {
+  .category-grid {
     margin-top: 33px;
-}
+  }
 
-.category-row {
+  .category-row {
     display: flex;
     justify-content: space-between;
     margin-bottom: 40px;
-}
+  }
 
-.category-item {
+  .category-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 22%;
-}
+  }
 
-.category-icon {
+  .category-icon {
     width: 78px;
     height: 78px;
     border-radius: 20rpx;
@@ -167,34 +564,15 @@ function navigateTo(category: string) {
     justify-content: center;
     align-items: center;
     margin-bottom: 10rpx;
-}
+    img {
+      width: 100%;
+      height: 100%;
+      margin-bottom: 17px;
+    }
+  }
 
-.yellow {
+  .category-text {
-  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: 25px;
     color: #191919;
-}
+  }
 </style>