Skip to content

蒋秀川 / miniProject

Go to a project
Commit 36efd0d4 by 李君
Options

小程序优化

1 parent 62ace672
Inline Side-by-side
Showing 6 changed files with 244 additions and 258 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
.navbar { .navbar {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 10;
flex-shrink: 0;
}
.navbar-home-title {
font-size: 40rpx;
color: #fff;
position: absolute;
left: 46rpx;
z-index: 10;
overflow: hidden;
}
.navbar-home-title1 {
font-size: 40rpx;
color: #fff;
margin-left: 20rpx;
}
.navbar-title {
width: 100%;
box-sizing: border-box;
padding-left: 80px;
padding-right: 90px;
height: 32px;
line-height: 32px;
text-align: center;
position: absolute;
left: 0;
z-index: 10;
color: #333;
font-size: 20px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.navbar-title1 {
height: 32px;
line-height: 32px;
text-align: center;
position: absolute;
left: 0;
z-index: 10;
color: #333;
font-size: 20px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.home-icon {
display: flex;
margin-top: 16rpx;
}
.navbar-action-wrap {
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position: absolute;
right: 190rpx;
z-index: 11;
line-height: 1;
}
.navbar-action_item {
padding: 3px 0;
color: #333;
}
.navbar-action-group .navbar-action_item {
border-right: 1px solid #f0f0f0;
padding: 3px 14px;
}
.navbar-action-group .last {
border-right: none;
}
.home-left-icon {
display: flex;
margin-top: 7px;
}
.home-left-icon .item {
font-size: 12px;
margin-right: 10px;
}
.back {
position: absolute;
left: 35rpx;
z-index: 999;
display: flex;
align-items: center;
}
.back image {
width: 36rpx;
height: 36rpx;
}
\ No newline at end of file \ No newline at end of file
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 10;
flex-shrink: 0;
}
.navbar-home-title {
font-size: 36rpx;
color: #fff;
position: absolute;
left: 46rpx;
z-index: 10;
overflow: hidden;
font-weight: 500;
font-size: 36rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.navbar-home-title1 {
font-size: 32rpx;
color: #fff;
margin-left: -45rpx;
width: calc(100% - 19rpx);
text-align: center;
}
.navbar-title {
width: 100%;
box-sizing: border-box;
padding-left: 80px;
padding-right: 90px;
height: 32px;
line-height: 32px;
text-align: center;
position: absolute;
left: 0;
z-index: 10;
color: #333;
font-size: 20px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.navbar-title1 {
height: 32px;
line-height: 32px;
text-align: center;
position: absolute;
left: 0;
z-index: 10;
color: #333;
font-size: 20px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.home-icon {
display: flex;
margin-top: 16rpx;
}
.navbar-action-wrap {
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position: absolute;
right: 190rpx;
z-index: 11;
line-height: 1;
}
.navbar-action_item {
padding: 3px 0;
color: #333;
}
.navbar-action-group .navbar-action_item {
border-right: 1px solid #f0f0f0;
padding: 3px 14px;
}
.navbar-action-group .last {
border-right: none;
}
.home-left-icon {
display: flex;
margin-top: 7px;
}
.home-left-icon .item {
font-size: 12px;
margin-right: 10px;
}
.back {
position: absolute;
left: 35rpx;
z-index: 999;
display: flex;
align-items: center;
width: 100%;
}
.back image {
width: 36rpx;
height: 36rpx;
}
\ No newline at end of file \ No newline at end of file
miniProject/pages/editPwd/editPwd.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="修改密码" page-name="修改密码"
bg-color="#fff" bg-color="#fff"
navbar-color="rgba(0, 0, 0, .85)" navbar-color="rgba(0, 0, 0, .85)"
...@@ -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="header"> <view class="~backgroundColor">
<image src="../../images/me/avatar.png" class="avatar" /> <view class="header">
<view class="name"> <image src="../../images/me/avatar.png" class="avatar" />
<view class="username">{{name}}</view> <view class="name">
<view class="company">{{accountName}}</view> <view class="username">{{name}}</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 value="{{userForm.realName}}" class="vanField" name="姓名" label="姓名" label-class='label' input-class='input' placeholder="姓名" bind:change='inputBlur' right-icon="edit" right-icon-class='editClass' />
<van-field <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' />
value="{{userForm.loginName}}" <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' />
name="用户名" </van-cell-group>
label="用户名" </van-form>
placeholder="用户名" </view>
disabled <view class="items">
/> <view class="item" bindtap="undatePwd">
<van-field <text>修改密码</text>
value="{{userForm.realName}}" <image src="../../images/arrow-r.png" class="arrow" />
name="姓名" </view>
label="姓名" <view class="item logout" bindtap="logout">
placeholder="姓名" <text>退出登录</text>
bind:change='inputBlur' <image src="../../images/arrow-r.png" class="arrow" />
/>
<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>
<view style="margin-top: 20rpx;">
<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 class="btn">
<van-button color="#1A77FF" round block type="primary" bindtap="logout">退出登录 </van-button>
</view>
</view> </view>
</van-form>
</view>
<!-- <view <view class="btn">
wx:for="{{menuItems}}" <van-button color="#597BFF" round block type="primary" bindtap="onSubmit">提交</van-button>
wx:for-index="index" </view>
wx:for-item="n"
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>
</view> </view>
\ No newline at end of file \ No newline at end of file
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;
box-sizing: border-box; border-radius: 16rpx;
padding: 12rpx 56rpx 0; box-sizing: border-box;
display: flex; margin-top: 40rpx;
align-items: center; padding: 12rpx 0rpx 0 50rpx;
display: flex;
align-items: center;
} }
.header .avatar { .header .avatar {
width: 128rpx; width: 160rpx;
height: 128rpx; height: 160rpx;
margin-right: 32rpx; border-radius: 50%;
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;
line-height: 40rpx; font-size: 40rpx;
margin-bottom: 12rpx; line-height: 40rpx;
margin-bottom: 12rpx;
} }
.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; .btn {
} margin-top: 30rpx;
.logout {
width: calc(100% - 72rpx);
height: 90rpx;
background-color: #1A77FF;
border-radius: 90rpx;
text-align: center;
line-height: 90rpx;
color: #fff;
position: absolute;
left: 36rpx;
bottom: 72rpx;
} }
.zong-content { .zong-content {
width: 100%; padding: 10rpx 0;
height: 100%; width: 100%;
overflow-y: scroll; height: 324rpx;
box-sizing: border-box; margin-top: 24rpx;
padding: 18rpx 28rpx; border-radius: 16rpx;
background-color: #fff;
} }
.zong-content .item { .label {
width: 100%; color: rgba(0, 0, 0, 0.9) !important;
height: 118rpx; font-size: 28rpx;
background-color: #fff; height: 66rpx;
border-radius: 18rpx; line-height: 66rpx;
display: flex; /* padding: 5px; */
align-items: center;
margin-bottom: 16rpx;
color: rgba(0, 0, 0, .85);
font-size: 28rpx;
box-sizing: border-box;
padding: 0 38rpx 0 32rpx;
position: relative;
} }
.zong-content .item .img { .input {
width: 57rpx; color: rgba(0, 0, 0, 0.7) !important;
height: 57rpx; font-size: 28rpx;
border-radius: 10rpx; }
.editClass{
color: #597BFF;
font-size: 32rpx !important;
font-weight: 600 !important;
right: 25rpx;
}
.vanField .van-field__body{
height: 66rpx;
line-height: 66rpx;
} }
.zong-content .item .arrow { .items{
position: absolute; margin-top: 24rpx;
right: 38rpx; border-radius: 16rpx;
top: 50rpx; background-color: #fff;
color: rgba(0, 0, 0, .1); padding: 5px 10rpx 5rpx 23rpx;
width: 24rpx; }
height: 24rpx; .items .item {
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
color: rgba(0,0,0,0.9);
font-size: 28rpx;
box-sizing: border-box;
padding: 0 23rpx 0 17rpx;
position: relative;
border-bottom: 1rpx solid #E1E1E1;
}
.items .logout{
border-width: 0;
}
.items .item .arrow {
position: absolute;
right: 38rpx;
color: rgba(0, 0, 0, .2);
width: 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!