<!--文章-详情-->
<template>
  <view class="main_box">

    <view class="main_section">
      <view class="section_1">
        <view class="titile">{{infoData.title}}</view>
        <view class="content" v-html="infoData.content"></view>
      </view>
    </view>
  </view>
</template>

<script>
import commonApi from '@/api/common.js';



export default {
  components: {
  },
  data() {
    return {
      //筛选条件
      filteredData:{
        id: '1',
      },

      infoData: {
        title: '文章标题xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx111111',//文章标题
        content: `
        <p>aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来</p>
        <p><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/cat-2.png" alt="uniapp" loading="lazy"></p>
        `,//文章内容
      },//文章详情
    }
  },
  onLoad(options) {
    this.filteredData.id = options.id//发信人id
  },
  onShow(){
    this.init()
  },
  //下拉刷新
  async onPullDownRefresh() {
    await this.getInfo()
  },
  methods: {
//初始化
    async init(){
      await this.getInfo();
    },
    //获取文章详情
    //获取课程详情
    async getInfo(){
      let res = await memberApi.courseInfo({
        id: this.filteredData.id,
      })
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      this.infoData = res.data
    },
  }
}
</script>

<style lang="less" scoped>
	.main_box {
		background: #fff;
    word-wrap: break-word; /* 允许长单词或 URL 换行 */
    word-break: break-all; /* 强制所有字符换行 */
	}

	//自定义导航栏
	.navbar_section {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #29d3b4;

		.title {
			padding: 20rpx 0;
			font-size: 30rpx;
			color: #315d55;
		}
	}

	.main_section {
		min-height: 100vh;
		background: #fff;
		padding: 0 0rpx;
		padding-top: 32rpx;
		padding-bottom: 150rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.section {
			background-color: #434544;
			padding: 40rpx 40rpx;
		}

    .section_1{
      padding: 0 24rpx;
      display: flex;
      flex-direction: column;
      gap: 30rpx;
      .titile{
        font-size: 40rpx;

      }
    }




	}

	.describe {
		color: #999999;
		padding-left: 30rpx;
	}
</style>