yihuo/pages/award_detail/ruleDialog.vue

<template>
    <view class="cu-modal" :class="{ show: visible }">
        <view class="mask"></view>
        <view
            class="wrapper cu-dialog"
            style="background-color: transparent; width: 100%; padding: 0"
        >
            <view class="relative" style="text-align: center;">
                <image :src="ossurl.box.rule.cjsRule" mode="widthFix" style="width: 90%" />
                <view class="footer">
                    <view class="more" @click="showRule">查看详细规则</view>
                    <view class="close cuIcon-close" @click="close"></view>
                </view>
            </view>
        </view>
        <goods-detail ref="goodsDetailRef" />
    </view>
</template>

<script>
    import ossurl from '@/utils/ossurl'
    export default {
        props: {},
        data() {
            return {
                ossurl: ossurl,
                visible: false
            }
        },
        computed: {},
        methods: {
            close() {
                this.visible = false
            },
            showRule() {
                this.$router.push('playing_method', { type: 1 })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .footer {

        text-align: center;
        width: 100%;
        .more {
            font-size: 24rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            color: #fff8e5;
            padding: 30rpx;
            text-decoration: underline;
        }
    }
    .close {
        display: inline-block;
        width: 64rpx;
        height: 64rpx;
        background: #d8d8d8;
        font-size: 32rpx;
        text-align: center;
        line-height: 64rpx;
        color: #444;
        border-radius: 50%;
    }
</style>