修改对接首页，部分详情

components/AppAbout.vue

@@ -17,7 +17,18 @@
                  <img src="/img/about/cpc.png" alt="">
             </div>
             <div style="margin-left: 100px;">
-                 <img src="/img/about/cpcrit.png" alt="">
+                    <swiper class="w-[667px] h-[340px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
+                        <swiper-slide v-for="(item,index) in listImg" :key="index">
+                            <div class="img_tits">
+                                <p>{{item.title1 }}</p>
+                                <p>{{item.title2 }}</p>
+                                <p>{{item.title3 }}</p>
+                                <p>{{item.title4 }}</p>
+                                <p v-if="item.title5">{{item.title5 }}</p>
+                            </div>
+                            <img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
+                        </swiper-slide>
+                    </swiper>     
             </div>     
         </div>
         
@@ -55,7 +66,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import 'swiper/css'
+import 'swiper/css/autoplay'
+import "swiper/css/pagination";
+import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow,EffectCube,Mousewheel } from "swiper/modules";
 const bmList = ref([
     { abshow:false,title: '办公室', telnum: '63225071', content: '协调处理机关日常事务；负责团市委重要会议的会务工作；负责机关文秘、信访、保密、网络工作；负责编发内部信息、简报工作；指导全市共青团的调查研究工作；负责对外联系、机关财务、资产、行政后勤等管理工作。' },
     { abshow:false,title: '组织部', telnum: '63225070', content: '研究制定全市共青团组织、团干部和团员队伍建设的政策措施；指导推动全市团的基层组织、团员队伍和团干部队伍建设；负责团费收缴、管理和全市团的基层组织统计工作；组织开展全市性先进基层团组织和优秀团员、优秀团干部的评选表彰工作；指导推动团的基层阵地建设和基层组织信息化工作；协助党委管理县级团委的领导班子成员；协助管理在洛的团中央委员、候补委员和团省委委员、候补委员；指导全市团干部的教育培训；负责团市委机关和直属单位的人事管理、机构编制等工作；负责离退休人员的管理服务工作。' },
@@ -67,12 +82,67 @@ const bmList = ref([
     { abshow:false,title: '机关党总支', telnum: '63235856', content: '负责机关和直属单位的党群工作。' }
     
 ]);
+const listImg = ref([
+    {
+        title1: '一、领导全市的共青团工作。',
+        title2: '二、负责全市团的组织建设，积极创新基层组织制度，协助党组织管理、选拔和培训团干部，对团校、青少年活动阵地、青少年报刊等事务进行规划和管理。',
+        title3: '三、积极向党和政府反映青少年的意愿和呼声，提出意见和建议，充分发挥民主参与和民主监督作用。',
+        title4: '四、贯彻实施《河南省未成年人保护条例》，参与青少年事业发展规划和青少年工作政策的制定，积极实施希望工程，会同有关部门做好青少年权益保护和预防青少年犯罪工作，研究指导社区团的各项工作。',
+        image: '/img/about/cpcrit.png'
+    },
+    {
+        title1: '五、调查青年思想动态和青年工作情况，研究青少年工作理论、青少年思想教育、青少年事业发展等项工作，提出相应对策，开展各种活动。',
+        title2: '六、领导全市青联、学联和少先队工作，对全市性青年社团组织实行指导和管理。',
+        title3: '七、协助教育部门做好大、中、小学校的教育管理工作，维护学校稳定和社会安定团结。',
+        title4: '八、会同有关部门对全市青少年外事工作实行归口管理和提供服务，负责与国外青少年团体、政府青年机构、国际地区性青年组织及其他友好团体的交流工作，负责青年对外宣传工作，负责做好青年统战对象的团结教育工作。',
+        image: '/img/about/cpcrit1.png'
+    },
+    {
+        title1: '九、围绕全市经济工作大局，组织和带领团员青年发挥生力军和突击队作用。',
+        title2: '十、动员组织广大团员青年积极参与创建文明城市为主的各类创建活动。',
+        title3: '十一、围绕党政工作大局，突出青年特点，完善服务内容，促进青年创业就业。',
+        title4: '十二、做好党政机关团员青年效能建设工作，开展各种活动，带动机关服务质量、办事效率和执行力的进一步提高。',
+        title5: '十三、承担市委交办的其他事项。',
+        image: '/img/about/cpcrit2.png'
+    }
+])
 const mouseenters = (index: number) => {
 	bmList.value.forEach((item, index) => {
 		item.abshow = false;
 	})
 	bmList.value[index].abshow = true;
 }
+const swiperOptionsimgs = {
+	autoplay: {
+		delay: 5000,
+		disableOnInteraction: false,
+	},
+	direction: 'horizontal',
+	slidesPerView: 1,
+	speed: 500,
+	// effect: 'coverflow',
+	loop: true,
+	modules: [Autoplay,EffectCoverflow],
+    // centeredSlides: false,
+    // coverflowEffect: {
+    //     rotate: 30,
+    //     stretch: 10,
+    //     depth: 60,
+    //     modifier: 2,
+    //     slideShadows : true
+    // },
+	// pagination: {
+	// 	el:'.swiper-pagination'
+	// },
+}
+let newsSwiper: any = null
+const onSwiperImgs = (swiper: any) => {
+	newsSwiper = swiper
+	// swiper.on('slideChange', () => {
+	// 	// 更新当前活动幻灯片索引
+		
+	// })
+}
 onMounted(() => {
   // 挂载方法
 
@@ -205,5 +275,20 @@ onMounted(() => {
         }
     }
 
-
+    .swiper{
+        .img_tits{
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            font-size: 16px;
+            color: #FFFFFF;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            padding-left: 10px;
+            p{
+                margin: 30px 20px; 
+            }
+        }
+    }
 </style>

components/AppContactUs.vue

@@ -40,13 +40,13 @@
                 <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">
+                <!-- <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>
             <div class="flex flex-col w-full h-full" style="width: 1300px;margin: 0 auto;">
                 <div
@@ -387,8 +387,8 @@ const submitForm = () => {
     background: #FFFFFF;
     border-radius: 6px 6px 6px 6px;
     opacity: 0.8;
-    padding-left: 20px;
+    padding-left: 10px;
-    padding-top: 20px;
+    padding-top: 10px;
     resize: none;
     border: 1px solid #999999;
 }

components/AppHeader.vue

@@ -2,26 +2,30 @@
 <!-- 左边导航栏 -->
         <div class="bgimg">
             <div class="pc-nav">
-                <div class="pc-nav-item">
+                <div class="pc-nav-item" @click="gotoList(1)">
-                    <img src="/img/index/home1.png" alt=""></img>
+                    <img :src="crrent==1?'/img/index/home1.png':'/img/index/home.png'" alt=""></img>
-                    <span class="span" style="color: #FFA234;">官网首页</span>
+                    <span :class="['span',{'active': crrent==1}]">官网首页</span>
-                    <img src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
+                    <img v-if="crrent==1" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
                 </div>
-                <div class="pc-nav-item">
+                <div class="pc-nav-item" @click="gotoList(2)"> 
-                    <img src="/img/index/aboutus.png" alt=""></img>
+                    <img :src="crrent==2?'/img/index/aboutus1.png':'/img/index/aboutus.png'" alt=""></img>
-                    <span class="span">关于我们</span>
+                    <span :class="['span',{'active': crrent==2}]">关于我们</span>
+                    <img v-if="crrent==2" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
                 </div>
-                <div class="pc-nav-item">
+                <div class="pc-nav-item" @click="gotoList(3)">
-                    <img src="/img/index/news.png" alt=""></img>
+                    <img :src="crrent==3?'/img/index/news1.png':'/img/index/news.png'" alt=""></img>
-                    <span class="span">新闻动态</span>
+                    <span :class="['span',{'active': crrent==3}]">新闻动态</span>
+                    <img v-if="crrent==3" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
                 </div>
-                <div class="pc-nav-item">
+                <div class="pc-nav-item" @click="gotoList(4)">
-                    <img src="/img/index/message.png" alt=""></img>
+                    <img :src="crrent==4?'/img/index/message1.png':'/img/index/message.png'" alt=""></img>
-                    <span class="span">信息公开</span>
+                    <span :class="['span',{'active': crrent==4}]">信息公开</span>
+                    <img v-if="crrent==4" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
                 </div>
-                <div class="pc-nav-item">
+                <div class="pc-nav-item" @click="gotoList(5)">
-                    <img src="/img/index/baike.png" alt=""></img>
+                    <img :src="crrent==5?'/img/index/baike1.png':'/img/index/baike.png'" alt=""></img>
-                    <span class="span">团务百科</span>
+                    <span :class="['span',{'active': crrent==5}]">团务百科</span>
+                    <img v-if="crrent==5" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
                 </div>
             </div>
             <div class="line_h"></div>
@@ -34,16 +38,26 @@
 </template>
 
 <script lang="ts" setup>
-import { ref,defineEmits } from 'vue'
+import { ref,defineEmits,defineProps} from 'vue'
-const crrent = ref(0)
+const props = defineProps({
-const emit = defineEmits(['crrentTop']);
+    crrentNum:Number
+});
+const crrent = ref(1);
+const emit = defineEmits(['crrentTop'])
 const goBack = () => {
     emit('crrentTop',0)
 }
 
 const gotoList = (index:number) => {
+    crrent.value = index
     emit('crrentTop',index)
 }
+//更新当前索引值
+onUpdated(() => {
+    crrent.value = props.crrentNum;
+})
+
+
 </script>
 
 <style lang="scss" scoped>
@@ -77,6 +91,9 @@ const gotoList = (index:number) => {
         }
         .span{
             margin-left: 20px;
+            &.active{
+                color: #FFA234;
+            }
         }
     }
         .line_h{ 

components/AppHome.vue

@@ -48,9 +48,50 @@
                 </div>
             </div>
         </div>
-        <div class="flex justify-between w-full h-full"> 
+        <div class="flex h-auto home_con"> 
-            <div class="fly"></div>
+            <div class="fly">
-            <div class="fly1"></div>
+                <div class="fly_text">
+                    <span>逐梦<b style="color: #FFFFFF;">新声</b></span>
+                    <img :src="`/img/index/fly.png`" alt=""></img>
+                </div>
+                <div class="re_box" style="box-shadow: 0px 2px 24px 0px rgba(0,0,0,0.21);border-radius: 12px;">
+                    <div class="swiper" style="border-radius: 12px 12px 0 0;">
+                        <swiper class="w-[585px] h-[228px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
+                            <swiper-slide v-for="(item,index) in xsImg" :key="index">
+                                <div class="img_tits">{{ item.title }}</div>
+                                <img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
+                            </swiper-slide>
+                        </swiper>
+                        <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_title">
+                            <div class="dian"></div>
+                            <span class="two-line-ellipsis" style="width:400px;">{{ item.title }}</span>
+                        </div>
+                        <div class="slices_rol"></div>
+                    </div>
+                    </div>
+                </div>
+            </div>
+            <div class="fly1">
+                <div class="fly_text">
+                    <span>万众<b style="color: #FFFFFF;">瞩目</b></span>
+                    <img :src="`/img/index/fly.png`" alt=""></img>
+                </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_title">
+                            <div class="dian"></div>
+                            <span class="two-line-ellipsis" style="width:400px;">{{ item.title }}</span>
+                        </div>
+                        
+                        <div class="slices_rol"></div>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <!-- 右分享 -->
@@ -69,8 +110,69 @@
 </template>
 
 <script lang="ts" setup>
+import $api from '@/service/webRequest'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import 'swiper/css'
+import 'swiper/css/autoplay'
+import "swiper/css/pagination";
+import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade,Mousewheel } from "swiper/modules";
 const inputSearch = ref('');
+const xsList = ref([]);
+const xsId = ref(null);
 
+const zmList = ref([]);
+const zmId = ref(null);
+const xsImg = ref([]);
+const listType = ref([]);
+
+const swiperOptionsimgs = {
+	autoplay: {
+		delay: 5000,
+		disableOnInteraction: false,
+	},
+	direction: 'horizontal',
+	slidesPerView: 1,
+	speed: 500,
+	// effect: 'fade',
+	loop: true,
+	modules: [Autoplay,Pagination],
+	pagination: {
+		el:'.swiper-pagination'
+	},
+}
+let newsSwiper: any = null
+const onSwiperImgs = (swiper: any) => {
+	newsSwiper = swiper
+	// swiper.on('slideChange', () => {
+	// 	// 更新当前活动幻灯片索引
+		
+	// })
+}
+//新闻分类
+const getNewstypeList = async () => {
+	const res = await $api.get('/api/home.news/cate?home=1')
+	listType.value = res.data.data.list;
+    xsId.value = listType.value[0].id;
+    zmId.value = listType.value[1].id
+    //逐梦新声列表
+	const ress = await $api.get(`/api/home.news/index?cate_id=${xsId.value}&page=1&limit=4`)
+	xsList.value = ress.data.data.list;
+    //万众瞩目列表
+    const ress1 = await $api.get(`/api/home.news/index?cate_id=${zmId.value}&page=1&limit=6`)
+	zmList.value = ress1.data.data.list;
+
+}
+
+//逐梦新声轮播图
+const getxsImg = async () => {
+	const res = await $api.get('/api/index/images?page=1&limit=3')
+	xsImg.value = res.data.data.list;
+}
+
+onMounted(() => {
+    getxsImg();
+    getNewstypeList();
+})
 </script>
 
 <style lang="scss" scoped>
@@ -151,7 +253,31 @@ const inputSearch = ref('');
     //         cursor: pointer;
     //     }
     // }
+    .swiper{
 
+        .swiper-pagination{
+            text-align: right;
+            padding-right: 10px;
+            bottom: 0;
+            height: 38px;
+            line-height: 38px;
+            --swiper-pagination-color: #FFCD52;/* 两种都可以 */
+        }
+        .img_tits{
+            font-family: Microsoft YaHei UI;
+            font-weight: bold;
+            font-size: 18px;
+            color: #FFFEFE;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            background: #237FDD;
+            width: 100%;
+            height: 38px;
+            line-height: 38px;
+            padding-left: 10px;
+        }
+    }
     
   
   
@@ -205,4 +331,98 @@ const inputSearch = ref('');
         justify-content: center;
         align-items: center;
     }
+    .home_con{
+        width: 1200px;
+        box-sizing: border-box;
+        // margin: 0 auto;
+        margin-top: 30px;
+        margin-left: 400px;
+        .fly_text{
+            position: relative;
+            width: 305px;
+            height: 101px;
+            img{
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 305px;
+                height: 101px;
+            }
+            span{
+                position: absolute;
+                top: 40px;
+                left: 100px;
+                font-family: Microsoft YaHei UI;
+                font-weight: bolder;
+                font-size: 36px;
+                color: #FFA234;
+                z-index: 1;
+            }
+        }
+        .fly{
+            width: 585px;
+            // padding-left: 80px;
+        }
+        .fly1{
+            width: 585px;
+            margin-left: 30px;
+        }
+        .re_box{
+                width: 100%;
+                // height: 680px;
+                margin-top:40px;
+                // padding-left: 60px;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: flex-start;
+                align-content: flex-start;
+                // gap: 10px;
+                background: #FFFFFF;
+                position: relative;
+                border-radius: 12px;
+                .re_top_img{
+                    position: absolute;
+                    top: -66px;
+                    right: -26px;
+                }
+                .re_box_item{
+                    width: 100%;
+                    height: 90px;
+                    // border: 1px solid #EEF7FF; 
+                    padding: 20px;
+                    box-sizing: border-box;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    .re_title{
+                        // width: 640px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 18px;
+                        color: #323232;
+                        display: flex;
+                        align-items: center;
+                        .dian{
+                            width: 10px;
+                            height: 10px;
+                            background: #3B90DF;
+                            border-radius: 50%;
+                            margin-right: 15px;
+                        }
+                    }
+                    &:hover{
+                        background-image: url('/img/index/listhmbg.png');
+                        background-size: 100% 100%;
+                        cursor: pointer;
+                        .slices_rol{
+                            width: 10px;
+                            height: 88px;
+                            background: #FAA828;
+                            position: absolute;
+                            right: 0;
+                        }
+                    }
+                }
+            } 
+    }
 </style>

components/AppNews.vue

@@ -39,8 +39,8 @@
                         <div class="re_date">
                             <div class="shu"></div>
                             <div class="right_tex">
-                                <span class="span1">{{item.release_time_text.slice(8,10)}}</span>
+                                <span class="span1">{{ item.release_time_text.slice(8,10)}}</span>
-                                <span class="span2">{{item.release_time_text.slice(0,7)}}</span>
+                                <span class="span2">{{ item.release_time_text.slice(0,7)}}</span>
                             </div>
                         </div>
                     </div>
@@ -227,88 +227,88 @@ const getNewstypeList = async () => {
         .rig_box{
             width: 921px;
             .re_box{
-            width: 100%;
-            height: 680px;
-            margin: 0 auto;
-            margin-top:40px;
-            // padding-left: 60px;
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: flex-start;
-            align-content: flex-start;
-            gap: 10px;
-            .re_box_item{
                 width: 100%;
-                height: 90px;
+                height: 680px;
-                background: #FFFFFF;
+                margin: 0 auto;
-                border: 1px solid #EEF7FF; 
+                margin-top:40px;
-                padding: 20px;
+                // padding-left: 60px;
-                box-sizing: border-box;
                 display: flex;
-                justify-content: space-between;
+                flex-wrap: wrap;
-                align-items: center;
+                justify-content: flex-start;
-                .re_title{
+                align-content: flex-start;
-                    // width: 640px;
+                gap: 10px;
-                    font-family: Microsoft YaHei;
+                .re_box_item{
-                    font-weight: 400;
+                    width: 100%;
-                    font-size: 18px;
+                    height: 90px;
-                    color: #323232;
+                    background: #FFFFFF;
-                    display: flex;
+                    border: 1px solid #EEF7FF; 
-                    align-items: center;
+                    padding: 20px;
-                    .dian{
+                    box-sizing: border-box;
-                        width: 10px;
-                        height: 10px;
-                        background: #3B90DF;
-                        border-radius: 50%;
-                        margin-right: 15px;
-                    }
-                }
-                .re_date{
-                    font-family: Microsoft YaHei;
-                    font-weight: 400;
-                    font-size: 14px;
-                    color: #368BDB;
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
-                    .shu{
+                    .re_title{
-                        background: #EEEEEE;
+                        // width: 640px;
-                        width: 1px;height: 50px;
+                        font-family: Microsoft YaHei;
-                        margin-right: 20px;
+                        font-weight: 400;
-                    }
+                        font-size: 18px;
-                    .right_tex{
+                        color: #323232;
                         display: flex;
-                        flex-direction: column;
+                        align-items: center;
-                        width: 80px;
+                        .dian{
-                        text-align: center;
+                            width: 10px;
-                        .span1{
+                            height: 10px;
-                            width: 100%;
+                            background: #3B90DF;
-                            font-family: Microsoft YaHei;
+                            border-radius: 50%;
-                            font-weight: 400;
+                            margin-right: 15px;
-                            font-size: 36px;
-                            color: #378EDF;
-                        }
-                        .span2{
-                            width: 100%;
-                            font-family: Microsoft YaHei;
-                            font-weight: 400;
-                            font-size: 16px;
-                            color: #378EDF;
                         }
                     }
-                }
-                &:hover{
-                    background-image: url('/img/message/listbg.png');
-                    background-size: 100% 100%;
-                    cursor: pointer;
                     .re_date{
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #368BDB;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
                         .shu{
-                            background: #FFFFFF;
+                            background: #EEEEEE;
+                            width: 1px;height: 50px;
+                            margin-right: 20px;
+                        }
+                        .right_tex{
+                            display: flex;
+                            flex-direction: column;
+                            width: 80px;
+                            text-align: center;
+                            .span1{
+                                width: 100%;
+                                font-family: Microsoft YaHei;
+                                font-weight: 400;
+                                font-size: 36px;
+                                color: #378EDF;
+                            }
+                            .span2{
+                                width: 100%;
+                                font-family: Microsoft YaHei;
+                                font-weight: 400;
+                                font-size: 16px;
+                                color: #378EDF;
+                            }
+                        }
+                    }
+                    &:hover{
+                        background-image: url('/img/message/listbg.png');
+                        background-size: 100% 100%;
+                        cursor: pointer;
+                        .re_date{
+                            .shu{
+                                background: #FFFFFF;
+                            }
                         }
                     }
                 }
             } 
-        } 
         .pages_tsw{
             :deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active) {
                 color: #ffffff;

components/AppSearchdel.vue

@@ -0,0 +1,362 @@
+<template>
+    <!-- PC端布局 -->
+    <div class="flex justify-between w-full h-full">
+        <!-- 左边导航栏 -->
+    
+        <!-- 右边内容栏 -->
+        <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="News_box">
+                <div class="lef_box">
+                    <div class="re_box">
+                        <div class="re_box_item">
+                            <div class='re_mian'>找到结果198条</div>
+                            <div class="re_title">团市委的主要职责</div>
+                            <div class="re_content">
+                                <span>一、领导全市的共青团工作。</span>
+                                <span>二、负责全市团的组织建设，积极创新基层组织制度，协助党组织管理、选拔和培训团干部，对团校、青少年活动阵地、青少年报刊等事务进行规划和管理。</span>
+                                <span>三、积极向党和政府反映青少年的意愿和呼声，提出意见和建议，充分发挥民主参与和民主监督作用。</span>
+                            </div>
+                            <div class="re_date">发布时间：2024-07-23 10:52:00</div>
+                            <div class="re_slice"></div>
+
+                        </div>
+                    </div>
+                </div>
+    
+                <div class="rig_box">
+                     
+                    <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="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;">
+                                <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'
+const inputSearch = ref('')
+const page = ref(1);
+const jinxList = ref([]);
+const remList = ref([]);
+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;
+}
+//加载中
+onMounted(() => { 
+    getjinxList();
+    getremList();
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/index.scss';
+
+/* pc端样式 */
+
+.rightcon {
+    width: 1920px;
+    height: 100%;
+    background-image: url('/img/xwdt.png');
+    background-size: 100% 100%;
+
+    .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: 680px;
+            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-wrap: wrap;
+                /* 允许换行 */
+                justify-content: flex-start;
+                /* 项目左对齐 */
+
+                .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;
+        }
+        
+        
+    }
+}
+</style>

pages/index.vue

@@ -2,7 +2,7 @@
 	<div style="width: 100%;">
 		<!-- Swiper 容器 -->
 		<div class="group_666" style="position: relative;height: 100vh;overflow: hidden;">
-			<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" ref="AppHeader" />
+			<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" ref="AppHeader" :crrent-num="swiper_exp" />
 			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
 				<swiper-slide>
 					<img :src="`/img/index/homebg.png`" style="width: 100%;height: 100%;object-fit: cover;">
@@ -42,7 +42,10 @@
 				<swiper-slide>
 					<AppContactUs></AppContactUs>
 				</swiper-slide>
-				
+				<!-- 搜索详情 -->
+				<swiper-slide>
+					<AppSearchdel></AppSearchdel>
+				</swiper-slide>
 			</swiper>
 
 			<!-- <div style="position: absolute;width: 100%;z-index: 100;">
@@ -75,7 +78,6 @@ import 'swiper/css'
 import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade,Mousewheel } from "swiper/modules";
 import ScrollReveal from 'scrollreveal';
 import { NNumberAnimation } from 'naive-ui'
-let modules = [Autoplay, A11y, EffectCoverflow, EffectFade,Mousewheel];
 
 import "swiper/css";
 import "swiper/css/navigation";
@@ -108,7 +110,8 @@ const onSwiperNews = (swiper: any) => {
 	newsSwiper = swiper
 	swiper.on('slideChange', () => {
 		// 更新当前活动幻灯片索引
-		swiper_exp.value = swiper.realIndex
+		swiper_exp.value = swiper.realIndex;
+		
 	})
 }
 //跳转每页swiper的方法
@@ -128,6 +131,9 @@ const swiperOptionsNews = {
 	},
 	slidesPerView: 1,
 	speed: 500,
+	lazy: {
+		loadPrevNext: true,
+	},
 	// effect: 'fade',
 	// loop: true,
 	modules: [Mousewheel],
@@ -137,17 +143,17 @@ const swiperOptionsNews = {
 	// },
 }
 
-let vesSwiper: any = null
+// let vesSwiper: any = null
-const onSwiperExp = (swiper: any) => {
+// const onSwiperExp = (swiper: any) => {
-	vesSwiper = swiper
+// 	vesSwiper = swiper
-	// 监听幻灯片变化事件
+// 	// 监听幻灯片变化事件
-	swiper.on('slideChange', () => {
+// 	swiper.on('slideChange', () => {
-		// 更新当前活动幻灯片索引
+// 		// 更新当前活动幻灯片索引
-		activeSlideIndex.value = swiper.realIndex % 3
+// 		activeSlideIndex.value = swiper.realIndex % 3
-	})
+// 	})
-}
+// }
 
-const activeSlideIndex = ref(0);
+// const activeSlideIndex = ref(0);
 
 const router = useRouter()