<template>
  <div class="con">
    <view class="info">
      <view class="info-top flex flex_start_center">
        <view class="left-icon"></view>
        <view class="wrapper-title one_line">
          {{ data.node.ChapterName }}
        </view>
      </view>
      <view class="info-main">
        <view class="flex flex flex_start_center wrapper-section">
          <view class="left-bot"></view>
          章节学习内容
        </view>
        <view class="info-con">
          <rich-text :nodes="data.richText" />
        </view>
      </view>
    </view>
    <van-toast id="van-toast" />
  </div>
</template>

<script >
import { reactive, toRefs, getCurrentInstance, onMounted } from "vue";
import {} from "../../api/index";
export default {
  setup(props) {
    let data = reactive({
      data: {
        node: "",
        richText: "",
      },
    });
    let methods = {};
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: "章节学习内容",
    });
    let data = JSON.parse(decodeURIComponent(options.con));
    this.data.node = data;
    this.data.richText = decodeURIComponent(data.ChapterContent);
  },
};
</script>

<style scoped>
.con {
  box-sizing: border-box;
  padding: 30rpx;
}

.info {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}
.info-top {
  height: 90rpx;
  background-color: #b4ddfe;
  box-sizing: border-box;
  padding: 0 30rpx;
}
.left-icon {
  width: 6rpx;
  height: 22rpx;
  background-image: linear-gradient(180deg, #00acf9, #ffffff);
  margin-right: 10rpx;
}
.wrapper-title {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}
.info-main {
  padding-top: 30rpx;
}
.wrapper-section {
  padding-left: 50rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
  margin-bottom: 30rpx;
}
.wrapper-section .left-bot {
  width: 8rpx;
  height: 8rpx;
  background-color: #00acf9;
  border-radius: 50%;
  margin-right: 10rpx;
}
.info-con {
  height: 340rpx;
  padding-left: 65rpx;
  padding-right: 55rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
  overflow-y: scroll;
}
</style>