<template>
  <div
    class="activity-detail-page"
    style="margin-top:1.87733rem;">
    <Head/>
    <img
      :src="detail.banner"
      style="width: 100%;height:249px;object-fit: cover;">
    <div class="detail-main-container">
      <div>
        <h1 class="activity-detail-name">{{ detail.title }}</h1>
        <div class="activity-detail-info">
          <div
            class="flex-aic">
            <span style="color: #666;font-size: 14px;">活动人数</span>
            <div>{{ detail.limitNum }}</div>
          </div>
          <div
            class="flex-aic"
            style="margin: 6px 0;">
            <span style="color: #666;font-size: 14px;">活动时间</span>
            <div>{{ detail.startTime | formatDate('yyyy-MM-dd hh:mm') }}~{{ detail.endTime | formatDate('yyyy-MM-dd hh:mm') }} </div>
          </div>
          <div class="flex-aic">
            <span style="color: #666;font-size: 14px;">活动地点</span>
            <div>{{ detail.province }}{{ detail.city }}{{ detail.town }}{{ detail.address }}</div>
          </div>
        </div>
      </div>
      <div>
        <div style="height: 10px;background: #eee;"/>
      </div>
      <div class="flex-jcb activity-detail">
        <div style="background: #fff;margin: 17px 0;">
          <h3
            class="content-t"
            style="text-align: left;">活动详情</h3>
          <div
            class="models-details"
            v-html="detail.content"/>
        </div>
      </div>
    </div>
    <go-top/>
  </div>
</template>

<script>
  import axios from '../../plugins/axios'
  import Head from "~/components/head";
  import DetailBanner from '~/components/detailBanner'
  import GoTop from "~/components/goTop";

  export default {
    components: {
      Head,
      DetailBanner,
      GoTop
    },
    data() {
      return {};
    },
    async asyncData({ route}) {
      const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/'+route.query.id);
      let detail = data.data;
      detail.content =detail.content.replace(/<img/g,"<img style='width:90%'");
      return {detail: detail}
    },
    created() {},
    methods: {},
  };

</script>

<style lang="scss">
  @import "../../assets/styles/mixin";

  .activity-detail-page {
    font-size: px2rem(24px);
    .content-t{
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .detail-main-container{
    border-radius: 7px 7px 0 0;
    box-shadow: 0px 0px 13px #666;
    margin-top: -10px;
    z-index: 99;
    position: relative;
    background: #fff;
    .activity-detail-name{
      padding: 17px px2rem(20px);
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid #eee;
    }
    .activity-detail{
      padding: 0 px2rem(20px);
    }
    .activity-detail-info{
      padding: 17px px2rem(20px);
      font-size: 14px;
      span{
        color: #666;
        min-width: 60px;
        margin-right: 13px;
      }
    }
    .vehicle-lower{
      padding: 0 px2rem(20px);
      font-size: px2rem(30px);
      margin-top: px2rem(20px);
      margin-bottom: px2rem(20px);
      span{
        color: #F25B5B;
        font-size: px2rem(36px);
        font-weight: bold;
        margin-left: px2rem(30px);
        margin-right: px2rem(4px);
      }
    }
    .member-list{
      padding: 0 px2rem(20px);
    }
    .member-list-c img{
      width: 20px;
      height: 20px;
      margin-right: px2rem(20px);
    }
    .member-list-name{
      color: #666;
      font-size:px2rem(26px);
      margin-bottom: px2rem(20px);
    }
    .market-price{
      font-size: px2rem(30px);
      margin: px2rem(34px) 0;
      padding: 0 px2rem(20px);
    }
    .detail-list{
      height: px2rem(100px);
    }
    .select-tab{
      width: 100%;
      .select-tab-li-l{
        font-size:16px;
        color: #999;
        padding: 0 px2rem(20px);
      }
      .select-tab-li-l.active{
        color: #333;
        font-weight: bold;
        height: px2rem(100px);
        line-height: px2rem(100px);
        border-bottom: 2px solid #1bbb9f;
      }
    }
    .scroll0, .scroll1, .scroll2, .scroll3{
      padding: 0 px2rem(20px);
      .base-set{
        margin: 17px 0;
        font-size: 15px;
        font-weight: bold;
      }
      .base-set-name{
        font-size: 13px;
        color: #666;
        padding: 0 10px 6px 0;
      }
    }

    .mint-navbar {
      position: sticky;
      top: 0;
      z-index: 20;

      .mint-tab-item-label {
        font-size: px2rem(30px);
      }

      .mint-tab-item {
        padding: 10px 0;

        &.is-selected {
          color: inherit;
          border: none;
          position: relative;

          &::after {
            content: " ";
            display: inline-block;
            @include wh(20%, 2px);
            background: #2395ff;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
    .left-item{
      width: 30%;
      border-left: 1px solid #c1c1c1;
      border-right: 1px solid #c1c1c1;
      height: 34px;
      padding-left: 10px;
      line-height: 34px;
    }
    .right-item{
      width:70%;
      border-right: 1px solid #ccc;
      height: 34px;
      line-height: 34px;
      padding-left: 10px;
    }
    .modal-item{
      border-top:1px solid #ccc;
    }
    .kr-article-article .modal-item:last-child{
      border-bottom: 1px solid #ccc;
    }
  }
  }
</style>
