wwbsr/pages/help/simple.vue

<template>
    <v-page>
        <v-header>
            <template #title>
                <view>
                    {{ $t("help.h0") }}
                    <!-- <span class="color-theme-1">123</span> -->
                </view>
            </template>
        </v-header>
        <view class="layout-main p-x-lg">
            <view class="purchase-container">
                <view class="purchase__left">
                    <text class="purchase--title">
                        {{ $t("help.h1") }} <br />
                        {{ $t("help.h2") }}
                    </text>
                    <view class="purchase--desc-container">
                        <img
                            class="purchase--desc-img"
                            src="/static/img/articles/101.png"
                            alt=""
                        />
                        {{ $t("help.h3") }}
                        <img
                            class="purchase--desc-img"
                            src="/static/img/articles/101.png"
                            alt=""
                        />
                    </view>
                    <view class="purchase--version">
                        {{ $t("help.h4") }} <text>4.1.1</text>
                        <img src="/static/img/articles/102.png" alt="" />
                        {{ $t("help.h5") }}
                    </view>
                </view>
                <img
                    class="purchase__right"
                    src="/static/img/articles/100.png"
                    alt=""
                />
            </view>
            <view class="m-b-lg layout-main-container bg-panel-3">
                <view
                    class="moompys"
                    block
                    @click="jump('https://www.simplex.com/buy-crypto')"
                    >{{ $t("help.a3") }}</view
                >
                <view class="txt" @click="links('/pages/help/moompy')"> {{ $t("help.h6") }} </view>
                <view
                    class="chainbits"
                    block
                    @click="jump('https://changenow.io/?from=usd&to=btc&fiatMode=true')"
                    >{{ $t("help.f0") }}</view
                >
                <view class="txt" @click="links('/pages/help/chainbits')"> {{ $t("help.h6") }} </view>
            </view>
        </view>

        <van-toast id="van-toast" />
    </v-page>
</template>
<script>
export default {
    components: {},
    data() {
        return {};
    },
    onLoad() {},
    methods: {
        links(href) {
            // this.$router.push({ path: href });
			uni.navigateTo({
				url:href,
				fail() {
					uni.switchTab({
						url:href
					})
				}
			})
        },
		jump(href) {
			// #ifdef H5
			window.location.href = href;
			// #endif
			// #ifdef APP-PLUS
			plus.runtime.openURL(href)
			// #endif
			
		},
    },
};
</script>
<style lang="scss" scoped>
.moompys,
.chainbits {
    background-size: 100% 100%;
    background-blend-mode: normal, normal;
    border-radius: 44px;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    color: #fff;
    /deep/ uni-button {
        background-color: rgba(0, 0, 0, 0);
    }
    &.moompys {
        background-image: $gradient-blue;
    }
    &.chainbits {
        margin-top: 60rpx;
        background-image: $gradient-red;
    }
}
.txt {
    font-size: 30rpx;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24rpx;
    color: #ffffff;
    opacity: 0.7;
    text-align: center;
    padding: 48rpx 0 40rpx;
    position: relative;
    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-bottom: 1px solid rgba(#fff, 0.5);
    }
}
.purchase-container {
    position: relative;
    padding-top: 100rpx;
    .purchase__left {
        text-align: center;
        width: calc(100% - 150rpx);
        .purchase--title {
            font-size: 35rpx;
            color: #ffffff;
            line-height: 80rpx;
        }
    }
    .purchase__right {
        position: absolute;
        top: 100rpx;
        right: 0;
        width: 200rpx;
    }
    .purchase--desc-container {
        position: relative;
        text-align: center;
        display: inline-block;
        line-height: 100rpx;
        color: rgba(#fff, 0.5);
        font-size: 24rpx;
        .purchase--desc-img {
            position: absolute;
            width: 100%;
            height: 4rpx;
            left: 0;

            &:first-of-type {
                top: 0;
            }
            &:last-of-type {
                bottom: 0;
            }
        }
    }
    .purchase--version {
        margin-top: 60rpx;
        font-size: 20rpx;
        color: rgba(#fff, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 15rpx;
            height: 15rpx;
            display: inline-block;
            margin-right: 4rpx;
        }
        text {
            background-color: #00d875;
            display: inline-block;
            margin: 0 10rpx;
            padding: 0 4rpx;
            border-radius: 2rpx;
        }
    }
}

.layout-main {
    padding-bottom: 36rpx;
}
.layout-main-container {
    margin-top: 90rpx;
    border-radius: 20rpx;
    // padding: 36rpx;
    padding: 70rpx 100rpx;
}
</style>