wo123/tuanshiwei-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改遗留问题 样式问题

Browse Source
This commit is contained in:
张凯 2025-05-30 14:30:11 +08:00
parent ed3abd4315
commit 5fe71d1c31
13 changed files with 8135 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3972
assets/assist/assist-entry.js Normal file
View File

File diff suppressed because it is too large Load Diff

3970
assets/assist/assist.js Normal file
View File

File diff suppressed because it is too large Load Diff

33
components/AppAbout.vue
View File

@ -71,7 +71,7 @@ import { ref, onMounted, defineEmits } from 'vue'
import 'swiper/css'
import 'swiper/css/autoplay'
import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow,EffectCube,Mousewheel } from "swiper/modules";
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: '研究制定全市共青团组织、团干部和团员队伍建设的政策措施；指导推动全市团的基层组织、团员队伍和团干部队伍建设；负责团费收缴、管理和全市团的基层组织统计工作；组织开展全市性先进基层团组织和优秀团员、优秀团干部的评选表彰工作；指导推动团的基层阵地建设和基层组织信息化工作；协助党委管理县级团委的领导班子成员；协助管理在洛的团中央委员、候补委员和团省委委员、候补委员；指导全市团干部的教育培训；负责团市委机关和直属单位的人事管理、机构编制等工作；负责离退休人员的管理服务工作。' },
@ -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,
// coverflowEffect: {
// rotate: 30,
// stretch: 10,
// depth: 60,
// modifier: 2,
// slideShadows : true
// },
centeredSlides: true,
spaceBetween: "-60%",
coverflowEffect: {
rotate: 0,
stretch: 100,
depth: 800,
modifier: 1,
slideShadows : false
},
// observer: true,
// ovserveParent: false,
// pagination: {
// el:'.swiper-pagination'
// },
@ -163,8 +166,8 @@ onMounted(() => {
/* pc端样式 */
.rightcon{
width:1920px;
height: 919px;
width:100%;
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 ;
}
}
}

4
components/AppAboutdel.vue
View File

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

4
components/AppContactUs.vue
View File

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

12
components/AppHeader.vue
View File

@ -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_2">进入适老模式</div>
<div class="box_1" id='assist-open'>无障碍阅读</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)

4
components/AppHome.vue
View File

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

4
components/AppMessage.vue
View File

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

4
components/AppNews.vue
View File

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

15
components/AppNewsdel.vue
View File

@ -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;
height: 100%;
width:100%;
height:100%;
background-image: url('/img/newsxq.png');
background-size: 100% 100%;
overflow: scroll;
.fiximg {
img {
margin-bottom: 20px;

7
components/AppRegiment.vue
View File

@ -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;
height: 919px;
width:100%;
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;

36
components/AppSearchdel.vue
View File

@ -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,8 +174,8 @@ onMounted(() => {
/* pc端样式 */
.rightcon {
width: 1920px;
height: 100%;
width:100%;
height:100%;
background-image: url('/img/xwdt.png');
background-size: 100% 100%;

204
pages/index.vue
View File

@ -1,8 +1,8 @@
<template>
<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" :crrent-num="swiper_exp" />
<div :class="['group_666',{'isOldfont': isOldfont}]" style="position: relative;height: 100vh;">
<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;">
@ -31,8 +31,8 @@
<AppRegiment @toSwpe="toswiper"></AppRegiment>
</swiper-slide>
<!-- 新闻动态详情 -->
<swiper-slide v-if="isNews">
<AppNewsdel></AppNewsdel>
<swiper-slide v-if="isNews" >
<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: {
loadPrevNext: true,
},
// lazy: {
// 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(() => {
animate()
}, 500)
// setTimeout(() => {
// animate()
// }, 500)
})
})
const animate = () => {
// const animate = () => {
const sr = ScrollReveal();
sr.reveal('.leftBoxTop', {
origin: "left",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.leftBox', {
origin: "left",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.rightBox', {
origin: "right",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.topBox', {
origin: "top",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.bottomBox', {
origin: "bottom",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.numberTopBox', {
origin: "top",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
beforeReveal: function (el: any) {
// numberAnimationInstRef.value.play()
// numberAnimationInstRefKH.value.play()
// numberAnimationInstRefJS.value.play()
// numberAnimationInstRefHY.value.play()
},
})
sr.reveal('.group_29 ', {
origin: "bottom",
distance: "500px",
opacity: 0,
scale: 0.9,
reset: false,
mobile: true,
})
}
// const sr = ScrollReveal();
// sr.reveal('.leftBoxTop', {
// origin: "left",
// distance: "1000px",
// duration: 1300,
// delay: 100,
// opacity: 0,
// scale: 0.9,
// reset: true,
// mobile: true,
// })
// sr.reveal('.leftBox', {
// origin: "left",
// distance: "1000px",
// duration: 1300,
// delay: 100,
// opacity: 0,
// scale: 0.9,
// reset: true,
// mobile: true,
// })
// sr.reveal('.rightBox', {
// origin: "right",
// distance: "1000px",
// duration: 1300,
// delay: 100,
// opacity: 0,
// scale: 0.9,
// reset: true,
// mobile: true,
// })
// sr.reveal('.topBox', {
// origin: "top",
// distance: "1000px",
// duration: 1300,
// delay: 100,
// opacity: 0,
// scale: 0.9,
// reset: true,
// mobile: true,
// })
// sr.reveal('.bottomBox', {
// origin: "bottom",
// distance: "1000px",
// duration: 1300,
// delay: 100,
// opacity: 0,
// scale: 0.9,
// reset: true,
// mobile: true,
// })
// sr.reveal('.numberTopBox', {
// origin: "top",
// distance: "1000px",
// duration: 1300,
// delay: 100,
// opacity: 0,
// scale: 0.9,
// reset: true,
// mobile: true,
// beforeReveal: function (el: any) {
// // numberAnimationInstRef.value.play()
// // numberAnimationInstRefKH.value.play()
// // numberAnimationInstRefJS.value.play()
// // numberAnimationInstRefHY.value.play()
// },
// })
// sr.reveal('.group_29 ', {
// origin: "bottom",
// distance: "500px",
// opacity: 0,
// scale: 0.9,
// reset: false,
// mobile: true,
// })
// }
</script>
@ -510,5 +521,8 @@ const animate = () => {
left: 30px;
}
}
.isOldfont *{
font-size: 28px !important;
}
</style>