tuanshiwei-web/components/AppAbout.vue

<template>
    <!-- PC端布局 -->
    <div class="flex justify-between w-full h-full">
        <!-- 左边导航栏 -->


        <!-- 右边内容栏 -->
        <div class="rightcon">
            <div class="flex top_search ">
                <div style="width: 350x;">
                    <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" @click="toSearch">
                        <img src="/img/index/hmsearch.png" alt="">
                    </div>
                </div>
            </div>

            <div class="News_box">
                <div class="lef_box">
                    <!-- @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 class="rig_box">
                    <div class="re_box">
                        <div style="background: #ffffff;width: 100%;display: flex;align-items: center;padding: 18px;">
                            <div>
                                <img :src="`/img/key.png`" style="width: 22px;height: 22px;">
                            </div>
                            <div style="font-size: 18px;color: #323232;margin-left: 10px;">当前位置：首页 > 关于我们 > <span
                                    style="color: #3B90DF;">{{newsListtyp.find(item => item.id == cateid)?.name
                                    }}</span></div>
                        </div>
                        <div style="background-color: #ffffff;width: 100%;padding: 18px;">
                            <div
                                style="font-weight: bold;font-size: 32px;color: #393939;text-align: center;padding: 25px 0px 25px 0;">
                                团市委的主要职责</div>
                            <div style="width: 100%;height: 3px;border-top: 1px dashed #BBBBBB;"></div>
                            <div
                                style="color: #999999;font-weight: 400;font-size: 16px;line-height: 25px;white-space: pre-line;">
                                <div v-html="ldbz"></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> -->
            <AppFooter></AppFooter>
            <!-- 底部鼠标 -->
            <div class="mouse_img">
                <img :src="`/img/index/hmouse.png`" alt="">
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineEmits } from 'vue'
import { NPagination } from 'naive-ui'
import $api from '@/service/webRequest'
import emitter from '@/plugins/emitter'
const inputSearch = ref('');
const MesList = ref([]);
const newsListtyp = ref([{ id: 1, name: '领导班子' }, { id: 2, name: '​机构职能' }, { id: 3, name: '​部门设置' }, { id: 4, name: '直属单位' }, { id: 5, name: '​下属部门' }]);
const page = ref(1);
const total = ref(0);
const cateid = ref(1);
const detailId = ref(null);

const ldbz = ref(`思想引领：筑牢青年理想信念根基​
                                ​政治引领​
                                组织青年学习党的理论、方针政策，特别是习近平新时代中国特色社会主义思想，开展主题教育活动（如“青年大学习”“青马工程”），引导青年坚定“四个自信”，增强“两个维护”的自觉性。
                                ​价值观培育​
                                弘扬社会主义核心价值观，通过榜样宣传、红色教育、网络思政等方式，引导青年树立正确的人生观、价值观。例如开展“青年五四奖章”“优秀共青团员”评选，宣传青年典型事迹。
                                ​意识形态阵地建设​
                                加强青年网络舆论引导，管理团属新媒体平台（如微信公众号、微博、短视频账号），传播正能量，抵制错误思潮，维护网络空间清朗。
                                二、组织建设：夯实团的基层基础​
                                ​团组织覆盖与规范化​
                                推动团的基层组织向新兴领域延伸（如非公企业、社会组织、互联网行业等），完善“智慧团建”系统，加强团员档案管理和组织关系转接。
                                ​团员发展与教育​
                                严格团员发展程序，优化团员结构，开展团员意识教育，落实“三会两制一课”制度，增强团组织凝聚力和战斗力。
                                ​团干部队伍建设​
                                选拔培养优秀团干部，组织专题培训、挂职锻炼，提升团干部的政治素养和业务能力，打造忠诚、干净、担当的骨干队伍。
                                三、服务青年：解决青年急难愁盼问题​
                                ​就业创业支持​
                                联合人社部门、企业开展“千校万岗”招聘会、职业技能培训；搭建青年创业孵化基地，提供政策咨询、资金扶持（如“青创贷”）。
                                ​婚恋与家庭服务​
                                举办青年联谊活动，搭建婚恋交友平台；关注青年育儿需求，推动普惠性托育服务。
                                ​心理健康与法律援助​
                                开通12355青少年服务热线，提供心理咨询、法律咨询和权益维护服务，帮助青年缓解压力、应对困境。
                                四、维护青年权益：当好青年利益代言人​
                                ​政策倡导与落实​
                                推动《中长期青年发展规划》在地方落地，参与制定青年发展相关政策，保障青年在教育、就业、住房等领域的合法权益。
                                ​权益保护机制​
                                建立青少年权益代表制度，介入校园欺凌、劳动纠纷等案件；联合公检法司部门开展“法治进校园”“模拟法庭”等活动，提升青年法律意识。
                                ​特殊群体关爱​
                                重点帮扶困境青少年（如留守儿童、残疾青年、失业青年），实施“希望工程”“阳光助学”等项目，提供物质帮扶和精神关怀。
                                五、志愿服务与社会动员​
                                ​品牌志愿服务项目​
                                组织青年参与大型赛会服务（如马拉松、博览会）、社区治理、生态环保（“河小青”护河行动）、助老助残等志愿活动。
                                ​应急响应与公益行动​
                                在自然灾害、公共卫生事件中组建青年突击队，开展物资调配、心理疏导等应急服务；发起公益募捐，支援弱势群体。
                                ​志愿服务体系建设​
                                完善志愿者注册、培训、激励机制，推广“志愿汇”平台，推动志愿服务常态化、专业化。
                                六、创新创业与人才培养​
                                ​青年创新创业扶持​
                                举办“创青春”创业大赛、青创论坛，对接风险投资和创业导师；推动高校与企业共建产学研合作平台。
                                ​技能提升与职业发展​
                                开展“青年岗位能手”评选、职业技能竞赛，组织青年参与“工匠精神”培育计划，助力青年职业成长。
                                ​青年人才引进与留用​
                                配合地方人才政策，吸引高校毕业生返乡就业；为高层次青年人才提供政策咨询、生活保障等配套服务。
                                七、对外交流与协同合作​
                                ​青年交流项目​
                                组织与国内外青年团体的互访活动（如“国际青年领袖对话”），促进文化交流与经验共享。
                                ​区域协同与资源整合​
                                联动工会、妇联、科协等群团组织，整合社会资源服务青年；与高校、企业共建实践基地。
                                ​港澳台青年工作​
                                开展港澳台青年夏令营、实习计划，增进国家认同，推动融合发展。
                                八、桥梁纽带作用：传达青年声音​
                                ​青年诉求调研与反馈​
                                定期开展青年发展状况调查，形成报告提交党委政府，推动青年关切问题纳入政策议程。
                                ​参政议政渠道建设​
                                推荐优秀青年担任人大代表、政协委员，组织“共青团与人大代表、政协委员面对面”活动，畅通青年政治参与渠道。

                                　　巴黎奥运赛场上，我国体育健儿奋勇争先，取得境外参赛最好成绩，彰显了青年一代的昂扬向上、自信阳光。海军、空军喜庆75岁生日，人民子弟兵展现新风貌。面对洪涝、台风等自然灾害，广大党员干部冲锋在前，大家众志成城、守望相助。无数劳动者、建设者、创业者，都在为梦想拼搏。我为国家勋章和国家荣誉称号获得者颁奖，光荣属于他们，也属于每一个挺膺担当的奋斗者。

                                　　当今世界变乱交织，中国作为负责任大国，积极推动全球治理变革，深化全球南方团结合作。我们推进高质量共建“一带一路”走深走实，成功举办中非合作论坛北京峰会，在上合、金砖、亚太经合组织、二十国集团等双边多边场合，鲜明提出中国主张，为维护世界和平稳定注入更多正能量。

                                　　我们隆重庆祝新中国成立75周年，深情回望共和国的沧桑巨变。从五千多年中华文明的传承中一路走来，“中国”二字镌刻在“何尊”底部，更铭刻在每个华夏儿女心中。党的二十届三中全会胜利召开，吹响进一步全面深化改革的号角。我们乘着改革开放的时代大潮阔步前行，中国式现代化必将在改革开放中开辟更加广阔的前景。

                                　　2025年，我们将全面完成“十四五”规划。要实施更加积极有为的政策，聚精会神抓好高质量发展，推动高水平科技自立自强，保持经济社会发展良好势头。当前经济运行面临一些新情况，有外部环境不确定性的挑战，有新旧动能转换的压力，但这些经过努力是可以克服的。我们从来都是在风雨洗礼中成长、在历经考验中壮大，大家要充满信心。

                                　　家事国事天下事，让人民过上幸福生活是头等大事。家家户户都盼着孩子能有好的教育，老人能有好的养老服务，年轻人能有更多发展机会。这些朴实的愿望，就是对美好生活的向往。我们要一起努力，不断提升社会建设和治理水平，持续营造和谐包容的氛围，把老百姓身边的大事小情解决好，让大家笑容更多、心里更暖。

                                　　在澳门回归祖国25周年之际，我再到濠江之畔，新发展新变化令人欣喜。我们将坚定不移贯彻“一国两制”方针，保持香港、澳门长期繁荣稳定。两岸同胞一家亲，谁也无法割断我们的血脉亲情，谁也不能阻挡祖国统一的历史大势！

                                　　世界百年变局加速演进，需要以宽广胸襟超越隔阂冲突，以博大情怀关照人类命运。中国愿同各国一道，做友好合作的践行者、文明互鉴的推动者、构建人类命运共同体的参与者，共同开创世界的美好未来。

                                　　梦虽遥，追则能达；愿虽艰，持则可圆。中国式现代化的新征程上，每一个人都是主角，每一份付出都弥足珍贵，每一束光芒都熠熠生辉。

                                　　河山添锦绣，星光映万家。让我们满怀希望，迎接新的一年。祝祖国时和岁丰、繁荣昌盛！祝大家所愿皆所成，多喜乐、长安宁。`)

// 信息公开
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',
        {
            cate_id: cateid.value,
            limit: 7,
            page: page.value,
            isnews: 1
        }
    )
    total.value = res.data.data.count;
    MesList.value = res.data.data.list;
}
const getNewstypeList = async () => {
    const res = await $api.get('/api/home.news/cate?isnews=1')
    newsListtyp.value = res.data.data.list;
}
</script>

<style lang="scss" scoped>
@import '@/assets/index.scss';


/* pc端样式 */

.rightcon {
    width: 100%;
    height: 100%;
    background-image: url('/img/index/rightcons.png');
    background-size: 100% 100%;
    overflow-y: auto;

    .fiximg {
        img {
            margin-bottom: 20px;
        }
    }
}

.top_search {
    margin-top: 50px;
    height: 70px;
    justify-content: space-between;
    align-items: center;
    margin-left: 415px;
    width: 1200px;
}

.inputform {
    position: relative;
    width: 340px;
}

.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: #338CDE;
    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;
    gap: 20px;

    .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;

            // cursor: pointer;
            .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;

            }

            &.active {
                background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
                color: #3A91DF;
            }
        }
    }

    .rig_box {
        .re_box {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            margin-top: 40px;
            // padding-left: 60px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: flex-start;
            gap: 10px;

            .re_box_item {
                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;

                .re_title {
                    // width: 640px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #323232;
                    display: flex;
                    align-items: center;

                    .dian {
                        width: 10px;
                        height: 10px;
                        background: #3B90DF;
                        border-radius: 50%;
                        margin-right: 15px;
                    }
                }

                .re_date {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #368BDB;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .shu {
                        background: #EEEEEE;
                        width: 1px;
                        height: 50px;
                        margin-right: 20px;
                    }

                    .right_tex {
                        display: flex;
                        flex-direction: column;
                        width: 80px;
                        text-align: center;

                        .span1 {
                            width: 100%;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 22px;
                            color: #378EDF;
                        }

                        .span2 {
                            width: 100%;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 16px;
                            color: #378EDF;
                        }
                    }
                }

                &:hover {
                    background-image: url('/img/message/listbg.png');
                    background-size: 100% 100%;
                    cursor: pointer;

                    .re_date {
                        .shu {
                            background: #FFFFFF;
                        }
                    }
                }
            }
        }

        .pages_tsw {
            :deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active) {
                color: #ffffff;
                background-color: #388FDF;
                border: 1px solid #388FDF;
            }

            :deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button) {
                color: #999999;
            }

            :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;
                background: #FFFFFF;
            }

            :deep(.n-pagination-quick-jumper) {
                &:after {
                    content: '页'
                }
            }
        }
    }
}

@media (max-width: 1440px) {
    .top_search {
        width: 920px;
        margin-left: 373px;
        
    }
    .News_box{
        width: 1032px;
        margin-left: 270px;
    }
    .rig_box{
        width: 700px;
    }
}
</style>