yihuo/pages/award/activity_tab.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="resource.activity_bg" class="width100 height100"/>

                <view class="cancel">
                    <image :src="resource.doll_close" class="width100 height100" @click="close" />
                </view>
                <view class="confirm">
                    <image :src="resource.activity_1" class="x" @click="submit(1)" />
                    <image :src="resource.activity_2" class="x" @click="submit(2)" />
                    <image :src="resource.activity_3" class="x" @click="submit(3)" />
                    <image :src="resource.activity_4" class="x" @click="submit(4)" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
export default {
    data() {
        return {
            resource,
            visible: false,
        }
    },
    methods: {
        show() {
            this.visible = true
        },
        close() {
            this.visible = false
        },
        submit(type) {
            this.visible = false
            if(type === 1) this.$router.switchTab('vip')
            if(type === 2) {
                getApp().globalData.wealActive = 0
                this.$router.switchTab('weal')
            }
            if(type === 3) {
                getApp().globalData.wealActive = 3
               this.$router.switchTab('weal')
            }
            if(type === 4) this.$router.pushCheck('exchange')
        }
    }
}
</script>

<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    width: 640rpx;
    height: 633rpx;
    margin: 200rpx 55rpx 0;
}
.text {
    font-size: 40rpx;
    color: #fff;
    margin: 58rpx auto 0;
    text-align: center;
}
.cancel {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    width: 64rpx;
    height: 64rpx;
}
.confirm {
    position: absolute;
    top: 125rpx;
    left: 33rpx;
    width: 568rpx;
    height: 100%;
    z-index: 999;
}
.x {
    // position: absolute;
    // top: 10rpx;
    // left: 0;
    margin-top: 24rpx;
    width: 100%;
    height: 88rpx;
}
</style>