yihuo/pages/weal/rule.vue

<template>
    <view class="cu-modal" :class="{'show': visible}">
        <view class="mask" @click="close"></view>
        <view class="cu-dialog" style="background-color: transparent; width:100%">
            <view class="relative wrapper">
                <image :src="ossurl.welfare.roomRule" class="image" mode="widthFix" />

            </view>
            <view class="paddingT30 flex-align-center">
                <view class="close cuIcon-close" @click="close"></view>
            </view>
        </view>
    </view>
</template>

<script>
import ossurl from '@/utils/ossurl'
export default {
    data() {
        return {
            ossurl,
            visible: false
        }
    },
    methods: {
        show() {
            this.visible = true
        },
        close() {
            this.visible = false
        }
    }
}
</script>

<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    z-index: 1001;
    margin: 0 56rpx;
    .image {
        width: 100%;
    }
}
.close {
  width: 64rpx;
height: 64rpx;
background: #D8D8D8;
font-size: 32rpx;
text-align: center;
line-height: 64rpx;
color: #444;
border-radius: 50%;
}
</style>