快应用全屏广告组件

╰半橙微兮° 2023-07-16 03:36 82阅读 0赞

<template>
        <div class="banner-page"  onclick="handleClose">
            <div class="banner-page__context">
                <image class="banner-image"
                        onclick="handleClickBanner"
                       style="{
       {`margin-top:${top}px;width:${width}px;height:${height}px;`}}"
                       src="{
       {imageUrl}}"></image>
                <image class="close"
                       src="/common/image/close.png"></image>
            </div>
        </div>
    </template>
    <script>
    export default {
        data() {
            return {}
        },
        props: {
            imageUrl: {
                type: String,
                default: `http://img1.imgtn.bdimg.com/it/u=3551116015,2313778618&fm=26&gp=0.jpg`
            },
            top: {
                type: Number,
                default: 400
            },
            width:{
                type:[String,Number],
                default:500
            },
            height:{
                type:[String,Number],
                default:500
            }
        },
        handleClose(){
            this.$emit('close')
        },
        handleClickBanner(evt){
            // console.log(evt)
            // evt.stop()
            this.$emit('banner')
        }
    }
    </script>
    <style lang="less" scoped>
    .banner-page {
      width: 100%;
      height: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.5);
      .banner-page__context {
        align-items: center;
        flex-direction: column;
        /* justify-content: center; */
        width: 100%;
        .banner-image {
          width: 200px;
          height: 200px;
          display: block;
          margin-top: 500px;
        }
        .close {
          width: 130px;
          height:130px;
          padding:30px;
        }
      }
    }
    </style>