<template>
  <div class="cl auto">
    <div class="banner rel">
      <div class="abs imamge"></div>
    </div>
    <div class="">
      <div class="g3 title1">创意游戏-打造爆款</div>
      <div class="g6 f20 mt20">源于对市场的理解和不同类型游戏的锤炼</div>
    </div>
    <div class="hot-game cl">
      <ul class="hot-game-box cl ovh auto">
        <li class="item rel tl l" v-for="(item , index) in hotGame" v-bind:key="item.id" @mouseover="hotGameItemHover(index)" @mouseleave="hotGameItemLeave(index)">
          <div class="shadow1 normal">
            <img class="game-imamge" :src="item.gameImage" alt="">
            <h4 class="game-name g3 f20">{{item.gameName}}</h4>
            <div class="game-desc auto f14 g6">{{item.gameDesc}}</div>
          </div>
          <div class="qrcode-box abs bgwh shadow2 animated faster" :class="item.hotGameActive">
            <div class="qrcode auto tc">
              <img class="" width="190" height="190" :src="item.qrCode" alt="">
              <div class="f20 g3 mt20">微信扫码体验</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="cooperation bgf5 cl">
      <div class="">
        <div class="g3 title1">品牌合作，互利双赢</div>
        <div class="g6 f20 mt20">
          <div>用小游戏来实现品牌传播、IP打造、新品发布、CRM管理、</div>
          <div>积分打通、发券、辅助线下门店、节日营销......</div>
        </div>
      </div>
      <ul class="cooperation-item-box auto cl ovh">
        <li class="item rel tl l" v-for="(item , index) in cooperationGame" v-bind:key="item.id" @mouseover="cooperationGameItemHover(index)" @mouseleave="cooperationGameItemLeave(index)">
          <div class="shadow1 normal">
            <img class="game-imamge" :src="item.gameImage" alt="">
            <h4 class="game-name abs g3 f20">{{item.gameName}}</h4>
            <img class="game-icon abs" :src="item.icon">
          </div>
          <div class="qrcode-box abs bgwh shadow2 animated faster" :class="item.active">
            <div class="">
              <h4 class="game-name2 g3 f20">{{item.gameName}}</h4>
              <div class="game-desc f14 g6">{{item.gameDesc}}</div>
            </div>
            <div class="qrcode auto tc abs">
              <img class="" width="130" height="130" :src="item.qrCode" alt="">
              <div class="f20 g3" v-if="item.qrCode!=''">微信扫码体验</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="miniprogram rel cl">
      <div class="abs imamge"></div>
      <div class="cl">
        <div class="wh title3">小游戏风口，掀起流量风暴</div>
        <div class="subtitle f20 mt20">
          <div>微信10亿用户生态，借力分享功能助推小游戏爆炸性增长</div>
        </div>
      </div>
      <ul class="miniprogram-item-box auto cl ovh">
        <li class="item rel tc l">
          <div class="normal">
            <div class="number bgwh">
              <div class="rel ovh tl" style="width:128px;margin-left:-64px;left:50%;">
                <span class="b dib">10.98</span><span class="point dib abs f28">亿</span>
              </div>
            </div>
            <h4 class="desc1 wh f28">月活跃</h4>
            <div class="desc2 wh f16">微信&WeChat月合并活跃用户数</div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <div class="number bgwh">
              <div class="rel ovh tl" style="width:100px;margin-left:-50px;left:50%;">
                <span class="b dib">90</span><span class="point dib abs f28">分钟</span>
              </div>
            </div>
            <h4 class="desc1 wh f28">使用时长</h4>
            <div class="desc2 wh f16">50%用户每天使用微信时长</div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <div class="number bgwh">
              <div class="rel ovh tl" style="width:70px;margin-left:-35px;left:50%;">
                <span class="b dib">60</span><span class="point dib abs f28">%</span>
              </div>
            </div>
            <h4 class="desc1 wh f28">主流人群</h4>
            <div class="desc2 wh f16">主流用户群体集中在15~29岁</div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <div class="number bgwh">
              <div class="rel ovh tl" style="width:70px;margin-left:-35px;left:50%;">
                <span class="b dib">93</span><span class="point dib abs f28">%</span>
              </div>
            </div>
            <h4 class="desc1 wh f28">渗透率</h4>
            <div class="desc2 wh f16">一线城市渗透率93% 二线城市渗透率69%</div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <div class="number bgwh">
              <div class="rel ovh tl" style="width:96px;margin-left:-48px;left:50%;">
                <span class="b dib">2</span><span class="point dib abs f28">千万+</span>
              </div>
            </div>
            <h4 class="desc1 wh f28">公众号</h4>
            <div class="desc2 wh f16">微信公众账号数量超过2千万个</div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <div class="number bgwh">
              <div class="rel ovh tl" style="width:112px;margin-left:-51px;left:50%;">
                <span class="b dib">150</span><span class="point dib abs f28">万+</span>
              </div>
            </div>
            <h4 class="desc1 wh f28">小程序</h4>
            <div class="desc2 wh f16">微信小程序总数超过150万个</div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 团队 -->
    <div class="team rel cl">
      <!-- <div class="abs imamge"></div> -->
      <div class="cl">
        <div class="g3 title3">靠谱团队-研运一体</div>
        <div class="g6 f20 mt20">
          <div>合作渠道覆盖面广，IP定制方式灵活，研发推广一体无忧</div>
        </div>
      </div>
      <ul class="team-item-box auto cl ovh">
        <li class="item rel tc l">
          <div class="normal">
            <img class="number"  src="../assets/01/kaopu01.jpg" alt="">
            <h4 class="desc1 g3 f28">务实创新</h4>
            <div class="desc2 g6 f14">
              <div>紧跟市场、快速应变</div>
              <div>明确目标、简洁有效</div>
              <div>因为热爱、创新不断</div>
            </div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <img class="number"  src="../assets/01/kaopu02.jpg" alt="">
            <h4 class="desc1 g3 f28">研发高效</h4>
            <div class="desc2 g6 f14">
              <div>八个月研发40款</div>
              <div>开发、反馈、优化等迅速</div>
              <div></div>
            </div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <img class="number"  src="../assets/01/kaopu03.jpg" alt="">
            <h4 class="desc1 g3 f28">能力全面</h4>
            <div class="desc2 g6 f14">
              <div>产品类型、全面覆盖</div>
              <div>2D、3D类游戏均可研发</div>
              <div>自有运营、助力优化</div>
            </div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <img class="number"  src="../assets/01/kaopu04.jpg" alt="">
            <h4 class="desc1 g3 f28">团队协作</h4>
            <div class="desc2 g6 f14">
              <div>分项目制、追踪到人</div>
              <div>自告奋勇、更有激情</div>
              <div>全员活跃、战斗力强</div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 所有开发产品 -->
    <div class="production rel cl">
      <div class="cl">
        <div class="g3 title3">共研发40余款小游戏+小程序</div>
        <div class="g6 f20 mt20">
          <div>千锤百炼得见真功夫</div>
        </div>
      </div>
      <ul class="production-item-box auto cl ovh">
        <li class="item rel tc l" v-for="(item, index) in allGames" :key="index">
          <div class="normal">
            <img class="game-imamge"  :src="item.icon" alt="">
            <h4 class="desc1 g3 f14">{{item.gameName}}</h4>
          </div>
        </li>
      </ul>
    </div>
    <PageFooter msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import PageFooter from '@/components/PageFooter.vue'
// import { hotGame, cooperationGame } from '@/data/HomeData.js'
import HomeData from '@/data/HomeData.js'
export default {
  name: 'home',
  components: {
    PageFooter
  },
  data () {
    return {
      hotGame: HomeData.hotGame,
      cooperationGame: HomeData.cooperationGame,
      allGames: HomeData.allGames
    }
  },
  methods: {
    hotGameItemHover (index) {
      this.hotGame[index].hotGameActive = 'fadeIn'
    },
    hotGameItemLeave (index) {
      this.hotGame[index].hotGameActive = 'fadeOut'
    },
    cooperationGameItemHover (index) {
      this.cooperationGame[index].active = 'fadeIn'
    },
    cooperationGameItemLeave (index) {
      this.cooperationGame[index].active = 'fadeOut'
    }
  }
}
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 600px;
  .imamge {
    width: 100%;
    height: 600px;
    background: url('../assets/01/banner2.jpg') no-repeat center center / 1920px;
  }
}
.title1 {
  margin-top: 100px;
  font-size: 40px;
}
.hot-game {
  margin-top: 20px;
}
.hot-game-box {
  width: 1360px;
  .item {
    width: 310px;
    height: 460px;
    margin:30px 15px 10px 15px;
    .game-imamge {
      width: 310px;
      height: 380px;
      display: block;
    }
    .game-name {
      margin: 18px 12px 10px 12px;
    }
    .game-desc {
      width: 286px;
    }
    .shadow1 {
      box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
    }
    .normal{
      height: 460px;
    }
    .shadow2 {
      box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.2);
    }
    .qrcode-box {
      opacity: 0;
      width: 330px;
      height: 480px;
      left: -10px;
      bottom: 0;
      .qrcode {
        margin-top: 100px;
      }
    }
    .active {
      display: block;
    }
  }
}
.cooperation {
  padding: 1px 0 100px 0;
  margin-top: 120px;
}
.cooperation-item-box {
  width: 1360px;
  .item {
    width: 650px;
    height: 350px;
    margin:30px 15px 10px 15px;
    .game-imamge {
      width: 650px;
      height: 250px;
      display: block;
    }
    .game-name {
      left: 108px;
      bottom: 0;
      height: 100px;
      line-height: 100px;
      margin: 0;
    }
    .game-icon {
      width: 64px;
      height: 64px;
      left: 24px;
      bottom: 20px;
      border-radius: 10px;
    }
    .game-desc {
      margin-left: 28px;
    }
    .shadow1 {
      box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
    }
    .normal{
      height: 350px;
    }
    .shadow2 {
      box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.2);
    }
    .qrcode-box {
      opacity: 0;
      width: 650px;
      height: 350px;
      left: 0;
      bottom: 0;
      .game-name2 {
        margin: 30px 24px 22px 22px;
      }
      .qrcode {
        right: 24px;
        bottom: 14px;
      }
    }
    .active {
      display: block;
    }
  }
}
/* 小程序风口 */
.miniprogram {
  width: 100%;
  height: 620px;
  .imamge {
    width: 100%;
    height: 620px;
    background: url('../assets/01/xiaochengxu.jpg') no-repeat center center / 1920px;
    z-index: -1;
  }
  .title3 {
    padding-top: 60px;
    font-size: 40px;
  }
  .subtitle {
    color: #eeeeee;
  }
  .miniprogram-item-box {
    margin-top: 40px;
    width: 1360px;
  }
  .item {
    width: 180px;
    height: 350px;
    margin:30px 23px 10px 23px;
    .game-imamge {
      width: 180px;
      height: 250px;
      display: block;
    }
    .desc1 {
      margin: 30px 0 15px 0;
      font-weight: 400;
    }
    .game-desc {
      margin-left: 28px;
    }
    .normal{
      height: 350px;
      .number {
        width: 180px;
        height: 180px;
        line-height: 180px;
        border-radius: 50%;
        color: rgb(36, 27, 111);
        font-size: 40px;
        .point {
          right: 0;
          bottom: -7px;
        }
      }
    }
  }
}

/* 团队 */
.team {
  width: 100%;
  height: 620px;
  .title3 {
    padding-top: 60px;
    font-size: 40px;
  }
  .subtitle {
    color: #eeeeee;
  }
  .team-item-box {
    margin-top: 40px;
    width: 1368px;
  }
  .item {
    width: 200px;
    height: 350px;
    margin:30px 71px 10px 71px;
    .game-imamge {
      width: 200px;
      height: 250px;
      display: block;
    }
    .desc1 {
      margin: 20px 0 10px 0;
      font-weight: 400;
    }
    .game-desc {
      margin-left: 28px;
    }
    .normal{
      height: 350px;
      .number {
        width: 200px;
        height: 200px;
      }
    }
  }
}
/* 产品 */
.production {
  width: 100%;
  margin-bottom: 100px;
  .title3 {
    padding-top: 60px;
    font-size: 40px;
  }
  .subtitle {
    color: #eeeeee;
  }
  .production-item-box {
    margin-top: 40px;
    width: 1340px;
  }
  .item {
    width: 116px;
    height: 150px;
    margin:20px 9px 0 9px;
    .game-imamge {
      width: 116px;
      height: 116px;
      display: block;
      border-radius: 20px;
    }
    .desc1 {
      margin: 6px 0 2px 0;
      font-weight: 400;
    }
  }
}
</style>
