<template>
    <div class="flex-column cover" style="width:100%;" v-if="pageInfo">
        <img :src="pageInfo.imgLocalUrl" class="pptbg"  style="width:100%"/>
        <div
        style="width:62%; font-size:16px; text-align:center; line-height:1.6; color:#fff; position:absolute; right:20px; top:50%;zIndex:20;">
        <p style="height:5px; border-top:1px solid #fff;marginBottom:21px;"></p>
        <p style="font-size:28px;">{{ pageInfo.Title }}</p>
        <p style="display:flex; align-items:center; justify-content:center;margin:10px 0;">
            <span>HORIZON INSIGHTS PTE. LTD.</span>
        </p>
        <p style="display:flex; align-items:center; justify-content:center;">
          <span style="display:inline-block; width:15px; margin-left:5px; border-top:1px solid #fff;"></span>  
          <span>{{ pageInfo.ReportType }}</span>
          <span style="display:inline-block; width:15px; margin-left:5px; border-top:1px solid #fff;"></span>
        </p>
        <p>FICC Research Department</p>
        <p>{{pageInfo.PptDate}}</p>
        <p style="width:80%; height:1px; border-bottom:1px solid #fff; margin:21px auto 0;"></p>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        pageInfo:{
            type:Object
        }
    },
  data() {
    return {
        base64Url:null
    };
  },
  methods: {},
  mounted(){},
};
</script>

<style scoped lang="scss">

</style>
