306 lines
15 KiB
Vue
306 lines
15 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;">
|
||
<swiper class="w-[667px] h-[340px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
|
||
<swiper-slide v-for="(item,index) in listImg" :key="index" @click="gotoDetail(7)">
|
||
<div class="img_tits">
|
||
<p>{{item.title1 }}</p>
|
||
<p>{{item.title2 }}</p>
|
||
<p>{{item.title3 }}</p>
|
||
<p>{{item.title4 }}</p>
|
||
<p v-if="item.title5">{{item.title5 }}</p>
|
||
</div>
|
||
<img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
|
||
</swiper-slide>
|
||
</swiper>
|
||
</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)" @click="gotoDetail(7)">
|
||
<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 { Swiper, SwiperSlide } from 'swiper/vue'
|
||
import { ref, onMounted, defineEmits } from 'vue'
|
||
import 'swiper/css'
|
||
import 'swiper/css/autoplay'
|
||
import "swiper/css/pagination";
|
||
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectCube, Mousewheel } from "swiper/modules";
|
||
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 listImg = ref([
|
||
{
|
||
title1: '一、领导全市的共青团工作。',
|
||
title2: '二、负责全市团的组织建设，积极创新基层组织制度，协助党组织管理、选拔和培训团干部，对团校、青少年活动阵地、青少年报刊等事务进行规划和管理。',
|
||
title3: '三、积极向党和政府反映青少年的意愿和呼声，提出意见和建议，充分发挥民主参与和民主监督作用。',
|
||
title4: '四、贯彻实施《河南省未成年人保护条例》，参与青少年事业发展规划和青少年工作政策的制定，积极实施希望工程，会同有关部门做好青少年权益保护和预防青少年犯罪工作，研究指导社区团的各项工作。',
|
||
image: '/img/about/cpcrit.png'
|
||
},
|
||
{
|
||
title1: '五、调查青年思想动态和青年工作情况，研究青少年工作理论、青少年思想教育、青少年事业发展等项工作，提出相应对策，开展各种活动。',
|
||
title2: '六、领导全市青联、学联和少先队工作，对全市性青年社团组织实行指导和管理。',
|
||
title3: '七、协助教育部门做好大、中、小学校的教育管理工作，维护学校稳定和社会安定团结。',
|
||
title4: '八、会同有关部门对全市青少年外事工作实行归口管理和提供服务，负责与国外青少年团体、政府青年机构、国际地区性青年组织及其他友好团体的交流工作，负责青年对外宣传工作，负责做好青年统战对象的团结教育工作。',
|
||
image: '/img/about/cpcrit1.png'
|
||
},
|
||
{
|
||
title1: '九、围绕全市经济工作大局，组织和带领团员青年发挥生力军和突击队作用。',
|
||
title2: '十、动员组织广大团员青年积极参与创建文明城市为主的各类创建活动。',
|
||
title3: '十一、围绕党政工作大局，突出青年特点，完善服务内容，促进青年创业就业。',
|
||
title4: '十二、做好党政机关团员青年效能建设工作，开展各种活动，带动机关服务质量、办事效率和执行力的进一步提高。',
|
||
title5: '十三、承担市委交办的其他事项。',
|
||
image: '/img/about/cpcrit2.png'
|
||
}
|
||
])
|
||
const mouseenters = (index: number) => {
|
||
bmList.value.forEach((item, index) => {
|
||
item.abshow = false;
|
||
})
|
||
bmList.value[index].abshow = true;
|
||
}
|
||
const swiperOptionsimgs = {
|
||
autoplay: {
|
||
delay: 5000,
|
||
disableOnInteraction: false,
|
||
},
|
||
direction: 'horizontal',
|
||
slidesPerView: 3,
|
||
speed: 500,
|
||
effect: 'coverflow',
|
||
loop: true,
|
||
modules: [Autoplay,EffectCoverflow],
|
||
centeredSlides: true,
|
||
spaceBetween: "-60%",
|
||
coverflowEffect: {
|
||
rotate: 0,
|
||
stretch: 100,
|
||
depth: 800,
|
||
modifier: 1,
|
||
slideShadows : false
|
||
},
|
||
// observer: true,
|
||
// ovserveParent: false,
|
||
// pagination: {
|
||
// el:'.swiper-pagination'
|
||
// },
|
||
}
|
||
let newsSwiper: any = null
|
||
const onSwiperImgs = (swiper: any) => {
|
||
newsSwiper = swiper
|
||
// swiper.on('slideChange', () => {
|
||
// // 更新当前活动幻灯片索引
|
||
|
||
// })
|
||
}
|
||
const emit = defineEmits(['toSwpe'])
|
||
//跳转详情
|
||
const gotoDetail = (id: number) => {
|
||
// localStorage.setItem('detailId', detailId.value);
|
||
emit('toSwpe',id)
|
||
}
|
||
onMounted(() => {
|
||
// 挂载方法
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/assets/index.scss';
|
||
|
||
|
||
/* pc端样式 */
|
||
|
||
.rightcon{
|
||
width:100%;
|
||
height:100%;
|
||
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;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.swiper{
|
||
.img_tits{
|
||
font-family: Microsoft YaHei;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
padding-left: 30px;
|
||
cursor: pointer;
|
||
p{
|
||
margin: 20px 30px ;
|
||
}
|
||
}
|
||
}
|
||
</style>
|