<template>
  <div class="home">
    <head-view></head-view>
    <div class="sys-container-panel content">
      <div class="container-title">{{title}}</div>
      <div class="head-line"></div>
      <div class="remain-tip">
        您现在还有
        <b>1</b>次抽奖机会
      </div>

      <van-row>
        <van-col span="8">
          <div class="card-bg">
            <div class="card-logo logo-01"></div>
          </div>
        </van-col>
        <van-col span="8">
          <div class="card-bg">
            <div class="card-logo logo-02"></div>
          </div>
        </van-col>
        <van-col span="8">
          <div class="card-bg">
            <div class="card-logo logo-03"></div>
          </div>
        </van-col>
        <van-col span="8">
          <div class="card-bg">
            <div class="card-logo logo-04"></div>
          </div>
        </van-col>
        <van-col span="8">
          <div class="card-bg">
            <div class="card-logo logo-05"></div>
          </div>
        </van-col>
        <van-col span="8">
          <div class="card-bg">
            <div class="card-logo logo-06"></div>
          </div>
        </van-col>
        <van-col span="8">
          <div class="card-bg">
            <div class="card-logo logo-07"></div>
          </div>
        </van-col>
        <van-col span="8">
          <div class="card-bg">
            <div class="card-logo logo-08"></div>
          </div>
        </van-col>
        <van-col span="8">
          <div class="card-bg">
            <div class="card-logo logo-09"></div>
          </div>
        </van-col>
      </van-row>

      <div class="draw-tip">请选择任意一张翻牌开启奖品</div>

      <div class="btn-view-prize" @click="model.show =true"></div>
    </div>

    <div class="bottom-line"></div>

    <bottom-tool v-model="activityIndex"></bottom-tool>
    <biz-model v-model="model"></biz-model>
  </div>
</template>



<script>
import { httpGet } from "@/api/fetch-api";
import BottomTool from "@/components/bottom-tools/bottom-tools";
import BizModel from "@/components/biz-model/biz-model";
import HeadView from "@/components/plugins/head";

import Vue from "vue";
import { Row, Col } from "vant";

Vue.use(Row).use(Col);

export default {
  name: "home",
  data() {
    return {
      activityIndex: 4,
      title: "幸运大抽奖",
      model: {
        show: false,
        title: "",
        content: "",
        index: "prize",
        btnShow: false,
        btnText: "",
        confirmHandler: null,
        labelBtnShow: false,
        labelBtnText: "",
        labelBtnHandler: null
      }
    };
  },
  methods: {
    toSign() {
      this.$router.push("/sign");
    }
  },
  components: {
    BottomTool,
    BizModel,
    HeadView
  }
};
</script>


<style lang="scss" scoped>
.content {
  margin: 85px auto 60px auto;
  padding-bottom: 60px;
}

.container-title {
  font-size: 30px;
}

.head-line {
  height: 60px;
}

.bottom-line {
  height: 150px;
  background-color: transparent;
}

.remain-tip {
  font-size: 30px;
  font-weight: 600;

  b {
    color: #f00;
    font-size: 36px;
    padding: 0 10px;
  }
}

.van-row {
  width: 650px;
  margin: auto;
  margin-top: 10px;
}

.card-bg {
  width: 214px;
  height: 268px;
  background: url(../../assets/imgs/draw-card-bg.png);
  background-size: 100%;
  display: flex;
  align-items: center;
}

.card-logo {
  margin: auto;
}

.logo-01 {
  width: 111px;
  height: 18px;
  background: url(../../assets/imgs/draw-logo-01.png) no-repeat;
  background-size: 100%;
}
.logo-02 {
  width: 65px;
  height: 32px;
  background: url(../../assets/imgs/draw-logo-02.png) no-repeat;
  background-size: 100%;
}
.logo-03 {
  width: 62px;
  height: 51px;
  background: url(../../assets/imgs/draw-logo-03.png) no-repeat;
  background-size: 100%;
}
.logo-04 {
  width: 70px;
  height: 30px;
  background: url(../../assets/imgs/draw-logo-04.png) no-repeat;
  background-size: 100%;
}
.logo-05 {
  width: 89px;
  height: 35px;
  background: url(../../assets/imgs/draw-logo-05.png) no-repeat;
  background-size: 100%;
}
.logo-06 {
  width: 73px;
  height: 74px;
  background: url(../../assets/imgs/draw-logo-06.png) no-repeat;
  background-size: 100%;
}
.logo-07 {
  width: 66px;
  height: 59px;
  background: url(../../assets/imgs/draw-logo-07.png) no-repeat;
  background-size: 100%;
}
.logo-08 {
  width: 81px;
  height: 46px;
  background: url(../../assets/imgs/draw-logo-08.png) no-repeat;
  background-size: 100%;
}
.logo-09 {
  width: 109px;
  height: 27px;
  background: url(../../assets/imgs/draw-logo-09.png) no-repeat;
  background-size: 100%;
}

.draw-tip {
  font-size: 24px;
  text-align: center;
  margin: 30px auto 0 auto;
  color: #06b686;
}
.btn-view-prize {
  width: 283px;
  height: 65px;
  background: url(../../assets/imgs/draw-btn-viewprize.png) no-repeat;
  background-size: 100%;
  margin: 30px auto 0 auto;
}
</style>