<template>
    <div class="flex-column cover" :style="`width:100%;height:100%;color: ${$parent.pptCoverTextColor||'#fff'};`" v-if="pageInfo">
        <!-- <img :src="pageInfo.BackgroundImg" class="pptbg" /> -->
        <!-- <img :src="base64Url" class="pptbg" /> -->
        <img :src="pageInfo.BackgroundImg" class="pptbg"  style="width:100%;height:100%;object-fit: fill !important;"/>
        <div
        style="width:62%; font-size:16px; text-align:center; line-height:1.6;  position:absolute; right:20px; top:50%;zIndex:20;">
        <p :style="`height:5px; 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 ${$parent.pptCoverTextColor||'#fff'};`"></span>
            <span :style="{'color':$parent.pptCoverTextColor||''}">{{$parent.pptCoverCompenyName||'ETA'}}</span>
            <span
            :style="`display:inline-block; width:14px; height:14px; background:${$parent.pptCoverTextColor||'#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 ${$parent.pptCoverTextColor||'#fff'};`"></span>
        </p>
        <p :style="{'color':$parent.pptCoverTextColor||''}">{{$parent.pptCoverDepartName||'投研部'}}</p>
        <p>{{pageInfo.PptDate}}</p>
        <p :style="`width:80%; height:1px; 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>
