{extend name="main"}
{block name="style"}
{css href="__PLUGIN_SRC__/Swiper/swiper.min.css"}
<style type="text/css">
    .bg-grid{
        width: 100%;
        display:grid;
        grid-gap:0 10px;
        margin-top: 10px;
        grid-template-columns: 1fr 1fr;
    }
    .logo img{max-width:none !important;max-height:none !important; width:200px !important;height:65px !important;}
    .border-bottom{}
    .home-jobs-item{position:relative;}
    .home-jobs-item:hover .home-jobs-item-after{
       width: 100%;
    }
    .home-jobs-item-after{
        width: 0;
        height: 2px;
        position:absolute;
        bottom: 0;
        left: 0;
        transition:0.8s;
        background-color: #048CFC;
    }
    .login-tabs{width:260px !important;height:330px !important;}
    .pl-35{padding-left:35px;}
    .text-111734{color:#111734 !important;}
    .text-F4F6F8{color:#F4F6F8 !important;}
    .text-12{font-size:12px !important;}
    .text-18{font-size:18px !important;}
    .text-24{font-size:24px !important;}
    .text-34{font-size:34px !important;}
    .banner-grid{
        display:grid;
        grid-gap:0 10px;
        grid-template-columns: 1fr 638px 1fr;
    }
    .banner-container .swiper-slide img{height:265px !important;}
    .banner-container{height:330px !important;}
    .jobs-cate{width: 230px !important;height:475px !important;background-color: #fff;}
    .jobs-cate-list{height:475px !important;}
    .animation{
        width: 100%;
        position: relative;
        /*transform: translateY(-50%);*/
        animation: Carousel 1s linear infinite ;
    }
    .footer{background-color:#26344B !important;}
    .footer h6{color:#FFFFFF !important;}
    .footer .small{color:#07B3FF !important;}
    .text-secondary{color:#A6ABBE !important;}
    .footer .copyright {background-color:#26344B !important;}
    .footer-position{background-color:#26344B !important; opacity: 0.8 !important;}
    .footer-position .after{
        position: relative;
    }
    .footer-position .after::after{
        content: "+";
        position: absolute;
        top: 0;
        right: -15px;
        font-size:18px;
    }
    .font-weight-bold{font-weight: bold;}
    .footer-position .bg-footer {position:absolute;bottom:0; left:0;transform:translateX(-56%)}
    @keyframes Carousel {
      0%   {top:0%;}
      50%   {top:-50%;}
      75% {top:-100%}
    }
	.banner-container {
		width: 100%;
		height: 265px;
	}

	.banner-container .swiper-slide a {
		width: 100%;
	}

	.banner-container .swiper-slide img {
		width: 100%;
		height: 265px;
	}

	.banner-container .swiper-pagination-bullet-active {
		background: #fff;
	}

	.company-icon-container .swiper-pagination-bullet-active {
		background: #FF6D05;
	}

	.hover-show-jobs-sum-body {
		position: relative;
		display: block;
	}

	.hover-show-jobs-sum-body .hover-show-jobs-sum {
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		background-color: rgba(0, 0, 0, .65);
		color: #FFFFFF;
		padding-top: 13%;
	}

	.hover-show-jobs-sum-body:hover .hover-show-jobs-sum {
		display: block;
	}

	.search-bg {
		background-image: url(__TEMPLATE_STATIC__/home_searchbar_img_bg.png);
		background-size: 100% 100%;
	}
	.text-white a {
		color: #FFFFFF !important;
	}

	.footer-position {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		background-color: rgba(0, 0, 0, .45);
		color: #FFFFFF;
	}
    
	.footer-position-code {
		position: absolute;
		bottom: 0;
	}

	.company-icon-item {
		position: relative;
		overflow: hidden;
	}

	.company-icon-item .jobs_list {
		position: absolute;
		left: 0;
		top: 100%;
		right: 0;
		bottom: 0;
		z-index: 10;
		background-color: rgba(0, 0, 0, .65);
		transition: all .3s;
		-webkit-transition: all .3s;
	}

	.company-icon-item:hover .jobs_list {
		top: 0;
	}

	.text-FFDE00 {
		color: #FFDE00;
	}

	.banner-container .swiper-pagination-bullet {
		width: 20px;
		height: 5px;
		border-radius: 3px;
		background: #FFFFFF;
		opacity: .5;
	}

	.banner-container .swiper-pagination-bullet-active {
		opacity: 1;
	}
</style>
{/block}
{block name="header"}
{xycms:hasads alias="home_top_spread"}
{xycms:ads alias="home_top_spread" name='v' length="1"}
<div {notempty name="$v.bg_color" }style="background-color:{$v.bg_color};" {/notempty}>
	<div class="ads ads-3s-close ads-id-{$v.id}">
		<i class="el-icon-close" onclick="$('.ads-id-{$v.id}').slideUp();"></i>
		{empty name="v.url"}
		<a class="s {$v.ads_icon?'ads-icon':''}" title="{$v.title}">
			{else/}
			<a href="{$v.url}" class="s {$v.ads_icon?'ads-icon':''}" target="_blank" title="{$v.title}">
				{/empty}
				<img src="{xycms:web name='imgurl'/}{$v.path}">
			</a>
	</div>
</div>
{/xycms:ads}
{xycms:ads alias="home_top_shrink" name='v' length="1"}
<div {notempty name="$v.bg_color" }style="background-color:{$v.bg_color};" {/notempty}>
	<div class="ads ads-3s-open d-none ads-id-{$v.id}">
		<i class="el-icon-close" onclick="$('.ads-id-{$v.id}').slideUp();"></i>
		{empty name="v.url"}
		<a class="s {$v.ads_icon?'ads-icon':''}" title="{$v.title}">
			{else/}
			<a href="{$v.url}" class="s {$v.ads_icon?'ads-icon':''}" target="_blank" title="{$v.title}">
				{/empty}
				<img src="{xycms:web name='imgurl'/}{$v.path}">
			</a>
	</div>
</div>
{/xycms:ads}
{else/}
{xycms:ads alias="home_top_shrink" name='v' length="1"}
<div {notempty name="$v.bg_color" }style="background-color:{$v.bg_color};" {/notempty}>
	<div class="ads ads-id-{$v.id}">
		<i class="el-icon-close" onclick="$('.ads-id-{$v.id}').slideUp();"></i>
		{empty name="v.url"}
		<a class="s {$v.ads_icon?'ads-icon':''}" title="{$v.title}">
			{else/}
			<a href="{$v.url}" class="s {$v.ads_icon?'ads-icon':''}" target="_blank" title="{$v.title}">
				{/empty}
				<img src="{xycms:web name='imgurl'/}{$v.path}">
			</a>
	</div>
</div>
{/xycms:ads}
{/xycms:hasads}
{include file="module/top_nav" container="container-xl"/}
{include file="module/header"/}
{/block}
{block name="body"}
<div class="header d-print-none top-nav">
	<div class="container-xl py-3 flex flex-center text-white">
	    <div>
	            	{empty name="logo"}
		    <a href="/" class="logo">
		    	{empty name=":config('web.logo_white')"}
		    	<img src="{xycms:web name='logo'}">
		    	{else/}
		    	<img src="{xycms:web name='logo_white'}">
		    	{/empty}
		    </a>
		    {else/}
		    <a href="/" class="logo">
		    	<img src="{$logo}">
		    </a>
		    {/empty}
	    </div>
	
		<div class="flex-1 pl-3">
	            <div class="search">
	                <div style="border:1px solid #FFFFFF">
	            	    <el-form @submit.native.prevent="sendSearch">
	            	    	<el-input placeholder="会计/财务/人力/客服/设计…" v-model="search.key" class="input-with-select shadow el-input__inner-left-none">
	            	    		<el-select slot="prepend" v-model="search.type">
	            	    			<el-option label="找工作" :value="1"></el-option>
	            	    			<el-option label="招人才" :value="2"></el-option>
	            	    			<el-option label="搜企业" :value="3"></el-option>
	            	    		</el-select>
	            	    		<el-button native-type="submit" slot="append" >搜 索</el-button>
	            	    	</el-input>
	            	    </el-form>
	            	</div>
	            	<div class="flex pt-2">
	            		<div class="">热门搜索：</div>
	            		<div class="px-2"><a href="/jobs?key=普工" target="_blank">普工</a></div>
	            		<div class="px-2"><a href="/jobs?key=销售" target="_blank">销售</a></div>
	            		<div class="px-2"><a href="/jobs?key=司机" target="_blank">司机</a></div>
	            		<div class="px-2"><a href="/jobs?key=文员" target="_blank">文员</a></div>
	            		<div class="px-2"><a href="/jobs?key=管理" target="_blank">管理</a></div>
	            		<div class="px-2"><a href="/jobs?key=业务员" target="_blank">业务员</a></div>
	            		<div class="px-2"><a href="/jobs?key=设计" target="_blank">设计</a></div>
	            		<div class="px-2"><a href="/jobs?key=收银" target="_blank">收银</a></div>
	            		<div class="px-2"><a href="/jobs?key=服务员" target="_blank">服务员</a></div>
	            		<div class="px-2"><a href="/jobs?key=导购" target="_blank">导购</a></div>
	            		<div class="px-2"><a href="/jobs?key=会计" target="_blank">会计</a></div>
	            	</div>
	            </div>
            
		</div>
		
		<div class="flex">
		    <!--<img v-lazy="'__TEMPLATE_STATIC__/icon/icon-index-header-1.png'" height="60" width="86">-->
		    <div class="ml-3 text-center">
		    	<div class="pb-1">
		    		<img v-lazy="'/qrcode/appdown'" width="60" height="60">
		    	</div>
		    	<a href="{xycms:web name=" downUrl"/}" class="small text-white" target="_blank">下载APP</a>
		    </div>
		    <div class="ml-3">
		    	<div class="h5">{xycms:web name="name"/}APP</div>
		    	<div class="text-FFDE00">{:config('basic.pc_footer_guide_text')}</div>
		    </div>
		</div>
	
	</div>
</div>

<div class="container-xl pb-3 mt-4">
	<div class="banner-grid">
		<div class="jobs-cate">
			<div class="jobs-cate-list">
				{xycms:jobscatelist name='v' length="10"}
				<div class="jobs-cate-item px-3" >
					<div class="flex flex-center">
						{notempty name="v.icon"}
						<div>
							<img v-lazy="'{$v.icon}'" width="16">
						</div>
						{/notempty}
						<div class="flex-1 pl-2 text-truncate">
							<span class="w-100px font-weight-bold">{$v.title}</span>
							{volist name="v.data" id="va" length="1"}
									{volist name="va.data" id="val" length="3"}
										<span class="pl-2" ><a href="/jobs?cid={$val.id}" class="el-link text-secondary" target="_blank">{$val.title}</a></span>
									{/volist}
							{/volist}
						</div>
						<div>
							<i class="el-icon-arrow-right"></i>
						</div>
					</div>
					<div class="jobs-cate-body">
						<h6>{$v.title}</h6>
						{volist name="v.data" id="va"}
						<div class="flex">
							<div class="w-100px text-grey">{$va.title}</div>
							<div class="flex-1 {gt name=" $key" value="0" }border-top border-grey{/gt} row mx-0">
								{volist name="va.data" id="val"}
								<div class="col-auto"><a href="/jobs?cid={$val.id}" class="el-link text-secondary" target="_blank">{$val.title}</a></div>
								{/volist}
							</div>
						</div>
						{/volist}
					</div>
				</div>
				{/xycms:jobscatelist}
			</div>
			<div class="jobs-all px-3">
				<a href="/jobs/all-jobs-cate" class="el-link el-link--primary pl-2">全部职位分类>></a>
			</div>
		</div>
		<div>
		    <div class="flex flex-center" style="height:44px;">
		        <img src="__TEMPLATE_STATIC__/icon/icon-notice.png" style="width:18px;height:18px;display:inline-block">
		        <span class="text-FF586C ml-1">公告信息：</span>
		        <div style="height:21px;overflow: hidden;">
                    <ul class="p-0 mb-0 animation" style="list-style: none;">
					    {xycms:articlelist alias="article_notice" name='v' length="10"}
					    <li class="{$v.cla}">
					    	<div>
					    		<a href="/article/content/{$v.id}.html" class="text-secondary">{$v.title}</a>
					    	</div>
					    </li>
					    {/xycms:articlelist}
				    </ul>
		        </div>
		    </div>
			<div class="bg-white shadow">
				<div class="swiper-container banner-container">
					<div class="swiper-wrapper">
						{xycms:ads alias="home_banner" name='v' length="100"}
						<div class="swiper-slide text-v-center">
							{empty name="v.url"}
							<a class="s {$v.ads_icon?'ads-icon':''}" title="{$v.title}">
								{else/}
								<a href="{$v.url}" class="s {$v.ads_icon?'ads-icon':''}" target="_blank" title="{$v.title}">
									{/empty}
									<img v-lazy="'{xycms:web name='imgurl'/}{$v.path}'">
								</a>
						</div>
						{/xycms:ads}
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="flex space-between bg-grid">
			    <div><a href="/jobs"><img src="__TEMPLATE_STATIC__/bg-salary.png" style="width:310px;height:130px;display:inline-block"></a></div>
			    <div><a href="/article/government_institutions.html"><img src="__TEMPLATE_STATIC__/bg-position.png" style="width:310px;height:130px;display:inline-block"></a></div>  
			</div>
		</div>
		<div class="shadow">
		    <div class="flex flex-center mr-3" style="height:44px;">
		        <div class="flex-1"></div>
		        <a class="el-link el-link--primary" href="/article/type/article_notice.html">查看更多>>></a>
		    </div>
			<div v-if="userInfo.id && userInfo.role_type===0" class="login-tabs text-center position-relative">
				<div class="position-absolute pl-3 pr-1 py-1 bg-FF8221 text-white small pointer"
					style="right: 0; border-top-left-radius: 20px;border-bottom-left-radius: 20px;" @click="goToCompany">切换企业版</div>
				<div class="wrap h-100">
					<div class="flex1 wrap h-100">
						<div class="pt-5 pb-2 flex1 text-v-center">
							<el-avatar :size="80" :src="userInfo.headimg"></el-avatar>
						</div>
						<div class="pb-3">
							<el-link href="/user" type="primary" :underline="false" target="_blank" v-if="userInfo.resume_name">{{userInfo.resume_name}}
							</el-link>
							<el-link href="/user" type="primary" :underline="false" target="_blank" v-else>{{userInfo.nickname}}</el-link>
						</div>
						<p class="text-secondary">欢迎来到{xycms:web name="name"}</p>
					</div>
					<div class="pb-3">
						<a href="/user" class="el-button el-button--default" target="_blank">查看/更新简历</a>
					</div>
				</div>
			</div>
			<div v-else-if="userInfo.id && userInfo.role_type===1" class="login-tabs text-center position-relative">
				<div class="position-absolute pl-3 pr-1 py-1 bg-FF8221 text-white small pointer"
					style="right: 0; border-top-left-radius: 20px;border-bottom-left-radius: 20px;" @click="goToPersonal">切换个人版</div>
				<div class="wrap h-100">
					<div class="flex1 wrap h-100">
						<div class="pt-5 pb-2 flex1">
							<el-avatar :size="80" :src="userInfo.headimg"></el-avatar>
						</div>
						<div class="pb-3">
							<el-link href="/user" type="primary" :underline="false" target="_blank" v-if="userInfo.company_name">{{userInfo.company_name}}
							</el-link>
							<el-link href="/user" type="primary" :underline="false" target="_blank" v-else>{{userInfo.nickname}}</el-link>
						</div>
						<p class="text-secondary">欢迎来到{xycms:web name="name"}</p>
					</div>
					<div class="pb-3">
						<a href="/user" class="el-button el-button--default" target="_blank">企业中心</a>
						<a href="/user/resume/management" class="el-button el-button--default" target="_blank">查看投递</a>
					</div>
				</div>
			</div>
			<div v-else="userInfo.id">
				<div v-if="!loginTabs.loginWin">
					{include file="module/login_tabs"/}
				</div>
			</div>
			<div style="margin-top:10px"><a href=""><img src="__TEMPLATE_STATIC__/bg-index-ad.png" style="width:260px;height:130px;display:inline-block"></a></div>
			<!--<div class="article-ad text-v-center">-->
			<!--	{xycms:ads alias="home_logwin" name='v'}-->
			<!--	<div class="text-v-center">-->
			<!--		{empty name="v.url"}-->
			<!--		<a title="{$v.title}" class="{$v.ads_icon?'ads-icon':''}">-->
			<!--			{else/}-->
			<!--			<a href="{$v.url}" class="s {$v.ads_icon?'ads-icon':''}" target="_blank" title="{$v.title}">-->
			<!--				{/empty}-->
			<!--				<img v-lazy="'{xycms:web name=" imgurl"/}{$v.path}'">-->
			<!--			</a>-->
			<!--	</div>-->
			<!--	{/xycms:ads}-->
			<!--</div>-->
		</div>
	</div>
	{xycms:hasads alias="home_a1"}
	<div class="ads home-img row mt-3">
		{xycms:ads alias="home_a1" name='v' length="100"}
		<div class="col-{$v.col}">
			{empty name="v.url"}
			<a title="{$v.title}" class="{$v.ads_icon?'ads-icon':''}">
				{else/}
				<a href="{$v.url}" target="_blank" title="{$v.title}" class="{$v.ads_icon?'ads-icon':''}">
					{/empty}
					<img v-lazy="'{xycms:web name=" imgurl"/}{$v.path}'">
				</a>
		</div>
		{/xycms:ads}
	</div>
	{/xycms:hasads}
	{xycms:companylist name="CompanyList" is_famous="1" length="32"}
	<div class="mt-3">
		<div class="flex">
			<div class="flex-1"></div>
			<el-divider class="flex-1 block-title text-111734 text-24">

	<div class="flex">
			<div class="flex-1"></div>
			<el-divider class="flex-1 block-title">企业推荐</el-divider>
			<div class="flex-1"></div>
		</div>
		<div class="row company-icon-list pt-3">
	    	{volist name="CompanyList" id="v"}
	      	<div class="col-3">
	      		<div class="company-icon-item pointer">
			      	<a href="/company/{$v.id}.html" target="_blank" class="text-dark px-3 pt-4 pb-3">
						<img v-lazy="'{$v.logo}'">
						{empty name="v.stitle"}
						<h5 class="text-truncate px-2 mb-0 pt-4">{$v.title}</h5>
						{else/}
						<h5 class="text-truncate px-2 mb-0 pt-4">{$v.stitle}</h5>
						{/empty}
						<div class="small text-grey flex text-v-center mt-3">
							<div>{$v.size_type}</div>
							<div class="border-left py-1 mx-1"></div>
							<div>{$v.industry}</div>
						</div>
						<div class="border-top pt-3 mt-3 flex flex-center border-grey">
							<div class="flex-1">
								<div class="h6 text-dark">{$v.jobs_sum}个</div>
								<div class="small text-grey">在招职位</div>
							</div>
							<div class="border-left py-3"></div>
							<div class="flex-1">
								<div class="h6 text-dark">{$v.resume_efficiency}%</div>
								<div class="small text-grey">简历处理率</div>
							</div>
							<div class="border-left py-3"></div>
							<div class="flex-1">
								<div class="h6 text-dark">1天</div>
								<div class="small text-grey">简历处理用时</div>
							</div>
						</div>
					</a>
					<div class="jobs_list p-3 text-left wrap">
						<div class="text-center py-3 text-truncate">
			      			<a href="/company/{$v.id}.html" target="_blank" class="text-white h6 mb-0 text-truncate">{$v.title}</a>
						</div>
						<div class="flex1">
							{notempty name="v.jobs_list"}
							{volist name="v.jobs_list" id="jobs" length="4"}
							<div class="py-1 flex">
				      			<a href="/jobs/{$jobs.id}.html" target="_blank" class="text-white flex-1 text-truncate">{$jobs.title}</a>
			      				<div class="text-white">
									{gt name="jobs.salary_min" value="0"}
									{eq name="v.jobs_salary_show_type" value="1"}
									{$jobs.salary_min}-{$jobs.salary_max}元
									{else/}
									{$jobs.salary_min}-{$jobs.salary_max}k
									{/eq}
									{else/}
									面议
									{/gt}
								</div>
							</div>
							{/volist}
							{/notempty}
						</div>
						<div class="text-center py-3">
							<a href="/company/{$v.id}.html" class="el-button rounded-0 px-5 el-button--primary text-white" target="_blank">更多职位</a>
						</div>
					</div>
				</div>
	      	</div>
	      	{/volist}
		</div>
		<div class="text-center mt-3">
			<a href="/company" class="el-button rounded-0 el-button--primary text-white" style="width: 218px;
    height: 34px;
    line-height: 34px;
    padding: 0;" target="_blank">查看更多</a>
		</div>
	</div>
  	{/xycms:companylist}
	<div class="mt-3">
		<div class="bg-white flex flex-center flex-v-center mb-3 pl-3 py-2">
			<!--<div class="py-3 px-4 pointer active-item" :class="{'active':jobs_type==2}" @mousemove="jobs_type=2;">最新职位</div>-->
			<div class="py-3 px-4 pointer active-item" :class="{'active':jobs_type==0}" @mousemove="jobs_type=0;">热门职位</div>
			<div class="py-3 px-4 pointer active-item" :class="{'active':jobs_type==1}" @mousemove="jobs_type=1;">高薪职位</div>
			<!--<div class="flex-1"></div>-->
			<div class="pr-3" style="position: absolute; right: 20px">
				<a href="/jobs" class="el-link el-link--primary" target="_blank">全部职位 >></a>
			</div>
		</div>
		{xycms:jobslist name="JobsList" new="1" length="6"}
		<div class="row home-jobs-list" v-show="jobs_type==2">
			{volist name="JobsList" id="v" length='10'}
			<div class="col-4">
				<div class="home-jobs-item">
					<a href="/jobs/{$v.id}.html" target="_blank" class="p-3">
						<div class="flex pb-3">
							<h6 class="mb-0 flex-1 text-dark font-weight-600"><span class="text-primary-hover">{$v.title}</span></h6>
							<div class="h6 text-FF586C mb-0">
								{gt name="v.salary_min" value="0"}
								{eq name="v.jobs_salary_show_type" value="1"}
								{$v.salary_min}-{$v.salary_max}元
								{else/}
								{$v.salary_min}-{$v.salary_max}
								{/eq}
								{else/}
								面议
								{/gt}
							</div>
						</div>
						<div class="text-grey small">{$v.exp_level}丨{$v.education}</div>
						<div class="flex text-truncate border-top mt-3 text-dark flex-center pt-3 small border-grey">
							{notempty name="v.logo"}
							<div>
								<img v-lazy="'{$v.logo}'" alt="" width="30" height="30" class="border rounded">
							</div>
							{/notempty}
							<div class="flex-1 px-2 text-truncate">
								{empty name="v.scompany_name"}
								{$v.company_name}
								{else/}
								{$v.scompany_name}
								{/empty}
							</div>
							<div class="text-grey">
								<i class="el-icon-location-outline"></i>{$v.jobs_city}-{$v.jobs_area}
							</div>
						</div>
					</a>
				</div>
			</div>
			{/volist}
		</div>
		{/xycms:jobslist}
		{xycms:jobslist name="JobsList" is_hot="1" length="6"}
		<div class="row home-jobs-list" v-show="jobs_type==0">
			{volist name="JobsList" id="v" length='10'}
			<div class="col-4">
				<div class="home-jobs-item">
					<a href="/jobs/{$v.id}.html" target="_blank" class="p-3">
						<div class="flex pb-3">
							<h6 class="mb-0 flex-1 text-dark font-weight-600"><span class="text-primary-hover">{$v.title}</span></h6>
							<div class="h6 text-FF586C mb-0">
								{gt name="v.salary_min" value="0"}
								{eq name="v.jobs_salary_show_type" value="1"}
								{$v.salary_min}-{$v.salary_max}元
								{else/}
								{$v.salary_min}-{$v.salary_max}k
								{/eq}
								{else/}
								面议
								{/gt}
							</div>
						</div>
						<div class="text-grey small">{$v.exp_level}丨{$v.education}</div>
						<div class="flex text-truncate border-top mt-3 text-dark flex-center pt-3 small border-grey">
							{notempty name="v.logo"}
							<div>
								<img v-lazy="'{$v.logo}'" alt="" width="30" height="30" class="border rounded">
							</div>
							{/notempty}
							<div class="flex-1 px-2 text-truncate">
								{empty name="v.scompany_name"}
								{$v.company_name}
								{else/}
								{$v.scompany_name}
								{/empty}
							</div>
							<div class="text-grey">
								<i class="el-icon-location-outline"></i>{$v.jobs_city}-{$v.jobs_area}
							</div>
						</div>
					</a>
				</div>
			</div>
			{/volist}
		</div>
		{/xycms:jobslist}
		{xycms:jobslist name="JobsList" is_high_salary="1" length="6"}
		<div class="row home-jobs-list" v-show="jobs_type==1">
			{volist name="JobsList" id="v" length='10'}
			<div class="col-4">
				<div class="home-jobs-item">
					<a href="/jobs/{$v.id}.html" target="_blank" class="p-3">
						<div class="flex pb-3">
							<h6 class="mb-0 flex-1 text-dark font-weight-600"><span class="text-primary-hover">{$v.title}</span></h6>
							<div class="h6 text-FF586C mb-0">
								{gt name="v.salary_min" value="0"}
								{eq name="v.jobs_salary_show_type" value="1"}
								{$v.salary_min}-{$v.salary_max}元
								{else/}
								{$v.salary_min}-{$v.salary_max}k
								{/eq}
								{else/}
								面议
								{/gt}
							</div>
						</div>
						<div class="text-grey small">{$v.exp_level}丨{$v.education}</div>
						<div class="flex text-truncate border-top mt-3 text-dark flex-center pt-3 small border-grey">
							{notempty name="v.logo"}
							<div>
								<img v-lazy="'{$v.logo}'" alt="" width="30" height="30" class="border rounded">
							</div>
							{/notempty}
							<div class="flex-1 px-2 text-truncate">
								{empty name="v.scompany_name"}
								{$v.company_name}
								{else/}
								{$v.scompany_name}
								{/empty}
							</div>
							<div class="text-grey">
								<i class="el-icon-location-outline"></i>{$v.jobs_city}-{$v.jobs_area}
							</div>
						</div>
					</a>
				</div>
			</div>
			{/volist}
		</div>
		{/xycms:jobslist}
        {xycms:hasads alias="home_a2"}
    	<div class="ads home-img row mt-3">
    		{xycms:ads alias="home_a2" name='v' length="100"}
    		<div class="col-{$v.col}">
          		{empty name="v.url"}
    	      	<a title="{$v.title}" class="{$v.ads_icon?'ads-icon':''}">
          		{else/}
    	      	<a href="{$v.url}" target="_blank" title="{$v.title}" class="{$v.ads_icon?'ads-icon':''}">
          		{/empty}
    				<img v-lazy="'{xycms:web name="imgurl"/}{$v.path}'">
    	      	</a>
          	</div>
    		{/xycms:ads}
    	</div>
    	{/xycms:hasads}
		{xycms:jobslist name="JobsList" new="1" length="90"}
	    <div class="mt-3">
		<div class="flex">
			<div class="flex-1"></div>
			<el-divider class="flex-1 block-title">最新职位</el-divider>
			<div class="flex-1"></div>
		</div>
		<div class="row home-jobs-list pt-3">
			{volist name="JobsList" id="v"}
			<div class="col-4">
				<div class="home-jobs-item">
					<a href="/jobs/{$v.id}.html" target="_blank" class="p-3">
						<div class="flex pb-3">
							<h6 class="mb-0 flex-1 text-dark font-weight-600"><span class="text-primary-hover">{$v.title}</span></h6>
							<div class="h6 text-FF586C mb-0">
								{gt name="v.salary_min" value="0"}
								{eq name="v.jobs_salary_show_type" value="1"}
								{$v.salary_min}-{$v.salary_max}元
								{else/}
								{$v.salary_min}-{$v.salary_max}k
								{/eq}
								{else/}
								面议
								{/gt}
							</div>
						</div>
						<div class="text-grey small">{$v.exp_level}丨{$v.education}</div>
						<div class="flex text-truncate border-top mt-3 text-dark flex-center pt-3 small border-grey">
							{notempty name="v.logo"}
							<div>
								<img v-lazy="'{$v.logo}'" alt="" width="30" height="30" class="border rounded">
							</div>
							{/notempty}
							<div class="flex-1 px-2 text-truncate">
								{empty name="v.scompany_name"}
								{$v.company_name}
								{else/}
								{$v.scompany_name}
								{/empty}
							</div>
							<div class="text-grey">
								<i class="el-icon-location-outline"></i>{$v.jobs_city}-{$v.jobs_area}
							</div>
						</div>
					</a>
				</div>
			</div>
			{/volist}
		</div>
	</div>
	{/xycms:jobslist}
	</div>
	{xycms:jobslist name="JobsList" is_recommend="1" length="21"}
	<div class="mt-3">
		<div class="flex">
			<div class="flex-1"></div>
			<el-divider class="flex-1 block-title">推荐职位</el-divider>
			<div class="flex-1"></div>
		</div>
		<div class="row home-jobs-list pt-3">
			{volist name="JobsList" id="v"}
			<div class="col-4">
				<div class="home-jobs-item">
					<a href="/jobs/{$v.id}.html" target="_blank" class="p-3">
						<div class="flex pb-3">
							<h6 class="mb-0 flex-1 text-dark font-weight-600"><span class="text-primary-hover">{$v.title}</span></h6>
							<div class="h6 text-FF586C mb-0">
								{gt name="v.salary_min" value="0"}
								{eq name="v.jobs_salary_show_type" value="1"}
								{$v.salary_min}-{$v.salary_max}元
								{else/}
								{$v.salary_min}-{$v.salary_max}k
								{/eq}
								{else/}
								面议
								{/gt}
							</div>
						</div>
						<div class="text-grey small">{$v.exp_level}丨{$v.education}</div>
						<div class="flex text-truncate border-top mt-3 text-dark flex-center pt-3 small border-grey">
							{notempty name="v.logo"}
							<div>
								<img v-lazy="'{$v.logo}'" alt="" width="30" height="30" class="border rounded">
							</div>
							{/notempty}
							<div class="flex-1 px-2 text-truncate">
								{empty name="v.scompany_name"}
								{$v.company_name}
								{else/}
								{$v.scompany_name}
								{/empty}
							</div>
							<div class="text-grey">
								<i class="el-icon-location-outline"></i>{$v.jobs_city}-{$v.jobs_area}
							</div>
						</div>
					</a>
				</div>
			</div>
			{/volist}
		</div>
	</div>
	{/xycms:jobslist}
	{xycms:resumelist name="ResumeList" length="9" prop="recommend"}
	<div class="mt-3">
		<div class="flex">
			<div class="flex-1"></div>
			<el-divider class="flex-1 block-title text-111734 text-24">
			    <img src="__TEMPLATE_STATIC__/icon/icon-recommend.png" style="width:22px;height:22px;display:inline-block" class="mb-1">
			    人才推荐
			 </el-divider>
			<div class="flex-1"></div>
		</div>
		<div class="row pt-3 home-resume-list">
			{volist name="ResumeList" id="v"}
			<div class="col-4">
				<a href="javascript:void(0);" @click="hrefPage('/resume/{$v.id}.html')" class="bg-white p-3 home-jobs-item">
				    <div class="home-jobs-item-after"></div>
					<div class="flex flex-center pb-3">
						<div class="position-relative">
							<img v-lazy="'{$v.headimg}'" width="60" height="60" class="rounded-circle">
							{eq name="$v.sex" value="1"}
							<img v-lazy="'__TEMPLATE_STATIC__/icon/icon-sex-1.png'" width="15" height="15" class="position-absolute"
								style="right: -5px;top: 8px;">
							{/eq}
							{eq name="$v.sex" value="2"}
							<img v-lazy="'__TEMPLATE_STATIC__/icon/icon-sex-2.png'" width="15" height="15" class="position-absolute"
								style="right: -5px;top: 8px;">
							{/eq}
						</div>
						<div class="flex-1 h6 mb-0 pl-3">
							<div class="flex flex-center">
								<div class="flex-1 text-dark font-weight-600"><span
										class="text-primary-hover">{$v.name}{$v.sex==1?'先生':''}{$v.sex==2?'女士':''}</span></div>
								<div class="text-grey small">信息完整度:<span class="text-FF8221 h5 mb-0">{$v.progress}%</span></div>
							</div>
							<ul class="resume-seniority flex mt-3 text-grey small">
								<li>{$v.sex==1?'男':''}{$v.sex==2?'女':''}</li>
								<li>{$v.educational_background}</li>
								<li>{$v.age}岁</li>
								<li>{$v.work_experience_time?$v.work_experience_time.'年':'无'}工作经验</li>
							</ul>
						</div>
					</div>
					<div class="border-top flex border-grey pt-3">
						<div class="text-dark small pr-2 font-weight-600">{$v.jobs_cate3}</div>
						<div class="text-grey small flex-1">{$v.industry}</div>
						<div class="text-grey small"><i class="el-icon-location-outline"></i>{$v.job_area}</div>
					</div>
				</a>
			</div>
			{/volist}
		</div>
		<div class="text-center mt-3">
			<a href="/resume" class="el-button rounded-0 el-button--primary text-white" style="width: 218px;
    height: 34px;
    line-height: 34px;
    padding: 0;" target="_blank">查看更多</a>
		</div>
	</div>
	{/xycms:resumelist}
	<div class="flex flex-center bg-white mt-3 p-2">
		<div class="px-4 py-3 active-item active">职场新闻</div>
		<div class="flex-1"></div>
		<div>
			<a href="/article/type/workplace.html" class="el-link el-link--primary" target="_blank">查看更多 >></a>
		</div>
	</div>
	<div class="mt-3 block-article">
		<div class="flex">
			<div class="w-60 p-3 mr-3 bg-white">
				<ul class="article-notice-content text-left mb-0 pl-4 overflow-hidden">
					{xycms:articlelist alias="workplace" name='v' length="20"}
					{eq name="$i" value="1"}
					{notempty name="v.thumb"}
					<li class="{$v.cla} style-none">
						<div class="flex flex-center py-1">
							{volist name="v.thumb" id="thumb" length="1"}
							<div class="bg-white w-100px h-50px text-truncate rounded mr-3">
								<img v-lazy="'{$thumb}'" style="object-fit: contain;width: 100%;height: 100%;">
							</div>
							{/volist}
							<div class="flex-1">
								<a href="/article/content/{$v.id}.html" class="el-link h-40px text-ellipsis-2" target="_blank"><span
										class="{$v.cla}">{$v.title}</span></a>
								<div class="text-secondary small">文章来源：{$v.source}</div>
								<div class="flex text-secondary pt-1 small">
									<div class="pr-3"><i class="el-icon-time mr-1"></i>{$v.start_time|date="Y-m-d"}</div>
									<div><i class="el-icon-view mr-1"></i>{$v.view}</div>
								</div>
							</div>
						</div>
					</li>
					{else/}
					<li class="{$v.cla}">
						<div class="flex py-1">
							<a href="/article/content/{$v.id}.html" class="flex-1 text-truncate pr-3" target="_blank"><span
									class="{$v.cla}">{$v.title}</span></a>
							<span class="text-secondary">{$v.start_time|date="Y-m-d"}</span>
						</div>
					</li>
					{/notempty}
					{else/}
					<li class="{$v.cla}">
						<div class="flex py-1">
							<a href="/article/content/{$v.id}.html" class="flex-1 text-truncate pr-3" target="_blank"><span
									class="{$v.cla}">{$v.title}</span></a>
							<span class="text-secondary">{$v.start_time|date="Y-m-d"}</span>
						</div>
					</li>
					{/eq}
					{/xycms:articlelist}
				</ul>
			</div>
			<div class="w-40 p-3 bg-white">
				<ul class="article-notice-content style-none text-left mb-0 overflow-hidden">
					{xycms:articlelist alias="hot" name='v' length="20"}
					<li class="{$v.cla}">
						<div class="flex py-1 flex-center">
							<div class="mr-2 article-notice-icon">{$i}</div>
							<a href="/article/content/{$v.id}.html" class="flex-1 text-truncate pr-3" target="_blank"><span
									class="{$v.cla}">{$v.title}</span></a>
							<span class="text-secondary">{$v.start_time|date="Y-m-d"}</span>
						</div>
					</li>
					{/xycms:articlelist}
				</ul>
			</div>
		</div>
	</div>
	<div class="mt-3">
		<div class="pr-3 pt-3 flex flex-wrap">
			<div class="text-secondary">友情链接：</div>
			{xycms:links name="v"}
			<div class="pl-3 pb-3"><a href="{$v.url}" class="el-link el-link--info" target="_blank" title="{$v.title}">{$v.title}</a></div>
			{/xycms:links}
		</div>
	</div>
	{xycms:hasads alias="home_a3"}
	<div class="ads home-img row mt-3">
		{xycms:ads alias="home_a3" name='v' length="100"}
		<div class="col-{$v.col}">
			{empty name="v.url"}
			<a title="{$v.title}" class="{$v.ads_icon?'ads-icon':''}">
				{else/}
				<a href="{$v.url}" target="_blank" title="{$v.title}" class="{$v.ads_icon?'ads-icon':''}">
					{/empty}
					<img v-lazy="'{xycms:web name=" imgurl"/}{$v.path}'">
				</a>
		</div>
		{/xycms:ads}
	</div>
	{/xycms:hasads}
</div>
{eq name=":config('basic.pc_footer_guide')" value="1"}
<div class="footer-position" v-show="footerPosition" style="display: none;">
	<div class="flex container-xl py-3 h6 mb-0 flex-bottom">
	    <div class="bg-footer"><img src="__TEMPLATE_STATIC__/bg-footer.png" style="width:305px;height:190px;display:inline-block"></div>
		<div class="text-18 text-F4F6F8 mb-0 text-nowrap font-weight-bold">{:config('basic.pc_footer_guide_text')}</div>
		<div class="flex flex-bottom px-3">
			<div class="text-34 mb-0 mr-1 text-nowrap after">{$footer_count_sum.company}</div>
			<div class="text-12 pb-1 text-nowrap ml-2">企业共同选择</div>
		</div>
		<div class="flex flex-bottom px-3">
			<div class="text-34 mb-0 mr-1 text-nowrap after">{$footer_count_sum.jobs}</div>
			<div class="text-12 pb-1 text-nowrap ml-2">职位任您挑选</div>
		</div>
		<div class="flex flex-bottom px-3">
			<div class="text-34 mb-0 mr-1 text-nowrap after">{$footer_count_sum.resume}</div>
			<div class="text-12 pb-1 text-nowrap ml-2">份简历</div>
		</div>
		<div class="flex-1"></div>
		<div class="pr-5 text-nowrap">
			<el-button type="primary" @click="loginTabs.loginWin=true;">
				立即登录
			</el-button>
			<a href="/register" class="el-button el-button--warning ml-2">立即注册</a>
		</div>
		<div class="position-relative w-100px mr-3">
			<div class="footer-position-code text-center">
				<div class="flex" >
					<img v-lazy="'{xycms:web name="wxmpcode"}'" width="100" height="100" class="shadow">
					<img v-lazy="'__TEMPLATE_STATIC__/footer_guide_icon.png'" height="63">
				</div>
				<div class="small mb-0 pt-1 w-100px">手机也能找工作</div>
			</div>
		</div>
		<div class="pb-3">
			<i class="el-icon-close pointer" @click="footerPosition=false;"></i>
		</div>
	</div>
</div>
{/eq}

{xycms:ads alias="home_side" name='v' length="1"}
<div class="ads ads-side ads-id-{$v.id}">
	<i class="el-icon-close" onclick="$('.ads-id-{$v.id}').remove();"></i>
	{empty name="v.url"}
	<a class="s {$v.ads_icon?'ads-icon':''}" title="{$v.title}">
		{else/}
		<a href="{$v.url}" class="s {$v.ads_icon?'ads-icon':''}" target="_blank" title="{$v.title}">
			{/empty}
			<img v-lazy="'{xycms:web name='imgurl'/}{$v.path}'">
		</a>
</div>
<div class="ads ads-side-right ads-id-{$v.id}">
	<i class="el-icon-close" onclick="$('.ads-id-{$v.id}').remove();"></i>
	{empty name="v.url"}
	<a class="s {$v.ads_icon?'ads-icon':''}" title="{$v.title}">
		{else/}
		<a href="{$v.url}" class="s {$v.ads_icon?'ads-icon':''}" target="_blank" title="{$v.title}">
			{/empty}
			<img v-lazy="'{xycms:web name='imgurl'/}{$v.path}'">
		</a>
</div>
{/xycms:ads}
<el-dialog :width="'25%'" v-if="!!targetSubWebsite" :visible.sync="geo_sub_site" title="切换至地区分站">
	<p>当前定位到您在{{targetSubWebsite.area}}，是否切换到{{targetSubWebsite.title}}？</p>
	<div>(此定位依赖浏览器API，可能不准确，仅供参考，点击取消后一段时间内不再弹出此窗口)</div>
	<div slot="footer" class="dialog-footer">
		<el-button @click="subwebsiteDialogCloseHandle">取 消</el-button>
		<el-button type="primary" @click="subwebsiteDialogOKHandle">确 定</el-button>
	</div>
</el-dialog>
{/block}
{block name="footer"}
{include file="module/footer"/}
{include file="module/login"/}
{/block}
{block name="script"}
{js href="__PLUGIN_SRC__/Swiper/swiper.min.js"}
{js href="//webapi.amap.com/loader.js"}
{notempty name='sub_website'}
<script>
	var sub_website = JSON.parse('{:json_encode($sub_website)}'.replace(/[\r\n\s+]/g, '\\n'))
</script>
{else/}
<script>
	var sub_website = null
</script>
{/notempty}
<script>
	const amapConfig = {
		status: JSON.parse(`{xycms:mapconfig name="status"/}`.replace(/[\r\n\s+]/g, '\\n')),
		server_status: JSON.parse(`{xycms:mapconfig name="server_status"/}`.replace(/[\r\n\s+]/g, '\\n')),
		js_status: JSON.parse(`{xycms:mapconfig name="js_status"/}`.replace(/[\r\n\s+]/g, '\\n')),
		js_key: `{xycms:mapconfig name="js_key"/}`,
	}
	const subWebsites = JSON.parse(`{:json_encode(cache('SubWebsiteData'))}`.replace(/[\r\n\s+]/g, '\\n'))
</script>
<script type="text/javascript">
	var urlHash = location.hash.replace('#', '');
	if (urlHash) {
		var urlParam = urlHash.split("?");
		if (urlParam.length) {
			var urlPath = urlParam[0];
			var paramObj = {};
			if (urlParam.length > 1) {
				var param = urlParam[1].split('&');
				for (var i = 0; i < param.length; i++) {
					var pair = param[i].split("=");
					paramObj[pair[0]] = pair[1];
				}
			}
			var urlPathArr = [
				'/pageA/pages/personal/jobs/jobs',
				'/pageA/pages/common/company/company',
				'/pageA/pages/common/resume/resume',
				'/pageA/pages/common/article/content',
				'/pageA/pages/company/jobs/jobs',
				'/pageA/pages/common/article/agreement'
			];
			switch (urlPathArr.indexOf(urlPath)) {
				case 0:
					if (paramObj.id)
						window.location.href = '/jobs/' + paramObj.id + '.html';
					break;
				case 1:
					if (paramObj.id)
						window.location.href = '/company/' + paramObj.id + '.html';
					break;
				case 2:
					if (paramObj.id)
						window.location.href = '/resume/' + paramObj.id + '.html';
					break;
				case 3:
				case 5:
					if (paramObj.id)
						window.location.href = '/article/content/' + paramObj.id + '.html';
					if (paramObj.alias)
						window.location.href = '/article/content/' + paramObj.alias + '.html';
					break;
				case 4:
					if (paramObj.id)
						window.location.href = '/jobs/' + paramObj.id + '.html';
					break;
			}
		}
	}
	Vue.use(VueLazyload, {
		preLoad: 1.3,
		error: '__TEMPLATE_STATIC__/error.jpg',
		loading: '__TEMPLATE_STATIC__/loading.png',
		attempt: 1,
		// the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
		listenEvents: ['scroll']
	});
	var vm = new Vue({
		el: '#app',
		data: {
			view: XYBase.view,
			loginTabs: XYBase.loginTabs,
			userInfo: UserInfo,
			feedback: XYBase.feedback,
			footerPosition: !UserInfo.id,
			articleNotice: 0,
			articleNoticeTime: 0,
			jobs_type: 2,
			aMapper: null,
			search: {
				key: '',
				type: 1
			},
			geo_sub_site: false,
			targetSubWebsite: null,
			subWebsites,
			amapConfig
		},
		watch: {
			view: XYBase.viewWatch,
			loginTabs: XYBase.loginTabsWatch,
		},
		created() {
			XYBase.created(this)
			var _this = this
			setInterval(function () {
				_this.articleNoticeTime++;
				if (_this.articleNoticeTime >= 10) {
					_this.articleNoticeTime = 0;
					if (_this.articleNotice >= 3) {
						_this.articleNotice = 0;
					} else _this.articleNotice++;
				}
			}, 1000)
			/*{if config('xy_sub_website.status')}*/
			this.initGeo()
			/*{/if}*/
		},
		methods: XYBase.methods({
			hrefPage(url) {
				if (this.userInfo.id) {
					window.open(url);
				} else {
					return this.loginTabs.loginWin = true;
				}
			},
			getNearbySite(cityName) {
				console.log(cityName)
				for (const index in this.subWebsites) {
					if (this.subWebsites[index].area == cityName) {
						this.subWebsites[index].alias = index
						return this.subWebsites[index]
					}
				}
			},
			subwebsiteDialogOKHandle() {
				window.location = this.targetSubWebsite.url
			},
			subwebsiteDialogCloseHandle() {
				console.log(XYExtra.setCookie('no-sub-website', true))
				this.geo_sub_site = false
			},
			initGeo() {
				let currentSite = XYExtra.getCookie('sub-website-alias')
				if (!XYExtra.getCookie('no-sub-website')) {
					window.AMapLoader.load({
						/* 申请好的Web端开发者Key，首次调用 load 时必填 */
						key: this.amapConfig.js_key,
						/* 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 */
						version: "2.0",
						zoom: 20,
						/* 加载插件 */
						plugins: [
							'AMap.CitySearch',
						],
						/* 加载 AMapUI */
						AMapUI: {
							version: '1.1',
							/* 需要加载的 AMapUI ui插件 */
							plugins: ['overlay/SimpleMarker'],
						},
					}).then(AMap => {
						// this.aMapper = new AMap.Map(this.$refs['mapDom'])
						var citySearch = new AMap.CitySearch();
						citySearch.getLocalCity((status, result) => {
							if (status == 'complete') {
								this.targetSubWebsite = this.getNearbySite(result.city)
								this.geo_sub_site = !!this.targetSubWebsite && (currentSite != this.targetSubWebsite.alias)
							} else {
								console.log({ status, result })
							}
						})
					})
				}
			},
		})
	});
	var swiper = new Swiper('.banner-container', {
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
		autoplay: true
	});
	/*{xycms:hasads alias="home_top_spread"}*/
	$(function () {
		setTimeout(function () {
			$('.ads-3s-close').slideUp(2000);
		}, 3000);
		setTimeout(function () {
			$('.ads-3s-close').addClass('d-none');
			$('.ads-3s-open').removeClass('d-none');
		}, 4300);
	});
    /*{/xycms:hasads}*/
</script>
{/block}