chat-web/src/views/CaseView.vue

<template>
    <main class="home-center-padding">
        <div
            data-v-79baa1b1=""
            class="pt-[210px] pb-[88px] px-[118px] relative text-[28px] leading-[50px] text-center lg:text-xl lg:px-4 lg:pt-32 lg:pb-16"
        >
            <h2 data-v-79baa1b1="" class="font-normal lg:px-2" v-html="caseTips"></h2>
            <div data-v-79baa1b1="" class="flex gap-6 flex-wrap justify-center mt-16 lg:gap-3 lg:mt-10">
                <div
                    data-v-79baa1b1=""
                    id="Chato_case_industry_1"
                    data-sensors-click=""
                    class="case-type-card lg:!w-16 lg:!h-16 lg:!text-sm lg:!gap-1 lg:!rounded-xl"
                    style="background: linear-gradient(148deg, rgb(5, 255, 142) -19%, rgb(82, 200, 255) 134%)"
                >
                    <img src="@/assets/case1.png" class="w-8 h-8 lg:w-5 lg:h-5" alt="" />
                    <span data-v-79baa1b1="">教培</span>
                </div>
                <div
                    data-v-79baa1b1=""
                    id="Chato_case_industry_2"
                    data-sensors-click=""
                    class="case-type-card lg:!w-16 lg:!h-16 lg:!text-sm lg:!gap-1 lg:!rounded-xl"
                    style="background: linear-gradient(153deg, rgb(66, 120, 246) -38%, rgb(81, 200, 255) 111%)"
                >
                    <img src="@/assets/case2.png" class="w-8 h-8 lg:w-5 lg:h-5" alt="" />
                    <span data-v-79baa1b1="">咨询</span>
                </div>
                <div
                    data-v-79baa1b1=""
                    id="Chato_case_industry_3"
                    data-sensors-click=""
                    class="case-type-card lg:!w-16 lg:!h-16 lg:!text-sm lg:!gap-1 lg:!rounded-xl"
                    style="background: linear-gradient(148deg, rgb(53, 107, 255) -185%, rgb(253, 131, 255) 134%)"
                >
                    <img src="@/assets/case3.png" class="w-8 h-8 lg:w-5 lg:h-5" alt="" />
                    <span data-v-79baa1b1="">新媒体</span>
                </div>
                <div
                    data-v-79baa1b1=""
                    id="Chato_case_industry_4"
                    data-sensors-click=""
                    class="case-type-card lg:!w-16 lg:!h-16 lg:!text-sm lg:!gap-1 lg:!rounded-xl"
                    style="background: linear-gradient(144deg, rgb(255, 76, 114) -31%, rgb(255, 232, 115) 136%)"
                >
                    <img src="@/assets/case4.png" class="w-8 h-8 lg:w-5 lg:h-5" alt="" />
                    <span data-v-79baa1b1="">门店</span>
                </div>
                <div
                    data-v-79baa1b1=""
                    id="Chato_case_industry_5"
                    data-sensors-click=""
                    class="case-type-card lg:!w-16 lg:!h-16 lg:!text-sm lg:!gap-1 lg:!rounded-xl"
                    style="background: linear-gradient(146deg, rgb(66, 120, 246) -51%, rgb(81, 243, 255) 104%)"
                >
                    <img src="@/assets/case5.png" class="w-8 h-8 lg:w-5 lg:h-5" alt="" />
                    <span data-v-79baa1b1="">医疗</span>
                </div>
                <div
                    data-v-79baa1b1=""
                    id="Chato_case_industry_6"
                    data-sensors-click=""
                    class="case-type-card lg:!w-16 lg:!h-16 lg:!text-sm lg:!gap-1 lg:!rounded-xl"
                    style="background: linear-gradient(146deg, rgb(13, 238, 167) -38%, rgb(90, 208, 255) 128%)"
                >
                    <img src="@/assets/case6.png" class="w-8 h-8 lg:w-5 lg:h-5" alt="" />
                    <span data-v-79baa1b1="">房产</span>
                </div>
                <div
                    data-v-79baa1b1=""
                    data-sensors-click=""
                    id="Chato_case_industry_7"
                    class="case-type-card !text-sm !gap-1 lg:!w-16 lg:!h-16 lg:!text-xs lg:!rounded-xl"
                    style="
                        background: linear-gradient(
                            144deg,
                            rgb(53, 107, 255) -29%,
                            rgb(53, 164, 255) -29%,
                            rgb(233, 109, 255) 131%
                        );
                    "
                >
                    <span data-v-79baa1b1="">100+个方案</span><span data-v-79baa1b1="">行业方案</span>
                </div>
            </div>
            <div
                data-v-79baa1b1=""
                class="absolute top-[147px] left-[248px] w-64 h-64 rounded-full gray-lg-bg lg:left-[40px] lg:top-[100px]"
            ></div>
            <div
                data-v-79baa1b1=""
                class="absolute top-[170px] left-[277px] w-5 h-5 rounded-full green-lg-bg lg:left-[70px] lg:top-[130px]"
            ></div>
            <div
                data-v-79baa1b1=""
                class="absolute top-[232px] right-[200px] w-3 h-3 rounded-full blue-lg-bg lg:right-[40px] lg:top-[190px]"
            ></div>
        </div>
        <template v-for="(item, index) in cases" :key="index">
            <div data-v-79baa1b1="" class="text-4xl font-medium text-center mb-10 lg:text-2xl">
                行业案例：{{ item['type'] }}
            </div>
            <div
                data-v-79baa1b1=""
                class="w-full grid grid-cols-[1fr_2fr] rounded-[28px] overflow-hidden border border-solid border-[#E4E7ED] mb-24 lg:grid-cols-1 lg:mb-12"
            >
                <div
                    data-v-79baa1b1=""
                    class="bg-[#F4F8FF] px-6 py-9 text-[#596780] text-base leading-6 border-r border-[#E4E7ED]"
                >
                    <div data-v-79baa1b1="" class="flex gap-3 items-center mb-6">
                        <img data-v-79baa1b1="" :src="item['logo']" class="w-16 h-16 rounded-full object-cover" />
                        <div data-v-79baa1b1="" class="flex-1">
                            <p data-v-79baa1b1="" class="text-[#3D3D3D] text-base font-medium leading-6">
                                {{ item['name'] }}
                            </p>
                            <div data-v-79baa1b1="" class="flex gap-2 flex-wrap mt-3">
                                <span
                                    v-for="(tag, tagIndex) in item['tags']"
                                    :key="tagIndex"
                                    data-v-79baa1b1=""
                                    class="px-2 py-1 text-[#596780] text-xs bg-white rounded"
                                    >{{ tag }}</span
                                >
                            </div>
                        </div>
                    </div>
                    <!---->
                    <div data-v-79baa1b1="" class="space-y-4">
                        <p data-v-79baa1b1="">{{ item['desc'] }}</p>
                    </div>
                    <p
                        data-v-79baa1b1=""
                        class="text-xl text-[#303133] font-medium mt-10 mb-5 lg:mt-5 lg:mb-2 lg:text-base"
                    >
                        客户概况
                    </p>
                    <div data-v-79baa1b1="" class="space-y-4 lg:space-y-2">
                        <p data-v-79baa1b1="" v-for="(info, infoIndex) in item['info']" :key="infoIndex">
                            {{ (info as any)['name'] }}：{{ (info as any)['value'] }}
                        </p>
                    </div>
                </div>
                <div data-v-79baa1b1="" class="bg-white px-16 py-10 text-[#3D3D3D] text-sm leading-5 shrink-0 lg:px-6">
                    <p data-v-79baa1b1="" class="text-lg font-medium leading-5 mb-6">需求和痛点</p>
                    <ul data-v-79baa1b1="" class="list-disc space-y-4 pl-4 marker:text-[#B5BED0] mb-10">
                        <li data-v-79baa1b1="" v-for="(need, needIndex) in item['needs']" :key="needIndex">
                            {{ need }}
                        </li>
                    </ul>
                    <p data-v-79baa1b1="" class="text-lg font-medium leading-5 mb-6 text-[#7C5CFC]">解决方案</p>
                    <ul data-v-79baa1b1="" class="list-disc space-y-4 pl-4 marker:text-[#B5BED0]">
                        <li
                            data-v-79baa1b1=""
                            v-for="(solution, solutionIndex) in item['solution']"
                            :key="solutionIndex"
                        >
                            {{ solution }}
                        </li>
                    </ul>
                    <button
                        data-v-79baa1b1=""
                        aria-disabled="false"
                        type="button"
                        class="el-button el-button--primary el-button--large is-link mt-12 !font-normal lg:mt-6"
                        id="Chato_case_create_bot_click"
                        data-sensors-case-bot-name="百姓网"
                        @click="goConnect"
                    >
                        <!--v-if--><span class="">立即体验 ZoumaAI</span>
                    </button>
                </div>
            </div>
        </template>
    </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { fetchCase, fecthCaseTips } from '@/api'
import { router } from '@/router'

const cases = ref([])
fetchCase().then((res: any) => {
    cases.value = res.map((item: any) => {
        return {
            ...item,
            tags: item.tags.split(','),
            info: item.info.split('_;').map((_info: any) => {
                let _infos = _info.split('_,')
                return {
                    name: _infos[0],
                    value: _infos[1]
                }
            }),
            needs: item.needs.split('_;'),
            solution: item.solution.split('_;')
        }
    })

    console.log(cases.value)
})

const caseTips = ref('')
fecthCaseTips().then(res => {
    caseTips.value = res.value
})

function goConnect() {
    router.push({
        name: 'connect'
    })
}
</script>

<style lang="less" scoped>
.case-type-card {
    display: flex;
    height: 6rem;
    width: 6rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.home-center-padding {
    padding-left: 13%;
    padding-right: 13%;
}
</style>