<!-- 轮播图组件 -->
<template>
    <div class="box">
        <!-- 左边内容部分 -->
        <div class="left-content">
            <h2>走进未来，一展尽览！</h2>
            <p>轻松打造专业级3D虚拟显示展厅,<br>
                让您的品牌与产品绽放新光彩!
            </p>
        </div>

        <!-- 右边轮播图部分 -->
        <div class="right-content">
            <el-carousel height="420px" motion-blur>
                <el-carousel-item v-for="item in g_dataList" :key="item.url">
                    <el-image class="images" :src="item.url" />
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted } from 'vue'





/************************************************
 * 全局变量
 * 
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
const g_dataList = ref([
    { url: 'https://img.zcool.cn/community/01643a5d8865c0a801211d5365ddc3.jpg@3000w_1l_2o_100sh.jpg' },
    { url: 'https://img.zcool.cn/community/013d025ba0c39ca8012099c8889c41.jpg@2o.jpg' },
    { url: 'https://img.zcool.cn/community/01083a58a024f7a801219c77c370b3.jpg@2o.jpg' },
    { url: 'https://ts1.cn.mm.bing.net/th/id/R-C.4a81f640a9ab036e948c5eb3e17f9c82?rik=GGe%2fktqAGXB5hQ&riu=http%3a%2f%2fwww.sshuigz.com%2fupload%2fimage%2f20201029%2f20201029015715_33595.jpg&ehk=jAmBfHlGyDNjAgIkFeJO3NvgyhgYD%2bIxMXK6TIRqEzE%3d&risl=&pid=ImgRaw&r=0' },
    { url: 'https://ts1.cn.mm.bing.net/th/id/R-C.cfc6963a3f9079187d63c467652e8e0e?rik=hzT0XXak%2fXR68Q&riu=http%3a%2f%2fwww.mgtec.net%2fuploadfile%2f2020%2f0429%2f20200429024937205.jpg&ehk=BYsErSkWxgl4jOlMo5Ut7kufPy3Mwr0z8fSBD8EWuYM%3d&risl=&pid=ImgRaw&r=0' },
])
</script>

<style scoped>
/* 最大的盒子 */
.box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('https://www.imgur.la/images/2024/05/16/2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #1d1d1d;
}

.left-content {
    flex: 1;
    padding: 20px;
    text-align: center;
    color: rgb(255, 255, 255);
}

.right-content {
    flex: 3;
    padding: 40px;
    padding-left: 100px;
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 620px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

/* 图片  */
.images {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>