完成适配移动端

pages/index.vue

@@ -1,14 +1,22 @@
-
 <template>
 
-  <Carousel />
-  <Flash/>
+  <!-- 幻灯片轮播 -->
+  <Carousel/>
 
-  <SiteList title="产品服务" :param="{official: true,limit: 4,sort: 'websiteId',order:'asc'}" :fit="`cover`" />
+  <!-- 着陆页 -->
+  <LandingHero/>
+
+  <!-- 站点列表 -->
+  <SiteList />
+
+  <!-- 插件列表 -->
+<!--  <MarketList />-->
+
+  <!-- 合作伙伴 -->
+  <Partners />
 
 </template>
 <script setup lang="ts">
-import {useConfigInfo} from "~/composables/configState";
 import type {FormRules, FormInstance} from 'element-plus'
 import type {CmsArticle} from "~/api/cms/cmsArticle/model";
 import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
@@ -20,19 +28,21 @@ import {pageCmsArticle} from "~/api/cms/cmsArticle";
 import {pageCmsLink} from "~/api/cms/cmsLink";
 import {addCmsOrder} from "~/api/cms/cmsOrder";
 import {getCaptcha} from "~/api/passport/login";
-import Flash from './components/Flash.vue';
-import Carousel from "~/pages/components/Carousel.vue";
+import Carousel from "~/components/Index/Carousel.vue";
+import LandingHero from "~/components/Index/LandingHero.vue";
+import SiteList from "~/components/Index/SiteList.vue";
+import MarketList from "~/components/Index/MarketList.vue";
+import Partners from "~/components/Index/Partners.vue";
+import Customized from "~/components/Index/Customized.vue";
 
 const route = useRoute();
 const i18n = useI18n();
-const config = useConfigInfo();
 const productList = ref<CmsNavigation[]>([]);
 const caseList = ref<CmsArticle[]>([]);
 const topNews = ref<CmsArticle[]>([]);
 const topNewsImage = ref<string>('');
 const hotNews = ref<CmsArticle[]>([]);
 const links = ref<CmsLink[]>([]);
-const formRef = ref<FormInstance>()
 // 验证码 base64 数据
 const captcha = ref('');
 const text = ref<string>('');
@@ -169,8 +179,6 @@ const reload = async () => {
   }).then(res => {
     if (res) {
       caseList.value = res?.list;
-      caseMaxScroll = caseList.value.length * 303 - 1200;
-      setCaseScrollTimer()
     }
   })
 
@@ -209,199 +217,12 @@ const reload = async () => {
   }).then(res => {
     if (res) {
       links.value = res?.list;
-      linksMaxScroll = links.value.length * 148 - 1200;
-      setLinksScroll()
     }
   })
   setTimeout(() => {
-    setRegionNum()
-    setCountryNum()
-    setOrgNum()
-    setProjectNum()
   }, 1500)
 }
 
-const regionNum = ref(0);
-const countryNum = ref(0);
-const orgNum = ref(480);
-const projectNum = ref(970);
-
-const setRegionNum = () => {
-  if (regionNum.value < 20) {
-    setTimeout(() => {
-      regionNum.value += 1;
-      setRegionNum();
-    }, 70)
-  }
-}
-
-const setCountryNum = () => {
-  if (countryNum.value < 15) {
-    setTimeout(() => {
-      countryNum.value += 1;
-      setCountryNum();
-    }, 70)
-  }
-}
-
-const setOrgNum = () => {
-  if (orgNum.value < 500) {
-    setTimeout(() => {
-      orgNum.value += 1;
-      setOrgNum();
-    }, 70)
-  }
-}
-
-const setProjectNum = () => {
-  if (projectNum.value < 999) {
-    setTimeout(() => {
-      projectNum.value += 1;
-      setProjectNum();
-    }, 70)
-  }
-}
-
-const onScroll = (e: any) => {
-  currentScrollLeft = e.scrollLeft
-  if (currentScrollLeft === 0) currentScrollLeftEnd = 0
-  // console.log(currentScrollLeft)
-}
-
-let currentScrollLeft = 0
-let currentScrollLeftEnd = 0
-let currentScroll = 0
-let scrollNum = 0
-const scrollbarRef = ref()
-const scroll = (dir: string) => {
-  const maxScrollLeft = 309 * 5 - 1120 - 20
-  if (dir === 'left') {
-    if (currentScrollLeft === 0) scrollNum = maxScrollLeft
-    else if (currentScrollLeft < 309) {
-      scrollNum = -currentScrollLeft
-    } else scrollNum = -309
-  } else {
-    if (currentScrollLeftEnd === maxScrollLeft) scrollNum = -maxScrollLeft
-    else if (maxScrollLeft - currentScrollLeftEnd < 309 && maxScrollLeft - currentScrollLeftEnd > 0) {
-      scrollNum = maxScrollLeft - currentScrollLeftEnd
-    } else if ((maxScrollLeft + 10) === currentScrollLeft || (maxScrollLeft - 10) === currentScrollLeft) {
-      scrollNum = -maxScrollLeft
-    } else scrollNum = 309
-  }
-  setScroll()
-}
-
-const setScroll = () => {
-  if (scrollNum > 0) {
-    if (currentScroll < scrollNum) {
-      setTimeout(() => {
-        currentScroll += 5
-        scrollbarRef.value?.setScrollLeft(currentScrollLeftEnd + currentScroll)
-        setScroll()
-      }, 5)
-    } else {
-      currentScroll = 0
-      currentScrollLeftEnd += scrollNum
-    }
-  } else {
-    if (currentScroll > scrollNum) {
-      setTimeout(() => {
-        currentScroll -= 5
-        scrollbarRef.value?.setScrollLeft(currentScrollLeftEnd + currentScroll)
-        setScroll()
-      }, 5)
-    } else {
-      currentScroll = 0
-      currentScrollLeftEnd += scrollNum
-    }
-  }
-  // console.log(currentScrollLeftEnd, scrollNum)
-}
-
-const setScrollTimer = () => {
-  setInterval(() => {
-    scroll('right')
-  }, 2000)
-}
-setScrollTimer()
-
-const linksScrollbarRef = ref()
-let linksCurrentScroll = 0
-const onLinksScroll = (e: any) => {
-  linksCurrentScroll = e.scrollLeft
-}
-
-let linksMaxScroll = 0
-const setLinksScroll = () => {
-  setTimeout(() => {
-    if (linksCurrentScroll < linksMaxScroll) {
-      linksCurrentScroll += 1
-    } else {
-      linksCurrentScroll = 0
-    }
-    // console.log(linksCurrentScroll, linksMaxScroll)
-    linksScrollbarRef.value?.setScrollLeft(linksCurrentScroll)
-    setLinksScroll()
-  }, 15)
-
-}
-
-const caseScrollbarRef = ref()
-let caseCurrentScroll = 0
-const onCaseScroll = (e: any) => {
-  caseCurrentScroll = e.scrollLeft
-}
-
-let caseMaxScroll = 0
-let caseScrollNum = 0
-let caseCurrentScrollLeftEnd = 0
-const setCaseScroll = () => {
-  if (caseCurrentScrollLeftEnd === caseMaxScroll) {
-    caseScrollNum = 0
-    caseCurrentScrollLeftEnd = 0
-  } else if (caseMaxScroll - caseCurrentScrollLeftEnd < 303 && caseMaxScroll - caseCurrentScrollLeftEnd > 0) {
-    caseScrollNum = caseMaxScroll - caseCurrentScrollLeftEnd
-  } else if ((caseMaxScroll + 20) === caseCurrentScroll || (caseMaxScroll - 20) === caseCurrentScroll) {
-    scrollNum = 0
-  } else caseScrollNum = 303
-  console.log(caseCurrentScrollLeftEnd, caseMaxScroll, caseScrollNum)
-  setCaseScrollJob()
-}
-
-const setCaseScrollJob = () => {
-  if (caseScrollNum > 0) {
-    if (caseCurrentScroll < caseScrollNum) {
-      setTimeout(() => {
-        caseCurrentScroll += 5
-        caseScrollbarRef.value?.setScrollLeft(caseCurrentScrollLeftEnd + caseCurrentScroll)
-        setCaseScrollJob()
-      }, 5)
-    } else {
-      caseCurrentScroll = 0
-      caseCurrentScrollLeftEnd += caseScrollNum
-    }
-  } else {
-    if (caseCurrentScroll > caseScrollNum) {
-      setTimeout(() => {
-        caseCurrentScroll -= 5
-        caseScrollbarRef.value?.setScrollLeft(caseCurrentScrollLeftEnd + caseCurrentScroll)
-        setCaseScrollJob()
-      }, 5)
-    } else {
-      caseCurrentScroll = 0
-      caseCurrentScrollLeftEnd += caseScrollNum
-    }
-  }
-}
-
-let caseScrollTimer = null
-const setCaseScrollTimer = () => {
-  if (caseScrollTimer) clearInterval(caseScrollTimer)
-  caseScrollTimer = setInterval(() => {
-    setCaseScroll()
-  }, 2000)
-}
-
 watch(
   () => route.path,
   (path) => {