From 79ac0d220d7b821507d6949178961fbbad43ce9f Mon Sep 17 00:00:00 2001
From: xpy01xpy <49626679+xpy01xpy@users.noreply.github.com>
Date: Wed, 18 Sep 2024 09:53:18 +0800
Subject: [PATCH] Scaaienter (#266)

* add scaenter

* fix style

* fix style

* update github url
---
 src/components/ai/AiButton.astro            |  32 +++
 src/components/ai/HomeIntroduce.astro       |  30 +--
 src/components/home/Carousel.astro          |   6 +-
 src/components/home/Carousel_ai.astro       | 109 ----------
 src/components/home/CompaniesFeedback.astro |   1 +
 src/components/home/HomeIntroduce.astro     |  91 +++++---
 src/components/home/HomeIntroduce_ai.astro  | 220 --------------------
 7 files changed, 97 insertions(+), 392 deletions(-)
 create mode 100644 src/components/ai/AiButton.astro
 delete mode 100644 src/components/home/Carousel_ai.astro
 delete mode 100644 src/components/home/HomeIntroduce_ai.astro

diff --git a/src/components/ai/AiButton.astro b/src/components/ai/AiButton.astro
new file mode 100644
index 000000000..3d335b2d1
--- /dev/null
+++ b/src/components/ai/AiButton.astro
@@ -0,0 +1,32 @@
+---
+import { useTranslations } from "@i18n/util";
+import Button from "@components/home/StarAndForkV2/Button.jsx";
+import Video from "@components/home/StarAndForkV2/Video.jsx";
+
+const t = useTranslations(Astro);
+---
+
+<div class="flex">
+  <Button 
+    size="large"
+    class="rounded-3xl mr-4 text-base-100 min-w-[9rem]"
+    href="/ai/get-started/"
+    target="_blank"
+    type="primary"
+    iconClass="text-base-100"
+  >
+    <Video theme="light" class="text-base-100"/>
+    {t('commmon.footer.actions.start')}
+  </Button>
+
+  <Button 
+    size="large"
+    class="rounded-3xl mr-4 text-neutral w-[9rem]"
+    href="https://github.com/alibaba/spring-ai-alibaba"
+    target="_blank"
+    type="secondary"  
+    iconClass="text-neutral"
+  >
+    GITHUB
+  </Button>
+</div>
\ No newline at end of file
diff --git a/src/components/ai/HomeIntroduce.astro b/src/components/ai/HomeIntroduce.astro
index 72585c8f1..6b02b8fb8 100644
--- a/src/components/ai/HomeIntroduce.astro
+++ b/src/components/ai/HomeIntroduce.astro
@@ -1,9 +1,6 @@
 ---
 import { useTranslations } from "@i18n/util";
-import Button from "@components/home/StarAndForkV2/Button.jsx";
-import Video from "@components/home/StarAndForkV2/Video.jsx";
-import { SITE } from "@utils/config";
-
+import AiButton from "@components/ai/AiButton.astro";
 
 const t = useTranslations(Astro);
 ---
@@ -18,30 +15,7 @@ const t = useTranslations(Astro);
         <p class=`cursor-pointer leading-[5rem] text-neutral mb-8 xl:text-[2rem] lg:text-[2rem] md:text-[2rem] sm:text-[1.5rem] text-[1rem]`>
             {t('home.website.ai.quickly.develop')}
         </p>
-        <div class="flex">
-          <Button 
-            size="large"
-				    class="rounded-3xl mr-4 text-base-100 w-[9rem]"
-            href="/ai/get-started/"
-            target="_blank"
-            type="primary"
-            iconClass="text-base-100"
-          >
-            <Video theme="light" class="text-base-100"/>
-            {t('commmon.footer.actions.start')}
-          </Button>
-
-          <Button 
-            size="large"
-				    class="rounded-3xl mr-4 text-neutral w-[9rem]"
-            href="https://github.com/alibaba/spring-ai-alibaba"
-            target="_blank"
-            type="secondary"  
-            iconClass="text-neutral"
-          >
-            GITHUB
-          </Button>
-        </div>
+        <AiButton />
       </div>
     </ai-home-introduce>
   </div>
diff --git a/src/components/home/Carousel.astro b/src/components/home/Carousel.astro
index ad3cedbb8..78c3e5d86 100644
--- a/src/components/home/Carousel.astro
+++ b/src/components/home/Carousel.astro
@@ -13,11 +13,11 @@ const {
 
 <div 
     id="carousel-wrapper" 
-    class=" relative flex flex-col justify-center items-center bg-muted" 
+    class="max-w-[90rem] mx-auto relative flex flex-col justify-center items-center bg-base-100" 
     data-duration={duration}
     data-useduration={useduration}
 >
-    <div class="md:w-[85.125rem] ">
+    <div class="lg:max-w-[90rem] w-full">
         <div class="carousel-item block">
             <slot name="prev"></slot>
         </div>
@@ -28,7 +28,7 @@ const {
     </div>
 
     <!-- 轮播控制按钮 -->
-    <div class='md:w-[85.125rem] absolute bottom-[20px] md:left-auto left-[20px]' >
+    <div class='max-w-[85.125rem] absolute bottom-[20px] left-[2.5rem]' >
     
     <div class="w-[112px]  flex justify-between ">
         <div id="prev" class="cursor-pointer group">
diff --git a/src/components/home/Carousel_ai.astro b/src/components/home/Carousel_ai.astro
deleted file mode 100644
index 78c3e5d86..000000000
--- a/src/components/home/Carousel_ai.astro
+++ /dev/null
@@ -1,109 +0,0 @@
----
-interface Props {
-    useduration?: string;   // 是否启用自动轮播  apply / disabled
-    duration?: number;      // 图片轮播时间 例如: 1000。 （组件默认 5000s）
-}
-
-const {
-    duration=5000,
-    useduration="disabled",
-} = Astro.props as Props;
----
-
-
-<div 
-    id="carousel-wrapper" 
-    class="max-w-[90rem] mx-auto relative flex flex-col justify-center items-center bg-base-100" 
-    data-duration={duration}
-    data-useduration={useduration}
->
-    <div class="lg:max-w-[90rem] w-full">
-        <div class="carousel-item block">
-            <slot name="prev"></slot>
-        </div>
-    
-        <div class="carousel-item hidden">
-            <slot name="next"></slot>
-        </div>
-    </div>
-
-    <!-- 轮播控制按钮 -->
-    <div class='max-w-[85.125rem] absolute bottom-[20px] left-[2.5rem]' >
-    
-    <div class="w-[112px]  flex justify-between ">
-        <div id="prev" class="cursor-pointer group">
-            <svg class="group-hover:hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="48" height="30" viewBox="0 0 48 30"><g transform="matrix(-1,0,0,1,96,0)"><g><rect x="48" y="0" width="48" height="30" rx="15" fill="#E6F5E7" fill-opacity="1"/></g><g><g><rect x="63" y="3" width="24" height="24" rx="0" fill-opacity="0" stroke-opacity="1" stroke="#060E07" fill="none" stroke-width="0"/></g><g><path d="M84,15.75L60,15.75L60,14.25L84,14.25L84,15.75Z" fill-rule="evenodd" fill="#6B8A88" fill-opacity="1"/></g><g><path d="M85.06066,15L78.53033,8.46967L77.46967,9.53033L82.93934,15L77.46967,20.4697L78.53033,21.5303L85.06066,15Z" fill-rule="evenodd" fill="#6B8A88" fill-opacity="1"/></g></g></g></svg>
-            <svg class="hidden group-hover:block" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="48" height="30" viewBox="0 0 48 30"><g transform="matrix(-1,0,0,1,96,0)"><g><rect x="48" y="0" width="48" height="30" rx="15" fill="#E6F5E7" fill-opacity="1"/></g><g><g><rect x="63" y="3" width="24" height="24" rx="0" fill-opacity="0" stroke-opacity="1" stroke="#060E07" fill="none" stroke-width="0"/></g><g><path d="M84,15.75L60,15.75L60,14.25L84,14.25L84,15.75Z" fill-rule="evenodd" fill="#2B3B3A" fill-opacity="1"/></g><g><path d="M85.06066,15L78.53033,8.46967L77.46967,9.53033L82.93934,15L77.46967,20.4697L78.53033,21.5303L85.06066,15Z" fill-rule="evenodd" fill="#2B3B3A" fill-opacity="1"/></g></g></g></svg>
-        </div>
-        <div id="next" class="cursor-pointer ml-[16px] group">
-            <svg class="rotate-180 group-hover:hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="48" height="30" viewBox="0 0 48 30"><g transform="matrix(-1,0,0,1,96,0)"><g><rect x="48" y="0" width="48" height="30" rx="15" fill="#E6F5E7" fill-opacity="1"/></g><g><g><rect x="63" y="3" width="24" height="24" rx="0" fill-opacity="0" stroke-opacity="1" stroke="#060E07" fill="none" stroke-width="0"/></g><g><path d="M84,15.75L60,15.75L60,14.25L84,14.25L84,15.75Z" fill-rule="evenodd" fill="#6B8A88" fill-opacity="1"/></g><g><path d="M85.06066,15L78.53033,8.46967L77.46967,9.53033L82.93934,15L77.46967,20.4697L78.53033,21.5303L85.06066,15Z" fill-rule="evenodd" fill="#6B8A88" fill-opacity="1"/></g></g></g></svg>
-            <svg class="rotate-180 hidden group-hover:block" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="48" height="30" viewBox="0 0 48 30"><g transform="matrix(-1,0,0,1,96,0)"><g><rect x="48" y="0" width="48" height="30" rx="15" fill="#E6F5E7" fill-opacity="1"/></g><g><g><rect x="63" y="3" width="24" height="24" rx="0" fill-opacity="0" stroke-opacity="1" stroke="#060E07" fill="none" stroke-width="0"/></g><g><path d="M84,15.75L60,15.75L60,14.25L84,14.25L84,15.75Z" fill-rule="evenodd" fill="#2B3B3A" fill-opacity="1"/></g><g><path d="M85.06066,15L78.53033,8.46967L77.46967,9.53033L82.93934,15L77.46967,20.4697L78.53033,21.5303L85.06066,15Z" fill-rule="evenodd" fill="#2B3B3A" fill-opacity="1"/></g></g></g></svg>
-        </div>
-    </div>
-</div>
-</div>
-
-<script>
-    // 包裹元素
-    const carouselWrapper = document.getElementById('carousel-wrapper'); 
-    // 利用 html dataset 获取 props 变量参数
-    const duration = carouselWrapper?.dataset?.duration;
-    const useduration = carouselWrapper?.dataset?.useduration;
-    // 所有可执行的轮播项
-    const items = document.querySelectorAll('.carousel-item');
-    const nextBtn = document.getElementById('next');
-    const prevBtn = document.getElementById('prev');
-
-    // 轮播切换部分
-    let currentItem = 0;
-    function showItem(index) {
-        items.forEach((item, idx) => {
-            item.style.display = 'none';
-            if (idx === index) {
-                item.style.display = 'block';
-            };
-        });
-    };
-    // 下一项
-    nextBtn.addEventListener('click', () => {
-        currentItem = (currentItem + 1) % items.length;
-        showItem(currentItem);
-    });
-    // 上一项
-    prevBtn.addEventListener('click', () => {
-        currentItem = (currentItem - 1 + items.length) % items.length;
-        showItem(currentItem);
-    });
-
-    // 计时器部分
-    let timer = null;
-    // 切换轮播、利用按钮点击事件
-    function switchPicture() {
-        if(timer) {
-            prevBtn.click();
-            timer = null;
-            timerStart();
-        };
-    };
-    function timerStart() {
-        timer = setTimeout(switchPicture, duration);
-    };
-    // 依据 proos.useduration 判断是否默认开启 循环切换图片
-    if(useduration == 'apply') {
-        // 鼠标划入 停止轮播
-        carouselWrapper.addEventListener('mouseenter',() =>{
-            if(timer) {
-                clearTimeout(timer);
-                timer = null;
-            };
-        });
-        // 鼠标划出 继续轮播
-        carouselWrapper.addEventListener('mouseleave',() =>{
-            if(!timer) {
-                timerStart();
-            };
-        });
-        // 默认开启
-        timerStart();
-    };
- </script>
diff --git a/src/components/home/CompaniesFeedback.astro b/src/components/home/CompaniesFeedback.astro
index eec25239c..fd5073a16 100644
--- a/src/components/home/CompaniesFeedback.astro
+++ b/src/components/home/CompaniesFeedback.astro
@@ -113,6 +113,7 @@ const themeCardColor = {
 
 <style is:global>
   .companies-feedback{
+    overflow: hidden;
   .slider {
     transition: background-color 0.5s;
   }
diff --git a/src/components/home/HomeIntroduce.astro b/src/components/home/HomeIntroduce.astro
index cc3e52517..5d6ad0b7f 100644
--- a/src/components/home/HomeIntroduce.astro
+++ b/src/components/home/HomeIntroduce.astro
@@ -5,6 +5,7 @@ import Carousel from "./Carousel.astro";
 import ProductDisplayCard from "@components/home/ProductDisplayCard.astro";
 import { SITE } from "@utils/config";
 import sendFetch from "@/utils/sendFetch";
+import AiButton from "@components/ai/AiButton.astro";
 import type { StarAndForkT } from 'src/types';
 
 const t = useTranslations(Astro);
@@ -14,43 +15,40 @@ const ifzh = isChinese(Astro);
 const { stargazers_count=0, forks_count=0 }:StarAndForkT = await sendFetch("https://api.github.com/repos/alibaba/spring-cloud-alibaba");
 ---
 
-<div class="home-introduce-wrapper">
+<div class="home-introduce-wrapper bg-base-100">
     <Carousel
         useduration="apply"
         duration={5000}
     >
-        <a 
-            slot="prev" 
-            href="/docs/2023/user-guide/ai/overview/" 
-            target="_blank"
-            class="block md:w-full min-h-[366px] bg-muted flex"
-        >
-          <img 
-            class="w-full md:h-[366px] flex hidden md:inline-block"
-            src={
-            ifzh
-            ?'https://img.alicdn.com/imgextra/i4/O1CN01aBL7MT1fmUcZG1WtR_!!6000000004049-2-tps-1440-366.png'
-            :'https://img.alicdn.com/imgextra/i3/O1CN01wLrk0I1KxO71GScBG_!!6000000001230-2-tps-1440-366.png'}
-          />
-          <img 
-            class="h-[366px] md:hidden"
-            src={
-              ifzh
-              ?'https://img.alicdn.com/imgextra/i2/O1CN01gOj3s728PFNTjwTfl_!!6000000007924-2-tps-780-732.png'
-              :'https://img.alicdn.com/imgextra/i2/O1CN01XbmHfa1YaOqwo9Lnf_!!6000000003075-2-tps-780-732.png'
-              }
-          />
-        </a>
+        <div slot="prev" class="block w-full min-h-[500] flex banner-toai max-w-[90rem]">
+          <a
+              href="/ai/" 
+              target="_blank"
+              class="block w-full"
+          >
+            <div class="w-full min-h-[31.25rem] px-[2.5rem]">
+              <h1 class="cursor-pointer xl:pt-[5.625rem] lg:pt-[5.625rem] md:pt-[6rem] pt-[5.625rem] xl:text-[4.5rem] lg:text-[4rem] md:text-[4rem] sm:text-[3rem] text-[2rem] text-neutral">
+                Spring AI Alibaba
+              </h1>
+              <p class="cursor-pointer leading-[5rem] text-neutral mb-8 xl:text-[2rem] lg:text-[2rem] md:text-[2rem] sm:text-[1.5rem] text-[1rem]">
+                {t('home.website.ai.quickly.develop')}
+              </p>
+            </div>
+          </a>
+          <div class="aibutton-a absolute bottom-[8.125rem] left-[2.5rem]">
+            <AiButton />
+          </div>
+        </div>
 
         <home-introduce
             slot="next"
-            class="introduce flex flex-col justify-center items-center  min-h-[366px]"
+            class="introduce flex flex-col justify-center items-center h-full min-h-[31.25rem]"
         >
-            <div class="top-section flex flex-col relative mb-[111px]">
-                <h1 class="font-light introduce_about pt-6 pb-4 text-warning text-xs mt-[2.375rem]">
+            <div class="top-section flex flex-col relative">
+                <h1 class="font-light introduce_about pt-6 pb-4 text-warning text-xs">
                     {t("home.introduce.about")}
                 </h1>
-                <p class=`title leading-[5rem] text-neutral mb-8 ${ifzh ? 'text-[3.75rem]' : 'text-[4rem]'}`>
+                <p class=`title leading-[5rem] text-neutral mb-8 ${ifzh ? 'lg:text-[3.75rem] text-[2.75rem]' : 'text-[4rem]'}`>
                     {t("home.introduce.title")}
                 </p>
                 <StarAndForkV2 client:load SITE={SITE} stargazers_count={stargazers_count} forks_count={forks_count} />
@@ -65,10 +63,18 @@ const { stargazers_count=0, forks_count=0 }:StarAndForkT = await sendFetch("http
     a {
       text-decoration: inherit;
       color: theme("colors.accent");
+    }    
+    .banner-toai{
+      background: url('https://gw.alicdn.com/imgextra/i3/O1CN01MLx4AB1MAxV8Z6pGh_!!6000000001395-0-tps-5760-2000.jpg') no-repeat;
+      background-size: cover;
+      background-position: 0 0;
+    }
+    .aibutton-a a:nth-child(1) {
+      color: theme("colors.base-100");
+    }
+    .aibutton-a a:nth-child(2) {
+      color: theme("colors.neutral");
     }
-    
-      /* min-height: calc(100vh - 4rem); */
-    
     .top-section {
       width: 85.125rem;
       overflow: hidden;
@@ -134,11 +140,28 @@ const { stargazers_count=0, forks_count=0 }:StarAndForkT = await sendFetch("http
       background: rgba(244, 244, 246, 0.2) !important;
       backdrop-filter: blur(36px);
     }
+    .introduce {
+      background: url('https://img.alicdn.com/imgextra/i2/O1CN019ckV3m1s2m7zNXIpc_!!6000000005709-0-tps-5760-2000.jpg') no-repeat;
+      background-size: cover;
+      background-position: 0 0;
+    }
+    
+    @media (min-width: 40rem) and (max-width: 50rem) { 
+      .banner-toai {
+        background-position: 0 -6rem!important;
+      }
+    }
 
     /* 小于50rem  小于 800px */
     @media (max-width: 50rem) {
+      .banner-toai {
+        background: url('https://img.alicdn.com/imgextra/i4/O1CN01EH1c9x1Xw62QgLKke_!!6000000002987-0-tps-3120-2928.jpg') no-repeat;
+        background-size: cover;
+        background-position: 0 0;
+      }
+      
       .introduce {
-        min-height: 0;
+        /* min-height: 0; */
         padding: 1.5rem;
       }
       .top-section {
@@ -177,7 +200,11 @@ const { stargazers_count=0, forks_count=0 }:StarAndForkT = await sendFetch("http
         background-color: theme(colors.neutral) !important;
       }
     }
-
+    @media (min-width: 50rem) and (max-width: 60rem) {
+      .banner-toai {
+        background-position: -5rem 0;
+      }
+    }
     /* 大于50rem 小于 72rem  800px < width < 1440 */
     @media (min-width: 50rem) and (max-width: 86rem) {
       .introduce {
diff --git a/src/components/home/HomeIntroduce_ai.astro b/src/components/home/HomeIntroduce_ai.astro
deleted file mode 100644
index df33977ae..000000000
--- a/src/components/home/HomeIntroduce_ai.astro
+++ /dev/null
@@ -1,220 +0,0 @@
----
-import { useTranslations, isChinese } from "@i18n/util";
-import StarAndForkV2 from "./StarAndForkV2/index.jsx";
-import Carousel from "./Carousel.astro";
-import ProductDisplayCard from "@components/home/ProductDisplayCard.astro";
-import { SITE } from "@utils/config";
-import sendFetch from "@/utils/sendFetch";
-import type { StarAndForkT } from 'src/types';
-
-const t = useTranslations(Astro);
-const ifzh = isChinese(Astro);
-
-// 服务端构建预先获取star数和fork数作为兜底
-const { stargazers_count=0, forks_count=0 }:StarAndForkT = await sendFetch("https://api.github.com/repos/alibaba/spring-cloud-alibaba");
----
-
-<div class="home-introduce-wrapper bg-base-100">
-    <Carousel
-        useduration="apply"
-        duration={5000}
-    >
-        <a
-            slot="prev" 
-            href="/docs/2023/user-guide/ai/overview/" 
-            target="_blank"
-            class="block w-full min-h-[366px] flex banner-toai max-w-[90rem]"
-        >
-          <div class="w-full min-h-[366px] px-[2.5rem]">
-            <h1 class="cursor-pointer xl:pt-[5.625rem] lg:pt-[5.625rem] md:pt-[6rem] pt-[5.625rem] xl:text-[4.5rem] lg:text-[4rem] md:text-[4rem] sm:text-[3rem] text-[2rem] text-neutral">
-              Spring AI Alibaba
-            </h1>
-            <p class="cursor-pointer leading-[5rem] text-neutral mb-8 xl:text-[2rem] lg:text-[2rem] md:text-[2rem] sm:text-[1.5rem] text-[1rem]">
-              {t('home.website.ai.quickly.develop')}
-            </p>
-          </div>
-        </a>
-
-        <home-introduce
-            slot="next"
-            class="introduce flex flex-col justify-center items-center  min-h-[366px] h-[366px]"
-        >
-            <div class="top-section flex flex-col relative mb-[111px]">
-                <h1 class="font-light introduce_about pt-6 pb-4 text-warning text-xs mt-[2.375rem]">
-                    {t("home.introduce.about")}
-                </h1>
-                <p class=`title leading-[5rem] text-neutral mb-8 ${ifzh ? 'lg:text-[3.75rem] text-[2.75rem]' : 'text-[4rem]'}`>
-                    {t("home.introduce.title")}
-                </p>
-                <StarAndForkV2 client:load SITE={SITE} stargazers_count={stargazers_count} forks_count={forks_count} />
-            </div>
-        </home-introduce>
-    </Carousel>
-    <ProductDisplayCard />
-</div>
-
-<style is:global>
-  .home-introduce-wrapper {
-    a {
-      text-decoration: inherit;
-      color: theme("colors.accent");
-    }    
-    .banner-toai{
-      background: url('https://gw.alicdn.com/imgextra/i3/O1CN01MLx4AB1MAxV8Z6pGh_!!6000000001395-0-tps-5760-2000.jpg') no-repeat;
-      background-size: cover;
-      background-position: 0 0;
-    }
-    .top-section {
-      width: 85.125rem;
-      overflow: hidden;
-    }
-    .top-section .notes .pc-version-intro {
-      display: inline;
-    }
-    .top-section .notes .mobile-version-intro {
-      display: none;
-    }
-    .top-section .shortcut button {
-      height: 3rem;
-      min-height: 3rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-    .bottom-section {
-      width: 85.125rem;
-    }
-    .bottom-section .desc {
-      width: 9.75rem;
-      height: 22.5rem;
-      background-color: theme("colors.accent");
-      transition: width 0.8s;
-    }
-
-    .bottom-section .desc .text {
-      opacity: 0;
-      transition: opacity 0.8s;
-    }
-    .bottom-section .log {
-      flex: 1;
-      display: flex;
-      position: relative;
-      overflow: hidden;
-      transition: width 0.8s;
-    }
-    .bottom-section .desc:hover {
-      width: 31.25rem;
-    }
-    .bottom-section .desc:hover .log {
-      flex: 1;
-    }
-    .bottom-section .desc:hover .text {
-      opacity: 1;
-    }
-    .bottom-section .desc:hover .arrow {
-      display: none;
-    }
-    .divider-horizontal {
-      width: 1px;
-      margin-left: 0.5rem;
-      margin-right: 0.5rem;
-    }
-    a {
-      text-decoration: none;
-    }
-    .fork {
-      background: rgba(244, 244, 246, 0.2);
-      backdrop-filter: blur(36px);
-    }
-    .fork:hover {
-      background: rgba(244, 244, 246, 0.2) !important;
-      backdrop-filter: blur(36px);
-    }
-    .introduce {
-      background: url('https://img.alicdn.com/imgextra/i2/O1CN019ckV3m1s2m7zNXIpc_!!6000000005709-0-tps-5760-2000.jpg') no-repeat;
-      background-size: cover;
-      background-position: 0 0;
-    }
-    
-    @media (min-width: 40rem) and (max-width: 50rem) { 
-      .banner-toai {
-        background-position: 0 -6rem!important;
-      }
-    }
-
-    /* 小于50rem  小于 800px */
-    @media (max-width: 50rem) {
-      .banner-toai {
-        background: url('https://img.alicdn.com/imgextra/i4/O1CN01EH1c9x1Xw62QgLKke_!!6000000002987-0-tps-3120-2928.jpg') no-repeat;
-        background-size: cover;
-        background-position: 0 0;
-      }
-      
-      .introduce {
-        /* min-height: 0; */
-        padding: 1.5rem;
-      }
-      .top-section {
-        width: 100%;
-      }
-      .top-section .title {
-        font-size: 1.875rem;
-        line-height: 2.25rem;
-      }
-      .top-section .notes .pc-version-intro {
-        display: none;
-      }
-      .top-section .notes .mobile-version-intro {
-        display: inline;
-      }
-      .top-section .shortcut button {
-        height: 2rem;
-        min-height: 2rem;
-        padding-left: 0.75rem;
-        padding-right: 0.75rem;
-      }
-      .introduce_about {
-        margin-top: 0rem;
-      }
-      .top-section .notes {
-        margin-top: 1.25rem;
-      }
-      .bottom-section {
-        width: 100%;
-        display: none !important;
-      }
-      .mobile-bottom-section {
-        display: block !important;
-      }
-      .mobile-bottom-section .btn:hover {
-        background-color: theme(colors.neutral) !important;
-      }
-    }
-    @media (min-width: 50rem) and (max-width: 60rem) {
-      .banner-toai {
-        background-position: -5rem 0;
-      }
-    }
-    /* 大于50rem 小于 72rem  800px < width < 1440 */
-    @media (min-width: 50rem) and (max-width: 86rem) {
-      .introduce {
-        padding: 2.5rem;
-      }
-      .top-section,
-      .bottom-section {
-        width: 100%;
-      }
-      .top-section .notes .pc-version-intro {
-        display: none;
-      }
-      .top-section .notes .mobile-version-intro {
-        display: inline;
-      }
-      .bottom-section .desc div {
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 4;
-      }
-    }
-  }
-</style>