<template>
  <div class="bannerBox">
    <q-carousel
      v-model="slide"
      swipeable
      animated
      navigation
      height="100%"
      autoplay
      infinite
      control-type="outline"
    >
      <template v-slot:navigation-icon="{ active, onClick }">
        <div v-if="active" @click="onClick" class="activeBtn"></div>
        <div v-else @click="onClick" class="parmaryBtn"></div>
      </template>
      <q-carousel-slide
        v-for="item in bannerList"
        :key="item.id"
        :name="item.name"
        :img-src="item.url"
      >
        <div class="conbox">
          <div class="con1"><span class="jh">甲鹤-</span>特色教室</div>
          <div class="con2">
            这里给一点小文字介绍什么的最好，这里给一点小文字介绍什么的最好，这里给一点
            小文字介绍什么的最好。
          </div>
          <div class="con3"></div>
          <div class="btn">查看更多</div>
        </div>
      </q-carousel-slide>
    </q-carousel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      slide: "first",
      bannerList: [
        {
          id: 1,
          name: "first",
          url: require("../../assets/images/index/banner_bg.png"),
        },
        {
          id: 2,
          name: "second",
          url: require("../../assets/images/index/banner_bg.png"),
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.bannerBox {
  width: 100%;
  height: 39.0625vw;
  position: relative;
}
.conbox {
  position: absolute;
  top: 9.635vw;
  left: 10.208vw;
}
.con1 {
  width: calc(845 / 1920 * 100%);
  white-space: nowrap;
  // font-size: 100px;
  font-size: 5.208vw;
  color: #111111;
  margin-bottom: 3.125vw;
  .jh {
    font-family: "pingfang-b" !important;
  }
}
.con2 {
  width: 38.489vw;
  font-size: 20px !important;
  font-size: 1.041vw;
  color: #111111;
  padding-bottom: 3.593vw;
}
.con3 {
  width: 31.041vw;
  height: 1px;
  background-color: #111111;
  margin-bottom: 4.01vw;
}
.btn {
  width: 9.375vw;
  height: 2.916vw;
  background-color: #45766dff;
  // font-size: 24px !important;
  font-size: 1.249vw;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
}
.activeBtn {
  width: 2.083vw;
  height: 0.52vw;
  background-color: #111111;
  border-radius: 5px;
  margin: 0 0.26vw;
}
.parmaryBtn {
  width: 1.041vw;
  height: 0.52vw;
  background-color: #cccccc;
  border-radius: 5px;
  margin: 0 0.26vw;
}
</style>