xinyang5yuan-web/pages/phone_list/[id].vue

<template>
    <div class="bg-[#ffffff]">
        <!-- 头部导航和标题区域 -->
        <div class="box_6 flex-col px-4 py-3">
            <div class="group_1">
                <div class="flex section_4 justify-start items-center mb-2">
                    <div>
                        <img class="thumbnail_1 w-6 h-6" referrerpolicy="no-referrer" src="public/images/home.png" />
                    </div>
                    <div class="text_13 text-sm mt-1 sm:mt-0">您的位置：首页>{{ id == '-3' ? '医生团队' : gory_name }}</div>
                </div>
                <div class="text_14 text-center text-xl font-bold my-3">{{ id == '-3' ? '医生团队' : gory_name }}</div>
            </div>
        </div>

        <!-- 公告列表 -->
        <div class="flex box_7 flex-col px-4 py-2" v-for="(item, index) in newsList" :key="index"
            @click="goDetail(item)">
            <div class="flex image-text_7 flex-col sm:flex-row justify-between mb-4 border-b pb-4">
                <img class="image_1 w-full sm:w-24 h-auto sm:h-24 object-cover mb-3 sm:mb-0"
                    referrerpolicy="no-referrer" :src="item.news_image[0]" />

                <div class="flex group_13 flex-col justify-between flex-1 sm:ml-4">
                    <div class="flex text-group_7 flex-col justify-between">
                        <div class="text_15 text-base font-medium mb-2">
                            <span>{{ item.news_title }} </span>
                            <span style="font-size: 12px;color: #999;margin-left: 10px;">{{ item.news_key }}</span>
                        </div>
                        <div class="text_16 text-sm text-gray-600 line-clamp-3">
                            {{ item.news_auto }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页或底部区域 -->
        <div class="flex flex-row justify-center my-4 py-4">
            <n-pagination v-model:page="page" :item-count="total" :page-slot="7"
                @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_list/' + route.params.id)
    } else {
        router.push('/list/' + route.params.id)
    }
    if (id.value == '-3') {
        getYsGroupList()
    } else {
        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/news/index", { gory_id: 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;
            gory_name.value = res.data.data.gory_name;
            //滚到页面最上面
            window.scrollTo(0, 0)
        })
        .catch((err) => {
            console.dir(err)
        })
}
const getYsGroupList = () => {
    $api.post("/api/Newsbx/index", { gory_id: 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;
            gory_name.value = res.data.data.gory_name;
            //滚到页面最上面
            window.scrollTo(0, 0)
        })
        .catch((err) => {
            console.dir(err)
        })
}
const getPageList = (p) => {
    page.value = p;
    if (id.value == '-3') {
        getYsGroupList()
    } else {
        getGroupList()
    }
}
const goDetail = (item: any) => {
    //router.push(`/info/${item.id}`)
    if (id.value == '-3') {
        window.open(`/ys_info/${item.id}`)
    } else {
        window.open(`/info/${item.id}`)
    }
}
</script>

<style scoped>
@import "@/assets/css/common.scss";
@import "@/assets/css/list.css";

/* 手机端适配样式 */
@media (max-width: 768px) {

    .box_6,
    .box_7 {
        padding: 0px;
    }

    .text_14 {
        font-size: 1.25rem;
        margin-top: 30px;
        text-align: left;
    }

    .text_15 {
        font-size: 1rem;
    }

    .text_16 {
        font-size: 0.875rem;
    }

    .group_1 {
        padding-left: 30px;
    }

    .section_4 {
        width: 100%;
        height: auto;
    }

    .image-text_7 {
        width: 100%;
        margin: 0px;
        height: 100%;
    }

    .image_1 {
        width: 100%;
    }

    .box_7 {
        height: auto;
    }

    .text-group_7 {
        width: auto;
        height: auto;
    }

    .text_15 {
        width: 100%;
    }

    .text_16 {
        width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: 10px;
    }

    .group_13 {
        margin: 0px;
        padding-left: 10px;
    }
}

::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
    color: #1FC4C2;
    border: 1px solid #1FC4C2;
}
</style>