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

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>