zhangkai/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-27 09:02:43 +08:00
parent 1c9a54e952
commit 8c8523dca4
10 changed files with 1228 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

344
components/AppAboutdel.vue Normal file
View File

@ -0,0 +1,344 @@
<template>
<!-- PC端布局 -->
<div class="flex justify-between w-full h-full">
<!-- 左边导航栏 -->
<!-- 右边内容栏 -->
<div class="rightcon">
<div class="flex top_search ">
<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">
<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 class="News_box">
<div class="lef_box">
<div class="lef_boxitem1">
<div class="lef_boxitem1_shu"></div>
<div class="lef_boxitem1_title">关于我们</div>
</div>
<div class="lef_boxitem2" v-for="(item, index) in newsListtyp" :key="index">
<div class="lef_boxitem2_title">{{ item.name }}</div>
</div>
</div>
<div class="rig_box">
<div class="re_box">
<div class="re_box_item" v-if="isShow">
<div class="re_title">团市委的主要职责</div>
<div class="re_slice"></div>
<div class="re_content">
<span>一、领导全市的共青团工作。</span>
<span>二、负责全市团的组织建设，积极创新基层组织制度，协助党组织管理、选拔和培训团干部，对团校、青少年活动阵地、青少年报刊等事务进行规划和管理。</span>
<span>三、积极向党和政府反映青少年的意愿和呼声，提出意见和建议，充分发挥民主参与和民主监督作用。</span>
<span>四、贯彻实施《河南省未成年人保护条例》，参与青少年事业发展规划和青少年工作政策的制定，积极实施希望工程，会同有关部门做好青少年权益保护和预防青少年犯罪工作，研究指导社区团的各项工作。</span>
<span>五、调查青年思想动态和青年工作情况，研究青少年工作理论、青少年思想教育、青少年事业发展等项工作，提出相应对策，开展各种活动。</span>
<span>六、领导全市青联、学联和少先队工作，对全市性青年社团组织实行指导和管理。</span>
<span>七、协助教育部门做好大、中、小学校的教育管理工作，维护学校稳定和社会安定团结。</span>
<span>八、会同有关部门对全市青少年外事工作实行归口管理和提供服务，负责与国外青少年团体、政府青年机构、国际地区性青年组织及其他友好团体的交流工作，负责青年对外宣传工作，负责做好青年统战对象的团结教育工作。</span>
<span>九、围绕全市经济工作大局，组织和带领团员青年发挥生力军和突击队作用。</span>
<span>十、动员组织广大团员青年积极参与创建文明城市为主的各类创建活动。</span>
<span>十一、围绕党政工作大局，突出青年特点，完善服务内容，促进青年创业就业。</span>
<span>十二、做好党政机关团员青年效能建设工作，开展各种活动，带动机关服务质量、办事效率和执行力的进一步提高。</span>
<span>十三、承担市委交办的其他事项。</span>
</div>
</div>
<div class="re_box_item" v-else>
<div class="re_title">团市委的机构设置</div>
<div class="re_slice"></div>
<div class="re_contents">
<div>
<span>(一)办公室</span>
<span>电话：63225071</span>
<span>协调处理机关日常事务；负责团市委重要会议的会务工作；负责机关文秘、信访、保密、网络工作；负责编发内部信息、简报工作；指导全市共青团的调查研究工作；负责对外联系、机关财务、资产、行政后勤等管理工作。</span>
</div>
<div>
<span>(二)组织部</span>
<span>电话：63225070</span>
<span>研究制定全市共青团组织、团干部和团员队伍建设的政策措施；指导推动全市团的基层组织、团员队伍和团干部队伍建设；负责团费收缴、管理和全市团的基层组织统计工作；组织开展全市性先进基层团组织和优秀团员、优秀团干部的评选表彰工作；指导推动团的基层阵地建设和基层组织信息化工作；协助党委管理县级团委的领导班子成员；协助管理在洛的团中央委员、候补委员和团省委委员、候补委员；指导全市团干部的教育培训；负责团市委机关和直属单位的人事管理、机构编制等工作；负责离退休人员的管理服务工作。</span>
</div>
<div>
<span>(三)宣传部</span>
<span>电话：63225062</span>
<span>组织指导全市团员青年的思想道德教育和全市团组织的文化活动；加强青年理想信念教育,引导全市广大青少年践行社会主义核心价值观；指导全市团的宣传工作；指导团员青年理论学习；提供和编写团干部教育材料和团课教材；强化青少年网络思想引领工作,提升网络舆情分析和引导能力；指导青少年活动阵地建设和青少年开展健康有益的活动；负责团市委的新闻、宣传工作,抓好团的宣传队伍建设。</span>
</div>
<div>
<span>(四)青年发展部</span>
<span>电话：63225069</span>
<span>研究制订促进全市青年发展的规划和政策措施,建立和完善青年服务体系；开展促进全市青年就业、创业、创新、创优和全市青年职业文明素养培养、技能培训提升等工作；指导洛阳市青年企业家协会、洛阳市青年农民专业合作社联合会等有关社会团体工作；组织实施对团市委定点扶贫地区的帮扶工作。</span>
</div>
<div>
<span>(五)学校部(维护青少年权益部)</span>
<span>电话：63225067</span>
<span>组织指导全市大中专院校、中学共青团工作,了解掌握学生的思想动态,根据党的教育方针开展团的各项活动；指导青年学生开展社会实践、勤工助学和课外科技、文化活动；培养青年学生创新意识和科技创新能力,推进大学生素质教育；负责市学联的日常事务工作；指导全市少先队工作,研究少年儿童的思想品德教育,协调和配合社会有关部门调查研究,反映情况,制定政策和措施；指导少先队校外阵地建设,组织开展有利于少年儿童健康成长的文化、体育活动；负责少先队宣传工作；抓好少先队辅导员队伍建设；负责少先队洛阳市工作委员会的日常事务工作；宣传贯彻《河南省未成年人保护条例》,负责全市未成年人权益保护工作；负责预防全市青少年违法犯罪工作；研究全市有关青少年发展问题,参与制定保护青少年健康成长的法规、政策；协调处理侵害青少年权益案件；指导青少年社会化服务体系建设；指导青少年报刊工作；承担市未成年人保护委员会办公室的日常工作。</span>
</div>
<div>
<span>(六)统战联络部</span>
<span>电话：63225102</span>
<span>负责全市青年统战工作,在各族各界青年代表人士中开展联谊和交流工作；负责市青联的日常事务及会员团体和委员的联络工作；协助管理在洛全国青联成员、省青联委员；开展青年科技人才和青年留学人员的联系服务工作；开展对台港澳地区青年及青年侨胞的统战工作；负责全市青少年外事工作,开展同国外、境外青少年组织的联络和交流活动。</span>
</div>
<div>
<span>(七)社会联络部</span>
<span>电话：63230538</span>
<span>研究制订全市共青团、青年社会组织参与社会建设的总体规划和政策制度；开展对全市青年社会组织和新兴青年群体的联系服务和引导工作；研究制订全市青年志愿服务工作规划、意见,指导全市青年志愿服务工作；指导建设全市青少年事务社会工作专业人才队伍；协调、指导全市青少年生态环境保护工作；承担全市性青年社团组织的指导和管理工作。</span>
</div>
<div>
<span>(八)机关党总支</span>
<span>电话：63235856</span>
<span>负责机关和直属单位的党群工作。</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右分享 -->
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
<img :src="`/img/index/douyin.png`" alt="">
<img :src="`/img/index/wb.png`" alt="">
<img :src="`/img/index/wx.png`" alt="">
<img :src="`/img/index/blbl.png`" alt="">
</div> -->
<!-- 底部鼠标 -->
<div style="position: absolute;bottom: 30px;right:30px;">
<img :src="`/img/index/hmouse.png`" alt="">
</div>
</div>
</div>
</template>
<script lang="ts" setup>
// import $api from '@/service/webRequest'
const inputSearch = ref('');
let isShow = ref(true);
const newsListtyp = ref([
{name:'团市委职责'},
{name:'​各部门职能'}
]);
//加载中
onMounted(() => {
})
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
/* pc端样式 */
.rightcon {
width: 1920px;
height: 100%;
background-image: url('/img/xwdt.png');
background-size: 100% 100%;
overflow: hidden;
overflow-y: auto;
.fiximg {
img {
margin-bottom: 20px;
}
}
}
.top_search {
margin-top: 50px;
height: 70px;
justify-content: space-between;
align-items: center;
}
.inputform {
position: relative;
width: 340px;
margin-right: 319px;
}
.contactInput {
width: 337px;
height: 50px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #DEE4E8;
padding-left: 15px;
}
.contactInput::placeholder {
color: #999999;
}
.contactInput:focus {
outline: none;
}
.search_rinput {
width: 68px;
height: 50px;
background: #E6E6E6;
border-radius: 0px 8px 8px 0px;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
.News_box {
display: flex;
justify-content: space-between;
width: 1300px;
margin: 0 auto;
height: 100%;
.lef_box {
width: 260px;
height: 100%;
margin-top: 40px;
margin-left: 100px;
.lef_boxitem1 {
width: 260px;
height: 64px;
background: linear-gradient(0deg, #338CDE 0%, #3D92E0 100%);
display: flex;
align-items: center;
justify-content: center;
.lef_boxitem1_title {
width: 88px;
// height: 22px;
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;
}
}
}
.rig_box {
width: 921px;
.re_box {
width: 100%;
height: 680px;
margin: 0 auto;
margin-top: 40px;
// padding-left: 60px;
.re_box_item {
width: 100%;
background: #FFFFFF;
border: 1px solid #EEF7FF;
padding: 30px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap; /* 允许换行 */
justify-content: flex-start; /* 项目左对齐 */
.re_slice{
width: 841px;
border-bottom: 1px dashed #BBBBBB;
margin-top: 40px;
margin-bottom: 30px;
}
.re_title {
width: 100%;
font-family: Microsoft YaHei UI;
font-weight: bold;
font-size: 32px;
color: #393939;
text-align: center;
}
.re_content{
width: 100%;
height: 100%;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 16px;
color: #999999;
span{
display: inline-block;
line-height: 32px;
}
}
.re_contents{
width: 100%;
height: 1500px;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 16px;
color: #999999;
div{
margin: 20px 0;
}
span{
display:block;
// line-height: 30px;
&:first-child{
font-weight: bold;
font-size: 17px;
color: #000000;
}
}
}
}
}
}
}
</style>

456
components/AppContactUs.vue Normal file
View File

@ -0,0 +1,456 @@
<template>
<!-- PC端布局 -->
<div class="flex justify-between w-full h-full">
<!-- 左边导航栏 -->
<!-- <div class="bgimg">
<div class="pc-nav">
<div class="pc-nav-item">
<img src="/img/index/home1.png" alt=""></img>
<span class="span" style="color: #FFA234;">官网首页</span>
<img src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
</div>
<div class="pc-nav-item">
<img src="/img/index/aboutus.png" alt=""></img>
<span class="span">关于我们</span>
</div>
<div class="pc-nav-item">
<img src="/img/index/news.png" alt=""></img>
<span class="span">新闻动态</span>
</div>
<div class="pc-nav-item">
<img src="/img/index/message.png" alt=""></img>
<span class="span">信息公开</span>
</div>
<div class="pc-nav-item">
<img src="/img/index/baike.png" alt=""></img>
<span class="span">团务百科</span>
</div>
</div>
<div class="line_h"></div>
<div class="goback">返回首页</div>
<div style="margin-top: 50px;margin-left: 40px;">
<div class="box_1">无障碍阅读</div>
<div class="box_2">进入适老模式</div>
</div>
</div> -->
<!-- 右边内容栏 -->
<div class="rightcon">
<div class="flex top_search ">
<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">
<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 class="flex flex-col w-full h-full" style="width: 1300px;margin: 0 auto;">
<div
style="z-index: 1;background: #ffffff;padding: 30px;border-radius: 16px;margin-top: 20px;margin-left: 100px;">
<div class="liuyanba">团团留言板</div>
<form class="contactForm w-full" @submit.prevent="submitForm">
<div class="inputforms">
<span>姓名</span>
<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 class="re_top">
<div class="re_col" style="margin-left: 100px;"></div>
<div class="re_tit">精选留言</div>
<div class="re_col"></div>
</div>
<div class="flex justify-between ml-[100px]">
<div class="re_list" v-for="item,index in liuyanList">
<div style="margin: 30px;">
<div class="re_list_tit flex" style="width: 100%;">
<span style="width: 12%">问题：</span>
<span style="color: #323232;width:90% ;">{{ item.question }}</span>
</div>
<div class="re_list_tit flex" style="margin-top: 15px;width: 100%;" >
<span style="width: 12%">描述：</span>
<span :title="item.message" class="three-line-ellipsis" style="font-weight: 400;font-size: 14px;color: #999999;width:88% ;">{{ item.message }}</span>
</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 style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
<img :src="`/img/index/douyin.png`" alt="">
<img :src="`/img/index/wb.png`" alt="">
<img :src="`/img/index/wx.png`" alt="">
<img :src="`/img/index/blbl.png`" alt="">
</div> -->
<!-- 底部鼠标 -->
<div style="position: absolute;bottom: 30px;right:30px;">
<img :src="`/img/index/hmouse.png`" alt="">
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import $api from '@/service/webRequest'
const inputSearch = ref('');
// 表单数据
const formData = reactive({
name: '',
mobile: '',
emil: '',
message: ''
})
const total = ref(0);
const liuyanList = ref([]);
const getLiuyanList = async () => {
const res = await $api.post('/api/home.leave_word/index',
{
limit:2,
page:1,
status:2,
show:1
}
)
total.value = res.data.data.count;
liuyanList.value = res.data.data.list;
}
onMounted(() => {
getLiuyanList();
})
// 表单方法
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>
<style lang="scss" scoped>
@import '@/assets/index.scss';
/* pc端样式 */
// .bgimg{
// width: 350px;
// height: 100vh;
// background-image: url('/img/index/leftHead.png');
// background-size: 100% 100%;
// position: absolute;
// .pc-nav {
// margin-left: 70px;
// margin-top: 250px;
// text-align: center;
// }
// .pc-nav-item {
// width: 100%;
// // height: 18px;
// font-family: Microsoft YaHei UI;
// font-weight: bold;
// font-size: 18px;
// color: #FFFFFF;
// text-shadow: 0px 1px 0px rgba(0,0,64,0.4);
// display: flex;
// align-items: center;
// margin-bottom: 25px;
// &:hover{
// cursor: pointer;
// color: #FFA234;
// }
// .span{
// margin-left: 20px;
// }
// }
// .line_h{
// width: 220px;
// height: 1px;
// background: #FFFFFF;
// opacity: 0.2;
// margin-left: 40px;
// }
// .goback{
// width: 72px;
// height: 17px;
// font-family: Microsoft YaHei UI;
// font-weight: 400;
// font-size: 18px;
// color: #FFFFFF;
// margin-left:114px ;
// margin-top: 20px;
// }
// .box_1{
// width: 200px;
// height: 58px;
// line-height: 58px;
// background: #FFA234;
// font-family: Microsoft YaHei UI;
// font-weight: 400;
// font-size: 18px;
// text-align: center;
// color: #FFFFFF;
// cursor: pointer;
// }
// .box_2{
// width: 200px;
// height: 58px;
// line-height: 58px;
// background: #4EB64B;
// margin-top: 16px;
// font-family: Microsoft YaHei UI;
// font-weight: 400;
// font-size: 18px;
// color: #FFFFFF;
// text-align: center;
// cursor: pointer;
// }
// }
.rightcon {
width: 1920px;
height: 919px;
background-image: url('/img/index/rightcon.png');
background-size: 100% 100%;
.fiximg {
img {
margin-bottom: 20px;
}
}
}
.top_search {
margin-top: 50px;
height: 70px;
justify-content: space-between;
align-items: center;
}
.inputform {
position: relative;
width: 340px;
margin-right: 319px;
}
.contactInput {
width: 337px;
height: 50px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #DEE4E8;
padding-left: 15px;
}
.contactInput::placeholder {
color: #999999;
}
.contactInput:focus {
outline: none;
}
.search_rinput {
width: 68px;
height: 50px;
background: #E6E6E6;
border-radius: 0px 8px 8px 0px;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
//------------------------------------------
.liuyanba {
width: 1200px;
/* height: 22px; */
margin: 0 auto;
font-family: Microsoft YaHei UI;
font-weight: bold;
font-size: 22px;
color: #358DDE;
}
.contactForm {
width: 100%;
margin-left: 30px;
.inputforms {
display: flex;
justify-content: center;
align-items: center;
width: 1100px;
span {
width: 50px;
margin-top: 30px;
margin-left: 20px;
height: 100%;
}
}
}
.contactInputs {
width: 380px;
height: 50px;
background: #FFFFFF;
border-radius: 6px;
padding-left: 20px;
border: 1px solid #999999;
}
.contactInputs::placeholder {
color: #768597;
}
.contactInputs:focus {
outline: none;
}
#myTextarea {
width: 1100px;
height: 167px;
background: #FFFFFF;
border-radius: 6px 6px 6px 6px;
opacity: 0.8;
padding-left: 20px;
padding-top: 20px;
resize: none;
border: 1px solid #999999;
}
#myTextarea::placeholder {
color: #768597;
}
#myTextarea:focus {
outline: none;
}
.contactBut {
width: 140px;
border-radius: 4px 4px 4px 4px;
// position: absolute;
// bottom: 20px;
// 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 {
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
.re_tit {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 36px;
color: #4E3C3C;
margin: 0 30px;
}
.re_col {
width: 78px;
height: 3px;
background: #348CDD;
}
}
.re_list {
width: 585px;
height: 243px;
margin-top: 20px;
background: #FFFFFF;
border-radius: 8px;
.re_list_tit{
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 18px;
color: #FFA234;
}
}
</style>

337
components/AppHeader copy.vue
View File

@ -1,337 +0,0 @@
<template>
<div class="page flex-col">
<div class="group_1 flex-col" :class="[(isScrolled) && route.name != 'info-id' ? 'topfix' : '']"
@mouseenter="openmosee()" @mouseleave="checkBoxHeight()">
<div class="flex-row" :style="{justifyContent:coMobile?'space-between':'center',backgroundColor:isMobileMenuOpen?'#ffffff':'transparent',}" :class="route.name == 'info-id' ? 'box_1 box_1_info' : 'box_1'">
<img v-if="route.name != 'info-id' && !isScrolled && !isMobileMenuOpen" class="image_1" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/logo.png`" />
<img v-if="route.name != 'info-id' && isScrolled || isMobileMenuOpen" class="image_1" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/logo1.png`" />
<img v-if="route.name == 'info-id'" class="image_1" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/logo1.png`" />
<!-- Desktop Navigation -->
<div class="desktop-nav">
<div data-title="企业首页"
:class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
<NuxtLink to="/" :class="[route.path === '/' ? 'active' : '']">
企业首页
</NuxtLink>
</div>
<div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
<NuxtLink to="/proServices_con/"
:class="[route.path === '/proServices/' || route.path === '/proServices_con/' || route.path === '/proServices_con' || route.path === '/proServices' ? 'active' : '']">
产品&amp;服务
</NuxtLink>
</div>
<div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
<NuxtLink to="/aboutUs/" :class="[route.path === '/aboutUs/' || route.path === '/aboutUs' ? 'active' : '']">
灵睿&amp;我们
</NuxtLink>
</div>
<div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
<NuxtLink to="/customerReviews/"
:class="[route.path === '/customerReviews/' || route.path === '/customerReviews' ? 'active' : '']">
客户&amp;评价
</NuxtLink>
</div>
<div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
<NuxtLink to="/societyDutyNew/"
:class="[route.path === '/societyDuty/' || route.path === '/societyDuty' || route.path === '/societyDutyNew/' || route.path === '/societyDutyNew' ? 'active' : '']">
社会&amp;责任
</NuxtLink>
</div>
<div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
<NuxtLink to="/concatUs/"
:class="[route.path === '/concatUs/' || route.path === '/concatUs' ? 'active' : '']">
加入我们
</NuxtLink>
</div>
</div>
<!-- Mobile Hamburger Button -->
<div class="mobile-menu-btn" @click="toggleMobileMenu">
<div class="hamburger" :class="{ 'is-active': isMobileMenuOpen,'is-scrolled':isScrolled }">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<!-- Mobile Navigation -->
<div class="mobile-nav" v-if="isMobileMenuOpen">
<span @click="openUrl('/')" class="mobile-nav-item">企业首页</span>
<span @click="openUrl('/phone_proServices_con/')" class="mobile-nav-item">产品&amp;服务</span>
<span @click="openUrl('/aboutUs/')" class="mobile-nav-item">灵睿&amp;我们</span>
<span @click="openUrl('/customerReviews/')" class="mobile-nav-item">客户&amp;评价</span>
<span @click="openUrl('/societyDutyNew/')" class="mobile-nav-item">社会&amp;责任</span>
<span @click="openUrl('/concatUs/')" class="mobile-nav-item">加入我们</span>
</div>
</div>
<transition name="fade-scale" v-if="!coMobile">
<div v-if="scrollTop > 1000" class="back-to-top">
<img @click="openTop()" :src="`${cdnUrl}/img/get_top.png`" alt="返回顶部" />
</div>
</transition>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const cdnUrl = useCdn()
const store = useStore()
const route = useRoute()
const { locale } = useI18n()
const isMobileMenuOpen = ref(false)
const isScrolled = ref(false)
const scrollTop = ref(0);
const handleScroll = () => {
isScrolled.value = window.scrollY > 0;
scrollTop.value = window.scrollY;
}
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
onMounted(() => {
window.addEventListener('scroll', handleScroll)
// 初始化时检查一次滚动位置
handleScroll()
})
const router = useRouter()
const openUrl = (url) => {
isScrolled.value = false;
isMobileMenuOpen.value = false;
router.push(url)
}
const checkBoxHeight = () => {
if (window.scrollY == 0) {
isScrolled.value = false;
}
}
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
})
const toggleMobileMenu = () => {
isMobileMenuOpen.value = !isMobileMenuOpen.value
}
const openTop = () => {
//返回顶部
window.scrollTo(0, 0);
}
const openmosee = () => {
if(!coMobile){
isScrolled.value = true;
}
}
console.log(route)
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.group_1 {
transition: all 0.3s ease-in-out;
background-color: transparent;
}
.box_1 {
justify-content: center;
padding: 0 20px;
align-items: center;
position: relative;
transition: all 0.3s ease-in-out;
}
.topfix {
background: rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: all 0.3s ease-in-out;
transform: translateY(0);
opacity: 1;
}
.group_1:not(.topfix) {
background-color: transparent;
box-shadow: none;
transform: translateY(0);
opacity: 1;
}
.desktop-nav {
display: flex;
align-items: center;
gap: 20px;
padding-left: 150px;
@media (max-width: 768px) {
display: none;
}
}
.mobile-menu-btn {
display: none;
cursor: pointer;
@media (max-width: 768px) {
display: block;
}
}
.hamburger {
width: 30px;
height: 24px;
position: relative;
span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #ffffff;
border-radius: 3px;
transition: all 0.3s ease;
&:nth-child(1) {
top: 0;
}
&:nth-child(2) {
top: 10px;
}
&:nth-child(3) {
top: 20px;
}
}
&.is-active {
span {
background-color: #000000;
&:nth-child(1) {
transform: rotate(45deg);
top: 10px;
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
transform: rotate(-45deg);
top: 10px;
}
}
}
}
.mobile-nav {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 100;
@media (max-width: 768px) {
display: flex;
}
.mobile-nav-item {
padding: 15px 0;
border-bottom: 1px solid #eee;
cursor: pointer;
&:last-child {
border-bottom: none;
}
&:hover {
color: #666;
}
}
}
.text_black {
color: #000000;
transition: color 0.1s ease-in-out;
}
.text_black_w {
color: #ffffff;
font-weight: 600;
transition: color 0.3s ease-in-out;
}
.text_5_info {
background-color: #FC7428;
height: 90px !important;
line-height: 90px !important;
padding: 0 20px;
color: #ffffff !important;
text-align: center;
transition: all 0.3s ease-in-out;
}
.box_1_info {
height: 90px !important;
margin: 0px !important;
transition: all 0.3s ease-in-out;
}
.image_1 {
transition: all 0.3s ease-in-out;
}
.back-to-top {
position: fixed;
bottom: 20%;
right: 20px;
z-index: 1000;
img {
height: 60px;
cursor: pointer;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.1);
}
}
}
.fade-scale-enter-active,
.fade-scale-leave-active {
transition: all 0.3s ease;
}
.fade-scale-enter-from,
.fade-scale-leave-to {
opacity: 0;
transform: scale(0.8);
}
.fade-scale-enter-to,
.fade-scale-leave-from {
opacity: 1;
transform: scale(1);
}
.is-scrolled{
span{
background-color: #000000;
}
}
</style>

12
components/AppHeader.vue
View File

@ -25,7 +25,7 @@
</div>
</div>
<div class="line_h"></div>
<div class="goback">返回首页</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>
@ -34,7 +34,16 @@
</template>
<script lang="ts" setup>
import { ref,defineEmits } from 'vue'
const crrent = ref(0)
const emit = defineEmits(['crrentTop']);
const goBack = () => {
emit('crrentTop',0)
}
const gotoList = (index:number) => {
emit('crrentTop',index)
}
</script>
<style lang="scss" scoped>
@ -86,6 +95,7 @@
color: #FFFFFF;
margin-left:114px ;
margin-top: 20px;
cursor: pointer;
}
.box_1{
width: 200px;

4
components/AppHome.vue
View File

@ -48,6 +48,10 @@
</div>
</div>
</div>
<div class="flex justify-between w-full h-full">
<div class="fly"></div>
<div class="fly1"></div>
</div>
<!-- 右分享 -->
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">

2
components/AppNews.vue
View File

@ -175,7 +175,7 @@ const getNewstypeList = async () => {
.lef_box{
width: 260px;
height: 100%;
margin-top:48px;
margin-top:40px;
margin-left: 100px;
.lef_boxitem1{
width: 260px;

370
components/AppNewsdel.vue Normal file
View File

@ -0,0 +1,370 @@
<template>
<!-- PC端布局 -->
<div class="flex justify-between w-full h-full">
<!-- 左边导航栏 -->
<!-- 右边内容栏 -->
<div class="rightcon">
<div class="flex top_search">
<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">
<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 class="News_box">
<div class="lef_box">
<div class="re_box">
<div class="re_box_item">
<div class='re_mian'>青春寄语>未成年人保护法>正文</div>
<div class="re_title">团市委的主要职责</div>
<div class='flex justify-between re_rouse'>
<span>2024-07-23 10:52:00</span>
<span>来源：央视新闻客户端</span>
</div>
<div class="re_slice"></div>
<div class="re_content">
<span>一、领导全市的共青团工作。</span>
<span>二、负责全市团的组织建设，积极创新基层组织制度，协助党组织管理、选拔和培训团干部，对团校、青少年活动阵地、青少年报刊等事务进行规划和管理。</span>
<span>三、积极向党和政府反映青少年的意愿和呼声，提出意见和建议，充分发挥民主参与和民主监督作用。</span>
<span>
四、贯彻实施《河南省未成年人保护条例》，参与青少年事业发展规划和青少年工作政策的制定，积极实施希望工程，会同有关部门做好青少年权益保护和预防青少年犯罪工作，研究指导社区团的各项工作。
</span>
<span>五、调查青年思想动态和青年工作情况，研究青少年工作理论、青少年思想教育、青少年事业发展等项工作，提出相应对策，开展各种活动。</span>
<span>六、领导全市青联、学联和少先队工作，对全市性青年社团组织实行指导和管理。</span>
<span>七、协助教育部门做好大、中、小学校的教育管理工作，维护学校稳定和社会安定团结。</span>
<span>
八、会同有关部门对全市青少年外事工作实行归口管理和提供服务，负责与国外青少年团体、政府青年机构、国际地区性青年组织及其他友好团体的交流工作，负责青年对外宣传工作，负责做好青年统战对象的团结教育工作。
</span>
<span>九、围绕全市经济工作大局，组织和带领团员青年发挥生力军和突击队作用。</span>
<span>十、动员组织广大团员青年积极参与创建文明城市为主的各类创建活动。</span>
<span>十一、围绕党政工作大局，突出青年特点，完善服务内容，促进青年创业就业。</span>
<span>十二、做好党政机关团员青年效能建设工作，开展各种活动，带动机关服务质量、办事效率和执行力的进一步提高。</span>
<span>十三、承担市委交办的其他事项。</span>
</div>
</div>
</div>
</div>
<div class="rig_box">
<n-tabs :bar-width="0" type="line"
class="custom-tabs" pane-style="background-color: #ffffff;">
<n-tab-pane name="oasis" tab="热门推荐" style="padding: 30px;">
<div class="flex flex-row" v-for="item,index in remList" :key="index" style="padding-bottom:30px;">
<div class="number_t" v-if="index == 0 || index == 1 || index == 2">
{{index+1 > 10 ? index + 1 : '0'+(index+1) }}
</div>
<div class="number_t1" v-else>
<span v-if="index+1 == 6" style="color: #D70E08;">{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
<span v-else>{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
</div>
<div class="content_t2">
<p class="p1 one-line-ellipsis">{{ item.title }}</p>
<p class="p2 flex justify-between items-center">
<span>{{ item.source }}</span>
<span class="flex items-center">
<img src="/img/views.png" alt="" style="padding-right: 10px;">
{{ item.views }}
</span>
</p>
</div>
</div>
</n-tab-pane>
<n-tab-pane name="jay chou" tab="精选文章" style="padding: 30px;">
<div class="flex flex-row" v-for="item,index in jinxList" :key="index" style="padding-bottom:30px;">
<div class="number_t" v-if="index == 0 || index == 1 || index == 2">
{{index+1 > 10 ? index + 1 : '0'+(index+1) }}
</div>
<div class="number_t1" v-else>
<span v-if="index+1 == 6" style="color: #D70E08;">{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
<span v-else>{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
</div>
<div class="content_t2">
<p class="p1 one-line-ellipsis">{{ item.title }}</p>
<p class="p2 flex justify-between items-center">
<span>{{ item.source }}</span>
<span class="flex items-center">
<img src="/img/views.png" alt="" style="padding-right: 10px;">
{{ item.views }}
</span>
</p>
</div>
</div>
</n-tab-pane>
</n-tabs>
</div>
</div>
<!-- 右分享 -->
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
<img :src="`/img/index/douyin.png`" alt="">
<img :src="`/img/index/wb.png`" alt="">
<img :src="`/img/index/wx.png`" alt="">
<img :src="`/img/index/blbl.png`" alt="">
</div> -->
<!-- 底部鼠标 -->
<div style="position: absolute; bottom: 30px; right: 30px">
<img :src="`/img/index/hmouse.png`" alt="" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { NTabs,NTabPane } from 'naive-ui'
import $api from '@/service/webRequest'
const inputSearch = ref('')
const page = ref(1);
const jinxList = ref([]);
const remList = ref([]);
const getjinxList = async () => {
const res = await $api.post('/api/home.news/index',
{
limit:6,
page:page.value,
fine:1
}
)
jinxList.value = res.data.data.list;
}
const getremList = async () => {
const res = await $api.post('/api/home.news/index',
{
limit:6,
page:page.value,
hot:1
}
)
remList.value = res.data.data.list;
}
//加载中
onMounted(() => {
getjinxList();
getremList();
})
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
/* pc端样式 */
.rightcon {
width: 1920px;
height: 100%;
background-image: url('/img/xwdt.png');
background-size: 100% 100%;
.fiximg {
img {
margin-bottom: 20px;
}
}
}
.top_search {
margin-top: 50px;
height: 70px;
justify-content: space-between;
align-items: center;
}
.inputform {
position: relative;
width: 340px;
margin-right: 319px;
}
.contactInput {
width: 337px;
height: 50px;
background: #ffffff;
border-radius: 8px;
border: 1px solid #dee4e8;
padding-left: 15px;
}
.contactInput::placeholder {
color: #999999;
}
.contactInput:focus {
outline: none;
}
.search_rinput {
width: 68px;
height: 50px;
background: #e6e6e6;
border-radius: 0px 8px 8px 0px;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
.News_box {
display: flex;
justify-content: space-between;
width: 1300px;
margin: 0 auto;
.lef_box {
width: 835px;
.re_box {
width: 100%;
height: 680px;
margin: 0 auto;
margin-top: 40px;
padding-left: 100px;
.re_box_item {
width: 100%;
background: #ffffff;
border: 1px solid #eef7ff;
padding: 30px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
/* 允许换行 */
justify-content: flex-start;
/* 项目左对齐 */
.re_slice {
width: 841px;
border-bottom: 1px dashed #bbbbbb;
margin-top: 20px;
margin-bottom: 30px;
}
.re_mian {
width: 248px;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 16px;
color: #666666;
}
.re_rouse{
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 16px;
color: #999999;
width: 100%;
margin-top: 10px;
}
.re_title {
width: 100%;
font-family: Microsoft YaHei UI;
font-weight: 500;
font-size: 36px;
color: #393939;
margin-top: 10px;
}
.re_content {
width: 100%;
height: 100%;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 16px;
color: #999999;
}
}
}
}
.rig_box {
width: 439px;
height: 100%;
margin-top: 40px;
margin-left: 40px;
.custom-tabs {
.number_t{
width: 34px;
height: 34px;
background: #FFA234;
border-radius: 17px;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.number_t1{
width: 34px;
height: 34px;
background: #FFFFFF;
border-radius: 17px;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 18px;
color: #323232;
display: flex;
justify-content: center;
align-items: end;
margin-right: 20px;
}
.content_t2{
font-family: Microsoft YaHei UI;
font-weight: 400;
width: 80%;
.p1{
margin-top: 7px;
font-size: 18px;
color: #393939;
}
.p2{
margin-top: 15px;
font-size: 16px;
color: #999999;
}
}
}
:deep(.n-tabs .n-tabs-tab-wrapper){
width: 215px;
height: 72px;
background: #ffffff;
font-size: 18px;
justify-content: center;
}
:deep(.n-tabs .n-tabs-tab .n-tabs-tab__label){
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 18px;
}
:deep(.n-tabs.n-tabs--line-type .n-tabs-tab:hover, .n-tabs.n-tabs--bar-type .n-tabs-tab:hover){
color: #348CDE;
}
:deep(.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active,.n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active){
color: #348CDE;
background: #F1F8FF;
width: 100%;
display: flex;
justify-content: center;
border-top:solid 2px #378FDF;
}
:deep(.n-tabs .n-tabs-tab-pad){
width: 0;
}
}
}
</style>

6
components/AppRegiment.vue
View File

@ -174,11 +174,11 @@ const getBksList = async () => {
}
}
.re_box{
width: 1200px;
width: 1280px;
// height: 600px;
margin: 0 auto;
margin-top:40px;
padding-left: 60px;
padding-left: 80px;
display: flex;
flex-wrap: wrap; /* 允许换行 */
justify-content: flex-start; /* 项目左对齐 */
@ -186,7 +186,7 @@ const getBksList = async () => {
align-content: flex-start;
gap: 20px;
.re_box_item{
width: 350px;
width: 32%;
// height: 190px;
background: #FFFFFF;
border: 1px solid #EEF7FF;

40
pages/index.vue
View File

@ -1,8 +1,8 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 100vh;">
<AppHeader v-if="swiper_exp > 0"/>
<div class="group_666" style="position: relative;height: 100vh;overflow: hidden;">
<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" ref="AppHeader" />
<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;">
@ -30,6 +30,19 @@
<swiper-slide>
<AppRegiment></AppRegiment>
</swiper-slide>
<!-- 关于我们详情 -->
<swiper-slide>
<AppAboutdel></AppAboutdel>
</swiper-slide>
<!-- 新闻动态详情 -->
<swiper-slide>
<AppNewsdel></AppNewsdel>
</swiper-slide>
<!-- 留言板 -->
<swiper-slide>
<AppContactUs></AppContactUs>
</swiper-slide>
</swiper>
<!-- <div style="position: absolute;width: 100%;z-index: 100;">
@ -42,8 +55,9 @@
</div>
</div> -->
<!-- 右分享 -->
<div v-if="swiper_exp > 0" class="flex flex-col fiximg" style="position: absolute;top: 100px;right:36px;align-items: center;z-index: 111;" >
<img :src="`/img/qiqiu.png`" alt=""></img>
<div v-if="swiper_exp > 0" ref="targetElement" class="flex flex-col fiximg" :style="{ position: 'absolute',top: '100px',alignItems: 'center',zIndex: 111, right: rightValue }">
<img :src="`/img/qiqiu.png`" style="cursor: pointer;" @click="updateRight" alt=""></img>
<div style="position: absolute;top: 200px;">
<img class="imgs" :src="`/img/index/douyin.png`" alt="">
<img class="imgs" :src="`/img/index/wb.png`" alt="">
<img class="imgs" :src="`/img/index/wx.png`" alt="">
@ -51,6 +65,7 @@
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
@ -76,7 +91,17 @@ import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const cdnUrl = useCdn()
const { locale } = useI18n()
const { locale } = useI18n();
const rightValue = ref('-90px');
const updateRight = () => {
if(rightValue.value == '-90px'){
rightValue.value = '34px';
} else{
rightValue.value = '-90px';
}
}
let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
@ -86,6 +111,10 @@ const onSwiperNews = (swiper: any) => {
swiper_exp.value = swiper.realIndex
})
}
//跳转每页swiper的方法
const toswiper = (index: number) => {
newsSwiper.slideTo(index)
}
const swiper_exp = ref(0);
const swiperOptionsNews = {
@ -400,6 +429,7 @@ const animate = () => {
}
.fiximg{
transition: right 0.5s ease-in-out;
.imgs{
width: 63px;
margin-bottom: 20px;

BIN
public/img/views.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 701 B