210 lines
10 KiB
Vue
210 lines
10 KiB
Vue
<template>
|
||
<!-- PC端布局 -->
|
||
<div class="flex justify-between w-full h-full" >
|
||
<!-- 左边导航栏 -->
|
||
|
||
|
||
<!-- 右边内容栏 -->
|
||
<div class="rightcon">
|
||
<div class="ab_top">
|
||
<div class="ab_col"></div>
|
||
<div class="ab_tit">团市委职责</div>
|
||
<div class="ab_col"></div>
|
||
</div>
|
||
|
||
<div class="ab_con">
|
||
<div>
|
||
<img src="/img/about/cpc.png" alt="">
|
||
</div>
|
||
<div style="margin-left: 100px;">
|
||
<img src="/img/about/cpcrit.png" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ab_top" style="margin-top: 30px;">
|
||
<div class="ab_col"></div>
|
||
<div class="ab_tit">各部门职能</div>
|
||
<div class="ab_col"></div>
|
||
</div>
|
||
|
||
<div class="ab_bot" style="margin-top: 10px;">
|
||
<div class="ab_bot_item" v-for="(item, index) in bmList" :key="index" @mouseenter="mouseenters(index)" >
|
||
<div class="ab_bot_item_tit">{{item.title}}</div>
|
||
<div class="ab_bot_item_con three-line-ellipsis">{{item.content}}</div>
|
||
<div class="ab_bot_item_tel" v-if="item.abshow">
|
||
<img class="img_tl" src="/img/about/telp.png" alt="">
|
||
<div class="span_tl">电话：{{item.telnum}}</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 { ref, onMounted } from 'vue'
|
||
const bmList = ref([
|
||
{ abshow:false,title: '办公室', telnum: '63225071', content: '协调处理机关日常事务；负责团市委重要会议的会务工作；负责机关文秘、信访、保密、网络工作；负责编发内部信息、简报工作；指导全市共青团的调查研究工作；负责对外联系、机关财务、资产、行政后勤等管理工作。' },
|
||
{ abshow:false,title: '组织部', telnum: '63225070', content: '研究制定全市共青团组织、团干部和团员队伍建设的政策措施；指导推动全市团的基层组织、团员队伍和团干部队伍建设；负责团费收缴、管理和全市团的基层组织统计工作；组织开展全市性先进基层团组织和优秀团员、优秀团干部的评选表彰工作；指导推动团的基层阵地建设和基层组织信息化工作；协助党委管理县级团委的领导班子成员；协助管理在洛的团中央委员、候补委员和团省委委员、候补委员；指导全市团干部的教育培训；负责团市委机关和直属单位的人事管理、机构编制等工作；负责离退休人员的管理服务工作。' },
|
||
{ abshow:false,title: '宣传部', telnum: '63225062', content: '组织指导全市团员青年的思想道德教育和全市团组织的文化活动；加强青年理想信念教育,引导全市广大青少年践行社会主义核心价值观；指导全市团的宣传工作；指导团员青年理论学习；提供和编写团干部教育材料和团课教材；强化青少年网络思想引领工作,提升网络舆情分析和引导能力；指导青少年活动阵地建设和青少年开展健康有益的活动；负责团市委的新闻、宣传工作,抓好团的宣传队伍建设。' },
|
||
{ abshow:false,title: '青年发展部', telnum: '63225069', content: '研究制订促进全市青年发展的规划和政策措施,建立和完善青年服务体系；开展促进全市青年就业、创业、创新、创优和全市青年职业文明素养培养、技能培训提升等工作；指导洛阳市青年企业家协会、洛阳市青年农民专业合作社联合会等有关社会团体工作；组织实施对团市委定点扶贫地区的帮扶工作。' },
|
||
{ abshow:false,title: '学校部(维护青少年权益部)', telnum: '63225067', content: '组织指导全市大中专院校、中学共青团工作,了解掌握学生的思想动态,根据党的教育方针开展团的各项活动；指导青年学生开展社会实践、勤工助学和课外科技、文化活动；培养青年学生创新意识和科技创新能力,推进大学生素质教育；负责市学联的日常事务工作；指导全市少先队工作,研究少年儿童的思想品德教育,协调和配合社会有关部门调查研究,反映情况,制定政策和措施；指导少先队校外阵地建设,组织开展有利于少年儿童健康成长的文化、体育活动；负责少先队宣传工作；抓好少先队辅导员队伍建设；负责少先队洛阳市工作委员会的日常事务工作；宣传贯彻《河南省未成年人保护条例》,负责全市未成年人权益保护工作；负责预防全市青少年违法犯罪工作；研究全市有关青少年发展问题,参与制定保护青少年健康成长的法规、政策；协调处理侵害青少年权益案件；指导青少年社会化服务体系建设；指导青少年报刊工作；承担市未成年人保护委员会办公室的日常工作。' },
|
||
{ abshow:false,title: '统战联络部', telnum: '63225102', content: '负责全市青年统战工作,在各族各界青年代表人士中开展联谊和交流工作；负责市青联的日常事务及会员团体和委员的联络工作；协助管理在洛全国青联成员、省青联委员；开展青年科技人才和青年留学人员的联系服务工作；开展对台港澳地区青年及青年侨胞的统战工作；负责全市青少年外事工作,开展同国外、境外青少年组织的联络和交流活动。' },
|
||
{ abshow:false,title: '社会联络部', telnum: '63230538', content: '研究制订全市共青团、青年社会组织参与社会建设的总体规划和政策制度；开展对全市青年社会组织和新兴青年群体的联系服务和引导工作；研究制订全市青年志愿服务工作规划、意见,指导全市青年志愿服务工作；指导建设全市青少年事务社会工作专业人才队伍；协调、指导全市青少年生态环境保护工作；承担全市性青年社团组织的指导和管理工作。' },
|
||
{ abshow:false,title: '机关党总支', telnum: '63235856', content: '负责机关和直属单位的党群工作。' }
|
||
|
||
]);
|
||
const mouseenters = (index: number) => {
|
||
bmList.value.forEach((item, index) => {
|
||
item.abshow = false;
|
||
})
|
||
bmList.value[index].abshow = true;
|
||
}
|
||
onMounted(() => {
|
||
// 挂载方法
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/assets/index.scss';
|
||
|
||
|
||
/* pc端样式 */
|
||
|
||
.rightcon{
|
||
width:1920px;
|
||
height: 919px;
|
||
background-image: url('/img/about/ab_bg.png');
|
||
background-size: 100% 100%;
|
||
.fiximg{
|
||
img{
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
.ab_top{
|
||
width: 1200px;
|
||
height: 40px;
|
||
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 400px;
|
||
margin-top: 30px;
|
||
.ab_tit{
|
||
font-family: Microsoft YaHei;
|
||
font-weight: bold;
|
||
font-size: 36px;
|
||
color: #4E3C3C;
|
||
margin: 0 30px;
|
||
}
|
||
.ab_col{
|
||
width: 78px;
|
||
height: 3px;
|
||
background: #348CDD;
|
||
}
|
||
}
|
||
.ab_con{
|
||
width:1200px;
|
||
height: 350px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 30px;
|
||
margin-left: 400px;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.ab_bot{
|
||
width: 1200px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
flex-wrap: wrap;
|
||
margin-left: 400px;
|
||
.ab_bot_item{
|
||
width: 296px;
|
||
height: 180px;
|
||
margin-top: 10px;
|
||
background-image: url('/img/about/ab_bot.png');
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
|
||
.ab_bot_item_tit{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-family: Microsoft YaHei UI;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
color: #222222;
|
||
margin-top: 20px;
|
||
}
|
||
.ab_bot_item_con{
|
||
width: 224px;
|
||
height: 64px;
|
||
font-family: Microsoft YaHei UI;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
margin:0 auto;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.ab_bot_item_tel{
|
||
position: absolute;
|
||
top: 0;left: 0;
|
||
background-image: url('/img/about/ab_bots.png');
|
||
background-size: 100% 100%;
|
||
width: 296px;
|
||
height: 189px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.img_tl{
|
||
margin-top: 40px;
|
||
width: 46px;
|
||
height: 46px;
|
||
}
|
||
.span_tl{
|
||
width: 100%;
|
||
font-family: Microsoft YaHei UI;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
color: #FFFEFE;
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
&:hover{
|
||
cursor: pointer;
|
||
.ab_bot_item_tit{
|
||
color: #53A5E4;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|