榆钱落尽槿花稀
ac3d0a1205
2.地图服务整合，新增腾讯地图接入功能 3.信息查询模块升级，实现详情页同步适配（含手机端） 4.接口数据优化，同步调整页面图片展示效果 5.文章内容扩容，提升页面视觉展示效果 6.顶部导航栏优化，实现PC端与手机端自适应调整
122 lines
4.5 KiB
Vue
122 lines
4.5 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">
|
||
<img class="thumbnail_1" referrerpolicy="no-referrer" src="public/images/home.png" />
|
||
<span class="text_13">您的位置：首页>信息搜索</span>
|
||
</div>
|
||
<div class="text_14">信息搜索</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex box_7 flex-row align-center" v-for="(item, index) in newsList" :key="index"
|
||
@click="goDetail(item)">
|
||
<div class="flex block_3 flex-col"></div>
|
||
<div class="flex image-text_7 flex-row justify-between">
|
||
<img class="image_1" referrerpolicy="no-referrer" :src="item.news_image[0]" />
|
||
<div class="flex group_13 flex-col justify-between">
|
||
<div class="flex text-group_7 flex-col justify-between">
|
||
<span class="text_15 text-ellipsis font-bold">
|
||
{{ item.news_title }}
|
||
</span>
|
||
<span class="text_16">
|
||
{{ item.news_auto }}
|
||
</span>
|
||
</div>
|
||
<img class="label_1" referrerpolicy="no-referrer" src="public/images/bs1.png" />
|
||
</div>
|
||
</div>
|
||
<div class="block_4 flex-col">
|
||
<div v-if="id != '-3'" class="flex text-wrapper_11 flex-col text-center">
|
||
<span class="text_17">{{ formattedMonth(item.showtime) }}</span>
|
||
<span class="text_18">{{ formattedYearMonth(item.showtime) }}</span>
|
||
</div>
|
||
<div v-if="id == '-3'" class="flex text-wrapper_11 flex-col text-center">
|
||
<span style="font-size: 22px;margin-top: 87px;color: #ffffff;">{{ item.news_titleshort }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-gray-500 text-center h-[50px] mt-[30px]" v-if="newsList.length == 0">
|
||
暂未找到内容...
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-row justify-center py-5">
|
||
<n-pagination v-model:page="page" :item-count="total" size="large" show-quick-jumper show-size-picker
|
||
@update:page="getPageList">
|
||
</n-pagination>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { NPagination } from 'naive-ui'
|
||
import { nextTick, ref } from 'vue'
|
||
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_search/' + id.value)
|
||
} else {
|
||
router.push('/search/' + id.value)
|
||
}
|
||
getGroupList()
|
||
})
|
||
|
||
const newsList = ref([])
|
||
const page = ref(1)
|
||
const pageSize = ref(10)
|
||
const total = ref(0)
|
||
const gory_name = ref('');
|
||
const getGroupList = () => {
|
||
$api.post("/api/index/index", { content: id.value, page: page.value, pageSize: pageSize.value })
|
||
.then((res: any) => {
|
||
console.log(res)
|
||
newsList.value = res.data.data.list;
|
||
total.value = res.data.data.total_count;
|
||
//滚到页面最上面
|
||
window.scrollTo(0, 0)
|
||
})
|
||
.catch((err) => {
|
||
console.dir(err)
|
||
})
|
||
}
|
||
const getPageList = (p) => {
|
||
page.value = p;
|
||
getGroupList()
|
||
}
|
||
|
||
const goDetail = (item: any) => {
|
||
//router.push(`/info/${item.id}`)
|
||
window.open(`/info/${item.id}`)
|
||
}
|
||
// 计算月份（补零）
|
||
const formattedMonth = (showtime) => {
|
||
const date = new Date(showtime);
|
||
return (date.getMonth() + 1).toString().padStart(2, "0");
|
||
};
|
||
|
||
// 计算 "YYYY.MM" 格式
|
||
const formattedYearMonth = (showtime) => {
|
||
const date = new Date(showtime);
|
||
const year = date.getFullYear();
|
||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||
return `${year}.${month}`;
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
@import "@/assets/css/common.scss";
|
||
@import "@/assets/css/list.css";
|
||
|
||
::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
|
||
color: #1FC4C2;
|
||
border: 1px solid #1FC4C2;
|
||
}
|
||
</style>
|