432 lines
14 KiB
Vue
432 lines
14 KiB
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>
|