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.
118 lines
3.4 KiB
118 lines
3.4 KiB
<template>
|
|
<div :class="[prefixCls, 'flex']">
|
|
<div>
|
|
<mai-tab :active="currentTab.id" :data-source="tabs" @change="handleChange"/>
|
|
</div>
|
|
<div :class="`${prefixCls}-content dynamicInfo flex flex-col px-8`" style="border-left: 1px solid #d9d9d9;">
|
|
<div class="flex flex-wrap" v-if="content.length">
|
|
<div class="p-2 rule-item cursor-pointer flex " v-for="item in content" :key="item.id">
|
|
<nuxt-link :to="`/rules/${item.id}`" class="w-full">
|
|
|
|
<el-card :body-style="{ padding: '0px' }">
|
|
<div style="padding: 14px">
|
|
<p class="mb-6">{{ dayjs(item.createtime * 1000).format('YYYY-MM-DD') }}</p>
|
|
<h4 class="text-2xl mb-2 text-ellipsis overflow-hidden"
|
|
style=" line-height:30px;height: 30px;display:inline-block">{{
|
|
item.title
|
|
}}</h4>
|
|
<p style="color: #999" class="rule-desc mb-3">{{ item.description }}</p>
|
|
<div class="bottom">
|
|
<el-button round
|
|
style="font-size: 18px; color: #022950; border-color: #022950;"><nuxt-link :to="`/rules/${item.id}`">查看详情</nuxt-link>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<!-- <h3 class="text-2xl mb-6 w-full overflow-hidden text-ellipsis">{{ item.title }}</h3>-->
|
|
<!-- <p class="text-xl text-zinc-500 mb-6">{{ item.description }}</p>-->
|
|
<!-- <p class="">{{ dayjs(item.createtime * 1000).format('YYYY-MM-DD hh:mm:ss') }}</p>-->
|
|
</nuxt-link>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-else>
|
|
<el-empty description="暂无数据" />
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<Pagination
|
|
:current="current"
|
|
:total="total"
|
|
:limit="limit"
|
|
:pages="pagesRef"
|
|
@change="onChangePage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import dayjs from "dayjs";
|
|
definePageMeta({
|
|
name: '法规标准',
|
|
headerHost: true,
|
|
order: 2,
|
|
})
|
|
useHead({
|
|
title:'法规标准'
|
|
})
|
|
import {randomUUID} from '~~/utils';
|
|
const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)
|
|
|
|
const { technicalApi } = useApi()
|
|
const {prefixCls} = useDesign('mai-wrap');
|
|
|
|
const tabs = ref([
|
|
{
|
|
name: '法规标准',
|
|
id: randomUUID(),
|
|
children: [],
|
|
},
|
|
]);
|
|
const currentTab = ref({});
|
|
const content = ref([]);
|
|
const searchData = ref({})
|
|
async function handleChange(data:any) {
|
|
currentTab.value = data;
|
|
setCurrentPage(1)
|
|
await getList(data)
|
|
}
|
|
|
|
function onChangePage(val: number) {
|
|
setCurrentPage(val)
|
|
getList(currentTab.value)
|
|
}
|
|
async function getList(data: any) {
|
|
if(data) {
|
|
// loading.value = true;
|
|
const {data:listDatas} = await technicalApi.getTechnicalList({...searchData.value,page: current.value, limit: limit, category_id: data.id})
|
|
content.value = listDatas.data;
|
|
// loading.value = false;
|
|
setTotal(listDatas.total)
|
|
|
|
}
|
|
}
|
|
async function getData() {
|
|
const cate = await technicalApi.getTechnicalCate()
|
|
tabs.value[0].children = cate.data
|
|
await handleChange(cate.data[0]);
|
|
}
|
|
getData()
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dynamicInfo {
|
|
margin-top: 0;
|
|
padding-bottom: 100px;
|
|
}
|
|
.rule-item {
|
|
width: calc((100% - 60px) / 3);
|
|
}
|
|
.rule-desc {
|
|
min-height: 76px;
|
|
@include ellipsis-line(3);
|
|
}
|
|
</style>
|