123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <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>
|