yoe-shop-web/src/views/plan/index.vue

<template>
  <div class="solve">
    <div class="solve-head">
      <div class="head-bos">
        <div class="nav-bos flex-row-start">
          <div v-for="(item, index) in navList" :key="index" class="nav-list" :class="navIndex == index ? 'hig' : ''">
            {{ item.title }}
          </div>
        </div>
        <div class="filter-bos">
          <div v-for="(item1, index1) in filterListy" :key="index1" class="filter-list flex-row-start">
            <div class="filter-title">{{ item1.title }}</div>
            <div v-for="(item2, index2) in item1.list" :key="index2" class="filter-item" :class="item1.hig == item2.id ? 'hig' : ''">
              {{ item2.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据 -->
    <div class="data-bos">
      <div v-for="(item, index) in 9" :key="index" class="data-list" @click="onPath">
        <img class="data-img" src="@/assets/images/login-background.jpg" alt="" />
        <div class="data-box flex-column-between">
          <div>
            <div class="title ellipsis">2025中秋福利 企业团购方案</div>
            <div class="info ellipsis">干款好礼·百大品牌·个性定制</div>
          </div>
          <div class="text flex-row-start">
            <div>了解详情</div>
            <el-icon color="#e7000b" size="14" style="margin: 0 0 0 10px">
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination-bos flex-row-between">
      <div></div>
      <el-pagination
        v-model:current-page="currentPage1"
        v-model:page-size="pageSize2"
        layout="sizes, prev, pager, next ,jumper"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const currentPage1 = ref(5);
const pageSize2 = ref(100);

const navList = ref<any>([
  { title: '专题分类' },
  { title: '大中型企业采购' },
  { title: '政府&公共采购' },
  { title: '营销福利' },
  { title: '商用工程' },
  { title: '中小型企业采购' }
]);
const filterListy = ref<any>([
  {
    title: '适配场景',
    hig: 1,
    list: [
      { title: '全部', id: 1 },
      { title: '1-100', id: 2 },
      { title: '100-500', id: 3 },
      { title: '1000+', id: 4 }
    ]
  },
  {
    title: '适配行业',
    hig: 1,
    list: [
      { title: '全部', id: 1 },
      { title: '食品饮料', id: 2 },
      { title: '食品饮料', id: 3 },
      { title: '食品饮料', id: 4 }
    ]
  },
  {
    title: '价格区间',
    hig: 1,
    list: [
      { title: '全部', id: 1 },
      { title: '香港小熊', id: 2 }
    ]
  },
  {
    title: '推荐标签',
    hig: 1,
    list: [
      { title: '全部', id: 1 },
      { title: '香港小熊', id: 2 }
    ]
  }
]);
const navIndex = ref(0);
const router = useRouter();
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

const onPath = () => {
  router.push('/solve/info');
};
</script>

<style lang="scss" scoped>
.solve {
  width: 100%;

  .solve-head {
    width: 100%;
    background: #ffffff;

    .head-bos {
      width: 1200px;
      margin: 0 auto;
      padding-bottom: 20px;
    }
  }

  .nav-bos {
    border-bottom: 1px solid #e5e7eb;
    width: 1200px;
    padding-bottom: 20px;

    .nav-list {
      height: 32px;
      padding: 0 12px;
      background: #f7f8fa;
      border-radius: 2px 2px 2px 2px;
      font-size: 14px;
      color: #4e5969;
      margin-right: 8px;
      line-height: 32px;
      cursor: pointer;

      &.hig {
        background: #ffe8e8;
        color: #e7000b;
      }

      &:hover {
        color: #e7000b;
      }
    }
  }

  .filter-bos {
    .filter-list {
      margin-top: 20px;

      .filter-title {
        font-size: 14px;
        color: #101828;
        margin-right: 40px;
      }

      .filter-item {
        font-size: 14px;
        color: #364153;
        margin-right: 30px;
        cursor: pointer;

        &.hig {
          color: #e7000b;
        }
      }
    }
  }

  // 数据
  .data-bos {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 0 40px 0;

    .data-list {
      width: 386px;
      height: 302px;
      background: #ffffff;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;

      .data-img {
        height: 200px;
        width: 386px;
      }

      .data-box {
        height: 102px;
        width: 386px;
        padding: 12px 20px;

        .title {
          font-weight: 600;
          font-size: 14px;
          color: #101828;
        }

        .info {
          font-size: 12px;
          color: #364153;
          margin-top: 4px;
        }

        .text {
          font-size: 14px;
          color: #e7000b;
        }
      }
    }
  }

  //分页
  .pagination-bos {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 60px;
    :deep(.el-select__wrapper) {
      background: #f4f4f4;
      box-shadow: 0 0 0 1px #e5e6eb inset;
      border-radius: 2px;
    }
    :deep(.el-select__placeholder) {
      color: #1d2129;
    }
    :deep(.el-input__wrapper) {
      background: #f4f4f4;
      box-shadow: 0 0 0 1px #e5e6eb inset;
      border-radius: 2px;
    }
    :deep(.el-input__inner) {
      color: #1d2129;
    }

    :deep(.btn-prev) {
      background: #f4f4f4;
      border: 1px solid #e5e6eb;
      margin-right: 8px;
    }
    :deep(.btn-next) {
      background: #f4f4f4;
      border: 1px solid #e5e6eb;
      margin-left: 8px;
    }
    :deep(.el-pager) {
      gap: 0 8px;
      li {
        background: #f4f4f4;
        border: 1px solid #e5e6eb;
        color: #1d2129;
      }
    }
  }
}
</style>