xmhjc-front-end/src/views/XMHJC/column/newPageEditor.vue

<template>
  <div class="newPageEditor">
  <div style="width: 100%;">
    <img style="width: 100%;" :src="bannerImg" alt="">
  </div>
    <div class="indexMain">
      <el-breadcrumb separator="/" style="margin-bottom: 8px;">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>行业资讯</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
        <!-- 直接展示富文本 -->
        <div style="width: 100%;" >
            <div>
                <div class="fwbtitle">{{ formData.title }}</div>
                <div class="fwbtitle2">
                    {{ formData.columnIdName }}
                    {{ formData.time }}
                    <div v-if="formData.bodyType=='2'">{{formData.readNum}}次播放</div>
                </div>
            </div>
            
            <div v-if="formData.bodyType=='1'" v-html="formData.content" class="right">
            
            </div>
            <!-- 展示视频 -->
            <div style="display: flex;" v-if="formData.bodyType=='2'">
                <div>
                    <div class="videoBox">
                        <video id="myVideo" v-if="videoUrl!=''" style="height:100%;width: 100%;" controls>
                            <source :src="videoUrl"
                            type="video/mp4">
                            <source :src="videoUrl"  type="video/ogg">
                            您的浏览器不支持 HTML5 video 标签。
                        </video>
                    </div>
                    <div style="width: 100%">
                        <img style="width: 100%" :src="ButtonImg" alt="">
                    </div>
                </div>
                <div style="width: 30%">
                    <img style="width: 100%" :src="rightImg" alt="">
                </div>
            </div>
        </div>

    </div>
  <div style="width: 100%;">
    <img style="width: 100%;" :src="bootImg" alt="">
  </div>
  </div>
</template>

<script setup>
import { ref,onMounted, watch } from "vue";


//定义路由
import {useRouter,useRoute} from 'vue-router'
const router=useRouter()
const route=useRoute()




const bannerImg = ref('/img/viewsHead.png')
const bootImg = ref('/img/viewsBoot.png')
const rightImg = ref('/img/viewRight.png')
const ButtonImg = ref('/img/viewButton.png')
const breadcrumbImg = ref('/img/viewBreadcrumb.png')

const formData = ref({
    content:'',
    columnIdName:'',
    time:'',
    title:'',
    bodyType:'1',
    readNum:'18',
})
watch(
  () => route.query,
  async(routeQuery) => {
    console.log('newRouterName222222222',routeQuery)
    

  }
)
const videoUrl = ref('')

onMounted(async() => {
    
    formData.value = JSON.parse(localStorage.getItem('formData')) 

    videoUrl.value = formData.value.videoList[0].fileUrl
});


</script>

<style scoped>
.newPageEditor{
  /* overflow: hidden;
  width: 100vw; */

}
.indexMain{
    width: 80vw;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    background-color: #fff;
    min-height: 300px;
    overflow: auto;
    min-width: 900px;
    flex-direction: column;
}
.right{
    margin-top: 20px;
}
.fwbtitle{
    font-size: 28px;
    text-align: left;
    font-weight: bold;
    /* height: 60px; */
    line-height: 60px;
}
.fwbtitle2{
    font-size: 16px;
    text-align: left;
    color: #ccc;
    height: 40px;
    line-height: 40px;
}
.videoBox{
    /* width: 70%; */
    height: 450px;
    background-color: #000;
    text-align: center
}
</style>