yihuo/pages/award/adDialog.vue

<template>
    <view class="cu-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog" >
          <image class="adImg" :src="adInfo.cover" mode="widthFix" @click="gotoRoute(adInfo)"/>
        </view>
        <view class="closeBtn" @click="visible = false">
            <view class="cuIcon-close"></view>
        </view>
    </view>
</template>

<script>
    import { throttle } from '@/utils/utils.js'
    import ossurl from '@/utils/ossurl'
    import { objectToString } from '@vue/shared'
    export default {
      props:{
        adInfo:Object
      },
        data() {
            return {
                visible: true,
                ossurl
            }
        },
        computed: {
        },
        mounted(){
        },
        methods: {
            gotoRoute(item) {
              this.visible = false
              this.$common.showNext(item)
            },
            show() {
                this.visible = true
            },
            close() {
                this.visible = false
                this.$emit('close', false)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        z-index: 1001;
        background-color: transparent;
        width: 100vw;
        padding-top: 120rpx;
        padding-bottom: 160rpx;
        position: relative;
        .adImg{
          width: 100vw;
        }
    }
    .closeBtn {
        background: #d8d8d8;
        position: fixed;
        bottom: 150rpx;
        right: calc(50% - 32rpx);
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        line-height: 64rpx;
        text-align: center;
        z-index: 1100;
        .cuIcon-close {
            color: #000;
            font-size: 32rpx;
        }
    }
</style>