CQ_JD
/
nazw


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人才服务</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- jquery-->
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/urljson.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            font-family: Microsoft YaHei;
            height: 100%;
            background: #EDF5FF;
        }

        @font-face {
            font-family: 'DOUYU';
            src: url('fonts/DOUYUFONT-2.OTF');
            font-weight: normal;
            font-style: normal;
        }

        .dqfw>.top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #B7C7DC;
            background: #FFFFFF;
        }

        .toplogo {
            display: flex;
            align-items: center;
            font-family: DOUYU;
            font-weight: normal;
            font-size: 30px;
            color: #186FF0;
            height: 66px;
            cursor: pointer;
        }

        .toplogo img {
            margin: 0 20px;
            margin-bottom: 17px;
        }

        .backbutton {
            width: 117px;
            height: 42px;
            background: #DEEDFF;
            border-radius: 10px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #2474F1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            cursor: pointer;
        }

        .backbutton img {
            margin-right: 10px;
        }

        .container {
            display: flex;
            justify-content: space-between;
            min-width: 1300px;
            min-height: calc(100vh - 67px);
            padding: 15px;
            box-sizing: border-box;
        }

        .container>.left,
        .container>.right {
            width: 48%;
        }

        .title {
            height: 60px;
            background: #4B98F6;
            border-radius: 10px;
            font-family: DOUYU;
            font-weight: normal;
            font-size: 26px;
            color: #FEFEFE;
            line-height: 70px;
            text-align: center;
        }

        .container .list {
            width: 93%;
            margin: 10px auto;
            padding: 20px;
            background: #FFFFFF;
            border-radius: 10px;
            color: #333333;
        }

        .list .name {
            font-size: 20px;
            color: #333333;
            font-weight: bold;
            margin-bottom: 9px;
        }

        .list .content {
            text-indent: 40px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }

        .list .gly {
            display: flex;
            color: #999999;
            align-items: center;
            margin-top: 20px;
        }

        .list .line {
            width: 1px;
            height: 16px;
            background: #999;
            display: block;
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <div class="dqfw" id="dqfw">
        <div class="top">
            <div class="toplogo">
                <img src="images/gyylogo.png" alt="">
                <span>人才服务</span>
            </div>
            <div class="backbutton" @click="window.history.go(-1)">
                <img src="images/back1.png" alt="">
                <span>返回</span>
            </div>
        </div>
        <div class="container">
            <div class="left">
                <div class="title">江南菁英人才政策</div>
                <div class="list" v-for="(item,index) in jnjyrczph">
                    <div class="name">{{item.name}}</div>
                    <div class="content">{{item.content}}</div>
                    <div class="gly"><span>{{item.person}}</span><span class="line"></span><span>{{item.time}}</span>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title" style="background: #4BB664;">招聘会</div>
                <div class="list" v-for="(item,index) in zph">
                    <div class="name">{{item.name}}</div>
                    <div class="content">{{item.content}}</div>
                    <div class="gly"><span>{{item.person}}</span><span class="line"></span><span>{{item.time}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    // 初始化Vue实例
    new Vue({
        el: '#dqfw',
        data: function () {
            return {
                jnjyrczph: [
                    {
                        id: 1,
                        name: '解读《百万高校毕业生等青年留渝来渝就业创业行动计划》',
                        content: '4月17日，市政府新闻办召开“机遇重庆”系列主题新闻发布会(第五场)百万高校些业生等青年留渝来渝就业创业行动新闻发布会。近日，我市出台《百万高校些业生等青年留渝来渝就业创业行动计划》 (以下简称《行动计划》)。... ',
                        time: '2024-04-18 10:36:58',
                        person: '管理员'
                    },
                    {
                        id: 2,
                        name: '@青年人 重庆十五条举措邀你留渝来渝就业创业',
                        content: '4月17日，市政府新闻办召开“机遇重庆”系列主题新闻发布会(第五场)百万高校些业生等青年留渝来渝就业创业行动新闻发布会。近日，我市出台《百万高校些业生等青年留渝来渝就业创业行动计划》 (以下简称《行动计划》)。... ',
                        time: '2024-04-18 10:36:58',
                        person: '管理员'
                    },
                    {
                        id: 3,
                        name: '重庆市人民政府办公厅关于印发《百万高校毕业生等青年留渝来渝就业创业行动计划 (2024 2027年) 》的通知',
                        content: '4月17日，市政府新闻办召开“机遇重庆”系列主题新闻发布会(第五场)百万高校些业生等青年留渝来渝就业创业行动新闻发布会。近日，我市出台《百万高校些业生等青年留渝来渝就业创业行动计划》 (以下简称《行动计划》)。... ',
                        time: '2024-04-18 10:36:58',
                        person: '管理员'
                    }
                ],
                zph: [
                    {
                        id: 1,
                        name: '重庆小易智联智能技术有限公司招聘信息',
                        content: '',
                        time: '2024-04-18 10:36:58',
                        person: '管理员'
                    },
                    {
                        id: 2,
                        name: '招商交科2024春季校园招聘',
                        content: '',
                        time: '2024-04-18 10:36:58',
                        person: '管理员'
                    },
                    {
                        id: 3,
                        name: '中移物联2024春季校园招聘',
                        content: '中移物联网有限公司校园招聘(zhaopincom)',
                        time: '2024-04-18 10:36:58',
                        person: '管理员'
                    }
                ]
            };
        },
        methods: {
        },
        mounted() {
        }
    });
</script>

</html>