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

<template>
  <div class="project">
    <div class="project-pages">
      <div class="img-bos">
        <el-image class="solve-img" src="https://yunying.yoe365.com:8045/Photos/134108619338390297.jpg" fit="cover" />
      </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
            @click="onFilter(item1, item2)"
            v-for="(item2, index2) in item1.list"
            :key="index2"
            class="filter-item"
            :class="item1.id == item2.id ? 'hig' : ''"
          >
            {{ item2.title }}
          </div>
        </div>
      </div>
    </div>
    <!-- 数据 -->
    <div class="project-bos">
      <div v-for="(item, index) in dataList" :key="index" class="project-list" @click="onPath('/plan_info/project?id=' + item.id)">
        <el-image class="data-img" :src="item.uploadProgram" fit="cover" />
        <div class="project-box">
          <div class="project1 ellipsis">{{ item.caseTitle || '' }}</div>
          <div class="project2">
            {{ item.projectBrief || '' }}
          </div>
          <div class="project-more flex-row-between">
            <div></div>
            <div class="flex-row-start">
              <div style="margin-right: 5px">了解详情</div>
              <el-icon :size="14" color="#E7000B"><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 游标分页控制 -->
    <div class="table-pagination flex-row-between">
      <div></div>
      <TablePagination v-model:page="httpObj.pageNum" v-model:page-size="httpObj.pageSize" :total="total" @change="getList" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onPath } from '@/utils/siteConfig';
import { getProjectCaseAllList, getCustomerIndustry, getProjectTypeList } from '@/api/plan/index';
import Pagination from '@/components/Pagination/index.vue';
const httpObj = ref<any>({
  topCategoryId: '',
  brandId: '',
  priceRange: '',
  sortField: '',
  sortOrder: '',
  isCustomize: '',
  pageSize: 10,
  pageNum: 1
});
const dataList = ref<any>([]);
const hasMore = ref(true); // 是否还有更多数据
const way = ref<any>(1);
const total = ref(0);

const filterListy = ref<any>([
  {
    title: '客户行业',
    key: 'clientIndustry',
    id: '',
    list: [
      {
        id: '',
        title: '全部'
      }
    ]
  },
  {
    title: '项目类型',
    key: 'projectType',
    id: '',
    list: [
      {
        id: '',
        title: '全部'
      }
    ]
  }
]);

onMounted(() => {
  //适配行业
  getCustomerIndustry({}).then((res) => {
    if (res.code == 200) {
      res.data.forEach((item: any) => {
        item.title = item.industryCategoryName;
        filterListy.value[0].list.push(item);
      });
    }
  });

  //项目类型
  getProjectTypeList({}).then((res) => {
    if (res.code == 200) {
      res.data.forEach((item: any) => {
        item.title = item.typeName;
        filterListy.value[1].list.push(item);
      });
    }
  });
  getList();
});
const getList = () => {
  getProjectCaseAllList(httpObj.value).then((res) => {
    if (res.code == 200) {
      dataList.value = res.rows;
      total.value = res.total;
    }
  });
};

const onFilter = (item1: any, item2: any) => {
  item1.id = item2.id;
  httpObj.value[item1.key] = item2.id;
  getList();
};
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
.project {
  width: 100%;
  .project-pages {
    width: 100%;
    background-color: #ffffff;
    .img-bos {
      width: 100%;
      display: flex;
      justify-content: center;
      .solve-img {
        width: 100%;
        max-width: 1500px;
        min-width: 1200px;
        height: 380px;
        border-radius: 5px;
      }
    }

    .filter-bos {
      width: 100%;
      max-width: 1500px;
      min-width: 1200px;
      margin: 0 auto;
      padding-bottom: 20px;
      .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;
          }
          &:hover {
            color: var(--el-color-primary);
          }
        }
      }
    }
  }
  //项目案例
  .project-bos {
    width: 100%;
    max-width: 1500px;
    min-width: 1200px;
    margin: 0 auto;
    display: flex;
    margin-top: 25px;
    gap: 15px;
    flex-wrap: wrap;
    .project-list {
      flex: 0 0 calc((100% - 45px) / 3);
      width: 0;
      height: 320px;
      cursor: pointer;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        .project1 {
          color: #e7000b !important;
        }
      }

      .project-box {
        width: 100%;
        height: 156px;
        background: #ffffff;
        border-radius: 10px;
        margin-top: -20px;
        z-index: 2;
        position: absolute;
        padding: 20px;
        border: 1px solid #e5e7eb;
      }
      .data-img {
        width: 100%;
        height: 180px;
      }
      .project1 {
        font-weight: 600;
        font-size: 16px;
        color: #101828;
        margin-bottom: 14px;
      }
      .project2 {
        font-size: 14px;
        color: #364153;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2; /* 添加标准属性 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .project-more {
        text-align: right;
        font-size: 14px;
        color: var(--el-color-primary);
        margin-top: 18px;
      }
    }
  }
  .table-pagination {
    width: 100%;
    min-width: 1200px;
    max-width: 1500px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 30px;
  }
}
</style>