6.1
This commit is contained in:
parent
db2b9d8e25
commit
a6abca1d4b
24
pageE/mine/MineHelp.vue
Normal file
24
pageE/mine/MineHelp.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<view class="mine-help">
|
||||
<view v-for="(item, index) in helpList" :key="index" class="help-item">
|
||||
<view>使用帮助</view>
|
||||
<img src="../static/mine/21.png" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
helpList: [1,1,1,1]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mine-help {
|
||||
.help-item {
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
73
pageE/mine/MineHistory.vue
Normal file
73
pageE/mine/MineHistory.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="mine-history">
|
||||
<view v-for="(item, index) in historyList" :key="index" class="history-item">
|
||||
<view class="item-title">
|
||||
<img src="" />
|
||||
<view>小米店铺</view>
|
||||
</view>
|
||||
<view class="item-image"></view>
|
||||
<view class="item-info">
|
||||
<view class="info-name">{{ item }}</view>
|
||||
<view>...</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
historyList: [1, 2, 3]
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mine-history{
|
||||
background: #ECECEC;
|
||||
padding: 20rpx 30rpx 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.history-item {
|
||||
width: 220rpx;
|
||||
height: 290rpx;
|
||||
background: rgba(255,255,255,1);
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx 20rpx 22rpx;
|
||||
margin: 0 15rpx 20rpx 0;
|
||||
.item-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
border: 1rpx solid #000;
|
||||
margin-right: 19rpx;
|
||||
}
|
||||
> view {
|
||||
font-size: 24rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
}
|
||||
.item-image {
|
||||
margin: 20rpx 0 17rpx;
|
||||
width: 180rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #000;
|
||||
}
|
||||
.item-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.info-name {
|
||||
font-size: 22rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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>
|
||||
|
||||
BIN
pageE/static/mine/21.png
Normal file
BIN
pageE/static/mine/21.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
26
pages.json
26
pages.json
@ -24,6 +24,32 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "mine/MineHistory",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的足迹",
|
||||
"app-plus": {
|
||||
"titleSize": "36px",
|
||||
"titleColor": "#333333",
|
||||
"titleNView": {
|
||||
"backgroundColor": "#FFFFFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "mine/MineHelp",
|
||||
"style": {
|
||||
"navigationBarTitleText": "使用帮助",
|
||||
"app-plus": {
|
||||
"titleSize": "36px",
|
||||
"titleColor": "#333333",
|
||||
"titleNView": {
|
||||
"backgroundColor": "#FFFFFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user