samehome/pages/subscription/details.vue

<template>
    <view class="main">
        <!-- nav -->
        <navigation>{{ i18n.Subscription }}</navigation>
        <view class="body">
            <!-- 倒计时 -->
            <view class="countDown">
                <view class="item">
                    <view class="title">{{ i18n.Days }}</view>
                    <view class="value">20</view>
                </view>
                <view class="item">
                    <view class="title">{{ i18n.Hours }}</view>
                    <view class="value">8</view>
                </view>
                <view class="item">
                    <view class="title">{{ i18n.Minutes }}</view>
                    <view class="value">47</view>
                </view>
                <view class="item">
                    <view class="title">{{ i18n.Seconds }}</view>
                    <view class="value">9</view>
                </view>
            </view>

            <!-- input -->
            <view class="input-item">
                <u-input class="input" v-model="SubscribeCount" color="#A1A0A8" fontSize="32rpx" border="none"
                    :placeholder="i18n.PleaseChooseCoin">
                </u-input>
                <view class="selectCoin" @click="USDTPopupShow = true">USDT
                </view>
            </view>
            <!-- total -->
            <Key-value-row :keyName="i18n.Total" :value="'≈ 993.64069952 ACTA'" :size="'24rpx'" :leftColor="'#A1A0A8'"
                :rightColor="'#A1A0A8'"></Key-value-row>

            <!-- 按钮 -->
            <u-button class="button" color="#00E8A2" throttleTime="500">{{
                    i18n.SubscribeNow
            }}
            </u-button>

            <!-- ProjectDetails -->
            <view class="contentTitle">
                <view class="ProjectDetails">{{ i18n.ProjectDetails }}</view>
                <view class="videoBtn">{{ i18n.Video }}</view>
                <view class="whiteBook">{{ i18n.WhiteBook }}</view>
            </view>

            <!-- 文字内容 -->
            <view class="content">Access to COVID-19 Tools Accelerator (ACTA) is a fully decentralized financial (DeFi)
                ecosystem with blockchain as the underlying architecture, 100% decentralized exchange, 100% free
                trading, 100% customized trading model, 100% cross-chain support. We have pre-customized two trading
                models, ACTA/BTC and ACTA/USDT. ACTA/BTC is the mainstream currency with stable appreciation space;
                ACTA/USDT is a stable settlement virtual currency which can be 1:1 freely convertible with US dollars.
                ACTA is the leader of the global digital encryption currency decentralized market.

                Full name of the token: Access to COVID-19 Tools Accelerator

                ACTA total circulation: 1,200,000,000.00

                ICO Price: 0.02 USDT

                ICO Time: From December 12,2021 to March 12, 2022</view>

        </view>
    </view>
</template>

<script>
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
import UButton from '../../uview-ui/components/u-button/u-button'
export default {
    name: "subscriptionDetails",
    data() {
        return {
            SubscribeCount: 0,
            DonatePopupShow: false,
            USDTPopupShow: false,
            DonatePopupDisabled: true,
            coinInfo: {},
            rules: {},
            radioValue: '',
        };
    },
    computed: {
        i18n() {
            return this.$t("subscription");
        },
    },
    onLoad() {
        // console.log(this.$t('login.emailInputMessage'));
    },
    onShow() { },
    methods: {
        radioChange(e) {
            // console.log(e);
        }
    },
    components: { UButton, KeyValueRow }
}
</script>

<style lang="scss" scoped>
.main {

    .body {
        overflow: hidden;
        margin-top: 200rpx;
        padding: 0 48rpx;

        .countDown {
            margin-top: 60rpx;
            height: 248rpx;
            background-image: url(../../static/subscription/RoundedRectangle.png);
            background-repeat: no-repeat;
            background-size: 654rpx 248rpx;
            color: #15141F;
            padding: 36rpx 28rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;
            box-sizing: border-box;

            .item {
                width: 140rpx;
                height: 174rpx;
                font-weight: bold;


                .title {
                    font-size: 32rpx;
                    text-align: center;
                }

                .value {
                    margin-top: 10rpx;
                    font-size: 96rpx;
                    text-align: center;
                }
            }

        }

        .input-item {
            position: relative;
            overflow: hidden;
            height: 124rpx;
            line-height: 124rpx;
            background: #323045;
            margin: 32rpx 0;
            border-radius: 32rpx;
            padding: 0 40rpx;

            /deep/.u-form-item__body {
                padding: 0;
            }

            .input {
                width: 80%;
                height: 124rpx;
            }

            .selectCoin {
                position: absolute;
                width: 150rpx;
                height: 54rpx;
                top: 36rpx;
                right: 0rpx;
                line-height: 56rpx;
                font-size: 36rpx;
                padding: 0;
                color: #fff;
            }
        }

        .button {
            margin-top: 38rpx;
            margin-bottom: 48rpx;
            height: 112rpx;
            line-height: 112rpx;
            border-radius: 32rpx;
            font-size: 32rpx;
            color: #15141F !important;
            font-weight: bold;
        }

        .contentTitle {
            position: relative;
            margin-bottom: 32rpx;

            .ProjectDetails {
                font-size: 32rpx;
                color: #fff;
            }

            .videoBtn {
                position: absolute;
                top: 0;
                right: 184rpx;
                width: 134rpx;
                height: 48rpx;
                line-height: 48rpx;
                background: #F2FE8D;
                border-radius: 8rpx;
                text-align: right;
                color: #15141F;
                font-size: 24rpx;
                font-weight: bold;
                box-sizing: border-box;
                padding: 0 16rpx;

                &::before {
                    display: block;
                    position: absolute;
                    content: '';
                    background-image: url(../../static/subscription/ic_play.png);
                    background-repeat: no-repeat;
                    background-size: 32rpx;
                    width: 32rpx;
                    height: 32rpx;
                    top: 8rpx;
                    left: 10rpx;
                }
            }

            .whiteBook {
                position: absolute;
                top: 0;
                right: 0rpx;
                width: 164rpx;
                height: 48rpx;
                line-height: 48rpx;
                background: #F2FE8D;
                border-radius: 8rpx;
                text-align: center;
                color: #15141F;
                font-size: 24rpx;
                font-weight: bold;
                box-sizing: border-box;
            }
        }


        .content {
            font-size: 24rpx;
            color: #A1A0A8;
            margin-bottom: 48rpx;
        }




    }

}
</style>