<template>
  <el-row>
    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
      <div class="slideshow">
        <el-carousel trigger="click" height="38vw">
          <el-carousel-item v-for="(item,index) in bannerDate" :key="index">
            <div v-show="$i18n.locale  === 'cn'" @click="clickTo(item.link)">
              <img :src="item.imgurl" alt="">
<!--              <div class="bottom_title">-->
<!--                <el-row>-->
<!--                  <el-col :offset="2" :span="18">-->
<!--                    {{ item.title }}-->
<!--                  </el-col>-->
<!--                </el-row>-->
<!--              </div>-->
            </div>
            <div v-show="$i18n.locale  === 'en'" @click="clickTo(item.enLink)">
              <img :src="item.imgurl" alt="">
<!--              <div class="bottom_title">-->
<!--                <el-row>-->
<!--                  <el-col :offset="2" :span="18">-->
<!--                    {{ item.enTitle }}-->
<!--                  </el-col>-->
<!--                </el-row>-->
<!--              </div>-->
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {banner} from "@/api";

export default {
  name: "carousel",
  data() {
    return {
      bannerDate: [],
    }
  },
  created() {
    this.getBanner()
  },
  methods: {
    clickTo(link) {
      //console.log(link)
      window.location.href = link;//当前标签页
    },
    getBanner() {
      banner("NEd5n92EMIpyyBslaNqsRgE").then(res => {
        this.bannerDate = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '../css/comment.css';

.slideshow {
  width: 100%;

  .el-carousel__arrow {
    top: 93%;
    display: block;
  }

  .bottom_title {
    z-index: 99;
    width: 100%;
    height: 3.6vw;
    background: #1956BC;
    opacity: 0.89;
    position: absolute;
    bottom: 0;
    line-height: 3.6vw;
    font-size: 2rem;
    font-family: "微软雅黑";
    font-weight: 400;
    color: #FFFFFF;
  }

  img {
    width: 100%;

  }
}

</style>
