You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.2 KiB
123 lines
3.2 KiB
<template>
|
|
<div :class="[prefixCls, 'flex full']">
|
|
<div :class="`${prefixCls}-content`">
|
|
<el-skeleton class="flex flex-wrap justify-between" :loading="loading" animated :count="6">
|
|
<template #template>
|
|
<div style="width: 32%;">
|
|
<el-skeleton-item
|
|
variant="image"
|
|
style="width: 400px; height: 267px;"
|
|
/>
|
|
<div style="padding: 14px;">
|
|
<el-skeleton-item variant="h3"
|
|
style="width: 100%; height: 30px;margin-bottom: 15px;"/>
|
|
<div>
|
|
<el-skeleton-item variant="text"
|
|
style="width: 30%;height: 40px; border-radius: 25px"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #default>
|
|
<el-row :gutter="24" v-if="content.data && content.data.length">
|
|
<el-col
|
|
v-for="(item, index) in content.data"
|
|
:key="index"
|
|
:span="8"
|
|
class="mb-6"
|
|
>
|
|
<el-card :body-style="{ padding: '0px' }">
|
|
<el-image style="width: 100%; height: 200px" :src="item.image" :fit="'cover'"/>
|
|
<div style="padding: 14px">
|
|
<h4 class="text-2xl mb-6 text-ellipsis overflow-hidden"
|
|
style=" line-height:30px;height: 30px;display:inline-block">{{
|
|
item.title
|
|
}}</h4>
|
|
<div class="bottom">
|
|
<el-button round
|
|
style="font-size: 18px; color: #022950; border-color: #022950;"><nuxt-link :to="`/case/${item.id}`">查看详情</nuxt-link>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<div v-else>
|
|
<el-empty description="暂无数据"/>
|
|
</div>
|
|
</template>
|
|
</el-skeleton>
|
|
|
|
<div class="mt-32">
|
|
<Pagination
|
|
:current="current"
|
|
:limit="limit"
|
|
:pages="pagesRef"
|
|
:total="total"
|
|
@change="onChangePage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {useThrottleFn} from "@vueuse/core";
|
|
|
|
definePageMeta({
|
|
name: '案例列表',
|
|
headerHost: true,
|
|
order: 6,
|
|
})
|
|
useHead({
|
|
title:'案例列表'
|
|
})
|
|
const {prefixCls} = useDesign('mai-wrap');
|
|
const {commonApi} = useApi();
|
|
const pagination = reactive({
|
|
current: 1,
|
|
limit: 6,
|
|
keyword: '',
|
|
total: 0
|
|
})
|
|
const content = ref([]);
|
|
const loading = ref(true);
|
|
|
|
|
|
const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)
|
|
|
|
async function getData() {
|
|
loading.value = true;
|
|
console.log('limit: >>>>>', limit)
|
|
const {data} = await commonApi.getCaseList({page: current.value, limit: limit});
|
|
content.value = data;
|
|
setTotal(data.total);
|
|
if (data) {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
function onChangePage(val: number) {
|
|
setCurrentPage(val)
|
|
useThrottleFn(getData, 1000)()
|
|
}
|
|
|
|
getData()
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.el-pagination) {
|
|
.el-pager {
|
|
.number {
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.number.is-active {
|
|
background-color: #022950;
|
|
@apply text-base;
|
|
}
|
|
}
|
|
}
|
|
</style>
|