首页

src/main/resources/templates/www/tuiyijunren/index.html

@@ -1,7 +1,32 @@
 <!--头部开始-->
 @includeFileTemplate("/www/tuiyijunren/include/header-index.html"){}
 <!--头部结束-->
-
+<script>
+    function renderContent(title,pay,salary_treatment,address,experience_and_education,url,content_tag,id,tag) {
+        if(content_tag === tag){
+            let html = '<div class="yzgw_list_div" aos="fade-up" >';
+            html += '<h1>'+title+'<b>'+pay+'</b></h1>';
+            html += '<h4>';
+            html += renderSalaryTreatment(salary_treatment);
+            html += '</h4>';
+            html += '<p><span class="address">'+address+'</span>'+renderExperienceAndEducation(experience_and_education)+'</p>';
+            html += '<a class="zp_more" href="'+url+'">查看详细</a>';
+            html += '</div>';
+            $("#"+id).append(html);
+        }
+    }
+    function renderSalaryTreatment(salaryTreatment) {
+        let html = "";
+        let arr = salaryTreatment.split("/");
+        for (let i = 0; i < arr.length; i++) {
+            html += "<span>"+arr[i]+"</span>";
+        }
+        return html;
+    }
+    function renderExperienceAndEducation(experienceAndEducation) {
+        return "&nbsp;&nbsp"+experienceAndEducation.replaceAll("/","&nbsp;&nbsp;");
+    }
+</script>
 <!--中间内容开始-->
 <div class="content wid1200">
     <!--	图片轮播 开始-->
@@ -257,40 +282,44 @@
             <h1>优质岗位展示</h1>
             <span>-坚持追求卓越&nbsp;&nbsp;成就职业巅峰-</span>
         </div>
-        <div class="yzgw_list clearfix">
+        <div class="yzgw_list clearfix" id="it">
             <#cms_content_list siteId="${site.siteId}" categoryId="1223" orderBy="2" isHot="0" hasChild="0" isRecommend="0" size="6" titleLen="10" var="bean">
-                <a class="yzgw_list_div" aos="fade-up" href="${bean.url!}">
-                    <h1>
-                        <span style="overflow:hidden !important;
-                                    text-overflow: ellipsis !important;
-                                    -webkit-line-clamp: 1 !important;
-                                    display: inline !important;
-                                    -webkit-box-orient: vertical !important;">${bean.title!}</span>
-                        <!--<b>5K-8K</b>-->
-                        <b style="overflow:hidden !important;
-                                    text-overflow: ellipsis !important;
-                                    -webkit-line-clamp: 1 !important;
-                                    display: inline !important;
-                                    -webkit-box-orient: vertical !important;">${bean.pay}</b>
-                    </h1>
-                    <!--<h4><span class="address">长春-南关</span><span>五险一金</span><span>周末双休</span></h4>-->
-                    <h4><span class="address" style="height: 40px !important;
-                                    overflow:hidden !important;
-                                    text-overflow: ellipsis !important;
-                                    -webkit-line-clamp: 1 !important;
-                                    display: -webkit-box !important;
-                                    -webkit-box-orient: vertical !important;">${bean.salary_treatment!}</span></h4>
-                    <!--<h4><span class="address">长春-南关 五险一金 周末双休</span></h4>-->
-                    <!--<h5>长春动画学院</h5>-->
-                    <h5>${bean.address} ${bean.experience_and_education}</h5>
-                    <!--<p>民营教育企业&nbsp;&nbsp;|&nbsp;&nbsp;20-99人</p>-->
-<!--                    <p style="height: 20px !important;-->
-<!--                        overflow:hidden !important;-->
-<!--                        text-overflow: ellipsis !important;-->
-<!--                        -webkit-line-clamp: 1 !important;-->
-<!--                        display: -webkit-box !important;-->
-<!--                        -webkit-box-orient: vertical !important;">${bean.experience_and_education!}</p>-->
-                </a>
+            <script>
+                renderContent("${bean.title!}","${bean.pay!}","${bean.salary_treatment!}","${bean.address!}",
+                    "${bean.experience_and_education!}","${bean.url}","${bean.tag}","it","IT/互联网服务业");
+            </script>
+                <!--<a class="yzgw_list_div" aos="fade-up" href="${bean.url!}">-->
+                    <!--<h1>-->
+                        <!--<span style="overflow:hidden !important;-->
+                                    <!--text-overflow: ellipsis !important;-->
+                                    <!-- -webkit-line-clamp: 1 !important;-->
+                                    <!--display: inline !important;-->
+                                    <!-- -webkit-box-orient: vertical !important;">${bean.title!}</span>-->
+                        <!--&lt;!&ndash;<b>5K-8K</b>&ndash;&gt;-->
+                        <!--<b style="overflow:hidden !important;-->
+                                    <!--text-overflow: ellipsis !important;-->
+                                    <!-- -webkit-line-clamp: 1 !important;-->
+                                    <!--display: inline !important;-->
+                                    <!-- -webkit-box-orient: vertical !important;">${bean.pay}</b>-->
+                    <!--</h1>-->
+                    <!--&lt;!&ndash;<h4><span class="address">长春-南关</span><span>五险一金</span><span>周末双休</span></h4>&ndash;&gt;-->
+                    <!--<h4><span class="address" style="height: 40px !important;-->
+                                    <!--overflow:hidden !important;-->
+                                    <!--text-overflow: ellipsis !important;-->
+                                    <!-- -webkit-line-clamp: 1 !important;-->
+                                    <!--display: -webkit-box !important;-->
+                                    <!-- -webkit-box-orient: vertical !important;">${bean.salary_treatment!}</span></h4>-->
+                    <!--&lt;!&ndash;<h4><span class="address">长春-南关 五险一金 周末双休</span></h4>&ndash;&gt;-->
+                    <!--&lt;!&ndash;<h5>长春动画学院</h5>&ndash;&gt;-->
+                    <!--<h5>${bean.address} ${bean.experience_and_education}</h5>-->
+                    <!--&lt;!&ndash;<p>民营教育企业&nbsp;&nbsp;|&nbsp;&nbsp;20-99人</p>&ndash;&gt;-->
+<!--&lt;!&ndash;                    <p style="height: 20px !important;&ndash;&gt;-->
+<!--&lt;!&ndash;                        overflow:hidden !important;&ndash;&gt;-->
+<!--&lt;!&ndash;                        text-overflow: ellipsis !important;&ndash;&gt;-->
+<!--&lt;!&ndash;                        -webkit-line-clamp: 1 !important;&ndash;&gt;-->
+<!--&lt;!&ndash;                        display: -webkit-box !important;&ndash;&gt;-->
+<!--&lt;!&ndash;                        -webkit-box-orient: vertical !important;">${bean.experience_and_education!}</p>&ndash;&gt;-->
+                <!--</a>-->
 
                 <!--<li aos="fade-up" aos-duration="500">-->
                     <!--<img src="${bean.thumb!}" alt="${bean.title!}"/>-->
@@ -535,4 +564,189 @@
     })
 </script>
 </body>
+<style>
+    /*岗位列表*/
+    .yzgw_list_div{
+        width: 28%!important;
+        margin: 1%!important;
+        background: #fcfffc!important;
+        padding: 15px!important;
+        box-shadow: 0px 0px 8px #eee!important;
+        float: left!important;
+        display: block!important;
+        border-radius: 5px!important;
+    }
+    .yzgw_list_div:hover{
+        box-shadow: 0px 0px 8px #609f70!important;
+    }
+    .yzgw_list_div h1{
+        font-size: 20px!important;
+        height: 30px!important;
+        line-height: 30px!important;
+        font-weight: 900!important;
+        margin-bottom: 5px!important;
+    }
+    .yzgw_list_div h1 b{
+        font-size: 20px!important;
+        height: 30px!important;
+        line-height: 30px!important;
+        color: #ffb604!important;
+        float: right!important;
+    }
+    .yzgw_list_div h4 span{
+        font-size: 16px!important;
+        height: 40px!important;
+        line-height: 40px!important;
+        color: #555!important;
+        margin-right: 15px!important;
+    }
+    .yzgw_list_div h4 span.address{
+        padding-left: 16px!important;
+        background: url(twjr_icon8.png) no-repeat left center!important;
+    }
+    .yzgw_list_div h5{
+        border-top:1px solid #d4d4d4!important;
+        height: 40px!important;
+        line-height: 40px!important;
+    }
+    .yzgw_list_div p{
+        font-size: 14px!important;
+        color: #666666!important;
+    }
+    /*优质岗位*/
+    .er_right .yzgw_list{
+        width:967px!important;
+        margin-top: 10px!important;
+    }
+    .zp_nav{
+        width: 967px!important;
+        height: 50px!important;
+        line-height: 50px!important;
+        display: flex!important;
+        flex-direction: row!important;
+        justify-content:space-around!important;
+        background: #e5f5f2!important;
+    }
+    .zp_nav span{
+        font-size: 18px!important;
+        color: #333!important;
+        cursor: pointer!important;
+    }
+    .zp_nav span.on{
+        color: #016303!important;
+        font-weight: 900!important;
+        position: relative!important;
+    }
+    .zp_nav span.on::after{
+        border-left: 9px solid transparent!important;
+        border-top: 9px solid #e5f5f2!important;
+        border-right: 9px solid transparent!important;
+        content: " "!important;
+        display: block!important;
+        height: 0!important;
+        margin-left: -19px!important;
+        width: 0!important;
+        position: absolute!important;
+        /* pointer-events: all; */
+        bottom: -9px!important;
+        left: 60%!important;
+    }
+    .yzgw_list .yzgw_list_div{
+        width: 44%!important;
+        position: relative!important;
+    }
+    .yzgw_list .yzgw_list_div h4 span{
+        font-size: 14px!important;
+        background: #f0f9f7!important;
+        padding: 4px 8px!important;
+        border-radius: 4px!important;
+    }
+    .yzgw_list .yzgw_list_div p{
+        padding: 5px 0px!important;
+    }
+    .yzgw_list .yzgw_list_div p span.address {
+        padding-left: 16px!important;
+        background: url(twjr_icon8.png) no-repeat left center;
+        background-size: 10px!important;
+        margin-right: 4px!important;
+    }
+    .yzgw_list .yzgw_list_div .zp_more {
+        background: #e5f5f2!important;
+        color: #016303!important;
+        border:1px solid #6cb16d!important;
+        border-radius: 4px!important;
+        padding: 4px 8px!important;
+        position: absolute!important;
+        right: 15px!important;
+        bottom:15px!important;
+    }
+    .yzgw_list .yzgw_list_div .zp_more:hover {
+        background: #016303!important;
+        color: #fff!important;
+        border:1px solid #016303!important;
+    }
+    .er_right .yzgw_list{
+        display: none!important;
+    }
+    /*职业技能培训*/
+    .zyjn_list{
+        width: 967px!important;
+    }
+    .zyjn_list .zyjn_list_div{
+        width: 28%!important;
+        margin: 1%!important;
+        float: left!important;
+        background: #fcfffc!important;
+        padding: 1.5%!important;
+        box-shadow: 0px 0px 5px #eee!important;
+        border-radius: 5px!important;
+        cursor: pointer!important;
+        position: relative!important;
+    }
+    .zyjn_list .zyjn_list_div img{
+        width: 285px!important;
+        height: 160px!important;
+        margin-bottom: 5px!important;
+    }
+    .zyjn_list .zyjn_list_div h1{
+        font-size: 20px!important;
+        height: 30px!important;
+        line-height: 30px!important;
+        font-weight: 900!important;
+    }
+    .zyjn_list .zyjn_list_div h4{
+        font-size: 14px!important;
+        color: #666!important;
+        height: 35px!important;
+        line-height: 35px!important;
+        margin-bottom: 2px!important;
+    }
+    .zyjn_list .zyjn_list_div p{
+        font-size: 16px!important;
+        color: #666!important;
+        height: 35px!important;
+        line-height: 35px!important;
+    }
+    .zyjn_list .zyjn_list_div b{
+        font-size: 20px!important;
+        color: #ffb604!important;
+        display: block!important;
+    }
+
+    .zyjn_more{
+        background: #e5f5f2!important;
+        color: #016303!important;
+        border:1px solid #6cb16d!important;
+        border-radius: 4px!important;
+        padding: 4px 8px!important;
+        position: absolute!important;
+        right: 15px!important;
+        bottom:15px!important;
+    }
+    .zyjn_more:hover{
+        background: #016303!important;
+        color: #fff!important;
+        border:1px solid #016303!important;
+    }
+</style>
 </html>