完善跳转 添加标签

app.vue

@@ -21,7 +21,7 @@ useSeoMeta({
   ogImage: 'https://example.com/image.png',
   twitterCard: 'summary_large_image',
 })
-const store = useStore()
+const store = useStore();
 onMounted(() => {
 })
 

assets/index.scss

@@ -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;

components/AppAbout.vue

@@ -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; 
             }

components/AppAboutdel.vue

@@ -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: scroll;
-    overflow-y: auto;
 
     .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;

components/AppContactUs.vue

@@ -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,
+            limit: 2,
-            page:1,
+            page: 1,
-            status:2,
+            status: 2,
-            show:1
+            show: 1
 
         }
     )
-	total.value = res.data.data.count;
+    total.value = res.data.data.count;
-	liuyanList.value = res.data.data.list;
+    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;

components/AppHome.vue

@@ -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

components/AppMessage.vue

@@ -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>

components/AppNews.vue

@@ -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;
+                }
             }
         }
 

components/AppNewsdel.vue

@@ -21,34 +21,32 @@
             <div class="News_box">
                 <div class="lef_box">
                     <div class="re_box">
-                        <div class="re_box_item">
+                        <div class="re_box_item" v-if="Newsdetail != null && Newsdetail.type == 1">
-                            <div class='re_mian'>青春寄语>未成年人保护法>正文</div>
+                            <div class='re_mian' v-if="Newsdetail.cate != null">{{ Newsdetail.cate.name + '>' + Newsdetail.title}} </div>
-                            <div class="re_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>{{Newsdetail.release_time_text}}</span>
-                                <span>来源：央视新闻客户端</span>
+                                <span v-if="Newsdetail.source != ''" >来源：{{ Newsdetail.source }}</span>
                             </div>
                             <div class="re_slice"></div>
-                            <div class="re_content">
+                             <div class="re_file" v-if="Newsdetail.file != ''">
-                                <span>一、领导全市的共青团工作。</span>
+                                附件：
-                                <span>二、负责全市团的组织建设，积极创新基层组织制度，协助党组织管理、选拔和培训团干部，对团校、青少年活动阵地、青少年报刊等事务进行规划和管理。</span>
+                                <a :href="Newsdetail.file" target="_blank" rel="noopener noreferrer" style="color: #0066cc;">
-                                <span>三、积极向党和政府反映青少年的意愿和呼声，提出意见和建议，充分发挥民主参与和民主监督作用。</span>
+                                    {{ Newsdetail.attachment.filename }}
-                                <span>
+                                </a>
-                                    四、贯彻实施《河南省未成年人保护条例》，参与青少年事业发展规划和青少年工作政策的制定，积极实施希望工程，会同有关部门做好青少年权益保护和预防青少年犯罪工作，研究指导社区团的各项工作。
-                                </span>
-                                <span>五、调查青年思想动态和青年工作情况，研究青少年工作理论、青少年思想教育、青少年事业发展等项工作，提出相应对策，开展各种活动。</span>
-                                <span>六、领导全市青联、学联和少先队工作，对全市性青年社团组织实行指导和管理。</span>
-                                <span>七、协助教育部门做好大、中、小学校的教育管理工作，维护学校稳定和社会安定团结。</span>
-                                <span>
-                                    八、会同有关部门对全市青少年外事工作实行归口管理和提供服务，负责与国外青少年团体、政府青年机构、国际地区性青年组织及其他友好团体的交流工作，负责青年对外宣传工作，负责做好青年统战对象的团结教育工作。
-                                </span>
-                                <span>九、围绕全市经济工作大局，组织和带领团员青年发挥生力军和突击队作用。</span>
-                                <span>十、动员组织广大团员青年积极参与创建文明城市为主的各类创建活动。</span>
-                                <span>十一、围绕党政工作大局，突出青年特点，完善服务内容，促进青年创业就业。</span>
-                                <span>十二、做好党政机关团员青年效能建设工作，开展各种活动，带动机关服务质量、办事效率和执行力的进一步提高。</span>
-                                <span>十三、承担市委交办的其他事项。</span>
                             </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/douyin.png`" alt="">
-    <img :src="`/img/index/wb.png`" alt="">
+                    <img :src="`/img/index/wb.png`" alt="">
-    <img :src="`/img/index/wx.png`" alt="">
+                    <img :src="`/img/index/wx.png`" alt="">
-    <img :src="`/img/index/blbl.png`" alt="">
+                    <img :src="`/img/index/blbl.png`" alt="">
-    </div> -->
+                </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;

components/AppRegiment.vue

@@ -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;

global/env.ts

@@ -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', // 是否是测试环境
 }
 

nuxt.config.ts

@@ -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'
 })

package-lock.json

@@ -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": {

package.json

@@ -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",

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>
+					<AppRegiment @toSwpe="toswiper"></AppRegiment>
-				</swiper-slide>
-				<!-- 关于我们详情 -->
-				<swiper-slide>
-					<AppAboutdel></AppAboutdel>
 				</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 }">
+			<div v-if="swiper_exp > 0" ref="targetElement" class="flex flex-col fiximg" :style="{ right: rightValue }">
-				<img :src="`/img/qiqiu.png`" style="cursor: pointer;" @click="updateRight" alt=""></img>
+				<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="">
+					<div class="divcode">
-					<img class="imgs" :src="`/img/index/wb.png`" alt="">
+						<img class="imgs" :src="`/img/index/douyin.png`" alt="">
-					<img class="imgs" :src="`/img/index/wx.png`" alt="">
+						<p class="pcode">
-					<img class="imgs" :src="`/img/index/blbl.png`" alt="">
+							<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{
+	position: fixed;
-		width: 63px;
+	top: 40px;
-		margin-bottom: 20px;
+	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>

plugins/emitter.ts

@@ -0,0 +1,3 @@
+import mitt from 'mitt';
+const emitter = mitt();
+export default emitter;