<template>
    <div class="aboutimgBg" :style="{
            backgroundImage: `url(${bgImage5})`,
            backgroundSize: 'cover',
        }">>
        <div class="banDes">
            <div class="newsxq1Tit text-center" >
                <h2 class="w-[80%] m-auto text-[20px] md:text-[50px] text-black">
                    {{locale  == 'zh' ? info.title : info.en_title }}
                </h2>
            </div>
        </div>
    </div>
    <div class="newsxq1Bg">
        <div class="container px-4 md:px-[15px] pb-[100px]">
            <div class="newsxq1Box1 text-center mt-6 md:mt-[40px]">
                <h2>{{ info.add_time }}</h2>
                <div class="newsxq1di mx-auto md:mx-0"></div>
                <h4 class="mt-4 md:mt-[30px] break-all text-base md:text-[24px]" style="line-height: 30px;">
                   <p v-html="locale  == 'zh' ? info.content : info.en_content"></p>
                </h4>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
// 添加第五个背景图片
import bgImage5 from '../public/images/newsxq1.png'

import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import $api from '@/service/webRequest'

const route = useRoute()
const { locale } = useI18n()
const id = ref('')
const info = ref({})

onMounted(() => {
    id.value = route.params.id;
    getInfo()
})
const getInfo=()=>{
    $api.get("/api/article/details/"+id.value)
		.then((res: any) => {
			console.log(res)
            info.value = res.data.data
		})
		.catch((err) => {
			console.dir(err)
		})
}
</script>
<style lang="scss" scoped>
.aboutimgBg {
    height: 300px;
    @media (min-width: 768px) {
        height: 554px;
    }
}
.banDes {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    @media (min-width: 768px) {
        position: absolute;
        left: 0;
        top: 0;
    }
}
.newsxq1Tit {
    margin-top: -50px;
    margin-left: 0;
    padding: 0 15px;
    position: relative;
    z-index: 10;
    
    @media (min-width: 768px) {
        margin-top: -462px;
        margin-left: 13px;
    }
}
.newsxq1Bg {
    height: auto;
    margin-top: -100px; /* 修改这里，让内容区域更靠近顶部 */
    margin-left: 0;
    padding-bottom: 30px;
    position: relative;
    z-index: 5;
    
    @media (min-width: 768px) {
        height: 300px;
        margin-left: 64px;
    }
}
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    
    @media (min-width: 768px) {
        width: 1310px;
    }
}
.newsxq1Box1 h2 {
    font-weight: bold;
    font-size: 20px;
    color: #1C1C1C;
    line-height: 24px;
    letter-spacing: 2px;
    text-align: center;
    
    @media (min-width: 768px) {
        font-size: 30px;
        line-height: 28px;
        letter-spacing: 4px;
        text-align: left;
    }
}
.newsxq1Box1 h2::after {
    content: '';
    margin: -10px auto 0;
    width: 180px;
    height: 16px;
    background: #A8CBFF;
    display: block;
    
    @media (min-width: 768px) {
        margin-top: -15px;
        margin-left: 0;
        margin-right: auto;
        width: 265px;
        height: 24px;
    }
}
.newsxq1di {
    width: 200px;
    border-top: 2px solid #1C1C1C;
    margin: 10px auto;
    
    @media (min-width: 768px) {
        width: 379px;
        margin: 10px 0;
    }
}
</style>