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 {
width: 100%;
padding: 60rpx 0;

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

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

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

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