53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
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: 4px !important;
|
|
:deep(> div > .title) {
|
|
padding-left: 20px;
|
|
}
|
|
}
|
|
</style>
|