<!-- 万里茶道 -->

<template>

    <div class="box">

        <div class="box-content">

            <!-- 左边 -->
            <div class="box-content-left">
                <div class="box-content-left-title position-relative">
                    <span style="--i:1">万</span>
                    <span style="--i:2">里</span>
                    <span style="--i:3">茶</span>
                    <span style="--i:4">道</span>
                    <span style="--i:5">与</span>
                    <span style="--i:6">历</span>
                    <span style="--i:7">史</span>
                    <span style="--i:8">的</span>
                    <span style="--i:9">动</span>
                    <span style="--i:10">脉</span>
                </div>

                <div class="box-content-left-englishTitle position-relative">
                    <p>TEA ROAD AND THE ARTERIES</p>
                    <p>OF HISTORY</p>
                </div>

                <div class="box-content-left-content position-relative">
                    <p>指导单位： 中华文化促进会万里茶道协作体</p>
                    <p>联合出品： 万里茶道实证研究中心</p>
                    <p>&#8195&#8195&#8195&#8195&#8195 省广(福建)装饰设计工程有限公司</p>
                    <p>&#8195&#8195&#8195&#8195&#8195 阳光学院元宇宙与新媒体学院</p>
                    <p>&#8195&#8195&#8195&#8195&#8195 武汉工夫茶业有限公司</p>
                </div>

                <div class="box-content-left-endText position-relative">
                    <p>万里茶道是一条起于福建武夷山，终点是俄罗斯圣彼得堡的茶叶贸易和文化交流通道</p>
                </div>

                <div class="box-content-left-img"></div>
            </div>

            <!-- 右边 -->
            <div class="box-content-right">
                <div class="box-content-right-content" @click="act_toTeaCeremony">
                    <img src="@/assets/img/箭头.png" alt="">
                    <p>Opening the Gateway to the Virtual World</p>
                    <p>开启虚拟世界之门</p>
                </div>
            </div>

        </div>

    </div>

</template>

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




/************************************************
 * 全局变量
 * 
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/



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



/************************************************
* 事件处理
* 
* 格式: act_ + 事件名     例如: getAppDataList
************************************************/
// 跳转页面
const act_toTeaCeremony = () => {
    window.open("http://img.han-zhi.net/wlcd/pv/index.html", "Ten-Thousand-Li-Tea-Route")
}



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

</script>

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

.box-content {
    flex: 1;
    min-height: calc(20vw + 20vh + 10vmin);
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 100%);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    justify-content: space-between;
    align-items: flex-start;
    grid-gap: 32px;
}

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

.box-content-left-title {
    margin-bottom: 10vh;
    font-size: 24px;
    font-weight: 600;
    color: rgba(253, 87, 31, 1);
}

.box-content:hover .box-content-left-title span {
    /* 设置行内块元素 */
    display: inline-block;
    /* 添加动画 */
    animation: donghua 1.5s ease-in-out;
    /* 利用变量动态计算动画延迟时间 */
    animation-delay: calc(.1s*var(--i));
}

@keyframes donghua {
    0% {
        transform: translateY(0px);
    }

    20% {
        transform: translateY(-20px);
    }

    40%,
    100% {
        transform: translateY(0px);
    }
}

.box-content-left-englishTitle {
    margin: 0 calc(3vw + 3vh + 3vmin) 0 0;
    font-size: 24px;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(107, 107, 107, 1);
}

.box-content-left-content {
    padding-top: 32px;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
}

.box-content-left-endText {
    margin: 170px 0 64px 0;
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
}

.position-relative {
    position: relative;
    z-index: 1;
}

.box-content-left:hover .box-content-left-img {
    transform: scale(1.2);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1.5s;
    filter: hue-rotate(90deg) brightness(0.5);
}

.box-content-left-img {
    position: absolute;
    bottom: 0;
    right: 64px;
    width: calc(10vw + 10vh + 10vmin);
    height: calc(10vw + 10vh + 10vmin);
    background-image: url("@/assets/img/N.png");
    background-size: cover;
    background-position: center;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.box-content-right {
    min-height: 500px;
    height: 100%;
    background-image: url("@/assets/img/万里茶道.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.box-content-right-content {
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
    cursor: pointer;
}

.box-content-right-content img {
    width: calc(1.5vw + 1vh + 1vmin);
}

.box-content-right-content p {
    margin: 6px 0;
    text-shadow: 2px 2px 5px rgba(255, 255, 255, 1);
}

.box-content-right:hover .box-content-right-content {
    opacity: 1;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

/* 移动端样式 */
@media screen and (max-width: 700px) {
    .box-content-right-content {
        opacity: 1;
    }
}
</style>