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;
cursor: pointer;
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;">
<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="News_box">

2
components/AppHeader.vue
View File

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

9
components/AppHome.vue
View File

@ -43,7 +43,7 @@
<div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]"
type="text" placeholder="请输入搜索关键字" />
<div class="search_rinput">
<div class="search_rinput" @click="toSearch">
<img src="/img/index/hmsearch.png" alt="">
</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) => {
detailId.value = {

9
components/AppMessage.vue
View File

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

11
components/AppNews.vue
View File

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

9
components/AppNewsdel.vue
View File

@ -9,13 +9,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="News_box">
@ -197,10 +197,6 @@ onMounted(() => {
<style lang="scss" scoped>
@import '@/assets/index.scss';
.scroll-container{
height: 100%;
overflow-y: auto;
}
/* pc端样式 */
@ -209,6 +205,7 @@ onMounted(() => {
height:100%;
background-image: url('/img/newsxq.png');
background-size: 100% 100%;
overflow-y: auto;
.fiximg {
img {
margin-bottom: 20px;

9
components/AppRegiment.vue
View File

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

79
components/AppSearchdel.vue
View File

@ -9,29 +9,28 @@
<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="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 class="re_box_item" >
<div class='re_mian'>找到结果{{Newsdetailist.length}}条</div>
<div v-for=" item,index in Newsdetailist" :key="index" @click="gotoDetail(item.id)">
<div class="re_title">{{ item.title }}</div>
<!-- <div class="re_content">
{{ }}
</div> -->
<div class="re_date">发布时间：{{ item.release_time_text }}</div>
<div class="re_slice"></div>
</div>
<div class="re_date">发布时间：2024-07-23 10:52:00</div>
<div class="re_slice"></div>
</div>
</div>
</div>
@ -105,11 +104,15 @@
<script lang="ts" setup>
import { NTabs,NTabPane } from 'naive-ui'
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 jinxList = ref([]);
const remList = ref([]);
const Newsdetail = ref(null);
const Newsdetailist = ref([]);
const detailId = ref(null);
const emit = defineEmits(['toSwpe'])
const getjinxList = async () => {
const res = await $api.post('/api/home.news/index',
{
@ -130,34 +133,53 @@ const getremList = async () => {
)
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) => {
// 新闻详情
// 新闻
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){
//信息公开文章详情
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{
// 团务百科文章详情
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;
.re_box {
width: 100%;
height: 680px;
height: 100%;
margin: 0 auto;
margin-top: 40px;
padding-left: 100px;
overflow-y: auto;
.re_box_item {
width: 100%;

42
pages/index.vue
View File

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