AI 助理
备案控制台
开发者社区 云计算 文章 正文

移动端个人中心UI设计

2023-08-08 162
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 移动端个人中心UI设计

 效果图

image.gif编辑

源码如下

页面设计

<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>

image.gif

逻辑编写

<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>

image.gif

样式设计

<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>

image.gif

全部代码

<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>

image.gif


关键词：
移动端UI
UI移动端
月木天上
目录
相关文章
虫无涯
|
22天前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路，而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者，旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择，再到具体模块的封装与实现，包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示，便于理解和实践。
虫无涯
64 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
AIGC小王子
|
5月前
|
编解码 Android开发 iOS开发
「UCD」移动端UI设计尺寸规范详解
【7月更文挑战第2天】
AIGC小王子
496 3
你挚爱的强哥
|
7月前
|
移动开发
【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）
【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）
你挚爱的强哥
92 0
【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）
你挚爱的强哥
|
7月前
【实用】一个移动端简单的UI弹窗组件，虽算不上高大上，但至少耐看
【实用】一个移动端简单的UI弹窗组件，虽算不上高大上，但至少耐看
你挚爱的强哥
38 1
秋叶原的琴音
|
7月前
|
前端开发
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
秋叶原的琴音
281 1
element-ui组件DatePicker日期选择器移动端兼容
风水道人
|
7月前
|
JSON 小程序 前端开发
小程序使用npm以及常用的移动端UI插件
小程序使用npm以及常用的移动端UI插件
风水道人
50 0
你挚爱的强哥
|
7月前
在温系统下制作马克系统引导安装镜像启动U盘安装马克OS
在温系统下制作马克系统引导安装镜像启动U盘安装马克OS
你挚爱的强哥
63 0
在温系统下制作马克系统引导安装镜像启动U盘安装马克OS
祈澈菇凉
|
JavaScript 前端开发 小程序
Vue移动端UI框架
Vue移动端UI框架
祈澈菇凉
201 0
祈澈菇凉
|
JavaScript
Vue移动端框架Mint UI教程-跳转新页面(四)
Vue移动端框架Mint UI教程-跳转新页面(四)
祈澈菇凉
131 0
祈澈菇凉
|
JSON JavaScript 前端开发
Vue移动端框架Mint UI教程-接口跨域问题（七）
Vue移动端框架Mint UI教程-接口跨域问题（七）
祈澈菇凉
70 0

热门文章

最新文章

  • 1
    Windows Phone 及 Metro UI 设计讨论
  • 2
    敏捷开发一千零一问系列之二十三： UI设计怎么做到敏捷呢？（兼谈对UI热的理解）（下）
  • 3
    Android UI开发第八篇——ViewFlipper 左右滑动效果
  • 4
    Android官方开发文档Training系列课程中文版：多样屏幕之实现自适应UI
  • 5
    iOS开发UI篇—IOS开发中Xcode的一些使用技巧
  • 6
    【笔记01】在 uniapp 安装 uview-ui
  • 7
    iOS开发UI篇—UIWindow简单介绍
  • 8
    swift UI专项训练33 Switch开关
  • 9
    自己动手写客户端UI库——创建第一个控件
  • 10
    swift UI专项训练29 Page Control页控件
  • 1
    如何启动flowable的Flowable UI画工作流程图
    125
  • 2
    Element-ui快速入门
    75
  • 3
    VUE里修改element-ui的显示层次与上下间隔
    128
  • 4
    UI开发第四篇——实现像handcent sms或者chomp sms那样的气泡
    42
  • 5
    Element-ui快速入门
    91
  • 6
    如何使用公网地址远程访问内网Nacos UI界面查看注册服务
    401
  • 7
    Android UI底层绘制原理
    56
  • 8
    【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
    191
  • 9
    【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
    228
  • 10
    【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
    160

    • 相关课程

    更多
  • 开放语聊技术与应用
  • 场景实践 - 搭建个性化推荐引擎系统
  • 移动Web前端开发
  • 软件供应商进阶管理实操
  • 软件用户使用服务及供应商进阶管理

    • 相关电子书

    更多
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码
  • Fusion Design - 企业级UI解决方案揭秘
  • 使用TensorFlow搭建智能开发系统自动生成App UI

    • 相关实验场景

    更多
  • 【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
  • 搭建微信小程序
  • 快速搭建移动端可视化看板
  • 前端开发基础2：VS Code和Edge的联动开发
  • 收银台的场景化界面实践
  • 制作开放场景
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月