新增动效

components/AppHeader.vue

@@ -41,7 +41,7 @@
               <!--                </el-menu-item>-->
               <!--              </el-sub-menu>-->
               <div v-if="item?.children && item.children.length > 0">
-                <div class="px-[20px] relative h-[60px] w-[80px] flex justify-center items-center">
+                <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

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

package.json

@@ -20,6 +20,7 @@
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@typescript-eslint/parser": "^7.1.1",
     "ant-design-vue": "^3.2.11",
+    "aos": "^2.3.4",
     "axios": "^1.7.4",
     "dayjs": "^1.11.5",
     "dayjs-nuxt": "^1.1.2",
@@ -48,6 +49,7 @@
     "@nuxt/image": "^1.7.0",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/i18n": "^8.5.2",
+    "@types/aos": "^3.0.7",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/parser": "^7.1.1",
     "@unocss/nuxt": "^0.62.2",

pages/components/AboutUs.vue

@@ -1,23 +1,25 @@
 <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>
+    <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">
-        <img :src="config?.IndexAboutImg" class="scale-img"/>
+      <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>
+    </template>
   </div>
 
 
@@ -33,6 +35,7 @@ const props = withDefaults(
     config?: any;
     title?: string;
     comments?: string;
+    scrollTop: number;
   }>(),
   {}
 );
@@ -41,7 +44,14 @@ 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',});
@@ -65,6 +75,10 @@ const emit = defineEmits<{
 </style>
 
 <style lang="less" scoped>
+.scale-img {
+  width: 500px;
+}
+
 .scale-img:hover {
   animation: scale;
   animation-duration: 0.5s;
@@ -79,4 +93,34 @@ const emit = defineEmits<{
     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>

pages/components/CompanyStyle.vue

@@ -10,7 +10,7 @@
         {{ 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" 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">
           <img :src="item.path" class="cursor-pointer scale-img" />
@@ -34,6 +34,7 @@ const props = withDefaults(
       groupId?: number;
       title?: string;
       comments?: string;
+      scrollTop: number;
     }>(),
     {
       title: '卡片标题',
@@ -61,11 +62,14 @@ const reload = async () => {
   }
 }
 
+const show = ref(false)
 watch(
-    () => props.groupId,
+    () => [props.groupId, props.scrollTop],
     () => {
       reload();
+      if (props.scrollTop >= 2280) show.value = true
     },
+
     {immediate: true}
 );
 </script>
@@ -85,4 +89,18 @@ watch(
     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>

pages/components/NewsCenter.vue

@@ -1,7 +1,7 @@
 <template>
-<!--  <div class="relative">-->
-<!--    <el-image src="https://oss.wsdns.cn/20241108/dbb0ef723f414394bbf6736818f7ac2c.png" class="absolute top-0 z-0" />-->
-<!--  </div>-->
+  <!--  <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="text-center flex flex-col items-center py-15 relative bg-white">
       <div class="sub-title">
@@ -14,25 +14,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>
@@ -56,18 +61,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 +107,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 +132,47 @@ 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);
+  }
+}
+</style>

pages/components/VideoCenter.vue

@@ -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="{}">
@@ -34,6 +34,7 @@ const props = withDefaults(
       disabled?: boolean;
       title?: string;
       comments?: string;
+      scrollTop: number;
     }>(),
     {
       title: '卡片标题',
@@ -53,5 +54,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>

pages/index.vue

@@ -1,21 +1,22 @@
 <template>
 
-<!--    <Flash/>-->
+  <!--    <Flash/>-->
 
-    <Carousel v-if="config" />
+  <Carousel ref="CarouselRef" v-if="config"/>
 
-    <NewsCenter title="新闻中心" v-if="config" :parentId="parentId" :config="config" comments="News Center"/>
+  <NewsCenter :scrollTop="scrollTop" ref="NewsCenterRef" title="新闻中心" v-if="config" :parentId="parentId" :config="config"
+              comments="News Center"/>
 
-    <AboutUs title="关于我们" v-if="config" :config="config" comments="About Us"/>
+  <AboutUs :scrollTop="scrollTop" title="关于我们" v-if="config" :config="config" comments="About Us"/>
 
-    <VideoCenter title="视频中心" v-if="config" :config="config" comments="Video Center" />
+  <VideoCenter :scrollTop="scrollTop"  title="视频中心" v-if="config" :config="config" comments="Video Center"/>
 
-    <CompanyStyle title="公司风采" v-if="config" :groupId="groupId" :config="config" comments="Company Style" />
+  <CompanyStyle :scrollTop="scrollTop" title="公司风采" v-if="config" :groupId="groupId" :config="config" comments="Company Style"/>
 
 
-<!--  <CompanyList :param="{official: true,recommend: true,limit: 4}" :fit="`cover`"  title="产品服务" comments="拥抱开源、坚守品质；致力于打造安全稳定高可用的WEB应用！"/>-->
+  <!--  <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应用！"/>-->
+  <!--  <ProductList :param="{type:0, official: true,limit: 4}" :fit="`cover`" title="产品服务" comments="拥抱开源、坚守品质；致力于打造安全稳定高可用的WEB应用！"/>-->
 
 </template>
 <script setup lang="ts">
@@ -39,6 +40,10 @@ const groupId = ref()
 const parentId = ref()
 const breadcrumb = ref<BreadcrumbItem>();
 
+const scrollTop = ref(0)
+window.onscroll = e => {
+  scrollTop.value = window.document.documentElement.scrollTop
+}
 // 请求数据
 const reload = async () => {
 
@@ -56,7 +61,7 @@ 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;
@@ -80,12 +85,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>