Compare commits
2 Commits
13936283c0
...
a689336c09
| Author | SHA1 | Date |
|---|---|---|
 科技小王子
|
a689336c09 | 6 months ago |
|
科技小王子
|
ddfc720248 | 6 months ago |
8 changed files with 390 additions and 20 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