wang_zhuang_daping/src.mobile/views/mobile-page/mobile-main.vue

<template>
    <div style="height: 100vh; width: 100vw">
        <van-nav-bar title="我的" @click-left="toHome">
            <template #left>
                <van-icon name="arrow-left" />
            </template>
        </van-nav-bar>
        <div class="bg02"></div>
        <van-row style="margin-top: 20%">
            <van-col :span="18" :offset="3" style="border-radius: 10px; overflow: hidden">
                <van-cell title="我的信息" @click="toMyInfo" is-link></van-cell>
                <van-cell title="当前版本号" value="V1.0"></van-cell>
                <van-cell title="密码修改" @click="toChangePsw" is-link></van-cell>
                <van-cell title="退出系统" @click="logout" is-link></van-cell>
                <div style="height: 80px; width: 100%; background-color: white"></div>
            </van-col>
        </van-row>
    </div>
</template>
<script>
import { Toast } from 'vant'

export default {
    data() {
        return {}
    },
    methods: {
        toHome() {
            this.$router.push('/mobile-home')
        },
        toMyInfo() {
            this.$router.push('/mobile-myInfor')
        },
        toChangePsw() {
            this.$router.push('/mobile-changePsw')
        },
        logout() {
            this.$store.dispatch('user/cleanCache').then(res => {
                Toast('退出成功')
                this.$router.push('/mobile-login')
            })
        }
    }
}
</script>
<style scoped>
.bg02 {
    background: url(../../assets/mobile-Page-Image/bg01.png) no-repeat;
    width: 100vw;
    height: 100vh;
    background-size: 100%;
    position: absolute;
}

::v-deep .van-cell {
    height: 60px;
    line-height: 60px;
}
::v-deep .van-cell__title {
    height: 60px;
    line-height: 60px;
}
::v-deep .van-cell__right-icon {
    height: 60px;
    line-height: 60px;
}
</style>