完善跳转 添加标签
2
app.vue
@ -21,7 +21,7 @@ useSeoMeta({
|
||||
ogImage: 'https://example.com/image.png',
|
||||
twitterCard: 'summary_large_image',
|
||||
})
|
||||
const store = useStore()
|
||||
const store = useStore();
|
||||
onMounted(() => {
|
||||
})
|
||||
|
||||
|
@ -596,13 +596,6 @@
|
||||
height: 440px;
|
||||
}
|
||||
|
||||
.box_7 {
|
||||
width: 100%;
|
||||
height: 586px;
|
||||
background: url(public/img/bg-3.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.text_24 {
|
||||
overflow-wrap: break-word;
|
||||
|
@ -18,7 +18,7 @@
|
||||
</div>
|
||||
<div style="margin-left: 100px;">
|
||||
<swiper class="w-[667px] h-[340px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
|
||||
<swiper-slide v-for="(item,index) in listImg" :key="index">
|
||||
<swiper-slide v-for="(item,index) in listImg" :key="index" @click="gotoDetail(7)">
|
||||
<div class="img_tits">
|
||||
<p>{{item.title1 }}</p>
|
||||
<p>{{item.title2 }}</p>
|
||||
@ -39,7 +39,7 @@
|
||||
</div>
|
||||
|
||||
<div class="ab_bot" style="margin-top: 10px;">
|
||||
<div class="ab_bot_item" v-for="(item, index) in bmList" :key="index" @mouseenter="mouseenters(index)" >
|
||||
<div class="ab_bot_item" v-for="(item, index) in bmList" :key="index" @mouseenter="mouseenters(index)" @click="gotoDetail(7)">
|
||||
<div class="ab_bot_item_tit">{{item.title}}</div>
|
||||
<div class="ab_bot_item_con three-line-ellipsis">{{item.content}}</div>
|
||||
<div class="ab_bot_item_tel" v-if="item.abshow">
|
||||
@ -67,6 +67,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
import { ref, onMounted, defineEmits } from 'vue'
|
||||
import 'swiper/css'
|
||||
import 'swiper/css/autoplay'
|
||||
import "swiper/css/pagination";
|
||||
@ -114,13 +115,13 @@ const mouseenters = (index: number) => {
|
||||
}
|
||||
const swiperOptionsimgs = {
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
delay: 8000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
direction: 'horizontal',
|
||||
slidesPerView: 1,
|
||||
speed: 500,
|
||||
// effect: 'coverflow',
|
||||
effect: 'coverflow',
|
||||
loop: true,
|
||||
modules: [Autoplay,EffectCoverflow],
|
||||
// centeredSlides: false,
|
||||
@ -143,6 +144,12 @@ const onSwiperImgs = (swiper: any) => {
|
||||
|
||||
// })
|
||||
}
|
||||
const emit = defineEmits(['toSwpe'])
|
||||
//跳转详情
|
||||
const gotoDetail = (id: number) => {
|
||||
// localStorage.setItem('detailId', detailId.value);
|
||||
emit('toSwpe',id)
|
||||
}
|
||||
onMounted(() => {
|
||||
// 挂载方法
|
||||
|
||||
@ -286,6 +293,7 @@ onMounted(() => {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
p{
|
||||
margin: 30px 20px;
|
||||
}
|
||||
|
@ -25,7 +25,7 @@
|
||||
<div class="lef_boxitem1_shu"></div>
|
||||
<div class="lef_boxitem1_title">关于我们</div>
|
||||
</div>
|
||||
<div class="lef_boxitem2" v-for="(item, index) in newsListtyp" :key="index">
|
||||
<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>
|
||||
@ -121,12 +121,22 @@
|
||||
<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 gotoHt =(index:number) => {
|
||||
if(index == 0){
|
||||
cateindex.value = 0;
|
||||
isShow.value = true;
|
||||
}else{
|
||||
cateindex.value = 1;
|
||||
isShow.value = false;
|
||||
}
|
||||
|
||||
}
|
||||
//加载中
|
||||
onMounted(() => {
|
||||
|
||||
@ -145,10 +155,9 @@ onMounted(() => {
|
||||
.rightcon {
|
||||
width: 1920px;
|
||||
height: 100%;
|
||||
background-image: url('/img/xwdt.png');
|
||||
background-image: url('/img/aboutxq.png');
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
overflow: scroll;
|
||||
|
||||
.fiximg {
|
||||
img {
|
||||
@ -263,6 +272,10 @@ onMounted(() => {
|
||||
color: #3A91DF;
|
||||
|
||||
}
|
||||
&.active{
|
||||
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
|
||||
color: #3A91DF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -315,7 +328,7 @@ onMounted(() => {
|
||||
|
||||
.re_contents{
|
||||
width: 100%;
|
||||
height: 1500px;
|
||||
height: 100%;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
|
@ -2,37 +2,7 @@
|
||||
<!-- PC端布局 -->
|
||||
<div class="flex justify-between w-full h-full">
|
||||
<!-- 左边导航栏 -->
|
||||
<!-- <div class="bgimg">
|
||||
<div class="pc-nav">
|
||||
<div class="pc-nav-item">
|
||||
<img src="/img/index/home1.png" alt=""></img>
|
||||
<span class="span" style="color: #FFA234;">官网首页</span>
|
||||
<img src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<div class="pc-nav-item">
|
||||
<img src="/img/index/aboutus.png" alt=""></img>
|
||||
<span class="span">关于我们</span>
|
||||
</div>
|
||||
<div class="pc-nav-item">
|
||||
<img src="/img/index/news.png" alt=""></img>
|
||||
<span class="span">新闻动态</span>
|
||||
</div>
|
||||
<div class="pc-nav-item">
|
||||
<img src="/img/index/message.png" alt=""></img>
|
||||
<span class="span">信息公开</span>
|
||||
</div>
|
||||
<div class="pc-nav-item">
|
||||
<img src="/img/index/baike.png" alt=""></img>
|
||||
<span class="span">团务百科</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line_h"></div>
|
||||
<div class="goback">返回首页</div>
|
||||
<div style="margin-top: 50px;margin-left: 40px;">
|
||||
<div class="box_1">无障碍阅读</div>
|
||||
<div class="box_2">进入适老模式</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- 右边内容栏 -->
|
||||
<div class="rightcon">
|
||||
@ -83,19 +53,23 @@
|
||||
<div class="re_col"></div>
|
||||
</div>
|
||||
<div class="flex justify-between ml-[100px]">
|
||||
<div class="re_list" v-for="item,index in liuyanList">
|
||||
<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%;" >
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@ -133,17 +107,17 @@ const total = ref(0);
|
||||
const liuyanList = ref([]);
|
||||
|
||||
const getLiuyanList = async () => {
|
||||
const res = await $api.post('/api/home.leave_word/index',
|
||||
const res = await $api.post('/api/home.leave_word/index',
|
||||
{
|
||||
limit:2,
|
||||
page:1,
|
||||
status:2,
|
||||
show:1
|
||||
limit: 2,
|
||||
page: 1,
|
||||
status: 2,
|
||||
show: 1
|
||||
|
||||
}
|
||||
)
|
||||
total.value = res.data.data.count;
|
||||
liuyanList.value = res.data.data.list;
|
||||
total.value = res.data.data.count;
|
||||
liuyanList.value = res.data.data.list;
|
||||
}
|
||||
onMounted(() => {
|
||||
getLiuyanList();
|
||||
@ -198,89 +172,11 @@ const submitForm = () => {
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/index.scss';
|
||||
|
||||
|
||||
/* pc端样式 */
|
||||
// .bgimg{
|
||||
// width: 350px;
|
||||
// height: 100vh;
|
||||
// background-image: url('/img/index/leftHead.png');
|
||||
// background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
// .pc-nav {
|
||||
// margin-left: 70px;
|
||||
// margin-top: 250px;
|
||||
// text-align: center;
|
||||
// }
|
||||
// .pc-nav-item {
|
||||
// width: 100%;
|
||||
// // height: 18px;
|
||||
// font-family: Microsoft YaHei UI;
|
||||
// font-weight: bold;
|
||||
// font-size: 18px;
|
||||
// color: #FFFFFF;
|
||||
// text-shadow: 0px 1px 0px rgba(0,0,64,0.4);
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// margin-bottom: 25px;
|
||||
// &:hover{
|
||||
// cursor: pointer;
|
||||
// color: #FFA234;
|
||||
// }
|
||||
// .span{
|
||||
// margin-left: 20px;
|
||||
// }
|
||||
// }
|
||||
// .line_h{
|
||||
// width: 220px;
|
||||
// height: 1px;
|
||||
// background: #FFFFFF;
|
||||
// opacity: 0.2;
|
||||
// margin-left: 40px;
|
||||
// }
|
||||
// .goback{
|
||||
// width: 72px;
|
||||
// height: 17px;
|
||||
// font-family: Microsoft YaHei UI;
|
||||
// font-weight: 400;
|
||||
// font-size: 18px;
|
||||
// color: #FFFFFF;
|
||||
// margin-left:114px ;
|
||||
// margin-top: 20px;
|
||||
// }
|
||||
// .box_1{
|
||||
// width: 200px;
|
||||
// height: 58px;
|
||||
// line-height: 58px;
|
||||
// background: #FFA234;
|
||||
// font-family: Microsoft YaHei UI;
|
||||
// font-weight: 400;
|
||||
// font-size: 18px;
|
||||
// text-align: center;
|
||||
// color: #FFFFFF;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// .box_2{
|
||||
// width: 200px;
|
||||
// height: 58px;
|
||||
// line-height: 58px;
|
||||
// background: #4EB64B;
|
||||
// margin-top: 16px;
|
||||
// font-family: Microsoft YaHei UI;
|
||||
// font-weight: 400;
|
||||
// font-size: 18px;
|
||||
// color: #FFFFFF;
|
||||
// text-align: center;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
.rightcon {
|
||||
width: 1920px;
|
||||
height: 919px;
|
||||
background-image: url('/img/index/rightcon.png');
|
||||
background-image: url('/img/messageb.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.fiximg {
|
||||
@ -446,7 +342,8 @@ const submitForm = () => {
|
||||
margin-top: 20px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
.re_list_tit{
|
||||
|
||||
.re_list_tit {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
|
@ -65,7 +65,7 @@
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
<div style="margin-top: 10px;">
|
||||
<div class="re_box_item" v-for="(item,index) in xsList" :key="index">
|
||||
<div class="re_box_item" v-for="(item,index) in xsList" :key="index" @click="gotoDetail(item.id)">
|
||||
<div class="re_title">
|
||||
<div class="dian"></div>
|
||||
<span class="two-line-ellipsis" style="width:400px;">{{ item.title }}</span>
|
||||
@ -82,7 +82,7 @@
|
||||
</div>
|
||||
<div class="re_box">
|
||||
<img class="re_top_img" :src="`/img/index/booksty.png`"></img>
|
||||
<div class="re_box_item" v-for="(item,index) in zmList" :key="index" style="margin-top: 10px;">
|
||||
<div class="re_box_item" v-for="(item,index) in zmList" :key="index" style="margin-top: 10px;" @click="gotoDetail(item.id)">
|
||||
<div class="re_title">
|
||||
<div class="dian"></div>
|
||||
<span class="two-line-ellipsis" style="width:400px;">{{ item.title }}</span>
|
||||
@ -111,7 +111,9 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import $api from '@/service/webRequest'
|
||||
import { defineEmits } from 'vue'
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
import emitter from '@/plugins/emitter'
|
||||
import 'swiper/css'
|
||||
import 'swiper/css/autoplay'
|
||||
import "swiper/css/pagination";
|
||||
@ -124,6 +126,9 @@ const zmList = ref([]);
|
||||
const zmId = ref(null);
|
||||
const xsImg = ref([]);
|
||||
const listType = ref([]);
|
||||
const detailId = ref(null);
|
||||
|
||||
const emit = defineEmits(['toSwpe'])
|
||||
|
||||
const swiperOptionsimgs = {
|
||||
autoplay: {
|
||||
@ -140,6 +145,17 @@ const swiperOptionsimgs = {
|
||||
el:'.swiper-pagination'
|
||||
},
|
||||
}
|
||||
|
||||
//跳转详情
|
||||
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
|
||||
const onSwiperImgs = (swiper: any) => {
|
||||
newsSwiper = swiper
|
||||
|
@ -24,7 +24,7 @@
|
||||
<div class="me_col"></div>
|
||||
</div>
|
||||
<div class="re_box">
|
||||
<div class="re_box_item" v-for="(item,index) in MesList" :key="index">
|
||||
<div class="re_box_item" v-for="(item,index) in MesList" :key="index" @click="gotoDetail(item.id)">
|
||||
<div class="re_title one-line-ellipsis">
|
||||
<div class="dian"></div>
|
||||
<span>{{ item.title }}</span>
|
||||
@ -70,15 +70,19 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { NPagination } from 'naive-ui'
|
||||
import {defineEmits} from 'vue'
|
||||
import $api from '@/service/webRequest'
|
||||
import emitter from '@/plugins/emitter'
|
||||
const inputSearch = ref('');
|
||||
const MesList = ref([]);
|
||||
const page = ref(1);
|
||||
const total = ref(0);
|
||||
const detailId = ref(null);
|
||||
// 信息公开
|
||||
onMounted(() => {
|
||||
getMesList();
|
||||
})
|
||||
const emit = defineEmits(['toSwpe'])
|
||||
const getPageList = async () => {
|
||||
page.value = page.value;
|
||||
getMesList();
|
||||
@ -93,6 +97,17 @@ const getMesList = async () => {
|
||||
total.value = res.data.data.count;
|
||||
MesList.value = res.data.data.list;
|
||||
}
|
||||
//跳转详情
|
||||
const gotoDetail = (id: number) => {
|
||||
|
||||
detailId.value = {
|
||||
id: id,
|
||||
type: '2'
|
||||
};
|
||||
localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
||||
emit('toSwpe',6)
|
||||
emitter.emit('detailId', detailId.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -21,17 +21,18 @@
|
||||
|
||||
<div class="News_box">
|
||||
<div class="lef_box">
|
||||
<!-- @click="getMesList(null)" 新闻动态总 -->
|
||||
<div class="lef_boxitem1">
|
||||
<div class="lef_boxitem1_shu"></div>
|
||||
<div class="lef_boxitem1_title">新闻动态</div>
|
||||
</div>
|
||||
<div class="lef_boxitem2" v-for="(item, index) in newsListtyp" :key="index">
|
||||
<div :class="['lef_boxitem2',{'active': cateid == item.id }]" v-for="(item, index) in newsListtyp" :key="index" @click="getMesList(item.id)">
|
||||
<div class="lef_boxitem2_title">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rig_box">
|
||||
<div class="re_box">
|
||||
<div class="re_box_item" v-for="(item,index) in MesList" :key="index">
|
||||
<div class="re_box_item" v-for="(item,index) in MesList" :key="index" @click="gotoDetail(item.id)">
|
||||
<div class="re_title">
|
||||
<div class="dian"></div>
|
||||
<span class="one-line-ellipsis" style="width: 720px;">{{ item.title }}</span>
|
||||
@ -78,25 +79,44 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {defineEmits} from 'vue'
|
||||
import { NPagination } from 'naive-ui'
|
||||
import $api from '@/service/webRequest'
|
||||
import emitter from '@/plugins/emitter'
|
||||
const inputSearch = ref('');
|
||||
const MesList = ref([]);
|
||||
const newsListtyp = ref([]);
|
||||
const page = ref(1);
|
||||
const total = ref(0);
|
||||
const cateid = ref(null);
|
||||
const detailId = ref(null);
|
||||
|
||||
// 信息公开
|
||||
onMounted(() => {
|
||||
getMesList();
|
||||
getNewstypeList();
|
||||
})
|
||||
const emit = defineEmits(['toSwpe'])
|
||||
//跳转详情
|
||||
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 getPageList = async () => {
|
||||
page.value = page.value;
|
||||
getMesList();
|
||||
}
|
||||
const getMesList = async () => {
|
||||
const getMesList = async (id: number) => {
|
||||
cateid.value = id ? id :null;
|
||||
const res = await $api.post('/api/home.news/index',
|
||||
{
|
||||
cate_id: id ? id :null,
|
||||
limit:7,
|
||||
page:page.value
|
||||
}
|
||||
@ -184,6 +204,7 @@ const getNewstypeList = async () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// cursor: pointer;
|
||||
.lef_boxitem1_title{
|
||||
width: 88px;
|
||||
// height: 22px;
|
||||
@ -221,6 +242,10 @@ const getNewstypeList = async () => {
|
||||
color: #3A91DF;
|
||||
|
||||
}
|
||||
&.active{
|
||||
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
|
||||
color: #3A91DF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -21,34 +21,32 @@
|
||||
<div class="News_box">
|
||||
<div class="lef_box">
|
||||
<div class="re_box">
|
||||
<div class="re_box_item">
|
||||
<div class='re_mian'>青春寄语>未成年人保护法>正文</div>
|
||||
<div class="re_title">团市委的主要职责</div>
|
||||
<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_title">{{ Newsdetail.title }}</div>
|
||||
<div class='flex justify-between re_rouse'>
|
||||
<span>2024-07-23 10:52:00</span>
|
||||
<span>来源:央视新闻客户端</span>
|
||||
<span>{{Newsdetail.release_time_text}}</span>
|
||||
<span v-if="Newsdetail.source != ''" >来源:{{ Newsdetail.source }}</span>
|
||||
</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 class="re_file" v-if="Newsdetail.file != ''">
|
||||
附件:
|
||||
<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 }}</span>
|
||||
</div>
|
||||
<embed type="application/pdf" :src="Newsdetail.file" width="100%" height="580px" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -57,7 +55,7 @@
|
||||
<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;">
|
||||
<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>
|
||||
@ -78,7 +76,7 @@
|
||||
</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;">
|
||||
<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>
|
||||
@ -105,11 +103,11 @@
|
||||
|
||||
<!-- 右分享 -->
|
||||
<!-- <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> -->
|
||||
<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="" />
|
||||
@ -121,10 +119,19 @@
|
||||
<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 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',
|
||||
{
|
||||
@ -135,6 +142,7 @@ const getjinxList = async () => {
|
||||
)
|
||||
jinxList.value = res.data.data.list;
|
||||
}
|
||||
//热门
|
||||
const getremList = async () => {
|
||||
const res = await $api.post('/api/home.news/index',
|
||||
{
|
||||
@ -144,11 +152,46 @@ const getremList = async () => {
|
||||
}
|
||||
)
|
||||
remList.value = res.data.data.list;
|
||||
|
||||
}
|
||||
// 新闻/百科/信息公开 详情
|
||||
const getNewsdetail = async (data:object) => {
|
||||
// 新闻详情
|
||||
if (data.type == 1) {
|
||||
|
||||
const res = await $api.post('/api/home.news/detail',
|
||||
{
|
||||
id:data.id
|
||||
}
|
||||
)
|
||||
Newsdetail.value = res.data.data;
|
||||
}else if(data.type == 2){
|
||||
//信息公开文章详情
|
||||
const res1 = await $api.post('/api/home.information/detail',
|
||||
{
|
||||
id:data.id
|
||||
}
|
||||
)
|
||||
Newsdetail.value = res1.data.data;
|
||||
}else{
|
||||
// 团务百科文章详情
|
||||
const res2 = await $api.post('/api/home.encyclopedia/detail',
|
||||
{
|
||||
id:data.id
|
||||
}
|
||||
)
|
||||
Newsdetail.value = res2.data.data;
|
||||
}
|
||||
|
||||
}
|
||||
//加载中
|
||||
onMounted(() => {
|
||||
getjinxList();
|
||||
getremList();
|
||||
getNewsdetail({
|
||||
id:5192,
|
||||
type:'1'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -160,9 +203,9 @@ onMounted(() => {
|
||||
.rightcon {
|
||||
width: 1920px;
|
||||
height: 100%;
|
||||
background-image: url('/img/xwdt.png');
|
||||
background-image: url('/img/newsxq.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
overflow: scroll;
|
||||
.fiximg {
|
||||
img {
|
||||
margin-bottom: 20px;
|
||||
@ -244,10 +287,13 @@ onMounted(() => {
|
||||
width: 841px;
|
||||
border-bottom: 1px dashed #bbbbbb;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.re_file{
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.re_mian {
|
||||
width: 248px;
|
||||
// width: 248px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
|
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<div class="re_box">
|
||||
<div class="re_box_item" v-for="(item,index) in BksList" :key="index">
|
||||
<div class="re_box_item" v-for="(item,index) in BksList" :key="index" @click="gotoDetail(item.id)">
|
||||
<div class="re_title one-line-ellipsis">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
@ -72,14 +72,27 @@
|
||||
<script lang="ts" setup>
|
||||
import { NPagination } from 'naive-ui'
|
||||
import $api from '@/service/webRequest'
|
||||
import { defineEmits } from 'vue'
|
||||
import emitter from '@/plugins/emitter'
|
||||
const inputSearch = ref('');
|
||||
const BksList = ref([]);
|
||||
const page = ref(1);
|
||||
const total = ref(0);
|
||||
const emit = defineEmits(['toSwpe'])
|
||||
// 团务百科
|
||||
onMounted(() => {
|
||||
getBksList();
|
||||
})
|
||||
//跳转详情
|
||||
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 getPageList = async () => {
|
||||
page.value = page.value;
|
||||
getBksList();
|
||||
@ -220,6 +233,7 @@ const getBksList = async () => {
|
||||
.re_more{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.re_more_img{
|
||||
padding-left: 10px;
|
||||
// width: 7px;
|
||||
|
@ -2,7 +2,7 @@ import { isUndef } from './is'
|
||||
|
||||
// 正式环境
|
||||
export const PROD_ENV = {
|
||||
SERVER_URL: 'https://democs.0rui.cn/', // 服务地址
|
||||
SERVER_URL: 'https://tsw.hschool.com.cn/', // 服务地址
|
||||
IS_DEV: 'false', // 是否是测试环境
|
||||
}
|
||||
|
||||
|
@ -65,7 +65,7 @@ export default defineNuxtConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: "http://192.168.10.140:8088/api",
|
||||
target: "https://tsw.hschool.com.cn/api",
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
}
|
||||
@ -73,5 +73,5 @@ export default defineNuxtConfig({
|
||||
}
|
||||
},
|
||||
|
||||
compatibilityDate: '2025-05-15'
|
||||
compatibilityDate: '2025-05-29'
|
||||
})
|
4
package-lock.json
generated
@ -12,6 +12,7 @@
|
||||
"axios": "^1.6.2",
|
||||
"callapp-lib": "^3.5.3",
|
||||
"js-cookie": "^3.0.5",
|
||||
"mitt": "^3.0.1",
|
||||
"nuxt-icons": "^3.2.1",
|
||||
"pinia": "^2.1.7",
|
||||
"scrollreveal": "^4.0.9",
|
||||
@ -8896,9 +8897,8 @@
|
||||
},
|
||||
"node_modules/mitt": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
|
||||
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/mkdirp": {
|
||||
|
@ -34,6 +34,7 @@
|
||||
"axios": "^1.6.2",
|
||||
"callapp-lib": "^3.5.3",
|
||||
"js-cookie": "^3.0.5",
|
||||
"mitt": "^3.0.1",
|
||||
"nuxt-icons": "^3.2.1",
|
||||
"pinia": "^2.1.7",
|
||||
"scrollreveal": "^4.0.9",
|
||||
|
115
pages/index.vue
@ -12,34 +12,34 @@
|
||||
</swiper-slide>
|
||||
<!-- 首页 -->
|
||||
<swiper-slide>
|
||||
<AppHome></AppHome>
|
||||
<AppHome @toSwpe="toswiper"></AppHome>
|
||||
</swiper-slide>
|
||||
<!-- 关于我们 -->
|
||||
<swiper-slide>
|
||||
<AppAbout></AppAbout>
|
||||
<AppAbout @toSwpe="toswiper"></AppAbout>
|
||||
</swiper-slide>
|
||||
<!-- 新闻动态 -->
|
||||
<swiper-slide>
|
||||
<AppNews></AppNews>
|
||||
<AppNews @toSwpe="toswiper"></AppNews>
|
||||
</swiper-slide>
|
||||
<!-- 信息公开 -->
|
||||
<swiper-slide>
|
||||
<AppMessage></AppMessage>
|
||||
<AppMessage @toSwpe="toswiper"></AppMessage>
|
||||
</swiper-slide>
|
||||
<!-- 团务百科 -->
|
||||
<swiper-slide>
|
||||
<AppRegiment></AppRegiment>
|
||||
</swiper-slide>
|
||||
<!-- 关于我们详情 -->
|
||||
<swiper-slide>
|
||||
<AppAboutdel></AppAboutdel>
|
||||
<AppRegiment @toSwpe="toswiper"></AppRegiment>
|
||||
</swiper-slide>
|
||||
<!-- 新闻动态详情 -->
|
||||
<swiper-slide>
|
||||
<swiper-slide v-if="isNews">
|
||||
<AppNewsdel></AppNewsdel>
|
||||
</swiper-slide>
|
||||
<!-- 关于我们详情 -->
|
||||
<swiper-slide v-if="isAbout">
|
||||
<AppAboutdel></AppAboutdel>
|
||||
</swiper-slide>
|
||||
<!-- 留言板 -->
|
||||
<swiper-slide>
|
||||
<swiper-slide v-if="isMeassage">
|
||||
<AppContactUs></AppContactUs>
|
||||
</swiper-slide>
|
||||
<!-- 搜索详情 -->
|
||||
@ -58,13 +58,38 @@
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 右分享 -->
|
||||
<div v-if="swiper_exp > 0" ref="targetElement" class="flex flex-col fiximg" :style="{ position: 'absolute',top: '100px',alignItems: 'center',zIndex: 111, right: rightValue }">
|
||||
<img :src="`/img/qiqiu.png`" style="cursor: pointer;" @click="updateRight" alt=""></img>
|
||||
<div v-if="swiper_exp > 0" ref="targetElement" class="flex flex-col fiximg" :style="{ right: rightValue }">
|
||||
<img src="/img/qiqiu.png" class="qqt" @click="updateRight" alt=""></img>
|
||||
<div style="position: absolute;top: 200px;">
|
||||
<img class="imgs" :src="`/img/index/douyin.png`" alt="">
|
||||
<img class="imgs" :src="`/img/index/wb.png`" alt="">
|
||||
<img class="imgs" :src="`/img/index/wx.png`" alt="">
|
||||
<img class="imgs" :src="`/img/index/blbl.png`" alt="">
|
||||
<div class="divcode">
|
||||
<img class="imgs" :src="`/img/index/douyin.png`" alt="">
|
||||
<p class="pcode">
|
||||
<img :src="`/img/dycode.jpg`" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<div class="divcode">
|
||||
<img class="imgs" :src="`/img/index/wb.png`" alt="">
|
||||
<p class="pcode">
|
||||
<img :src="`/img/wbcode.jpg`" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<div class="divcode">
|
||||
<img class="imgs" :src="`/img/index/wx.png`" alt="">
|
||||
<p class="pcode">
|
||||
<img :src="`/img/wxcode.jpg`" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<div class="divcode">
|
||||
<img class="imgs" :src="`/img/index/blbl.png`" alt="">
|
||||
<p class="pcode">
|
||||
<img :src="`/img/bilicode.jpg`" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<div class="tuanguanxi">
|
||||
<a href="https://mp.weixin.qq.com/s/N-qAWMJNGb7WjkXp3Xqrhg" rel="nofollow" target="_blank" style="display: block;"><img src="/img/tgxzj.jpg"></a>
|
||||
<a href="http://qnyz.lyd.com.cn/" rel="nofollow" target="_blank" style="display: block;"><img src="/img/qnyz.jpg"></a>
|
||||
<img src="/img/lyb.jpg" @click="toswiper(8)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -95,12 +120,13 @@ const cdnUrl = useCdn()
|
||||
|
||||
const { locale } = useI18n();
|
||||
|
||||
const rightValue = ref('-90px');
|
||||
const rightValue = ref('-94px');
|
||||
const isheight = ref(0);
|
||||
const updateRight = () => {
|
||||
if(rightValue.value == '-90px'){
|
||||
if(rightValue.value == '-94px'){
|
||||
rightValue.value = '34px';
|
||||
} else{
|
||||
rightValue.value = '-90px';
|
||||
rightValue.value = '-94px';
|
||||
}
|
||||
}
|
||||
|
||||
@ -110,12 +136,25 @@ const onSwiperNews = (swiper: any) => {
|
||||
newsSwiper = swiper
|
||||
swiper.on('slideChange', () => {
|
||||
// 更新当前活动幻灯片索引
|
||||
// isMeassage.value = false;
|
||||
// debugger
|
||||
// console.log(swiper.el.scrollHeight);
|
||||
swiper_exp.value = swiper.realIndex;
|
||||
// if(swiper.realIndex == 6 || swiper.realIndex == 7 || swiper.realIndex == 9){
|
||||
// isheight.value = swiper.el.scrollHeight
|
||||
// }
|
||||
|
||||
// isheight
|
||||
})
|
||||
}
|
||||
let isMeassage = ref(true);
|
||||
let isNews = ref(true);
|
||||
let isAbout = ref(true);
|
||||
//跳转每页swiper的方法
|
||||
const toswiper = (index: number) => {
|
||||
// if (index == 6) isNews.value = true;
|
||||
// if (index == 7) isAbout.value = true;
|
||||
// if (index == 8) isMeassage.value = true;
|
||||
newsSwiper.slideTo(index)
|
||||
}
|
||||
const swiper_exp = ref(0);
|
||||
@ -128,6 +167,7 @@ const swiperOptionsNews = {
|
||||
direction: 'horizontal',
|
||||
mousewheel: {
|
||||
releaseOnEdges: true,
|
||||
// forceToAxis: isheight > 919 ? true : false,
|
||||
},
|
||||
slidesPerView: 1,
|
||||
speed: 500,
|
||||
@ -436,9 +476,38 @@ const animate = () => {
|
||||
|
||||
.fiximg{
|
||||
transition: right 0.5s ease-in-out;
|
||||
.imgs{
|
||||
width: 63px;
|
||||
margin-bottom: 20px;
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
align-items: center;
|
||||
z-index:111;
|
||||
.qqt{
|
||||
cursor: pointer;
|
||||
}
|
||||
.divcode{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.imgs{
|
||||
width: 63px;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pcode{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
right: 99px;
|
||||
bottom: 20px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
&:hover .pcode{
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
.tuanguanxi{
|
||||
position: relative;
|
||||
left: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
3
plugins/emitter.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import mitt from 'mitt';
|
||||
const emitter = mitt();
|
||||
export default emitter;
|
BIN
public/img/aboutxq.png
Normal file
After Width: | Height: | Size: 1.8 MiB |
BIN
public/img/bilicode.jpg
Normal file
After Width: | Height: | Size: 9.4 KiB |
BIN
public/img/dycode.jpg
Normal file
After Width: | Height: | Size: 7.7 KiB |
BIN
public/img/lyb.jpg
Normal file
After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.5 MiB |
BIN
public/img/newsxq.png
Normal file
After Width: | Height: | Size: 1.5 MiB |
BIN
public/img/qnyz.jpg
Normal file
After Width: | Height: | Size: 40 KiB |
BIN
public/img/tgxzj.jpg
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
public/img/wbcode.jpg
Normal file
After Width: | Height: | Size: 7.1 KiB |
BIN
public/img/wxcode.jpg
Normal file
After Width: | Height: | Size: 7.7 KiB |