wallet_app/src/views/wallet/proceeds/index.vue

<template>
    <div class="container">
        <div class="content">
            <div class="title">
                <div class="logo"></div>
                <div>{{ $t('wallet.ACCCollection') }}</div>
            </div>
            <div class="qrcode">
                <qrcode-vue :value="qrtext" :size="239" :margin="2" background="transparent"/>
                <div class="address">{{walletStore.account}}</div>
            </div>
        </div>
        <van-button class="footer-btn" type="primary" size="large">{{ $t('wallet.Copy') }}</van-button>
    </div>
</template>

<script setup>
import QrcodeVue from 'qrcode.vue'
import { useWalletStore } from "@/stores/modules/walletStore";
const walletStore = useWalletStore();
const qrtext = walletStore.account;
</script>

<style lang="less" scoped>
.container{
    display: flex;
    flex-direction: column;
    height: 86vh;
    padding: 17px 17px 33px;
    box-sizing: border-box;
    .content{
        flex: 1;
        background-color: #fff;
        border-radius: 12px;
        margin-bottom: 129px;
        padding: 37px 32px 33px;
        .title{
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 19px;
            color: #000000;
            margin-bottom: 17px;
            .logo{
                width: 62px;
                height: 62px;
                border-radius: 12px;
                margin-bottom: 10px;
                background: url('../../../assets/img/icon.png') no-repeat;
                background-size: 100% 100%;
            }
        }
        .qrcode{
            display: flex;
            flex-direction: column;
            align-items: center;
            .address{
                margin-top: 18px;
                background: #F2F2F2;
                border-radius: 8px;
                border: 1px solid #D8D8D8;
                padding: 18px 24px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                color: #000000;
                word-break: break-all;
            }
        }
        
    }
    .footer-btn{
        height: 40px !important;
        line-height: 40px !important;
        background: linear-gradient( 90deg, @theme-color1 0%, #40A4FB 100%) !important;
        border-radius:51px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 15px;
        padding: 9px 0;
        box-sizing: border-box;
        color: #fff;
    }
}
</style>