wallet_app/src/views/me/addAddress/index.vue

<template>
    <div class="container">
        <div class="content">
            <div class="card-box">
                <div class="card-title">选择网络</div>
                <div class="card-input" style="justify-content: space-between;">
                    <div class="card-input-lf">
                        <svg-icon style="width: 30px; height: 30px;" name="acc" />
                        <div class="card-text">STT</div>
                    </div>
                    <svg-icon style="width: 16px; height: 16px;" name="right1" />
                </div>
            </div>
            <div class="card-box">
                <div class="card-title">地址名称</div>
                <div class="card-input">
                    <van-field v-model="addressName" placeholder="请输入地址名称" />
                </div>
            </div>
            <div class="card-box">
                <div class="card-title">输入地址</div>
                <div class="card-input" style="height:100%">
                    <van-field 
                        type="textarea"
                        v-model="walletAddress"
                        placeholder="请输入收货地址"
                        rows="1"
                        :autosize="true"
                    >
                        <template #right-icon>
                            <svg-icon style="width: 16px; height: 16px;" name="sm" />
                        </template>
                    </van-field>
                </div>
            </div>
        </div>
        <van-button class="footer-btn" type="primary" size="large">确认</van-button>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter();
const addressName = ref('')
const walletAddress = ref('')
</script>

<style lang="less" scoped>
.container{
    display: flex;
    flex-direction: column;
    height: calc(100vh - 44px);
    padding: 17px 17px 33px;
    box-sizing: border-box;
    .content{
        flex: 1;
        .card-box{
            margin-bottom: 25px;
            .card-title{
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 12px;
                color: #8D8D8D;
                margin-bottom: 6px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .card-input{
                background: #F2F2F2;
                border-radius: 8px;
                border: 1px solid #D8D8D8;
                display: flex;
                align-items: center;
                padding: 18px 17px;
                height: 56px;
                box-sizing: border-box;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                color: #000000;
                .card-input-lf{
                    display: flex;
                    align-items: center;
                    .card-text{
                        margin-left: 8px;
                        font-weight: 500;
                    }
                }
                :deep(.van-cell) {
                    background:#F2F2F2 !important;
                    padding: 0 !important;
                }
                :deep(.van-field__control) {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 15px;
                    color: #000000;
                }
            }
        }
    }
    .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;
    }
}
:deep(.van-button--primary){
    border: none !important;
}
</style>