<template>
? ? <div class="zw-dialog">
? ? ? ? <div class="zw-top">
? ? ? ? ? ? <p class="zw-word">請(qǐng)選擇職位</p>
? ? ? ? ? ? <div class="zw-in">
? ? ? ? ? ? ? ? <!-- <input class="zw-put" v-model="jobKeyWord" placeholder="請(qǐng)輸入職位關(guān)鍵詞" />-->
? ? ? ? ? ? ? ? <el-input ?class="in-put" v-model="jobKeyWord"
? ? ? ? ? ? ? ? ? ? ? ? ? ?@click.native="clickSearchInput"
? ? ? ? ? ? ? ? ? ? ? ? ? ?clearable
? ? ? ? ? ? ? ? ? ? ? ? ? ?@blur="blurSearch"
? ? ? ? ? ? ? ? ? ? ? ? ? ?placeholder="請(qǐng)輸入職位關(guān)鍵詞"></el-input>
? ? ? ? ? ? ? ? <div class="in-block" v-show="searchFlag">
? ? ? ? ? ? ? ? ? ? <ul class="in-ul">
? ? ? ? ? ? ? ? ? ? ? ? <!--<li class="in-li" v-for="(item,i) in searchList" :key="i">{{item.nameZh}}</li>-->
? ? ? ? ? ? ? ? ? ? ? ? <li class="in-li" v-for="(item,i) in searchList"
? ? ? ? ? ? ? ? ? ? ? ? ? ? :key="i" @click="clickTwoCatFun(item)"
? ? ? ? ? ? ? ? ? ? ? ? ? ? @mousedown= downDrag($event)
? ? ? ? ? ? ? ? ? ? ? ? ? ? v-html="item.nameVal"></li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="zw-middle">
? ? ? ? ? <span class="zw-tag" v-for="(item,i) in clickTwoNameArr" :key="i">
? ? ? ? ? ? {{item.nameZh}}
? ? ? ? ? ? <i class="el-icon-close" @click="delChoolseTwoItem(item)"></i>
? ? ? ? ? </span>
? ? ? ? ? ? <span class="zw-more">最多選擇1個(gè)職位類別</span>
? ? ? ? ? ? <span class="zw-sure" @click="jobSure">確認(rèn)</span>
? ? ? ? </div>
? ? ? ? <div class="zw-main">
? ? ? ? ? ? <div class="zw-left">
? ? ? ? ? ? ? ? <ul class="zw-ul">
? ? ? ? ? ? ? ? ? ? <!--<li class="zw-li li-active">產(chǎn)品/運(yùn)營(yíng)/新媒體 <span class="li-num">1</span></li>-->
? ? ? ? ? ? ? ? ? ? <!-- <template v-for="(item,i) in jobClassList" :key="i">
? ? ? ? ? ? ? ? ? ? ?</template> ? ?-->
? ? ? ? ? ? ? ? ? ? <li class="zw-li"
? ? ? ? ? ? ? ? ? ? ? ? :class="[clickOneJobNameArr.includes(item.id) ? 'li-active' :'']"
? ? ? ? ? ? ? ? ? ? ? ? v-for="(item,i) in jobClassList"
? ? ? ? ? ? ? ? ? ? ? ? @click="clickJobItem(item)"
? ? ? ? ? ? ? ? ? ? ? ? :key="i" >{{item.nameZh}}
? ? ? ? ? ? ? ? ? ? ? ? <span class="li-num" v-if=" countObj[item.id] ">{{countObj[item.id]}}</span>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="zw-right">
? ? ? ? ? ? ? ? <div class="right-main">
? ? ? ? ? ? ? ? ? ? <!--<span class="job-tag job-active">互聯(lián)網(wǎng)/移動(dòng)互聯(lián)網(wǎng)/電子商務(wù)</span>-->
? ? ? ? ? ? ? ? ? ? <span class="job-tag"
? ? ? ? ? ? ? ? ? ? ? ? ? :class="[clickTwoIdArr.includes(twoObj.id) ? 'job-active' :'']"
? ? ? ? ? ? ? ? ? ? ? ? ? v-for="(twoObj,i) in clickCateObj.list"
? ? ? ? ? ? ? ? ? ? ? ? ? :key="i" @click="clickTwoCatFun(twoObj)">{{twoObj.nameZh}}
? ? ? ? ? ? ? </span>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
</template>

<script>
? ? export default {
? ? ? ? name: "JobClassComp",
? ? ? ? data(){
? ? ? ? ? ? return{
? ? ? ? ? ? ? ? jobKeyWord:'',//職位關(guān)鍵詞
? ? ? ? ? ? ? ? searchFlag:false,//是否展示搜索框
? ? ? ? ? ? ? ? searchList:[],//搜索數(shù)據(jù)
? ? ? ? ? ? ? ? clickOneJobNameArr:[],//存儲(chǔ)點(diǎn)擊時(shí)一級(jí)分類
? ? ? ? ? ? ? ? clickTwoNameArr:[],//選中的二級(jí)分類
? ? ? ? ? ? ? ? clickTwoIdArr:[],//選中的二級(jí)分類
? ? ? ? ? ? ? ? clickCateObj:{},// 點(diǎn)擊選中的一級(jí)分類
? ? ? ? ? ? ? ? countObj:{},//二級(jí)職位被選中時(shí) 一級(jí)顯示數(shù)量
? ? ? ? ? ? ? ? searchDataList:[], //搜索數(shù)據(jù)
? ? ? ? ? ? ? ? allTwoClassList:[],//所有二級(jí)分類
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? props:{
? ? ? ? ? ? form: Object,
? ? ? ? ? ? isEndDateNow: Boolean,
? ? ? ? ? ? jobClassList:{
? ? ? ? ? ? ? ? type:Array,
? ? ? ? ? ? ? ? default() {
? ? ? ? ? ? ? ? ? ? return [];
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? computed: {
? ? ? ? ? ? listLength(){
? ? ? ? ? ? ? ? return this.jobClassList.length
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? watch:{
? ? ? ? ? ? jobKeyWord(val){
? ? ? ? ? ? ? ? if(val.length >0){
? ? ? ? ? ? ? ? ? ? this.searchList = this.searchDataList.filter(item =>{
? ? ? ? ? ? ? ? ? ? ? ? val = val.toUpperCase();
? ? ? ? ? ? ? ? ? ? ? ? let reg = new RegExp("(" + val + ")", "g");
? ? ? ? ? ? ? ? ? ? ? ? let nameVal = item.nameZh.replace(reg, "<span style='color:#437FFF;'>$1</span>");
? ? ? ? ? ? ? ? ? ? ? ? item.nameVal = nameVal;
? ? ? ? ? ? ? ? ? ? ? ? // ? ? return newstr;
? ? ? ? ? ? ? ? ? ? ? ? return item.nameZh.includes(val)
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? this.searchFlag = true
? ? ? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? ? ? this.searchList = [];
? ? ? ? ? ? ? ? ? ? this.searchFlag = false
? ? ? ? ? ? ? ? }

? ? ? ? ? ? },
? ? ? ? ? ? listLength(val,oldValue){
? ? ? ? ? ? ? ? /* ?console.log("val==",val)
? ? ? ? ? ? ? ? ? console.log("oldValue==",oldValue)*/
? ? ? ? ? ? ? ? if(oldValue === 0 && val >0){
? ? ? ? ? ? ? ? ? ? //console.log("--22--",this.jobClassList)
? ? ? ? ? ? ? ? ? ? this.clickOneJobNameArr.length ===0 ? this.clickOneJobNameArr.push(this.jobClassList[0].id ): '';
? ? ? ? ? ? ? ? ? ? Object.keys(this.clickCateObj).length===0 ? this.clickCateObj = this.jobClassList[0] :'';
? ? ? ? ? ? ? ? ? ? this.dealSearchData(); // 處理搜索職位數(shù)據(jù)
? ? ? ? ? ? ? ? ? // ?this.doAllTwoClassData() lzs
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? created() {
? ? ? ? ? ? if(this.jobClassList && this.jobClassList.length >0){
? ? ? ? ? ? ? ? this.clickOneJobNameArr.length ===0 ? this.clickOneJobNameArr.push(this.jobClassList[0].id ): '';
? ? ? ? ? ? ? ? Object.keys(this.clickCateObj).length===0 ? this.clickCateObj = this.jobClassList[0] :'';
? ? ? ? ? ? ? ? this.dealSearchData(); // 處理搜索職位數(shù)據(jù)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? clickSearchInput(){
? ? ? ? ? ? ? ? this.jobKeyWord.length > 0 ? this.searchFlag = true : this.searchFlag=false;
? ? ? ? ? ? },
? ? ? ? ? ? //input失去焦點(diǎn)
? ? ? ? ? ? blurSearch(){
? ? ? ? ? ? ? ? this.searchFlag = false;
? ? ? ? ? ? },
? ? ? ? ? ? downDrag(el){
? ? ? ? ? ? ? ? el.preventDefault();//阻止input失去焦點(diǎn)事件時(shí)的影響
? ? ? ? ? ? },
? ? ? ? ? ? //職位確認(rèn)
? ? ? ? ? ? jobSure(){
? ? ? ? ? ? ? ?// this.dialogVisible = false; //add lzs
? ? ? ? ? ? ? ? if(this.clickTwoNameArr.length >0){
? ? ? ? ? ? ? ? ? ? this.form.jobIntensionName = '';
? ? ? ? ? ? ? ? ? ? this.clickTwoNameArr.forEach(item =>{
? ? ? ? ? ? ? ? ? ? ? ? this.form.jobIntensionName = this.form.jobIntensionName + '，' + item.nameZh ;
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? this.form.jobIntensionName.length > 0 ? this.form.jobIntensionName = this.form.jobIntensionName.substring(1,this.form.jobIntensionName.length) :'';
? ? ? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? ? ? this.form.jobIntensionName = '';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.$emit('sureJobMethod',this.clickTwoNameArr)
? ? ? ? ? ? },
? ? ? ? ? ? clickJobItem(item){//點(diǎn)擊職位類別
? ? ? ? ? ? ? ? //console.log("item----",item)
? ? ? ? ? ? ? ? this.clickCateObj =item;
? ? ? ? ? ? ? ? //處理選中 顏色變化
? ? ? ? ? ? ? ? if(this.clickOneJobNameArr.length >0){
? ? ? ? ? ? ? ? ? ? this.clickOneJobNameArr.splice(0, 1);
? ? ? ? ? ? ? ? ? ? this.clickOneJobNameArr.push(item.id)
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? this.clickOneJobNameArr.push(item.id)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? //點(diǎn)擊二級(jí)職位名稱
? ? ? ? ? ? clickTwoCatFun(obj){
? ? ? ? ? ? ? ? //type: search two; =search是點(diǎn)擊的搜索框出現(xiàn)，否則就是點(diǎn)擊的二級(jí)
? ? ? ? ? ? ? ? // type === 'search' ? this.jobKeyWord = obj.nameZh : '';
? ? ? ? ? ? ? ? if(!this.clickTwoIdArr.includes(obj.id) && this.clickTwoIdArr.length ===1 ){
? ? ? ? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? ? ? ? ? message: '最多選擇1個(gè)職位類別哦',
? ? ? ? ? ? ? ? ? ? ? ? type: 'warning'
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? return
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(!this.clickTwoIdArr.includes(obj.id) && this.clickTwoIdArr.length<3){
? ? ? ? ? ? ? ? ? ? this.clickTwoNameArr.push(obj)
? ? ? ? ? ? ? ? ? ? this.clickTwoIdArr.push(obj.id)
? ? ? ? ? ? ? ? ? ? this.form.jobIntensionNameSel.push(obj.id)
? ? ? ? ? ? ? ? ? ? if(!this.countObj[obj.parentId]){
? ? ? ? ? ? ? ? ? ? ? ? this.countObj[obj.parentId] = 1
? ? ? ? ? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? ? ? ? ? this.countObj[obj.parentId]++;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? //要?jiǎng)h除的二級(jí)分類,改變選中顏色，改變一級(jí)分類統(tǒng)計(jì)數(shù)量
? ? ? ? ? ? delChoolseTwoItem(delObj){
? ? ? ? ? ? ? ? // var filtered = someArray.filter(function(el) { return el.Name != "Kristian"; });
? ? ? ? ? ? ? ? let index = this.clickTwoNameArr.findIndex(item =>{
? ? ? ? ? ? ? ? ? ? return item.id === delObj.id
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? let formIndex = this.form.jobIntensionNameSel.findIndex(idVal =>{
? ? ? ? ? ? ? ? ? ? return idVal === delObj.id
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? this.form.jobIntensionNameSel.splice(formIndex, 1)//刪除
? ? ? ? ? ? ? ? this.clickTwoNameArr.splice(index, 1)
? ? ? ? ? ? ? ? this.clickTwoIdArr.splice(index, 1)
? ? ? ? ? ? ? ? if(!this.countObj[delObj.parentId]){
? ? ? ? ? ? ? ? ? ? this.countObj[delObj.parentId] = 0
? ? ? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? ? ? this.countObj[delObj.parentId]--;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? //處理搜索的數(shù)據(jù)
? ? ? ? ? ? dealSearchData(){
? ? ? ? ? ? ? ? this.jobClassList.forEach(item =>{
? ? ? ? ? ? ? ? ? ? this.searchDataList = this.searchDataList.concat(item.list)
? ? ? ? ? ? ? ? })
? ? ? ? ? ? },

? ? ? ? }
? ? }
</script>

<style scoped lang="less">
? ? .zw-dialog{
? ? ? ? /* ?border: 1px solid red;*/
? ? ? ? width:880px;
? ? ? ? height:550px;
? ? ? ? background:rgba(255,255,255,1);

? ? ? ? .zw-top{
? ? ? ? ? ? height: 52px;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? /*border: 1px solid green;*/
? ? ? ? ? ? border-bottom: 1px solid #EFEFEF ;
? ? ? ? ? ? .zw-word{
? ? ? ? ? ? ? ? width: 200px;
? ? ? ? ? ? ? ? /* text-align: center;*/
? ? ? ? ? ? ? ? margin-left: 30px;
? ? ? ? ? ? ? ? line-height: 52px;
? ? ? ? ? ? ? ? font-size: 16px;
? ? ? ? ? ? ? ? color: #333333;
? ? ? ? ? ? }
? ? ? ? ? ? .zw-in{
? ? ? ? ? ? ? ? /* border: 1px solid blue;*/
? ? ? ? ? ? ? ? width: calc(100% - 200px);
? ? ? ? ? ? ? ? line-height: 52px;
? ? ? ? ? ? ? ? .zw-put{
? ? ? ? ? ? ? ? ? ? border-radius:15px;
? ? ? ? ? ? ? ? ? ? border:1px solid rgba(224,224,224,1);
? ? ? ? ? ? ? ? ? ? width: 200px;
? ? ? ? ? ? ? ? ? ? height: 30px;
? ? ? ? ? ? ? ? ? ? margin-left: 32px;
? ? ? ? ? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? ? ? ? ? padding-left: 20px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .in-put{
? ? ? ? ? ? ? ? ? ? width: 200px;
? ? ? ? ? ? ? ? ? ? height: 30px;
? ? ? ? ? ? ? ? ? ? /deep/ .el-input__inner{
? ? ? ? ? ? ? ? ? ? ? ? border-radius:15px;
? ? ? ? ? ? ? ? ? ? ? ? color: #999999;
? ? ? ? ? ? ? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? /deep/ input::-webkit-input-placeholder {
? ? ? ? ? ? ? ? ? ? ? ? /* WebKit browsers */
? ? ? ? ? ? ? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? ? ? ? ? ? ? color: #999999;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? /deep/ input:-moz-placeholder{
? ? ? ? ? ? ? ? ? ? ? ? /* Mozilla Firefox 4 to 18 */
? ? ? ? ? ? ? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? ? ? ? ? ? ? color: #999999;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? /deep/ input::-moz-placeholder{
? ? ? ? ? ? ? ? ? ? ? ? /* Mozilla Firefox 19+ */
? ? ? ? ? ? ? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? ? ? ? ? ? ? color: #999999;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? /deep/ input:-ms-input-placeholder{
? ? ? ? ? ? ? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? ? ? ? ? ? ? color: #999999;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .in-block{
? ? ? ? ? ? ? ? ? ? width: 200px;
? ? ? ? ? ? ? ? ? ? height: 290px;
? ? ? ? ? ? ? ? ? ? z-index: 11;
? ? ? ? ? ? ? ? ? ? box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
? ? ? ? ? ? ? ? ? ? position: relative;
? ? ? ? ? ? ? ? ? ? background: #ffffff;
? ? ? ? ? ? ? ? ? ? overflow: scroll;

? ? ? ? ? ? ? ? ? ? .in-ul{
? ? ? ? ? ? ? ? ? ? ? ? padding:5px 0px;
? ? ? ? ? ? ? ? ? ? ? ? .in-li{
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: #000000;
? ? ? ? ? ? ? ? ? ? ? ? ? ? padding: 10px 20px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height: 20px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 14px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background: #F7F9FD;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }


? ? ? ? ? ? }
? ? ? ? }
? ? ? ? .zw-middle{
? ? ? ? ? ? /*width: 100%;*/
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? /* ?border: 1px solid green;*/
? ? ? ? ? ? display: flex;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? padding-left: 30px;
? ? ? ? ? ? .zw-tag{
? ? ? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? ? ? border-radius:15px;
? ? ? ? ? ? ? ? border:1px solid rgba(67,127,255,1);
? ? ? ? ? ? ? ? padding: 5px 12px 5px 10px;
? ? ? ? ? ? ? ? margin-right: 16px;
? ? ? ? ? ? ? ? font-size:13px;
? ? ? ? ? ? ? ? color: #437FFF;

? ? ? ? ? ? ? ? i{
? ? ? ? ? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? ? ? ? ? padding-left: 4px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? .zw-more{
? ? ? ? ? ? ? ? color: #CCCCCC;
? ? ? ? ? ? ? ? font-size:13px;
? ? ? ? ? ? }
? ? ? ? ? ? .zw-sure{
? ? ? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? ? ? width: 72px;
? ? ? ? ? ? ? ? height: 28px;
? ? ? ? ? ? ? ? line-height: 28px;
? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? ? ? background:rgba(67,127,255,1);
? ? ? ? ? ? ? ? border-radius:15px;
? ? ? ? ? ? ? ? font-size:13px;
? ? ? ? ? ? ? ? color: #ffffff;
? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? ? right: 30px;
? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? .zw-main{
? ? ? ? ? ? display: flex;
? ? ? ? ? ? .zw-left{
? ? ? ? ? ? ? ? width: 200px;
? ? ? ? ? ? ? ? height: 443px;
? ? ? ? ? ? ? ? overflow: scroll;
? ? ? ? ? ? ? ? /*border: 1px solid red;*/
? ? ? ? ? ? ? ? .zw-ul{
? ? ? ? ? ? ? ? ? ? background:rgba(249,250,251,1);
? ? ? ? ? ? ? ? ? ? .zw-li{
? ? ? ? ? ? ? ? ? ? ? ? height: 50px;
? ? ? ? ? ? ? ? ? ? ? ? /* line-height: 50px;*/
? ? ? ? ? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? ? ? ? ? ? ? align-items: center;
? ? ? ? ? ? ? ? ? ? ? ? display: flex;
? ? ? ? ? ? ? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? ? ? ? ? ? ? border-left: 4px solid transparent;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? /*border: 1px solid pink;*/
? ? ? ? ? ? ? ? ? ? ? ? .li-num{
? ? ? ? ? ? ? ? ? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: #437FFF;
? ? ? ? ? ? ? ? ? ? ? ? ? ? width: 16px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 16px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height: 16px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size:13px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? color:#ffffff;
? ? ? ? ? ? ? ? ? ? ? ? ? ? margin-left: 8px;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .li-active{
? ? ? ? ? ? ? ? ? ? ? ? border-left: 4px solid #437FFF;
? ? ? ? ? ? ? ? ? ? ? ? background:rgba(255,255,255,1);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? .zw-right{
? ? ? ? ? ? ? ? /*border: 1px solid black;*/

? ? ? ? ? ? ? ? width: calc(100% - 200px);
? ? ? ? ? ? ? ? height: 443px;
? ? ? ? ? ? ? ? overflow: scroll;
? ? ? ? ? ? ? ? .right-main{

? ? ? ? ? ? ? ? ? ? .job-tag{
? ? ? ? ? ? ? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? ? ? ? ? ? ? margin: 16px 20px;
? ? ? ? ? ? ? ? ? ? ? ? width: 182px;
? ? ? ? ? ? ? ? ? ? ? ? font-size:14px;
? ? ? ? ? ? ? ? ? ? ? ? color: #444444;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .job-active{
? ? ? ? ? ? ? ? ? ? ? ? color: #437FFF;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }

? ? ? ? }
? ? }
</style>