yihuo/pages/playing_method/index.vue

<template>
    <page title="玩法规则">
        <view class="flex-column-align-center paddingT12">
            <image :src="ossurl.common.playRule" style="width: 100%" mode="widthFix" />
        </view>
        <view class="flex-column-align-center paddingY15" v-if="rule">
            <image
                :src="rule.title.img"
                :style="{ width: `${rule.title.width}rpx`, height: '44rpx' }"
            />
        </view>
        <view class="wrapper">
            <!-- <view class="" v-if="rule && rule.setpTitle">
                <view class="flex-column-align-center">
                    <image
                        :src="rule.setpTitle"
                        :style="{
                            width: '100%',
                            height: '132rpx'
                        }"
                    />
                </view>
            </view> -->
            <view v-if="rule" style="font-size: 0;">
                <image
                    v-for="(item, index) in rule.data"
                    :key="index"
                    webp
                    :src="item"
                    :style="{ width: '100%' }"
                    mode="widthFix"
                />
            </view>
        </view>
    </page>
</template>
<script>
    import resource from '@/utils/resource'
    import ossurl from '@/utils/ossurl'
    const RULE = {
        1: {
            title: { img: ossurl.box.rule.ruleTitle, width: 194 },
            setpTitle: ossurl.box.rule.ruleTip,
            data: [
                ossurl.box.rule.step_1,
                ossurl.box.rule.step_2,
                ossurl.box.rule.step_3,
                ossurl.box.rule.step_4,
                ossurl.box.rule.step_5,
                ossurl.box.rule.step_6,
                // ossurl.box.rule.step_7,
                // ossurl.box.rule.step_8
            ]
        },
        2: {
            title: { img: ossurl.box.rule.ruleTitle, width: 194 },
            data: [
                ossurl.box.rule.step_2_1,
                ossurl.box.rule.step_2_2,
                ossurl.box.rule.step_2_3,
                ossurl.box.rule.step_2_4,
                ossurl.box.rule.step_2_5,
                ossurl.box.rule.step_2_6,
                // ossurl.box.rule.step_2_7
            ]
        }
    }
    export default {
        data() {
            return {
                resource,
                rule: null,
                ossurl
            }
        },
        onLoad(options) {
            this.rule = RULE[options.type - 0]
        },
        computed: {
            screenWidth() {
                return this.$store.state.systemInfo.screenWidth
            },
            image1Style() {
                let width = this.$store.state.systemInfo.screenWidth - 28
                return {
                    width: width + 'px',
                    height: parseInt((width * 306) / 347) + 'px'
                }
            }
        }
    }
</script>
<style>
    page {
        background: #fff;
    }
</style>
<style lang="scss" scoped>
    .context {
        padding: 20rpx 0;
        border-radius: 20rpx;
        margin: 0 14px 30rpx;
        background: #e2e6e7;
    }
    .context2 {
        border-radius: 20rpx;
        margin: 0 14px 30rpx;
        background: #e2e6e7;
    }
</style>