156 lines
3.4 KiB
Vue
156 lines
3.4 KiB
Vue
<template>
|
|
<div class="aboutimgBg" :style="{
|
|
backgroundImage: `url(${bgImage5})`,
|
|
backgroundSize: 'cover',
|
|
}">>
|
|
<div class="banDes">
|
|
<div class="newsxq1Tit text-center">
|
|
<h2 class="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]">
|
|
<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]">
|
|
<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: 600px;
|
|
}
|
|
}
|
|
.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-top: -308px;
|
|
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> |