wwbsr/pages/help/moompy.vue

<template>
    <v-page>
        <v-header>
            <template #title>
                <view>
                    {{ $t("help.a3") }}
                    <!-- <span class="color-theme-1">123</span> -->
                </view>
            </template>
        </v-header>
        <view class="layout-main p-x-lg">
            <view class="layout-main-container bg-panel-3">
                <img src="/static/img/articles/1.png" alt="" />
            </view>
            <text class="layout-main__tip">{{ $t("help.a4") }}</text>
            <view class="layout-main-container bg-panel-3">
                <img src="/static/img/articles/2.png" alt="" />
            </view>
            <text class="layout-main__tip">{{ $t("help.a5") }}</text>
            <view class="layout-main-container bg-panel-3">
                <text class="layout-main__title">{{ $t("help.a6") }}</text>
                <text>{{ $t("help.a7") }}</text>
                <text>{{ $t("help.a8") }}</text>
                <text>{{ $t("help.a9") }}</text>
                <text>{{ $t("help.b0") }}</text>
                <text>{{ $t("help.b1") }}</text>
                <text>{{ $t("help.b2") }}</text>
            </view>
            <view class="layout-main-container bg-panel-3">
                <img src="/static/img/articles/3.png" alt="" />
                <img src="/static/img/articles/4.png" alt="" />
            </view>
            <text class="layout-main__tip align-left mt36">{{
                $t("help.b3")
            }}</text>
            <text class="layout-main__tip align-left m0">{{
                $t("help.b4")
            }}</text>
            <text class="layout-main__tip align-left mb36">{{
                $t("help.b5")
            }}</text>
            <view class="layout-main-container bg-panel-3">
                <text class="layout-main__title">{{ $t("help.b6") }}</text>
                <text>{{ $t("help.b7") }}</text>
            </view>
            <view class="layout-main-container bg-panel-3">
                <img src="/static/img/articles/5.png" alt="" />
            </view>
            <text class="layout-main__tip align-left">{{ $t("help.b8") }}</text>
            <view class="layout-main-container bg-panel-3">
                <img src="/static/img/articles/6.png" alt="" />
            </view>
            <view class="layout-main-container bg-panel-3">
                <text class="layout-main__title">{{ $t("help.b9") }}</text>
                <text>{{ $t("help.c0") }}</text>
                <text>{{ $t("help.c1") }}</text>
                <text>{{ $t("help.c2") }}</text>
                <text>{{ $t("help.c3") }}</text>
                <text>{{ $t("help.c4") }}</text>
            </view>
            <view class="layout-main-container bg-panel-3">
                <img src="/static/img/articles/7.png" alt="" />
            </view>
            <view class="layout-main-container bg-panel-3">
                <text class="layout-main__title">{{ $t("help.c5") }}</text>
                <text>{{ $t("help.c6") }}</text>
                <text>{{ $t("help.c7") }}</text>
                <text>{{ $t("help.c8") }}</text>
                <text>{{ $t("help.c9") }}</text>
                <text>{{ $t("help.d0") }}</text>
                <text>{{ $t("help.d1") }}</text>
                <text>{{ $t("help.d2") }}</text>
                <text>{{ $t("help.d3") }}</text>
            </view>
            <view class="layout-main-container bg-panel-3">
                <text class="layout-main__title">{{ $t("help.d4") }}</text>
                <text>{{ $t("help.d5") }}</text>
                <text>{{ $t("help.d6") }}</text>
                <text>{{ $t("help.d7") }}</text>
            </view>
        </view>

        <van-toast id="van-toast" />
    </v-page>
</template>
<script>
export default {
    components: {},
    data() {
        return {};
    },
    onLoad() {},
    methods: {},
};
</script>
<style lang="scss" scoped>
.layout-main {
    padding-bottom: 36rpx;
}
.layout-main-container {
    border-radius: 36rpx;
    padding: 36rpx;
    color: rgba(#fff, 0.5);
    font-size: 26rpx;
    + .layout-main-container {
        margin-top: 36rpx;
    }
    .layout-main__title {
        color: #fff;
        font-size: 36rpx;
        margin-bottom: 30rpx;
    }
    text {
        display: block;
    }
    img {
        width: 100%;
        + img {
            display: block;
            margin-top: 26rpx;
        }
    }
}
.layout-main__tip {
    display: block;
    text-align: center;
    color: rgba(#fff, 0.5);
    margin: 40rpx 0;
    &.align-left {
        text-align: left;
    }
    &.m0 {
        margin: 0;
    }
    &.mt36 {
        margin-top: 36rpx;
        margin-bottom: 0;
    }
    &.mb36 {
        margin-bottom: 36rpx;
        margin-top: 0;
    }
}
</style>