You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.3 KiB
111 lines
2.3 KiB
<template>
|
|
<div class="my_warp app_content">
|
|
|
|
<!-- 导航栏 -->
|
|
<div class="header_body">
|
|
<header-nav :leftArrow="false" titelText="我的"></header-nav>
|
|
</div>
|
|
|
|
<!-- 中间 -->
|
|
<div class="warp_body">
|
|
<div class="user-info-box">
|
|
<van-icon name="setting-o" class="mgt-icon" @click="setting" />
|
|
|
|
<van-row gutter="20">
|
|
<van-col span="4">
|
|
<van-image
|
|
round
|
|
width="60"
|
|
height="60"
|
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
|
/>
|
|
</van-col>
|
|
<van-col span="20">
|
|
<div class="right-box">
|
|
<div class="name-text">昵称</div>
|
|
<div class="sign-text">签名</div>
|
|
</div>
|
|
</van-col>
|
|
</van-row>
|
|
</div>
|
|
|
|
<div style="margin: 0.27rem">
|
|
<van-grid square>
|
|
<van-grid-item
|
|
v-for="(item, index) in data?.orderTab"
|
|
:icon="item.icon"
|
|
:text="item.text"
|
|
:key="index"
|
|
>
|
|
</van-grid-item>
|
|
</van-grid>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部 -->
|
|
<div class="footer_body">
|
|
<footer-nav></footer-nav>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="My">
|
|
|
|
const router = useRouter();
|
|
const data = reactive({
|
|
orderTab: [
|
|
{
|
|
icon: "send-gift-o",
|
|
text: "待付款",
|
|
},
|
|
{
|
|
icon: "send-gift-o",
|
|
text: "待发货",
|
|
},
|
|
{
|
|
icon: "todo-list-o",
|
|
text: "待收货",
|
|
},
|
|
{
|
|
icon: "point-gift-o",
|
|
text: "待评价",
|
|
},
|
|
],
|
|
}); // tab
|
|
const setting = () => {
|
|
router.push({ name: "setting" });
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.app_content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: #ebf3fb;
|
|
.user-info-box {
|
|
position: relative;
|
|
margin: 0.27rem;
|
|
padding: 0.27rem 0.54rem 0.27rem 0.27rem;
|
|
background: #fff;
|
|
border-radius: 0.14rem;
|
|
font-size: 0.37rem;
|
|
color: #aaa;
|
|
.right-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
.name-text {
|
|
margin: auto auto auto 0.27rem;
|
|
}
|
|
.sign-text {
|
|
margin: auto auto auto 0.27rem;
|
|
}
|
|
}
|
|
.mgt-icon {
|
|
position: absolute;
|
|
right: 0.27rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|