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-07-02 17:47:19 +08:00
parent bea00be7cc
commit c6e567215b
3 changed files with 339 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/AppHome.vue
View File

@ -36,7 +36,7 @@
<div class="re_box"> <div class="re_box">
<div class="flex justify-between align-center w-full "> <div class="flex justify-between align-center w-full ">
<img class="re_top_img" :src="`/img/index/wzjx.png`"></img> <img class="re_top_img" :src="`/img/index/wzjx.png`"></img>
<div class="pr-[20px] more_j" @click="toMore"> <div class="pr-[20px] more_j" @click="toMore(3)">
<span>更多</span> <span>更多</span>
<img src="/img/index/more_j.png" alt="" <img src="/img/index/more_j.png" alt=""
style="width: 8px;height: 13px;margin-left: 10px;"></img> style="width: 8px;height: 13px;margin-left: 10px;"></img>
@ -71,7 +71,7 @@
<div v-if="listIndex == item.id" class="t_line"></div> <div v-if="listIndex == item.id" class="t_line"></div>
</div> </div>
</div> </div>
<div class="pr-[20px]" style="display: flex;align-items: center;"> <div class="pr-[20px]" @click="toMore(3)" style="display: flex;align-items: center;cursor: pointer;">
<span style="color: #999999;">更多</span> <span style="color: #999999;">更多</span>
<img src="/img/index/more_j.png" alt="" <img src="/img/index/more_j.png" alt=""
style="width: 8px;height: 13px;margin-left: 5px;"></img> style="width: 8px;height: 13px;margin-left: 5px;"></img>
@ -104,7 +104,7 @@
通知公告 通知公告
</div> </div>
</div> </div>
<div class="pr-[20px]" style="display: flex;align-items: center;"> <div class="pr-[20px]" @click="toMore(3)" style="display: flex;align-items: center;cursor: pointer;">
<span style="color: #999999;">更多</span> <span style="color: #999999;">更多</span>
<img src="/img/index/more_j.png" alt="" <img src="/img/index/more_j.png" alt=""
style="width: 8px;height: 13px;margin-left: 5px;"></img> style="width: 8px;height: 13px;margin-left: 5px;"></img>
@ -346,8 +346,8 @@ const toSearch = () => {
window.open(`/search_info?type=1&keywords=${inputSearch.value}`) window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
} }
// 查看更多 // 查看更多
const toMore = () => { const toMore = (index:number) => {
emit('toSwpe', 3); emit('toSwpe', index);
} }
const bstList = ref([ const bstList = ref([
{ title: "中国共产主义青年团的性质是什么?", id: 5969 }, { title: "中国共产主义青年团的性质是什么?", id: 5969 },

10
components/AppRegiment.vue
View File

@ -2,8 +2,6 @@
<!-- PC端布局 --> <!-- PC端布局 -->
<div class="flex justify-between w-full h-full"> <div class="flex justify-between w-full h-full">
<!-- 左边导航栏 --> <!-- 左边导航栏 -->
<!-- 右边内容栏 --> <!-- 右边内容栏 -->
<div class="rightcon"> <div class="rightcon">
<div class="flex top_search "> <div class="flex top_search ">
@ -64,7 +62,7 @@
热门百科 热门百科
</div> </div>
</div> </div>
<div class="pr-[5px]" style="display: flex;align-items: center;"> <div class="pr-[5px]" @click="toMore()" style="display: flex;align-items: center;cursor: pointer;">
<span style="color: #999999;">更多</span> <span style="color: #999999;">更多</span>
<img src="/img/index/more_j.png" alt="" <img src="/img/index/more_j.png" alt=""
style="width: 8px;height: 13px;margin-left: 5px;"></img> style="width: 8px;height: 13px;margin-left: 5px;"></img>
@ -97,7 +95,7 @@
国务院百事通 国务院百事通
</div> </div>
</div> </div>
<div class="pr-[20px]" style="display: flex;align-items: center;"> <div class="pr-[20px]" @click="toMore()" style="display: flex;align-items: center;cursor: pointer;">
<span style="color: #999999;">更多</span> <span style="color: #999999;">更多</span>
<img src="/img/index/more_j.png" alt="" <img src="/img/index/more_j.png" alt=""
style="width: 8px;height: 13px;margin-left: 5px;"></img> style="width: 8px;height: 13px;margin-left: 5px;"></img>
@ -163,6 +161,10 @@ onMounted(() => {
}) })
const emit = defineEmits(['toSwpe']) const emit = defineEmits(['toSwpe'])
const toMore = () => {
window.open(`/messageBoard`)
}
//跳转详情 //跳转详情
const openUrl = (id: number) => { const openUrl = (id: number) => {
window.open(`/info/${id}?type=1`) window.open(`/info/${id}?type=1`)

556
pages/messageBoard/index.vue
View File

@ -2,81 +2,80 @@
<!-- PC端布局 --> <!-- PC端布局 -->
<div class="flex justify-between w-full h-full"> <div class="flex justify-between w-full h-full">
<!-- 左边导航栏 --> <!-- 左边导航栏 -->
<AppHeader></AppHeader>
<AppHeader></AppHeader>
<!-- 右边内容栏 --> <!-- 右边内容栏 -->
<div class="rightcon"> <div class="rightcon">
<div class="flex top_search "> <div class="flex top_search ">
<div style="width: 572px;height: 69px;margin-left: 415px;"> <div style="width: 350px;">
<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" @click="toSearch">
<img src="/img/index/hmsearch.png" alt=""> <img src="/img/index/hmsearch.png" alt="">
</div> </div>
</div> --> </div>
</div> </div>
<div class="flex flex-col w-full h-full" style="width: 1300px;margin: 0 auto;"> <div class="top_bar">
<div <div style="background: #ffffff;width: 100%;display: flex;align-items: center;padding: 18px;">
style="z-index: 1;background: #ffffff;padding: 30px;border-radius: 16px;margin-top: 20px;margin-left: 100px;"> <div>
<div class="liuyanba">团团留言板</div> <img :src="`/img/key.png`" style="width: 22px;height: 22px;">
<form class="contactForm w-full" @submit.prevent="submitForm"> </div>
<div class="inputforms"> <div style="font-size: 18px;color: #323232;margin-left: 10px;">当前位置：首页 > 服务青年 > <span
<span>姓名</span> style="color: #3B90DF;">团务百科</span></div>
<input v-model="formData.name"
class="contactInputs mt-[15px] md:mt-[30px] w-full md:w-[600px]" type="text"
placeholder="输入您的姓名" />
<span>电话</span>
<input v-model="formData.mobile"
class="contactInputs mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[600px]"
type="text" placeholder="请输入您的联系电话" />
<span>邮箱</span>
<input v-model="formData.emil"
class="contactInputs mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[600px]"
type="text" placeholder="请输入您的邮箱" />
</div>
<div class="relative mt-4 md:mt-8 w-full md:w-[1100px] flex">
<span style="width: 60px;text-align: right;padding-right: 10px;">描述</span>
<textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息"
rows="5" maxlength="100"></textarea>
</div>
<button type="submit" class="contactBut">
{{ '提交' }}
</button>
</form>
</div> </div>
<div class="re_top"> </div>
<div class="re_col" style="margin-left: 100px;"></div> <div class="News_box">
<div class="re_tit">精选留言</div> <div class="lef_box">
<div class="re_col"></div> <!-- @click="getMesList(null)" 新闻动态总 -->
<div class="lef_boxitem1">
<div class="lef_boxitem1_shu"></div>
<div class="lef_boxitem1_title">团务百科</div>
</div>
<div :class="['lef_boxitem2', { 'active': cateid == item.id }]" v-for="(item, index) in newsListtyp"
:key="index" @click="getMesList(item.id, 1)">
<div class="lef_boxitem2_title">{{ item.name }}</div>
</div>
</div> </div>
<div class="flex justify-between ml-[100px]"> <div class="rig_box">
<div class="re_list" v-for="item, index in liuyanList"> <div class="re_box">
<div style="margin: 30px;"> <div class="re_box_item" v-for="(item, index) in MesList" :key="index"
<div class="re_list_tit flex" style="width: 100%;"> @click="openUrl(item.id)">
<span style="width: 12%">问题：</span> <div class="re_title">
<span style="color: #323232;width:90% ;">{{ item.question }}</span> <div class="dian"></div>
<span class="one-line-ellipsis">{{ item.title }}</span>
</div> </div>
<div class="re_list_tit flex" style="margin-top: 15px;width: 100%;"> <div class="re_date">
<span style="width: 12%">描述：</span> <div class="shu"></div>
<span :title="item.message" class="three-line-ellipsis" <div class="right_tex">
style="font-weight: 400;font-size: 14px;color: #999999;width:88% ;">{{ item.message <span class="span1">{{ item.release_time_text.slice(8, 10) }}</span>
}}</span> <span class="span2">{{ item.release_time_text.slice(0, 7) }}</span>
</div> </div>
<div class="re_list_tit flex" style="margin-top: 15px;">
<span style="color: #368FDF;width: 12%;">回复：</span>
<span :title="item.answer" class="two-line-ellipsis"
style="font-weight: 400;font-size: 14px;color: #999999;width:88% ;">{{ item.answer
}}</span>
</div> </div>
</div> </div>
</div> </div>
<!-- 分页 -->
</div> </div>
</div>
<div class="flex flex-row justify-center pages_tsw" style="margin-top: 20px;">
<n-pagination v-model:page="page" :page-sizes="[7]" :item-count="total" size="medium"
@update:page="getPageList" show-quick-jumper>
<template #goto>
到第
</template>
<template #prefix="{ itemCount }">
共 {{ itemCount }} 条
</template>
</n-pagination>
</div> </div>
<AppFooter></AppFooter>
<!-- 右分享 --> <!-- 右分享 -->
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg"> <!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
<img :src="`/img/index/douyin.png`" alt=""> <img :src="`/img/index/douyin.png`" alt="">
@ -85,7 +84,7 @@
<img :src="`/img/index/blbl.png`" alt=""> <img :src="`/img/index/blbl.png`" alt="">
</div> --> </div> -->
<!-- 底部鼠标 --> <!-- 底部鼠标 -->
<!-- <div style="position: absolute;bottom: 30px;right:30px;"> <!-- <div class="mouse_img">
<img :src="`/img/index/hmouse.png`" alt=""> <img :src="`/img/index/hmouse.png`" alt="">
</div> --> </div> -->
</div> </div>
@ -93,97 +92,85 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, ref } from 'vue' import { defineEmits } from 'vue'
import { NPagination } from 'naive-ui'
import $api from '@/service/webRequest' import $api from '@/service/webRequest'
import emitter from '@/plugins/emitter'
const inputSearch = ref(''); const inputSearch = ref('');
// 表单数据 const MesList = ref([]);
const formData = reactive({ const newsListtyp = ref([]);
name: '', const page = ref(1);
mobile: '',
emil: '',
message: ''
})
const total = ref(0); const total = ref(0);
const liuyanList = ref([]); const cateid = ref(null);
const detailId = ref(null);
const getLiuyanList = async () => { // 信息公开
const res = await $api.post('/api/home.leave_word/index', onMounted(() => {
getMesList();
getNewstypeList();
})
const emit = defineEmits(['toSwpe'])
//跳转详情
const openUrl = (id: number) => {
window.open(`/info/${id}?type=1`)
}
//跳转详情
// const gotoDetail = (id: number) => {
// detailId.value = {
// id: id,
// type: '1'
// };
// localStorage.setItem('detailId', JSON.stringify(detailId.value));
// emit('toSwpe',6)
// emitter.emit('detailId', detailId.value);
// }
//搜索
const toSearch = () => {
// emit('toSwpe',9);
// emitter.emit('inputSea', {
// keywords:inputSearch.value,
// type: 1,
// });
window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
}
const getPageList = async () => {
page.value = page.value;
getMesList();
}
const getMesList = async (id: number, pagecru: number) => {
cateid.value = id ? id : cateid.value;
page.value = pagecru ? pagecru : page.value;
const res = await $api.post('/api/home.news/index',
{ {
limit: 2, cate_id: cateid.value,
page: 1, limit: 9,
status: 2, page: page.value,
show: 1 isnews: 1
} }
) )
total.value = res.data.data.count; total.value = res.data.data.count;
liuyanList.value = res.data.data.list; MesList.value = res.data.data.list;
} }
onMounted(() => { const getNewstypeList = async () => {
getLiuyanList(); const res = await $api.get('/api/home.news/cate?isnews=1')
}) newsListtyp.value = res.data.data.list;
// 表单方法
const submitForm = () => {
console.log(formData);
// 这里可以添加表单验证逻辑
if (!formData.name) {
alert('请输入您的姓名')
return
}
if (!formData.mobile) {
alert('请输入您的手机号码')
return
}
if (!formData.emil) {
alert('请输入您的邮箱')
return
}
if (!formData.message) {
alert('请输入您的留言内容')
return
}
$api.post("/api/home.leave_word/add", formData)
.then((res: any) => {
console.log(res)
if (res.status == 200) {
alert('留言成功')
} else {
alert('失败')
}
formData.name = '';
formData.mobile = '';
formData.emil = '';
formData.message = '';
})
.catch((err) => {
console.dir(err)
})
// 重置表单
// formData.name = ''
// formData.mobile = ''
// formData.content = ''
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/index.scss'; @import '@/assets/index.scss';
/* pc端样式 */ /* pc端样式 */
.rightcon { .rightcon {
width:100%; width: 100%;
height:100%; height: 100%;
background-image: url('/img/messageb.png'); background-image: url('/img/index/rightcons.png');
background-size: 100% 100%; background-size: 100% 100%;
min-height: 919px; overflow-y: auto;
.fiximg { position: absolute;
img {
margin-bottom: 20px;
}
}
} }
.top_search { .top_search {
@ -191,12 +178,13 @@ const submitForm = () => {
height: 70px; height: 70px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-left: 415px;
width: 1200px;
} }
.inputform { .inputform {
position: relative; position: relative;
width: 340px; width: 340px;
margin-right: 319px;
} }
.contactInput { .contactInput {
@ -219,7 +207,7 @@ const submitForm = () => {
.search_rinput { .search_rinput {
width: 68px; width: 68px;
height: 50px; height: 50px;
background: #E6E6E6; background: #338CDE;
border-radius: 0px 8px 8px 0px; border-radius: 0px 8px 8px 0px;
position: absolute; position: absolute;
top: 0; top: 0;
@ -229,125 +217,237 @@ const submitForm = () => {
align-items: center; align-items: center;
} }
//------------------------------------------ .News_box {
.liuyanba { display: flex;
width: 1200px; justify-content: space-between;
/* height: 22px; */ width: 1300px;
margin: 0 auto; margin: 0 auto;
font-family: Microsoft YaHei UI;
font-weight: bold;
font-size: 22px;
color: #358DDE;
}
.contactForm { .lef_box {
width: 100%; width: 260px;
margin-left: 30px; height: 100%;
margin-top: 20px;
margin-left: 100px;
.inputforms { .lef_boxitem1 {
display: flex; width: 260px;
justify-content: center; height: 64px;
align-items: center; background: linear-gradient(0deg, #338CDE 0%, #3D92E0 100%);
width: 1100px; display: flex;
align-items: center;
justify-content: center;
span { // cursor: pointer;
width: 50px; .lef_boxitem1_title {
margin-top: 30px; width: 88px;
margin-left: 20px; // height: 22px;
height: 100%; font-family: Microsoft YaHei UI;
font-weight: bold;
font-size: 22px;
color: #FFFEFE;
}
.lef_boxitem1_shu {
width: 4px;
height: 25px;
background: #FFFFFF;
margin-right: 20px;
}
}
.lef_boxitem2 {
width: 260px;
height: 64px;
background: #FFFFFF;
color: #323232;
display: flex;
align-items: center;
margin-top: 10px;
cursor: pointer;
.lef_boxitem2_title {
width: 100%;
// height: 19px;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 20px;
text-align: center;
}
&:hover {
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
color: #3A91DF;
}
&.active {
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
color: #3A91DF;
}
} }
} }
} .rig_box {
width: 921px;
.contactInputs { .re_box {
width: 380px; width: 100%;
height: 50px; margin: 0 auto;
background: #FFFFFF; margin-top: 20px;
border-radius: 6px; // padding-left: 60px;
padding-left: 20px; display: flex;
border: 1px solid #999999; flex-wrap: wrap;
} justify-content: flex-start;
align-content: flex-start;
gap: 10px;
.contactInputs::placeholder { .re_box_item {
color: #768597; width: 100%;
} height: 90px;
background: #FFFFFF;
border: 1px solid #EEF7FF;
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.contactInputs:focus { .re_title {
outline: none; // width: 640px;
} font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #323232;
display: flex;
align-items: center;
#myTextarea { .dian {
width: 1100px; width: 10px;
height: 167px; height: 10px;
background: #FFFFFF; background: #3B90DF;
border-radius: 6px 6px 6px 6px; border-radius: 50%;
opacity: 0.8; margin-right: 15px;
padding-left: 10px; }
padding-top: 10px; }
resize: none;
border: 1px solid #999999;
}
#myTextarea::placeholder { .re_date {
color: #768597; font-family: Microsoft YaHei;
} font-weight: 400;
font-size: 14px;
color: #368BDB;
display: flex;
justify-content: space-between;
align-items: center;
#myTextarea:focus { .shu {
outline: none; background: #EEEEEE;
} width: 1px;
height: 50px;
margin-right: 20px;
}
.contactBut { .right_tex {
width: 140px; display: flex;
border-radius: 4px 4px 4px 4px; flex-direction: column;
// position: absolute; width: 80px;
// bottom: 20px; text-align: center;
// right: 30px;
height: 50px;
margin-top: 20px;
margin-left: 50px;
background: linear-gradient(0deg, #338CDE 0%, #469CE2 100%);
border: none;
font-weight: bold;
font-size: 18px;
color: #FFFFFF;
}
.re_top { .span1 {
width: 100%; width: 100%;
height: 40px; font-family: Microsoft YaHei;
display: flex; font-weight: 600;
justify-content: center; font-size: 22px;
align-items: center; color: #378EDF;
margin-top: 20px; }
.re_tit { .span2 {
font-family: Microsoft YaHei; width: 100%;
font-weight: bold; font-family: Microsoft YaHei;
font-size: 36px; font-weight: 400;
color: #4E3C3C; font-size: 16px;
margin: 0 30px; color: #378EDF;
} }
}
}
&:hover {
background-image: url('/img/listbg.png');
background-size: 100% 100%;
cursor: pointer;
.re_date {
.shu {
background: #FFFFFF;
}
}
}
}
}
.re_col {
width: 78px;
height: 3px;
background: #348CDD;
} }
} }
.re_list { .pages_tsw {
width: 585px; padding:30px 0px 0px 270px;
height: 243px; :deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active) {
margin-top: 20px; color: #ffffff;
background: #FFFFFF; background-color: #388FDF;
border-radius: 8px; border: 1px solid #388FDF;
}
.re_list_tit { :deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button) {
font-family: Microsoft YaHei; color: #999999;
font-weight: bold; }
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover) {
color: #388FDF;
// border: 1px solid #388FDF;
}
:deep(.n-pagination .n-pagination-item--active:hover) {
color: #ffffff !important;
// border: 1px solid #388FDF;
}
:deep(.n-pagination .n-pagination-item) {
border: none;
width: 42px;
height: 30px;
font-size: 18px; font-size: 18px;
color: #FFA234; background: #FFFFFF;
}
:deep(.n-pagination-quick-jumper) {
&:after {
content: '页'
}
}
}
.top_bar {
margin: 0px auto;
width: 1300px;
padding-left: 100px;
padding-top: 50px;
}
@media (max-width: 1440px) {
.top_search {
width: 920px;
margin-left: 373px;
}
.News_box {
width: 1032px;
margin-left: 270px;
}
.rig_box {
width: 650px !important;
}
.top_bar {
margin: 0px;
width: 1032px;
margin-left: 270px;
} }
} }
</style> </style>