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.
228 lines
8.1 KiB
228 lines
8.1 KiB
<template>
|
|
<div class="mai-ocr-wrap flex justify-center">
|
|
<div class="mai-ocr-item flex cursor-pointer" @click="goTranslate(4)">智能OCR</div>
|
|
<div class="mai-ocr-item flex cursor-pointer" @click="goTranslate(2)">识别</div>
|
|
</div>
|
|
<div :class="classList.news">
|
|
<CommonTitle title="热门资讯"/>
|
|
<el-skeleton :key="1" :loading="hotInformLoading" animated
|
|
style="margin-bottom: 80px;height: 520px">
|
|
<template #template>
|
|
<div class="flex justify-between">
|
|
<el-skeleton-item style="width: 785px;height:520px" variant="image"></el-skeleton-item>
|
|
<div style="width: 48%" class="flex-col flex justify-between">
|
|
<el-skeleton-item variant="text" style="height:100px"></el-skeleton-item>
|
|
<el-skeleton-item variant="text" style="height:100px"></el-skeleton-item>
|
|
<el-skeleton-item variant="text" style="height:100px"></el-skeleton-item>
|
|
<el-skeleton-item variant="text" style="height:100px"></el-skeleton-item>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #default>
|
|
<div class="home-news flex">
|
|
<div class="media-img">
|
|
<img
|
|
style="object-fit: cover"
|
|
:src="newsHilight.image" alt=""
|
|
/>
|
|
</div>
|
|
<div class="newsList">
|
|
<div
|
|
class="news-item flex items-center justify-between"
|
|
v-for="item in newsList"
|
|
:key="item.id"
|
|
@mouseenter="changeCurrentData(item)"
|
|
>
|
|
<div class="flex items-center c-item">
|
|
<div class="date">
|
|
<span class="month">{{ dayjs(item.updatetime * 1000).format('MM/DD') }}</span>
|
|
<span class="year">{{ dayjs(item.updatetime * 1000).format('YYYY') }}</span>
|
|
</div>
|
|
<el-divider class="divider" direction="vertical"/>
|
|
|
|
<nuxt-link class="new-title text-ellipsis" :to="`/inform/${item.id}`">{{ item.title }}
|
|
</nuxt-link>
|
|
</div>
|
|
<nuxt-link :to="`/inform/${item.id}`">
|
|
<img class="open-new-btn" src="~/assets/images/home/go.png" alt=""/>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-skeleton>
|
|
<MoreBtn url="/inform"/>
|
|
</div>
|
|
<div :class="classList.inform">
|
|
<CommonTitle title="TBT/SPS通报"/>
|
|
<el-skeleton :loading="hotTbtLoading" animated :count="2">
|
|
<template #template>
|
|
<div class="flex el-skeleton justify-between flex-wrap w-full mb-4">
|
|
<el-skeleton-item variant="text" style="height:220px; width: 32%"></el-skeleton-item>
|
|
<el-skeleton-item variant="text" style="height:220px; width: 32%"></el-skeleton-item>
|
|
<el-skeleton-item variant="text" style="height:220px; width: 32%"></el-skeleton-item>
|
|
</div>
|
|
</template>
|
|
<template #default>
|
|
<div class="home-inform flex flex-wrap">
|
|
<div class="inform-item flex flex-col" v-for="item in informList" :key="item.id">
|
|
<h3>{{ item.notification_title }}</h3>
|
|
<p>{{ item.product }}</p>
|
|
<span>{{ item.notification_time_text }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-skeleton>
|
|
<MoreBtn url="/tptsps"/>
|
|
</div>
|
|
<div :class="classList.rule">
|
|
<CommonTitle title="法律法规"/>
|
|
<el-skeleton :loading="hotRuleLoading" style="width:100%" animated :count="3">
|
|
<template #template>
|
|
<div class="flex el-skeleton justify-between flex-wrap w-full mb-4">
|
|
<el-skeleton-item variant="text" style="height:100px; width: 49.5%"></el-skeleton-item>
|
|
<el-skeleton-item variant="text" style="height:100px; width: 49.5%"></el-skeleton-item>
|
|
</div>
|
|
</template>
|
|
<template #default>
|
|
<div class="home-rule mb-11 flex flex-wrap justify-between">
|
|
<div class="rule-item" v-for="item in ruleList" :key="item.id">
|
|
<nuxt-link :to="`/rules/${item.id}`">
|
|
<div class="w-full h-full flex items-center">
|
|
<div class="date">
|
|
<span class="month">{{ item.month }}</span>
|
|
<span class="year">{{ item.year }}</span>
|
|
</div>
|
|
<div class="title">{{ item.title }}</div>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-skeleton>
|
|
<MoreBtn url="/rules"/>
|
|
</div>
|
|
<div :class="classList.case">
|
|
<CommonTitle title="案例展示"/>
|
|
<el-skeleton :loading="hostCaseLoading" class="flex justify-between" animated
|
|
style="width: 100%" :count="3">
|
|
<template #template>
|
|
<div class="w-1/3 mx-2 flex flex-col">
|
|
<el-skeleton-item variant="image"
|
|
style="width: 100%; height: 447px; margin-bottom: 20px"></el-skeleton-item>
|
|
<el-skeleton-item variant="text"
|
|
style="height: 30px; margin-bottom: 20px"></el-skeleton-item>
|
|
<el-skeleton-item variant="button"></el-skeleton-item>
|
|
</div>
|
|
</template>
|
|
<template #default>
|
|
<div class="home-case flex flex-wrap">
|
|
<div class="case-item flex flex-col" v-for="item in caseList" :key="item.id">
|
|
<el-image class="img" :fit="'cover'" :src="item.image" alt=""/>
|
|
<p class="text-ellipsis w-full overflow-hidden"
|
|
style="white-space:nowrap;height: 30px; line-height: 30px">{{ item.title }}</p>
|
|
<button class="more">
|
|
<nuxt-link :to="`/case/${item.id}`">立即查看</nuxt-link>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-skeleton>
|
|
<MoreBtn url="/case"/>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {InformationDto} from "~~/api/types";
|
|
import dayjs from 'dayjs';
|
|
|
|
definePageMeta({
|
|
name: '首页',
|
|
headerHost: false,
|
|
homeBanner:true,
|
|
order: 1,
|
|
})
|
|
useHead({
|
|
title:'首页'
|
|
})
|
|
const hotInformLoading = ref(true)
|
|
const hotTbtLoading = ref(true)
|
|
const hotRuleLoading = ref(true)
|
|
const hostCaseLoading = ref(true)
|
|
const {prefixCls: prefixNews} = useDesign('news-wrap');
|
|
const {prefixCls: prefixInform} = useDesign('inform-wrap');
|
|
const {prefixCls: prefixRule} = useDesign('rule-wrap');
|
|
const {prefixCls: prefixCase} = useDesign('case-wrap');
|
|
const {getToken, setLoginVisible} = useUserInfo()
|
|
const classList = reactive({
|
|
news: [`${prefixNews} mai-section`],
|
|
inform: [`${prefixInform} mai-section`],
|
|
rule: [`${prefixRule} mai-section`],
|
|
case: [`${prefixCase} mai-section`],
|
|
});
|
|
|
|
const newsList = ref();
|
|
const informList = ref();
|
|
const ruleList = ref();
|
|
const caseList = ref();
|
|
const newsHilight = ref<InformationDto>({
|
|
id: '',
|
|
title: '',
|
|
})
|
|
const router = useRouter();
|
|
|
|
async function getData() {
|
|
const {homeApi} = useApi()
|
|
hotInformLoading.value = true;
|
|
hotTbtLoading.value = true;
|
|
hotRuleLoading.value = true;
|
|
hostCaseLoading.value = true;
|
|
const {data: hotInformation} = await homeApi.getHotNewsInfo(1, 4)
|
|
const {data: hotTechnical} = await homeApi.getHotTechnical(1, 6)
|
|
const {data: hotCase} = await homeApi.getHotCase(1, 3)
|
|
const {data: hotTs} = await homeApi.getHotTs(1, 6)
|
|
newsList.value = hotInformation?.data;
|
|
informList.value = hotTs?.data
|
|
ruleList.value = hotTechnical?.data
|
|
caseList.value = hotCase?.data
|
|
if (newsList.value.length) {
|
|
changeCurrentData(newsList.value[0])
|
|
}
|
|
hotInformLoading.value = false;
|
|
hotTbtLoading.value = false;
|
|
hotRuleLoading.value = false;
|
|
hostCaseLoading.value = false;
|
|
|
|
console.log('hotInformation>>>>', hotInformation)
|
|
}
|
|
|
|
function changeCurrentData(data: InformationDto) {
|
|
console.log('data.image>>>>', data.image)
|
|
newsHilight.value = Object.assign({}, data);
|
|
newsHilight.value.image = import.meta.env.VITE_GLOB_ORIGIN + newsHilight.value.image
|
|
}
|
|
function goTranslate(type: number){
|
|
if (!getToken) {
|
|
setLoginVisible(true, {
|
|
path:'/translate',
|
|
query: {
|
|
type: type
|
|
}
|
|
})
|
|
}else {
|
|
setLoginVisible(false, false)
|
|
router.push({
|
|
path:'/translate',
|
|
query: {
|
|
type: type
|
|
}
|
|
})
|
|
}
|
|
}
|
|
getData()
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~~/assets/style/home.scss';
|
|
</style>
|