fls-asp-hm-intelligent-tutoring/src/views/HeimaView.vue

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import HeimaPage from "./components/HeimaPage.vue";

const router = useRouter();
// 跳转到详情页
const handleDetail = () => {
  router.push("/detail");
};
// onMounted(() => {
//   localStorage.removeItem("chatHistory");
//   localStorage.removeItem("status");
// });
</script>
<template>
    <div class="home">
        <div class="logo">
            <img src="../assets/logqian.png" alt="">
            <div class="logo_title">
                <span>科驱数智创新室AI中台</span>
                <!-- <span>IntelligentTrain</span> -->
            </div>
        </div>
        <div class="banner">
            <p>智能陪练 <span>▪</span></p>
            <span>高效提升</span>
        </div>
        <div class="btn">
            <div>定制对话</div>
            <div>拟真复盘</div>
        </div>
        <div class="produce">
            <div class="content bg">
                <p>1.定制专属训练场景</p>
                <img src="../assets/dingzhi.png" alt="">
            </div>
            <div class="content tg">
                <p>2.自由设定客户角色</p>
                <div class="scence"></div>
            </div>
        </div>
        <div class="produce1">
            <div class="voice">
                <p>3.拟真语音深度对话</p>
            </div>
            <div class="advice">
                <HeimaPage></HeimaPage>
            </div>
        </div>
        <div class="bottom">
            <van-button type="warning" size="small" @click="handleDetail" class="w">立即体验</van-button>
        </div>

    </div>
</template>

<style scoped lang="less">
p {
    margin: 0;
    padding: 0;
}

html {
    touch-action: manipulation;

}

.home {
    min-width: 100vw;
    min-height: 100vh;
    background-image: url(../assets/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.logo {
    padding: 20px;
    display: flex;
    align-items: center;

    img {
        width: 30px;
        height: 30px;
        margin-right: 3px;

    }

    .logo_title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    span {
        font-size: 16px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.8);
        // font-family: cursive;
    }

    span:nth-child(2) {
        font-size: 10px;
        font-weight: 400;
        margin-top: -5px;
        // margin-left: 10px;
    }
}

.banner {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    margin: 20px 0 10px 20px;
}

.btn {
    display: flex;
    color: rgba(255, 255, 255, 0.7);
    margin: 20px 0 0 20px;

    div {
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 5px;
        padding: 3px 5px;
        font-size: 10px;
    }

    div:nth-child(1) {
        margin-right: 10px;
    }
}

.produce {
    margin: 25px 20px 10px 20px;
    // margin-bottom: 10px;
    // padding-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .bg {
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        p{
            color: #000;
        }
    }

    .content {
        display: flex;
        flex-direction: column;
        width: 43%;

        p {
            padding-top: 15px;
            text-align: center;
            font-size: 14px;
        }

        img {
            // width: 100%;
            height: 150px;
            margin: 0 auto;
            // height: 100%;
            // margin-top: 20px;
        }

        .scence {
            // width: 53%;
            height: 100%;
            width: 100%;
            // min-height: 100px;
            background-image: url(../assets/role_scene.png);
            // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
    }

    .tg {
        width: 53%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        border-radius: 8px;
        color: #fff;
    }

    // .bg {
    //     width: 43%;
    //     background-color: #ffffff;
    //     /* 白色背景 */
    //     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    //     /* 添加阴影效果 */
    //     border-radius: 8px;
    //     min-height: 100px;
    //     display: flex;
    //     flex-direction: column;
    //     justify-content: center;
    //     align-items: center;

    //     p {
    //         padding-top: 15px;
    //         // text-align: center;
    //         font-size: 14px;
    //     }

    //     img {
    //         // width: 100%;
    //         height: 150px;
    //         margin: 0 auto;
    //         // height: 100%;
    //         // margin-top: 20px;
    //     }
    // }

    // .sence {
    //     width: 53%;
    //     // background-color: #fff;
    //     min-height: 100px;
    //     background-image: url(../assets/role_scene.png);
    //     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    //     background-repeat: no-repeat;
    //     background-size: cover;
    //     background-position: center;
    //     border-radius: 8px;
    //     padding-top: 15px;
    //     font-size: 14px;
    //     text-align: center;

    //     p {
    //         color: #fff;
    //     }
    //     // img {
    //     //     // width: 100%;
    //     //     height: 150px;
    //     //     margin: 0 auto;
    //     //     // height: 100%;
    //     //     // margin-top: 20px;
    //     // }
    // }
}

.produce1 {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;

    .advice {
        width: 53%;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        // margin-left: 10px;
    }

    .voice {
        width: 43%;
        height: 130px;
        background-image: url(../assets/sence.png);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 8px;
        padding-top: 15px;
        font-size: 14px;
        text-align: center;

        p {
            color: #fff;
        }
    }
}

.bottom {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    .w{
        width: 83px;
    }
}

@media (max-width: 767px) {
    html {
        touch-action: pan-y;
        /* 允许垂直滚动，禁止水平滚动和缩放 */
    }
}
</style>