dev/dcp-web-gate/src_old/views/conferenceServices/ConfrenceViewpoint.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'? 'Speakers': '嘉宾观点'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content-box">
        <div class="confrence-viewpoint">
            <div style="float: left; margin-right: 30px">
              <div
                  :style="{width: '500px', height: '320px', backgroundImage: 'url(./api/file/pub/'+viewpointData.videoUrl+')', backgroundSize: '100% 100%'}"
              ></div>
              <p class="guest-info">
                  <span>{{lang=='en'? viewpointData.positionEn: viewpointData.position}}</span>
                  <span>{{lang=='en'? viewpointData.speakGuestEn: viewpointData.speakGuest}}</span>
              </p>
            </div>
            <p class="guest-viewpoint">{{lang=='en'? viewpointData.ideaContentEn: viewpointData.ideaContent}}</p>
        </div>
    </div>
  </div>
</template>

<script>
import { findSpeakGuestDetail } from "@/api/meeting/meetingOutInfo";
export default {
    data(){
        return {
            viewpointData: {},
            lang: ''
        }
    },
    created(){
        this.lang = this.$i18n.locale;
    },
    watch: {
        '$i18n.locale'(val){
            this.lang = val;
        }
    },
    mounted(){
      findSpeakGuestDetail(this.$route.query.key).then(res=>{
        this.viewpointData = res.data;
      }).catch(err=>{
        this.viewpointData = {};
      })
    }
}
</script>

<style scoped>
.container-box {
  margin: 10px auto;
  background: #fff;
  padding: 0 20px;
  min-height: calc( 100vh - 420px );
  box-sizing: border-box;
}
.bread-crumb {
  background: #fff;
  padding: 20px 0;
}
.content-box {
  position: relative;
  padding-bottom: 40px;
}
.confrence-viewpoint{
    padding-top: 20px;
    overflow: hidden;
}
.confrence-viewpoint .guest-info {
  width: 500px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.confrence-viewpoint .guest-info span:last-child {
  margin-left: 20px;
}
.guest-viewpoint{
  text-indent: 2em;
  line-height: 34px;
  font-size: 18px;
  margin: 0;
}
</style>