swipers.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <div style="width: 100%;height: 450px;position: relative;" class="box">
  3. <div style="position: absolute;left: 0;top: 30px; width: 150px;height: 450px;margin-top: -30px; text-align: center;
  4. line-height: 80px;background-color: #1074bf;">
  5. <ul class="ul1" >
  6. <li @mouseenter="mouseenter(1)" :class="e==1?'active':'hover'">按业务区域 <i class="el-icon-arrow-right" ></i></li>
  7. <li @mouseenter="mouseenter(2)" :class="e==2?'active':'hover'">按项目类型 <i class="el-icon-arrow-right" ></i></li>
  8. <li @mouseenter="mouseenter(3)" :class="e==3?'active':'hover'">按项目方向 <i class="el-icon-arrow-right" ></i></li>
  9. <li @mouseenter="mouseenter(4)" :class="e==4?'active':'hover'">按项目阶段 <i class="el-icon-arrow-right" ></i></li>
  10. </ul>
  11. </div>
  12. <div style="position: absolute;top: 0;left: 160px;background: #0961ab;">
  13. <ul class="ul2" style="width: 120px;height: 450px;">
  14. <li v-for="(i,index) in data" style="line-height: 50px;text-indent: 10px;">{{i.label}}</li>
  15. </ul>
  16. </div>
  17. <div style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-120%);width: 500px;height: 100px;text-align: center;">
  18. <div style="font-size: 33px;font-weight:600;margin-bottom: 10px;">一站式<span style="color: #7eb7e4;">全球能源发展</span>合作生态平台</div>
  19. <div style="font-size: 18px;"><span style="margin-right: 10px;">整合全球能源互联网资源</span> <span>打造创新绿色能源生态圈</span></div>
  20. </div>
  21. <div style="position: absolute;left: 80%;top: 50%;width: 200px;height: 70px;background: rgba(119,186,64,0.8);">
  22. asddddddd
  23. </div>
  24. <div style="position: absolute;left: 80%;top: 70%;width: 200px;height: 70px;background: rgba(91,135,210,0.8);">
  25. asddddddd
  26. </div>
  27. </div>
  28. </template>
  29. <script>
  30. export default {
  31. name: 'swipers',
  32. // extends:[ecology],
  33. components:{
  34. },
  35. data () {
  36. return {
  37. input: '',
  38. data:[],
  39. e:1,
  40. data1:[{
  41. label:'中国',
  42. value:'1'
  43. },{
  44. label:'非洲',
  45. value:'1'
  46. },{
  47. label:'东南亚',
  48. value:'1'
  49. },{
  50. label:'东北亚',
  51. value:'1'
  52. },{
  53. label:'欧洲',
  54. value:'1'
  55. },{
  56. label:'北美洲',
  57. value:'1'
  58. },{
  59. label:'中南美洲',
  60. value:'1'
  61. },{
  62. label:'其他',
  63. value:'1'
  64. }],
  65. data2:[{
  66. label:'中国非洲',
  67. value:'1'
  68. },{
  69. label:'中国非洲',
  70. value:'1'
  71. },{
  72. label:'东南亚东北亚',
  73. value:'1'
  74. },{
  75. label:'东南亚东北亚',
  76. value:'1'
  77. },{
  78. label:'欧洲',
  79. value:'1'
  80. },{
  81. label:'北美洲',
  82. value:'1'
  83. },{
  84. label:'北美洲',
  85. value:'1'
  86. },{
  87. label:'其他',
  88. value:'1'
  89. }],
  90. }
  91. },
  92. mounted(){
  93. this.initData()
  94. },
  95. methods:{
  96. initData(){
  97. this.data=this.data1
  98. },
  99. mouseenter(e){
  100. this.e=e
  101. if(e==2 || e==4){
  102. this.data=this.data2
  103. }else {
  104. this.data=this.data1
  105. }
  106. }
  107. }
  108. }
  109. </script>
  110. <style>
  111. .ul1,.ul2 {
  112. padding: 0;
  113. margin: 0;
  114. }
  115. .ul1 li {
  116. width: 150px;
  117. list-style:none;
  118. }
  119. .ul2 li {
  120. width: 120px;
  121. list-style:none;
  122. }
  123. .ul1 li:hover,
  124. .ul2 li:hover,
  125. .ul1 li:active,
  126. .ul2 li:active{
  127. background: #0961ab;
  128. }
  129. .active {
  130. background: #0961ab;
  131. }
  132. .hover {
  133. background: #1074bf;
  134. }
  135. .box {
  136. background-image:url('../assets/20200601171245.png');
  137. background-size: 100% 100%;
  138. }
  139. </style>