dev/dcp-web-gate/src_old/views/conferenceServices/NewsDetail.vue

<template>
  <div class="autoBox container-box">
    <div class="bread-crumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: 'home' }">{{lang=='en'? 'Home': '首页'}}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'ConferenceServices'}">{{lang=='en'? 'Conferences': '会议'}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{lang=='en'? newData.titleEn: newData.title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content-box">
        <div class="news-content">
            <h3>{{lang=='en'? newData.titleEn: newData.title}}</h3>
            <p class="source">{{lang=='en'? 'Source: '+newData.dataSourceEn: '来源: '+newData.dataSource}}</p>
            <video 
                :src="'./api/file/pub/'+newData.videoUrl" width="500" height="350" controls="controls"
                v-if="newData.videoUrl"
                id="lastConferenceVideo">
                Your browser does not support the video tag.
            </video>
            <div v-html="lang=='en'? newData.urlDescEn: newData.urlDesc"></div> 
        </div>
    </div>
  </div>
</template>

<script>
import { getNewDetail } from "@/api/meeting/meetingOutInfo";
export default {
    data(){
        return {
            newData: {},
            lang: ''
        }
    },
    created(){
        this.lang = this.$i18n.locale;
    },
    watch: {
        '$i18n.locale'(val){
            this.lang = val;
        }
    },
    mounted(){
        getNewDetail(this.$route.query.key).then(res=>{
            console.log('媒体详情',res)
            this.newData = res.data;
        })
    },
    methods: {
      // getConferenceId(){
      //     this.$store.commit('setConferenceId', window.localStorage.getItem('conferenceId'));
      // },
    }
}
</script>

<style scoped>
.container-box {
  margin: 10px auto;
  background: #fff;
  padding: 0 20px;
  box-sizing: border-box;
  min-height: calc( 100vh - 420px )
}
.bread-crumb {
  background: #fff;
  padding: 20px 0;
}
.content-box {
  position: relative;
  padding-bottom: 40px;
}
.news-content h3{
    text-align: center;
    line-height: 48px;
    padding: 30px 0;
    margin: 0;
    font-size: 32px;
    font-weight: normal;
}
.source{
  text-align: right;
  color: #555;
}
.news-content >>> img{
  display: block;
  margin: 30px auto;
  max-width: 100% !important;
}
.news-content >>> p{
  text-indent: 2em;
  line-height: 34px;
  font-size: 18px;
  margin: 0;
}
.news-content >>> video{
  display: block;
  margin: 30px auto;
}
</style>