<template>
  <view class="content">
    <view class="topimg">
      <img :src="detailData.actCover "
           alt="" />
    </view>
    <view class="contentbox">
      <view class="title">
        活动介绍
      </view>
      <view class="contenttext"
            v-html="detailData.actExplain">
      </view>
    </view>
  </view>
</template>

<script>
import * as act from '@/config/activity.js'
export default {
  data() {
    return {
      pkId: '',
      detailData: {},
    }
  },
  onLoad(query) {
    this.pkId = query.pkId
    console.log('🌈query', query.pkId)
    this.getDetail()
  },
  methods: {
    getDetail() {
      act
        .getActivityDetailList({
          pkId: this.pkId,
        })
        .then((res) => {
          this.detailData = res.rows[0]
          const regex = new RegExp('<img', 'gi')
          this.detailData.actExplain = this.detailData.actExplain.replace(
            regex,
            `<img style="max-width: 200px;"`
          )
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  background: #a60c02;
  // background: linear-gradient(180deg, #6289C9 0%, #125AB3 100%);

  .topimg {
    width: 100%;
    height: auto;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .contentbox {
    text-align: center;
    padding: 28rpx 42rpx;

    .title {
      font-size: 40rpx;
      font-weight: 400;
      color: #fbf0cf;
    }

    .contenttext {
      font-size: 24rpx;
      font-weight: 400;
      color: #fbf0cf;
      line-height: 28rpx;
      margin-top: 44rpx;
    }
  }
}
</style>