<template>
	<view class="detail">
    <view class="date" v-if="offlineCompetition" >{{ offlineCompetition.startTime | dateFormat('M月DD日') }} <view>{{ '|' }}</view> {{ offlineCompetition.endTime | dateFormat('M月DD日') }}</view>
    <view class="dec_box">
      <image class="dec_img_bg" src="/static/img/index/dec_box.png" mode="aspectFill" />
      <image class="submit_btn" src="/static/img/index/submit_btn.png" @tap.stop="navTo('/pages/index/entry')" mode="aspectFill" />
      <view class="dec_content">
        <view class="dec_item">
          <text>我在这里等你很久了，欢迎你参加</text>
          <text class="hl">第16届幼儿思</text>
        </view>
        <view class="dec_item">
          <text class="hl">维能力挑战赛</text>
          <text>！这里是专门为你准备的一个全面</text>
        </view>
        <view class="dec_item">
          <text>展示个性和实力的舞台！在这里，你能收获知识，</text>
        </view>
        <view class="dec_item">
          <text>获得成长，还能结识来自全国各地的小朋友！</text>
        </view>
        <view class="dec_item">
          <text>点击</text>
          <text class="hl">“绿色报名通道”</text>
          <text>快快报名吧！</text>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import { indexList } from '@/api/product';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      loading: true,
      // appName: this.$mSettingConfig.appName,
    };
  },
  onLoad() {
    
  },
  onShow() {
    this.initData();
  },
  computed: {
    ...mapState({
      offlineCompetition: 'offlineCompetition'
    })
  },
  methods: {
    initData() {
      // this.getIndexList();
    },
    async getIndexList(type) {
      await this.$http
        .get(`${indexList}`, {})
        .then(async r => {
          // uni.setNavigationBarTitle({ title: this.appName });
          if (type === 'refresh') {
            uni.stopPullDownRefresh();
          }
          // 首页参数赋值
          console.log(r.data);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          if (type === 'refresh') {
            uni.stopPullDownRefresh();
          }
        })

    },
    navTo(route) {
      this.$mRouter.push({route})
    }
  },
  onPullDownRefresh() {
    this.getIndexList('refresh');
  }
};
</script>

<style lang="scss">
.detail {
  position: relative;
  background: url('https://app-resources-luojigou.luojigou.vip/Fr1W5D7aaOJvOG4szQz6txjOiysU') no-repeat;
  // background-size: 100%;
  background-size: cover;
  height: 100vh;
  // overflow: hidden;
  // padding-top: 882upx;
  // background: url('https://app-resources-luojigou.luojigou.vip/FuqGvveGk3wOO-PEr2iTpa8a-pG4');
  .date {
    position: fixed;
    left: 0;
    top: 280upx;
    width: 45upx;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 2upx 6upx 0px rgba(255, 255, 255, 0.5);
    // opacity: 0.5;
    padding: 5upx 7upx;
    color: #359732;
    border-radius: 0px 20upx 20upx 0px;
  }
  .dec_box {
    position: absolute;
    text-align: center;
    // position: absolute;
    // width: 100%;
    // padding: 0 6upx;
    bottom: 26upx;
    z-index: 10;
    font-size: 0;
    .dec_img_bg {
      width: 738upx;
      height: 466upx;
      // width: 100%;
    }
  }
  .submit_btn {
    position: absolute;
    left: 50%;
    bottom: 0upx;
    transform: translateX(-50%);
    width: 294upx;
    height: 124upx;
  }
  .dec_content {
    text-align: left;
    position: absolute;
    top: 72upx;
    left: 88upx;
    .dec_item {
      border-bottom: 1px dashed rgba(215, 213, 213, 0.6);
      &:last-child {
        border: none;
      }
      text {
        font-size: 26upx;
        line-height: 52upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #0B0909;
        &.hl {
          font-family: PingFangSC-Semibold, PingFang SC;
          color:#F46902;
        }
      }
    }
  }
}
</style>