<template>
  <div class="about">
    <div class="top-placeholder"></div>
    <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"><span class="f20">{{item.gameName}}</span><span class="f16">{{item.gameType}}</span></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="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/02/hezuo01.jpg" alt="">
            <h4 class="desc1 g3 f28">原生游戏</h4>
            <div class="desc2 g6 f14 tl">
              <div>以游戏用户为核心，从玩家诉求出发，结合市场爆款模型，做品牌的“娱乐翻译官”</div>
            </div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <img class="number"  src="../assets/02/hezuo02.jpg" alt="">
            <h4 class="desc1 g3 f28">IP游戏</h4>
            <div class="desc2 g6 f14 tl">
              <div>以IP受众用户出发，量身定制游戏模型，创新实现游戏IP孵化</div>
            </div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <img class="number"  src="../assets/02/hezuo03.jpg" alt="">
            <h4 class="desc1 g3 f28">品牌游戏</h4>
            <div class="desc2 g6 f14 tl">
              <div>以品牌诉求出发，量身定制游戏模型，实现品牌传播+电商转化的内容商业逻辑</div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="miniprogram rel cl bgf5">
      <div class="cl">
        <div class="g3 title3">联合开发模式</div>
      </div>
      <div class="rel auto content">
        <img class="abs imamge" src="../assets/02/lianhe.png">
        <div class="item1 abs tr">
          <div class="f20 g3 b item-title">品牌联合出品</div>
          <div class="f14 g6">许多品牌经过多年沉淀已有一定用户基础</div>
          <div class="f14 g6">希望打造小游戏进行用户粘性互动</div>
          <div class="f14 g6">提高品牌追随</div>
        </div>
        <div class="item2 abs tr">
          <div class="f20 g3 b item-title">原生游戏结合</div>
          <div class="f14 g6">一些小游戏天然具备传播及趣味性</div>
          <div class="f14 g6">植入品牌可以增加大量曝光</div>
          <div class="f14 g6">契合度高的还可以带来部分用户转化</div>
        </div>
        <div class="item3 abs tl">
          <div class="f20 g3 b item-title">IP定制运营</div>
          <div class="f14 g6">有不少知名IP积累了核心用户</div>
          <div class="f14 g6">并和特定品类的游戏有属性交集</div>
          <div class="f14 g6">定制游戏可以增加用户粘性和商业化</div>
        </div>
        <div class="item4 abs tl">
          <div class="f20 g3 b item-title">渠道联合出品</div>
          <div class="f14 g6">游戏、媒体平台已有用户沉淀</div>
          <div class="f14 g6">需要小游戏进行用户粘性互动及商业变现</div>
        </div>
      </div>
    </div>

    <div class="yanyunyiti rel cl bgwh">
      <div class="cl">
        <div class="g3 title3">研运一体形成闭环</div>
      </div>
      <div class="rel auto content">
        <img class="abs imamge" src="../assets/02/kaifa00.png">
        <div class="item1 abs tc shadow1">
          <img class="item-image" src="../assets/02/kaifa01.jpg">
          <div class="f20 g3 b item-title">原生内容</div>
          <div class="f14 g6">以大众市场需求为出发点</div>
          <div class="f14 g6">设计高传播性游戏</div>
          <div class="f14 g6">实现趣味性与品牌传播双赢</div>
        </div>
        <div class="item2 abs tc shadow1">
          <img class="item-image" src="../assets/02/kaifa02.jpg">
          <div class="f20 g3 b item-title">社群渠道</div>
          <div class="f14 g6">打通自媒体公众号</div>
          <div class="f14 g6">结合抖音、微薄等主流渠道</div>
          <div class="f14 g6">实现品牌全平台渠道</div>
        </div>
        <div class="item3 abs tc shadow1">
          <img class="item-image" src="../assets/02/kaifa03.jpg">
          <div class="f20 g3 b item-title">整合营销</div>
          <div class="f14 g6">在目标人群聚集渠道着手</div>
          <div class="f14 g6">制定社会化整合营销全案</div>
          <div class="f14 g6">引流至销售渠道</div>
        </div>
      </div>
    </div>
    <!-- 核心优势 -->
    <div class="advantage rel cl bgf5">
      <!-- <div class="abs imamge"></div> -->
      <div class="cl">
        <div class="g3 title3">核心优势</div>
        <div class="g6 f20 mt20">
          <div>创意+实践</div>
        </div>
      </div>
      <ul class="advantage-item-box auto cl ovh">
        <li class="item rel tc l shadow1">
          <div class="normal">
            <h4 class="desc1 wh f20 bg1">
            专注小游戏的内容化营销
            </h4>
            <div class="desc2 g6 f16 tc">
              <div class="mb5">专注于小游戏创意</div>
              <div class="mb5">为核心的内容化整合营销传播</div>
              <div class="mb5">让游戏与品牌用户精准对接</div>
            </div>
          </div>
        </li>
        <li class="item rel tc l shadow1">
          <div class="normal">
            <h4 class="desc1 wh f20 bg2">
            深知小游戏用户传播心理
            </h4>
            <div class="desc2 g6 f16 tc">
              <div class="mb5">对于小游戏用户群的传播热点及方式</div>
              <div class="mb5">有着深厚的经验积累及领悟</div>
              <div class="mb5">擅长制造传播话题</div>
            </div>
          </div>
        </li>
        <li class="item rel tc l shadow1">
          <div class="normal">
            <h4 class="desc1 wh f20 bg3">
            品牌产品表达的深刻洞察
            </h4>
            <div class="desc2 g6 f16 tc">
              <div class="mb5">需要达成对品牌理念的理解</div>
              <div class="mb5">实现对产品底层的探究</div>
              <div class="mb5">充当游戏与品牌之间的“翻译官”</div>
            </div>
          </div>
        </li>
        <li class="item rel tc l shadow1">
          <div class="normal">
            <h4 class="desc1 wh f20 bg4">
            策划宣传一站式高品质团队
            </h4>
            <div class="desc2 g6 f16 tc">
              <div class="mb5">从品牌诉求为出发点</div>
              <div class="mb5">从策划阶段就考虑好宣发需求的一站式服务</div>
              <div class="mb5">方案即呈现</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 媒体宣发 -->
    <div class="media rel cl">
      <div class="cl">
        <div class="g3 title3">媒体宣发</div>
        <div class="g6 f20 mt20">
          <div>主流媒体均有覆盖，创意视频、文案助力推广</div>
        </div>
      </div>
      <ul class="media-item-box auto cl ovh">
        <li class="item rel tc l">
          <div class="normal">
            <img class="game-imamge"  src="../assets/02/xuanfa01.png" alt="">
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <img class="game-imamge"  src="../assets/02/xuanfa02.png" alt="">
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <img class="game-imamge"  src="../assets/02/xuanfa03.png" alt="">
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <img class="game-imamge"  src="../assets/02/xuanfa04.png" alt="">
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <img class="game-imamge"  src="../assets/02/xuanfa05.png" alt="">
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <img class="game-imamge"  src="../assets/02/xuanfa06.png" alt="">
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <img class="game-imamge"  src="../assets/02/xuanfa07.png" alt="">
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <img class="game-imamge"  src="../assets/02/xuanfa08.png" alt="">
          </div>
        </li>
      </ul>
    </div>
    <!-- 合作流程 -->
    <div class="process rel cl">
      <div class="cl">
        <div class="g3 title3">合作流程</div>
        <div class="g6 f20 mt20">
          <div>2000万用户的流量矩阵战略合作方，百万级以上的小游戏导流合作，</div>
          <div>为品牌游戏寻找海量匹配的推广用户群</div>
        </div>
      </div>
      <img with="1361" height="160" src="../assets/02/liucheng.png" alt="">
      <ul class="process-item-box auto cl ovh">
        <li class="item rel tc l">
          <div class="normal">
            <h4 class="desc1 g3 f20">沟通意向</h4>
            <div class="g6 f14">定制草案</div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <h4 class="desc1 g3 f20">确认方案</h4>
            <div class="g6 f14">研发对接</div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <h4 class="desc1 g3 f20">研发DEMO</h4>
            <div class="g6 f14">沟通优化</div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <h4 class="desc1 g3 f20">上线测试</h4>
            <div class="g6 f14">产品分析</div>
          </div>
        </li>
        <li class="item rel tc l">
          <div class="normal">
            <h4 class="desc1 g3 f20">推广运营</h4>
            <div class="g6 f14">持续优化</div>
          </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 BusinessData from '@/data/BusinessData.js'
export default {
  name: 'home',
  components: {
    PageFooter
  },
  data () {
    return {
      hotGame: BusinessData.hotGame,
      cooperationGame: BusinessData.cooperationGame,
      allGames: BusinessData.allGames
    }
  },
  methods: {
    hotGameItemHover (index) {
      this.hotGame[index].hotGameActive = 'fadeIn'
    },
    hotGameItemLeave (index) {
      this.hotGame[index].hotGameActive = 'fadeOut'
    }
  }
}
</script>

<style lang="scss" scoped>
.top-placeholder {
  width: 100%;
  height: 100px;
}
.banner {
  width: 100%;
  height: 500px;
  .imamge {
    width: 100%;
    height: 500px;
    background: url('../assets/02/banner.jpg') no-repeat center center / 1920px;
  }
}
.shadow1 {
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
}
.title1 {
  margin-top: 100px;
  font-size: 40px;
}
.hot-game {
  margin-top: 20px;
}
.hot-game-box {
  width: 1360px;
  .item {
    width: 310px;
    height: 632px;
    margin:30px 15px 10px 15px;
    .game-imamge {
      width: 310px;
      height: 552px;
      display: block;
    }
    .game-name {
      margin: 18px 12px 10px 12px;
    }
    .game-desc {
      width: 286px;
    }
    .normal{
      height: 632px;
    }
    .shadow2 {
      box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.2);
    }
    .qrcode-box {
      opacity: 0;
      width: 310px;
      height: 632px;
      left: 0;
      bottom: 0;
      .qrcode {
        margin-top: 200px;
      }
    }
    .active {
      display: block;
    }
  }
}
/* 团队 */
.team {
  width: 100%;
  height: 620px;
  .title3 {
    padding-top: 60px;
    font-size: 40px;
  }
  .subtitle {
    color: #eeeeee;
  }
  .team-item-box {
    margin-top: 40px;
    width: 1308px;
  }
  .item {
    width: 200px;
    height: 350px;
    margin:30px 118px 10px 118px;
    .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;
      }
    }
  }
}
/* 小程序风口 */
.miniprogram {
  width: 100%;
  height: 832px;
  .title3 {
    padding-top: 60px;
    font-size: 40px;
  }
  .subtitle {
    color: #eeeeee;
  }
  .content {
    width: 1334px;
    height: 544px;
    margin-top: 50px;
    .imamge {
      width: 1334px;
      height: 544px;
      left: 0;
      top: 0;
    }
    .item-title {
      margin: 14px 0;
    }
    .item1 {
      width: 260px;
      height: 132px;
      left: 26px;
      top: 168px;
    }
    .item2 {
      width: 232px;
      height: 132px;
      left: 145px;
      bottom: 10px;
    }
    .item3 {
      width: 232px;
      height: 132px;
      right: 48px;
      top: 165px;
    }
    .item4 {
      width: 258px;
      height: 105px;
      right: 115px;
      bottom: 30px;
    }
  }
}
/* 研运一体 */
.yanyunyiti {
  width: 100%;
  height: 932px;
  .title3 {
    padding-top: 60px;
    font-size: 40px;
  }
  .subtitle {
    color: #eeeeee;
  }
  .content {
    width: 970px;
    height: 714px;
    margin-top: 50px;
    .imamge {
      width: 477px;
      height: 341px;
      left: 50%;
      top: 60px;
      margin-left: -238px;
    }
    .item-title {
      margin: 22px 0 12px 0;
    }
    .item-image {
      margin-top: 40px;
    }
    .item1 {
      width: 220px;
      height: 300px;
      left: 10px;
      top: 10px;
    }
    .item2 {
      width: 220px;
      height: 300px;
      left: 50%;
      margin-left: -110px;
      bottom: 10px;
    }
    .item3 {
      width: 220px;
      height: 300px;
      right: 10px;
      top: 10px;
    }
  }
}

/* 团队 */
.advantage {
  width: 100%;
  height: 620px;
  .title3 {
    padding-top: 60px;
    font-size: 40px;
  }
  .subtitle {
    color: #eeeeee;
  }
  .advantage-item-box {
    margin-top: 40px;
    width: 1352px;
  }
  .item {
    width: 320px;
    height: 300px;
    margin:30px 9px 10px 9px;
    .game-imamge {
      width: 200px;
      height: 250px;
      display: block;
    }
    .desc1 {
      margin: 0 0 55px 0;
      font-weight: 400;
      width: 320px;
      height: 120px;
      line-height: 120px;
      display: block;
    }
    .normal{
      height: 320px;
      .bg1 {
        background:url('../assets/02/youshi01.jpg') no-repeat center center;
      }
      .bg2 {
        background:url('../assets/02/youshi02.jpg') no-repeat center center;
      }
      .bg3 {
        background:url('../assets/02/youshi03.jpg') no-repeat center center;
      }
      .bg4{
        background:url('../assets/02/youshi04.jpg') no-repeat center center;
      }
    }
  }
}
/* 媒体宣发 */
.media {
  width: 100%;
  margin-bottom: 100px;
  .title3 {
    padding-top: 60px;
    font-size: 40px;
  }
  .subtitle {
    color: #eeeeee;
  }
  .media-item-box {
    margin-top: 40px;
    width: 1360px;
  }
  .item {
    width: 140px;
    height: 140px;
    margin:20px 15px 0 15px;
    .game-imamge {
      width: 140px;
      height: 140px;
      display: block;
    }
  }
}
/* 合作流程 */
.process {
  width: 100%;
  margin-bottom: 100px;
  .title3 {
    padding-top: 60px;
    font-size: 40px;
  }
  .subtitle {
    color: #eeeeee;
  }
  .process-item-box {
    margin-top: 8px;
    width: 1320px;
  }
  img {
    margin-top: 50px;
  }
  .item {
    width: 158px;
    height: 80px;
    margin:0 53px;
    .desc1 {
      margin: 6px 0 2px 0;
    }
  }
}
</style>
