<template>
  <div class="ct-layout">
    <div class="content">
      <div v-for="(item, i) in items" :key="'country' + i" class="ct-item">
        <div class="country">
          <img :src="item.x.country" alt="" :srcset="item.x.country + ' 1x,' + item.tx.country + ' 2x'">
        </div>
        <div class="relic">
          <img :src="item.x.relic" alt="" :srcset="item.x.relic + ' 1x,' + item.tx.relic + ' 2x'">
          <h3 v-html="item.title"></h3>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'country_time',
  data () {
    return {
      items: [
        {
          title: '·伊兹尼克瓶<br>十四世纪',
          x: {
            country: require('@/assets/images/country_1.png'),
            relic: require('@/assets/images/relic_1.png')
          },
          tx: {
            country: require('@/assets/images/country_1@2x.png'),
            relic: require('@/assets/images/relic_1@2x.png')
          }
        },
        {
          title: '牧童归家·<br>中国晚清时期',
          x: {
            country: require('@/assets/images/country_2.png'),
            relic: require('@/assets/images/relic_2.png')
          },
          tx: {
            country: require('@/assets/images/country_2@2x.png'),
            relic: require('@/assets/images/relic_2@2x.png')
          }
        },
        {
          title: '·陶制火鸡造型盖碗<br>十四世纪',
          x: {
            country: require('@/assets/images/country_3.png'),
            relic: require('@/assets/images/relic_3.png')
          },
          tx: {
            country: require('@/assets/images/country_3@2x.png'),
            relic: require('@/assets/images/relic_3@2x.png')
          }
        }
      ]
    }
  }
}
</script>

<style scoped>
.ct-layout {
  display: grid;
  overflow-y: scroll;
  height: 100%;
}

.content {
  background: url('~@/assets/images/ct_linear.png') repeat-y top center / 44% auto;
}

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

.ct-item {
  display: flex;
}

.ct-item > div{
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 12%;
}

.ct-item:nth-child(2n - 1) {
  flex-direction: row
}

.ct-item:nth-child(2n) {
  flex-direction: row-reverse
}

.relic {
  align-items: center;
  justify-content: center;
}

.relic img {
  width: 76%;
}

.relic h3 {
  font-size: 14px;
  color: #B48A4E;
  font-weight: 300;
  text-align: center;
  line-height: 1.4
}

.country {
  padding-left: 10px;
  justify-content: center;
}

.country img {
  max-width: 70%;
  max-height: 80%;
}

</style>
