<template>
  <view class="a_c_home">
    <view class="c_card">
      <view class="c_content">
        <scroll-view style="height: 100%;" scroll-y>
          <view v-if="info.content" v-html="info.content.content"></view>
        </scroll-view>
      </view>
      <view class="btn_box">
        <image class="btn_img" @click="open()" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/card_btn1.webp"></image>
        <image class="btn_img" @click="open()" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/card_btn2.webp"></image>
      </view>
    </view>
    <image class="head_img" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/card_head.webp" info="活动标题"></image>
    <image class="close_img" @click="close" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/close.png" info="关闭按钮"></image>
  </view>
</template>

<script>
  import { getArticleList } from "@/api/api.js"
  export default {
    data(){
      return {
        info: ''
      }
    },
    created() {
      this.getArticleList();
    },
    methods:{
      close(){
        this.$emit('close');
      },
      open(){
        uni.navigateTo({
          url: '/pages/newActivity/activityDetail/activityDetail'
        })
      },
      getArticleList(){
        getArticleList(25).then(res=>{
          this.info = res.data.list[0]
        })
      }
    }
  }
</script>

<style lang="scss">
.a_c_home{
  width: 600rpx;
  height: 80vh;
  // border: 1px solid red;
  position: relative;
  .head_img{
    width: 568rpx;
    height: 207rpx;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
  }
  .c_card{
    height: calc(100% - 300rpx);
    width: 100%;
    background-color: #fff;
    position: absolute;
    border-radius: 50rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30rpx;
    padding-top: 70rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .c_content{
      height: calc(100% - 220rpx);
      width: 100%;
      // background-color: #eee;
    }
    .btn_box{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .btn_img{
        width: 461rpx;
        height: 100rpx;
      }
    }
  }
  .close_img{
    position: absolute;
    bottom: 60rpx;
    left: 50%;
    transform: translate(-50%);
    width: 60rpx;
    height: 60rpx;
  }
}
</style>