<!-- 近期项目 -->

<template>

    <div class="box">
        <div class="box-content">

            <div class="box-content-top">
                <div class="box-top-englishTitle">
                    <p>LATEST</p>
                    <p>PROJECTS</p>
                </div>

                <div class="box-top-title">
                    <span>•</span>
                    <span>近期项目</span>
                </div>
            </div>

            <div class="box-content-bottom">
                <!-- 万里茶道申遗图片 -->
                <div class="box-content-bottom-item"></div>

                <!-- 内容 -->
                <div class="box-content-bottom-item">
                    <div class="box-content-bottom-item-left">
                        <div class="item-text-title">
                            <p>万里茶道申遗</p>
                            <p>Ten Thousand Miles Tea Ceremony World Heritage Application</p>
                        </div>

                        <div class="item-text-content">
                            <p>
                                万里茶道是古代中国、蒙古、俄国之间以茶叶为大宗商品的长距离贸易线路，是继丝绸之路衰落之后在欧亚大陆兴起的又一条重要的国际商道。
                            </p>
                            <p>
                                万里茶道从中国福建崇安（现武夷山市）起，途经江西、湖南、湖北、河南、山西、河北、内蒙古、从伊林（现二连浩特）进入现蒙古国境内、沿阿尔泰军台，穿越沙漠戈壁，经库伦（现乌兰巴托）到达中俄边境的通商口岸恰克图。
                            </p>
                            <p>
                                全程约4760公里，其中水路1480公里，陆路3280公里。
                            </p>
                            <p>
                                茶道在俄罗斯境内继续延伸，从恰克图经伊尔库茨克、新西伯利亚、秋明、莫斯科、圣彼得堡等十几个城市，又传入中亚和欧洲其他国家，使茶叶之路干线总长13000
                                余公里， [16]沟通了亚洲大陆南北方向农耕文明与草原游牧文明的核心区域，并延伸至中亚和东欧等地区。成为名副其实的“万里茶路”。
                            </p>
                            <p>
                                2019年3月22日，国家文物局发函，正式同意将“万里茶道”列入《中国世界文化遗产预备名单》。
                            </p>
                            <p>
                                2024年4月18日，第九届中蒙俄万里茶道城市合作大会在湖北孝感汉川开幕。
                            </p>
                        </div>

                        <div class="item-text-related">
                            <div>
                                <p>申遗</p>
                                <p>Inscription</p>
                            </div>
                            <div>
                                <p>茶</p>
                                <p>Tea</p>
                            </div>
                            <div>
                                <p>展厅</p>
                                <p>Gallery</p>
                            </div>
                            <div>
                                <p>虚拟现实</p>
                                <p>Virtual Reality</p>
                            </div>
                        </div>
                    </div>

                    <div class="box-content-bottom-item-right">
                        <!-- 跳转 -->
                        <div class="bottom-item-jumpBackground" @click="act_toTeaCeremony">
                            <span class="bottom-item-jumpBackground-text">SKIP</span>
                            <img class="bottom-item-jumpBackground-img" src="@/assets/img/箭头.png" alt="">
                        </div>
                    </div>
                </div>

            </div>

            <div class="bottom-item-jumpBackground noPC" @click="act_toTeaCeremony">
                <span class="bottom-item-jumpBackground-text">SKIP</span>
                <img class="bottom-item-jumpBackground-img" src="@/assets/img/箭头.png" alt="">
            </div>

        </div>
    </div>

</template>

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




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



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




/************************************************
* 事件处理
* 
* 格式: act_ + 事件名     例如: getAppDataList
************************************************/
// 跳转页面
const act_toTeaCeremony = () => {
    window.open("http://www.greattearoute.com/index.php/index/index/index", "Inscription")
}





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

</script>

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

.box-content {
    flex: 1;
    padding: calc(1.8vw + 1.8vh + 1.8vmin) calc(2vw + 2vh + 2vmin);
    display: flex;
    flex-direction: column;
}

.box-content-top {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
}

.box-top-englishTitle {
    font-size: 24px;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
}

.box-top-englishTitle p:nth-child(1) {
    margin: 0px;
}

.box-top-englishTitle p:nth-child(2) {
    margin: 0px calc(0.5vw + 0.5vh + 0.5vmin);
}

.box-top-title {
    font-size: 24px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.box-top-title span:nth-child(1) {
    color: rgba(253, 87, 31, 1);
    font-size: 40px;
}

.box-content-bottom {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    justify-content: space-between;
    align-items: flex-start;
    grid-gap: 32px;
}

.box-content-bottom .box-content-bottom-item:nth-child(1) {
    width: 100%;
    height: calc(10vw + 10vh + 10vmin);
    background-image: url("@/assets/img/茶道申遗.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 8px 8px 8px rgb(0, 0, 0, 0.3);
}

.box-content-bottom .box-content-bottom-item:nth-child(2) {
    min-height: calc(8vw + 8vh + 5vmin);
    /* padding: 32px 64px 0 64px; */
    display: flex;
    flex-direction: row;
}

.box-content-bottom-item-left {
    flex: 3;
}

.box-content-bottom-item-right {
    flex: 1;
    display: flex;
    justify-content: center;
}

.item-text-title p:nth-child(1) {
    margin: 0;
    font-size: 24px;
    color: rgba(0, 0, 0, 1);
}

.item-text-title p:nth-child(2) {
    margin: 2px 0 32px 0;
    font-size: 16px;
    color: rgba(0, 0, 0, 1);
}

.item-text-content {
    font-size: 16px;
    color: rgba(148, 148, 148, 1);
}

.item-text-related {
    font-size: 12px;
    color: rgba(71, 71, 71, 1);
    display: flex;
    justify-content: flex-start;
}

.item-text-related div {
    margin-right: 32px;
}

.bottom-item-jumpBackground {
    position: relative;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    overflow: hidden;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.bottom-item-jumpBackground:hover {
    background-color: brown;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.noPC {
    display: none;
}

.bottom-item-jumpBackground-img {
    position: absolute;
    top: 60%;
    left: -100%;
    min-width: 35px;
    width: calc(1vw + 1vh + 1vmin);
    opacity: 1;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.bottom-item-jumpBackground-text {
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.bottom-item-jumpBackground:hover .bottom-item-jumpBackground-text {
    color: rgba(253, 87, 31, 1);
    transform: scale(1.1);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.bottom-item-jumpBackground:hover .bottom-item-jumpBackground-img {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

/* 移动端样式 */
@media screen and (max-width: 700px) {
    .box-content-bottom {
        flex-direction: column;
    }

    .bottom-item-jumpBackground:nth-child(1) {
        display: none;
    }

    .box-content-bottom-item-right {
        display: none;
    }

    .noPC {
        position: relative;
        width: 100%;
        height: 70px;
        border-radius: 0;
        background: rgba(235, 235, 235, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
        overflow: hidden;
    }

    .bottom-item-jumpBackground-text {
        color: rgba(253, 87, 31, 1);
    }

    .bottom-item-jumpBackground-img {
        top: 65%;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>