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.
162 lines
3.5 KiB
162 lines
3.5 KiB
<!--
|
|
* @Author
|
|
components: { UiCell },: ch
|
|
* @Date: 2019-08-22 19:41:20
|
|
* @LastEditors: ch
|
|
* @LastEditTime: 2022-03-28 17:12:48
|
|
* @Description: file content
|
|
-->
|
|
<template>
|
|
<view>
|
|
<view class="header">
|
|
<u-badge class="header--badge" max="99" :value="9"></u-badge>
|
|
<image class="header--msg" src="@/static/account/xx.png" />
|
|
</view>
|
|
<UiCell title="昵称" label="第一个青春是上帝给的..." class="header--cell">
|
|
<image slot="icon" class="head-img" src="@/static/account/tx.png" shape="circle" />
|
|
</UiCell>
|
|
<view class="order">
|
|
<view class="order--title">
|
|
<text>我的订单</text>
|
|
<text class="order--title-more">查看更多</text>
|
|
</view>
|
|
<view class="order-tabs">
|
|
<view class="order-tabs--item">
|
|
<u-badge class="item-badge" max="99" :value="9"></u-badge>
|
|
<image class="item-icon" src="@/static/account/fk.png"/>
|
|
<view>待付款</view>
|
|
</view>
|
|
<view class="order-tabs--item">
|
|
<u-badge class="item-badge" max="99" :value="9"></u-badge>
|
|
<image class="item-icon" src="@/static/account/fh.png"/>
|
|
<view>待发货</view>
|
|
</view>
|
|
<view class="order-tabs--item">
|
|
<u-badge class="item-badge" max="99" :value="9"></u-badge>
|
|
<image class="item-icon" src="@/static/account/sh.png"/>
|
|
<view>待收货</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cell">
|
|
<UiCell title="退货/售后">
|
|
<image slot="icon" class="cell--icon" src="@/static/account/tk.png" />
|
|
</UiCell>
|
|
<UiCell title="收货地址">
|
|
<image slot="icon" class="cell--icon" src="@/static/common/dz.png" />
|
|
</UiCell>
|
|
<UiCell title="联系客服">
|
|
<image slot="icon" class="cell--icon" src="@/static/account/kf.png" />
|
|
</UiCell>
|
|
<UiCell title="设置" class="cell--last" @click="$Router.push('/pages/account/setting/index')">
|
|
<image slot="icon" class="cell--icon" src="@/static/account/sz.png" />
|
|
</UiCell>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import UiCell from '../../components/UiCell.vue';
|
|
export default {
|
|
components : { UiCell },
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page{
|
|
background: url('@/static/account/bg.png') no-repeat top left #F8F8F8;
|
|
background-size: 100%;
|
|
}
|
|
.header{
|
|
height: 88rpx;
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
padding: 0 40rpx;
|
|
position: relative;
|
|
&--msg{
|
|
width: 34rpx;
|
|
height: 40rpx
|
|
}
|
|
&--badge{
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 10rpx;
|
|
z-index: 99;
|
|
}
|
|
&--cell{
|
|
border: 0;
|
|
padding: 0 40rpx;
|
|
background: none;
|
|
}
|
|
}
|
|
.head-img{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
margin-right: 30rpx;
|
|
}
|
|
.order{
|
|
width: 630rpx;
|
|
height: 200rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
margin: 40rpx auto;
|
|
padding: 30rpx;
|
|
box-shadow: 0 0 13rpx 1px rgba(0, 0, 0, .05);
|
|
&--title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: url('@/static/common/arrow.png') no-repeat center right;
|
|
background-size: 10rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin: 10rpx 0 46rpx;
|
|
}
|
|
&--title-more{
|
|
padding-right: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
&-tabs{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
&--item{
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
position: relative;
|
|
.item-icon{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
.item-badge{
|
|
position: absolute;
|
|
top: -10rpx;
|
|
right: 0;
|
|
z-index: 99;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cell{
|
|
margin: 30rpx;
|
|
border-radius: 16rpx;
|
|
background: #fff;
|
|
padding: 0 40rpx;
|
|
&--icon{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 0 10rpx;
|
|
}
|
|
&--last{
|
|
border: 0;
|
|
}
|
|
}
|
|
</style>
|