wwbsr/pages/help/chainbits.vue

<template>
    <v-page>
        <v-header>
            <template #title>
                <view>
                    {{ $t("help.f0") }}
                    <!-- <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/8.png" alt="" />
            </view>
            <text class="layout-main__tip">{{ $t("help.f1") }}</text>
            <view class="layout-main-container bg-panel-3">
                <img src="/static/img/articles/9.png" alt="" />
            </view>
            <text class="layout-main__tip">{{ $t("help.f2") }}</text>
            <view class="layout-main-container bg-panel-3">
                <text>{{ $t("help.f3") }}</text>
            </view>
            <view class="layout-main-container bg-panel-3">
                <img src="/static/img/articles/10.png" alt="" />
            </view>
            <text class="layout-main__tip align-left mt36">{{
                $t("help.f4")
            }}</text>
            <text class="layout-main__tip align-left m0">{{
                $t("help.f5")
            }}</text>
            <text class="layout-main__tip align-left mb36">{{
                $t("help.f6")
            }}</text>
            <view class="layout-main-container bg-panel-3">
                <text>{{ $t("help.f7") }}</text>
                <text>{{ $t("help.f8") }}</text>
                <text>{{ $t("help.f9") }}</text>
                <text>{{ $t("help.g0") }}</text>
            </view>
            <view class="layout-main-container bg-panel-3">
                <text>{{ $t("help.g1") }}</text>
                <text>{{ $t("help.g2") }}</text>
                <text>{{ $t("help.g3") }}</text>
                <text>{{ $t("help.g4") }}</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>