dev/dcp-web-gate/src_old/views/swipers.vue

<template>
    <div style="width: 100%;height: 450px;position: relative;" class="box">
        <div style="position: absolute;left: 0;top: 30px; width: 150px;height: 450px;margin-top: -30px; text-align: center;
        line-height: 80px;background-color: #1074bf;">
            <ul class="ul1" >
                <li @mouseenter="mouseenter(1)" :class="e==1?'active':'hover'">按业务区域 <i class="el-icon-arrow-right" ></i></li>
                <li @mouseenter="mouseenter(2)" :class="e==2?'active':'hover'">按项目类型 <i class="el-icon-arrow-right" ></i></li>
                <li @mouseenter="mouseenter(3)" :class="e==3?'active':'hover'">按项目方向 <i class="el-icon-arrow-right" ></i></li>
                <li @mouseenter="mouseenter(4)" :class="e==4?'active':'hover'">按项目阶段 <i class="el-icon-arrow-right" ></i></li>
            </ul>
        </div>
        <div style="position: absolute;top: 0;left: 160px;background: #0961ab;">
            <ul class="ul2" style="width: 120px;height: 450px;">
                <li v-for="(i,index) in data" style="line-height: 50px;text-indent: 10px;">{{i.label}}</li>
            </ul>
        </div>
        <div style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-120%);width: 500px;height: 100px;text-align: center;">
            <div style="font-size: 33px;font-weight:600;margin-bottom: 10px;">一站式<span style="color: #7eb7e4;">全球能源发展</span>合作生态平台</div>
            <div style="font-size: 18px;"><span style="margin-right: 10px;">整合全球能源互联网资源</span> <span>打造创新绿色能源生态圈</span></div>
        </div>
        <div style="position: absolute;left: 80%;top: 50%;width: 200px;height: 70px;background: rgba(119,186,64,0.8);">
            asddddddd
        </div> 
        <div style="position: absolute;left: 80%;top: 70%;width: 200px;height: 70px;background: rgba(91,135,210,0.8);">
            asddddddd
        </div> 
      </div> 
</template>
<script>
export default {
name: 'swipers',
// extends:[ecology],
components:{
  
},
data () {
  return {
   input: '',
   data:[],
   e:1,
   data1:[{
       label:'中国',
       value:'1'
   },{
       label:'非洲',
       value:'1'
   },{
       label:'东南亚',
       value:'1'
   },{
       label:'东北亚',
       value:'1'
   },{
       label:'欧洲',
       value:'1'
   },{
       label:'北美洲',
       value:'1'
   },{
       label:'中南美洲',
       value:'1'
   },{
       label:'其他',
       value:'1'
   }],
   data2:[{
       label:'中国非洲',
       value:'1'
   },{
       label:'中国非洲',
       value:'1'
   },{
       label:'东南亚东北亚',
       value:'1'
   },{
       label:'东南亚东北亚',
       value:'1'
   },{
       label:'欧洲',
       value:'1'
   },{
       label:'北美洲',
       value:'1'
   },{
       label:'北美洲',
       value:'1'
   },{
       label:'其他',
       value:'1'
   }],
  }
},
mounted(){
    this.initData()
},
methods:{
    initData(){
        this.data=this.data1
    },
    mouseenter(e){
        this.e=e
        if(e==2 || e==4){
            this.data=this.data2
        }else {
            this.data=this.data1
        }
    }
}
}
</script>
<style>

.ul1,.ul2 {
    padding: 0;
    margin: 0;
}
.ul1 li {
    width: 150px;
    list-style:none;
}
.ul2 li {
    width: 120px;
    list-style:none;
}
.ul1 li:hover, 
.ul2 li:hover,
.ul1 li:active, 
.ul2 li:active{
    background: #0961ab;
}
.active {
    background: #0961ab;
}
.hover {
    background: #1074bf;

}
.box {
    background-image:url('../assets/20200601171245.png');
    background-size: 100% 100%;
}
</style>