<template>
  <view class="index">
    <view class="header">
      <image :src="headImg" mode="aspectFill" />
    </view>
    <view class="flex flex-wrap content justify-between">
      <view v-for="(item, index) in list" :key="index">
        <view
          @tap.stap="navTo(item.path)"
          class="item flex justify-between" 
          :style="{backgroundImage: `url(${item.bgUrl})`,backgroundRepeat: 'no-repeat', backgroundSize: 'cover'}">
          <view class="left">
            <view class="title">{{ item.title1 }}</view>
            <view class="title">{{ item.title2 }}</view>
          </view>
          <view class="right">
            <image class="img" :src="item.imgUrl" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        headImg: require('@/static/img/index/index_heard.png'),
        list: [
          {
            title1: '全面了解', 
            title2: '中德智慧', 
            imgUrl: require('@/static/img/index/index_img1.png'),
            bgUrl: require('@/static/img/index/index_card1.png'),
            path: '/pages/about/index'
          },
          {
            title1: '“思维芯”', 
            title2: '四大课程体系', 
            imgUrl: require('@/static/img/index/index_img2.png'),
            bgUrl: require('@/static/img/index/index_card2.png'),
            path: '/pages/course/index'
          },
          {
            title1: 'OMO教育', 
            title2: '内容服务', 
            imgUrl: require('@/static/img/index/index_img3.png'),
            bgUrl: require('@/static/img/index/index_card3.png'),
            path: '/pages/omo/index'
          },
          {
            title1: '品牌活动', 
            title2: '', 
            imgUrl: require('@/static/img/index/index_img4.png'),
            bgUrl: require('@/static/img/index/index_card4.png')
          },
          {
            title1: '全国招商', 
            title2: '合作加盟', 
            imgUrl: require('@/static/img/index/index_img5.png'),
            bgUrl: require('@/static/img/index/index_card5.png')
          },
          {
            title1: '联系我们', 
            imgUrl: require('@/static/img/index/index_img6.png'),
            bgUrl: require('@/static/img/index/index_card6.png')
          }
        ]
      }
    },
    methods: {
      navTo(route) {
        this.$mRouter.push({
          route
        })
      }
    }
  }
</script>

<style lang="scss">
.index {
  .header {
    image {
      width: 100%;
      height: 566upx;
      vertical-align: middle;
    }
  }
  .content {
    padding: 4upx 36upx 0;
    background: radial-gradient(#F9FCFC 4upx, transparent 4upx) 0 0,
            #ffffff ;
    background-size: 14upx 14upx;
    .item {
      width: 330upx;
      height: 168upx;
      margin-bottom: 26upx;
      padding: 44upx 20upx 0 24upx;
      .title {
        font-size: 28upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 40upx;
      }
      .img {
        width: 104upx;
        height: 104upx;
        vertical-align: middle;
      }
    }
  }
}
</style>
