yihuo/pages/magic/explain.vue

<template>
    <view class="cu-modal bottom-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view class="paddingY25 flex-align-center relative">
                <image :src="resource.icon_x" class="x" @click="close" />
            </view>
            <view class="paddingX14 font4 color-2">
                <view class="paddingT6">1.源石专属于宝箱，可以在购买宝箱商品时抵扣商品金额</view>
                <view class="paddingT6">2.源石获得：源石可通过参与活动获得</view>
                <view class="paddingT6">
                    3.使用限制：
                    <view class="marginL15">
                        <view>
                            1)
                            如您在使用现金购买宝箱商品，则100源石可抵扣1元人民币。每次购买商品时可抵扣的源石数量，请按照实际支付时页面展示的抵用数量为准
                        </view>
                        <view>
                            2)
                            若您是宝箱新用户（从未购买过宝箱商品）首单支付宝箱商品时，源石至多抵扣订单金额的100%
                        </view>
                    </view>
                </view>
                <view class="paddingT6">4.源石的有效期：源石的有效期为无限期</view>
                <view class="paddingT6">
                    5.源石一经抵扣立即作废。如您在购买宝箱商品时使用源石抵扣商品金额的，若宝箱商品发生退款，源石不予返还
                </view>
                <view class="paddingT6">6.源石不能兑现，不可转让</view>
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
export default {
    data() {
        return {
            resource,
            visible: false
        }
    },
    computed: {
        wrapperWidth() {
            return this.$store.state.systemInfo.screenHeight - 100
        }
    },
    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 {
    border-radius: 15px 15px 2px 2px;
    padding-bottom: 50rpx;
    background: #fff;
    .title {
        width: 172rpx;
        height: 28rpx;
    }
    .x {
        position: absolute;
        right: 28rpx;
        top: 50%;
        margin-top: -16rpx;
        width: 32rpx;
        height: 32rpx;
    }
}
</style>