topnuomi
/
xx-worker-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化个人中心列表样式

This commit is contained in:
TOP糯米 2023-03-06 00:42:45 +08:00
parent 09cbcd0f7f
commit 2ea178492d
3 changed files with 100 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/App.vue
View File

@ -99,6 +99,34 @@ export default {
} }
} }
} }
// 点击表单
.common-form-widget-group {
width: 100%;
box-sizing: border-box;
.widget-item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 36rpx 0;
box-sizing: border-box;
line-height: 30rpx;
border-bottom: 2rpx solid #efefef;
.title {
position: relative;
font-size: 30rpx;
color: #2d2d2d;
}
.iconfont {
font-size: 30rpx;
color: #666666;
}
}
.widget-item:last-child {
border-bottom: 0;
}
}
.common-save-form-btn { .common-save-form-btn {
width: 100%; width: 100%;
padding: 60rpx 0; padding: 60rpx 0;

93
src/pages/member/member.vue
View File

@ -57,40 +57,56 @@
</view> </view>
</view> </view>
</view> </view>
<view class="member-section"> <view class="common-form-widget-group">
<view class="menu-item" @click="utils.toPage('/pages/member/cash-withdraw')"> <view class="widget-item" @click="utils.toPage('/pages/member/cash-withdraw')">
<text class="title">我要提现</text> <text class="title limit-line clamp-1">我要提现</text>
<text class="iconfont icon-jinru"></text> <view class="item-content">
<text class="iconfont icon-jinru"></text>
</view>
</view> </view>
<view class="menu-item"> <view class="widget-item">
<text class="title">服务无忧保</text> <text class="title limit-line clamp-1">服务无忧保</text>
<text class="iconfont icon-jinru"></text> <view class="item-content">
<text class="iconfont icon-jinru"></text>
</view>
</view> </view>
<view class="menu-item"> <view class="widget-item">
<text class="title">提现记录</text> <text class="title limit-line clamp-1">提现记录</text>
<text class="iconfont icon-jinru"></text> <view class="item-content">
<text class="iconfont icon-jinru"></text>
</view>
</view> </view>
<view class="menu-item"> <view class="widget-item">
<text class="title">明细</text> <text class="title limit-line clamp-1">明细</text>
<text class="iconfont icon-jinru"></text> <view class="item-content">
<text class="iconfont icon-jinru"></text>
</view>
</view> </view>
</view> </view>
<view class="member-section"> <view class="common-form-widget-group">
<view class="menu-item" @click="utils.toPage('/pages/member/service-info')"> <view class="widget-item" @click="utils.toPage('/pages/member/service-info')">
<text class="title">设置服务信息</text> <text class="title limit-line clamp-1">设置服务信息</text>
<text class="iconfont icon-jinru"></text> <view class="item-content">
<text class="iconfont icon-jinru"></text>
</view>
</view> </view>
<view class="menu-item"> <view class="widget-item">
<text class="title">我的评价</text> <text class="title limit-line clamp-1">我的评价</text>
<text class="iconfont icon-jinru"></text> <view class="item-content">
<text class="iconfont icon-jinru"></text>
</view>
</view> </view>
<view class="menu-item"> <view class="widget-item">
<text class="title">在线客服</text> <text class="title limit-line clamp-1">在线客服</text>
<text class="iconfont icon-jinru"></text> <view class="item-content">
<text class="iconfont icon-jinru"></text>
</view>
</view> </view>
<view class="menu-item" @click="utils.toPage('/pages/member/setting')"> <view class="widget-item" @click="utils.toPage('/pages/member/setting')">
<text class="title">设置</text> <text class="title limit-line clamp-1">设置</text>
<text class="iconfont icon-jinru"></text> <view class="item-content">
<text class="iconfont icon-jinru"></text>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -227,26 +243,13 @@ export default {
} }
} }
} }
.member-section { .common-form-widget-group {
width: 100%; padding: 14rpx 22rpx;
box-sizing: border-box;
padding: 15rpx 22rpx;
background-color: #ffffff; background-color: #ffffff;
margin-top: 22rpx; margin-top: 22rpx;
}
.menu-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 36rpx 0;
border-bottom: 2rpx solid #efefef;
.title { .title {
font-size: 30rpx;
color: #333333;
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 30rpx;
} }
.title::before { .title::before {
display: inline-block; display: inline-block;
@ -256,13 +259,5 @@ export default {
background: #8b9aeb; background: #8b9aeb;
margin-right: 14rpx; margin-right: 14rpx;
} }
.iconfont {
font-size: 30rpx;
color: #666666;
line-height: 30rpx;
}
}
.menu-item:last-child {
border-bottom: 0;
} }
</style> </style>

63
src/pages/member/setting.vue
View File

@ -1,46 +1,46 @@
<template> <template>
<app-layout title="设置"> <app-layout title="设置">
<view class="setting-container"> <view class="setting-container">
<view class="group"> <view class="common-form-widget-group setting">
<view class="item"> <view class="widget-item">
<text class="title">版本号</text> <text class="title limit-line clamp-1">版本号</text>
<view class="item-content"> <view class="item-content">
<text class="content version">v1.02</text> <text class="content version">v1.02</text>
</view> </view>
</view> </view>
<view class="item"> <view class="widget-item">
<text class="title">密码管理</text> <text class="title limit-line clamp-1">密码管理</text>
<view class="item-content"> <view class="item-content">
<text class="iconfont icon-jinru"></text> <text class="iconfont icon-jinru"></text>
</view> </view>
</view> </view>
<view class="item"> <view class="widget-item">
<text class="title">手机号</text> <text class="title limit-line clamp-1">手机号</text>
<view class="item-content"> <view class="item-content">
<text class="content mobile">131****6080</text> <text class="content mobile">131****6080</text>
<text class="iconfont icon-jinru"></text> <text class="iconfont icon-jinru"></text>
</view> </view>
</view> </view>
<view class="item"> <view class="widget-item">
<text class="title">关于我们</text> <text class="title limit-line clamp-1">关于我们</text>
<view class="item-content"> <view class="item-content">
<text class="iconfont icon-jinru"></text> <text class="iconfont icon-jinru"></text>
</view> </view>
</view> </view>
<view class="item"> <view class="widget-item">
<text class="title">注册协议</text> <text class="title limit-line clamp-1">注册协议</text>
<view class="item-content"> <view class="item-content">
<text class="iconfont icon-jinru"></text> <text class="iconfont icon-jinru"></text>
</view> </view>
</view> </view>
<view class="item"> <view class="widget-item">
<text class="title">隐私协议</text> <text class="title limit-line clamp-1">隐私协议</text>
<view class="item-content"> <view class="item-content">
<text class="iconfont icon-jinru"></text> <text class="iconfont icon-jinru"></text>
</view> </view>
</view> </view>
<view class="item last"> <view class="widget-item last">
<text class="title">注销账户</text> <text class="title limit-line clamp-1">注销账户</text>
<view class="item-content"> <view class="item-content">
<text class="iconfont icon-jinru"></text> <text class="iconfont icon-jinru"></text>
</view> </view>
@ -77,31 +77,24 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding: 0 20rpx; padding: 0 20rpx;
} }
.group { .common-form-widget-group.setting {
width: 100%; padding: 0;
background-color: #ffffff; background-color: #ffffff;
.item.last { .widget-item {
padding: 36rpx 24rpx;
border-bottom: 2rpx solid #e8e7e7;
line-height: 30rpx;
}
.widget-item.last {
border-bottom: 0; border-bottom: 0;
} }
.item { .title {
position: relative;
padding: 0;
}
.item-content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 36rpx 25rpx;
border-bottom: 2rpx solid #e8e7e7;
.title {
font-size: 30rpx;
color: #2d2d2d;
}
.iconfont {
font-size: 32rpx;
color: #a7a7a7;
}
.item-content {
display: flex;
align-items: center;
}
} }
.version { .version {
font-size: 28rpx; font-size: 28rpx;