<!-- 基础介绍 -->

<template>
    <div class="box">

        <div class="box-content">

            <div v-for="item in g_dataList" :key="item.id" class="box-item">
                <div class="box-item-ico">
                    <img :src="item.bgUrl" alt="">
                </div>
                <!-- 中文标题 -->
                <div class="box-item-title"> {{ item.title }}</div>
                <!-- 内容 -->
                <div class="box-item-content"> {{ item.content }}</div>
                <!-- 英文标题 -->
                <div class="box-item-englishTitle">{{ item.englishTitle }}</div>
            </div>

        </div>

    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref } from "vue";



/************************************************
 * 全局变量
 * 
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
const g_dataList = ref([
    {
        id: 1,
        bgUrl: "https://img.js.design/assets/img/66a9dd7306bb4bea863aaa61.png",
        title: "虚拟现实创意探索",
        content: "沉浸在虚拟现实的世界，开启一场前所未有的创意之旅！在这里，每一步都是一次新的发现，每一瞥都是一个创意的火花。让我们带你穿越现实与虚拟的边界，体验未来科技与艺术的完美融合。",
        englishTitle: "VR Creative Exploration"
    },
    {
        id: 2,
        bgUrl: "https://img.js.design/assets/img/657fb580c682b8ef43fba7e3.png",
        title: "穿越虚实，开启创意之旅",
        content: "穿越现实与虚拟的边界，开启无尽的创意之旅！在我们的VR展馆中，感受创意的无限可能，体验科技与艺术的交汇之美。每一个展区都将带给你全新的灵感与创意，让你沉浸在未来的奇幻世界中。",
        englishTitle: "Cross Realities, Start Creating"
    },
    {
        id: 3,
        bgUrl: "https://img.js.design/assets/img/65832f5a50dcc71b5afea260.png",
        title: "戴上VR，探索创意无限！",
        content: "进入虚拟现实的奇幻世界，开启一场前所未有的创意冒险！在VR展馆中，感受未来的艺术与科技，体验创意的极致魅力。让虚拟现实为你打开创意的大门，每一步都是灵感的源泉。",
        englishTitle: "VR On, Explore Creativity!"
    },
    {
        id: 4,
        bgUrl: "https://img.js.design/assets/img/657d6aa74725d8554c152408.png",
        title: "沉浸式体验",
        content: "VR展厅通过虚拟现实技术，为观众呈现一个三维的虚拟环境。观众可以自由地与展品进行互动，获得身临其境的感受。这种沉浸式的体验能够让观众更加深入地了解展示内容，提高参与度和体验感。",
        englishTitle: "Immersive Experience"
    },
]);


/************************************************
 * 生命周期函数
 ************************************************/




/************************************************
* 事件处理
* 
* 格式: act_ + 事件名     例如: getAppDataList
************************************************/




/************************************************
 * 获取数据
 * 
 * 格式: get_ + 事件名     例如: get_AppDataList
 ************************************************/
</script>

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

.box-content {
    padding: 0 calc(2vw + 2vh + 2vmin) calc(1.5vw + 1.5vh + 1.5vmin) calc(2vw + 2vh + 2vmin);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    justify-content: space-between;
    align-items: flex-start;
    grid-gap: 32px;
}

.box-item {
    width: 100%;
    cursor: pointer;
    animation: Fade-animation 0.8s ease-in-out;
}

/* 元素渐显动画 */
@keyframes Fade-animation {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.box-item:hover .box-item-ico {
    transform: scale(1.2);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.box-item-ico {
    width: 100%;
    height: 100%;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.box-item-ico img {
    width: 30%;
    height: 30%;
}

.box-item:hover .box-item-title {
    transform: scale(1.2);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.box-item-title {
    font-size: 100%;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.box-item:hover .box-item-content {
    transform: scale(1.1);
    color: rgb(0, 0, 0);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.box-item-content {
    padding: 16px 0;
    line-height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(148, 148, 148, 1);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.box-item:hover .box-item-englishTitle {
    transform: scale(1.1);
    color: rgb(78, 78, 78);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.box-item-englishTitle {
    font-size: 14px;
    font-weight: 400;
    color: rgba(148, 148, 148, 1);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}
</style>