123 lines
3.6 KiB
JavaScript
123 lines
3.6 KiB
JavaScript
/**
|
|
* 顶部header
|
|
*/
|
|
Vue.component("screen-foot", {
|
|
template: `
|
|
<div class="foot-max" ref="foot" @mouseout="footMouseout" @mouseover="footMouseover">
|
|
<div class="foot-min">
|
|
<div class="foot-content">
|
|
<div class="foot-mouse"></div>
|
|
<el-row>
|
|
<el-col :span="1">
|
|
<div class="foot-content-left" @click="leftClick"></div>
|
|
</el-col>
|
|
<el-col :span="22">
|
|
<div class="foot-content-tabs">
|
|
<div class="foot-content-tabs-min" :style="{'width': width+'px','left':index*250+'px'}" ref="tabs">
|
|
<div class="foot-tabs" v-for="(item,i) in data" @click="footTabs(i)">
|
|
<div :class="active==i?'foot-tabs-bgd active':'foot-tabs-bgd'">{{item.text}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="1">
|
|
<div class="foot-content-right" @click="rightClick"></div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
props: {
|
|
data:{
|
|
type:Array
|
|
},
|
|
indexes:{
|
|
type:Number
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
bottom:false,
|
|
width:0,
|
|
index:2,
|
|
active:0,
|
|
length: 0,
|
|
interval:undefined,
|
|
}
|
|
},
|
|
mounted(){
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init(){
|
|
this.divWidth();
|
|
this.active = this.indexes
|
|
this.index = this.indexes
|
|
var that = this
|
|
// this.interval = setInterval(that.timer,600000);
|
|
},
|
|
footMouseover(){
|
|
let bottom = this.$refs.foot
|
|
if(this.bottom == false){
|
|
bottom.style.bottom = 0
|
|
this.bottom =true
|
|
}
|
|
},
|
|
footMouseout(){
|
|
let bottom = this.$refs.foot
|
|
if(this.bottom == true){
|
|
bottom.style.bottom = -90+'px'
|
|
this.bottom =false
|
|
}
|
|
},
|
|
divWidth(){
|
|
var width = this.data.length * 250
|
|
this.width = width
|
|
this.length =this.data.length
|
|
},
|
|
leftClick(){
|
|
let slider = this.$refs.tabs
|
|
if(slider.style.left == '500px'){
|
|
|
|
}else{
|
|
this.index = this.index+1
|
|
this.active = this.active-1
|
|
}
|
|
this.$emit('indexes',this.active);
|
|
},
|
|
rightClick(){
|
|
let slider = this.$refs.tabs
|
|
if(slider.style.left == -(this.length - 3)*250+'px'){
|
|
|
|
}else{
|
|
this.index = this.index-1
|
|
this.active = this.active+1
|
|
}
|
|
this.$emit('indexes',this.active);
|
|
},
|
|
footTabs(i){
|
|
this.active = i
|
|
this.index = 2 - i;
|
|
this.$emit('indexes',this.active);
|
|
},
|
|
timer(){
|
|
let slider = this.$refs.tabs
|
|
if(slider.style.left == -(this.length - 3)*250+'px'){
|
|
this.index = 2
|
|
this.active = 0
|
|
}else{
|
|
this.index = this.index - 1
|
|
this.active = 2 - this.index
|
|
}
|
|
this.$emit('indexes',this.active);
|
|
}
|
|
},
|
|
watch:{
|
|
index:function () {
|
|
this.init()
|
|
}
|
|
},
|
|
|
|
})
|