189 lines
4.5 KiB
Vue
189 lines
4.5 KiB
Vue
<template>
|
|
<div class="join-us-tabs " :class="{'mask':isMobile,'expand':isExpand}" >
|
|
<div class="join-us-tabs-options">
|
|
<h3 class="join-us-tabs-title">Position</h3>
|
|
<ul>
|
|
<li class="join-us-tabs-item" @click="handleSelect(item)" v-for="(item,index) in options" :key="'option_'+index" :class="{'active':active===item.id}">
|
|
{{item.name}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- <div class='join-mask' :class="{'isExpand':isExpand}" v-if="isMobile" @click="isExpand=!isExpand">-->
|
|
<!-- <van-icon name="arrow-down" class="join-mask-arrow" />-->
|
|
<!-- </div>-->
|
|
<div class="join-us-tabs-content" v-html="content"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "JoinUsTabs",
|
|
data(){
|
|
return {
|
|
isMobile:false,
|
|
isExpand:true,
|
|
}
|
|
},
|
|
mounted(){
|
|
this.handleIsMobile()
|
|
window.addEventListener('resize',this.handleIsMobile)
|
|
},
|
|
props:{
|
|
options:{
|
|
default:()=>[],
|
|
type:Array
|
|
},
|
|
active:{
|
|
default:'',
|
|
type:String
|
|
},
|
|
content:{
|
|
default:'',
|
|
type:String
|
|
}
|
|
},
|
|
methods:{
|
|
handleSelect(item){
|
|
this.$emit('handleSelect',item)
|
|
},
|
|
handleIsMobile(){
|
|
const clientWidth=document.documentElement.clientWidth;
|
|
this.isMobile=clientWidth<=750
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.join-us-tabs{
|
|
padding-top: .97rem;
|
|
padding-bottom: 1.57rem;
|
|
&-options{
|
|
display: inline-block;
|
|
max-width: 3.02rem;
|
|
width: 100%;
|
|
margin-right: 1.28rem;
|
|
}
|
|
&-content{
|
|
padding-top: .5rem;
|
|
vertical-align: top;
|
|
max-width: 8.7rem;
|
|
display: inline-block;
|
|
width: calc( 100% - 4.38rem );
|
|
min-height: 2rem;
|
|
}
|
|
.join-mask{
|
|
display: none;
|
|
}
|
|
&-item{
|
|
font-size: .16rem;
|
|
font-family: Manrope;
|
|
font-weight: 400;
|
|
color: #302D2C;
|
|
border-bottom: 1px solid #EDEDED;
|
|
min-height: .7rem;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: .14rem;
|
|
cursor: pointer;
|
|
&.active,&:hover{
|
|
color: #F49F00;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
&-title{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: .58rem;
|
|
background: #342927;
|
|
font-size: .16rem;
|
|
font-family: Manrope;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px){
|
|
.join-us-tabs{
|
|
padding-top: .5rem;
|
|
&.mask{
|
|
height: 3.5rem;
|
|
position: relative;
|
|
overflow-y: hidden;
|
|
overflow-x: visible;
|
|
&.expand{
|
|
height:auto;
|
|
overflow-y: visible;
|
|
}
|
|
}
|
|
.join-mask{
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
&.isExpand{
|
|
.join-mask-arrow{
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
&-arrow{
|
|
transition: all .3s ease-in;
|
|
line-height: .4rem;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
&:before{
|
|
content: '';
|
|
display: block;
|
|
height: .85rem;
|
|
background: linear-gradient(to bottom,transparent 2%,#F8F9F9);
|
|
background: -ms-linear-gradient(to bottom,transparent 2%,#F8F9F9);
|
|
background:-moz-linear-gradient(to bottom,transparent 2%,#F8F9F9);/*火狐*/
|
|
background: -webkit-linear-gradient(to bottom,transparent 2%,#F8F9F9);
|
|
background: -o-linear-gradient(to bottom,transparent 2%,#F8F9F9)
|
|
}
|
|
&:after{
|
|
content: '';
|
|
display: block;
|
|
min-height: .4rem;
|
|
background-color: #eee;
|
|
border-radius: .5rem;
|
|
}
|
|
}
|
|
&-options{
|
|
display: block;
|
|
max-width: 100%;
|
|
width: 5.18rem;
|
|
margin: 0 auto;
|
|
}
|
|
&-content{
|
|
max-width: 100%;
|
|
padding-left: .15rem;
|
|
padding-right: .15rem;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
min-height: 2rem;
|
|
}
|
|
&-item{
|
|
font-size: .26rem;
|
|
min-height: .88rem;
|
|
padding-left: .16rem;
|
|
border-color: #EDEDED;
|
|
&.active,&:hover{
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
&-title{
|
|
height: .96rem;
|
|
font-size: .38rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|