效果圖

、

概述

用vue3和Vant4開發的個人中心界面

全部代碼?

<template><div class="center-container"><div class="center-info"><van-image class="center-headImg"radius="20px"width="120"height="120":src="loginStore.user.headImg"/><div class="center-text"><p>用戶名：{{ loginStore.user.username }}</p><p> 郵箱：{{ loginStore.user.email }}</p><p> 手機號：{{ loginStore.user.phone }}</p></div></div><!-- <div class="center-edit">--><!-- <el-button size="large" type="primary" round>修改個人信息</el-button>--><!-- </div>--><div class="center-detail"><van-collapse v-model="activeNames"><van-collapse-item title="我的訂單" name="1">我的訂單</van-collapse-item><van-collapse-item title="我的收藏" name="2">我的收藏</van-collapse-item><van-collapse-item title="我的評論" name="3">我的評論</van-collapse-item></van-collapse></div><div class="center-logout"><van-cell is-link title="設置" @click="show = true"/><van-action-sheet v-model:show="show"><div class="content"style="padding: 30px; background-image: linear-gradient(120deg, #00e4d0, #5983e8) !important;"><el-button plain style="margin-bottom: 30px;margin-left: -20px;width: 100%" size="large" type="primary" round@click="editInfoHandler()">修改信息</el-button><br><el-button plain style="margin-left: -20px;width: 100%" size="large" type="danger" round@click="logoutHandler()">退出登錄</el-button></div></van-action-sheet></div></div></template> <script setup> import {onMounted, ref} from "vue"; import {useRouter} from "vue-router" //router import {useLoginStore} from "@/stores/loginStore.js" //stores const loginStore = useLoginStore() const activeNames = ref(['0']); const show = ref(false); onMounted(() => {}) //獲取路由對象 const router = useRouter() /* 退出登錄*/ const logoutHandler = () => {loginStore.isLogin = falseloginStore.user = ""ElMessage.success("成功退出")router.push("/") } /*** 修改個人信息*/ const editInfoHandler = () => {router.push("/pages/editInfo") } </script> <style scoped> .center-container {background-image: linear-gradient(135deg, #EE9AE5 10%, #5961F9 100%) !important;width: 100%;height: 600px; }.center-info {display: flex; }.center-headImg {margin-top: 20px;margin-left: 20px;}.center-text {margin: 20px; }.center-text p {line-height: 40px;text-align: left;font-size: 16px;font-family: 楷體; }.center-edit {margin: 20px; } </style>

總結

以上是生活随笔為你收集整理的app个人中心界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。