移动端个人中心UI设计

效果图

源码如下

页面设计

<template><div class="container"><!--  顶部用户信息 start--><div class="header"><div class="user-info"><van-image class="user-img" round width="70" :src="userInfo.userImg"></van-image><div class="user-desc"><span class="user-nickname">{{ userInfo.nickname }}</span><span class="user-username">账号名：{{ userInfo.username }}</span></div><van-icon @click="onSet" class="user-set" size="large" name="setting-o"/></div></div><!--  顶部用户信息 end--><!--  我的订单 start--><div class="order"><span>我的订单</span><van-button class="order-button" @click="onOrdersList" color="#ff5402" round size="mini">全部</van-button><van-grid class="order-grid" :border="false" column-num="5"><van-grid-item v-for="(item,index) in orderGrids" :key="index" :icon="item.icon" :text="item.text":to="item.to"></van-grid-item></van-grid></div><!--  我的订单 end--></div>
</template>

逻辑编写

<script setup>
import {onMounted, reactive, ref} from "vue";
import axios from "../../utils/request";
import {useDataStore} from "../../stores/dataStore"
import {useRouter} from 'vue-router'const router = useRouter()
const dataStore = useDataStore()
//用户信息
const userInfo = ref(0)
//订单宫格数据
const orderGrids = reactive([{icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAUBJREFUWEftlrFOwzAQhn/nNQpSBxpnp40Y6dgHADEhXoEBMSM24CGYYeEN6FqnEixIPQcJBsQzMOWQF0ijGBnFrpdkdE7nT3/+P3cCkR8R+X70AGsKSDm5BosjAFueP807gIK0Omz2/QGQaX4H4MDzxevtBN8QFWf1wzrAG4ChqKrp6nU59wmS7Yz3OUkeAXyQVts2ADYvSKsgxpRp3tq/rkAPEFoBY/Iv0uo4igdspu7sgTQdzwQnlxDYdUkOAy8A7rVWF6a+M4Ac5UvXy38BxSfpxcAPgCVeNjWaceyuQA0gy/aGXFVPgvl0VRa3bRCbAHhm4ERr9bBxABcT+lcgtgmjx9BF9r9qOqfAFUCOJmYcg8piGuVX3I9jFwWir2Thl1LGFZXqvNWE5jDUWt4cwVYA10j5rAuyAf8HsAf4BiiG6yFeCtnSAAAAAElFTkSuQmCC",text: '待付款',to: '',},{icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAXlJREFUWEftl7FOwzAQhv8LCxMDUgeW2mrME8BOGRh4ACYW4B1gbTtXYgQ2FiTEyNatzAgW5iZcgIGFJ6jiqwJtlbSp1Iq0BckZL/nvPv2x72zCkh9acn04gDEHjDEldLsHVqhU5O8hD1EMtJj5M503A+BrfQTBJYDVIouncjFBmp0ouhjEsgBKvwLQIBwTwHkQIqgBqBJhN/3eWuwQoT4aH35jqWRJrgh4CSIeaocARuuqCNoiqIdv3JjkgK90OwEIIs7AV8q6NgDoMD/k6fO0DsA5MObAtNtv0iKcRp/W/j0Atw3/lQO+Uk2AtiG4FWBjoZ0wZ7U/A9hKZsFCWvE3gOAOHlr4GVA6Cc0doD90qmK90/A9fBo44Zf1GQj7RGjM1YFpGs0sk3TmWeAA5uZAkrii9BcB64hXNoOPoPObYqPa/onrHpDHIIr2cs+EFaUOCXRTZOHRXEI4CZmvcwGSoDFmzXbjc4L4hYIIOPbQYObMYdfdjJwDPevfljCpyp4mAAAAAElFTkSuQmCC",text: '待发货',to: '',},{icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA0ZJREFUWEftl0toFFkUhv9TZTQaBRe6UCP0kHrZMvERu6KI2IEZRdHFDLjRnYh7HVBEwbhTQXDlTlyJoKCigsoIiQxjTLWitE7oqi5nBOMDBBFGJ9FY9UslqbbSdh6GtEHGuyroc8/57n//e+5twSQPmeT6+LYBDM0+CIEp4LxRlRR0IZR213fOJWPHrYCpZ9oAsQE6oxYfDCBkrgB1btH5IZ4zLoBo5SKyM2Cwyffv3BsrgKY1p1XhJRFcKnjO7mje+AB0+yGIc57vHBpr8TjOMOxfhDhPUes9r+PpsACW1rwuVNAkDNd9XkSaheHGgn+n/UsBonhTtykMW6L5FQEMzd4tgmMA7pO4WF5EBK1xggkHsHR7K4HTJFqHkzi5ggkFSKWWzp5WM/UPCLpdz9kQJY+Mo4BbkjBVAzB1+wiAPUJmC37uZgQw4Hi0ukWntF1VAbC0zFqKRKY66hadvSXXfi0A07Cvgqh/1/d+zePH919/VQBLW5GlKG0CbIOq3GIQnBpqLslWdQtigLhIf49PDAG6kj18wj1QDjDa0foO8P9QoLGxsa63t/bnyA+1tb2/5/P5t7E3qq6AZWR+I+XAYMHZAF6T3O/5uRPlt1klwxpGk6VA/SmktIDMK8Dtgu9cj2Ita2WKQfiPBEFj4e+7D/rba/IUxN+g7II65aTr/vnvQDvmvoAfFvr+vZcjKZBKZWun1vwX9ZSVBP4SoCESUYCthaJzxtCbTwm4zC06S0sPklJRsB2U+RA+c4u5lnh1ixY1zQs/qM8Q/d4/JPvpu+KhXRxQyfp+Z5dprp4F9p0EsQXAKwAzSByOL7d+BdLp9Mygr+7yQCrFgPCq6zk7kqlNPeMDeDJsjxAhiDcANpPc5/m5w3GspdmrKLgFyHa32Dmky372IKl0+1mavZ6Ca7GMIzUqQ7dfgDxeEUCRJa7bmS/rskPT1devmj5zetBGYAEEHQhRA0FWAPdNj9rS3d3RMxKAadhnQWYrbMHytz3qj+XzKz7JGhoyC1WRPSLYFBUjcSUgjz56lBt+CxJUpm6/BDAnaUIKfvU850I5/LhexaPdFYNHNfJAmuBzodwo/0MS56gawFggS8dwrMHViJt0BT4CVJJBP1LneyoAAAAASUVORK5CYII=",text: '待收货',to: '',},{icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAAAXNSR0IArs4c6QAAAgBJREFUWEft1z/oTWEYwPHPb1IyyKCwiLKYUP5lYDDKvxhkIFKklAklLCgJw08pIQaD/EmiSAwySLIwGaSIFEoGZdBT773eezpX59x7bv2G8yyn+97nz/c873ue93nGTBAZmyAcykBmYzfmYWrDoB/xAefwJfddBFmHMwiYUct8vO0EyUEW4wGm4TUe417DNMuwBvF8g0X4HTFykNPYj59YmtM2DLMAzzAZm3GjCHITG3AdWxoOXnT3EKvTi8dR6MnIE6zEURwbMciRFKcbK9+aFqTdGgx8RqK2fOtzgFdhOh79Ryc+gqeZfW2QKPHfk4PtuFKAWY9bae0FlpTAvkyFK2zDR0htkG24nIwj4MZCoH04m9Z+YUrh/7l4l9Y+YdagILElUei+4nYqdnmsuC/uYg7GsbckIxewq1Cfamekal2b1LkzKhqMDKRi/K5aC1LMWJuRWhk5n3rV6JxW4EfdE1hRfwaep3a0WyTzNmAHLiZnUQWjfjTdKkap34Q96XNfjlfF2zd+38Haim92CofwJ9PfmZqqmRV8nMTBjl7ZOBGjRGxTFbmPw+mtTuBAFSP0QJRlpOMnLrsYKfrNNQtxHFFR36dmeGsyvoRrfYA+I2abaNB7ZJhJLw50ZCGeHRm43x0GJIJHRiIzkaGr2U1dcYf+qQ0LUjtgP4MWpJiZvzstiSEwFPllAAAAAElFTkSuQmCC",text: '待评价',to: '',},{icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA7ZJREFUWEftlkuIFFcUhv9T1fa4CUggRiGPkam61TMLncHp6oyb6MYwkBAScEIIIYkJakKCIUGZnY9F0BCIIVmIEIJuAoZECILgwsciOl3to8lipup2NbSIKBokZBGctuueUMO09KNeEjNuUsuqc8//1X/OufcSHvNDj1kf/wNkdmDNmtLTy3NYy8A6RZggcAkAgzHDRFeAoJrL0dXZ2cqthylrJgDLtA+CaJKBy0Q8B/Dvuo5qKBQEGIWitSAIAEUwTnk1ZzorRCKAYYyP6Zr2I4NOKoX9vl/+Kynx4ODoiuX5/DcABu8H+vv1+kU/DSQWQAh7DwF7SdFLrl8+nZao87sQ9msE/MLAXimdfUlrIwGGhzc8r4JWw5NOphLFCVjC5lagm0lORApYln0Oik94tUpo54OnYIxvbEG/7fvl2c73hlEaySFY6fqXzvU6oQGfutJ5MQ6yD8Ay7d0gjHvSmepdFJYFwBalaKoNEYprGh8H8FOU3QVhH2XGzbjG7AIYHl6/WgX6qVaQ21yvX7gdRS1EcZpAHweKNoffdY1PE6v9bu3Skaj4sDEH8vnzpGmvuu5MozemC6Bg2i8r4lekrGzvDbSs0iZADTAzadBWMvBdGMOgj4DgDyJiQJv3vPLZ9lrLLJ7Vl+HN4D6mmeiqlM5RIYpvAFRou9UFEFqsMe66NefbPgBhHwfzU4nTQHSns3SWVdoK5q9B+ADgyXx+4PPmfPNuoGjC98szYa4uAMuyfwVwyPOcM2ljt9gPSBszy7R3gLB7wSzgCQZ2hU6083cDiNKNVqCPxdW/p8PDhkwFCGMs094FwhYCVV1Z3taZZ0kAQkEhSj9IWX4vsQnjSlAwi+8y8E5fWYg653vhZxh8JKqJC4UXBlOnIKkJY/aETCXIvBUnjeGSALQ3ovlmc2OjUf0ziTzrFIQ5wh9za87JqHxRW/EBIqx2pdNf844MWQEsq/ghFKa8WmVTJoAFYmGfV8AhKZ0TcS5kARDCXkdAtRXwc/V65XpmgKGhCSOnB7V/cxwbhjGgaU9eJsYxr+Z8GfcjqRcSBl5PciIqsWGsH9JJP0OEn13pfJZ5CnoDQyeW6cH3ABr3ms2daY252HCfMOErAva50vkibUvPdOOxTPsACJMMutJ5KW02tb8BPJPL8bOs8BaAt8G4yITDUjrH0sT7DqOkBSMjxVWtFo8B+iiA8cVr+QoAdwBcJ9BvpOuH5+YuXMsiHHkYPczCRxWbqQSPSizzGP6Xgomn4VIKt7X+AXf2mjBrhk0cAAAAAElFTkSuQmCC",text: '售后',to: '',},
])
onMounted(() => {axios.get("front/user/findById", {params: {userId: dataStore.userId}}).then(res => {if (res.data.code == 200) {userInfo.value = res.data.data}})
})
/*** 用户设置按钮*/
const onSet = () => {router.push("/user/setting")
}
/*** 用户全部订单*/
const onOrdersList = () => {router.push("/user/orders")
}
</script>

样式设计

<style scoped>
.header {background-image: linear-gradient(135deg, #fdf0e7 10%, #fce3ba 100%) !important;;height: 110px;border-radius: 0 0 15px 15px;
}/**
个人信息模块*/
.user-info {display: flex;
}.user-img {margin: 10px;
}.user-nickname {display: block;font-weight: bolder;font-size: 18px;margin-top: 20px;margin-left: 10px;color: #170f07;
}.user-username {display: block;margin-left: 10px;margin-top: 5px;color: #70635a;
}.user-set {margin-left: 160px;margin-top: 20px;
}/**
订单模块*/
.order {border-radius: 15px;margin: 6px;background-color: #ffffff;padding: 10px;
}.order span {font-size: 16px;font-weight: bolder;color: #170f07;
}.order-button {float: right;
}
</style>

全部代码

<template><div class="container"><!--  顶部用户信息 start--><div class="header"><div class="user-info"><van-image class="user-img" round width="70" :src="userInfo.userImg"></van-image><div class="user-desc"><span class="user-nickname">{{ userInfo.nickname }}</span><span class="user-username">账号名：{{ userInfo.username }}</span></div><van-icon @click="onSet" class="user-set" size="large" name="setting-o"/></div></div><!--  顶部用户信息 end--><!--  我的订单 start--><div class="order"><span>我的订单</span><van-button class="order-button" @click="onOrdersList" color="#ff5402" round size="mini">全部</van-button><van-grid class="order-grid" :border="false" column-num="5"><van-grid-item v-for="(item,index) in orderGrids" :key="index" :icon="item.icon" :text="item.text":to="item.to"></van-grid-item></van-grid></div><!--  我的订单 end--></div>
</template><script setup>
import {onMounted, reactive, ref} from "vue";
import axios from "../../utils/request";
import {useDataStore} from "../../stores/dataStore"
import {useRouter} from 'vue-router'const router = useRouter()
const dataStore = useDataStore()
//用户信息
const userInfo = ref(0)
//订单宫格数据
const orderGrids = reactive([{icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAUBJREFUWEftlrFOwzAQhn/nNQpSBxpnp40Y6dgHADEhXoEBMSM24CGYYeEN6FqnEixIPQcJBsQzMOWQF0ijGBnFrpdkdE7nT3/+P3cCkR8R+X70AGsKSDm5BosjAFueP807gIK0Omz2/QGQaX4H4MDzxevtBN8QFWf1wzrAG4ChqKrp6nU59wmS7Yz3OUkeAXyQVts2ADYvSKsgxpRp3tq/rkAPEFoBY/Iv0uo4igdspu7sgTQdzwQnlxDYdUkOAy8A7rVWF6a+M4Ac5UvXy38BxSfpxcAPgCVeNjWaceyuQA0gy/aGXFVPgvl0VRa3bRCbAHhm4ERr9bBxABcT+lcgtgmjx9BF9r9qOqfAFUCOJmYcg8piGuVX3I9jFwWir2Thl1LGFZXqvNWE5jDUWt4cwVYA10j5rAuyAf8HsAf4BiiG6yFeCtnSAAAAAElFTkSuQmCC",text: '待付款',to: '',},{icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAXlJREFUWEftl7FOwzAQhv8LCxMDUgeW2mrME8BOGRh4ACYW4B1gbTtXYgQ2FiTEyNatzAgW5iZcgIGFJ6jiqwJtlbSp1Iq0BckZL/nvPv2x72zCkh9acn04gDEHjDEldLsHVqhU5O8hD1EMtJj5M503A+BrfQTBJYDVIouncjFBmp0ouhjEsgBKvwLQIBwTwHkQIqgBqBJhN/3eWuwQoT4aH35jqWRJrgh4CSIeaocARuuqCNoiqIdv3JjkgK90OwEIIs7AV8q6NgDoMD/k6fO0DsA5MObAtNtv0iKcRp/W/j0Atw3/lQO+Uk2AtiG4FWBjoZ0wZ7U/A9hKZsFCWvE3gOAOHlr4GVA6Cc0doD90qmK90/A9fBo44Zf1GQj7RGjM1YFpGs0sk3TmWeAA5uZAkrii9BcB64hXNoOPoPObYqPa/onrHpDHIIr2cs+EFaUOCXRTZOHRXEI4CZmvcwGSoDFmzXbjc4L4hYIIOPbQYObMYdfdjJwDPevfljCpyp4mAAAAAElFTkSuQmCC",text: '待发货',to: '',},{icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA0ZJREFUWEftl0toFFkUhv9TZTQaBRe6UCP0kHrZMvERu6KI2IEZRdHFDLjRnYh7HVBEwbhTQXDlTlyJoKCigsoIiQxjTLWitE7oqi5nBOMDBBFGJ9FY9UslqbbSdh6GtEHGuyroc8/57n//e+5twSQPmeT6+LYBDM0+CIEp4LxRlRR0IZR213fOJWPHrYCpZ9oAsQE6oxYfDCBkrgB1btH5IZ4zLoBo5SKyM2Cwyffv3BsrgKY1p1XhJRFcKnjO7mje+AB0+yGIc57vHBpr8TjOMOxfhDhPUes9r+PpsACW1rwuVNAkDNd9XkSaheHGgn+n/UsBonhTtykMW6L5FQEMzd4tgmMA7pO4WF5EBK1xggkHsHR7K4HTJFqHkzi5ggkFSKWWzp5WM/UPCLpdz9kQJY+Mo4BbkjBVAzB1+wiAPUJmC37uZgQw4Hi0ukWntF1VAbC0zFqKRKY66hadvSXXfi0A07Cvgqh/1/d+zePH919/VQBLW5GlKG0CbIOq3GIQnBpqLslWdQtigLhIf49PDAG6kj18wj1QDjDa0foO8P9QoLGxsa63t/bnyA+1tb2/5/P5t7E3qq6AZWR+I+XAYMHZAF6T3O/5uRPlt1klwxpGk6VA/SmktIDMK8Dtgu9cj2Ita2WKQfiPBEFj4e+7D/rba/IUxN+g7II65aTr/vnvQDvmvoAfFvr+vZcjKZBKZWun1vwX9ZSVBP4SoCESUYCthaJzxtCbTwm4zC06S0sPklJRsB2U+RA+c4u5lnh1ixY1zQs/qM8Q/d4/JPvpu+KhXRxQyfp+Z5dprp4F9p0EsQXAKwAzSByOL7d+BdLp9Mygr+7yQCrFgPCq6zk7kqlNPeMDeDJsjxAhiDcANpPc5/m5w3GspdmrKLgFyHa32Dmky372IKl0+1mavZ6Ca7GMIzUqQ7dfgDxeEUCRJa7bmS/rskPT1devmj5zetBGYAEEHQhRA0FWAPdNj9rS3d3RMxKAadhnQWYrbMHytz3qj+XzKz7JGhoyC1WRPSLYFBUjcSUgjz56lBt+CxJUpm6/BDAnaUIKfvU850I5/LhexaPdFYNHNfJAmuBzodwo/0MS56gawFggS8dwrMHViJt0BT4CVJJBP1LneyoAAAAASUVORK5CYII=",text: '待收货',to: '',},{icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAAAXNSR0IArs4c6QAAAgBJREFUWEft1z/oTWEYwPHPb1IyyKCwiLKYUP5lYDDKvxhkIFKklAklLCgJw08pIQaD/EmiSAwySLIwGaSIFEoGZdBT773eezpX59x7bv2G8yyn+97nz/c873ue93nGTBAZmyAcykBmYzfmYWrDoB/xAefwJfddBFmHMwiYUct8vO0EyUEW4wGm4TUe417DNMuwBvF8g0X4HTFykNPYj59YmtM2DLMAzzAZm3GjCHITG3AdWxoOXnT3EKvTi8dR6MnIE6zEURwbMciRFKcbK9+aFqTdGgx8RqK2fOtzgFdhOh79Ryc+gqeZfW2QKPHfk4PtuFKAWY9bae0FlpTAvkyFK2zDR0htkG24nIwj4MZCoH04m9Z+YUrh/7l4l9Y+YdagILElUei+4nYqdnmsuC/uYg7GsbckIxewq1Cfamekal2b1LkzKhqMDKRi/K5aC1LMWJuRWhk5n3rV6JxW4EfdE1hRfwaep3a0WyTzNmAHLiZnUQWjfjTdKkap34Q96XNfjlfF2zd+38Haim92CofwJ9PfmZqqmRV8nMTBjl7ZOBGjRGxTFbmPw+mtTuBAFSP0QJRlpOMnLrsYKfrNNQtxHFFR36dmeGsyvoRrfYA+I2abaNB7ZJhJLw50ZCGeHRm43x0GJIJHRiIzkaGr2U1dcYf+qQ0LUjtgP4MWpJiZvzstiSEwFPllAAAAAElFTkSuQmCC",text: '待评价',to: '',},{icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA7ZJREFUWEftlkuIFFcUhv9T1fa4CUggRiGPkam61TMLncHp6oyb6MYwkBAScEIIIYkJakKCIUGZnY9F0BCIIVmIEIJuAoZECILgwsciOl3to8lipup2NbSIKBokZBGctuueUMO09KNeEjNuUsuqc8//1X/OufcSHvNDj1kf/wNkdmDNmtLTy3NYy8A6RZggcAkAgzHDRFeAoJrL0dXZ2cqthylrJgDLtA+CaJKBy0Q8B/Dvuo5qKBQEGIWitSAIAEUwTnk1ZzorRCKAYYyP6Zr2I4NOKoX9vl/+Kynx4ODoiuX5/DcABu8H+vv1+kU/DSQWQAh7DwF7SdFLrl8+nZao87sQ9msE/MLAXimdfUlrIwGGhzc8r4JWw5NOphLFCVjC5lagm0lORApYln0Oik94tUpo54OnYIxvbEG/7fvl2c73hlEaySFY6fqXzvU6oQGfutJ5MQ6yD8Ay7d0gjHvSmepdFJYFwBalaKoNEYprGh8H8FOU3QVhH2XGzbjG7AIYHl6/WgX6qVaQ21yvX7gdRS1EcZpAHweKNoffdY1PE6v9bu3Skaj4sDEH8vnzpGmvuu5MozemC6Bg2i8r4lekrGzvDbSs0iZADTAzadBWMvBdGMOgj4DgDyJiQJv3vPLZ9lrLLJ7Vl+HN4D6mmeiqlM5RIYpvAFRou9UFEFqsMe66NefbPgBhHwfzU4nTQHSns3SWVdoK5q9B+ADgyXx+4PPmfPNuoGjC98szYa4uAMuyfwVwyPOcM2ljt9gPSBszy7R3gLB7wSzgCQZ2hU6083cDiNKNVqCPxdW/p8PDhkwFCGMs094FwhYCVV1Z3taZZ0kAQkEhSj9IWX4vsQnjSlAwi+8y8E5fWYg653vhZxh8JKqJC4UXBlOnIKkJY/aETCXIvBUnjeGSALQ3ovlmc2OjUf0ziTzrFIQ5wh9za87JqHxRW/EBIqx2pdNf844MWQEsq/ghFKa8WmVTJoAFYmGfV8AhKZ0TcS5kARDCXkdAtRXwc/V65XpmgKGhCSOnB7V/cxwbhjGgaU9eJsYxr+Z8GfcjqRcSBl5PciIqsWGsH9JJP0OEn13pfJZ5CnoDQyeW6cH3ABr3ms2daY252HCfMOErAva50vkibUvPdOOxTPsACJMMutJ5KW02tb8BPJPL8bOs8BaAt8G4yITDUjrH0sT7DqOkBSMjxVWtFo8B+iiA8cVr+QoAdwBcJ9BvpOuH5+YuXMsiHHkYPczCRxWbqQSPSizzGP6Xgomn4VIKt7X+AXf2mjBrhk0cAAAAAElFTkSuQmCC",text: '售后',to: '',},
])
onMounted(() => {axios.get("front/user/findById", {params: {userId: dataStore.userId}}).then(res => {if (res.data.code == 200) {userInfo.value = res.data.data}})
})
/*** 用户设置按钮*/
const onSet = () => {router.push("/user/setting")
}
/*** 用户全部订单*/
const onOrdersList = () => {router.push("/user/orders")
}
</script><style scoped>
.header {background-image: linear-gradient(135deg, #fdf0e7 10%, #fce3ba 100%) !important;;height: 110px;border-radius: 0 0 15px 15px;
}/**
个人信息模块*/
.user-info {display: flex;
}.user-img {margin: 10px;
}.user-nickname {display: block;font-weight: bolder;font-size: 18px;margin-top: 20px;margin-left: 10px;color: #170f07;
}.user-username {display: block;margin-left: 10px;margin-top: 5px;color: #70635a;
}.user-set {margin-left: 160px;margin-top: 20px;
}/**
订单模块*/
.order {border-radius: 15px;margin: 6px;background-color: #ffffff;padding: 10px;
}.order span {font-size: 16px;font-weight: bolder;color: #170f07;
}.order-button {float: right;
}
</style>