eta_front/src/views/ppt_manage/newVersion/components/Cover.vue

<template>
    <div class="flex-column cover" style="width:100%;" v-if="pageInfo">
        <!-- <img :src="pageInfo.BackgroundImg" class="pptbg" /> -->
        <!-- <img :src="base64Url" class="pptbg" /> -->
        <img :src="pageInfo.BackgroundImg" 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 style="display:inline-block; width:15px; margin-right:5px; border-top:1px solid #fff;"></span>
            <span>弘则弥道（上海）投资咨询有限公司</span>
            <span
            style="display:inline-block; width:14px; height:14px; background:#fff; border-radius:100%; margin:0 5px;"></span>
            <span>{{ pageInfo.ReportType }}</span>
            <span style="display:inline-block; width:15px; margin-left:5px; border-top:1px solid #fff;"></span>
        </p>
        <p>FICC研究部</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>