Compare commits
2 Commits
4d45f5fbc3
...
9d9fdc48f4
| Author | SHA1 | Date |
|---|---|---|
 科技小王子
|
9d9fdc48f4 | 6 months ago |
|
科技小王子
|
bca962f79d | 6 months ago |
18 changed files with 1528 additions and 222 deletions
@ -0,0 +1,92 @@ |
|||
import type {PageParam} from '@/api'; |
|||
import type {CmsDesign} from "~/api/cms/cmsDesign/model"; |
|||
|
|||
/** |
|||
* 网站导航记录表 |
|||
*/ |
|||
export interface CmsNavigation { |
|||
// ID
|
|||
navigationId?: number; |
|||
// 上级id, 0是顶级
|
|||
parentId?: number; |
|||
// 菜单名称
|
|||
title?: string; |
|||
// 模型
|
|||
model?: string; |
|||
// 标识
|
|||
code?: string; |
|||
// 菜单路由地址
|
|||
path?: string; |
|||
// 菜单组件地址, 目录可为空
|
|||
component?: string; |
|||
componentPath?: string; |
|||
// 打开位置
|
|||
target?: string; |
|||
// 菜单图标
|
|||
icon?: string; |
|||
// 图标颜色
|
|||
color?: string; |
|||
// 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
|
|||
hide?: number; |
|||
// 可见类型 0所有人 1登录可见 2密码可见
|
|||
permission?: number; |
|||
// 访问密码
|
|||
password?: string; |
|||
// 位置 0不限 1顶部 2底部
|
|||
position?: number; |
|||
// 仅在顶部显示
|
|||
top?: number; |
|||
// 仅在底部显示
|
|||
bottom?: number; |
|||
// 菜单侧栏选中的path
|
|||
active?: string; |
|||
// 其它路由元信息
|
|||
meta?: string; |
|||
// css样式
|
|||
style?: string; |
|||
// 父级栏目路由
|
|||
parentPath?: string; |
|||
// 父级栏目名称
|
|||
parentName?: string; |
|||
// 模型名称
|
|||
modelName?: string; |
|||
// 类型（已废弃）
|
|||
type?: number; |
|||
// 绑定的页面（已废弃）
|
|||
pageId?: number; |
|||
// 项目ID
|
|||
itemId?: number; |
|||
// 是否微信小程序菜单
|
|||
isMpWeixin?: string; |
|||
// 用户ID
|
|||
userId?: number; |
|||
// 设为首页
|
|||
home?: number; |
|||
// 排序(数字越小越靠前)
|
|||
sortNumber?: number; |
|||
// 备注
|
|||
comments?: string; |
|||
// 是否删除, 0否, 1是
|
|||
deleted?: number; |
|||
// 状态, 0正常, 1冻结
|
|||
status?: number; |
|||
// 租户id
|
|||
tenantId?: number; |
|||
// 创建时间
|
|||
createTime?: string; |
|||
children?: CmsNavigation[]; |
|||
disabled?: boolean; |
|||
label?: string; |
|||
value?: number; |
|||
design?: CmsDesign; |
|||
childHeight?: number, |
|||
showChild?: boolean |
|||
} |
|||
|
|||
/** |
|||
* 网站导航记录表搜索条件 |
|||
*/ |
|||
export interface CmsNavigationParam extends PageParam { |
|||
navigationId?: number; |
|||
keywords?: string; |
|||
} |
|||
@ -0,0 +1,103 @@ |
|||
import type { PageParam } from '@/api'; |
|||
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model"; |
|||
|
|||
/** |
|||
* 网站信息记录表 |
|||
*/ |
|||
export interface CmsWebsite { |
|||
// 站点ID
|
|||
websiteId?: number; |
|||
// 网站名称
|
|||
websiteName?: string; |
|||
// 网站标识
|
|||
websiteCode?: string; |
|||
// 网站LOGO
|
|||
websiteIcon?: string; |
|||
// 网站LOGO
|
|||
websiteLogo?: string; |
|||
// 网站LOGO(深色模式)
|
|||
websiteDarkLogo?: string; |
|||
// 网站类型
|
|||
websiteType?: string; |
|||
// 网站关键词
|
|||
keywords?: string; |
|||
// 域名前缀
|
|||
prefix?: string; |
|||
// 绑定域名
|
|||
domain?: string; |
|||
// 全局样式
|
|||
style?: string; |
|||
// 后台管理地址
|
|||
adminUrl?: string; |
|||
// 应用版本 10免费版 20专业版 30永久授权
|
|||
version?: number; |
|||
// 服务到期时间
|
|||
expirationTime?: string; |
|||
// 模版ID
|
|||
templateId?: number; |
|||
// 行业类型(父级)
|
|||
industryParent?: string; |
|||
// 行业类型(子级)
|
|||
industryChild?: string; |
|||
// 企业ID
|
|||
companyId?: number; |
|||
// 所在国家
|
|||
country?: string; |
|||
// 所在省份
|
|||
province?: string; |
|||
// 所在城市
|
|||
city?: string; |
|||
// 所在辖区
|
|||
region?: string; |
|||
// 经度
|
|||
longitude?: string; |
|||
// 纬度
|
|||
latitude?: string; |
|||
// 街道地址
|
|||
address?: string; |
|||
// 联系电话
|
|||
phone?: string; |
|||
// 电子邮箱
|
|||
email?: string; |
|||
// ICP备案号
|
|||
icpNo?: string; |
|||
// 公安备案
|
|||
policeNo?: string; |
|||
// 备注
|
|||
comments?: string; |
|||
// 是否推荐
|
|||
recommend?: number; |
|||
// 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
|
|||
status?: number; |
|||
// 维护说明
|
|||
statusText?: string; |
|||
// 关闭说明
|
|||
statusClose?: string; |
|||
// 全局样式
|
|||
styles?: string; |
|||
// 排序号
|
|||
sortNumber?: number; |
|||
// 用户ID
|
|||
userId?: number; |
|||
// 是否删除, 0否, 1是
|
|||
deleted?: number; |
|||
// 租户id
|
|||
tenantId?: number; |
|||
// 创建时间
|
|||
createTime?: string; |
|||
// 修改时间
|
|||
updateTime?: string; |
|||
// 网站配置
|
|||
config?: any; |
|||
topNavs?: CmsNavigation[]; |
|||
bottomNavs?: CmsNavigation[]; |
|||
} |
|||
|
|||
/** |
|||
* 网站信息记录表搜索条件 |
|||
*/ |
|||
export interface CmsWebsiteParam extends PageParam { |
|||
websiteId?: number; |
|||
status?: number; |
|||
keywords?: string; |
|||
} |
|||
@ -0,0 +1,139 @@ |
|||
<template> |
|||
<div class="w-full bg-white pb-20 mb-3 relative" |
|||
:style="`background: url('${config?.IndexAboutBg}') no-repeat center`"> |
|||
<template v-if="showAboutUs"> |
|||
<div class="text-center flex flex-col items-center py-15 relative "> |
|||
<div class="sub-title"> |
|||
<p class="text-gray-200 text-6xl font-bold dark:text-gray-700 py-0 line-height-5"> |
|||
{{ comments }} |
|||
</p> |
|||
</div> |
|||
<h2 class="text-3xl font-bold tracking-tight text-green-600 dark:text-white sm:text-4xl lg:text-5xl"> |
|||
{{ title }} |
|||
</h2> |
|||
</div> |
|||
<div class="hidden-sm-and-down"> |
|||
<div class="xl:w-screen-xl m-auto text-xl flex justify-between " v-if="config?.IndexAboutInfo"> |
|||
<p class="indent-xl max-w-3/5 px-4 left-2-right" :class="config?.IndexAboutStyle" |
|||
style="font-family: Source Han Serif, SimSun,serif">{{ config?.IndexAboutInfo }}</p> |
|||
<div class="carousel px-3 text-center right-to-left"> |
|||
<img :src="config?.IndexAboutImg" class="scale-img"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="hidden-sm-and-up"> |
|||
<div class="xl:w-screen-xl m-auto text-lg flex flex-col " v-if="config?.IndexAboutInfo"> |
|||
<div class="carousel px-3 text-center right-to-left"> |
|||
<img :src="config?.IndexAboutImg" class="scale-img"/> |
|||
</div> |
|||
<p class="p-3 left-2-right" :class="config?.IndexAboutStyle" |
|||
style="font-family: Source Han Serif, SimSun,serif">{{ config?.IndexAboutInfo }}</p> |
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
</div> |
|||
|
|||
|
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import {useServerRequest} from "~/composables/useServerRequest"; |
|||
import type {ApiResult} from "~/api"; |
|||
import type {Config} from "~/types/global"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
config?: any; |
|||
title?: string; |
|||
comments?: string; |
|||
scrollTop: number; |
|||
}>(), |
|||
{} |
|||
); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done'): void; |
|||
}>(); |
|||
|
|||
const showAboutUs = ref(false) |
|||
watch( |
|||
() => props.scrollTop, |
|||
() => { |
|||
if (props.scrollTop > 700) showAboutUs.value = true |
|||
}, |
|||
{immediate: true} |
|||
); |
|||
// 请求数据 |
|||
// const reload = async () => { |
|||
// const { data: fields } = await useServerRequest<ApiResult<Config>>('/cms/cms-website-field/config', {baseURL: 'https://server.gxwebsoft.com/api',}); |
|||
// if (fields.value?.data) { |
|||
// config.value = fields.value?.data; |
|||
// } |
|||
// } |
|||
|
|||
// reload(); |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
/* 在全局样式表如 app.css 或 styles.css 中添加 */ |
|||
.el-tabs__item { |
|||
font-size: 3em; /* 调整为你想要的字体大小 */ |
|||
} |
|||
|
|||
.custom-tabs .el-tabs__item { |
|||
font-size: 20px; /* 调整为你想要的字体大小 */ |
|||
} |
|||
</style> |
|||
|
|||
<style lang="less" scoped> |
|||
.scale-img { |
|||
width: 500px; |
|||
max-width: 100% !important; |
|||
} |
|||
|
|||
.scale-img:hover { |
|||
animation: scale; |
|||
animation-duration: 0.5s; |
|||
animation-fill-mode: forwards; |
|||
} |
|||
|
|||
@keyframes scale { |
|||
from { |
|||
transform: scale(1); |
|||
} |
|||
to { |
|||
transform: scale(1.1); |
|||
} |
|||
} |
|||
|
|||
.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); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<div> |
|||
<div class="w-full bg-white mt-[60px] mb-3 hidden-sm-and-down" v-if="ad"> |
|||
<el-carousel indicator-position="none" :height="ad?.height"> |
|||
<el-carousel-item v-for="(item,index) in ad?.imgArr" :key="index"> |
|||
<div class="item relative"> |
|||
<el-image :src="item.url" /> |
|||
</div> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
</div> |
|||
<!-- 移动端 --> |
|||
<div class="sm:hidden w-full bg-white mt-[48px] mb-3 hidden-sm-and-up" v-if="ad"> |
|||
<el-carousel indicator-position="none" height="160"> |
|||
<el-carousel-item v-for="(item,index) in ad?.imgArr" :key="index"> |
|||
<el-image :src="item.url" /> |
|||
</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 {CompanyParam} from "~/api/system/company/model"; |
|||
import type {CmsAd} from "~/api/cms/cmsAd/model"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
config?: any; |
|||
list?: any[]; |
|||
disabled?: boolean; |
|||
title?: string; |
|||
comments?: string; |
|||
}>(), |
|||
{ |
|||
title: '卡片标题', |
|||
comments: '卡片描述' |
|||
} |
|||
); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done'): void; |
|||
}>(); |
|||
|
|||
const ad = ref<CmsAd>(); |
|||
|
|||
// 搜索表单 |
|||
const where = reactive<CompanyParam>({ |
|||
keywords: '' |
|||
}); |
|||
|
|||
// 请求数据 |
|||
const reload = async () => { |
|||
const {data: response} = await useServerRequest<ApiResult<PageResult<CmsAd>>>('/cms/cms-ad/page',{params: {adType: '幻灯片',pageName: '首页'}}) |
|||
if (response.value?.data?.list) { |
|||
ad.value = response.value.data?.list[0]; |
|||
} |
|||
} |
|||
|
|||
watch( |
|||
() => props.config, |
|||
() => { |
|||
reload(); |
|||
}, |
|||
{immediate: true} |
|||
); |
|||
</script> |
|||
|
|||
<style> |
|||
.hidden-sm-and-up .el-carousel{ |
|||
height: 160px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,121 @@ |
|||
<template> |
|||
<div class="w-full bg-gray-100 pb-20 bg-white"> |
|||
<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-[#FF6E0CFF] 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="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" /> |
|||
<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: 989, |
|||
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 >= 1580) 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,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> |
|||
@ -0,0 +1,204 @@ |
|||
<template> |
|||
<div class="w-full bg-white pb-20 mb-3 hidden-sm-and-down"> |
|||
<div class="text-center flex flex-col items-center py-15 relative bg-white"> |
|||
<div class="sub-title"> |
|||
<p class="text-gray-200 text-6xl font-bold dark:text-gray-700 py-0 line-height-5"> |
|||
{{ comments }} |
|||
</p> |
|||
</div> |
|||
<h2 class="text-3xl font-bold tracking-tight text-[#409eff] lg:text-5xl"> |
|||
{{ title }} |
|||
</h2> |
|||
</div> |
|||
<div class="xl:w-screen-2xl m-auto text-xl"> |
|||
<el-row :gutter="20" v-if="showNews"> |
|||
<el-col :span="10"> |
|||
<div class="carousel py-2 right-to-left"> |
|||
<el-carousel indicator-position="none" height="400px"> |
|||
<el-carousel-item class="relative" v-for="(item,index) in hotList" :key="index"> |
|||
<el-image :src="item.image" @click="openSpmUrl(`/detail`,item,item.articleId,true)" |
|||
class="cursor-pointer"/> |
|||
<div class="absolute bg-[#e65a01]/75 w-full py-2 z-100 text-center text-sm text-white bottom-0"> |
|||
{{ item.title }} |
|||
</div> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="13"> |
|||
<div class="tabs px-10 w-full left-2-right"> |
|||
<el-tabs class="custom-tabs" v-model="categoryId" @tab-change="handleClick"> |
|||
<el-tab-pane v-for="(cate,index) in category?.data" :key="index" :label="cate.title" |
|||
:name="cate.navigationId" class="text-xl"/> |
|||
</el-tabs> |
|||
<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> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="w-full bg-white pb-20 mb-3 hidden-sm-and-up"> |
|||
<div class="text-center flex flex-col items-center py-15 relative bg-white"> |
|||
<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-4xl font-bold tracking-tight text-[#409eff] lg:text-5xl"> |
|||
{{ title }} |
|||
</h2> |
|||
</div> |
|||
<div class="xl:w-screen-2xl m-auto text-lg"> |
|||
<div class="tabs px-3 w-full left-2-right"> |
|||
<el-tabs class="custom-tabs" v-model="categoryId" @tab-change="handleClick"> |
|||
<el-tab-pane v-for="(cate,index) in category?.data" :key="index" :label="cate.title" |
|||
:name="cate.navigationId" class="text-lg"/> |
|||
</el-tabs> |
|||
<template v-for="(item,index) in list" :key="index"> |
|||
<li class="flex justify-between py-2"> |
|||
<a class="" :class="`item-${index}`" |
|||
:href="getSpmUrl(`/detail`,item,item.articleId)" target="_blank">{{ item.title }}<span class="text-gray-400 font-200 px-1">{{ dayjs(item.createTime).format('MM-DD') }}</span></a> |
|||
|
|||
</li> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</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; |
|||
parentId?: number | string; |
|||
list?: any[]; |
|||
disabled?: boolean; |
|||
title?: string; |
|||
comments?: string; |
|||
scrollTop: number; |
|||
}>(), |
|||
{ |
|||
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> |
|||
@ -0,0 +1,121 @@ |
|||
<template> |
|||
<div class="w-full bg-white pb-20 mb-3 hidden-sm-and-down"> |
|||
<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-[#FF6E0CFF] lg:text-5xl"> |
|||
{{ title }} |
|||
</h2> |
|||
</div> |
|||
<div class="xl:w-screen-xl m-auto text-xl scale" v-if="config && show"> |
|||
<div class="carousel py-3 text-center" v-if="config?.IndexVideoCenter"> |
|||
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="900" height="510" |
|||
:poster="config?.IndexVideoImg" data-setup="{}"> |
|||
<source :src="config?.IndexVideoCenter" type="video/mp4"> |
|||
<p class="vjs-no-js"> |
|||
To view this video please enable JavaScript, and consider upgrading to a web browser that |
|||
<a :href="config?.IndexVideoCenter" target="_blank">supports HTML5 video</a> |
|||
</p> |
|||
</video> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="w-full bg-white pb-20 mb-3 hidden-sm-and-up"> |
|||
<div class="text-center flex flex-col items-center py-15 relative "> |
|||
<div class="sub-title"> |
|||
<p class="text-gray-200 text-6xl font-bold dark:text-gray-700 py-0 line-height-5"> |
|||
{{ comments }} |
|||
</p> |
|||
</div> |
|||
<h2 class="text-3xl font-bold tracking-tight text-[#FF6E0CFF] lg:text-5xl"> |
|||
{{ title }} |
|||
</h2> |
|||
</div> |
|||
<div class="xl:w-screen-xl m-auto text-xl scale" v-if="config && show"> |
|||
<div class="hidden-sm-and-down carousel py-3 text-center" v-if="config?.IndexVideoCenter"> |
|||
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="900" height="510" |
|||
:poster="config?.IndexVideoImg" data-setup="{}"> |
|||
<source :src="config?.IndexVideoCenter" type="video/mp4"> |
|||
<p class="vjs-no-js"> |
|||
To view this video please enable JavaScript, and consider upgrading to a web browser that |
|||
<a :href="config?.IndexVideoCenter" target="_blank">supports HTML5 video</a> |
|||
</p> |
|||
</video> |
|||
</div> |
|||
<div class="hidden-sm-and-up carousel text-center" v-if="config?.IndexVideoCenter"> |
|||
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="350" height="210" |
|||
:poster="config?.IndexVideoImg" data-setup="{}"> |
|||
<source :src="config?.IndexVideoCenter" type="video/mp4"> |
|||
<p class="vjs-no-js"> |
|||
To view this video please enable JavaScript, and consider upgrading to a web browser that |
|||
<a :href="config?.IndexVideoCenter" target="_blank">supports HTML5 video</a> |
|||
</p> |
|||
</video> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
config?: any; |
|||
list?: any[]; |
|||
disabled?: boolean; |
|||
title?: string; |
|||
comments?: string; |
|||
scrollTop: number; |
|||
}>(), |
|||
{ |
|||
title: '卡片标题', |
|||
comments: '卡片描述' |
|||
} |
|||
); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done'): void; |
|||
}>(); |
|||
|
|||
const indexVideo = ref(); |
|||
const indexVideoImg = ref(); |
|||
|
|||
// 请求数据 |
|||
const reload = async () => { |
|||
|
|||
} |
|||
|
|||
const show = ref(false) |
|||
watch( |
|||
() => props.scrollTop, |
|||
() => { |
|||
if (props.scrollTop >= 1500) show.value = true |
|||
}, |
|||
|
|||
{immediate: true} |
|||
); |
|||
|
|||
reload(); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.scale{ |
|||
animation: scale-ani; |
|||
animation-duration: 0.5s; |
|||
animation-fill-mode: forwards; |
|||
} |
|||
|
|||
@keyframes scale-ani { |
|||
from{ |
|||
transform: scale(1.5); |
|||
opacity: 0; |
|||
} |
|||
to{ |
|||
transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue