新增我的页面
This commit is contained in:
parent
56e06b2adc
commit
06836242f9
|
|
@ -1,5 +1,83 @@
|
|||
<template>
|
||||
<app-layout headerBackgroundColor="#f00" textColor="light"> </app-layout>
|
||||
<app-layout
|
||||
headerBackgroundColor="#F6F6F6"
|
||||
backgroundColor="#F6F6F6"
|
||||
textColor="dark"
|
||||
title="我的"
|
||||
minHeight="calc(100vh - 100rpx)"
|
||||
>
|
||||
<view class="member-header">
|
||||
<view class="headimg">
|
||||
<image class="img-src" :src="info.headimg" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="member-desc">
|
||||
<text class="nickname">{{ info.nickname }}</text>
|
||||
<view class="mobile">
|
||||
<text class="text">{{ info.mobile }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-container">
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="addressPage">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont icon-dingwei"></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">我的地址</view>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont icon-tousu"></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">意见投诉</view>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont icon-kefufill"></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">联系客服</view>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="title-icon">
|
||||
<text
|
||||
class="
|
||||
iconfont
|
||||
icon-shezhixitongshezhigongnengshezhishuxing
|
||||
"
|
||||
></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">设置</view>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-group">
|
||||
<view class="menu-item">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont icon-dingwei"></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">我是师傅</view>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont icon-cailiaogongcheng"></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">工程安装</view>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont icon-qiye"></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">企业安装合作</view>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</app-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -8,7 +86,13 @@ import { mapState } from "vuex";
|
|||
export default {
|
||||
name: "member",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
info: {
|
||||
nickname: "微信用户",
|
||||
mobile: "131****6080",
|
||||
headimg: require("@/static/temp/member/1.png"),
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AppLayout,
|
||||
|
|
@ -23,9 +107,104 @@ export default {
|
|||
onReady() {},
|
||||
onReachBottom() {},
|
||||
onPullDownRefresh() {},
|
||||
methods: {},
|
||||
methods: {
|
||||
addressPage() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/address/address?openType=list",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.member-header {
|
||||
width: 100%;
|
||||
height: 286rpx;
|
||||
background-color: #8c9bec;
|
||||
padding: 74rpx 40rpx 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
.headimg {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
.img-src {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.member-desc {
|
||||
width: 560rpx;
|
||||
height: 110rpx;
|
||||
box-sizing: border-box;
|
||||
padding-left: 40rpx;
|
||||
.nickname {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
letter-spacing: 1rpx;
|
||||
line-height: 30rp;
|
||||
}
|
||||
}
|
||||
.mobile {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
.text {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
line-height: 36rpx;
|
||||
letter-spacing: 1rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-container {
|
||||
position: relative;
|
||||
top: -72rpx;
|
||||
width: 670rpx;
|
||||
margin: 0 auto;
|
||||
.menu-group {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 0;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
}
|
||||
.menu-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
line-height: 40rpx;
|
||||
.title-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
}
|
||||
.iconfont {
|
||||
color: #8c9bec;
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.title {
|
||||
width: 530rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
color: #000000;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.more {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
.iconfont.icon-cailiaogongcheng,
|
||||
.iconfont.icon-qiye {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Loading…
Reference in New Issue