tuanshiwei-web/components/AppAbout.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)
    window.open('/about_info/')
}
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;
            padding-top: 10px;
            cursor: pointer;
            p{
                margin: 10px 20px ; 
            }
        }
    }
</style>