<!-- 新闻资讯 -->

<template>
    <div class="box">

        <div class="box-content">

            <!-- 左边框 -->
            <div class="box-content-left">
                <p>Network</p>
                <p>Information</p>
                <p>新闻资讯</p>
            </div>

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

                <div v-for="item in g_dataList" :key="item.id" class="box-content-right-item">
                    <!-- 图片 -->
                    <div class="box-content-item-img">
                        <img :src="(item.cover?.indexOf('http') == 0 ? '' : 'http://106.55.102.172:10/prod-api') + item.cover"
                            alt="图片">
                    </div>
                    <!-- 标题 -->
                    <div class="box-content-item-title">
                        <span>{{ item.title }}</span>
                        <span>{{ item.createTime }}</span>
                    </div>
                    <!-- 内容 -->
                    <div class="box-content-item-content">
                        <span v-html="item.content"></span>
                    </div>
                    <!-- 按钮 -->
                    <div class="box-content-item-btn">
                        <el-button type="primary" @click="handleClick(item)">了解更多</el-button>
                    </div>
                </div>

            </div>

        </div>

    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getArticleList } from '@/http/api/pages/Article'


/************************************************
 * 全局变量
 * 
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 路由
const g_route = useRoute();
const g_router = useRouter();


const g_dataList = ref([
    {
        id: 1,
        bgUrl: "https://th.bing.com/th/id/R.3ca039d0cbb53db344864ed1ccf0ca46?rik=p374KM4KMfilRA&riu=http%3a%2f%2fwww.cq.gov.cn%2fywdt%2ftpxw%2f202106%2fW020210603363738010006.jpg&ehk=FNntSzzIDfjvBr3SvvcgESWvbPQChRm1iZa58ZhPBaw%3d&risl=&pid=ImgRaw&r=0",
        title: "傅柒生：万里茶道申遗重在联合，也要突出特色",
        date: "2023-8-3",
        content: "11月20日至22日，中蒙俄万里茶道申遗国际学术研讨会暨万里茶道沿线城市市长论坛在黄山举行，会议期间，福建省文化和旅游厅党组成员、副厅长、福建省文物局局长傅柒生在现场接受了荆楚网记者采访。",
        englishTitle: "VR Creative Exploration",
    },
    {
        id: 2,
        bgUrl: "https://media.istockphoto.com/id/2058934246/zh/%E7%85%A7%E7%89%87/spring-field-drone-photography-sustainability-aerial-landscape-green-economy.jpg?s=1024x1024&w=is&k=20&c=kNtLb-ji23MbGcOOTLyNWtUG-TcpwfCod9dpQl5lbQs=",
        title: "蒙古国文化部代表就万里茶道联合跨国申遗工作进行展望",
        date: "2023-8-3",
        content: "11月20日至22日，中蒙俄万里茶道申遗国际学术研讨会暨万里茶道沿线城市市长论坛成功在黄山举行，蒙古国文化部文物局文化遗产及考古司主任阿拉达尔孟克呼钦（ALDARMUNKH Purev）在现场接受了记者采访，并对万里茶道联合跨国申遗工作进行展望。",
        englishTitle: "VR Creative Exploration"
    },
    {
        id: 3,
        bgUrl: "https://img.zcool.cn/community/014cc05d2ec104a80120695c86c6f5.jpg@1280w_1l_2o_100sh.jpg",
        title: "傅柒生：万里茶道申遗重在联合，也要突出特色",
        date: "2023-8-3",
        content: "11月20日至22日，中蒙俄万里茶道申遗国际学术研讨会暨万里茶道沿线城市市长论坛成功在黄山举行。太原市政协副主席陈晓红，太原市文物局党组书记、局长刘玉伟接受了记者采访。",
        englishTitle: "VR Creative Exploration"
    },
]);


onMounted(() => {
    get_articleList();
})

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



/************************************************
* 事件处理
* 
* 格式: act_ + 事件名     例如: getAppDataList
************************************************/
// 
const handleClick = (item) => {
    const queryData = {
        id: item.id,
        path: "/ArticleColumn",
        title: "文章栏目"
    }
    g_router.push({ path: '/ArticleDetails', query: queryData });
}

const get_articleList = async () => {
    const res = await getArticleList();
    g_dataList.value = res.data.filter((item, index) => index < 3);
}

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

</script>

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

.box-content {
    flex: 1;
    min-height: calc(15vw + 20vh + 10vmin);
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

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

.box-content-left p:nth-child(1),
.box-content-left p:nth-child(2) {
    font-size: 24px;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    white-space: nowrap;
}

.box-content-left p:nth-child(3) {
    font-size: 20px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}


.box-content-right {
    flex: 11;
    margin: 100px 0;
    padding: 0 40px 0 70px;
    background-color: rgba(235, 235, 235, 1);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    grid-gap: 80px;
}

.box-content-right-item {
    position: relative;
    min-height: calc(15vw + 10vh + 10vmin);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.box-content-item-img {
    position: relative;
    top: -50px;
    width: calc(100% - 32px);
    height: calc(2vw + 2vh + 10vmin);
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.box-content-item-img img {
    width: 100%;
    height: 100%;
}

.box-content-item-img::after {
    content: '';
    position: absolute;
    top: calc(0px - 0.1vw - 0.1vh - 0.1vmin);
    right: 0;
    width: 50%;
    height: calc(0.1vw + 0.1vh + 0.1vmin);
    background-color: #FD571F;
}

.box-content-item-img::before {
    content: '';
    position: absolute;
    top: calc(0px - 0.1vw - 0.1vh - 0.1vmin);
    right: calc(0px - 0.2vw - 0.1vh - 0.1vmin);
    width: calc(0.2vw + 0.1vh + 0.1vmin);
    height: 70%;
    background-color: #FD571F;
}

.box-content-item-title {
    position: relative;
    top: -25px;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
}

.box-content-item-title span:nth-child(1) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-content-item-title span:nth-child(2) {
    margin: 0 0 0 32px;
}


.box-content-item-content {
    position: relative;
    padding-top: 16px;
    margin: 0 0 32px 0;
    font-size: calc(0.2vw + 0.2vh + 10px);
    font-weight: 400;
    border-top: 1px solid #D9D9D9;
    text-align: justify;
    color: rgba(77, 77, 77, 1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    text-overflow: ellipsis;
    overflow: hidden;
}

.box-content-item-btn button {
    min-width: 100px;
    width: calc(2vw + 2vh + 10vmin);
    min-height: 40px;
    height: calc(1.5vw + 1vh + 1vmin);
    background-color: rgba(0, 0, 0, 1);
    border: none;
    border-radius: 0;
    font-size: calc(0.2vw + 0.2vh + 10px);
}


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

    .box-content-left {
        padding: calc(1.8vw + 1.8vh + 1.8vmin) calc(2vw + 2vh + 2vmin);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .box-content-left p:nth-child(1),
    .box-content-left p:nth-child(2),
    .box-content-left p:nth-child(3) {
        margin: 0 8px;
    }

    .box-content-right {
        flex: 11;
        margin: 0;
        padding: 60px calc(2vw + 2vh + 2vmin);
        background-color: rgb(255, 255, 255);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }

    .box-content-item-img[data-v-c233680a] {
        position: relative;
        top: -50px;
        width: calc(100% - 32px);
        height: calc(2vw + 2vh + 25vmin);
        background-size: cover;
        background-position: center;
        z-index: 1;
        transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
    }
}
</style>