18 changed files with 981 additions and 241 deletions
@ -0,0 +1,121 @@ |
|||
<template> |
|||
<div class="w-full bg-gray-100 pb-20"> |
|||
<div class="text-center flex flex-col items-center py-15 relative "> |
|||
<div class="sub-title"> |
|||
<p class="text-gray-200 text-5xl font-bold dark:text-gray-700 py-0 line-height-5"> |
|||
{{ comments }} |
|||
</p> |
|||
</div> |
|||
<h2 class="text-3xl font-bold tracking-tight text-[#ff0000] dark:text-white sm:text-4xl lg:text-5xl"> |
|||
{{ title }} |
|||
</h2> |
|||
</div> |
|||
<div class="xl:w-screen-xl m-auto text-xl right-to-left hidden-sm-and-down" v-if="show"> |
|||
<el-carousel :interval="4000" type="card" height="450px" arrow="never" indicator-position="none"> |
|||
<el-carousel-item class="relative" v-for="(item,index) in list" :key="index"> |
|||
<el-image :src="item.image" class="cursor-pointer scale-img w-full" /> |
|||
<div class="absolute bg-[#e65a01]/75 w-full py-2 z-100 text-center text-sm text-white bottom-0" v-if="item.comments" @click="openSpmUrl(`/detail`,item,item.articleId,true)">{{ item.comments }}</div> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
</div> |
|||
<div class="xl:w-screen-xl m-auto text-xl right-to-left hidden-sm-and-up"> |
|||
<el-carousel :interval="4000" type="card" height="350px" arrow="never" indicator-position="none"> |
|||
<el-carousel-item class="relative" v-for="(item,index) in list" :key="index"> |
|||
<el-image :src="item.image" class="cursor-pointer scale-img w-full" @click="openSpmUrl(`/detail`,item,item.articleId,true)" /> |
|||
<div class="absolute bg-[#e65a01]/75 w-full py-2 z-100 text-center text-sm text-white bottom-0" v-if="item.comments" >{{ item.comments }}</div> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import {useServerRequest} from "~/composables/useServerRequest"; |
|||
import type {ApiResult, PageResult} from "~/api"; |
|||
import type {FileRecord} from "~/api/system/file/model"; |
|||
import type {CmsArticle} from "~/api/cms/cmsArticle/model"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
config?: any; |
|||
groupId?: number; |
|||
title?: string; |
|||
comments?: string; |
|||
scrollTop: number; |
|||
}>(), |
|||
{ |
|||
title: '卡片标题', |
|||
comments: '卡片描述' |
|||
} |
|||
); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done'): void; |
|||
}>(); |
|||
|
|||
const list = ref<CmsArticle[]>([]) |
|||
|
|||
const reload = async () => { |
|||
const {data: response} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', { |
|||
params: { |
|||
categoryId: 990, |
|||
limit: 8 |
|||
} |
|||
}) |
|||
if(response.value?.data){ |
|||
if(response.value?.data.list){ |
|||
list.value = response.value?.data.list |
|||
} |
|||
} |
|||
// const {data: response} = await useServerRequest<ApiResult<PageResult<FileRecord>>>('/file/page',{ |
|||
// baseURL: 'https://server.gxwebsoft.com/api', |
|||
// query: { |
|||
// groupId: props.groupId |
|||
// } |
|||
// }) |
|||
} |
|||
|
|||
const show = ref(false) |
|||
watch( |
|||
() => [props.groupId, props.scrollTop], |
|||
() => { |
|||
reload(); |
|||
if (props.scrollTop >= 2240) show.value = true |
|||
}, |
|||
|
|||
{immediate: true} |
|||
); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.scale-img:hover { |
|||
animation: scale; |
|||
animation-duration: 0.5s; |
|||
animation-fill-mode: forwards; |
|||
} |
|||
|
|||
@keyframes scale { |
|||
from { |
|||
transform: scale(1); |
|||
} |
|||
to { |
|||
transform: scale(1.1); |
|||
} |
|||
} |
|||
|
|||
.right-to-left { |
|||
animation: right-to-left-ani; |
|||
animation-duration: 0.5s; |
|||
animation-fill-mode: forwards; |
|||
} |
|||
@keyframes right-to-left-ani { |
|||
from { |
|||
transform: translateX(100%); |
|||
} |
|||
to { |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,167 @@ |
|||
<template> |
|||
<div class="xl:w-screen-2xl m-auto text-xl"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<el-card shadow="hover" class="bg-gray-50 w-full h-[150px]"> |
|||
<template #header> |
|||
<div class="card-header"> |
|||
<span class="font-bold text-[#ff0000]">重大信息公开</span> |
|||
</div> |
|||
</template> |
|||
<template v-for="(item,index) in list" :key="index"> |
|||
<li class="flex justify-between py-2"> |
|||
<a class="line-clamp-1 max-w-2xl" :class="`item-${index}`" |
|||
:href="getSpmUrl(`/detail`,item,item.articleId)" target="_blank">{{ item.title }}</a> |
|||
<span class="text-gray-400 font-200">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</span> |
|||
</li> |
|||
</template> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-card shadow="hover" class="bg-gray-50 w-full h-[150px]"> |
|||
<template #header> |
|||
<div class="card-header"> |
|||
<span class="font-bold text-[#ff0000]">党建专题</span> |
|||
</div> |
|||
</template> |
|||
<div class="flex justify-between"> |
|||
<div class="flex flex-col"> |
|||
<span class="text-[#ff0000]">【2023】关于2023年“三重一大”的启动通知</span> |
|||
<span class="text-sm text-gray-500">2023-03-07</span> |
|||
</div> |
|||
<div class="flex flex-col items-end"> |
|||
<span class="text-[#ff0000]">【2023】关于2023年“三重一大”的启动通知</span> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import {getSpmUrl, openSpmUrl} from "~/utils/common"; |
|||
import dayjs from "dayjs"; |
|||
import {useServerRequest} from "~/composables/useServerRequest"; |
|||
import type {ApiResult, PageResult} from "~/api"; |
|||
import type {CmsArticle} from "~/api/cms/cmsArticle/model"; |
|||
import type {CompanyParam} from "~/api/system/company/model"; |
|||
import {TENANT_ID} from "~/config"; |
|||
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
config?: any; |
|||
scrollTop: number; |
|||
parentId?: any; |
|||
disabled?: boolean; |
|||
title?: string; |
|||
comments?: string; |
|||
}>(), |
|||
{ |
|||
title: '卡片标题', |
|||
comments: '卡片描述' |
|||
} |
|||
); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done'): void; |
|||
}>(); |
|||
|
|||
const category = ref<ApiResult<CmsNavigation[]>>(); |
|||
const list = ref<CmsArticle[]>([]); |
|||
const hotList = ref<CmsArticle[]>([]); |
|||
const categoryId = ref(); |
|||
|
|||
// 搜索表单 |
|||
const where = reactive<CompanyParam>({ |
|||
keywords: '' |
|||
}); |
|||
|
|||
const handleClick = () => { |
|||
reload(); |
|||
} |
|||
|
|||
// 轮播图 |
|||
const {data: hotResponse} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', { |
|||
params: { |
|||
recommend: 1, |
|||
limit: 5 |
|||
} |
|||
}) |
|||
if (hotResponse.value?.data) { |
|||
hotList.value = hotResponse.value?.data.list |
|||
} |
|||
|
|||
// 请求文章栏目 |
|||
const getCategory = async () => { |
|||
const {data: categoryInfo} = await useServerRequest<ApiResult<CmsNavigation[]>>('/cms/cms-navigation', { |
|||
params: { |
|||
parentId: props.parentId |
|||
} |
|||
}) |
|||
if (categoryInfo.value) { |
|||
category.value = categoryInfo.value |
|||
categoryId.value = categoryInfo.value?.data && categoryInfo.value?.data[0].navigationId |
|||
} |
|||
await reload(); |
|||
} |
|||
|
|||
// 请求数据 |
|||
const reload = async () => { |
|||
const {data: response} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', { |
|||
params: { |
|||
categoryId: Number(categoryId.value), |
|||
limit: 8 |
|||
} |
|||
}) |
|||
if (response.value?.data) { |
|||
list.value = response.value?.data.list |
|||
} |
|||
} |
|||
|
|||
const showNews = ref(false) |
|||
|
|||
watch( |
|||
() => [props.parentId, props.scrollTop], |
|||
([parentId, scrollTop]) => { |
|||
getCategory(); |
|||
if (props.scrollTop > 70) showNews.value = true |
|||
}, |
|||
{immediate: true} |
|||
); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.left-2-right { |
|||
animation: left-2-right-ani; |
|||
animation-duration: 0.5s; |
|||
animation-fill-mode: forwards; |
|||
} |
|||
|
|||
@keyframes left-2-right-ani { |
|||
from { |
|||
transform: translateX(100%); |
|||
} |
|||
to { |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
.right-to-left { |
|||
animation: right-to-left-ani; |
|||
animation-duration: 0.5s; |
|||
animation-fill-mode: forwards; |
|||
} |
|||
|
|||
@keyframes right-to-left-ani { |
|||
from { |
|||
transform: translateX(-100%); |
|||
} |
|||
to { |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
//.hidden-sm-and-down .carousel{display: none;} |
|||
</style> |
|||
Loading…
Reference in new issue