samehome/pages/me/accountInfo.vue

<template>
    <view class="main">
        <!-- nav -->
        <navigation>{{ i18n.AccountInfo }}</navigation>
        <view class="body" @click="goto">
            <!-- 修改登录密码按钮 -->
            <u-button class="button" color="#211F32" throttleTime="500" id="ChangeLoginPassword">
                <view class="content">{{ i18n.ChangeLoginPassword }}</view>
            </u-button>
            <!-- 修改赎回密码按钮 -->
            <u-button class="button" color="#211F32" throttleTime="500" id="ChangeWithdrawalPassword">
                <view class="content">{{ i18n.ChangeWithdrawalPassword }}</view>
            </u-button>
            <!-- 银行卡按钮 -->
            <u-button class="button" color="#211F32" throttleTime="500" id="BankCard">
                <view class="content">{{ i18n.BankCard }}</view>
            </u-button>
            <!-- 赎回地址按钮 -->
            <u-button class="button" color="#211F32" throttleTime="500" id="WithdrawalAddress">
                <view class="content">{{ i18n.WithdrawalAddress }}</view>
            </u-button>
        </view>
    </view>
</template>

<script>
export default {
    name: "accountInfo",
    data() {
        return {
        };
    },
    computed: {
        i18n() {
            return this.$t("me");
        },
    },
    onLoad() {
    },
    onShow() { },
    methods: {
        goto(e) {
            // console.log(e.target.id);
            const id = e.target.id;
            let url = '';
            switch (id) {
                case 'ChangeLoginPassword':
                    url = '/pages/me/changeLoginPassword'
                    break;
                case 'ChangeWithdrawalPassword':
                    url = '/pages/me/changeWithdrawalPassword'
                    break;
                case 'BankCard':
                    break;
                case 'WithdrawalAddress':
                    break;
                default:
                    break;
            }
            if (url) {
                // console.log(url);
                uni.navigateTo({
                    url,
                });
            }

        }
    },
}
</script>

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

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


        .button {
            position: relative;
            height: 112rpx;
            margin-top: 32rpx;
            border-radius: 32rpx;

            .content {
                width: 440rpx;
                height: 112rpx;
                line-height: 112rpx;
                font-weight: 600;
                font-size: 28rpx;
                padding-left: 70rpx;
                text-align: left;

                &::before {
                    display: block;
                    position: absolute;
                    content: '';
                    background-image: url(../../static/me/img_accountinfo01.png);
                    background-repeat: no-repeat;
                    background-size: 80rpx;
                    width: 80rpx;
                    height: 80rpx;
                    top: 16rpx;
                    left: 24rpx;
                }

                &::after {
                    display: block;
                    position: absolute;
                    content: '';
                    background-image: url(../../static/me/ic_arrow_g.png);
                    background-repeat: no-repeat;
                    background-size: 32rpx;
                    width: 32rpx;
                    height: 32rpx;
                    top: 40rpx;
                    right: 24rpx;
                }


            }

            &:nth-child(2) .content::before {
                background-image: url(../../static/me/img_accountinfo02.png);
            }

            &:nth-child(3) .content::before {
                background-image: url(../../static/me/img_accountinfo03.png);
            }

            &:nth-child(4) .content::before {
                background-image: url(../../static/me/img_accountinfo04.png);
            }

        }



    }

}
</style>