新增动效

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,6 +1,7 @@
 <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">
@@ -12,12 +13,13 @@
         </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"
+        <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">
+        <div class="carousel px-3 text-center right-to-left">
           <img :src="config?.IndexAboutImg" class="scale-img"/>
         </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

@@ -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>
@@ -58,11 +63,12 @@ import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
 const props = withDefaults(
   defineProps<{
     config?: any;
-      parentId?: number;
+    parentId?: number | string;
     list?: any[];
     disabled?: boolean;
     title?: string;
     comments?: string;
+    scrollTop: number;
   }>(),
   {
     title: '卡片标题',
@@ -126,11 +132,47 @@ const reload = async () => {
   }
 }
 
+const showNews = ref(false)
+
 watch(
-    () => props.parentId,
-    () => {
+  () => [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

@@ -2,15 +2,16 @@
 
   <!--    <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应用！"/>-->
@@ -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 () => {