<template>
  <view class="content">
    <view class="title">
      <span>{{ vdata.record.title }}</span>
    </view>
    <view class="updatedAt">
      <span class="author">作者：{{ vdata.record.publisher }}</span>
      <span>时间：{{ vdata.record.updatedAt }}</span>
    </view>
    <!-- mp-html 会有横向滚动条问题 所以采用v-html -->
    <!-- <mp-html :content="record.content" />	 -->
    <view v-html="vdata.record.content"></view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { reqLoad, API_URL_SYS_ARTICLES } from '@/http/apiManager.js'
import { onLoad } from '@dcloudio/uni-app'

onLoad((options) => {
	reqLoad.getById(API_URL_SYS_ARTICLES, options.id).then( ({bizData}) => {
		vdata.record = bizData
	})
})

const vdata = reactive({
	record : { }
})


</script>
<style lang="scss" scoped>
.content {
  box-sizing: border-box;
  padding: 0 50rpx 40rpx 50rpx;
  .title {
    // height: 60rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 35rpx;
    padding: 20rpx 0;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.8);
  }
  .updatedAt {
    padding: 0rpx 0 40rpx 0;
    color: #969696;
    font-size: 20rpx;
    .author {
      margin-right: 30rpx;
    }
  }
}
</style>
