6.1
This commit is contained in:
@@ -3,15 +3,116 @@
|
||||
<view class="mine-top">
|
||||
<view class="top">
|
||||
<!-- <img src="" alt="" /> -->
|
||||
<view></view>
|
||||
<view></view>
|
||||
<view class="avatar"></view>
|
||||
<view class="user-info">
|
||||
<view class="info-left">
|
||||
<view class="user-nickname">小同学</view>
|
||||
<view class="user-medal">
|
||||
<img src="../static/mine/13.png" />
|
||||
<view class="rank-title">勋章</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-right">
|
||||
<view class="info-phone">123***5694</view>
|
||||
<view class="user-rank">等级:34级</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="member-service">会员服务</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view>
|
||||
<view>99</view>
|
||||
<view>商品收藏</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>9</view>
|
||||
<view>店铺收藏</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>9</view>
|
||||
<view>图文收藏</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>9</view>
|
||||
<view>积分数</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>9</view>
|
||||
<view>关注</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom"></view>
|
||||
</view>
|
||||
<view class="mine-container">
|
||||
<view class="order"></view>
|
||||
<view class="tool"></view>
|
||||
<view class="more-tool"></view>
|
||||
<view class="order">
|
||||
<view class="title">
|
||||
<view class="title-text">我的订单</view>
|
||||
<view class="more">查看全部订单 ></view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<img src="../static/mine/6.png" />
|
||||
<view>待支付</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../static/mine/14.png" />
|
||||
<view>已取消</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../static/mine/2.png" />
|
||||
<view>待收货</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../static/mine/1.png" />
|
||||
<view>试穿试送</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../static/mine/3.png" />
|
||||
<view>待评价</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../static/mine/9.png" />
|
||||
<view>售后</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tool">
|
||||
<view class="title">我的工具</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<img src="../static/mine/20.png" />
|
||||
<view>送洗</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../static/mine/19.png" />
|
||||
<view>美甲</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../static/mine/18.png" />
|
||||
<view>足迹</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="more-tool">
|
||||
<view class="title">更多工具</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<img src="../static/mine/17.png" />
|
||||
<view>收货地址</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../static/mine/9.png" />
|
||||
<view>售后政策</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../static/mine/16.png" />
|
||||
<view>使用帮助</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../static/mine/15.png" />
|
||||
<view>投诉意见</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -29,6 +130,159 @@ export default {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mine {
|
||||
|
||||
min-height: 100vh;
|
||||
background: #ECECEC;
|
||||
.mine-top {
|
||||
width: 750rpx;
|
||||
height: 272rpx;
|
||||
background: #FF780F;
|
||||
.top {
|
||||
display: flex;
|
||||
.avatar {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid rgba(251,251,251,1);
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
.info-left {
|
||||
margin-right: 15rpx;
|
||||
.user-nickname {
|
||||
font-size: 30rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
margin-bottom: 19rpx;
|
||||
}
|
||||
.user-medal {
|
||||
width: 87rpx;
|
||||
height: 25rpx;
|
||||
background: linear-gradient(269deg,rgba(175,175,175,1) 0%,rgba(224,224,224,1) 100%);
|
||||
border-radius: 13rpx;
|
||||
> img {
|
||||
margin: 2rpx 10rpx;
|
||||
width: 20rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
.rank-title {
|
||||
font-size: 16rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-right {
|
||||
.info-phone {
|
||||
font-size: 24rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
.user-rank {
|
||||
font-size: 24px;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.member-service {
|
||||
box-sizing: content-box;
|
||||
margin-left: auto;
|
||||
padding: 14rpx 51rpx 14rpx 22rpx;
|
||||
background: rgba(255,255,255,1);
|
||||
opacity: 0.32;
|
||||
border-radius: 26rpx 0 0 26rpx;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
box-sizing: border-box;
|
||||
padding: 0 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> view {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mine-container {
|
||||
@mixin common-mine($content-padding-top, $content-padding-bottom, $image-height) {
|
||||
box-sizing: border-box;
|
||||
width: 690rpx;
|
||||
background: rgba(255,255,255,1);
|
||||
border-radius: 10rpx;
|
||||
margin: 30rpx auto 0;
|
||||
padding: 0 20rpx;
|
||||
.title {
|
||||
height: 76rpx;
|
||||
font-size: 28rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 650rpx;
|
||||
height: 1rpx;
|
||||
background: rgba(234,234,234,1);
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0);
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: $content-padding-top 0 $content-padding-bottom;
|
||||
display: flex;
|
||||
> view {
|
||||
text-align: center;
|
||||
> img {
|
||||
height: $image-height;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
> view {
|
||||
font-size: 22rpx;
|
||||
color: rgba(102,102,102,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order {
|
||||
@include common-mine(
|
||||
$content-padding-top: 22rpx,
|
||||
$content-padding-bottom: 30rpx,
|
||||
$image-height: 36rpx
|
||||
);
|
||||
.title {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.content {
|
||||
justify-content: space-between;
|
||||
> view {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
};
|
||||
}
|
||||
}
|
||||
.tool {
|
||||
@include common-mine(
|
||||
$content-padding-top: 8rpx,
|
||||
$content-padding-bottom: 25rpx,
|
||||
$image-height: 71rpx
|
||||
);
|
||||
.content {
|
||||
> view:not(:last-child) {
|
||||
margin-right: 58rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.more-tool {
|
||||
@include common-mine(
|
||||
$content-padding-top: 8rpx,
|
||||
$content-padding-bottom: 48rpx,
|
||||
$image-height: 71rpx
|
||||
);
|
||||
.content {
|
||||
> view:not(:last-child) {
|
||||
margin-right: 46rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user