1，新增页面跳转方式。
2，新增三个详情页面。 3，对接接口。
This commit is contained in:
parent
1baad2504b
commit
02c0895159
@ -151,7 +151,8 @@ const emit = defineEmits(['toSwpe'])
|
|||||||
//跳转详情
|
//跳转详情
|
||||||
const gotoDetail = (id: number) => {
|
const gotoDetail = (id: number) => {
|
||||||
// localStorage.setItem('detailId', detailId.value);
|
// localStorage.setItem('detailId', detailId.value);
|
||||||
emit('toSwpe',id)
|
// emit('toSwpe',id)
|
||||||
|
window.open('/about_info/')
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 挂载方法
|
// 挂载方法
|
||||||
@ -296,9 +297,10 @@ onMounted(() => {
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
|
padding-top: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
p{
|
p{
|
||||||
margin: 15px 30px ;
|
margin: 10px 20px ;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -40,13 +40,17 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref,defineEmits,defineProps} from 'vue'
|
import { ref,defineEmits,defineProps} from 'vue'
|
||||||
import '@/assets/assist/assist-entry.js'
|
import '@/assets/assist/assist-entry.js'
|
||||||
|
const router = useRouter();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
crrentNum:Number,
|
crrentNum:Number,
|
||||||
isOld:Boolean
|
isOld:Boolean
|
||||||
});
|
});
|
||||||
const crrent = ref(1);
|
const crrent = ref(0);
|
||||||
const emit = defineEmits(['crrentTop'])
|
const emit = defineEmits(['crrentTop'])
|
||||||
const goBack = () => {
|
const goBack = () => {
|
||||||
|
if(router.currentRoute.value.path != '/' ){
|
||||||
|
window.open(`/`, '_blank');
|
||||||
|
}
|
||||||
emit('crrentTop',0)
|
emit('crrentTop',0)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -55,15 +59,23 @@ const openOldMode = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const gotoList = (index:number) => {
|
const gotoList = (index:number) => {
|
||||||
|
console.log(router.currentRoute);
|
||||||
|
if(router.currentRoute.value.path != '/' ){
|
||||||
|
window.open(`/`, '_blank');
|
||||||
|
localStorage.setItem('index_detail',index)
|
||||||
|
}
|
||||||
crrent.value = index
|
crrent.value = index
|
||||||
emit('crrentTop',index)
|
emit('crrentTop',index)
|
||||||
|
|
||||||
}
|
}
|
||||||
//更新当前索引值
|
//更新当前索引值
|
||||||
onUpdated(() => {
|
onUpdated(() => {
|
||||||
crrent.value = props.crrentNum;
|
crrent.value = props.crrentNum;
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
crrent.value = props.crrentNum;
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -27,7 +27,7 @@
|
|||||||
<div class="re_box" >
|
<div class="re_box" >
|
||||||
<div class="swiper" style="border-radius: 12px 0 0 12px;">
|
<div class="swiper" style="border-radius: 12px 0 0 12px;">
|
||||||
<swiper class="w-[600px] h-[418px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
|
<swiper class="w-[600px] h-[418px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
|
||||||
<swiper-slide v-for="(item,index) in xsImg" :key="index" @click="gotoDetail(item.url)">
|
<swiper-slide v-for="(item,index) in xsImg" :key="index" @click="openUrl(item.url)">
|
||||||
<div class="img_tits">{{ item.title }}</div>
|
<div class="img_tits">{{ item.title }}</div>
|
||||||
<img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
|
<img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
@ -46,7 +46,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="re_top_img_line"></div>
|
<div class="re_top_img_line"></div>
|
||||||
<div class="re_box_item" v-for="(item,index) in zmList" :key="index" style="margin-top: 10px;" @click="gotoDetail(item.id)">
|
<div class="re_box_item" v-for="(item,index) in zmList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
|
||||||
<div class="re_title">
|
<div class="re_title">
|
||||||
<div class="flex align-center">
|
<div class="flex align-center">
|
||||||
<div class="dian"></div>
|
<div class="dian"></div>
|
||||||
@ -64,7 +64,7 @@
|
|||||||
<div class="h-auto home_con1">
|
<div class="h-auto home_con1">
|
||||||
<img :src="`/img/index/gwybst.png`" style="margin: 0 auto;" alt=""></img>
|
<img :src="`/img/index/gwybst.png`" style="margin: 0 auto;" alt=""></img>
|
||||||
<div class="flex flex-wrap" style="margin-top: 30px;">
|
<div class="flex flex-wrap" style="margin-top: 30px;">
|
||||||
<div class="bstbg" v-for="item,i in bstList" :key="i" @click="gotoDetail(item.id)">
|
<div class="bstbg" v-for="item,i in bstList" :key="i" @click="openUrl(item.id)">
|
||||||
<div class="bst_con" >
|
<div class="bst_con" >
|
||||||
<img :src="`/img/index/bst${i+1}.png`" alt="" style="width: 34px;height: 34px;margin-top: 25px;margin-bottom: 15px;">
|
<img :src="`/img/index/bst${i+1}.png`" alt="" style="width: 34px;height: 34px;margin-top: 25px;margin-bottom: 15px;">
|
||||||
<div class="bsttitle">
|
<div class="bsttitle">
|
||||||
@ -88,7 +88,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="re_top_img_line"></div> -->
|
<!-- <div class="re_top_img_line"></div> -->
|
||||||
<div class="re_box_item" v-for="(item,index) in ptList" :key="index" style="margin-top: 10px;" @click="gotoDetail(item.id)">
|
<div class="re_box_item" v-for="(item,index) in ptList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
|
||||||
<div class="re_title">
|
<div class="re_title">
|
||||||
<div class="flex align-center">
|
<div class="flex align-center">
|
||||||
<div class="dian"></div>
|
<div class="dian"></div>
|
||||||
@ -114,7 +114,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="re_top_img_line"></div> -->
|
<!-- <div class="re_top_img_line"></div> -->
|
||||||
<div class="re_box_item" v-for="(item,index) in jcList" :key="index" style="margin-top: 10px;" @click="gotoDetail(item.id)">
|
<div class="re_box_item" v-for="(item,index) in jcList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
|
||||||
<div class="re_title">
|
<div class="re_title">
|
||||||
<div class="flex align-center">
|
<div class="flex align-center">
|
||||||
<div class="dian"></div>
|
<div class="dian"></div>
|
||||||
@ -140,7 +140,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="re_top_img_line"></div> -->
|
<!-- <div class="re_top_img_line"></div> -->
|
||||||
<div class="re_box_item" v-for="(item,index) in qcList" :key="index" style="margin-top: 10px;" @click="gotoDetail(item.id)">
|
<div class="re_box_item" v-for="(item,index) in qcList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
|
||||||
<div class="re_title">
|
<div class="re_title">
|
||||||
<div class="flex align-center">
|
<div class="flex align-center">
|
||||||
<div class="dian"></div>
|
<div class="dian"></div>
|
||||||
@ -166,7 +166,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="re_top_img_line"></div> -->
|
<!-- <div class="re_top_img_line"></div> -->
|
||||||
<div class="re_box_item" v-for="(item,index) in mtList" :key="index" style="margin-top: 10px;" @click="gotoDetail(item.id)">
|
<div class="re_box_item" v-for="(item,index) in mtList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
|
||||||
<div class="re_title">
|
<div class="re_title">
|
||||||
<div class="flex align-center">
|
<div class="flex align-center">
|
||||||
<div class="dian"></div>
|
<div class="dian"></div>
|
||||||
@ -224,20 +224,26 @@ const swiperOptionsimgs = {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
const hmScroll = () => {
|
const hmScroll = () => {
|
||||||
let home = document.getElementById('homeid')
|
let home = document.getElementById('homeid');
|
||||||
|
console.log(home.scrollTop,home.clientHeight,home.scrollHeight);
|
||||||
if( home.scrollTop + home.clientHeight >= home.scrollHeight){
|
if( home.scrollTop + home.clientHeight >= home.scrollHeight){
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
emit('toSwpe',2);
|
emit('toSwpe',2);
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
if (home.scrollTop == 0) {
|
||||||
|
setTimeout(function() {
|
||||||
|
emit('toSwpe',0);
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const toSearch =() => {
|
const toSearch =() => {
|
||||||
emit('toSwpe',9);
|
// emit('toSwpe',9);
|
||||||
emitter.emit('inputSea', {
|
// emitter.emit('inputSea', {
|
||||||
keywords:inputSearch.value,
|
// keywords:inputSearch.value,
|
||||||
type: 1,
|
// type: 1,
|
||||||
});
|
// });
|
||||||
|
window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
|
||||||
}
|
}
|
||||||
// 查看更多
|
// 查看更多
|
||||||
const toMore = () => {
|
const toMore = () => {
|
||||||
@ -253,16 +259,20 @@ const bstList = ref([
|
|||||||
{title:"团员享有哪些权利?",id:5975},
|
{title:"团员享有哪些权利?",id:5975},
|
||||||
{title:"团旗、团徽和团歌分别是什么?",id:5976}
|
{title:"团旗、团徽和团歌分别是什么?",id:5976}
|
||||||
])
|
])
|
||||||
//跳转详情
|
|
||||||
const gotoDetail = (id: number) => {
|
const openUrl = (id: number) => {
|
||||||
detailId.value = {
|
window.open(`/info/${id}?type=1`)
|
||||||
id: id,
|
|
||||||
type: '1'
|
|
||||||
};
|
|
||||||
localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
|
||||||
emit('toSwpe',6)
|
|
||||||
emitter.emit('detailId', detailId.value);
|
|
||||||
}
|
}
|
||||||
|
//跳转详情
|
||||||
|
// const gotoDetail = (id: number) => {
|
||||||
|
// detailId.value = {
|
||||||
|
// id: id,
|
||||||
|
// type: '1'
|
||||||
|
// };
|
||||||
|
// localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
||||||
|
// emit('toSwpe',6)
|
||||||
|
// emitter.emit('detailId', detailId.value);
|
||||||
|
// }
|
||||||
let newsSwiper: any = null
|
let newsSwiper: any = null
|
||||||
const onSwiperImgs = (swiper: any) => {
|
const onSwiperImgs = (swiper: any) => {
|
||||||
newsSwiper = swiper
|
newsSwiper = swiper
|
||||||
@ -374,7 +384,7 @@ onMounted(() => {
|
|||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:100%;
|
||||||
background-image: url('/img/index/rightcons.png');
|
background-image: url('/img/index/rightcons.png');
|
||||||
// background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,7 +24,7 @@
|
|||||||
<div class="me_col"></div>
|
<div class="me_col"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="re_box">
|
<div class="re_box">
|
||||||
<div class="re_box_item" v-for="(item,index) in MesList" :key="index" @click="gotoDetail(item.id)">
|
<div class="re_box_item" v-for="(item,index) in MesList" :key="index" @click="openUrl(item.id)">
|
||||||
<div class="re_title one-line-ellipsis">
|
<div class="re_title one-line-ellipsis">
|
||||||
<div class="dian"></div>
|
<div class="dian"></div>
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ item.title }}</span>
|
||||||
@ -98,23 +98,27 @@ const getMesList = async () => {
|
|||||||
MesList.value = res.data.data.list;
|
MesList.value = res.data.data.list;
|
||||||
}
|
}
|
||||||
const toSearch =() => {
|
const toSearch =() => {
|
||||||
emit('toSwpe',9);
|
// emit('toSwpe',9);
|
||||||
emitter.emit('inputSea', {
|
// emitter.emit('inputSea', {
|
||||||
keywords:inputSearch.value,
|
// keywords:inputSearch.value,
|
||||||
type: 2,
|
// type: 2,
|
||||||
});
|
// });
|
||||||
|
window.open(`/search_info?type=2&keywords=${inputSearch.value}`)
|
||||||
|
}
|
||||||
|
const openUrl = (id: number) => {
|
||||||
|
window.open(`/info/${id}?type=2`)
|
||||||
}
|
}
|
||||||
//跳转详情
|
//跳转详情
|
||||||
const gotoDetail = (id: number) => {
|
// const gotoDetail = (id: number) => {
|
||||||
|
|
||||||
detailId.value = {
|
// detailId.value = {
|
||||||
id: id,
|
// id: id,
|
||||||
type: '2'
|
// type: '2'
|
||||||
};
|
// };
|
||||||
localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
// localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
||||||
emit('toSwpe',6)
|
// emit('toSwpe',6)
|
||||||
emitter.emit('detailId', detailId.value);
|
// emitter.emit('detailId', detailId.value);
|
||||||
}
|
// }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -32,7 +32,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="rig_box">
|
<div class="rig_box">
|
||||||
<div class="re_box">
|
<div class="re_box">
|
||||||
<div class="re_box_item" v-for="(item,index) in MesList" :key="index" @click="gotoDetail(item.id)">
|
<div class="re_box_item" v-for="(item,index) in MesList" :key="index" @click="openUrl(item.id)">
|
||||||
<div class="re_title">
|
<div class="re_title">
|
||||||
<div class="dian"></div>
|
<div class="dian"></div>
|
||||||
<span class="one-line-ellipsis" style="width: 720px;">{{ item.title }}</span>
|
<span class="one-line-ellipsis" style="width: 720px;">{{ item.title }}</span>
|
||||||
@ -97,23 +97,29 @@ onMounted(() => {
|
|||||||
getNewstypeList();
|
getNewstypeList();
|
||||||
})
|
})
|
||||||
const emit = defineEmits(['toSwpe'])
|
const emit = defineEmits(['toSwpe'])
|
||||||
|
|
||||||
//跳转详情
|
//跳转详情
|
||||||
const gotoDetail = (id: number) => {
|
const openUrl = (id: number) => {
|
||||||
detailId.value = {
|
window.open(`/info/${id}?type=1`)
|
||||||
id: id,
|
|
||||||
type: '1'
|
|
||||||
};
|
|
||||||
localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
|
||||||
emit('toSwpe',6)
|
|
||||||
emitter.emit('detailId', detailId.value);
|
|
||||||
}
|
}
|
||||||
|
//跳转详情
|
||||||
|
// const gotoDetail = (id: number) => {
|
||||||
|
// detailId.value = {
|
||||||
|
// id: id,
|
||||||
|
// type: '1'
|
||||||
|
// };
|
||||||
|
// localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
||||||
|
// emit('toSwpe',6)
|
||||||
|
// emitter.emit('detailId', detailId.value);
|
||||||
|
// }
|
||||||
//搜索
|
//搜索
|
||||||
const toSearch =() => {
|
const toSearch =() => {
|
||||||
emit('toSwpe',9);
|
// emit('toSwpe',9);
|
||||||
emitter.emit('inputSea', {
|
// emitter.emit('inputSea', {
|
||||||
keywords:inputSearch.value,
|
// keywords:inputSearch.value,
|
||||||
type: 1,
|
// type: 1,
|
||||||
});
|
// });
|
||||||
|
window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
|
||||||
}
|
}
|
||||||
const getPageList = async () => {
|
const getPageList = async () => {
|
||||||
page.value = page.value;
|
page.value = page.value;
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
<!-- 左边导航栏 -->
|
<!-- 左边导航栏 -->
|
||||||
|
|
||||||
<!-- 右边内容栏 -->
|
<!-- 右边内容栏 -->
|
||||||
<div class="rightcon">
|
<div class="rightcon" @scroll="hmScroll" id="tjright">
|
||||||
<div class="flex top_search">
|
<div class="flex top_search">
|
||||||
<div style="width: 572px; height: 69px; margin-left: 415px">
|
<div style="width: 572px; height: 69px; margin-left: 415px">
|
||||||
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%; height: 100%; object-fit: cover" />
|
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%; height: 100%; object-fit: cover" />
|
||||||
@ -18,11 +18,11 @@
|
|||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="News_box">
|
<div class="News_box h-auto">
|
||||||
<div class="lef_box">
|
<div class="lef_box">
|
||||||
<div class="re_box">
|
<div class="re_box">
|
||||||
<div class="re_box_item" v-if="Newsdetail != null && Newsdetail.type == 1">
|
<div class="re_box_item" v-if="Newsdetail != null && Newsdetail.type == 1">
|
||||||
<div class='re_mian' v-if="Newsdetail.cate != null">{{ Newsdetail.cate.name + '>' + Newsdetail.title}} </div>
|
<div class='re_mian' v-if="Newsdetail.cate != null">{{ title_left + ' > ' + Newsdetail.cate.name+' > ' + '正文内容'}} </div>
|
||||||
<div class="re_title">{{ Newsdetail.title }}</div>
|
<div class="re_title">{{ Newsdetail.title }}</div>
|
||||||
<div class='flex justify-between re_rouse'>
|
<div class='flex justify-between re_rouse'>
|
||||||
<span>{{Newsdetail.release_time_text}}</span>
|
<span>{{Newsdetail.release_time_text}}</span>
|
||||||
@ -50,7 +50,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rig_box">
|
<div class="rig_box" :class="{'topding':topding}">
|
||||||
|
|
||||||
<n-tabs :bar-width="0" type="line"
|
<n-tabs :bar-width="0" type="line"
|
||||||
class="custom-tabs" pane-style="background-color: #ffffff;">
|
class="custom-tabs" pane-style="background-color: #ffffff;">
|
||||||
@ -124,7 +124,8 @@ const inputSearch = ref('')
|
|||||||
const page = ref(1);
|
const page = ref(1);
|
||||||
const jinxList = ref([]);
|
const jinxList = ref([]);
|
||||||
const remList = ref([]);
|
const remList = ref([]);
|
||||||
|
const topding = ref(false);
|
||||||
|
const title_left = ref('新闻动态');
|
||||||
const Newsdetail = ref(null);
|
const Newsdetail = ref(null);
|
||||||
|
|
||||||
emitter.on('detailId', (data) => {
|
emitter.on('detailId', (data) => {
|
||||||
@ -158,7 +159,7 @@ const getremList = async () => {
|
|||||||
const getNewsdetail = async (data:object) => {
|
const getNewsdetail = async (data:object) => {
|
||||||
// 新闻详情
|
// 新闻详情
|
||||||
if (data.type == 1) {
|
if (data.type == 1) {
|
||||||
|
title_left.value = '新闻动态';
|
||||||
const res = await $api.post('/api/home.news/detail',
|
const res = await $api.post('/api/home.news/detail',
|
||||||
{
|
{
|
||||||
id:data.id
|
id:data.id
|
||||||
@ -166,6 +167,7 @@ const getNewsdetail = async (data:object) => {
|
|||||||
)
|
)
|
||||||
Newsdetail.value = res.data.data;
|
Newsdetail.value = res.data.data;
|
||||||
}else if(data.type == 2){
|
}else if(data.type == 2){
|
||||||
|
title_left.value = '信息公开';
|
||||||
//信息公开文章详情
|
//信息公开文章详情
|
||||||
const res1 = await $api.post('/api/home.information/detail',
|
const res1 = await $api.post('/api/home.information/detail',
|
||||||
{
|
{
|
||||||
@ -174,6 +176,7 @@ const getNewsdetail = async (data:object) => {
|
|||||||
)
|
)
|
||||||
Newsdetail.value = res1.data.data;
|
Newsdetail.value = res1.data.data;
|
||||||
}else{
|
}else{
|
||||||
|
title_left.value = '团务百科';
|
||||||
// 团务百科文章详情
|
// 团务百科文章详情
|
||||||
const res2 = await $api.post('/api/home.encyclopedia/detail',
|
const res2 = await $api.post('/api/home.encyclopedia/detail',
|
||||||
{
|
{
|
||||||
@ -183,6 +186,16 @@ const getNewsdetail = async (data:object) => {
|
|||||||
Newsdetail.value = res2.data.data;
|
Newsdetail.value = res2.data.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const hmScroll = () => {
|
||||||
|
let tjright = document.getElementById('tjright');
|
||||||
|
if(tjright.scrollTop>159){
|
||||||
|
topding.value = true;
|
||||||
|
}else{
|
||||||
|
topding.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
//加载中
|
//加载中
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -192,6 +205,7 @@ onMounted(() => {
|
|||||||
id:5192,
|
id:5192,
|
||||||
type:'1'
|
type:'1'
|
||||||
});
|
});
|
||||||
|
window.addEventListener('scroll', hmScroll);
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -206,11 +220,6 @@ onMounted(() => {
|
|||||||
background-image: url('/img/newsxq.png');
|
background-image: url('/img/newsxq.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
.fiximg {
|
|
||||||
img {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top_search {
|
.top_search {
|
||||||
@ -266,7 +275,7 @@ onMounted(() => {
|
|||||||
width: 835px;
|
width: 835px;
|
||||||
.re_box {
|
.re_box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 680px;
|
height: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
padding-left: 100px;
|
padding-left: 100px;
|
||||||
@ -278,13 +287,11 @@ onMounted(() => {
|
|||||||
padding: 30px;
|
padding: 30px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-direction: column;
|
||||||
/* 允许换行 */
|
min-height: 750px;
|
||||||
justify-content: flex-start;
|
|
||||||
/* 项目左对齐 */
|
|
||||||
|
|
||||||
.re_slice {
|
.re_slice {
|
||||||
width: 841px;
|
width: 100%;
|
||||||
border-bottom: 1px dashed #bbbbbb;
|
border-bottom: 1px dashed #bbbbbb;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
@ -323,7 +330,7 @@ onMounted(() => {
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
|
padding: 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -332,10 +339,10 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.rig_box {
|
.rig_box {
|
||||||
width: 439px;
|
width: 430px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
margin-left: 40px;
|
margin-left: 35px;
|
||||||
.custom-tabs {
|
.custom-tabs {
|
||||||
.number_t{
|
.number_t{
|
||||||
width: 34px;
|
width: 34px;
|
||||||
@ -413,5 +420,12 @@ onMounted(() => {
|
|||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.topding{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
right: 315px;
|
||||||
|
width: 430px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -4,7 +4,8 @@
|
|||||||
<!-- 左边导航栏 -->
|
<!-- 左边导航栏 -->
|
||||||
|
|
||||||
<!-- 右边内容栏 -->
|
<!-- 右边内容栏 -->
|
||||||
<div class="rightcon">
|
<div class="rightcon" id="gohome" @scroll="hmScroll" >
|
||||||
|
|
||||||
<div class="flex top_search ">
|
<div class="flex top_search ">
|
||||||
<div style="width: 572px;height: 69px;margin-left: 415px;">
|
<div style="width: 572px;height: 69px;margin-left: 415px;">
|
||||||
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
|
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
|
||||||
@ -25,7 +26,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 列表 -->
|
<!-- 列表 -->
|
||||||
<div class="re_box">
|
<div class="re_box">
|
||||||
<div class="re_box_item" v-for="(item,index) in BksList" :key="index" @click="gotoDetail(item.id)">
|
<div class="re_box_item" v-for="(item,index) in BksList" :key="index" @click="openUrl(item.id)">
|
||||||
<div class="re_title one-line-ellipsis">
|
<div class="re_title one-line-ellipsis">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</div>
|
</div>
|
||||||
@ -43,7 +44,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
<div class="flex flex-row justify-center pages_tsw" style="margin-top: 20px;margin-bottom: 50px;">
|
<div class="flex flex-row justify-center pages_tsw" style="margin-top: 20px;margin-bottom: 50px;">
|
||||||
<n-pagination v-model:page="page" :page-sizes="[9]" :item-count="total" size="medium"
|
<n-pagination v-model:page="page" :page-sizes="[12]" :item-count="total" size="medium"
|
||||||
@update:page="getPageList" show-quick-jumper>
|
@update:page="getPageList" show-quick-jumper>
|
||||||
<template #goto>
|
<template #goto>
|
||||||
到第
|
到第
|
||||||
@ -85,21 +86,26 @@ onMounted(() => {
|
|||||||
getBksList();
|
getBksList();
|
||||||
})
|
})
|
||||||
//跳转详情
|
//跳转详情
|
||||||
const gotoDetail = (id: number) => {
|
const openUrl = (id: number) => {
|
||||||
detailId.value = {
|
window.open(`/info/${id}?type=3`)
|
||||||
id: id,
|
|
||||||
type: '3'
|
|
||||||
};
|
|
||||||
localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
|
||||||
emit('toSwpe',6)
|
|
||||||
emitter.emit('detailId', detailId.value);
|
|
||||||
}
|
}
|
||||||
|
//跳转详情
|
||||||
|
// const gotoDetail = (id: number) => {
|
||||||
|
// detailId.value = {
|
||||||
|
// id: id,
|
||||||
|
// type: '3'
|
||||||
|
// };
|
||||||
|
// localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
||||||
|
// emit('toSwpe',6)
|
||||||
|
// emitter.emit('detailId', detailId.value);
|
||||||
|
// }
|
||||||
const toSearch =() => {
|
const toSearch =() => {
|
||||||
emit('toSwpe',9);
|
// emit('toSwpe',9);
|
||||||
emitter.emit('inputSea', {
|
// emitter.emit('inputSea', {
|
||||||
keywords:inputSearch.value,
|
// keywords:inputSearch.value,
|
||||||
type: 3,
|
// type: 3,
|
||||||
});
|
// });
|
||||||
|
window.open(`/search_info?type=3&keywords=${inputSearch.value}`)
|
||||||
}
|
}
|
||||||
const getPageList = async () => {
|
const getPageList = async () => {
|
||||||
page.value = page.value;
|
page.value = page.value;
|
||||||
@ -115,6 +121,14 @@ const getBksList = async () => {
|
|||||||
total.value = res.data.data.count;
|
total.value = res.data.data.count;
|
||||||
BksList.value = res.data.data.list;
|
BksList.value = res.data.data.list;
|
||||||
}
|
}
|
||||||
|
const hmScroll = () => {
|
||||||
|
let home = document.getElementById('gohome');
|
||||||
|
if (home.scrollTop == 0) {
|
||||||
|
setTimeout(function() {
|
||||||
|
emit('toSwpe',4);
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
375
pages/about_info/index.vue
Normal file
375
pages/about_info/index.vue
Normal file
@ -0,0 +1,375 @@
|
|||||||
|
<template>
|
||||||
|
<!-- PC端布局 -->
|
||||||
|
<div class="flex justify-between w-full h-full">
|
||||||
|
<!-- 左边导航栏 -->
|
||||||
|
<AppHeader></AppHeader>
|
||||||
|
|
||||||
|
<!-- 右边内容栏 -->
|
||||||
|
<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">
|
||||||
|
<div class="lef_box" :class="{'lefding':lefding}">
|
||||||
|
<div class="lef_boxitem1">
|
||||||
|
<div class="lef_boxitem1_shu"></div>
|
||||||
|
<div class="lef_boxitem1_title">关于我们</div>
|
||||||
|
</div>
|
||||||
|
<div :class="['lef_boxitem2',{'active': cateindex == index }]" v-for="(item, index) in newsListtyp" :key="index" @click="gotoHt(index)">
|
||||||
|
<div class="lef_boxitem2_title">{{ item.name }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rig_box" :class="{'rig_box1':lefding}">
|
||||||
|
<div class="re_box">
|
||||||
|
<div class="re_box_item" v-if="isShow">
|
||||||
|
<div class="re_title">团市委的主要职责</div>
|
||||||
|
<div class="re_slice"></div>
|
||||||
|
<div class="re_content">
|
||||||
|
<span>一、领导全市的共青团工作。</span>
|
||||||
|
<span>二、负责全市团的组织建设，积极创新基层组织制度，协助党组织管理、选拔和培训团干部，对团校、青少年活动阵地、青少年报刊等事务进行规划和管理。</span>
|
||||||
|
<span>三、积极向党和政府反映青少年的意愿和呼声，提出意见和建议，充分发挥民主参与和民主监督作用。</span>
|
||||||
|
<span>四、贯彻实施《河南省未成年人保护条例》，参与青少年事业发展规划和青少年工作政策的制定，积极实施希望工程，会同有关部门做好青少年权益保护和预防青少年犯罪工作，研究指导社区团的各项工作。</span>
|
||||||
|
<span>五、调查青年思想动态和青年工作情况，研究青少年工作理论、青少年思想教育、青少年事业发展等项工作，提出相应对策，开展各种活动。</span>
|
||||||
|
<span>六、领导全市青联、学联和少先队工作，对全市性青年社团组织实行指导和管理。</span>
|
||||||
|
<span>七、协助教育部门做好大、中、小学校的教育管理工作，维护学校稳定和社会安定团结。</span>
|
||||||
|
<span>八、会同有关部门对全市青少年外事工作实行归口管理和提供服务，负责与国外青少年团体、政府青年机构、国际地区性青年组织及其他友好团体的交流工作，负责青年对外宣传工作，负责做好青年统战对象的团结教育工作。</span>
|
||||||
|
<span>九、围绕全市经济工作大局，组织和带领团员青年发挥生力军和突击队作用。</span>
|
||||||
|
<span>十、动员组织广大团员青年积极参与创建文明城市为主的各类创建活动。</span>
|
||||||
|
<span>十一、围绕党政工作大局，突出青年特点，完善服务内容，促进青年创业就业。</span>
|
||||||
|
<span>十二、做好党政机关团员青年效能建设工作，开展各种活动，带动机关服务质量、办事效率和执行力的进一步提高。</span>
|
||||||
|
<span>十三、承担市委交办的其他事项。</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="re_box_item" v-else>
|
||||||
|
<div class="re_title">团市委的机构设置</div>
|
||||||
|
<div class="re_slice"></div>
|
||||||
|
<div class="re_contents">
|
||||||
|
<div>
|
||||||
|
<span>(一)办公室</span>
|
||||||
|
<span>电话：63225071</span>
|
||||||
|
<span>协调处理机关日常事务；负责团市委重要会议的会务工作；负责机关文秘、信访、保密、网络工作；负责编发内部信息、简报工作；指导全市共青团的调查研究工作；负责对外联系、机关财务、资产、行政后勤等管理工作。</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>(二)组织部</span>
|
||||||
|
<span>电话：63225070</span>
|
||||||
|
<span>研究制定全市共青团组织、团干部和团员队伍建设的政策措施；指导推动全市团的基层组织、团员队伍和团干部队伍建设；负责团费收缴、管理和全市团的基层组织统计工作；组织开展全市性先进基层团组织和优秀团员、优秀团干部的评选表彰工作；指导推动团的基层阵地建设和基层组织信息化工作；协助党委管理县级团委的领导班子成员；协助管理在洛的团中央委员、候补委员和团省委委员、候补委员；指导全市团干部的教育培训；负责团市委机关和直属单位的人事管理、机构编制等工作；负责离退休人员的管理服务工作。</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>(三)宣传部</span>
|
||||||
|
<span>电话：63225062</span>
|
||||||
|
<span>组织指导全市团员青年的思想道德教育和全市团组织的文化活动；加强青年理想信念教育,引导全市广大青少年践行社会主义核心价值观；指导全市团的宣传工作；指导团员青年理论学习；提供和编写团干部教育材料和团课教材；强化青少年网络思想引领工作,提升网络舆情分析和引导能力；指导青少年活动阵地建设和青少年开展健康有益的活动；负责团市委的新闻、宣传工作,抓好团的宣传队伍建设。</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>(四)青年发展部</span>
|
||||||
|
<span>电话：63225069</span>
|
||||||
|
<span>研究制订促进全市青年发展的规划和政策措施,建立和完善青年服务体系；开展促进全市青年就业、创业、创新、创优和全市青年职业文明素养培养、技能培训提升等工作；指导洛阳市青年企业家协会、洛阳市青年农民专业合作社联合会等有关社会团体工作；组织实施对团市委定点扶贫地区的帮扶工作。</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>(五)学校部(维护青少年权益部)</span>
|
||||||
|
<span>电话：63225067</span>
|
||||||
|
<span>组织指导全市大中专院校、中学共青团工作,了解掌握学生的思想动态,根据党的教育方针开展团的各项活动；指导青年学生开展社会实践、勤工助学和课外科技、文化活动；培养青年学生创新意识和科技创新能力,推进大学生素质教育；负责市学联的日常事务工作；指导全市少先队工作,研究少年儿童的思想品德教育,协调和配合社会有关部门调查研究,反映情况,制定政策和措施；指导少先队校外阵地建设,组织开展有利于少年儿童健康成长的文化、体育活动；负责少先队宣传工作；抓好少先队辅导员队伍建设；负责少先队洛阳市工作委员会的日常事务工作；宣传贯彻《河南省未成年人保护条例》,负责全市未成年人权益保护工作；负责预防全市青少年违法犯罪工作；研究全市有关青少年发展问题,参与制定保护青少年健康成长的法规、政策；协调处理侵害青少年权益案件；指导青少年社会化服务体系建设；指导青少年报刊工作；承担市未成年人保护委员会办公室的日常工作。</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>(六)统战联络部</span>
|
||||||
|
<span>电话：63225102</span>
|
||||||
|
<span>负责全市青年统战工作,在各族各界青年代表人士中开展联谊和交流工作；负责市青联的日常事务及会员团体和委员的联络工作；协助管理在洛全国青联成员、省青联委员；开展青年科技人才和青年留学人员的联系服务工作；开展对台港澳地区青年及青年侨胞的统战工作；负责全市青少年外事工作,开展同国外、境外青少年组织的联络和交流活动。</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>(七)社会联络部</span>
|
||||||
|
<span>电话：63230538</span>
|
||||||
|
<span>研究制订全市共青团、青年社会组织参与社会建设的总体规划和政策制度；开展对全市青年社会组织和新兴青年群体的联系服务和引导工作；研究制订全市青年志愿服务工作规划、意见,指导全市青年志愿服务工作；指导建设全市青少年事务社会工作专业人才队伍；协调、指导全市青少年生态环境保护工作；承担全市性青年社团组织的指导和管理工作。</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>(八)机关党总支</span>
|
||||||
|
<span>电话：63235856</span>
|
||||||
|
<span>负责机关和直属单位的党群工作。</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</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 $api from '@/service/webRequest'
|
||||||
|
const inputSearch = ref('');
|
||||||
|
const cateindex = ref(0);
|
||||||
|
let isShow = ref(true);
|
||||||
|
const newsListtyp = ref([
|
||||||
|
{name:'团市委职责'},
|
||||||
|
{name:'各部门职能'}
|
||||||
|
]);
|
||||||
|
const lefding = ref(false);
|
||||||
|
const gotoHt =(index:number) => {
|
||||||
|
if(index == 0){
|
||||||
|
cateindex.value = 0;
|
||||||
|
isShow.value = true;
|
||||||
|
}else{
|
||||||
|
cateindex.value = 1;
|
||||||
|
isShow.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
const hmScroll = () => {
|
||||||
|
let tjright = document.getElementById('tjright');
|
||||||
|
if(tjright.scrollTop>169){
|
||||||
|
lefding.value = true;
|
||||||
|
}else{
|
||||||
|
lefding.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//加载中
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/assets/index.scss';
|
||||||
|
|
||||||
|
|
||||||
|
/* pc端样式 */
|
||||||
|
|
||||||
|
.rightcon {
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
background-image: url('/img/aboutxq.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: absolute;
|
||||||
|
.fiximg {
|
||||||
|
img {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
|
||||||
|
.lef_box {
|
||||||
|
width: 260px;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-left: 100px;
|
||||||
|
|
||||||
|
.lef_boxitem1 {
|
||||||
|
width: 260px;
|
||||||
|
height: 64px;
|
||||||
|
background: linear-gradient(0deg, #338CDE 0%, #3D92E0 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.lef_boxitem1_title {
|
||||||
|
width: 88px;
|
||||||
|
// height: 22px;
|
||||||
|
font-family: Microsoft YaHei UI;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #FFFEFE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lef_boxitem1_shu {
|
||||||
|
width: 4px;
|
||||||
|
height: 25px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lef_boxitem2 {
|
||||||
|
width: 260px;
|
||||||
|
height: 64px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
color: #323232;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.lef_boxitem2_title {
|
||||||
|
width: 100%;
|
||||||
|
// height: 19px;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
|
||||||
|
color: #3A91DF;
|
||||||
|
|
||||||
|
}
|
||||||
|
&.active{
|
||||||
|
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
|
||||||
|
color: #3A91DF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lefding{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
.rig_box {
|
||||||
|
width: 921px;
|
||||||
|
|
||||||
|
.re_box {
|
||||||
|
width: 100%;
|
||||||
|
// height: 680px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 40px;
|
||||||
|
// padding-left: 60px;
|
||||||
|
|
||||||
|
.re_box_item {
|
||||||
|
width: 100%;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #EEF7FF;
|
||||||
|
padding: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap; /* 允许换行 */
|
||||||
|
justify-content: flex-start; /* 项目左对齐 */
|
||||||
|
|
||||||
|
.re_slice{
|
||||||
|
width: 841px;
|
||||||
|
border-bottom: 1px dashed #BBBBBB;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.re_title {
|
||||||
|
width: 100%;
|
||||||
|
font-family: Microsoft YaHei UI;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #393939;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.re_content{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: Microsoft YaHei UI;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
span{
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.re_contents{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: Microsoft YaHei UI;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
div{
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
display:block;
|
||||||
|
// line-height: 30px;
|
||||||
|
&:first-child{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 17px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.rig_box1{
|
||||||
|
margin-left: 380px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -32,21 +32,21 @@
|
|||||||
<AppRegiment @toSwpe="toswiper"></AppRegiment>
|
<AppRegiment @toSwpe="toswiper"></AppRegiment>
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
<!-- 新闻动态详情 -->
|
<!-- 新闻动态详情 -->
|
||||||
<swiper-slide :show="isNews" id="newsid">
|
<!-- <swiper-slide :show="isNews" id="newsid">
|
||||||
<AppNewsdel ></AppNewsdel>
|
<AppNewsdel ></AppNewsdel>
|
||||||
</swiper-slide>
|
</swiper-slide> -->
|
||||||
<!-- 关于我们详情 -->
|
<!-- 关于我们详情 -->
|
||||||
<swiper-slide :show="isAbout" id="aboutid">
|
<!-- <swiper-slide :show="isAbout" id="aboutid">
|
||||||
<AppAboutdel></AppAboutdel>
|
<AppAboutdel></AppAboutdel>
|
||||||
</swiper-slide>
|
</swiper-slide> -->
|
||||||
<!-- 留言板 -->
|
<!-- 留言板 -->
|
||||||
<swiper-slide :show="isMeassage" id="messageid">
|
<!-- <swiper-slide :show="isMeassage" id="messageid">
|
||||||
<AppContactUs></AppContactUs>
|
<AppContactUs></AppContactUs>
|
||||||
</swiper-slide>
|
</swiper-slide> -->
|
||||||
<!-- 搜索详情 -->
|
<!-- 搜索详情 -->
|
||||||
<swiper-slide :show="isSearch" id="searchid">
|
<!-- <swiper-slide :show="isSearch" id="searchid">
|
||||||
<AppSearchdel @toSwpe="toswiper"></AppSearchdel>
|
<AppSearchdel @toSwpe="toswiper"></AppSearchdel>
|
||||||
</swiper-slide>
|
</swiper-slide> -->
|
||||||
</swiper>
|
</swiper>
|
||||||
|
|
||||||
<!-- <div style="position: absolute;width: 100%;z-index: 100;">
|
<!-- <div style="position: absolute;width: 100%;z-index: 100;">
|
||||||
@ -91,7 +91,7 @@
|
|||||||
style="display: block;"><img src="/img/tgxzj.jpg"></a>
|
style="display: block;"><img src="/img/tgxzj.jpg"></a>
|
||||||
<a href="http://qnyz.lyd.com.cn/" rel="nofollow" target="_blank" style="display: block;"><img
|
<a href="http://qnyz.lyd.com.cn/" rel="nofollow" target="_blank" style="display: block;"><img
|
||||||
src="/img/qnyz.jpg"></a>
|
src="/img/qnyz.jpg"></a>
|
||||||
<img src="/img/lyb.jpg" @click="toswiper(8)" />
|
<img src="/img/lyb.jpg" @click="openUrl" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -122,7 +122,9 @@ import { useStore } from '~/store'
|
|||||||
const cdnUrl = useCdn()
|
const cdnUrl = useCdn()
|
||||||
const isOldfont = ref(false);
|
const isOldfont = ref(false);
|
||||||
const { locale } = useI18n();
|
const { locale } = useI18n();
|
||||||
|
const openUrl = () => {
|
||||||
|
window.open(`/messageBoard/`)
|
||||||
|
}
|
||||||
const rightValue = ref('34px');
|
const rightValue = ref('34px');
|
||||||
const updateRight = () => {
|
const updateRight = () => {
|
||||||
if (rightValue.value == '34px') {
|
if (rightValue.value == '34px') {
|
||||||
@ -144,28 +146,30 @@ const onSwiperNews = (swiper: any) => {
|
|||||||
// console.log(newsSwiper);
|
// console.log(newsSwiper);
|
||||||
// console.log(window);
|
// console.log(window);
|
||||||
swiper_exp.value = swiper.realIndex;
|
swiper_exp.value = swiper.realIndex;
|
||||||
if (swiper.realIndex == 6 || swiper.realIndex == 9 || swiper.realIndex == 7 || swiper.realIndex == 8) {
|
if(swiper.realIndex == 1 || swiper.realIndex == 5){
|
||||||
newsSwiper.mousewheel.disable(); //禁止鼠标滑轮控制
|
|
||||||
newsSwiper.allowTouchMove= false;//关闭拖动
|
|
||||||
} else if(swiper.realIndex == 1 || swiper.realIndex == 5){
|
|
||||||
newsSwiper.mousewheel.disable();
|
newsSwiper.mousewheel.disable();
|
||||||
newsSwiper.allowTouchMove= true;// 开启拖动
|
newsSwiper.allowTouchMove= true;// 开启拖动
|
||||||
}else {
|
}
|
||||||
|
// else if (swiper.realIndex == 6 || swiper.realIndex == 9 || swiper.realIndex == 7 || swiper.realIndex == 8) {
|
||||||
|
// newsSwiper.mousewheel.disable(); //禁止鼠标滑轮控制
|
||||||
|
// newsSwiper.allowTouchMove= false;//关闭拖动
|
||||||
|
// }
|
||||||
|
else {
|
||||||
newsSwiper.mousewheel.enable(); //开启鼠标滑轮控制
|
newsSwiper.mousewheel.enable(); //开启鼠标滑轮控制
|
||||||
newsSwiper.allowTouchMove= true;// 开启拖动
|
newsSwiper.allowTouchMove= true;// 开启拖动
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
let isMeassage = ref(false);
|
// let isMeassage = ref(false);
|
||||||
let isNews = ref(false);
|
// let isNews = ref(false);
|
||||||
let isAbout = ref(false);
|
// let isAbout = ref(false);
|
||||||
let isSearch = ref(false);
|
// let isSearch = ref(false);
|
||||||
//跳转每页swiper的方法
|
//跳转每页swiper的方法
|
||||||
const toswiper = (index: number) => {
|
const toswiper = (index: number) => {
|
||||||
if (index == 6) isNews.value = true;
|
// if (index == 6) isNews.value = true;
|
||||||
if (index == 7) isAbout.value = true;
|
// if (index == 7) isAbout.value = true;
|
||||||
if (index == 8) isMeassage.value = true;
|
// if (index == 8) isMeassage.value = true;
|
||||||
if (index == 9) isSearch.value = true;
|
// if (index == 9) isSearch.value = true;
|
||||||
newsSwiper.slideTo(index,1000,true)
|
newsSwiper.slideTo(index,1000,true)
|
||||||
}
|
}
|
||||||
const swiper_exp = ref(0);
|
const swiper_exp = ref(0);
|
||||||
@ -218,6 +222,12 @@ onMounted(() => {
|
|||||||
} else {
|
} else {
|
||||||
router.push('/')
|
router.push('/')
|
||||||
}
|
}
|
||||||
|
let indexs_to = localStorage.getItem('index_detail')
|
||||||
|
if (indexs_to) {
|
||||||
|
toswiper(Number(indexs_to));
|
||||||
|
swiper_exp.value = Number(indexs_to);
|
||||||
|
localStorage.removeItem('index_detail')
|
||||||
|
}
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
// 初始化 ScrollReveal
|
// 初始化 ScrollReveal
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
|
|||||||
@ -1,88 +1,464 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="width: 100%;">
|
<!-- PC端布局 -->
|
||||||
<div style="height:90px;background-color: #ffffff;"></div>
|
<div class="flex justify-between w-full h-auto">
|
||||||
<div style="background-color: #F8F8F8;padding: 30px;">
|
<!-- 左边导航栏 -->
|
||||||
<div class="content_class" style="">
|
<AppHeader></AppHeader>
|
||||||
<div style="font-size: 32px;font-weight: 700;color: #323232;">{{ info.title }}</div>
|
<!-- 右边内容栏 -->
|
||||||
<div style="font-size: 14px;font-weight: 400;margin-top: 30px;color: #768597;">
|
<div class="rightcon" @scroll="hmScroll" id="tjright">
|
||||||
<span>发布人：{{ info.author }}</span>
|
<div class="flex top_search">
|
||||||
<span style="margin-left: 150px;">发布时间：{{ info.release_time_text }} </span>
|
<div style="width: 572px; height: 69px; margin-left: 415px">
|
||||||
</div>
|
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%; height: 100%; object-fit: cover" />
|
||||||
<div style="width: 98%;margin: 20px auto;height: 1px;background-color: #EEEEEE;"></div>
|
</div>
|
||||||
<div class="info_content" v-html="info.content"></div>
|
<!-- <div class="inputform">
|
||||||
<div style="width: 98%;margin: 20px auto;height: 1px;background-color: #EEEEEE;"></div>
|
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
|
||||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
placeholder="请输入搜索关键字" />
|
||||||
<div>
|
<div class="search_rinput">
|
||||||
<div @click="openNews(1)" style="cursor: pointer;">上一篇：{{ info.prev != null ? info.prev.title : '暂无' }}
|
<img src="/img/index/hmsearch.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div @click="openNews(2)" style="margin-top: 20px;cursor: pointer;">
|
</div> -->
|
||||||
下一篇：{{ info.next != null ? info.next.title : '暂无' }}</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div @click="delWeb">
|
<div class="News_box h-auto">
|
||||||
<div
|
<div class="lef_box">
|
||||||
style="color: #999999;;cursor: pointer;;border: 1px solid #999999;width: 108px;height: 40px;line-height: 40px;text-align: center;">
|
<div class="re_box">
|
||||||
返回列表</div>
|
<div class="re_box_item" v-if="Newsdetail != null && Newsdetail.type == 1">
|
||||||
</div>
|
<div class='re_mian' v-if="Newsdetail.cate != null">{{ title_left + ' > ' + Newsdetail.cate.name+' > ' + '正文内容'}} </div>
|
||||||
</div>
|
<div class="re_title">{{ Newsdetail.title }}</div>
|
||||||
</div>
|
<div class='flex justify-between re_rouse'>
|
||||||
</div>
|
<span>{{Newsdetail.release_time_text}}</span>
|
||||||
</div>
|
<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="gotodetail({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="gotodetail({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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { nextTick, ref } from 'vue'
|
import { NTabs,NTabPane } from 'naive-ui'
|
||||||
const route = useRoute()
|
|
||||||
import $api from '@/service/webRequest'
|
import $api from '@/service/webRequest'
|
||||||
import { Item } from 'ant-design-vue/es/menu'
|
// import emitter from '@/plugins/emitter'
|
||||||
const id = ref(route.params.id)
|
const route = useRoute()
|
||||||
const openNews = (type) => {
|
// const inputSearch = ref('')
|
||||||
if (type == 1 && info.value.prev != null) {
|
const page = ref(1);
|
||||||
window.open('/info/' + info.value.prev.id, '_self');
|
const jinxList = ref([]);
|
||||||
}
|
const remList = ref([]);
|
||||||
if (type == 2 && info.value.next != null) {
|
const topding = ref(false);
|
||||||
window.open('/info/' + info.value.next.id, '_self');
|
const title_left = ref('新闻动态');
|
||||||
}
|
const Newsdetail = ref(null);
|
||||||
|
const ids = ref(route.params.id)
|
||||||
|
const types = ref(route.query.type)
|
||||||
|
|
||||||
|
// 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;
|
||||||
}
|
}
|
||||||
// 新闻数据
|
//热门
|
||||||
onMounted(() => {
|
const getremList = async () => {
|
||||||
getInfo();
|
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 () => {
|
||||||
|
// 新闻详情
|
||||||
|
if (types.value == 1) {
|
||||||
|
title_left.value = '新闻动态';
|
||||||
|
const res = await $api.post('/api/home.news/detail',
|
||||||
|
{
|
||||||
|
id:ids.value
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Newsdetail.value = res.data.data;
|
||||||
|
}else if(types.value == 2){
|
||||||
|
title_left.value = '信息公开';
|
||||||
|
//信息公开文章详情
|
||||||
|
const res1 = await $api.post('/api/home.information/detail',
|
||||||
|
{
|
||||||
|
id:ids.value
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Newsdetail.value = res1.data.data;
|
||||||
|
}else{
|
||||||
|
title_left.value = '团务百科';
|
||||||
|
// 团务百科文章详情
|
||||||
|
const res2 = await $api.post('/api/home.encyclopedia/detail',
|
||||||
|
{
|
||||||
|
id:ids.value
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Newsdetail.value = res2.data.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//推荐列表跳转
|
||||||
|
const gotodetail = async (data) => {
|
||||||
|
// 新闻详情
|
||||||
|
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();
|
||||||
|
window.addEventListener('scroll', hmScroll);
|
||||||
})
|
})
|
||||||
const info = ref({});
|
|
||||||
const getInfo = async () => {
|
|
||||||
const res = await $api.get('/api/home.news/detail?id=' + id.value)
|
|
||||||
console.log(res);
|
|
||||||
info.value = res.data.data;
|
|
||||||
}
|
|
||||||
const delWeb = () => {
|
|
||||||
window.close();
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
@import "@/assets/animate/animate.min.css";
|
@import '@/assets/index.scss';
|
||||||
@import "@/assets/index.scss";
|
|
||||||
|
|
||||||
.info_content img {
|
/* pc端样式 */
|
||||||
width: 80% !important;
|
|
||||||
margin: 0 auto;
|
.rightcon {
|
||||||
margin-bottom: 10px;
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
background-image: url('/img/newsxq.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info_content {
|
.top_search {
|
||||||
line-height: 35px;
|
margin-top: 50px;
|
||||||
|
height: 70px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content_class {
|
.inputform {
|
||||||
width: 60%;
|
position: relative;
|
||||||
min-height: 500px;
|
width: 340px;
|
||||||
margin: 0 auto;
|
margin-right: 319px;
|
||||||
background-color: #ffffff;
|
|
||||||
padding: 30px;
|
|
||||||
}
|
|
||||||
@media (max-width: 1440px) {
|
|
||||||
.content_class{
|
|
||||||
width: 78%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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: fixed;
|
||||||
|
top: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
right: 315px;
|
||||||
|
width: 430px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
353
pages/messageBoard/index.vue
Normal file
353
pages/messageBoard/index.vue
Normal file
@ -0,0 +1,353 @@
|
|||||||
|
<template>
|
||||||
|
<!-- PC端布局 -->
|
||||||
|
<div class="flex justify-between w-full h-full">
|
||||||
|
<!-- 左边导航栏 -->
|
||||||
|
<AppHeader></AppHeader>
|
||||||
|
|
||||||
|
<!-- 右边内容栏 -->
|
||||||
|
<div class="rightcon">
|
||||||
|
<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="flex flex-col w-full h-full" style="width: 1300px;margin: 0 auto;">
|
||||||
|
<div
|
||||||
|
style="z-index: 1;background: #ffffff;padding: 30px;border-radius: 16px;margin-top: 20px;margin-left: 100px;">
|
||||||
|
<div class="liuyanba">团团留言板</div>
|
||||||
|
<form class="contactForm w-full" @submit.prevent="submitForm">
|
||||||
|
<div class="inputforms">
|
||||||
|
<span>姓名</span>
|
||||||
|
<input v-model="formData.name"
|
||||||
|
class="contactInputs mt-[15px] md:mt-[30px] w-full md:w-[600px]" type="text"
|
||||||
|
placeholder="输入您的姓名" />
|
||||||
|
<span>电话</span>
|
||||||
|
<input v-model="formData.mobile"
|
||||||
|
class="contactInputs mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[600px]"
|
||||||
|
type="text" placeholder="请输入您的联系电话" />
|
||||||
|
<span>邮箱</span>
|
||||||
|
<input v-model="formData.emil"
|
||||||
|
class="contactInputs mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[600px]"
|
||||||
|
type="text" placeholder="请输入您的邮箱" />
|
||||||
|
</div>
|
||||||
|
<div class="relative mt-4 md:mt-8 w-full md:w-[1100px] flex">
|
||||||
|
<span style="width: 60px;text-align: right;padding-right: 10px;">描述</span>
|
||||||
|
<textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息"
|
||||||
|
rows="5" maxlength="100"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="contactBut">
|
||||||
|
{{ '提交' }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="re_top">
|
||||||
|
<div class="re_col" style="margin-left: 100px;"></div>
|
||||||
|
<div class="re_tit">精选留言</div>
|
||||||
|
<div class="re_col"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between ml-[100px]">
|
||||||
|
<div class="re_list" v-for="item, index in liuyanList">
|
||||||
|
<div style="margin: 30px;">
|
||||||
|
<div class="re_list_tit flex" style="width: 100%;">
|
||||||
|
<span style="width: 12%">问题：</span>
|
||||||
|
<span style="color: #323232;width:90% ;">{{ item.question }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="re_list_tit flex" style="margin-top: 15px;width: 100%;">
|
||||||
|
<span style="width: 12%">描述：</span>
|
||||||
|
<span :title="item.message" class="three-line-ellipsis"
|
||||||
|
style="font-weight: 400;font-size: 14px;color: #999999;width:88% ;">{{ item.message
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="re_list_tit flex" style="margin-top: 15px;">
|
||||||
|
<span style="color: #368FDF;width: 12%;">回复：</span>
|
||||||
|
<span :title="item.answer" class="two-line-ellipsis"
|
||||||
|
style="font-weight: 400;font-size: 14px;color: #999999;width:88% ;">{{ item.answer
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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 { nextTick, ref } from 'vue'
|
||||||
|
import $api from '@/service/webRequest'
|
||||||
|
const inputSearch = ref('');
|
||||||
|
// 表单数据
|
||||||
|
const formData = reactive({
|
||||||
|
name: '',
|
||||||
|
mobile: '',
|
||||||
|
emil: '',
|
||||||
|
message: ''
|
||||||
|
})
|
||||||
|
const total = ref(0);
|
||||||
|
const liuyanList = ref([]);
|
||||||
|
|
||||||
|
const getLiuyanList = async () => {
|
||||||
|
const res = await $api.post('/api/home.leave_word/index',
|
||||||
|
{
|
||||||
|
limit: 2,
|
||||||
|
page: 1,
|
||||||
|
status: 2,
|
||||||
|
show: 1
|
||||||
|
|
||||||
|
}
|
||||||
|
)
|
||||||
|
total.value = res.data.data.count;
|
||||||
|
liuyanList.value = res.data.data.list;
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
getLiuyanList();
|
||||||
|
})
|
||||||
|
// 表单方法
|
||||||
|
const submitForm = () => {
|
||||||
|
console.log(formData);
|
||||||
|
|
||||||
|
// 这里可以添加表单验证逻辑
|
||||||
|
if (!formData.name) {
|
||||||
|
alert('请输入您的姓名')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.mobile) {
|
||||||
|
alert('请输入您的手机号码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.emil) {
|
||||||
|
alert('请输入您的邮箱')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.message) {
|
||||||
|
alert('请输入您的留言内容')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
$api.post("/api/home.leave_word/add", formData)
|
||||||
|
.then((res: any) => {
|
||||||
|
console.log(res)
|
||||||
|
if (res.status == 200) {
|
||||||
|
alert('留言成功')
|
||||||
|
} else {
|
||||||
|
alert('失败')
|
||||||
|
}
|
||||||
|
formData.name = '';
|
||||||
|
formData.mobile = '';
|
||||||
|
formData.emil = '';
|
||||||
|
formData.message = '';
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.dir(err)
|
||||||
|
})
|
||||||
|
// 重置表单
|
||||||
|
// formData.name = ''
|
||||||
|
// formData.mobile = ''
|
||||||
|
// formData.content = ''
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/assets/index.scss';
|
||||||
|
|
||||||
|
/* pc端样式 */
|
||||||
|
.rightcon {
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
background-image: url('/img/messageb.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
min-height: 919px;
|
||||||
|
.fiximg {
|
||||||
|
img {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
//------------------------------------------
|
||||||
|
.liuyanba {
|
||||||
|
width: 1200px;
|
||||||
|
/* height: 22px; */
|
||||||
|
margin: 0 auto;
|
||||||
|
font-family: Microsoft YaHei UI;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #358DDE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactForm {
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 30px;
|
||||||
|
|
||||||
|
.inputforms {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 1100px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 50px;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-left: 20px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInputs {
|
||||||
|
width: 380px;
|
||||||
|
height: 50px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding-left: 20px;
|
||||||
|
border: 1px solid #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInputs::placeholder {
|
||||||
|
color: #768597;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInputs:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#myTextarea {
|
||||||
|
width: 1100px;
|
||||||
|
height: 167px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 6px 6px 6px 6px;
|
||||||
|
opacity: 0.8;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
resize: none;
|
||||||
|
border: 1px solid #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
#myTextarea::placeholder {
|
||||||
|
color: #768597;
|
||||||
|
}
|
||||||
|
|
||||||
|
#myTextarea:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactBut {
|
||||||
|
width: 140px;
|
||||||
|
border-radius: 4px 4px 4px 4px;
|
||||||
|
// position: absolute;
|
||||||
|
// bottom: 20px;
|
||||||
|
// right: 30px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-left: 50px;
|
||||||
|
background: linear-gradient(0deg, #338CDE 0%, #469CE2 100%);
|
||||||
|
border: none;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.re_top {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
.re_tit {
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 36px;
|
||||||
|
color: #4E3C3C;
|
||||||
|
margin: 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.re_col {
|
||||||
|
width: 78px;
|
||||||
|
height: 3px;
|
||||||
|
background: #348CDD;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.re_list {
|
||||||
|
width: 585px;
|
||||||
|
height: 243px;
|
||||||
|
margin-top: 20px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.re_list_tit {
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFA234;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
456
pages/search_info/index.vue
Normal file
456
pages/search_info/index.vue
Normal file
@ -0,0 +1,456 @@
|
|||||||
|
<template>
|
||||||
|
<!-- PC端布局 -->
|
||||||
|
<div class="flex justify-between w-full h-full">
|
||||||
|
<!-- 左边导航栏 -->
|
||||||
|
<AppHeader></AppHeader>
|
||||||
|
<!-- 右边内容栏 -->
|
||||||
|
<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" >
|
||||||
|
<div class='re_mian'>找到结果{{Newsdetailist.length}}条</div>
|
||||||
|
<div v-for=" item,index in Newsdetailist" :key="index" @click="gotoDetail(item.id)" style="width: 100%;">
|
||||||
|
<div class="re_title">{{ item.title }}</div>
|
||||||
|
<!-- <div class="re_content">
|
||||||
|
{{ }}
|
||||||
|
</div> -->
|
||||||
|
<div class="re_date">发布时间：{{ item.release_time_text }}</div>
|
||||||
|
<div class="re_slice"></div>
|
||||||
|
</div>
|
||||||
|
</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="gotoDetails(item.id)">
|
||||||
|
<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="gotoDetails(item.id)">
|
||||||
|
<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 { defineEmits } from 'vue'
|
||||||
|
// import emitter from '@/plugins/emitter'
|
||||||
|
const route = useRoute()
|
||||||
|
const emit = defineEmits(['toSwpe'])
|
||||||
|
const page = ref(1);
|
||||||
|
const jinxList = ref([]);
|
||||||
|
const remList = ref([]);
|
||||||
|
const Newsdetailist = ref([]);
|
||||||
|
const detailId = ref(null);
|
||||||
|
const datas = ref(null);
|
||||||
|
const keywords = ref(route.query.keywords)
|
||||||
|
const types = ref(route.query.type)
|
||||||
|
// emitter.on('inputSea', (data) => {
|
||||||
|
// console.log(data,111111)
|
||||||
|
// datas.value = data;
|
||||||
|
// getNewsdetail(data);
|
||||||
|
// });
|
||||||
|
|
||||||
|
const topding = ref(false);
|
||||||
|
const hmScroll = () => {
|
||||||
|
let tjright = document.getElementById('tjright');
|
||||||
|
if(tjright.scrollTop>159){
|
||||||
|
topding.value = true;
|
||||||
|
}else{
|
||||||
|
topding.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//列表
|
||||||
|
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 gotoDetail = (id: number) => {
|
||||||
|
// console.log(datas)
|
||||||
|
// detailId.value = {
|
||||||
|
// id: id,
|
||||||
|
// type: datas.value.type
|
||||||
|
// };
|
||||||
|
// localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
||||||
|
// emit('toSwpe',6)
|
||||||
|
// emitter.emit('detailId', detailId.value);
|
||||||
|
window.open(`/info/${id}?type=${types.value}`)
|
||||||
|
}
|
||||||
|
//跳转新闻详情
|
||||||
|
const gotoDetails = (id: number) => {
|
||||||
|
// console.log(datas)
|
||||||
|
// detailId.value = {
|
||||||
|
// id: id,
|
||||||
|
// type: 1
|
||||||
|
// };
|
||||||
|
// localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
||||||
|
// emit('toSwpe',6)
|
||||||
|
// emitter.emit('detailId', detailId.value);
|
||||||
|
window.open(`/info/${id}?type=1`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新闻/百科/信息公开 搜索
|
||||||
|
const getNewsdetail = async () => {
|
||||||
|
// 新闻
|
||||||
|
if (types.value == 1) {
|
||||||
|
|
||||||
|
const res = await $api.post('/api/home.news/index',
|
||||||
|
{
|
||||||
|
keywords:keywords.value,
|
||||||
|
page:1,
|
||||||
|
limit:30
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Newsdetailist.value = res.data.data.list;
|
||||||
|
}else if(types.value == 2){
|
||||||
|
//信息公开
|
||||||
|
const res1 = await $api.post('/api/home.information/index',
|
||||||
|
{
|
||||||
|
keywords:keywords.value,
|
||||||
|
page:1,
|
||||||
|
limit:30
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Newsdetailist.value = res1.data.data.list;
|
||||||
|
}else{
|
||||||
|
// 团务百科
|
||||||
|
const res2 = await $api.post('/api/home.encyclopedia/index',
|
||||||
|
{
|
||||||
|
keywords:keywords.value,
|
||||||
|
page:1,
|
||||||
|
limit:30
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Newsdetailist.value = res2.data.data.list;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//加载中
|
||||||
|
onMounted(() => {
|
||||||
|
getjinxList();
|
||||||
|
getremList();
|
||||||
|
getNewsdetail();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/assets/index.scss';
|
||||||
|
|
||||||
|
/* pc端样式 */
|
||||||
|
|
||||||
|
.rightcon {
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
background-image: url('/img/xwdt.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: absolute;
|
||||||
|
.fiximg {
|
||||||
|
img {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
overflow: hidden;
|
||||||
|
.re_box_item {
|
||||||
|
width: 100%;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #eef7ff;
|
||||||
|
padding: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
/* 允许换行 */
|
||||||
|
justify-content: flex-start;
|
||||||
|
/* 项目左对齐 */
|
||||||
|
cursor: pointer;
|
||||||
|
.re_slice {
|
||||||
|
// width: 841px;
|
||||||
|
border-bottom: 1px dashed #bbbbbb;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.re_date{
|
||||||
|
width: 100%;
|
||||||
|
font-family: Microsoft YaHei UI;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #338CDE;
|
||||||
|
}
|
||||||
|
.re_mian {
|
||||||
|
width: 248px;
|
||||||
|
font-family: Microsoft YaHei UI;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666666;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.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: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #393939;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.re_content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: Microsoft YaHei UI;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rig_box {
|
||||||
|
width: 439px;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-left: 40px;
|
||||||
|
.custom-tabs {
|
||||||
|
.number_t{
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
background: #FFA234;
|
||||||
|
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: fixed;
|
||||||
|
top: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
right: 315px;
|
||||||
|
width: 430px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user