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

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>