ngbwg-wx/src/views/EnterNingguo/summarize.vue

<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang='ts'>
import { SummarizeApi } from "@/api/api/summarize/index";
import { showToast } from "vant";
import {baseIMGUrl} from '@/api/request.ts'

const summarize = ref({} as any)

const videos = ref([] as any)

// const htmlContent = ref('<p>八骏马图周器垒</p><p>      创造者、设计者：戴嘉林   高：38.8cm 口：12.1cm 足：14cm</p><p>      2017年11月8日，国家主席习近平和夫人彭丽媛陪同来华进行国事访问的美国总统特朗普和夫人梅拉尼娅一同参观故宫。宾主来到畅音阁，沿途欣赏了景泰蓝工艺精品和制作技艺展示，并尝试为景泰蓝《八骏马周器垒》，《国色天香》瓶点蓝，领略中华文化。</p><p></p>')


const formatrtf = computed(() => {
  return summarize.value.rtf.replace(
    /<img /g,
    '<img style="width: 100%;" '
  ).replace(
    /<p\b[^>]*>/g,
    '<p style="width: 100%; word-wrap: break-word;">'
  );
})
onBeforeMount(async () => {
  const res: any = await SummarizeApi.getSummerize()
  if (res.code == 0) {
    summarize.value = res.data
    // 筛选出所有视频
    videos.value = res.data.files.filter((item: any) => {
      return item.filePath.includes('.mp4')
    })
    console.log(videos.value)
  } else {
    showToast(res.msg)
  }
})
</script>

<template>
  <div class='home'>
    <div class="video-box" v-if="videos.length > 0">
      <van-swipe class="my-swipe" indicator-color="white" lazy-render>
        <van-swipe-item v-for="(item, index) in videos" :key="index"><video :src="baseIMGUrl + item.filePath"
            controls></video></van-swipe-item>
      </van-swipe>
    </div>
    <div class="content-bottom">
      <div class="title">
        <img src="@/assets/images/cicle.png" alt="">
        <div class="title-content">宁国概览</div>
      </div>
      <div class="content" v-html="formatrtf"></div>
    </div>
  </div>
</template>

<style lang='less' scoped>
* {
  box-sizing: border-box;
}

.home {
  width: 100%;
  height: 100%;
  background: #F7F3E8;
  overflow: auto;



  .video-box {
    width: 100%;
    // height: auto;

    .my-swipe .van-swipe-item {
      width: 100%;
      height: 31.5vh;
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;

      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .content-bottom {
    padding: 20px;

    .title {
      font-size: 1.4em;
      color: #333333;
      font-weight: bold;
      position: relative;
      // line-height: 1.6em;
      display: flex;
      align-items: flex-end;
      margin-bottom: 10px;

      img {
        position: absolute;
        left: 0;
        top: 0;
        height: 1.6em;
      }

      .title-content {
        // position: absolute;
        position: relative;
        left: 0;
        top: 0;
        height: 1.4em;
        z-index: 2;
        line-height: 1.6em;
        color: #333333;
        margin-top: 1%;
        font-family: SourceHanSansCN-Bold;

      }

    }

    .content {
      white-space: pre-wrap;
      color: #88866F;
      // line-height: 44px;
    }

  }




}
</style>