front-pc/pages/mobile/index.vue

<template>
  <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' })
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 scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 21px;
  box-sizing: border-box;
}

.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 {
  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: 33px;
}

.category-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22%;
}

.category-icon {
  width: 78px;
  height: 78px;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  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: 25px;
  color: #191919;
}
</style>