修改遗留问题 样式问题

components/AppAbout.vue

@@ -115,23 +115,26 @@ const mouseenters = (index: number) => {
 }
 const swiperOptionsimgs = {
 	autoplay: {
-		delay: 8000,
+		delay: 5000,
 		disableOnInteraction: false,
 	},
 	direction: 'horizontal',
-	slidesPerView: 1,
+	slidesPerView: 3,
 	speed: 500,
 	effect: 'coverflow',
 	loop: true,
 	modules: [Autoplay,EffectCoverflow],
-    // centeredSlides: false,
+    centeredSlides: true,
-    // coverflowEffect: {
+    spaceBetween: "-60%",
-    //     rotate: 30,
+    coverflowEffect: {
-    //     stretch: 10,
+        rotate: 0,
-    //     depth: 60,
+        stretch: 100,
-    //     modifier: 2,
+        depth: 800,
-    //     slideShadows : true
+        modifier: 1,
-    // },
+        slideShadows : false
+    },
+    // observer: true,
+    // ovserveParent: false,
 	// pagination: {
 	// 	el:'.swiper-pagination'
 	// },
@@ -163,8 +166,8 @@ onMounted(() => {
 /* pc端样式 */
 
     .rightcon{
-        width:1920px;
+        width:100%;
-        height: 919px;
+        height:100%;
         background-image: url('/img/about/ab_bg.png');
         background-size: 100% 100%;
         .fiximg{
@@ -292,10 +295,10 @@ onMounted(() => {
             top: 0;
             left: 0;
             width: 100%;
-            padding-left: 10px;
+            padding-left: 30px;
             cursor: pointer;
             p{
-                margin: 30px 20px; 
+                margin: 20px 30px ; 
             }
         }
     }

components/AppAboutdel.vue

@@ -153,7 +153,7 @@ onMounted(() => {
 /* pc端样式 */
 
 .rightcon {
-    width: 1920px;
+    width:100%;
     height:100%;
     background-image: url('/img/aboutxq.png');
     background-size: 100% 100%;

components/AppContactUs.vue

@@ -174,8 +174,8 @@ const submitForm = () => {
 
 /* pc端样式 */
 .rightcon {
-    width: 1920px;
+    width:100%;
-    height: 919px;
+    height:100%;
     background-image: url('/img/messageb.png');
     background-size: 100% 100%;
 

components/AppHeader.vue

@@ -31,16 +31,18 @@
             <div class="line_h"></div>
             <div class="goback" @click="goBack">返回首页</div>
             <div style="margin-top: 50px;margin-left: 40px;">
-                <div class="box_1">无障碍阅读</div>
+                <div class="box_1" id='assist-open'>无障碍阅读</div>
-                <div class="box_2">进入适老模式</div>
+                <div class="box_2" @click="openOldMode">{{ isOld ? '退出适老模式' : '进入适老模式' }}</div>
             </div>
         </div>
 </template>
 
 <script lang="ts" setup>
 import { ref,defineEmits,defineProps} from 'vue'
+import '@/assets/assist/assist-entry.js'
 const props = defineProps({
-    crrentNum:Number
+    crrentNum:Number,
+    isOld:Boolean
 });
 const crrent = ref(1);
 const emit = defineEmits(['crrentTop'])
@@ -48,6 +50,10 @@ const goBack = () => {
     emit('crrentTop',0)
 }
 
+const openOldMode = () => {
+    emit('openOldMode')
+}
+
 const gotoList = (index:number) => {
     crrent.value = index
     emit('crrentTop',index)

components/AppHome.vue

@@ -298,8 +298,8 @@ onMounted(() => {
   
   
     .rightcon{
-        width:1920px;
+        width:100%;
-        height: 919px;
+        height:100%;
         background-image: url('/img/index/rightcon.png');
         background-size: 100% 100%;
         .fiximg{

components/AppMessage.vue

@@ -117,8 +117,8 @@ const gotoDetail = (id: number) => {
 /* pc端样式 */
 
     .rightcon{
-        width:1920px;
+        width:100%;
-        height: 919px;
+        height:100%;
         background-image: url('/img/message/xxgk.png');
         background-size: 100% 100%;
         .fiximg{

components/AppNews.vue

@@ -137,8 +137,8 @@ const getNewstypeList = async () => {
 /* pc端样式 */
 
     .rightcon{
-        width:1920px;
+        width:100%;
-        height: 919px;
+        height:100%;
         background-image: url('/img/xwdt.png');
         background-size: 100% 100%;
         .fiximg{

components/AppNewsdel.vue

@@ -26,10 +26,10 @@
                             <div class="re_title">{{ Newsdetail.title }}</div>
                             <div class='flex justify-between re_rouse'>
                                 <span>{{Newsdetail.release_time_text}}</span>
-                                <span v-if="Newsdetail.source != ''" >来源：{{ Newsdetail.source }}</span>
+                                <span v-if="Newsdetail.source != '' && Newsdetail.source  != null" >来源：{{ Newsdetail.source }}</span>
                             </div>
                             <div class="re_slice"></div>
-                             <div class="re_file" v-if="Newsdetail.file != ''">
+                             <div class="re_file" v-if="Newsdetail.file != '' && Newsdetail.file != null">
                                 附件：
                                 <a :href="Newsdetail.file" target="_blank" rel="noopener noreferrer" style="color: #0066cc;">
                                     {{ Newsdetail.attachment.filename }}
@@ -42,7 +42,7 @@
                             <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>
+                                <span v-if="Newsdetail.source != '' && Newsdetail.source  != null">来源：{{ Newsdetail.source }}</span>
                             </div>
                             <embed type="application/pdf" :src="Newsdetail.file" width="100%" height="580px" alt="">
                         </div>
@@ -197,15 +197,18 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 @import '@/assets/index.scss';
+.scroll-container{
+    height: 100%;
+    overflow-y: auto;
+}
 
 /* pc端样式 */
 
 .rightcon {
-    width: 1920px;
+    width:100%;
     height:100%;
     background-image: url('/img/newsxq.png');
     background-size: 100% 100%;
-    overflow: scroll;
     .fiximg {
         img {
             margin-bottom: 20px;

components/AppRegiment.vue

@@ -78,6 +78,7 @@ const inputSearch = ref('');
 const BksList = ref([]);
 const page = ref(1);
 const total = ref(0);
+const detailId = ref(null);
 const emit = defineEmits(['toSwpe'])
 // 团务百科
 onMounted(() => {
@@ -116,8 +117,8 @@ const getBksList = async () => {
 /* pc端样式 */
 
     .rightcon{
-        width:1920px;
+        width:100%;
-        height: 919px;
+        height:100%;
         background-image: url('/img/twbk.jpg');
         background-size: 100% 100%;
         .fiximg{
@@ -205,6 +206,7 @@ const getBksList = async () => {
             border: 1px solid #EEF7FF; 
             padding: 20px;
             box-sizing: border-box;
+            cursor: pointer;
             .re_title{
                 // width: 100%;
                 font-family: Microsoft YaHei;
@@ -233,7 +235,6 @@ const getBksList = async () => {
                 .re_more{
                     display: flex;
                     align-items: center;
-                    cursor: pointer;
                     .re_more_img{
                         padding-left: 10px;
                         // width: 7px;

components/AppSearchdel.vue

@@ -109,6 +109,7 @@ const inputSearch = ref('')
 const page = ref(1);
 const jinxList = ref([]);
 const remList = ref([]);
+const Newsdetail = ref(null);
 const getjinxList = async () => {
 	const res = await $api.post('/api/home.news/index',
         {
@@ -129,6 +130,37 @@ 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();
@@ -142,7 +174,7 @@ onMounted(() => {
 /* pc端样式 */
 
 .rightcon {
-    width: 1920px;
+    width:100%;
     height:100%;
     background-image: url('/img/xwdt.png');
     background-size: 100% 100%;

pages/index.vue

@@ -1,8 +1,8 @@
 <template>
 	<div style="width: 100%;">
 		<!-- Swiper 容器 -->
-		<div class="group_666" style="position: relative;height: 100vh;overflow: hidden;">
+		<div :class="['group_666',{'isOldfont': isOldfont}]" style="position: relative;height: 100vh;">
-			<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" ref="AppHeader" :crrent-num="swiper_exp" />
+			<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" @openOldMode="openOldMode" :is-old="isOldfont" 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;">
@@ -32,7 +32,7 @@
 				</swiper-slide>
 				<!-- 新闻动态详情 -->
 				<swiper-slide v-if="isNews" >
-					<AppNewsdel></AppNewsdel>
+					<AppNewsdel class="scroll-container" @scroll.passive="handleScroll(6)"></AppNewsdel>
 				</swiper-slide>
 				<!-- 关于我们详情 -->
 				<swiper-slide v-if="isAbout">
@@ -117,11 +117,12 @@ import $api from '@/service/webRequest'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 const cdnUrl = useCdn()
-
+const isOldfont = ref(false);
 const { locale } = useI18n();
 
 const rightValue = ref('-94px');
-const isheight = ref(0);
+const isheight = ref(false);
+const isScrollBottom = ref(false);
 const updateRight = () => {
 	if(rightValue.value == '-94px'){
 		rightValue.value = '34px';
@@ -130,7 +131,9 @@ const updateRight = () => {
 	} 
 }
 
-
+const openOldMode = (value:boolean) => {
+    isOldfont.value  = !isOldfont.value
+}
 let newsSwiper: any = null
 const onSwiperNews = (swiper: any) => {
 	newsSwiper = swiper
@@ -139,12 +142,9 @@ const onSwiperNews = (swiper: any) => {
 		// isMeassage.value = false;
 		// debugger 
 		// console.log(swiper.el.scrollHeight);
+		// console.log(window);
 		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);
@@ -164,16 +164,18 @@ const swiperOptionsNews = {
 		delay: 11000,
 		disableOnInteraction: false,
 	},
+	// autoHeight : true,
 	direction: 'horizontal',
 	mousewheel: {
 		releaseOnEdges: true,
-		// forceToAxis: isheight  > 919 ? true : false,
+		//forceToAxis: isheight.value,
+		sensitivity: 0.5
 	},
 	slidesPerView: 1,
 	speed: 500,
-	lazy: {
+	// lazy: {
-		loadPrevNext: true,
+	// 	loadPrevNext: true,
-	},
+	// },
 	// effect: 'fade',
 	// loop: true,
 	modules: [Mousewheel],
@@ -182,6 +184,15 @@ const swiperOptionsNews = {
 	// 	prevEl: '#swipen_next',
 	// },
 }
+const handleScroll = (index) => (event) => {
+	debugger;
+  const { scrollHeight, scrollTop, clientHeight } = event.target;
+  // 判断是否触底（留1px误差）
+  isScrollBottom.value = scrollHeight - scrollTop <= clientHeight + 1;
+  
+  // 动态控制Swiper滚轮行为
+  newsSwiper.value.mousewheel.releaseOnEdges = isScrollBottom.value;
+};
 
 // let vesSwiper: any = null
 // const onSwiperExp = (swiper: any) => {
@@ -208,90 +219,90 @@ onMounted(() => {
 	}
 	nextTick(() => {
 		// 初始化 ScrollReveal
-		setTimeout(() => {
+		// setTimeout(() => {
-			animate()
+		// 	animate()
-		}, 500)
+		// }, 500)
 	})
 })
 
-const animate = () => {
+// const animate = () => {
 
-	const sr = ScrollReveal();
+// 	const sr = ScrollReveal();
-	sr.reveal('.leftBoxTop', {
+// 	sr.reveal('.leftBoxTop', {
-		origin: "left",
+// 		origin: "left",
-		distance: "1000px",
+// 		distance: "1000px",
-		duration: 1300,
+// 		duration: 1300,
-		delay: 100,
+// 		delay: 100,
-		opacity: 0,
+// 		opacity: 0,
-		scale: 0.9,
+// 		scale: 0.9,
-		reset: true,
+// 		reset: true,
-		mobile: true,
+// 		mobile: true,
-	})
+// 	})
-	sr.reveal('.leftBox', {
+// 	sr.reveal('.leftBox', {
-		origin: "left",
+// 		origin: "left",
-		distance: "1000px",
+// 		distance: "1000px",
-		duration: 1300,
+// 		duration: 1300,
-		delay: 100,
+// 		delay: 100,
-		opacity: 0,
+// 		opacity: 0,
-		scale: 0.9,
+// 		scale: 0.9,
-		reset: true,
+// 		reset: true,
-		mobile: true,
+// 		mobile: true,
-	})
+// 	})
-	sr.reveal('.rightBox', {
+// 	sr.reveal('.rightBox', {
-		origin: "right",
+// 		origin: "right",
-		distance: "1000px",
+// 		distance: "1000px",
-		duration: 1300,
+// 		duration: 1300,
-		delay: 100,
+// 		delay: 100,
-		opacity: 0,
+// 		opacity: 0,
-		scale: 0.9,
+// 		scale: 0.9,
-		reset: true,
+// 		reset: true,
-		mobile: true,
+// 		mobile: true,
-	})
+// 	})
-	sr.reveal('.topBox', {
+// 	sr.reveal('.topBox', {
-		origin: "top",
+// 		origin: "top",
-		distance: "1000px",
+// 		distance: "1000px",
-		duration: 1300,
+// 		duration: 1300,
-		delay: 100,
+// 		delay: 100,
-		opacity: 0,
+// 		opacity: 0,
-		scale: 0.9,
+// 		scale: 0.9,
-		reset: true,
+// 		reset: true,
-		mobile: true,
+// 		mobile: true,
-	})
+// 	})
-	sr.reveal('.bottomBox', {
+// 	sr.reveal('.bottomBox', {
-		origin: "bottom",
+// 		origin: "bottom",
-		distance: "1000px",
+// 		distance: "1000px",
-		duration: 1300,
+// 		duration: 1300,
-		delay: 100,
+// 		delay: 100,
-		opacity: 0,
+// 		opacity: 0,
-		scale: 0.9,
+// 		scale: 0.9,
-		reset: true,
+// 		reset: true,
-		mobile: true,
+// 		mobile: true,
-	})
+// 	})
-	sr.reveal('.numberTopBox', {
+// 	sr.reveal('.numberTopBox', {
-		origin: "top",
+// 		origin: "top",
-		distance: "1000px",
+// 		distance: "1000px",
-		duration: 1300,
+// 		duration: 1300,
-		delay: 100,
+// 		delay: 100,
-		opacity: 0,
+// 		opacity: 0,
-		scale: 0.9,
+// 		scale: 0.9,
-		reset: true,
+// 		reset: true,
-		mobile: true,
+// 		mobile: true,
-		beforeReveal: function (el: any) {
+// 		beforeReveal: function (el: any) {
-			// numberAnimationInstRef.value.play()
+// 			// numberAnimationInstRef.value.play()
-			// numberAnimationInstRefKH.value.play()
+// 			// numberAnimationInstRefKH.value.play()
-			// numberAnimationInstRefJS.value.play()
+// 			// numberAnimationInstRefJS.value.play()
-			// numberAnimationInstRefHY.value.play()
+// 			// numberAnimationInstRefHY.value.play()
-		},
+// 		},
-	})
+// 	})
-	sr.reveal('.group_29 ', {
+// 	sr.reveal('.group_29 ', {
-		origin: "bottom",
+// 		origin: "bottom",
-		distance: "500px",
+// 		distance: "500px",
-		opacity: 0,
+// 		opacity: 0,
-		scale: 0.9,
+// 		scale: 0.9,
-		reset: false,
+// 		reset: false,
-		mobile: true,
+// 		mobile: true,
-	})
+// 	})
-}
+// }
 
 </script>
 
@@ -510,5 +521,8 @@ const animate = () => {
 		left: 30px;
 	}
 }
+.isOldfont *{
+	font-size: 28px !important;
+}
 </style>