<!-- 头部 -->

<template>

    <div class="box">

        <div class="box-content">
            <!-- 左边框 -->
            <div class="box-content-left">
                <p class="box-content-left-title">走进未来，一展尽览！</p>
                <div class="box-content-left-text">
                    <p>轻松打造专业级3D虚拟显示展厅</p>
                    <p>让您的品牌与产品绽放新光彩!</p>
                </div>
                <div class="box-content-left-btn">
                    <el-button type="primary" class="btn-go" @click="act_Login">开始使用</el-button>
                    <el-button type="primary" plain class="btn-design">在线资询</el-button>
                </div>

                <div class="box-content-left-bg">
                    <div class="box-content-left-bg-item"></div>
                    <div class="box-content-left-bg-item"></div>
                    <div class="box-content-left-bg-item"></div>
                </div>
            </div>

            <!-- 右边框 -->
            <div class="box-content-right">
                <div class="box-content-right-bg">
                    <div class="box-content-right-bg-item"></div>
                    <div class="box-content-right-bg-item"></div>
                    <div class="box-content-right-bg-item"></div>
                </div>
            </div>
        </div>

    </div>

</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/

import { useRoute, useRouter, RouterView } from 'vue-router'

import { useUserStore } from "@/store/index";


/************************************************
 * 全局变量
 *
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 获取路由对象
const g_route = useRoute() // 解构出当前路由对象的各种属性
const g_router = useRouter() // 解构出路由实例的各种方法
const g_userStore = useUserStore();



/************************************************
 * 事件处理
 *
 * 格式: act_ + 事件名     例如: getAppDataList
 ************************************************/
// 登陆注册
const act_Login = () => {
    if (g_userStore.userInfo.user && g_userStore.userInfo.token) {
        g_router.push("/personalCenter");
    } else {
        g_router.push("/login");
    }
}

</script>

<style scoped>
.box {
    flex: 1;
    display: flex;
}

.box-content {
    flex: 1;
    min-height: calc(15vw + 20vh + 10vmin);
    height: 100%;
    /* display: flex; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.box-content-left {
    position: relative;
    flex: 2;
    padding: calc(1.5vw + 1.5vh + 1.5vmin) calc(2vw + 2vh + 2vmin);
    overflow: hidden;
}

.box-content-left-title {
    font-size: calc(1.2vw + 1.4vh + 14px);
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 43.2px;
    color: rgba(0, 0, 0, 1);
    animation: wordDrop 0.8s ease-in-out;
}

/* 文字向下滑落动画 */
@keyframes wordDrop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 文字从左侧滑出动画 */
@keyframes wordSlide {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.box-content-left-text {
    font-size: calc(0.5vw + 0.5vh + 10px);
    font-weight: 400;
    color: rgba(148, 148, 148, 1);
    animation: wordSlide 0.8s ease-in-out;
}

.box-content-left-btn {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.box-content-left-btn button {
    min-width: 120px;
    width: calc(5vw + 5vh + 5vmin);
    min-height: 50px;
    height: calc(1vw + 1vh + 2vmin);
    border-radius: 2px;
}

.box-content-left-btn>.btn-go {
    background: rgba(41, 155, 255, 1);
}

.box-content-left-bg-item:nth-child(1) {
    position: absolute;
    left: 10%;
    top: 101px;
    width: 15vw;
    height: 15vw;
    background: linear-gradient(125.99deg, rgba(179, 223, 255, 1) 0%, rgb(123, 119, 237, 0.5) 100%);
    border: 1px solid rgba(0, 0, 0, 1);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    filter: blur(50px);
    z-index: -1;
}

.box-content-left-bg-item:nth-child(2) {
    position: absolute;
    left: 5%;
    top: 282px;
    width: 8vw;
    height: 8vw;
    background: linear-gradient(125.99deg, rgba(130, 203, 255, 1) 0%, rgba(35, 255, 31, 0.5) 100%);
    border: 1px solid rgba(0, 0, 0, 1);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    filter: blur(50px);
    z-index: -1;
}

.box-content-left-bg-item:nth-child(3) {
    position: absolute;
    left: -10%;
    top: 450px;
    width: 8vw;
    height: 8vw;
    background: linear-gradient(125.99deg, rgba(130, 203, 255, 1) 0%, rgba(225, 191, 255, 0.01) 100%);
    border: 1px solid rgba(0, 0, 0, 1);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    filter: blur(50px);
    z-index: -1;
}

.box-content-right {
    position: relative;
    flex: 3;
}

.box-content-right-bg-item:nth-child(1) {
    position: absolute;
    right: 75%;
    top: 122px;
    width: 20vw;
    height: 20vw;
    background: linear-gradient(145.61deg, rgba(255, 255, 255, 1) 0%, rgba(201, 212, 244, 1) 100%);
    border-radius: 50%;
    filter: blur(4px);
    z-index: -1;
}

.box-content-right-bg-item:nth-child(2) {
    position: absolute;
    right: 50%;
    top: 112px;
    width: 8vw;
    height: 8vw;
    background: linear-gradient(145.61deg, rgba(255, 255, 255, 1) 0%, rgba(255, 207, 246, 1) 100%);
    border-radius: 50%;
    filter: blur(4px);
    z-index: -1;
}

.box-content-right-bg-item:nth-child(3) {
    position: absolute;
    right: 10%;
    top: 318px;
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
    background: linear-gradient(145.61deg, rgba(255, 255, 255, 1) 0%, rgba(178, 216, 227, 1) 100%);
    filter: blur(4px);
    z-index: -1;
}

/* 移动端样式 */
@media screen and (max-width: 700px) {

    .box-content-right-bg-item:nth-child(1) {
        right: 75%;
        top: 0;
        width: 100px;
        height: 100px;
        transform: translate(0, -200%);
    }

    .box-content-right-bg-item:nth-child(2) {
        right: 50%;
        top: 0;
        width: 40px;
        height: 40px;
        transform: translate(50%, -250%);
    }

    .box-content-right-bg-item:nth-child(3) {
        right: 10%;
        top: 0;
        width: 60px;
        height: 60px;
        transform: translate(50%, -250%);
    }
}
</style>