Skip to content

Commit

Permalink
Scaaienter (spring-cloud-alibaba-group#266)
Browse files Browse the repository at this point in the history 
* add scaenter

* fix style

* fix style

* update github url
  • Loading branch information
@xpy01xpy
xpy01xpy authored Sep 18, 2024
1 parent 033ea91 commit 79ac0d2
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 392 deletions.
32 changes: 32 additions & 0 deletions src/components/ai/AiButton.astro
View file
Original file line number Diff line number Diff line change
@@ -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>
30 changes: 2 additions & 28 deletions src/components/ai/HomeIntroduce.astro
View file
Original file line number Diff line number Diff line change
@@ -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);
---
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/components/home/Carousel.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down
109 changes: 0 additions & 109 deletions src/components/home/Carousel_ai.astro
View file

This file was deleted.

1 change: 1 addition & 0 deletions src/components/home/CompaniesFeedback.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ const themeCardColor = {

<style is:global>
.companies-feedback{
overflow: hidden;
.slider {
transition: background-color 0.5s;
}
Expand Down
91 changes: 59 additions & 32 deletions src/components/home/HomeIntroduce.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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} />
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit 79ac0d2

Please sign in to comment.