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

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>