Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scaaienter #266

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions src/components/ai/AiButton.astro
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
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
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

This file was deleted.

1 change: 1 addition & 0 deletions src/components/home/CompaniesFeedback.astro
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
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
Loading