master

分支 (1)

管理

管理

master

kcg_website
/
person.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="gya">
    <title>空创格科技 - 专业优质的企业服务商</title>
    <link href="css/normalize.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/public.css" />
    <link rel="stylesheet" type="text/css" href="css/person.css" />
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="bookmark" href="favicon.ico">
    <script src="js/jquery.min.js"></script>
    <script src="js/api.js"></script>
</head>

<body>
    <!--[if lte IE9]>
<p>你的浏览器版本过于老旧，请点击<a href="https://browsehappy.com/">这里</a>更新，以获取最佳体验。</p>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
    <!-- 导航 -->
    <header class="nav">
        <div id="logo">
            <a href="index.html"><img src="img/logo2.png" class="logoImg"></a>
        </div>
        <h1 class="comName"><a href="index.html">江门市空创格科技有限公司</a></h1>
        <div class="navOpen lg-hidden table-hidden pc-hidden"></div>
        <ul class="navList">
            <div class="navClose lg-hidden table-hidden pc-hidden">×</div>
            <li><a href="index.html">首页</a></li>
            <li><a href="about.html">关于空创格</a></li>
            <li class="openBusinessNav"><a href="#">业务范围<span class="star"></span></a></li>
            <ul class="businessNav" id="businessNav"></ul>
            <li><a href="case.html">案例展示</a></li>
            <li><a href="news.html">行业动态</a></li>
            <li class="active"><a href="person.html">人才计划</a></li>
            <li><a href="contact.html">联系我们</a></li>
        </ul>
    </header>
    <!-- banner -->
    <div class="banner">
        <picture>
            <source media="(max-width:375px)" srcset="img/personBanner_phone.png">
            <img src="img/personBanner.png" alt="banner">
        </picture>
    </div>

    <div class="personContainer">
        <h1 class="title-1">招聘岗位</h1>
        <hr class="title-1-underLine" />
        <div class="person-postList swiper-container">
            <!-- 导航按钮 -->
            <div class="swiper-button-next">›</div>
            <div class="swiper-button-prev">‹</div>
            <div class="swiper-wrapper" id="personList">

            </div>
        </div>
        <!-- todo 职位卡片列表 -->
        <div id="personItem"></div>
    </div>

    <!-- 底部 -->
    <footer>
        <div class="footer-nav lg-hidden pc-hidden table-hidden">
            <ul class="footer-navList">
                <li class="footer-navItem"><a href="">业务范围<span class="fnr rotate1">></span></a>
                    <ul class="footer-sonList hidden" id="phoneNav-business">

                    </ul>
                </li>
                <li class="footer-navItem"><a href="case.html">案例展示<span class="fnr rotate1">></span></a>
                    <ul class="footer-sonList hidden" id="phoneNav-case">

                    </ul>
                </li>
                <li class="footer-navItem"><a href="">关于空创格<span class="fnr rotate1">></span></a>
                    <ul class="footer-sonList hidden" id="phoneNav-about">

                    </ul>
                </li>
                <li class="footer-navItem"><a href="">行业动态<span class="fnr rotate1">></span></a>
                    <ul class="footer-sonList hidden" id="phoneNav-news">

                    </ul>
                </li>
                <li class="footer-navItem"><a href="">人才计划<span class="fnr rotate1">></span></a>
                    <ul class="footer-sonList hidden" id="phoneNav-person">

                    </ul>
                </li>
                <li class="footer-navItem"><a href="">联系我们<span class="fnr rotate1">></span></a>
                    <ul class="footer-sonList hidden">
                        <li><a href="contact.html">联系我们</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <ul class="footer-menu footer-PC-nav">
            <ul class="footer-menuList phone-hidden" id="footer-pc-business"></ul>
            <ul class="footer-menuList phone-hidden" id="footer-pc-case"></ul>
            <ul class="footer-menuList phone-hidden" id="footer-pc-about"></ul>
            <ul class="footer-menuList phone-hidden" id="footer-pc-news"></ul>
            <ul class="footer-menuList phone-hidden" id="footer-pc-person"></ul>
            <ul class="footer-menuList" id="footer-lastMenu">
                <li class="footer-title phone-hidden">联系我们</li>
                <li class="footerNavLine phone-hidden"></li>
                <li class="footer-contact">
                    <img src="img/icon23.png" alt="联系地址" class="footer-Icon">
                    联系地址：<span id="footer-pc-comName"></span>
                </li>
                <li class="footer-contact">
                    <span style="display: inline-block;width: 18%;"></span>
                    <span class="footer-pc-comName">广州市越秀区水荫二横路新达城广场南座2707</span>
                </li>
                <li class="footer-contact">
                    <img src="img/icon24.png" alt="联系电话" class="footer-Icon">
                    联系电话：<span id="footer-pc-phone"></span>
                </li>
                <li class="footer-contact" id="footer-RQ"></li>
            </ul>
        </ul>
        <hr>
        <div class="copyMessage">
            <span class="phone-hidden">版权所有：</span>
            <div class="phone-hidden bottomComName">
                <div>江门市空创格科技有限公司</div>
                <div>广州市加壹软件科技有限公司</div>
            </div>
            <span class="phone-hidden">Copyright&copy;</span>
            <span class="footer-serverTel phone-hidden">2017-2020</span>
            <span class="footer-keepOnRecord"><a
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44070402440896" target="_blank">
                    <img src="img/guohui.png" alt="guohui" class="guohui">
                    粤公网安备 44070402440896号</a></span>
            <span class="footer-keepOnRecord"><a href="http://www.beian.miit.gov.cn"
                    target="_blank">粤ICP备18002115号</a></span>
            <!-- <a href="http://new.cnzz.com/v1/login.php?siteid=1278040824" target="_blank"><img src="img/cnzz.gif"
          alt="cnzz"></a> -->
            <!-- <a href="JavaScript:;"><img src="img/guohui.png" alt="guohui"></a> -->
            <!-- 站长统计 -->
            <script type="text/javascript">
                var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");
                document.write(unescape("%3Cspan id='cnzz_stat_icon_1278040824'%3E%3C/span%3E%3Cscript src='" +
                    cnzz_protocol +
                    "s9.cnzz.com/z_stat.php%3Fid%3D1278040824%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"
                ));
            </script>
        </div>
    </footer>

    <script type="text/javascript" src="js/pageTurning.js"></script>
    <script src="js/swiper.min.js"></script>
    <script>
        $(function () {
            // 人才计划-导航分类
            let c = [];
            let personListUrl = "https://www.kcgeis.com/api/tPosition/list";
            $.ajax({
                async: false,
                type: 'GET',
                url: personListUrl,
                dataType: "json",
                success: function (response) {
                    c = response.data;
                    let data = response.data;
                    let personList = "";
                    let personItem = "";
                    $.each(data, function (index, obj) {

                        personList +=
                            `<div class="swiper-slide page${obj.id}" onclick="clickPersonList(${obj.id})">
                <div class="person-postIcon bs80 pi${obj.id}"></div>
                <p class="person-job">${obj.title}</p>
                <p class="person-money">${obj.salary}</p>
              </div>`

                        $('#personList').html(personList);
                        $('person-postIcon pi1').css("background-image", "url(aaa)");
                        personItem =
                            `<div class="person-postItem active" id="page${obj.id}">
                <div class="person-postDuty">
                  <h1 class="person-dutyTitle">职位职责</h1>
                  <span class="person-dutyText">${obj.description}</span>
                </div>
                <div class="verticalLine"></div>
                <div class="person-qualifications">
                  <h1 class="person-dutyTitle">任职资格</h1>
                  <span class="person-dutyText">${obj.descriptionss}</span>
                </div>
              </div>`


                        $('#personItem').html(personItem);
                    })
                    $('#personItem #page1').show();
                    // 实行轮播初始化
                    setTimeout(() => {
                        var mySwiper = new Swiper('.swiper-container', {
                            loop: false, // 循环模式选项
                            autoplay: {
                                delay: 3000
                            },
                            observer: true,
                            observerParents: true,
                            observeSlideChildren: true,
                            slidesPerView: 4,

                            // 如果需要前进后退按钮
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                            },
                        })
                    }, 100)

                }
            })

            for (let i = 0; i < c.length; i++) {


                $('.pi' + (c[i].id)).css("background-image", "url(" +
                    c[i].pic + ")")

                $('.page' + (c[i].id)).hover(function () {
                    $('.pi' + (c[i].id)).css("background-image", "url(" +
                        c[i].newPic + ")");
                }, function () {
                    $('.pi' + (c[i].id)).css("background-image", "url(" +
                        c[i].pic + ")")
                });
            }


            $('.navOpen').click(function () {
                $(this).hide();
                $('.navList').show();
            });
            $('.navClose').click(function () {
                $(this).parent('.navList').hide();
                $('.navOpen').show();
            });
            $('.openBusinessNav').click(function () {
                $('#businessNav').toggle();
            });

            $('.footer-navItem').click(function () {
                if ($(this).children('.footer-sonList').hasClass('hidden')) {
                    $(this).children('.footer-sonList').addClass('active').removeClass('hidden');
                    $(this).find('.fnr').addClass('rotate').removeClass('rotate1');
                } else if ($(this).children('.footer-sonList').hasClass('active')) {
                    $(this).children('.footer-sonList').addClass('hidden').removeClass('active');
                    $(this).find('.fnr').addClass('rotate1').removeClass('rotate');
                }
                $(this).siblings('.footer-navItem').children('.footer-sonList').addClass('hidden')
                    .removeClass(
                        'active');
                $(this).siblings('.footer-navItem').find('.fnr').addClass('rotate1').removeClass(
                    'rotate');
            });
        })
    </script>
</body>

</html>