- <template>
- ? ? <div class="zw-dialog">
- ? ? ? ? <div class="zw-top">
- ? ? ? ? ? ? <p class="zw-word">请选择职位</p>
- ? ? ? ? ? ? <div class="zw-in">
- ? ? ? ? ? ? ? ? <!-- <input class="zw-put" v-model="jobKeyWord" placeholder="请输入职位关键词" />-->
- ? ? ? ? ? ? ? ? <el-input ?class="in-put" v-model="jobKeyWord"
- ? ? ? ? ? ? ? ? ? ? ? ? ? ?@click.native="clickSearchInput"
- ? ? ? ? ? ? ? ? ? ? ? ? ? ?clearable
- ? ? ? ? ? ? ? ? ? ? ? ? ? ?@blur="blurSearch"
- ? ? ? ? ? ? ? ? ? ? ? ? ? ?placeholder="请输入职位关键词"></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个职位类别</span>
- ? ? ? ? ? ? <span class="zw-sure" @click="jobSure">确认</span>
- ? ? ? ? </div>
- ? ? ? ? <div class="zw-main">
- ? ? ? ? ? ? <div class="zw-left">
- ? ? ? ? ? ? ? ? <ul class="zw-ul">
- ? ? ? ? ? ? ? ? ? ? <!--<li class="zw-li li-active">产品/运营/新媒体 <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">互联网/移动互联网/电子商务</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:'',//职位关键词
- ? ? ? ? ? ? ? ? searchFlag:false,//是否展示搜索框
- ? ? ? ? ? ? ? ? searchList:[],//搜索数据
- ? ? ? ? ? ? ? ? clickOneJobNameArr:[],//存储点击时一级分类
- ? ? ? ? ? ? ? ? clickTwoNameArr:[],//选中的二级分类
- ? ? ? ? ? ? ? ? clickTwoIdArr:[],//选中的二级分类
- ? ? ? ? ? ? ? ? clickCateObj:{},// 点击选中的一级分类
- ? ? ? ? ? ? ? ? countObj:{},//二级职位被选中时 一级显示数量
- ? ? ? ? ? ? ? ? searchDataList:[], //搜索数据
- ? ? ? ? ? ? ? ? allTwoClassList:[],//所有二级分类
- ? ? ? ? ? ? }
- ? ? ? ? },
- ? ? ? ? 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(); // 处理搜索职位数据
- ? ? ? ? ? ? ? ? ? // ?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(); // 处理搜索职位数据
- ? ? ? ? ? ? }
- ? ? ? ? },
- ? ? ? ? methods:{
- ? ? ? ? ? ? clickSearchInput(){
- ? ? ? ? ? ? ? ? this.jobKeyWord.length > 0 ? this.searchFlag = true : this.searchFlag=false;
- ? ? ? ? ? ? },
- ? ? ? ? ? ? //input失去焦点
- ? ? ? ? ? ? blurSearch(){
- ? ? ? ? ? ? ? ? this.searchFlag = false;
- ? ? ? ? ? ? },
- ? ? ? ? ? ? downDrag(el){
- ? ? ? ? ? ? ? ? el.preventDefault();//阻止input失去焦点事件时的影响
- ? ? ? ? ? ? },
- ? ? ? ? ? ? //职位确认
- ? ? ? ? ? ? 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){//点击职位类别
- ? ? ? ? ? ? ? ? //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)
- ? ? ? ? ? ? ? ? }
- ? ? ? ? ? ? },
- ? ? ? ? ? ? //点击二级职位名称
- ? ? ? ? ? ? clickTwoCatFun(obj){
- ? ? ? ? ? ? ? ? //type: search two; =search是点击的搜索框出现,否则就是点击的二级
- ? ? ? ? ? ? ? ? // type === 'search' ? this.jobKeyWord = obj.nameZh : '';
- ? ? ? ? ? ? ? ? if(!this.clickTwoIdArr.includes(obj.id) && this.clickTwoIdArr.length ===1 ){
- ? ? ? ? ? ? ? ? ? ? this.$message({
- ? ? ? ? ? ? ? ? ? ? ? ? message: '最多选择1个职位类别哦',
- ? ? ? ? ? ? ? ? ? ? ? ? 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]++;
- ? ? ? ? ? ? ? ? ? ? }
- ? ? ? ? ? ? ? ? }
- ? ? ? ? ? ? },
- ? ? ? ? ? ? //要删除的二级分类,改变选中颜色,改变一级分类统计数量
- ? ? ? ? ? ? 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]--;
- ? ? ? ? ? ? ? ? }
- ? ? ? ? ? ? },
- ? ? ? ? ? ? //处理搜索的数据
- ? ? ? ? ? ? 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>