<template>
  <div class="full-width full-height flex flex-center">
    <a-carousel
      :autoPlay="true"
      animation-name="card"
      show-arrow="never"
      indicator-position="outer"
      indicator-type="never"
      move-speed="700"
      :style="{
        width: '110%',
        height: '200px'
      }"
    >
      <a-carousel-item
        v-for="item in data"
        :style="{
          width: '100%',
          display: 'flex',
          marginTop: '10px',
          'justify-content': 'center',
          'align-items': 'center'
        }"
      >
        <div class="flex box">
          <img class="ico1 ml-5" :src="item.defaultImg" />
          <div class="ml-5 block">
            <div class="title flex flex-center-between">
              <div class="ml-5">{{ item.title }}</div>
            </div>
            <div class="mt-5 block">
              <div class="bold xz-number">{{ item.viewNum }}</div>
              <div class="grey-f">总阅读数</div>
            </div>
          </div>
        </div>
      </a-carousel-item>
    </a-carousel>
  </div>
</template>

<script>
import crypto from '@/utils/crypto.js'

export default {
  data() {
    return {
      data: []
    }
  },
  mounted() {
    this.getBigList()
  },
  methods: {
    getBigList() {
      const data = {
        size: 10,
        current: 1
      }
      this.$api.biz.bigList(data).then(res => {
        let result = JSON.parse(crypto.decryptDES(res, crypto.desKey))
        if (result.code === 200) {
          this.data = result.data.records
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ico1 {
  height: 120px;
  width: 80px;
}
.lin {
  background: #258e9b;
  width: 5px;
  height: 70%;
  border-radius: 10px;
}
.box {
  align-items: center;
  border: 1px solid #1b6ad2;
  width: 300px;
  height: 140px;
  margin-top: -40px;
  background: rgba(11, 59, 94, 1);
}
.title {
  width: 200px;
  height: 40px;
  color: white;
  background-size: 100% 100%;
  background-image: url('@/assets/biz-img/jb.png');
}
.number {
  font-size: 26px;
  color: #f3a845;
}
.xz-number {
  font-size: 26px;
  color: #05f1dd;
}
</style>
