<template>
  <div class="layout">
    <slide :items="items" :ctrl="true">
      <div slot="item" slot-scope="{data}" class="item" @click="clickHandle(data)">
        <div class="top">
          <img :src="data.x.background" :srcset="data.x.background + ' 1x,' + data['2x'].background + ' 2x'">
        </div>
        <h3 class="title">{{data.title}}</h3>
        <div class="content">
          <img :src="data.x.image" :srcset="data.x.image + ' 1x,' + data['2x'].image + ' 2x'">
        </div>
      </div>

      <a slot="ctrl-item" class="ctrl-item" slot-scope="{active}" :class="{active: active}"></a>
    </slide>
  </div>
</template>

<script>
import slide from '@/components/slide'

export default {
  name: 'home',
  data () {
    return {
      items: [
        {
          view: 'collection',
          title: '藏品',
          'x': {
            background: require('@/assets/images/item_top1.png'),
            image: require('@/assets/images/item1.png')
          },
          '2x': {
            background: require('@/assets/images/item_top1@2x.png'),
            image: require('@/assets/images/item1@2x.png')
          }
        },
        {
          view: 'country_time',
          title: '国度',
          'x': {
            background: require('@/assets/images/item_top2.png'),
            image: require('@/assets/images/item2.png')
          },
          '2x': {
            background: require('@/assets/images/item_top2@2x.png'),
            image: require('@/assets/images/item2@2x.png')
          }
        },
        {
          view: 'exhibition',
          title: '展馆',
          'x': {
            background: require('@/assets/images/item_top3.png'),
            image: require('@/assets/images/item3.png')
          },
          '2x': {
            background: require('@/assets/images/item_top3@2x.png'),
            image: require('@/assets/images/item3@2x.png')
          }
        }
      ]
    }
  },
  methods: {
    clickHandle (data) {
      this.$router.push({name: data.view})
    }
  },
  components: {slide}
}
</script>

<style scoped>
.layout {
  width: 100%;
  height: 100%;
}

.item {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  bottom: calc(8% + 16px);
  overflow: hidden;
}

.top {
  text-align: center;
  position: absolute;
  top: 0;
}

.top img {
  width: 72%;
  transform: translateY(-50%);
}

.title {
  position: absolute;
  top: 30%;
  width: 100%;
  font-size: 20px;
  font-weight: 300;
  color: #B48A4E;
  text-align: center;
}

.content {
  position: absolute;
  bottom: 0;
  text-align: center;
  background: url('~@/assets/images/light.png') no-repeat bottom center / 61.6% auto;
  width: 100%;
  padding: 0 15% 18%;
}

.content img {
  width: 92%;
}

.ctrl-item {
  --color: #B48A4E;
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--color);
  margin: 0 14px;
  transform: rotateZ(45deg)
}

.ctrl-item.active {
  background: var(--color);
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .content {
    background-image: url('~@/assets/images/light@2x.png');
  }
}
</style>
