tuanshiwei-web/components/AppNewsdel.vue

<template>
    <!-- PC端布局 -->
    <div class="flex justify-between w-full h-full">
        <!-- 左边导航栏 -->
    
        <!-- 右边内容栏 -->
        <div class="rightcon" @scroll="hmScroll" id="tjright">
            <div class="flex top_search">
                <div style="width: 572px; height: 69px; margin-left: 415px">
                    <img :src="`/img/index/dlogo.png`" alt="" style="width: 100%; height: 100%; object-fit: cover" />
                </div>
                <!-- <div class="inputform">
                    <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
                        placeholder="请输入搜索关键字" />
                    <div class="search_rinput">
                        <img src="/img/index/hmsearch.png" alt="" />
                    </div>
                </div> -->
            </div>
    
            <div class="News_box  h-auto">
                <div class="lef_box">
                    <div class="re_box">
                        <div class="re_box_item" v-if="Newsdetail != null && Newsdetail.type == 1">
                            <div class='re_mian' v-if="Newsdetail.cate != null">{{ title_left + ' > ' + Newsdetail.cate.name+' > ' + '正文内容'}} </div>
                            <div class="re_title">{{ Newsdetail.title }}</div>
                            <div class='flex justify-between re_rouse'>
                                <span>{{Newsdetail.release_time_text}}</span>
                                <span v-if="Newsdetail.source != '' && Newsdetail.source  != null" >来源：{{ Newsdetail.source }}</span>
                            </div>
                            <div class="re_slice"></div>
                             <div class="re_file" v-if="Newsdetail.file != '' && Newsdetail.file != null">
                                附件：
                                <a :href="Newsdetail.file" target="_blank" rel="noopener noreferrer" style="color: #0066cc;">
                                    {{ Newsdetail.attachment.filename }}
                                </a>
                            </div>
                            <div class="re_content"  v-html="Newsdetail.content"></div>
                        </div>

                        <div class="re_box_item" v-if="Newsdetail != null && Newsdetail.type == 2">
                            <div class="re_title" style="margin-top: 0;font-size: 20px;font-weight: 600;">{{ Newsdetail.title }}</div>
                            <div class='flex justify-between re_rouse' style="margin-bottom: 20px;">
                                <span>{{Newsdetail.release_time_text}}</span>
                                <span v-if="Newsdetail.source != '' && Newsdetail.source  != null">来源：{{ Newsdetail.source }}</span>
                            </div>
                            <embed type="application/pdf" :src="Newsdetail.file" width="100%" height="580px" alt="">
                        </div>

                    </div>
                </div>
    
                <div class="rig_box" :class="{'topding':topding}">
                     
                    <n-tabs :bar-width="0" type="line" 
                    class="custom-tabs" pane-style="background-color: #ffffff;">
                        <n-tab-pane name="oasis" tab="热门推荐" style="padding: 30px;">
                            <div class="flex flex-row" v-for="item,index in remList" :key="index" style="padding-bottom:30px;cursor: pointer;" @click="getNewsdetail({id:item.id,type:'1'})">
                                <div class="number_t" v-if="index == 0 || index == 1 || index == 2">
                                    {{index+1 > 10 ? index + 1 : '0'+(index+1) }}
                                </div>
                                <div class="number_t1" v-else>
                                    <span v-if="index+1 == 6" style="color: #D70E08;">{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
                                    <span v-else>{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
                                </div>
                                <div class="content_t2">
                                    <p class="p1 one-line-ellipsis">{{ item.title }}</p>
                                    <p class="p2 flex justify-between items-center">
                                        <span>{{ item.source }}</span>
                                        <span class="flex items-center">
                                            <img src="/img/views.png" alt="" style="padding-right: 10px;">
                                            {{ item.views }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </n-tab-pane>
                        <n-tab-pane name="jay chou" tab="精选文章" style="padding: 30px;">
                         <div class="flex flex-row" v-for="item,index in jinxList" :key="index" style="padding-bottom:30px; cursor: pointer;" @click="getNewsdetail({id:item.id,type:'1'})">
                                <div class="number_t" v-if="index == 0 || index == 1 || index == 2">
                                    {{index+1 > 10 ? index + 1 : '0'+(index+1) }}
                                </div>
                                <div class="number_t1" v-else>
                                    <span v-if="index+1 == 6" style="color: #D70E08;">{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
                                    <span v-else>{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
                                </div>
                                <div class="content_t2">
                                    <p class="p1 one-line-ellipsis">{{ item.title }}</p>
                                    <p class="p2 flex justify-between items-center">
                                        <span>{{ item.source }}</span>
                                        <span class="flex items-center">
                                            <img src="/img/views.png" alt="" style="padding-right: 10px;">
                                            {{ item.views }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </n-tab-pane>
                    </n-tabs>
                    
                </div>
            </div>
    
            <!-- 右分享 -->
            <!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
                    <img :src="`/img/index/douyin.png`" alt="">
                    <img :src="`/img/index/wb.png`" alt="">
                    <img :src="`/img/index/wx.png`" alt="">
                    <img :src="`/img/index/blbl.png`" alt="">
                </div> -->
            <!-- 底部鼠标 -->
            <div style="position: absolute; bottom: 30px; right: 30px">
                <img :src="`/img/index/hmouse.png`" alt="" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { NTabs,NTabPane } from 'naive-ui'
import $api from '@/service/webRequest'
import emitter from '@/plugins/emitter'
const inputSearch = ref('')
const page = ref(1);
const jinxList = ref([]);
const remList = ref([]);
const topding = ref(false);
const title_left = ref('新闻动态');
const Newsdetail = ref(null);

emitter.on('detailId', (data) => {
    console.log(data,111111)
    getNewsdetail(data);
});
//精选
const getjinxList = async () => {
	const res = await $api.post('/api/home.news/index',
        {
            limit:6,
            page:page.value,
            fine:1
        }
    )
	jinxList.value = res.data.data.list;
}
//热门
const getremList = async () => {
	const res = await $api.post('/api/home.news/index',
        {
            limit:6,
            page:page.value,
            hot:1
        }
    )
	remList.value = res.data.data.list;

}
// 新闻/百科/信息公开 详情
const getNewsdetail = async (data:object) => {
    // 新闻详情
    if (data.type == 1) {
        title_left.value = '新闻动态';
        const res = await $api.post('/api/home.news/detail',
            {
                id:data.id
            }
        )
        Newsdetail.value = res.data.data;
    }else if(data.type == 2){
        title_left.value = '信息公开';
        //信息公开文章详情
        const res1 = await $api.post('/api/home.information/detail',
            {
                id:data.id
            }
        )
        Newsdetail.value = res1.data.data;
    }else{
        title_left.value = '团务百科';
        // 团务百科文章详情
        const res2 = await $api.post('/api/home.encyclopedia/detail',
            {
                id:data.id
            }
        )
        Newsdetail.value = res2.data.data;
    }
	
}

const hmScroll = () => {
    let tjright = document.getElementById('tjright');
    if(tjright.scrollTop>159){
        topding.value = true;
    }else{
        topding.value = false;
    }
    
}
//加载中
onMounted(() => { 
    getjinxList();
    getremList();
    getNewsdetail({
        id:5192,
        type:'1'
    });
    window.addEventListener('scroll', hmScroll);
})
</script>

<style lang="scss" scoped>
@import '@/assets/index.scss';

/* pc端样式 */

.rightcon {
    width:100%;
    height:100%;
    background-image: url('/img/newsxq.png');
    background-size: 100% 100%;
    overflow-y: auto;
}

.top_search {
    margin-top: 50px;
    height: 70px;
    justify-content: space-between;
    align-items: center;
}

.inputform {
    position: relative;
    width: 340px;
    margin-right: 319px;
}

.contactInput {
    width: 337px;
    height: 50px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #dee4e8;
    padding-left: 15px;
}

.contactInput::placeholder {
    color: #999999;
}

.contactInput:focus {
    outline: none;
}

.search_rinput {
    width: 68px;
    height: 50px;
    background: #e6e6e6;
    border-radius: 0px 8px 8px 0px;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.News_box {
    display: flex;
    justify-content: space-between;
    width: 1300px;
    margin: 0 auto;

    .lef_box {
        width: 835px;
        .re_box {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            margin-top: 40px;
            padding-left: 100px;

            .re_box_item {
                width: 100%;
                background: #ffffff;
                border: 1px solid #eef7ff;
                padding: 30px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                min-height: 750px;

                .re_slice {
                    width: 100%;
                    border-bottom: 1px dashed #bbbbbb;
                    margin-top: 20px;
                }
                .re_file{
                    margin-top: 20px;
                    margin-bottom: 10px;
                }
                .re_mian {
                    // width: 248px;
                    font-family: Microsoft YaHei UI;
                    font-weight: 400;
                    font-size: 16px;
                    color: #666666;
                }
                .re_rouse{
                    font-family: Microsoft YaHei UI;
                    font-weight: 400;
                    font-size: 16px;
                    color: #999999;
                    width: 100%;
                    margin-top: 10px;
                }
                .re_title {
                    width: 100%;
                    font-family: Microsoft YaHei UI;
                    font-weight: 500;
                    font-size: 28px;
                    color: #393939;
                    margin-top: 10px;
                }

                .re_content {
                    width: 100%;
                    height: 100%;
                    font-family: Microsoft YaHei UI;
                    font-weight: 400;
                    font-size: 16px;
                    color: #999999;
                    padding: 30px 0;
                }

                
            }
        }
    }

    .rig_box {
        width: 430px;
        height: 100%;
        margin-top: 40px;
        margin-left: 35px;
       .custom-tabs {
        .number_t{
            width: 34px;
            height: 34px;
            // background: #FFA234;
            background: #E40106;
            border-radius: 17px;
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            font-size: 18px;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;
        }
        .number_t1{
            width: 34px;
            height: 34px;
            background: #FFFFFF;
            border-radius: 17px;
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            font-size: 18px;
            color: #323232;
            display: flex;
            justify-content: center;
            align-items: end;
            margin-right: 20px;
        }
        .content_t2{
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            width: 80%;
            .p1{
                margin-top: 7px;
                font-size: 18px;
                color: #393939;
            }
            .p2{
                margin-top: 15px;
                font-size: 16px;
                color: #999999;
            }
       }
       }

        :deep(.n-tabs .n-tabs-tab-wrapper){
            width: 215px;
            height: 72px;
            background: #ffffff;
            
            font-size: 18px;
            justify-content: center;
        }
        :deep(.n-tabs .n-tabs-tab .n-tabs-tab__label){
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            font-size: 18px;
        }
        :deep(.n-tabs.n-tabs--line-type .n-tabs-tab:hover, .n-tabs.n-tabs--bar-type .n-tabs-tab:hover){
            color: #348CDE;
        }
        :deep(.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active,.n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active){
            color: #348CDE;
            background: #F1F8FF;
            width: 100%;
            display: flex;
            justify-content: center;
            border-top:solid 2px #378FDF;
        }
        :deep(.n-tabs .n-tabs-tab-pad){
            width: 0;
        }
        
        
    }
    .topding{
        position: absolute;
        top: 0;
        margin-top: 0;
        right: 315px;
        width: 430px;
    }
}
</style>