learning-system-portal/src/components/AlertPopup.vue

<template>
  <!--弹出窗口设置-->
  <div>
    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false"  class="medalbox"  :visible.sync="showGonggao"  :append-to-body="true" >
        <div class="dlg-box" :style="`width:${config.width};height:${config.height}; background: url(${webBaseUrl}/images/gonggao/${config.bgImage}.png) no-repeat;`">
            <span class="dlg-close" @click="showGonggao = false"><i style="font-size: 28px;color: #999;" class="el-icon-close"></i></span>
            <div style="text-align:left;">
              <div class="dlg-title" v-html="config.title"></div>
              <div class="dlg-content" v-html="config.content"></div>
            </div>
            <div v-if="config.btnText"><a :href="config.pcUrl" @click="showGonggao = false" target="_blank" :style="{'background-color':config.btnColor}" class="dlg-button">{{config.btnText}}</a> </div>
            <div v-if="config.author" style="text-align: right;padding-top: 20px;"><span>{{config.author}}</span> </div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    props:{
      config: {
        type:Object,
        default(){
          return{
              id:'',//数据id
              closeable:false,//不可以关闭
              width:'500px',//宽度
              height:'500px',
              title:'公告',//标题
              content:'',//文字内容
              bgImage:'dlg_bg',//背景图
              pcUrl:'',//点击后打开的地址,最好是使用相对地址
              h5Url:'',
              btnText:'立即参与',//
              btnColor:'#008BFF',
              author:'',
              type:0,//0表不控制，
            }
        }
      },
    },
    data() {
      return {
        showGonggao:false,
        sessionKey:'alertpopup',
      };
    },
    mounted() {
       let loadNum =  localStorage.getItem(this.sessionKey);
       let hasFlag = sessionStorage.getItem(this.sessionKey);
       let $this=this;
       if(!hasFlag){
         let times=0;
         if(loadNum){
           times=Number(loadNum);
         }
         if(times<3){
           let now=new Date();
           let min=new Date(2022,10,9,0,0,0);
           let max=new Date(2022,11,1,0,0,0);
           //console.log(now,min,max);
           //console.log(now.getTime(),min.getTime(),max.getTime());
           if(now.getTime()>min.getTime() && now.getTime()<max.getTime()){
              //console.log('open')
              this.showGonggao=true;
              times++;
              localStorage.setItem(this.sessionKey,times);
              sessionStorage.setItem(this.sessionKey,1);
           }
         }

       }
    }
  }
</script>

<style scoped lang="scss">

  .dlg-box{
    text-align: center;
    margin: 0 auto;
    //background: transparent !important;
    padding:120px 60px 20px 50px;
  }
  .dlg-title{
    color: #333333;
    font-size: 26px;
    padding: 30px 0px;
    text-align: center;
    font-weight: 600;
  }
  .dlg-content{
    color: #333333;font-size: 18px;height: 150px;
  }
  .dlg-button{
      border-radius: 22px;
      display: inline-block;
      font-size: 18px;
      padding: 10px;
      width: 300px;
      height: 46px;
      text-align: center;
      color: #fff;

  }
  .dlg-close{
    float: right;
    margin-top: -90px;
    cursor: pointer;
  }
  .medalbox {

    ::v-deep .el-dialog{
      background: transparent !important;
      box-shadow:none !important;
      .el-dialog__header{
         display: none !important;
      }
      .el-dialog__body{
        //  width: 320px !important;
        //  height: 420px !important;
        background: transparent !important;
      }
    }
  }
</style>