Skip to content

蒋秀川 / miniProject

Go to a project
Commit 36efd0d4 by 李君
Options

小程序优化

1 parent 62ace672
Inline Side-by-side
Showing 6 changed files with 130 additions and 144 deletions
miniProject/app.wxss
...@@ -7,6 +7,11 @@ page{ ...@@ -7,6 +7,11 @@ page{
background-color: #efeff4; background-color: #efeff4;
--tabs-bottom-bar-color:#1972F5; --tabs-bottom-bar-color:#1972F5;
} }
.backgroundColor{
padding: 0 28rpx;
width: 100%;
background: linear-gradient(154deg, #C7D3FF 0%, #E9F9FF 48%, #FFFFFF 100%);
}
.van-picker__confirm{ .van-picker__confirm{
color: #000!important; color: #000!important;
} }
......
miniProject/components/navbar/index.wxss
...@@ -6,25 +6,32 @@ ...@@ -6,25 +6,32 @@
left: 0; left: 0;
z-index: 10; z-index: 10;
flex-shrink: 0; flex-shrink: 0;
} }
.navbar-home-title { .navbar-home-title {
font-size: 40rpx; font-size: 36rpx;
color: #fff; color: #fff;
position: absolute; position: absolute;
left: 46rpx; left: 46rpx;
z-index: 10; z-index: 10;
overflow: hidden; overflow: hidden;
} font-weight: 500;
font-size: 36rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.navbar-home-title1 { .navbar-home-title1 {
font-size: 40rpx; font-size: 32rpx;
color: #fff; color: #fff;
margin-left: 20rpx; margin-left: -45rpx;
} width: calc(100% - 19rpx);
text-align: center;
}
.navbar-title { .navbar-title {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding-left: 80px; padding-left: 80px;
...@@ -40,9 +47,9 @@ ...@@ -40,9 +47,9 @@
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.navbar-title1 { .navbar-title1 {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
...@@ -54,15 +61,15 @@ ...@@ -54,15 +61,15 @@
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.home-icon { .home-icon {
display: flex; display: flex;
margin-top: 16rpx; margin-top: 16rpx;
} }
.navbar-action-wrap { .navbar-action-wrap {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-align: center; -webkit-box-align: center;
...@@ -73,41 +80,42 @@ ...@@ -73,41 +80,42 @@
right: 190rpx; right: 190rpx;
z-index: 11; z-index: 11;
line-height: 1; line-height: 1;
} }
.navbar-action_item { .navbar-action_item {
padding: 3px 0; padding: 3px 0;
color: #333; color: #333;
} }
.navbar-action-group .navbar-action_item { .navbar-action-group .navbar-action_item {
border-right: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0;
padding: 3px 14px; padding: 3px 14px;
} }
.navbar-action-group .last { .navbar-action-group .last {
border-right: none; border-right: none;
} }
.home-left-icon { .home-left-icon {
display: flex; display: flex;
margin-top: 7px; margin-top: 7px;
} }
.home-left-icon .item { .home-left-icon .item {
font-size: 12px; font-size: 12px;
margin-right: 10px; margin-right: 10px;
} }
.back { .back {
position: absolute; position: absolute;
left: 35rpx; left: 35rpx;
z-index: 999; z-index: 999;
display: flex; display: flex;
align-items: center; align-items: center;
} width: 100%;
}
.back image { .back image {
width: 36rpx; width: 36rpx;
height: 36rpx; height: 36rpx;
}
\ No newline at end of file \ No newline at end of file
}
\ No newline at end of file \ No newline at end of file
miniProject/pages/editPwd/editPwd.wxml
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
bind:change='inputBlur3' bind:change='inputBlur3'
/> />
</van-cell-group> </van-cell-group>
<text class="tips">密码不小于八位且包含大小写字母、数字、特殊符号</text>
<view style="margin-top: 20rpx;"> <view style="margin-top: 20rpx;">
<view class="btn"> <view class="btn">
<van-button color="#1A77FF" round block type="primary" bindtap="onSubmit">确定 </van-button> <van-button color="#1A77FF" round block type="primary" bindtap="onSubmit">确定 </van-button>
......
miniProject/pages/editPwd/editPwd.wxss
/* pages/editPwd.wxss */ /* pages/editPwd.wxss */
.zong-content{ .zong-content {
width: 100%; width: 100%;
margin-top: 50rpx; margin-top: 50rpx;
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
} }
.tips {
color: rgba(0, 0, 0, 0.65);
font-size: 24rpx;
}
\ No newline at end of file \ No newline at end of file
miniProject/pages/me/index.wxml
<view class="container" style="padding-top: {{navHeight}}px;height:{{windowHeight}}px"> <view class="container" style="padding-top: {{navHeight}}px;height:{{windowHeight}}px">
<navbar <navbar page-name="我的" bg-color="#C7D3FF" navbar-color="#000">
page-name=""
bg-color="#0268FF"
navbar-color="#fff"
>
</navbar> </navbar>
<view class="~backgroundColor">
<view class="header"> <view class="header">
<image src="../../images/me/avatar.png" class="avatar" /> <image src="../../images/me/avatar.png" class="avatar" />
<view class="name"> <view class="name">
<view class="username">{{name}}</view> <view class="username">{{name}}</view>
<view class="company">{{accountName}}</view> <view class="company">{{userForm.roles}}</view>
</view> </view>
</view> </view>
<view class="zong-content"> <view class="zong-content">
<van-form> <van-form>
<van-cell-group> <van-cell-group>
<van-field <van-field value="{{userForm.realName}}" class="vanField" name="姓名" label="姓名" label-class='label' input-class='input' placeholder="姓名" bind:change='inputBlur' right-icon="edit" right-icon-class='editClass' />
value="{{userForm.loginName}}" <van-field class="vanField" value="{{userForm.tel}}" name="电话号码" label-class='label' input-class='input' label="电话号码" placeholder="电话号码" bind:change='inputBlur2' right-icon="edit" right-icon-class='editClass' />
name="用户名" <van-field border="{{ false }}" class="vanField" value="{{userForm.email}}" name="邮箱" label-class='label' input-class='input' label="邮箱" placeholder="邮箱" bind:change='inputBlur3' right-icon="edit" right-icon-class='editClass' />
label="用户名"
placeholder="用户名"
disabled
/>
<van-field
value="{{userForm.realName}}"
name="姓名"
label="姓名"
placeholder="姓名"
bind:change='inputBlur'
/>
<van-field
value="{{userForm.tel}}"
name="电话号码"
label="电话号码"
placeholder="电话号码"
bind:change='inputBlur2'
/>
<van-field
value="{{userForm.email}}"
name="邮箱"
label="邮箱"
placeholder="邮箱"
bind:change='inputBlur3'
/>
<van-field
value="{{userForm.roles}}"
name="角色权限"
label="角色权限"
placeholder="角色权限"
disabled
/>
</van-cell-group> </van-cell-group>
<view style="margin-top: 20rpx;"> </van-form>
<view class="btn">
<van-button color="#1A77FF" round block type="primary" bindtap="onSubmit">修改 </van-button>
</view>
<view class="btn">
<van-button color="#1A77FF" round block type="primary" bindtap="undatePwd">修改密码 </van-button>
</view> </view>
<view class="btn"> <view class="items">
<van-button color="#1A77FF" round block type="primary" bindtap="logout">退出登录 </van-button> <view class="item" bindtap="undatePwd">
<text>修改密码</text>
<image src="../../images/arrow-r.png" class="arrow" />
</view> </view>
<view class="item logout" bindtap="logout">
<text>退出登录</text>
<image src="../../images/arrow-r.png" class="arrow" />
</view> </view>
</van-form>
<!-- <view </view>
wx:for="{{menuItems}}" <view class="btn">
wx:for-index="index" <van-button color="#597BFF" round block type="primary" bindtap="onSubmit">提交</van-button>
wx:for-item="n" </view>
wx:key="index"
class="item"
bindtap="goOtherPage"
data-value="{{n}}"
>
<image src="{{ '../../images/me/' + n.icon + '.png' }}" class="img" />
<view>{{n.name}}</view>
<image src="../../images/arrow-r.png" class="arrow" />
</view> -->
</view> </view>
......
miniProject/pages/me/index.wxss
/* pages/me/index.wxss */ /* pages/me/index.wxss */
.header { .header {
width: 100%; width: 100%;
height: 200rpx; height: 224rpx;
background-color: #0268FF; background-color: #fff;
border-radius: 16rpx;
box-sizing: border-box; box-sizing: border-box;
padding: 12rpx 56rpx 0; margin-top: 40rpx;
padding: 12rpx 0rpx 0 50rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.header .avatar { .header .avatar {
width: 128rpx; width: 160rpx;
height: 128rpx; height: 160rpx;
border-radius: 50%;
margin-right: 32rpx; margin-right: 32rpx;
} }
.header .name { .header .name {
font-size: 32rpx; font-family: PingFangSC-Medium, PingFang SC;
color: #fff; color: #000;
} }
.header .username { .header .username {
font-size: 32rpx; font-weight: 500;
font-size: 40rpx;
line-height: 40rpx; line-height: 40rpx;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
...@@ -29,65 +33,73 @@ ...@@ -29,65 +33,73 @@
.header .company { .header .company {
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
padding: 0 12rpx; height: 40rpx;
height: 46rpx; line-height: 40rpx;
line-height: 46rpx; color: rgba(0, 0, 0, 0.55);
border-radius: 25rpx; font-size: 28rpx;
color: rgba(255, 255, 255, .8);
background-color: rgba(9, 109, 217, .5);
border: 2rpx solid rgba(171, 225, 255, .5);
font-size: 24rpx;
}
.btn{
margin-top: 20rpx;
} }
.logout {
width: calc(100% - 72rpx); .btn {
height: 90rpx; margin-top: 30rpx;
background-color: #1A77FF;
border-radius: 90rpx;
text-align: center;
line-height: 90rpx;
color: #fff;
position: absolute;
left: 36rpx;
bottom: 72rpx;
} }
.zong-content { .zong-content {
padding: 10rpx 0;
width: 100%; width: 100%;
height: 100%; height: 324rpx;
overflow-y: scroll; margin-top: 24rpx;
box-sizing: border-box; border-radius: 16rpx;
padding: 18rpx 28rpx; background-color: #fff;
} }
.zong-content .item { .label {
width: 100%; color: rgba(0, 0, 0, 0.9) !important;
height: 118rpx; font-size: 28rpx;
height: 66rpx;
line-height: 66rpx;
/* padding: 5px; */
}
.input {
color: rgba(0, 0, 0, 0.7) !important;
font-size: 28rpx;
}
.editClass{
color: #597BFF;
font-size: 32rpx !important;
font-weight: 600 !important;
right: 25rpx;
}
.vanField .van-field__body{
height: 66rpx;
line-height: 66rpx;
}
.items{
margin-top: 24rpx;
border-radius: 16rpx;
background-color: #fff; background-color: #fff;
border-radius: 18rpx; padding: 5px 10rpx 5rpx 23rpx;
}
.items .item {
width: 100%;
height: 100rpx;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 16rpx; color: rgba(0,0,0,0.9);
color: rgba(0, 0, 0, .85);
font-size: 28rpx; font-size: 28rpx;
box-sizing: border-box; box-sizing: border-box;
padding: 0 38rpx 0 32rpx; padding: 0 23rpx 0 17rpx;
position: relative; position: relative;
border-bottom: 1rpx solid #E1E1E1;
} }
.items .logout{
.zong-content .item .img { border-width: 0;
width: 57rpx;
height: 57rpx;
border-radius: 10rpx;
} }
.items .item .arrow {
.zong-content .item .arrow {
position: absolute; position: absolute;
right: 38rpx; right: 38rpx;
top: 50rpx; color: rgba(0, 0, 0, .2);
color: rgba(0, 0, 0, .1);
width: 24rpx; width: 24rpx;
height: 24rpx; height: 24rpx;
} }
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!