<template>
  <div style="overflow:hidden">
    <!-- 首页的样式 -->
    <div id="index">
      <!-- 首页背景图部分 -->

        <div class="index-bg">
          <!-- 首页第一个背景图 -->
          <div class="backimg">
            <img src="../assets/image/img/index_top.png"  class="w100-img" alt/>
          </div>
          <!-- 首页第二个背景图 -->
          <div class="backimg-two flex-row">
            <img src="../assets/image/img/index_mid.png" alt style="width: 30%;"/>
          </div>

          <div class="backimg3 flex-row">
            <img src="../assets/image/img/red_zui.png" alt="" style="width: 18%">
              <div style="width: 60%;"  :style="{'height': lunImgHeight}" class="first">
                <el-carousel indicator-position="outside"   ref="abc">
                  <el-carousel-item v-for="item in imgList" :key="item" >
                    <img :src="item" alt="" style="width: 100%;" >
                  </el-carousel-item>
                </el-carousel>
              </div>
<!--            <img src="../assets/image/img/lun_1.png" alt="">-->
            <img src="../assets/image/img/red_mian.png" alt="" style="width: 18%">
          </div>



          <div class="backimg ">
            <img src="../assets/image/img/index_map.png" alt="" class="w100-img"/>
          </div>


          <div class="backimg-desc flex-row">
            <img src="../assets/image/img/white_3.png" alt="" style="width: 100%;height: 100%">
          </div>


          <div class="flex-row  desc-img-list" :style="{'height':descImgListHeight}">
            <div class="flex-row" :style="{'margin-top': descImgListHeightTop}" style="width: 100%">
            <img src="../assets/image/img/desc_1.png" alt="" class="desc_1" style="width: 30%">
            <img src="../assets/image/img/desc_2.png" alt="" class="desc_2" style="width: 30%">
            <img src="../assets/image/img/desc_3.png" alt="" class="desc_3" style="width: 30%">
            </div>
          </div>

        </div>
      </div>

  </div>
</template>

<script>
import '../assets/css/index.scss'

export default {
  data() {
    return {
      // imgList:[require("@/assets/image/img/lun_1.png"),require("@/assets/image/img/lun_1.png"),require("@/assets/image/img/lun_1.png")]
      imgList:[require("@/assets/image/img/lun_1.png")],
    }
  },
  created() {


  },

  mounted: function () {


    const element = document.querySelector('.el-carousel__container');
    console.log(element)
    // var w = getComputedStyle(element).getPropertyValue("--my-varwidth");

    const h =  window.innerWidth/100*60/1180*677+'px'
    element.style.setProperty("--my--varheight",h);


  },
  computed:{
    lunImgHeight:function (){

      let w = window.innerWidth/100*60
      return w/1180*677 +'px';
    },
    descImgListHeight:function (){

      return (window.innerWidth/1920*320) +'px';
    },
    descImgListHeightTop:function (){
      return 0-(window.innerWidth/1920*320)  +'px';
    }
  },
  methods: {


  },
  destroyed() {

  },
  components: {

  }
}


</script>

<style lang="scss">
   .el-carousel__container{
     --my--varheight:300px;
      height: var(--my--varheight);
    }

   .el-carousel__indicators--outside button{
     background-color: #f5f5f5;
   }
</style>
