From bca962f79d22001654852c5a404d4eb4b296334a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Sat, 23 Nov 2024 13:25:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=B7=B2=E7=9F=A5=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/cms/cmsNavigation/model/index.ts      |   4 +-
 api/cms/cmsWebsite/model/index.ts         |   3 +
 api/layout/index.ts                       |   4 +-
 components/AppFooter.vue                  |   3 +-
 components/AppHeader.vue                  | 282 ++++++++++++++--------
 components/Banner.vue                     |  18 +-
 composables/useServerRequest.ts           |   2 +-
 layouts/default.vue                       |   7 +-
 pages/components/AboutUs.vue              | 131 +++++++---
 pages/components/Carousel.vue             |  31 ++-
 pages/components/CompanyStyle.vue         |  72 +++++-
 pages/components/Djzt.vue                 | 121 ++++++++++
 pages/components/ImportantInformation.vue | 167 +++++++++++++
 pages/components/NewsCenter.vue           | 128 +++++++---
 pages/components/VideoCenter.vue          |  70 +++++-
 pages/detail/components/LikeArticle.vue   |  24 +-
 pages/detail/components/PageBanner.vue    |  32 +--
 pages/index.vue                           | 123 ++++++++--
 18 files changed, 981 insertions(+), 241 deletions(-)
 create mode 100644 pages/components/Djzt.vue
 create mode 100644 pages/components/ImportantInformation.vue

diff --git a/api/cms/cmsNavigation/model/index.ts b/api/cms/cmsNavigation/model/index.ts
index 66529e2..f60579d 100644
--- a/api/cms/cmsNavigation/model/index.ts
+++ b/api/cms/cmsNavigation/model/index.ts
@@ -1,4 +1,4 @@
-import type { PageParam } from '@/api';
+import type {PageParam} from '@/api';
 import type {CmsDesign} from "~/api/cms/cmsDesign/model";
 
 /**
@@ -79,6 +79,8 @@ export interface CmsNavigation {
   label?: string;
   value?: number;
   design?: CmsDesign;
+  childHeight?: number,
+  showChild?: boolean
 }
 
 /**
diff --git a/api/cms/cmsWebsite/model/index.ts b/api/cms/cmsWebsite/model/index.ts
index 27a9469..f91793f 100644
--- a/api/cms/cmsWebsite/model/index.ts
+++ b/api/cms/cmsWebsite/model/index.ts
@@ -1,4 +1,5 @@
 import type { PageParam } from '@/api';
+import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
 
 /**
  * 网站信息记录表
@@ -88,6 +89,8 @@ export interface CmsWebsite {
   updateTime?: string;
   // 网站配置
   config?: any;
+  topNavs?: CmsNavigation[];
+  bottomNavs?: CmsNavigation[];
 }
 
 /**
diff --git a/api/layout/index.ts b/api/layout/index.ts
index 947f260..05ff55c 100644
--- a/api/layout/index.ts
+++ b/api/layout/index.ts
@@ -3,13 +3,13 @@ import type { ApiResult } from '@/api';
 import type { User } from '@/api/system/user/model';
 import type { UpdatePasswordParam } from './model';
 import { MODULES_API_URL, SERVER_API_URL } from '~/config';
-import type {Website} from "~/api/cms/website/model";
+import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";
 
 /**
  * 获取网站信息
  */
 export async function getSiteInfo() {
-  const res = await request.get<ApiResult<Website>>(
+  const res = await request.get<ApiResult<CmsWebsite>>(
     MODULES_API_URL + '/cms/website/getSiteInfo'
   );
   if (res.data.code === 0 && res.data.data) {
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index 7c9417a..d2b941c 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -69,7 +69,7 @@
         </div>
         <div class="tools flex gap-xl items-center opacity-80 hover:opacity-90">
           <el-tooltip :content="`管理后台`" v-if="config.showAdminIcon">
-            <a :href="`https://${website.tenantId}.websoft.top`" target="_blank"><img src="@/assets/svg/websoft-mark-white.svg" alt="github" width="28" class="text-gray-400" /></a>
+            <a :href="`https://website.websoft.top`" target="_blank"><img src="@/assets/svg/websoft-mark-white.svg" alt="github" width="28" class="text-gray-400" /></a>
           </el-tooltip>
         </div>
       </div>
@@ -97,6 +97,7 @@ import type {Config} from "~/types/global";
 const config = useConfigInfo();
 const website = useWebsite();
 const subMenu = useSubMenu();
+const SysDomain = localStorage.getItem('SysDomain');
 console.log('---------config---------',config.value)
 console.log('---------website---------',website.value)
 console.log('---------subMenu---------',subMenu.value)
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index e830f99..b5c8f11 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -1,104 +1,130 @@
 <template>
-    <header class="header fixed w-full bg-[#3f3e3c] opacity-90  border-b border-gray-200 dark:border-gray-800 -mb-px top-0 z-50 lg:mb-0 lg:border-0">
-      <div class="xl:w-screen-xl xl:p-0 px-4 flex items-center between w-full m-auto bg-[#3f3e3c]">
-        <div class="header___left flex items-center">
-          <div class="logo mt-1 sm:w-[250px] h-7 w-auto py-2 flex items-center">
-            <nuxt-link v-if="config?.siteLogo" to="/">
-              <div class="flex flex-col text-center xl:p-0">
-                <el-image
-                    :src="config.siteLogo"
-                    shape="square"
-                    fit="fill"
-                    class="w-[190px]"
-                    :alt="config.siteName"
-                    :title="config.siteName"
-                />
-              </div>
+  <header
+    class="header fixed w-full bg-[#3f3e3c] opacity-90  border-b border-gray-200 dark:border-gray-800 -mb-px top-0 z-50 lg:mb-0 lg:border-0">
+    <div class="xl:w-screen-xl xl:p-0 px-4 flex items-center between w-full m-auto bg-[#3f3e3c]">
+      <div class="header___left flex items-center">
+        <div class="logo mt-1 sm:w-[250px] h-7 w-auto py-2 flex items-center">
+          <nuxt-link v-if="config?.siteLogo" to="/">
+            <div class="flex flex-col text-center xl:p-0">
+              <el-image
+                :src="config.siteLogo"
+                shape="square"
+                fit="fill"
+                class="w-[190px]"
+                :alt="config.siteName"
+                :title="config.siteName"
+              />
+            </div>
 
-            </nuxt-link>
-            <nuxt-link v-else to="/">
-              <text>{{ config?.siteName }}</text>
-            </nuxt-link>
-          </div>
-          <div class="hidden sm:flex">
-            <el-menu
-                :default-active="currentIndex"
-                mode="horizontal"
-                background-color="transparent"
-                :collapse="true"
-                :ellipsis="false"
-                style="border: none"
-            >
-              <template v-for="(item, index) in navigations">
-                <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${item.path}`">
-                  <template #title><h3 class="text-white">{{ item.title }}</h3></template>
-                  <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${sub.path}`">
-                    <el-space @click="openSpmUrl(`${item.path}`,sub,sub.navigationId)">
-                      <el-avatar v-if="sub.icon" :src="sub.icon" shape="square" size="small"></el-avatar>
-                      <span class="font-bold">{{ sub.title }}</span>
-                    </el-space>
-                  </el-menu-item>
-                </el-sub-menu>
-                <el-menu-item v-else :index="`${item.path}`"><h3 @click="openSpmUrl(`${item.path}`,item,item.navigationId)" class="text-white">{{ item.title }}</h3></el-menu-item>
-              </template>
-            </el-menu>
-          </div>
+          </nuxt-link>
+          <nuxt-link v-else to="/">
+            <text>{{ config?.siteName }}</text>
+          </nuxt-link>
         </div>
-        <div class="header__right items-center pr-4 xl:pr-0 md:flex hidden">
-          <el-space class="sm:flex hidden" size="large" v-if="config.showSearchTools">
-            <el-button v-if="token" @click="loginAdminByToken">控制台</el-button>
-            <ClientOnly>
-              <template v-if="token">
-                <el-dropdown @command="handleCommand">
-                  <el-space class="flex items-center cursor-pointer">
-                    <el-avatar class="cursor-pointer" :src="user?.logo" :size="30" />
-                    <span>{{ user?.tenantName }}</span>
-                  </el-space>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item command="user" @click="openSpmUrl(`/user`)">账户中心</el-dropdown-item>
-                      <el-dropdown-item command="password" @click="openSpmUrl(`/user/password`)">修改密码</el-dropdown-item>
-                      <el-dropdown-item command="auth" @click="openSpmUrl(`/user/auth`)">实名认证</el-dropdown-item>
-                      <el-dropdown-item command="order" @click="openSpmUrl(`/user/order`)">我的订单</el-dropdown-item>
-                      <el-dropdown-item divided command="logOut" @click="openSpmUrl('/user/logout')">退出登录
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </template>
-              <template v-else>
-                <el-button type="primary"  v-if="!token" @click="navigateTo(`/passport/login`)">登录/注册</el-button>
-<!--                <el-button v-if="config.showLoginButton" circle :icon="ElIconUserFilled" @click="goLogin"></el-button>-->
-              </template>
-            </ClientOnly>
-          </el-space>
+        <div class="hidden sm:flex">
+          <el-menu
+            :default-active="currentIndex"
+            mode="horizontal"
+            background-color="transparent"
+            :collapse="true"
+            :ellipsis="false"
+            style="border: none"
+          >
+            <template v-for="(item, index) in navigations">
+              <!--              <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${item.path}`">-->
+              <!--                <template #title><h3 class="text-white">{{ item.title }}</h3></template>-->
+              <!--                <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${sub.path}`">-->
+              <!--                  <el-space @click="openSpmUrl(`${item.path}`,sub,sub.navigationId)">-->
+              <!--                    <el-avatar v-if="sub.icon" :src="sub.icon" shape="square" size="small"></el-avatar>-->
+              <!--                    <span class="font-bold">{{ sub.title }}</span>-->
+              <!--                  </el-space>-->
+              <!--                </el-menu-item>-->
+              <!--              </el-sub-menu>-->
+              <div v-if="item?.children && item.children.length > 0">
+                <div class="px-[20px] relative h-[60px] w-[95px] flex justify-center items-center">
+                  <h3 class="text-white cursor-pointer" @mouseenter="mouseenter(index)" @mouseleave="mouseleave(index)">
+                    {{
+                      item.title
+                    }}</h3>
+                  <div v-if="item.showChild"
+                       class="absolute top-[60px] bg-white p-2 shadow border-t-2 border-[#409eff] left-0 overflow-hidden"
+                       :style="{height: `${item.childHeight}px`}">
+                    <div v-for="(sub,subIndex) in item.children" :key="index" class="w-[200px] p-1 cursor-pointer hover:text-[#409eff]">
+                      <el-space
+                        @click="openSpmUrl(`${item.path}`,sub,sub.navigationId)">
+                        <el-avatar v-if="sub.icon" :src="sub.icon" shape="square"
+                                   size="small"></el-avatar>
+                        <span class="font-bold">{{ sub.title }}</span>
+                      </el-space>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <el-menu-item v-else :index="`${item.path}`"><h3
+                @mouseenter="mouseenter(index)"
+                @mouseleave="mouseleave(index)"
+                @click="openSpmUrl(`${item.path}`,item,item.navigationId)" class="text-white">{{ item.title }}</h3>
+              </el-menu-item>
+            </template>
+          </el-menu>
         </div>
-        <!-- 移动端菜单 -->
-        <div class="sm:hidden flex xl:p-0 px-8">
-          <el-dropdown>
-            <el-space class="el-dropdown-link flex items-center">
-              <el-avatar v-if="token" class="cursor-pointer" :src="user?.avatar" :size="30"/>
-              <el-button v-else :icon="ElIconMenu"></el-button>
-            </el-space>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <template v-for="(item, index) in navigations">
-                  <el-dropdown-item>
-                    <span @click="openSpmUrl(`${item.path}`,item,item.navigationId)">{{ item.title }}</span>
-                  </el-dropdown-item>
-                </template>
-                <template v-if="token">
-                  <el-dropdown-item divided @click="loginDeveloperCenterByToken">会员中心</el-dropdown-item>
-                  <el-dropdown-item divided command="logOut" @click="navigateTo('/user/logout')">退出</el-dropdown-item>
+      </div>
+      <div class="header__right items-center pr-4 xl:pr-0 md:flex hidden">
+        <el-space class="sm:flex hidden" size="large" v-if="config.showSearchTools">
+          <el-button v-if="token" @click="loginAdminByToken">控制台</el-button>
+          <ClientOnly>
+            <template v-if="token">
+              <el-dropdown @command="handleCommand">
+                <el-space class="flex items-center cursor-pointer">
+                  <el-avatar class="cursor-pointer" :src="user?.logo" :size="30"/>
+                  <span>{{ user?.tenantName }}</span>
+                </el-space>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="user" @click="openSpmUrl(`/user`)">账户中心</el-dropdown-item>
+                    <el-dropdown-item command="password" @click="openSpmUrl(`/user/password`)">修改密码
+                    </el-dropdown-item>
+                    <el-dropdown-item command="auth" @click="openSpmUrl(`/user/auth`)">实名认证</el-dropdown-item>
+                    <el-dropdown-item command="order" @click="openSpmUrl(`/user/order`)">我的订单</el-dropdown-item>
+                    <el-dropdown-item divided command="logOut" @click="openSpmUrl('/user/logout')">退出登录
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
                 </template>
-                <el-dropdown-item v-if="!token" divided @click="navigateTo(`/passport/login`)">登录</el-dropdown-item>
-              </el-dropdown-menu>
+              </el-dropdown>
             </template>
-          </el-dropdown>
-        </div>
+            <template v-else>
+<!--              <el-button type="primary" v-if="!token" @click="navigateTo(`/passport/login`)">登录/注册</el-button>-->
+              <!--                <el-button v-if="config.showLoginButton" circle :icon="ElIconUserFilled" @click="goLogin"></el-button>-->
+            </template>
+          </ClientOnly>
+        </el-space>
+      </div>
+      <!-- 移动端菜单 -->
+      <div class="sm:hidden flex xl:p-0 px-8">
+        <el-dropdown>
+          <el-space class="el-dropdown-link flex items-center">
+            <el-avatar v-if="token" class="cursor-pointer" :src="user?.avatar" :size="30"/>
+            <el-button v-else :icon="ElIconMenu"></el-button>
+          </el-space>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <template v-for="(item, index) in navigations">
+                <el-dropdown-item>
+                  <span @click="openSpmUrl(`${item.path}`,item,item.navigationId)">{{ item.title }}</span>
+                </el-dropdown-item>
+              </template>
+              <template v-if="token">
+                <el-dropdown-item divided @click="loginDeveloperCenterByToken">会员中心</el-dropdown-item>
+                <el-dropdown-item divided command="logOut" @click="navigateTo('/user/logout')">退出</el-dropdown-item>
+              </template>
+<!--              <el-dropdown-item v-if="!token" divided @click="navigateTo(`/passport/login`)">登录</el-dropdown-item>-->
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </div>
-      <Passport :visible="showPassport" @done="reload"/>
-    </header>
+    </div>
+    <Passport :visible="showPassport" @done="reload"/>
+  </header>
 </template>
 
 <script setup lang="ts">
@@ -131,6 +157,70 @@ const config = useConfigInfo();
 const affix = useProductAffix();
 const sysDomain = useSysDomain();
 
+const setNav = () => {
+  navigations.value = navigations.value.map(item => {
+    item.showChild = false
+    item.childHeight = 0;
+    return item
+  })
+}
+setNav()
+
+const time = 10
+let interval: NodeJS.Timeout
+const mouseenter = async (index: number) => {
+  let showIndex = -1;
+  for (let i = 0; i < navigations.value.length; i++) {
+    console.log(navigations.value[i].showChild)
+    if (navigations.value[i].showChild) {
+      showIndex = i
+      break
+    }
+  }
+  if (showIndex === index) return
+  const item = navigations.value[index];
+  const childHeight = item.children ? parseInt((item.children?.length * 31).toString()) : 0;
+  await hideAll()
+  item.showChild = true
+  if (item.childHeight === undefined) item.childHeight = 0
+  interval = setInterval(() => {
+    if (item.childHeight !== undefined && item.childHeight >= childHeight && interval) clearInterval(interval)
+    if (item.childHeight !== undefined && item.children !== undefined && (item.childHeight < childHeight)) {
+      item.childHeight += parseInt(((childHeight / item.children?.length) / 5).toString())
+    } else {
+      // item.childHeight = childHeight
+      if (interval) clearInterval(interval)
+    }
+    console.log(item.childHeight, childHeight)
+    // console.log(item.childHeight)
+  }, time)
+}
+
+const mouseleave = () => {
+  if (interval) clearInterval(interval)
+}
+
+const hideAll = () => {
+  return new Promise(resolve => {
+    navigations.value = navigations.value.map(item => {
+      if (item.childHeight === undefined) item.childHeight = 0
+      if (item.showChild) {
+        const childHeight = item.children ? parseInt((item.children?.length * 31).toString()) : 0;
+        const interval = setInterval(() => {
+          if (item.childHeight !== undefined && item.children !== undefined && (item.childHeight > 0)) {
+            item.childHeight -= parseInt(((childHeight / item.children?.length) / 5).toString())
+          } else {
+            item.showChild = false
+            clearInterval(interval)
+          }
+        }, time)
+      }
+      return item
+    })
+    resolve(true)
+  })
+}
+
 // 顶部栏初始数
 const visibleNumber = ref<number>(6);
 config.value.elMenuMaxNumber = 8;
@@ -171,7 +261,7 @@ const reload = async () => {
   const token = localStorage.getItem('token');
   // const domain = localStorage.getItem('SysDomain');
   // if (domain) {
-    // sysDomain.value = domain;
+  // sysDomain.value = domain;
   // }
   // 获取用户信息
   if (token && token != '') {
@@ -181,7 +271,7 @@ const reload = async () => {
     }
     // 获取企业信息
     const {data: companyInfo} = await useServerRequest<ApiResult<Company>>('/system/company/profile', {baseURL: runtimeConfig.public.apiServer})
-    if(companyInfo.value?.data){
+    if (companyInfo.value?.data) {
       company.value = companyInfo.value?.data;
       // sysDomain.value = company.value?.domain || undefined;
       // user.value.tenantName = company.value?.tenantName;
diff --git a/components/Banner.vue b/components/Banner.vue
index 58988fd..9c3cdbe 100644
--- a/components/Banner.vue
+++ b/components/Banner.vue
@@ -1,16 +1,22 @@
 <template>
-  <div class="banner m-auto relative sm:flex mt-[60px]">
+  <div class="banner m-auto relative sm:flex mt-[60px] hidden-sm-and-down">
+    <template v-if="layout && layout.showBanner">
+      <el-image :src="layout?.photo || config.subpageBanner" :class="layout?.style" class="sm:h-auto"></el-image>
+      <div class="banner-bar absolute top-0 w-full sm:flex hidden">
+        <div class="banner-text py-12 md:w-screen-xl m-auto opacity-90 flex flex-col justify-center">
+          <div class="keywords my-4 text-3xl">{{ layout?.name }}</div>
+          <div class="description mb-4 mt-1 text-xl max-w-3xl text-gray-600">{{ layout?.description }}</div>
+        </div>
+      </div>
+    </template>
+  </div>
+  <div class="banner m-auto relative sm:flex mt-[48px] hidden-sm-and-up">
     <template v-if="layout && layout.showBanner">
       <el-image :src="layout?.photo || config.subpageBanner" :class="layout?.style" class="sm:h-auto"></el-image>
       <div class="banner-bar absolute top-0 w-full sm:flex hidden">
         <div class="banner-text py-12 md:w-screen-xl m-auto opacity-90 flex flex-col justify-center">
           <div class="keywords my-4 text-3xl">{{ layout?.name }}</div>
           <div class="description mb-4 mt-1 text-xl max-w-3xl text-gray-600">{{ layout?.description }}</div>
-<!--          <div class="buy-btn">-->
-<!--            <el-button v-if="layout.demoUrl" @click="openSpmUrl(layout.demoUrl)" type="primary">演示地址</el-button>-->
-<!--            <el-button v-if="layout.docUrl" @click="openSpmUrl(layout.docUrl)">产品文档</el-button>-->
-<!--          </div>-->
-<!--          <div class="demo-account mt-3 text-blue-7" v-if="layout?.account">账号密码：{{ layout.account }}</div>-->
         </div>
       </div>
     </template>
diff --git a/composables/useServerRequest.ts b/composables/useServerRequest.ts
index 42a7620..816d2b2 100644
--- a/composables/useServerRequest.ts
+++ b/composables/useServerRequest.ts
@@ -16,7 +16,7 @@ export const useServerRequest = <T>(url: string, opts?: UseFetchOptions<T, unkno
   baseUrl.value = runtimeConfig.public.apiServer;
   // 开发环境
   if(process.env.NODE_ENV === 'development'){
-    baseUrl.value = `http://127.0.0.1:9002/api`
+    // baseUrl.value = `http://127.0.0.1:9002/api`
   }
   // 登录凭证token
   const token = useToken();
diff --git a/layouts/default.vue b/layouts/default.vue
index 79b10c6..999df4d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="overflow-x-hidden">
     <!-- 加载应用 -->
-    <template v-if="!loading" @scroll="handleScroll">
+    <template v-if="!loading">
       <!-- 管理中心界面 -->
       <template v-if="getPath().startsWith('/manage')">
         <slot/>
@@ -39,6 +39,7 @@ const menu = useMenu()
 const token = useToken()
 const subMenu = useSubMenu()
 
+
 // 挂载钩子
 onMounted(() => {
   //必须在onMounted的时候才能用local和window
@@ -94,6 +95,10 @@ const reload = async () => {
     if (website.value.bottomNavs) {
       subMenu.value = website.value?.bottomNavs;
     }
+    if(website.value.config){
+      localStorage.setItem('Domain',website.value.config.Domain);
+      localStorage.setItem('SysDomain',website.value.config.SysDomain);
+    }
   }
 
   // TODO 3 读取网站配置信息
diff --git a/pages/components/AboutUs.vue b/pages/components/AboutUs.vue
index 599e900..f3e5e2c 100644
--- a/pages/components/AboutUs.vue
+++ b/pages/components/AboutUs.vue
@@ -1,21 +1,37 @@
 <template>
-  <div class="w-full bg-white pb-20 mb-3 relative" :style="`background: url('${config?.IndexAboutBg}') no-repeat center`">
-    <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 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>
-      <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="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" :class="config?.IndexAboutStyle" style="font-family: Source Han Serif, SimSun,serif">{{ config?.IndexAboutInfo }}</p>
-      <div class="carousel px-3 text-center">
-        <el-image :src="config?.IndexAboutImg" />
+      <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>
+      <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>
 
 
@@ -27,25 +43,33 @@ import type {ApiResult} from "~/api";
 import type {Config} from "~/types/global";
 
 const props = withDefaults(
-    defineProps<{
-      config?: any;
-      title?: string;
-      comments?: string;
-    }>(),
-    {}
+  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;
-  // }
+// 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();
@@ -56,7 +80,60 @@ const emit = defineEmits<{
 .el-tabs__item {
   font-size: 3em; /* 调整为你想要的字体大小 */
 }
+
 .custom-tabs .el-tabs__item {
-  font-size: 22px; /* 调整为你想要的字体大小 */
+  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>
diff --git a/pages/components/Carousel.vue b/pages/components/Carousel.vue
index dff8d77..8d48b02 100644
--- a/pages/components/Carousel.vue
+++ b/pages/components/Carousel.vue
@@ -1,13 +1,22 @@
 <template>
-  <div class="w-full bg-white mt-[60px] mb-3" 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" @click="openSpmUrl(`https://www.baidu.com`)">
+  <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" />
-        </div>
-      </el-carousel-item>
-    </el-carousel>
-    {{ ad?.imgArr }}
+        </el-carousel-item>
+      </el-carousel>
+    </div>
   </div>
 </template>
 
@@ -58,3 +67,9 @@ watch(
     {immediate: true}
 );
 </script>
+
+<style>
+.hidden-sm-and-up .el-carousel{
+  height: 160px;
+}
+</style>
diff --git a/pages/components/CompanyStyle.vue b/pages/components/CompanyStyle.vue
index dcb5e12..f18a65c 100644
--- a/pages/components/CompanyStyle.vue
+++ b/pages/components/CompanyStyle.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="w-full bg-gray-100 pb-20">
+  <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-6xl font-bold dark:text-gray-700 py-0 line-height-5">
+        <p class="text-gray-200 text-5xl font-bold dark:text-gray-700 py-0 line-height-5">
           {{ comments }}
         </p>
       </div>
@@ -10,11 +10,19 @@
         {{ title }}
       </h2>
     </div>
-    <div class="xl:w-screen-xl m-auto text-xl">
+    <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.path" class="cursor-pointer" />
-          <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-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>
@@ -27,6 +35,7 @@
 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<{
@@ -34,6 +43,7 @@ const props = withDefaults(
       groupId?: number;
       title?: string;
       comments?: string;
+      scrollTop: number;
     }>(),
     {
       title: '卡片标题',
@@ -45,13 +55,13 @@ const emit = defineEmits<{
   (e: 'done'): void;
 }>();
 
-const list = ref<FileRecord[]>([])
+const list = ref<CmsArticle[]>([])
 
 const reload = async () => {
-  const {data: response} = await useServerRequest<ApiResult<PageResult<FileRecord>>>('/file/page',{
-    baseURL: 'https://server.gxwebsoft.com/api',
-    query: {
-      groupId: props.groupId
+  const {data: response} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', {
+    params: {
+      categoryId: 989,
+      limit: 8
     }
   })
   if(response.value?.data){
@@ -59,13 +69,53 @@ const reload = async () => {
       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.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>
diff --git a/pages/components/Djzt.vue b/pages/components/Djzt.vue
new file mode 100644
index 0000000..e440ed7
--- /dev/null
+++ b/pages/components/Djzt.vue
@@ -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>
diff --git a/pages/components/ImportantInformation.vue b/pages/components/ImportantInformation.vue
new file mode 100644
index 0000000..b0e9656
--- /dev/null
+++ b/pages/components/ImportantInformation.vue
@@ -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>
diff --git a/pages/components/NewsCenter.vue b/pages/components/NewsCenter.vue
index becd213..ec548d7 100644
--- a/pages/components/NewsCenter.vue
+++ b/pages/components/NewsCenter.vue
@@ -1,8 +1,5 @@
 <template>
-<!--  <div class="relative">-->
-<!--    <el-image src="https://oss.wsdns.cn/20241108/dbb0ef723f414394bbf6736818f7ac2c.png" class="absolute top-0 z-0" />-->
-<!--  </div>-->
-  <div class="w-full bg-white pb-20 mb-3">
+  <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">
@@ -14,25 +11,30 @@
       </h2>
     </div>
     <div class="xl:w-screen-2xl m-auto text-xl">
-      <el-row :gutter="20">
+      <el-row :gutter="20" v-if="showNews">
         <el-col :span="10">
-          <div class="carousel py-2">
+          <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-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">
+          <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-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>
+                <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>
@@ -42,6 +44,34 @@
     </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>
 
@@ -56,18 +86,19 @@ import {TENANT_ID} from "~/config";
 import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
 
 const props = withDefaults(
-    defineProps<{
-      config?: any;
-      parentId?: number;
-      list?: any[];
-      disabled?: boolean;
-      title?: string;
-      comments?: string;
-    }>(),
-    {
-      title: '卡片标题',
-      comments: '卡片描述'
-    }
+  defineProps<{
+    config?: any;
+    parentId?: number | string;
+    list?: any[];
+    disabled?: boolean;
+    title?: string;
+    comments?: string;
+    scrollTop: number;
+  }>(),
+  {
+    title: '卡片标题',
+    comments: '卡片描述'
+  }
 );
 
 const emit = defineEmits<{
@@ -101,12 +132,12 @@ if (hotResponse.value?.data) {
 
 // 请求文章栏目
 const getCategory = async () => {
-  const { data: categoryInfo } = await useServerRequest<ApiResult<CmsNavigation[]>>('/cms/cms-navigation', {
+  const {data: categoryInfo} = await useServerRequest<ApiResult<CmsNavigation[]>>('/cms/cms-navigation', {
     params: {
       parentId: props.parentId
     }
   })
-  if(categoryInfo.value){
+  if (categoryInfo.value) {
     category.value = categoryInfo.value
     categoryId.value = categoryInfo.value?.data && categoryInfo.value?.data[0].navigationId
   }
@@ -126,11 +157,48 @@ const reload = async () => {
   }
 }
 
+const showNews = ref(false)
+
 watch(
-    () => props.parentId,
-    () => {
-      getCategory();
-    },
-    {immediate: true}
+  () => [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>
diff --git a/pages/components/VideoCenter.vue b/pages/components/VideoCenter.vue
index 9b61415..ab6c01d 100644
--- a/pages/components/VideoCenter.vue
+++ b/pages/components/VideoCenter.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="w-full bg-white pb-20 mb-3">
+  <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-6xl font-bold dark:text-gray-700 py-0 line-height-5">
+        <p class="text-gray-200 text-5xl font-bold dark:text-gray-700 py-0 line-height-5">
           {{ comments }}
         </p>
       </div>
@@ -10,7 +10,7 @@
         {{ title }}
       </h2>
     </div>
-    <div class="xl:w-screen-xl m-auto text-xl" v-if="config">
+    <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="{}">
@@ -23,6 +23,40 @@
       </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">
@@ -34,6 +68,7 @@ const props = withDefaults(
       disabled?: boolean;
       title?: string;
       comments?: string;
+      scrollTop: number;
     }>(),
     {
       title: '卡片标题',
@@ -53,5 +88,34 @@ 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>
diff --git a/pages/detail/components/LikeArticle.vue b/pages/detail/components/LikeArticle.vue
index abf3d37..57e6136 100644
--- a/pages/detail/components/LikeArticle.vue
+++ b/pages/detail/components/LikeArticle.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-affix class="lg:p-0 p-3" v-if="form" :offset="offset" @change="onAffix">
+  <el-affix class="lg:p-0 p-3 hidden-sm-and-down" v-if="form" :offset="offset" @change="onAffix">
     <el-button type="text" color="gray">
       <div class="text-xl text-gray-600 ">推荐文章</div>
       <el-icon class="el-icon--right text-gray-600" color="#999999">
@@ -21,6 +21,28 @@
       </el-card>
     </template>
   </el-affix>
+  <div class="lg:p-0 p-3 hidden-sm-and-up">
+    <el-button type="text" color="gray">
+      <div class="text-xl text-gray-600 ">推荐文章</div>
+      <el-icon class="el-icon--right text-gray-600" color="#999999">
+        <ArrowRightBold/>
+      </el-icon>
+    </el-button>
+    <template v-for="(item,index) in list" :key="index">
+      <el-card shadow="hover" :body-style="{ padding: '0px' }" class="hover:bg-gray-50 cursor-pointer mt-3"
+               @click="openSpmUrl(`/detail`,item,item.articleId,true)">
+        <el-image :src="item.image" fit="fill" :lazy="true" class="w-full md:h-[150px] h-[199px] cursor-pointer"/>
+        <div class="flex-1 px-4 py-5 sm:p-6 !p-4">
+          <div class="text-gray-700 dark:text-white text-base font-semibold  flex items-center gap-1.5">
+            <span class="flex-1 text-xl cursor-pointer max-h-[57px] overflow-hidden">{{ item.title }}</span>
+          </div>
+          <div class="flex items-center gap-1.5 py-2 text-gray-500">
+            <span>{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</span>
+          </div>
+        </div>
+      </el-card>
+    </template>
+  </div>
 </template>
 <script setup lang="ts">
 import { ArrowRightBold } from '@element-plus/icons-vue'
diff --git a/pages/detail/components/PageBanner.vue b/pages/detail/components/PageBanner.vue
index dc52d1e..6300119 100644
--- a/pages/detail/components/PageBanner.vue
+++ b/pages/detail/components/PageBanner.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="banner m-auto relative sm:flex mt-[60px]">
+  <div class="banner m-auto relative sm:flex">
+    <div class="mt-[60px] hidden-sm-and-down"></div>
+    <div class="mt-[51px] hidden-sm-and-up"></div>
     <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg"
          class="pointer-events-none absolute w-full top-[-2px] transition-all text-green-5 flex-shrink-0 opacity-100 duration-[400ms] opacity-80 -z-10">
       <mask id="path-1-inside-1_414_5526" fill="white">
@@ -33,34 +35,6 @@
             <el-space class="mt-4 text-gray-500 dark:text-gray-400">
               {{ dayjs(form.createTime).format('YYYY-MM-DD') }}
             </el-space>
-
-<!--            <el-space class="mt-4">-->
-<!--              <el-button-->
-<!--                  :icon="ElIconView"-->
-<!--                  size="large"-->
-<!--                  v-if="form.demoUrl"-->
-<!--                  @click="openSpmUrl(form.demoUrl)"-->
-<!--              >-->
-<!--                演示地址-->
-<!--              </el-button>-->
-<!--              <el-button-->
-<!--                  v-if="form.buyUrl"-->
-<!--                  :icon="ElIconBottom"-->
-<!--                  size="large"-->
-<!--                  @click="openSpmUrl(form.buyUrl)"-->
-<!--              >-->
-<!--                下载模版-->
-<!--              </el-button>-->
-<!--              <el-button-->
-<!--                  :icon="ElIconMemo"-->
-<!--                  size="large"-->
-<!--                  v-if="form.docUrl"-->
-<!--                  @click="openSpmUrl(form.docUrl)"-->
-<!--              >-->
-<!--                帮助文档-->
-<!--              </el-button>-->
-<!--            </el-space>-->
-
           </div>
         </div>
       </div>
diff --git a/pages/index.vue b/pages/index.vue
index a22eece..b258601 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,21 +1,61 @@
 <template>
 
-<!--    <Flash/>-->
-
-    <Carousel v-if="config" />
-
-    <NewsCenter title="新闻中心" v-if="config" :parentId="parentId" :config="config" comments="News Center"/>
-
-    <AboutUs title="关于我们" v-if="config" :config="config" comments="About Us"/>
-
-    <VideoCenter title="视频中心" v-if="config" :config="config" comments="Video Center" />
-
-    <CompanyStyle title="公司风采" v-if="config" :groupId="groupId" :config="config" comments="Company Style" />
-
-
-<!--  <CompanyList :param="{official: true,recommend: true,limit: 4}" :fit="`cover`"  title="产品服务" comments="拥抱开源、坚守品质；致力于打造安全稳定高可用的WEB应用！"/>-->
-
-<!--  <ProductList :param="{type:0, official: true,limit: 4}" :fit="`cover`" title="产品服务" comments="拥抱开源、坚守品质；致力于打造安全稳定高可用的WEB应用！"/>-->
+  <!--    <Flash/>-->
+
+  <Carousel ref="CarouselRef" v-if="config"/>
+
+  <NewsCenter :scrollTop="scrollTop" ref="NewsCenterRef" title="新闻中心" v-if="config" :parentId="parentId" :config="config"
+              comments="News Center"/>
+
+  <AboutUs :scrollTop="scrollTop" title="关于我们" v-if="config" :config="config" comments="About Us"/>
+
+  <CompanyStyle :scrollTop="scrollTop" title="重大信息公开" v-if="config" :groupId="groupId" :config="config" comments="Important Information"/>
+
+  <Djzt :scrollTop="scrollTop" title="党建专题" v-if="config" :groupId="groupId" :config="config" comments="Party Building Topic"/>
+
+<!--  <div class="xl:w-screen-2xl m-auto text-xl">-->
+<!--    <el-row :gutter="30">-->
+<!--      <el-col :span="12">-->
+<!--        <el-card shadow="hover">-->
+<!--          <template #header>-->
+<!--            <div class="card-header">-->
+<!--              <span class="font-bold">重大信息公开</span>-->
+<!--            </div>-->
+<!--          </template>-->
+<!--          <template v-for="(item,index) in list989" :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">-->
+<!--          <template #header>-->
+<!--            <div class="card-header">-->
+<!--              <span class="font-bold">党建专题</span>-->
+<!--            </div>-->
+<!--          </template>-->
+<!--          <template v-for="(item,index) in list990" :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-row>-->
+<!--  </div>-->
+
+
+  <!--  <VideoCenter :scrollTop="scrollTop"  title="视频中心" v-if="config" :config="config" comments="Video Center"/>-->
+
+  <!--  <CompanyList :param="{official: true,recommend: true,limit: 4}" :fit="`cover`"  title="产品服务" comments="拥抱开源、坚守品质；致力于打造安全稳定高可用的WEB应用！"/>-->
+
+  <!--  <ProductList :param="{type:0, official: true,limit: 4}" :fit="`cover`" title="产品服务" comments="拥抱开源、坚守品质；致力于打造安全稳定高可用的WEB应用！"/>-->
 
 </template>
 <script setup lang="ts">
@@ -24,11 +64,17 @@ import type {BreadcrumbItem, Config} from "~/types/global";
 import Flash from './components/Flash.vue';
 import ArticleList from './components/ArticleList.vue';
 import NewsCenter from "~/pages/components/NewsCenter.vue";
+import Information from '~/pages/components/ImportantInformation.vue';
 import AboutUs from "~/pages/components/AboutUs.vue";
 import VideoCenter from "~/pages/components/VideoCenter.vue";
 import CompanyStyle from "~/pages/components/CompanyStyle.vue";
+import Djzt from "~/pages/components/Djzt.vue";
+import dayjs from "dayjs";
 import Carousel from "~/pages/components/Carousel.vue";
-import type {ApiResult} from "~/api";
+import type {ApiResult, PageResult} from "~/api";
+import {getSpmUrl} from "~/utils/common";
+import type {CmsArticle} from "~/api/cms/cmsArticle/model";
+import {useServerRequest} from "~/composables/useServerRequest";
 
 // 引入状态管理
 const route = useRoute();
@@ -38,7 +84,13 @@ const config = useConfigInfo();
 const groupId = ref()
 const parentId = ref()
 const breadcrumb = ref<BreadcrumbItem>();
+const list989 = ref<CmsArticle[]>([]);
+const list990 = ref<CmsArticle[]>([]);
 
+const scrollTop = ref(0)
+window.onscroll = e => {
+  scrollTop.value = window.document.documentElement.scrollTop
+}
 // 请求数据
 const reload = async () => {
 
@@ -56,12 +108,35 @@ const reload = async () => {
   }
 
   // 网站参数
-  const { data: fields } = await useServerRequest<ApiResult<Config>>('/cms/cms-website-field/config', {baseURL: 'https://server.gxwebsoft.com/api',});
+  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;
     groupId.value = config.value?.IndexPhotoGroupId;
     parentId.value = config.value?.IndexNewsCenterParentId;
   }
+
+  // 重大信息公开
+  // const {data: response989} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', {
+  //   params: {
+  //     categoryId: 989,
+  //     limit: 8
+  //   }
+  // })
+  // if (response989.value?.data) {
+  //   list989.value = response989.value?.data.list
+  // }
+  // 党建专题
+  // const {data: response990} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', {
+  //   params: {
+  //     categoryId: 990,
+  //     limit: 8
+  //   }
+  // })
+  //
+  // if (response990.value?.data) {
+  //   list990.value = response990.value?.data.list
+  // }
+
   // seo
   useHead({
     title: `构建现代WEB应用 · WEBSOFT`,
@@ -80,12 +155,12 @@ const reload = async () => {
 }
 
 watch(
-    () => route.path,
-    (path) => {
-      console.log(path, '=>Path')
+  () => route.path,
+  (path) => {
+    console.log(path, '=>Path')
 
-      reload();
-    },
-    {immediate: true}
+    reload();
+  },
+  {immediate: true}
 );
 </script>