<template>
  <view class="down">
    <view class="head">
      <view class="head-top">
        <image src="/static/img/common/bg_head.png" mode="" />
      </view>
      <view class="title">
        <image class="img-title" src="/static/img/omo/head_title_down.png" mode="aspectFill" />
      </view>
    </view>
    <view class="content">
      <view class="item" v-for="(item, index) in downloadList" :key="index">
        <view class="item-info flex">
          <view class="left">
            <image class="image" :src="item.imgUrl" mode="aspectFill" />
          </view>
          <view class="right">
            <view class="info-title">{{ item.title }}</view>
            <view class="info-desc">{{ item.desc }}</view>
            <view class="info-btn">
              <button class="detail cu-btn block">
                点击下载 <zd-arrow class="btn-arrow"></zd-arrow>
              </button>
              <view class="btn btn-right-open" v-if="weappShow">
                <zd-open :appid="item.appid" :apkName="item.apkName" :exinfo="item.extinfo" :content="conntent"></zd-open>
              </view>
            </view>
          </view>
        </view>
        <view class="line" v-if="index + 1 != downloadList.length"></view>
      </view>
      <image class="book" src="/static/img/course/book.png" mode="aspectFill" />
      <image class="teach" src="/static/img/common/teach.png" mode="aspectFill" />
      <image class="path" src="/static/img/common/path1.png" mode="aspectFill" />
    </view>
  </view>
</template>

<script>
import ZdArrow from '@/components/zd-arrow/index';
import ZdOpen from '@/components/zd-open/index';

export default {
  data() {
    return {
      weappShow: process.env.NODE_ENV === 'production' ? true : false,
      downloadList: [
        {
          title: '逻辑狗一起成长APP',
          desc: '家庭',
          imgUrl: require('@/static/img/omo/down_01.png'),
          appid: 'wxeb44a864bdd935be',
          apkName: 'com.zaojiao.app',
          extinfo: ''
        },
        {
          title: '逻辑狗家园共育APP',
          desc: '幼儿园',
          imgUrl: require('@/static/img/omo/down_02.png'),
          appid: 'wxf6e96c65ba6116d4',
          apkName: 'com.zaojiao.app.parent',
          extinfo: ''
        }
      ],
      conntent: '<div style="width:100%; min-height:28px; display:block; font-size:14px;color: #ffffff;">打开app</div>',
    }
  },
  components: {
    ZdArrow,
    ZdOpen
  },
  created() {

  },
  mounted() {

  },
  methods: {}
}
</script>

<style lang="scss">
.down {
  background: url('@/static/img/common/bg.png') no-repeat #01A2E8;
  background-size: cover;
  padding-bottom: 116upx;
  height: 100vh;
  .head-top {
    image {
      width: 100%;
      height: 100upx;
    }
  }
  .title {
    text-align: center;
    .img-title {
      width: 387upx;
      height: 56upx;
      vertical-align: middle;
    }
  }
  .content {
    position: relative;
    background: url('@/static/img/omo/down_bg.png') no-repeat #01A2E8;
    background-size: cover;
    height: 628upx;
    width: 714upx;
    padding: 92upx 68upx 0 42upx;
    margin: 108upx auto 0;
    .item {
      .left {
        margin-right: 36upx;
        .image {
          width: 186upx;
          height: 166upx;
          vertical-align: middle;
        }
      }
      .right {
        .info-title {
          font-size: 36upx;
          font-family: HelloFont-WenYiHei, HelloFont;
          font-weight: normal;
          color: #050505;
          line-height: 46upx;
          letter-spacing: 1upx;
        }
        .info-desc {
          font-size: 26upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 36upx;
          margin: 6upx 0 28upx;
        }
        .info-btn {
          position: relative;
          .detail {
            height: 56upx;
            width: 228upx;
            border-radius: 34upx;
            border: 2upx solid #333333;
            background: #FFFFFF;

            font-size: 26upx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #04040A;
            line-height: 36upx;
          }
          .btn-arrow {
            margin-left: 8upx;
          }
          .btn-right-open {
            position: absolute;
            z-index: 100;
            width: 228upx;
            height: 56upx;
            right: 100upx;
            top: 0;
            left: 0;
            opacity: 0;
            overflow: hidden;
          }
        }
      }
      .line {
        height: 2upx;
        background: rgba(153, 153, 153, 0.5);
        margin: 38upx 0 42upx 24upx;
      }
    }
    .book {
      position: absolute;
      width: 114upx;
      height: 128upx;
      vertical-align: middle;
      left: -18upx;
      top: 8upx;
      transform: translateY(-100%);
    }
    .path {
      position: absolute;
      bottom: -64upx;
      left: 66upx;
      width: 30upx;
      height: 26upx;
      vertical-align: middle;
    }
    .teach {
      position: absolute;
      width: 140upx;
      height: 98upx;
      vertical-align: middle;
      right: -18upx;
      top: 10upx;
      transform: translateY(-100%);
    }

  }
}
</style>
