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

修改ui 问题

Browse Source
This commit is contained in:
张凯 2025-05-30 16:36:00 +08:00
parent e6e281aaca
commit 99edaff05a
10 changed files with 109 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/AppAbout.vue
View File

@ -298,7 +298,7 @@ onMounted(() => {
padding-left: 30px; padding-left: 30px;
cursor: pointer; cursor: pointer;
p{ p{
margin: 20px 30px ; margin: 15px 30px ;
} }
} }
} }

4
components/AppAboutdel.vue
View File

@ -10,13 +10,13 @@
<div style="width: 572px;height: 69px;margin-left: 415px;"> <div style="width: 572px;height: 69px;margin-left: 415px;">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;"> <img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
</div> </div>
<div class="inputform"> <!-- <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
placeholder="请输入搜索关键字" /> placeholder="请输入搜索关键字" />
<div class="search_rinput"> <div class="search_rinput">
<img src="/img/index/hmsearch.png" alt=""> <img src="/img/index/hmsearch.png" alt="">
</div> </div>
</div> </div> -->
</div> </div>
<div class="News_box"> <div class="News_box">

2
components/AppHeader.vue
View File

@ -76,7 +76,7 @@ onUpdated(() => {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
.pc-nav { .pc-nav {
margin-left: 70px; margin-left: 60px;
margin-top: 250px; margin-top: 250px;
text-align: center; text-align: center;
} }

9
components/AppHome.vue
View File

@ -43,7 +43,7 @@
<div class="inputform"> <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]"
type="text" placeholder="请输入搜索关键字" /> type="text" placeholder="请输入搜索关键字" />
<div class="search_rinput"> <div class="search_rinput" @click="toSearch">
<img src="/img/index/hmsearch.png" alt=""> <img src="/img/index/hmsearch.png" alt="">
</div> </div>
</div> </div>
@ -146,6 +146,13 @@ const swiperOptionsimgs = {
}, },
} }
const toSearch =() => {
emit('toSwpe',9);
emitter.emit('inputSea', {
keywords:inputSearch.value,
type: 1,
});
}
//跳转详情 //跳转详情
const gotoDetail = (id: number) => { const gotoDetail = (id: number) => {
detailId.value = { detailId.value = {

9
components/AppMessage.vue
View File

@ -13,7 +13,7 @@
<div class="inputform"> <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]"
type="text" placeholder="请输入搜索关键字" /> type="text" placeholder="请输入搜索关键字" />
<div class="search_rinput"> <div class="search_rinput" @click="toSearch">
<img src="/img/index/hmsearch.png" alt=""> <img src="/img/index/hmsearch.png" alt="">
</div> </div>
</div> </div>
@ -97,6 +97,13 @@ const getMesList = async () => {
total.value = res.data.data.count; total.value = res.data.data.count;
MesList.value = res.data.data.list; MesList.value = res.data.data.list;
} }
const toSearch =() => {
emit('toSwpe',9);
emitter.emit('inputSea', {
keywords:inputSearch.value,
type: 2,
});
}
//跳转详情 //跳转详情
const gotoDetail = (id: number) => { const gotoDetail = (id: number) => {

11
components/AppNews.vue
View File

@ -13,7 +13,7 @@
<div class="inputform"> <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]"
type="text" placeholder="请输入搜索关键字" /> type="text" placeholder="请输入搜索关键字" />
<div class="search_rinput"> <div class="search_rinput" @click="toSearch">
<img src="/img/index/hmsearch.png" alt=""> <img src="/img/index/hmsearch.png" alt="">
</div> </div>
</div> </div>
@ -107,7 +107,14 @@ const gotoDetail = (id: number) => {
emit('toSwpe',6) emit('toSwpe',6)
emitter.emit('detailId', detailId.value); emitter.emit('detailId', detailId.value);
} }
//搜索
const toSearch =() => {
emit('toSwpe',9);
emitter.emit('inputSea', {
keywords:inputSearch.value,
type: 2,
});
}
const getPageList = async () => { const getPageList = async () => {
page.value = page.value; page.value = page.value;
getMesList(); getMesList();

9
components/AppNewsdel.vue
View File

@ -9,13 +9,13 @@
<div style="width: 572px; height: 69px; margin-left: 415px"> <div style="width: 572px; height: 69px; margin-left: 415px">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%; height: 100%; object-fit: cover" /> <img :src="`/img/index/dlogo.png`" alt="" style="width: 100%; height: 100%; object-fit: cover" />
</div> </div>
<div class="inputform"> <!-- <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
placeholder="请输入搜索关键字" /> placeholder="请输入搜索关键字" />
<div class="search_rinput"> <div class="search_rinput">
<img src="/img/index/hmsearch.png" alt="" /> <img src="/img/index/hmsearch.png" alt="" />
</div> </div>
</div> </div> -->
</div> </div>
<div class="News_box"> <div class="News_box">
@ -197,10 +197,6 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/index.scss'; @import '@/assets/index.scss';
.scroll-container{
height: 100%;
overflow-y: auto;
}
/* pc端样式 */ /* pc端样式 */
@ -209,6 +205,7 @@ onMounted(() => {
height:100%; height:100%;
background-image: url('/img/newsxq.png'); background-image: url('/img/newsxq.png');
background-size: 100% 100%; background-size: 100% 100%;
overflow-y: auto;
.fiximg { .fiximg {
img { img {
margin-bottom: 20px; margin-bottom: 20px;

9
components/AppRegiment.vue
View File

@ -12,7 +12,7 @@
<div class="inputform"> <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]"
type="text" placeholder="请输入搜索关键字" /> type="text" placeholder="请输入搜索关键字" />
<div class="search_rinput"> <div class="search_rinput" @click="toSearch">
<img src="/img/index/hmsearch.png" alt=""> <img src="/img/index/hmsearch.png" alt="">
</div> </div>
</div> </div>
@ -94,6 +94,13 @@ const gotoDetail = (id: number) => {
emit('toSwpe',6) emit('toSwpe',6)
emitter.emit('detailId', detailId.value); emitter.emit('detailId', detailId.value);
} }
const toSearch =() => {
emit('toSwpe',9);
emitter.emit('inputSea', {
keywords:inputSearch.value,
type: 2,
});
}
const getPageList = async () => { const getPageList = async () => {
page.value = page.value; page.value = page.value;
getBksList(); getBksList();

79
components/AppSearchdel.vue
View File

@ -9,29 +9,28 @@
<div style="width: 572px; height: 69px; margin-left: 415px"> <div style="width: 572px; height: 69px; margin-left: 415px">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%; height: 100%; object-fit: cover" /> <img :src="`/img/index/dlogo.png`" alt="" style="width: 100%; height: 100%; object-fit: cover" />
</div> </div>
<div class="inputform"> <!-- <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
placeholder="请输入搜索关键字" /> placeholder="请输入搜索关键字" />
<div class="search_rinput"> <div class="search_rinput">
<img src="/img/index/hmsearch.png" alt="" /> <img src="/img/index/hmsearch.png" alt="" />
</div> </div>
</div> </div> -->
</div> </div>
<div class="News_box"> <div class="News_box">
<div class="lef_box"> <div class="lef_box">
<div class="re_box"> <div class="re_box">
<div class="re_box_item"> <div class="re_box_item" >
<div class='re_mian'>找到结果198条</div> <div class='re_mian'>找到结果{{Newsdetailist.length}}条</div>
<div class="re_title">团市委的主要职责</div> <div v-for=" item,index in Newsdetailist" :key="index" @click="gotoDetail(item.id)">
<div class="re_content"> <div class="re_title">{{ item.title }}</div>
<span>一、领导全市的共青团工作。</span> <!-- <div class="re_content">
<span>二、负责全市团的组织建设，积极创新基层组织制度，协助党组织管理、选拔和培训团干部，对团校、青少年活动阵地、青少年报刊等事务进行规划和管理。</span> {{ }}
<span>三、积极向党和政府反映青少年的意愿和呼声，提出意见和建议，充分发挥民主参与和民主监督作用。</span> </div> -->
</div> <div class="re_date">发布时间：{{ item.release_time_text }}</div>
<div class="re_date">发布时间：2024-07-23 10:52:00</div>
<div class="re_slice"></div> <div class="re_slice"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -105,11 +104,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import { NTabs,NTabPane } from 'naive-ui' import { NTabs,NTabPane } from 'naive-ui'
import $api from '@/service/webRequest' import $api from '@/service/webRequest'
const inputSearch = ref('') import { defineEmits } from 'vue'
import emitter from '@/plugins/emitter'
// const inputSearch = ref('')
const page = ref(1); const page = ref(1);
const jinxList = ref([]); const jinxList = ref([]);
const remList = ref([]); const remList = ref([]);
const Newsdetail = ref(null); const Newsdetailist = ref([]);
const detailId = ref(null);
const emit = defineEmits(['toSwpe'])
const getjinxList = async () => { const getjinxList = async () => {
const res = await $api.post('/api/home.news/index', const res = await $api.post('/api/home.news/index',
{ {
@ -130,34 +133,53 @@ const getremList = async () => {
) )
remList.value = res.data.data.list; remList.value = res.data.data.list;
} }
//跳转详情
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);
}
emitter.on('inputSea', (data) => {
console.log(data,111111)
getNewsdetail(data);
});
// 新闻/百科/信息公开 搜索 // 新闻/百科/信息公开 搜索
const getNewsdetail = async (data:object) => { const getNewsdetail = async (data:object) => {
// 新闻详情 // 新闻
if (data.type == 1) { if (data.type == 1) {
const res = await $api.post('/api/home.news/detail', const res = await $api.post('/api/home.news/index',
{ {
id:data.id keywords:data.keywords,
page:1,
limit:30
} }
) )
Newsdetail.value = res.data.data; Newsdetailist.value = res.data.data.list;
}else if(data.type == 2){ }else if(data.type == 2){
//信息公开文章详情 //信息公开
const res1 = await $api.post('/api/home.information/detail', const res1 = await $api.post('/api/home.information/index',
{ {
id:data.id keywords:data.keywords,
page:1,
limit:30
} }
) )
Newsdetail.value = res1.data.data; Newsdetailist.value = res1.data.data.list;
}else{ }else{
// 团务百科文章详情 // 团务百科
const res2 = await $api.post('/api/home.encyclopedia/detail', const res2 = await $api.post('/api/home.encyclopedia/index',
{ {
id:data.id keywords:data.keywords,
page:1,
limit:30
} }
) )
Newsdetail.value = res2.data.data; Newsdetailist.value = res2.data.data.list;
} }
} }
@ -239,10 +261,11 @@ onMounted(() => {
width: 835px; width: 835px;
.re_box { .re_box {
width: 100%; width: 100%;
height: 680px; height: 100%;
margin: 0 auto; margin: 0 auto;
margin-top: 40px; margin-top: 40px;
padding-left: 100px; padding-left: 100px;
overflow-y: auto;
.re_box_item { .re_box_item {
width: 100%; width: 100%;

42
pages/index.vue
View File

@ -32,20 +32,20 @@
<AppRegiment @toSwpe="toswiper"></AppRegiment> <AppRegiment @toSwpe="toswiper"></AppRegiment>
</swiper-slide> </swiper-slide>
<!-- 新闻动态详情 --> <!-- 新闻动态详情 -->
<swiper-slide v-if="isNews"> <swiper-slide :show="isNews" id="newsid">
<AppNewsdel class="scroll-container" @scroll.passive="handleScroll(6)"></AppNewsdel> <AppNewsdel ></AppNewsdel>
</swiper-slide> </swiper-slide>
<!-- 关于我们详情 --> <!-- 关于我们详情 -->
<swiper-slide v-if="isAbout"> <swiper-slide :show="isAbout" id="aboutid">
<AppAboutdel></AppAboutdel> <AppAboutdel></AppAboutdel>
</swiper-slide> </swiper-slide>
<!-- 留言板 --> <!-- 留言板 -->
<swiper-slide v-if="isMeassage"> <swiper-slide :show="isMeassage" id="messageid">
<AppContactUs></AppContactUs> <AppContactUs></AppContactUs>
</swiper-slide> </swiper-slide>
<!-- 搜索详情 --> <!-- 搜索详情 -->
<swiper-slide> <swiper-slide :show="isSearch" id="searchid">
<AppSearchdel></AppSearchdel> <AppSearchdel ></AppSearchdel>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
@ -143,25 +143,28 @@ const onSwiperNews = (swiper: any) => {
swiper.on('slideChange', () => { swiper.on('slideChange', () => {
// 更新当前活动幻灯片索引 // 更新当前活动幻灯片索引
// isMeassage.value = false; // isMeassage.value = false;
// debugger // console.log(newsSwiper);
// console.log(swiper.el.scrollHeight);
// console.log(window); // console.log(window);
swiper_exp.value = swiper.realIndex; swiper_exp.value = swiper.realIndex;
if (swiper.realIndex == 6) { if (swiper.realIndex == 6 || swiper.realIndex == 9 || swiper.realIndex == 7 || swiper.realIndex == 8) {
newsSwiper.mousewheel.disable(); //禁止鼠标滑轮控制 newsSwiper.mousewheel.disable(); //禁止鼠标滑轮控制
newsSwiper.allowTouchMove= false;//关闭拖动
} else { } else {
newsSwiper.mousewheel.enable(); //开启鼠标滑轮控制 newsSwiper.mousewheel.enable(); //开启鼠标滑轮控制
newsSwiper.allowTouchMove= true;// 开启拖动
} }
}) })
} }
let isMeassage = ref(true); let isMeassage = ref(false);
let isNews = ref(true); let isNews = ref(false);
let isAbout = ref(true); let isAbout = ref(false);
let isSearch = ref(false);
//跳转每页swiper的方法 //跳转每页swiper的方法
const toswiper = (index: number) => { const toswiper = (index: number) => {
// if (index == 6) isNews.value = true; if (index == 6) isNews.value = true;
// if (index == 7) isAbout.value = true; if (index == 7) isAbout.value = true;
// if (index == 8) isMeassage.value = true; if (index == 8) isMeassage.value = true;
if (index == 9) isSearch.value = true;
newsSwiper.slideTo(index) newsSwiper.slideTo(index)
} }
const swiper_exp = ref(0); const swiper_exp = ref(0);
@ -191,15 +194,6 @@ const swiperOptionsNews = {
// prevEl: '#swipen_next', // 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 // let vesSwiper: any = null
// const onSwiperExp = (swiper: any) => { // const onSwiperExp = (swiper: any) => {