榆钱落尽槿花稀
ac3d0a1205
2.地图服务整合，新增腾讯地图接入功能 3.信息查询模块升级，实现详情页同步适配（含手机端） 4.接口数据优化，同步调整页面图片展示效果 5.文章内容扩容，提升页面视觉展示效果 6.顶部导航栏优化，实现PC端与手机端自适应调整
108 lines
3.0 KiB
Vue
108 lines
3.0 KiB
Vue
<template>
|
||
<div class="bg-[#ffffff]">
|
||
<div class="box_6 flex-col">
|
||
<div class="group_1">
|
||
<div class="flex section_4 flex-row justify-between" style="padding-top: 67px;">
|
||
<img class="thumbnail_1" referrerpolicy="no-referrer" src="public/images/home.png" />
|
||
<span class="text_13">您的位置：首页>系统公告</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="page-container mt-[30px]">
|
||
<div>
|
||
<div class="title">{{ info.news_title }}</div>
|
||
<div class="flex flex-row justify-start author">
|
||
<div>发布人：{{ info.news_auto }}</div>
|
||
<div class="time">发布时间：{{ info.showtime }}</div>
|
||
</div>
|
||
<div style="border-top: 1px solid rgba(238, 238, 238, 1);"></div>
|
||
<div class="my-[30px]">
|
||
<div v-html="info.news_content"></div>
|
||
</div>
|
||
</div>
|
||
<div style="border-top: 1px solid rgba(238, 238, 238, 1);"></div>
|
||
<!-- <div class="py-[30px]">
|
||
<div class="">
|
||
<div class="">
|
||
<div>上一篇：XXXXXXXXXXXXXXXXXXXXX</div>
|
||
<div class="mt-[10px]">下一篇：暂无</div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useStore } from '~/store'
|
||
import $api from '@/service/webRequest'
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
const id = ref(route.params.id)
|
||
onMounted(() => {
|
||
// 在移动端视图下初始化
|
||
document.documentElement.style.fontSize = '16px';
|
||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||
if (coMobile) {
|
||
router.push('/phone_info/' + id.value)
|
||
} else {
|
||
router.push('/info/' + id.value)
|
||
}
|
||
getInfo();
|
||
})
|
||
const info = ref({})
|
||
const getInfo = () => {
|
||
$api.post("/api/news/info", { id: id.value })
|
||
.then((res: any) => {
|
||
console.log(res)
|
||
info.value = res.data.data
|
||
})
|
||
.catch((err) => {
|
||
console.dir(err)
|
||
})
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
@import "@/assets/css/common.scss";
|
||
@import "@/assets/css/list.css";
|
||
|
||
.title {
|
||
font-size: 26px;
|
||
font-weight: 600;
|
||
color: #000000;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
.author {
|
||
font-size: 14px;
|
||
color: rgba(153, 153, 153, 1);
|
||
margin-bottom: 20px;
|
||
}
|
||
.page-container{
|
||
padding: 0 360px;
|
||
}
|
||
.time{
|
||
margin-left: 70px;
|
||
}
|
||
@media (max-width: 1440px) {
|
||
.page-container{
|
||
padding: 0 100px;
|
||
}
|
||
}
|
||
@media (max-width: 768px) {
|
||
.page-container{
|
||
padding: 0 20px;
|
||
}
|
||
.author{
|
||
flex-direction: column;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
}
|
||
.time{
|
||
margin-left: 0;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
}
|
||
</style>
|