chat-web/src/views/HomeView.vue

<template>
    <main>
        <div class="home-center-padding">
            <template v-if="baseMap.has(0)">
                <h2
                    class="font-medium text-[50px] leading-[72px] mt-[125px] text-[#303133] text-center tracking-[4px] lg:text-3xl lg:leading-[40px] lg:mt-32 md:!mt-10"
                >
                    {{ baseMap.get(0).name }}
                </h2>
                <div class="flex justify-center items-center mt-1 mb-[35px] h-24 lg:mb-4 lg:mt-1 lg:h-12">
                    <span
                        id="Chato_rolling_click"
                        data-sensors-click=""
                        class="font-medium text-center text-transparent bg-clip-text text-[64px] leading-[95px] min-h-[95px] tracking-[8px] lg:text-[32px] lg:leading-[48px] lg:min-h-[48px] lg:tracking-[1px] line-grad-bg"
                        >{{ rollingText }}</span
                    ><svg class="w-4 h-[75px] lg:w-2 lg:h-9" aria-hidden="true">
                        <use href="#icon-home_play"></use>
                    </svg>
                </div>
                <section
                    class="miSans text-lg leading-9 text-[#696984] text-center lg:text-sm lg:leading-7"
                    v-html="baseMap.get(0)['desc']"
                ></section>
            </template>

            <div class="text-center flex gap-8 items-center justify-center lg:gap-4">
                <button
                    aria-disabled="false"
                    type="button"
                    class="el-button el-button--primary w-[228px] !h-[60px] !text-lg font-medium tracking-[0.08em] !rounded-lg mt-7 !ml-0 hover:!scale-105 lg:!text-sm lg:w-[153px] lg:!h-[45px] lg:mt-5 !border-none btn-grad shadow-lg"
                    id="Chato_top_create_click"
                >
                    <!--v-if--><span class=""> 20S快速创建机器人 </span>
                </button>
            </div>
            <div
                class="relative bg-right-bottom bg-contain bg-no-repeat mt-16 mb-32 flex justify-between h-[694px] box-border pr-[124px] pl-16 max-w-[1075px] mx-auto lg:justify-normal lg:flex-col lg:bg-none lg:h-auto lg:mb-12 lg:p-0 xl:pl-0 xl:pr-24 md:!pr-0"
            >
                <h3
                    class="hidden text-5xl leading-[72px] font-medium text-[#303133] text-center lg:text-[26px] lg:leading-[38px] lg:block"
                >
                    行业<strong class="tracking-[0.08em] bg-clip-text text-transparent line-grad-bg">案例</strong>
                </h3>

                <div
                    class="relative transition-all mb-6 cursor-pointer lg:mt-4 lg:mx-8 hidden md:block"
                    data-sensors-click=""
                    id="Chato_home_case_button"
                    :data-sensors-bot-name="(homeCaseInfo as any)['name']"
                >
                    <div
                        class="w-[18vw] min-w-[230px] max-w-[280px] border-[0.8px] border-solid border-[#E4E7ED] rounded-2xl bg-white px-3 py-[10px] flex items-center gap-2 text-[#596780] font-medium text-base lg:w-full lg:max-w-none lg:border-[#EBDAFF] lg:text-[#7c5cfc]"
                    >
                        <img :src="(homeCaseInfo as any)['logo']" class="w-12 h-12 object-cover" /><span>{{
                            (homeCaseInfo as any)['name']
                        }}</span>
                    </div>
                    <span
                        class="w-8 h-8 rounded-full border-[0.8px] border-solid border-[#EBDAFF] bg-white absolute right-4 -top-[15px] flex items-center justify-center lg:right-3"
                        ><img :src="(homeCaseInfo as any)['icon1']" class="w-[18px] h-[18px]"
                    /></span>
                </div>
                <div class="mt-[70px] pl-[22px] block md:hidden">
                    <div
                        class="relative transition-all mb-6 cursor-pointer lg:mt-4 lg:mx-8"
                        :class="{ 'case-active': chooseCase === item['id'] }"
                        data-sensors-click=""
                        id="Chato_home_case_button"
                        :data-sensors-bot-name="item['name']"
                        v-for="(item, index) in cases"
                        :key="index"
                        @click="chooseCase = item['id']"
                    >
                        <div
                            class="w-[18vw] min-w-[230px] max-w-[280px] border-[0.8px] border-solid border-[#E4E7ED] rounded-2xl bg-white px-3 py-[10px] flex items-center gap-2 text-[#596780] font-medium text-base lg:w-full lg:max-w-none lg:border-[#EBDAFF] lg:text-[#7c5cfc]"
                        >
                            <img :src="item['logo']" class="miSans w-12 h-12 object-cover miSans" /><span>{{
                                item['name']
                            }}</span>
                        </div>
                        <span
                            class="w-8 h-8 rounded-full border-[0.8px] border-solid border-[#EBDAFF] bg-white absolute right-4 -top-[15px] flex items-center justify-center lg:right-3"
                            ><img :src="item['icon1']" class="w-[18px] h-[18px]"
                        /></span>
                    </div>
                </div>
                <div>
                    <div
                        class="top-tag px-6 py-3 rounded-[22px] w-fit mx-auto flex items-center justify-center gap-1 text-white font-medium text-xs mb-5"
                    >
                        <img class="w-4 h-4" :src="(homeCaseInfo as any)['icon2']" /><span>{{
                            (homeCaseInfo as any)['name']
                        }}</span>
                    </div>
                    <div class="el-image w-[355px]">
                        <img
                            :src="(homeCaseInfo as any)['img']"
                            class="el-image__inner"
                            style="object-fit: contain"
                        /><!--v-if--><!--v-if-->
                    </div>
                </div>
                <span
                    class="case-pic-bg w-10 h-10 rounded-full flex items-center justify-center absolute top-[158px] left-[43%] lg:hidden xl:left-[40%]"
                    ><img src="@/assets/pic.png" class="w-5 h-5 text-white" /></span
                ><span
                    class="case-voice-bg w-14 h-14 rounded-full flex items-center justify-center absolute bottom-[121px] left-[45%] lg:hidden xl:left-[38%]"
                    ><img src="@/assets/yuyin.png" class="w-8 h-8 text-white" /></span
                ><span
                    class="case-bot-bg rounded-[20px] w-[76px] h-[74px] flex items-center justify-center absolute top-[323px] right-0 lg:hidden"
                    ><img src="@/assets/robot.png" class="w-9 h-9 text-white" /></span
                ><!---->
            </div>
        </div>
        <div
            v-if="baseMap.has(1)"
            class="line-grad-bg pt-20 pb-24 mb-32 lg:!mb-12 home-center-padding lg:!px-2 lg:pt-9 lg:pb-9"
        >
            <h3 class="mb-12 text-white text-center text-5xl font-medium lg:mb-8 lg:text-2xl">
                {{ baseMap.get(1)['name'] }}
            </h3>
            <div
                class="rounded-3xl bg-[#F3F5FB] flex justify-around items-center py-14 lg:flex-col-reverse lg:px-4 lg:pt-5 lg:pb-6 lg:rounded-xl"
            >
                <div class="lg:w-full lg:pl-3">
                    <p
                        v-html="baseMap.get(1)['desc']"
                        class="text-[#303133] text-2xl font-medium leading-10 text-left lg:text-base"
                    ></p>
                    <div class="mt-6 mb-8 flex flex-col gap-5 lg:text-center lg:gap-3 lg:my-5">
                        <p
                            v-for="(item, index) in baseMap.get(1)['val']"
                            :key="index"
                            class="text-[#596780] font-medium text-sm leading-5 flex gap-2 items-center"
                        >
                            <el-icon color="#7c5cfc"><CircleCheck /></el-icon>
                            <span>{{ item }}</span>
                        </p>
                    </div>
                    <button
                        aria-disabled="false"
                        type="button"
                        class="el-button el-button--primary !border-none font-bold !h-12 w-40 lg:!h-10 lg:w-28"
                        id="Chato_tranning_more_click"
                    >
                        <!--v-if--><span class=""> 了解更多 </span>
                    </button>
                </div>
                <div class="el-image !w-[65%] h-auto lg:!w-full lg:mb-8">
                    <img
                        src="@/assets/img1.png"
                        class="el-image__inner"
                        style="object-fit: cover"
                    /><!--v-if--><!--v-if-->
                </div>
            </div>
        </div>
        <div v-if="baseMap.has(2)" class="home-center-padding">
            <h3
                class="miSans text-5xl leading-[72px] font-medium text-[#303133] text-center lg:text-[26px] lg:leading-[38px]"
            >
                {{ baseMap.get(2)['name'] }}
                <strong
                    v-if="baseMap.get(2)['sub']"
                    class="tracking-[0.08em] bg-clip-text text-transparent line-grad-bg"
                >
                    {{ baseMap.get(2)['sub'] }}
                </strong>
            </h3>
            <div
                v-html="baseMap.get(2)['desc']"
                class="miSans text-base leading-9 mt-6 text-center text-[#696984]"
            ></div>
            <div class="el-row learn-row lg:!mx-0 lg:!mt-1" style="margin-left: -5px; margin-right: -5px">
                <div
                    class="el-col el-col-8 el-col-xs-24 is-guttered wow fadeInDown learn-card"
                    style="
                        padding-right: 5px;
                        padding-left: 5px;
                        display: flex;
                        justify-content: center;
                        visibility: visible;
                        animation-name: fadeInDown;
                    "
                    v-for="(item, index) in abilities"
                    :key="index"
                >
                    <div class="el-space el-space--vertical lg:pt-10" style="align-items: center">
                        <div class="el-space__item" style="padding-bottom: 8px; margin-right: 0px">
                            <img :src="item['logo']" class="h-[38px] block w-auto" />
                        </div>
                        <div class="el-space__item" style="padding-bottom: 8px; margin-right: 0px">
                            <span class="learn-title"> {{ item['name'] }} </span>
                        </div>
                        <div class="el-space__item" style="padding-bottom: 8px; margin-right: 0px">
                            <span class="learn-msg" v-html="item['desc']"> </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-6 text-center mb-[100px] lg:mt-0 lg:mb-12">
                <button
                    aria-disabled="false"
                    type="button"
                    class="el-button el-button--primary !h-[60px] w-[273px] !text-lg font-medium tracking-[0.08em] !border-none lg:!h-10 lg:w-32 lg:!text-sm"
                    id="Chato_customize_click"
                >
                    <!--v-if--><span class=""> 立即体验 </span>
                </button>
            </div>
        </div>

        <div
            v-if="baseMap.has(3)"
            class="line-grad-bg home-center-padding py-20 text-white text-center mb-28 lg:mb-12 lg:py-10"
        >
            <h3 class="miSans text-5xl leading-[72px] font-medium mb-6 lg:text-[26px] lg:leading-[38px]">
                {{ baseMap.get(3)['name'] }}
            </h3>
            <p v-if="baseMap.get(3)['desc']" class="miSans text-xl leading-9 mb-12 lg:mb-6 lg:text-base">
                {{ baseMap.get(3)['desc'] }}
            </p>
            <div class="flex justify-between gap-5 lg:flex-col">
                <div
                    class="wow fadeInDown flex-1 flex flex-col justify-between rounded-2xl bg-white py-6 px-7 lg:h-auto lg:gap-3 lg:p-4"
                    style="visibility: visible; animation-name: fadeInDown"
                    v-for="(item, index) in advantages"
                    :key="index"
                >
                    <div class="service-card">
                        <span
                            class="w-14 h-14 flex items-center justify-center rounded-full overflow-hidden bg-[#7c5cfc1a] lg:w-12 lg:h-12"
                        >
                            <img class="w-9 h-9 text-[#7c5cfc] lg:w-7 lg:h-7 block" :src="item['logo']" alt="" />
                        </span>
                        <p class="text-xl font-medium tracking-[0.04em] text-[#3D3D3D] lg:text-base">
                            {{ item['name'] }}
                        </p>
                        <div class="leading-6 text-left text-sm" v-html="item['desc']"></div>
                    </div>
                    <button
                        aria-disabled="false"
                        type="button"
                        class="el-button el-button--primary is-link"
                        id="Chato_know_more_click_1"
                    >
                        <!--v-if--><span class=""> 进一步了解 </span>
                    </button>
                </div>
            </div>
        </div>

        <div class="home-center-padding" v-if="baseMap.has(4)">
            <h3
                class="miSans text-5xl leading-[72px] font-medium text-[#303133] text-center lg:text-[26px] lg:leading-[38px]"
            >
                {{ baseMap.get(4)['name'] }}
                <strong
                    class="tracking-[0.08em] bg-clip-text text-transparent line-grad-bg"
                    v-if="baseMap.get(4)['sub']"
                    >{{ baseMap.get(4)['sub'] }}</strong
                >
            </h3>
            <p v-if="baseMap.get(4)['desc']" class="miSans text-[#767676] text-xl leading-9 text-center mt-4">
                {{ baseMap.get(4)['desc'] }}
            </p>
            <div
                class="el-row mt-20 lg:mt-10 flex w-full justify-around !mx-0 mb-[120px] lg:mb-[60px]"
                style="margin-left: -20px; margin-right: -20px"
                v-for="(item, index) in services"
                :key="index"
            >
                <div
                    class="el-col el-col-12 el-col-xs-24 is-guttered mb-0 lg:mb-10"
                    style="padding-right: 20px; padding-left: 20px; display: flex; justify-content: center"
                >
                    <img
                        :src="item['logo']"
                        class="my-10 w-[440px] h-auto lg:my-5 lg:w-[260px] lg:h-[180px] block"
                        alt=""
                    />
                </div>
                <div
                    class="el-col el-col-12 el-col-xs-24 is-guttered wow fadeInRight advantage-card"
                    style="
                        padding-right: 20px;
                        padding-left: 20px;
                        align-self: center;
                        visibility: visible;
                        animation-name: fadeInRight;
                    "
                >
                    <div
                        class="el-space el-space--vertical"
                        style="align-items: flex-start; justify-content: flex-start"
                    >
                        <div class="el-space__item" style="padding-bottom: 8px; margin-right: 0px">
                            <span class="advantage-title">{{ item['name'] }}</span>
                        </div>
                        <div class="el-space__item" style="padding-bottom: 8px; margin-right: 0px">
                            <div class="flex flex-row items-start mt-2">
                                <span class="advantage-msg" v-html="item['desc']"> </span>
                            </div>
                        </div>
                    </div>
                    <div class="w-full lg:text-center">
                        <button
                            aria-disabled="false"
                            type="button"
                            class="el-button el-button--primary advantage-btn"
                            data-inner-type="1"
                            id="Chato_service_more_click_1"
                        >
                            <!--v-if--><span class=""> 进一步了解 </span>
                        </button>
                    </div>
                </div>
            </div>
            <h3
                class="text-5xl leading-[72px] font-medium text-[#303133] text-center lg:text-[26px] lg:leading-[38px] tracking-[4px]"
            >
                常见<strong class="tracking-[0.08em] bg-clip-text text-transparent line-grad-bg">问题 </strong>
            </h3>
            <dl class="mt-10 w-full">
                <div
                    v-for="(item, index) in questions"
                    :key="index"
                    class="el-card is-hover-shadow wow fadeInUp qa-card"
                    style="visibility: visible; animation-name: fadeInUp"
                >
                    <!--v-if-->
                    <div class="el-card__body" style="">
                        <dt class="text-[#303133] tracking-[4px] text-xl leading-[30px] font-medium lg:text-lg">
                            {{ item['question'] }}
                        </dt>
                        <dd class="text-base leading-[30px] mt-4 text-[#696984] lg:text-sm lg:mt-[14px]">
                            {{ item['answer'] }}
                        </dd>
                    </div>
                </div>
            </dl>
        </div>

        <div
            class="quick-start-bg home-center-padding mt-[100px] mb-[50px] py-[74px] items-center lg:py-7 lg:mt-10 lg:mb-5 overflow-hidden flex justify-between gap-28 lg:flex-col lg:gap-0 lg:items-start"
        >
            <div class="flex flex-col items-start text-white flex-1 overflow-hidden lg:w-full lg:items-center">
                <p class="text-[44px] font-medium tracking-[0.04em] mb-4 lg:text-3xl lg:leading-9">
                    快速定制您的机器人
                </p>
                <p class="miSans text-lg leading-7 mb-6 lg:text-base lg:text-center">
                    ZOUMAAI 为你提供定制化的产品解决方案，我们致力于用 AI 来提升业务的效率
                </p>
                <div class="flex gap-7 items-center justify-center mb-16 lg:gap-3 lg:mb-6">
                    <button
                        aria-disabled="false"
                        type="button"
                        class="miSans el-button el-button--primary w-[150px] !h-10 !border-none !bg-white !text-[#7C5CFC] rounded-lg !text-sm font-medium tracking-[0.08em] lg:w-24 lg:!h-9 lg:!text-xs hover:!scale-105"
                        id="Chato_bottom_create_click"
                    >
                        <!--v-if--><span class=""> 体验 走马AI </span></button
                    >
                </div>
                <div class="flex justify-between items-center w-full max-w-[90%] lg:mb-6 lg:gap-4 lg:max-w-none">
                    <div class="text-sm">
                        <p class="text-3xl font-medium mb-4 flex items-center gap-1 lg:text-xl">
                            2,000,000 <span class="text-base lg:text-sm">+</span>
                        </p>
                        <p class="lg:text-xs">模型调用量</p>
                    </div>
                    <div class="divider"></div>
                    <div class="text-sm">
                        <p class="text-3xl font-medium mb-4 flex items-center gap-1 lg:text-xl">
                            100,000 <span class="text-base lg:text-sm">+</span>
                        </p>
                        <p class="lg:text-xs">机器人数</p>
                    </div>
                    <div class="divider"></div>
                    <div class="text-sm">
                        <p class="text-3xl font-medium mb-4 flex items-center gap-1 lg:text-xl">
                            100 <span class="text-base lg:text-sm">+</span>
                        </p>
                        <p class="lg:text-xs">服务行业</p>
                    </div>
                    <!---->
                </div>
            </div>
            <div class="w-[400px] box-border rounded-2xl px-7 py-6 bg-white lg:w-full shrink-0">
                <p class="text-[#303133] text-lg font-medium mb-4 flex items-center">
                    <svg class="w-[22px] h-[22px] mr-1" aria-hidden="true">
                        <use href="#icon-phone"></use>
                    </svg>
                    联系我们
                </p>
                <p class="text-[#596780] text-sm leading-5 mb-6">将有专人为您提供产品解决方案，专业答疑等</p>
                <connect-form></connect-form>
                
            </div>
        </div>
    </main>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import useRolling from '@/hooks/useRolling'
import { fetchHomeCase, fetchBase, fetchQuestion, fetchAbility } from '@/api'
import { CircleCheck } from '@element-plus/icons-vue'
import {ConnectForm} from '@/components/common'

const rollingList = ref([])
const { rollingText, startRolling } = useRolling(rollingList.value)
// const timer = setInterval(() => {
//     rollingText.value = rolling(rollingList)
// }, 500)

const cases = ref([])
const chooseCase = ref('')
fetchHomeCase().then((res: any) => {
    cases.value = res
    if (res.length > 0) {
        chooseCase.value = res[0].id
    }
})

const homeCaseInfo = computed(() => {
    if (cases.value.length > 0) {
        let info = cases.value.find((item: any) => {
            return item.id === chooseCase.value
        })
        return info || {}
    }

    return {}
})

const baseMap = ref(new Map())
const abilities = ref([])
const advantages = ref([])
const services = ref([])
fetchBase().then((res: any) => {
    res.forEach((item: any) => {
        let names = item.name.split('_;')
        baseMap.value.set(item['direction'], {
            ...item,
            name: names[0],
            sub: names.length > 1 ? names[1] : '',
            val: item.val.split('_;') || []
        })
        if (item['direction'] === 2) {
            fetchAbility(item['id']).then((res: any) => {
                abilities.value = res
            })
        }
        if (item['direction'] === 3) {
            fetchAbility(item['id']).then((res: any) => {
                advantages.value = res
            })
        }
        if (item['direction'] === 4) {
            fetchAbility(item['id']).then((res: any) => {
                services.value = res
            })
        }
    })
    console.log(baseMap.value)
    if (baseMap.value.has(0)) {
        rollingList.value = baseMap.value.get(0).val
        startRolling(rollingList.value)
    }
})

const questions = ref([])
fetchQuestion().then((res: any) => {
    questions.value = res || []
})

</script>

<style lang="less" scoped>
.line-grad-bg {
    background-image: linear-gradient(117deg, #0547ff -84%, #d683ff 125%);
}
.btn-grad {
    background: linear-gradient(99deg, #4e4f50 0%, #5a5c60 0%, #303133 99%);
}

.quick-start-bg {
    background: linear-gradient(138deg, #0547ff -126%, #d683ff 141%);
}

.qa-card {
    margin-bottom: 2rem;
    box-sizing: border-box;
    width: 100%;
    border-radius: 1rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgba(218, 218, 225, var(--tw-border-opacity));
    padding: 0.75rem;
}

.advantage-btn {
    margin-top: 30px;
    height: 2.75rem;
    width: 140px;
    border-style: none;
    font-size: 1rem;
    line-height: 1.5rem;
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    line-height: 1.75rem;
    letter-spacing: 0.3px;
    --tw-text-opacity: 1;
    color: rgba(105, 105, 132, var(--tw-text-opacity));
}
.case-active {
    transform: scale(1.2) translate(8%);
    box-shadow: 0 20px 23.2px -19px #6a56db2b;
    margin-bottom: 38px;

    &:after {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -16px;
        content: '';
        background-color: #7c5cfc;
        width: 6px;
        height: 40px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }
}

.learn-row {
    margin-top: 5rem;
    display: flex;
    width: 100%;
    justify-content: space-around;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInDown {
    animation-name: fadeInDown;
}

.top-tag {
    background: linear-gradient(159deg, #7c5cfc -11%, #5c87fc 94%);
}

.case-pic-bg {
    background: linear-gradient(155deg, #ffa8e5 1%, #ffe45e 95%);
}

.case-voice-bg {
    background: linear-gradient(155deg, #cc92ff 1%, #4fb0ff 95%);
}

.case-bot-bg {
    background: linear-gradient(153deg, #4278f6 -37%, #51c8ff 110%);
}

.learn-msg {
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 30px;
    --tw-text-opacity: 1;
    color: rgba(105, 105, 132, var(--tw-text-opacity));
}

.learn-title {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 4px;
    --tw-text-opacity: 1;
    color: rgba(48, 49, 51, var(--tw-text-opacity));
}

.advantage-title {
    margin-bottom: 30px;
    text-align: center;
    font-size: 1.875rem;
    line-height: 2.25rem;
    line-height: 44px;
    letter-spacing: 4px;
    --tw-text-opacity: 1;
    color: rgba(48, 49, 51, var(--tw-text-opacity));
    font-weight: bold;
}
</style>