lingji-work-fe/src/views/components/workplace/index.vue

<template>
  <div class="m-auto mt-24px max-w-1000px">
    <Container title="推荐产品" class="body">
      <div class="flex flex-wrap">
        <Product
          v-for="product in products"
          :key="product.id"
          class="mt-20px ml-20px"
          :product="product"
          @refresh="getProductList"
        />
      </div>
      <a-empty v-if="products.length === 0" />
    </Container>
    <Container title="成功案例" class="body mt-24px">
      <div class="flex flex-wrap">
        <Case v-for="item in cases" :key="item.id" class="mt-20px ml-20px" :data="item"></Case>
      </div>
      <a-empty v-if="cases.length === 0" />
    </Container>
  </div>
</template>
<script setup lang="ts">
import Container from '@/components/container.vue';
import Product from '@/views/components/workplace/modules/product.vue';
import Case from '@/views/components/workplace/modules/case.vue';
import { fetchProductList, fetchSuccessCaseList } from '@/api/all/index';
import { ref, onMounted } from 'vue';

const products = ref([]);
const cases = ref([]);
onMounted(() => {
  getProductList();
  getSuccessCaseList();
});
const getProductList = async () => {
  products.value = await fetchProductList();
};

const getSuccessCaseList = async () => {
  cases.value = await fetchSuccessCaseList();
};
</script>

<style scoped lang="less">
.body {
  padding-left: 0 !important;
  :deep(> .title) {
    padding-left: 20px;
  }
}
</style>