效果图

、

概述

用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 = false
  loginStore.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>