forked from lsl/xzjl-ui
parent
379b369e1c
commit
f0ba491683
@ -1,40 +1,67 @@
|
||||
<!--pages/home/me/grzl/grzl.wxml-->
|
||||
<!--返回图标-->
|
||||
<view class="reback" bindtap="go2Reback"></view>
|
||||
<view class="title">修改资料</view>
|
||||
<image class="avatar1" src="{{userInfo.avatar}}"></image>
|
||||
<view class="cameralogo"></view>
|
||||
<view class="xgzl-container">
|
||||
<!-- 头部返回 -->
|
||||
<view class="xgzl-header">
|
||||
<view class="reback" bindtap="go2Reback"></view>
|
||||
<view class="title">修改资料</view>
|
||||
</view>
|
||||
<!-- 头像 -->
|
||||
<view class="xgzl-img">
|
||||
<view class="cameralogo"><view class="cameralogo-img"></view></view>
|
||||
<image class="avatar1" src="{{userInfo.avatar}}"></image>
|
||||
<input focus="doChangeName1" class="nickname" name="nick" placeholder="昵称不能为空" maxlength="7" value="{{userInfo.nick}}" bindblur="doChangeName1"></input>
|
||||
</view>
|
||||
|
||||
<view class="yhtx"></view>
|
||||
<!-- 精灵头像 -->
|
||||
<view class="xgzl-sculpture">
|
||||
<view class="jltxtxt">精灵头像</view>
|
||||
<view class="txcheck-box">
|
||||
<view class="txcheck">
|
||||
<view wx:for="{{avatars}}" class="itemxx"><image class="iii" src="{{item}}" data-img="{{item}}" bindtap="changeAvatar"></image></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<form bindsubmit="go2UpdateUserInfo">
|
||||
<!-- <form bindsubmit="go2UpdateUserInfo"></form> -->
|
||||
|
||||
</form>
|
||||
<t-input focus="doChangeName1" class="nickname" name="nick" placeholder="昵称不能为空" maxlength="7" value="{{userInfo.nick}}" bindblur="doChangeName1" ></t-input>
|
||||
<!-- 数据表单 -->
|
||||
<view class="xgzl-data">
|
||||
<view class="data-item">
|
||||
<view class="xbwz">性别</view>
|
||||
<view class="xbtxt" bindtap="changeSex">{{userInfo.spriteType=='male'?'男生':'女生'}}</view>
|
||||
</view>
|
||||
<view class="data-item">
|
||||
<view class="srwz">生日</view>
|
||||
<view class="srtxt" bindtap="handleCalendar">{{userInfo.birthday}}</view>
|
||||
</view>
|
||||
<view class="data-item">
|
||||
<view class="xzwz">星座</view>
|
||||
<view class="ssxz">{{userInfo.birthdayConstellation}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="xbwz">性别</view>
|
||||
<view class="xzwz">星座</view>
|
||||
<view class="srwz">生日</view>
|
||||
<view class="jltxtxt">精灵头像</view>
|
||||
<view class="xbtxt" bindtap="changeSex">{{userInfo.spriteType=='male'?'男生':'女生'}}</view>
|
||||
<view class="ssxz">{{userInfo.horoscope.name}}</view>
|
||||
<view class="srtxt" bindtap="handleCalendar">{{userInfo.horoscope.date}}</view><!--生日-->
|
||||
<t-calendar visible="{{cVisible}}" bind:confirm="changeDate" />
|
||||
<!-- <t-calendar visible="{{cVisible}}" bind:confirm="changeDate" minDate="{{minDate}}" maxDate="{{maxDate}}"/> -->
|
||||
|
||||
<t-picker
|
||||
visible="{{sexVisible}}"
|
||||
value="{{cityValue}}"
|
||||
data-key="city"
|
||||
title="选择性别"
|
||||
cancelBtn="取消"
|
||||
confirmBtn="确认"
|
||||
bindchange="onPickerChange"
|
||||
bindpick="onColumnChange"
|
||||
bindcancel="onPickerCancel"
|
||||
>
|
||||
<t-picker-item options="{{sexs}}" />
|
||||
</t-picker>
|
||||
<t-date-time-picker
|
||||
title="选择日期"
|
||||
visible="{{cVisible}}"
|
||||
mode="date"
|
||||
format="YYYY-MM-DD"
|
||||
value="{{userInfo.birthday}}"
|
||||
bind:confirm="changeDate"
|
||||
start="1980-1-1"
|
||||
end="{{endDate}}"
|
||||
/>
|
||||
|
||||
<t-picker
|
||||
visible="{{sexVisible}}"
|
||||
value="{{cityValue}}"
|
||||
data-key="city"
|
||||
title="选择性别"
|
||||
cancelBtn="取消"
|
||||
confirmBtn="确认"
|
||||
bind:confirm="onColumnChange"
|
||||
>
|
||||
<t-picker-item options="{{sexs}}" />
|
||||
</t-picker>
|
||||
|
||||
<view class="txcheck" >
|
||||
<view wx:for="{{avatars}}" class="itemxx"><image class="iii" src="{{item}}" data-img="{{item}}" bindtap="changeAvatar"></image></view>
|
||||
</view>
|
||||
@ -1,185 +1,187 @@
|
||||
/* pages/home/me/grzl/grzl.wxss */
|
||||
.reback{
|
||||
.xgzl-container {
|
||||
position: absolute;
|
||||
margin-left: 20rpx;
|
||||
margin-top:108rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 88rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.xgzl-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.reback{
|
||||
width:48rpx;
|
||||
height:48rpx;
|
||||
background-repeat: no-repeat;
|
||||
margin-left: 20rpx;
|
||||
background-size:100% 100%;
|
||||
background-image: url(https://xzjl-1257436036.cos.ap-nanjing.myqcloud.com/me/reback.png);
|
||||
}
|
||||
|
||||
.title{
|
||||
position: absolute;
|
||||
left: 278rpx;
|
||||
top: 108rpx;
|
||||
width: 196rpx;
|
||||
height: 48rpx;
|
||||
margin-left: 210rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(108, 108, 108, 1);
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
|
||||
.yhtx{
|
||||
position: absolute;
|
||||
left: 74px;
|
||||
top: 109px;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 74rpx;
|
||||
border: 3px solid rgba(161, 134, 81, 1);
|
||||
.xgzl-img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 224rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar1{
|
||||
position: absolute;
|
||||
left: 77px;
|
||||
top: 112px;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
margin: 0 64rpx 0 148rpx;
|
||||
border-radius: 74rpx;
|
||||
border: 6rpx solid #A18651;
|
||||
}
|
||||
|
||||
.nickname{
|
||||
border: 1px solid #ffffff;
|
||||
/* color: rgba(108, 108, 108, 1);
|
||||
font-size: 36rpx;
|
||||
text-align: left;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
background-color: rgba(108, 108, 108, 0) !important; */
|
||||
}
|
||||
|
||||
.xgzl-sculpture {
|
||||
width: 100%;
|
||||
padding-left: 50rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.jltxtxt{
|
||||
color: rgba(154, 154, 154, 1);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.cameralogo{
|
||||
position: absolute;
|
||||
left: 128px;
|
||||
top: 162px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
top: 144rpx;
|
||||
left: 296rpx;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #4F4F4F;
|
||||
}
|
||||
|
||||
.cameralogo-img {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size:100% 100%;
|
||||
background-image: url(https://xzjl-1257436036.cos.ap-nanjing.myqcloud.com/me/camera.png);
|
||||
}
|
||||
.nickname{
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
left: 176px;
|
||||
top: 131px;
|
||||
width: 126px;
|
||||
height: 27px;
|
||||
color: rgba(108, 108, 108, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-medium;
|
||||
|
||||
.txcheck-box {
|
||||
width: 100%;
|
||||
height: 164rpx;
|
||||
overflow-x: scroll;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.txcheck{
|
||||
width: 844rpx;
|
||||
height: 164rpx;
|
||||
text-align: center;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.itemxx{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.xgzl-data {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
padding: 0 64rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.xzwz{
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
top: 436px;
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
color: rgba(108, 108, 108, 1);
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
width: 64rpx;
|
||||
height: 48rpx;
|
||||
color: rgba(108, 108, 108, 1);
|
||||
font-size: 32rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.srwz{
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
top: 380px;
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
color: rgba(108, 108, 108, 1);
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
width: 64rpx;
|
||||
height: 48rpx;
|
||||
color: rgba(108, 108, 108, 1);
|
||||
font-size: 32rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.xbwz{
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
top: 324px;
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
color: rgba(108, 108, 108, 1);
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
|
||||
.ssxz{
|
||||
position: absolute;
|
||||
left: 291px;
|
||||
top: 436px;
|
||||
width: 52px;
|
||||
height: 24px;
|
||||
color: rgba(154, 154, 154, 1);
|
||||
font-size: 16px;
|
||||
text-align: right;
|
||||
width: 64rpx;
|
||||
height: 48rpx;
|
||||
color: rgba(108, 108, 108, 1);
|
||||
font-size: 32rpx;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
|
||||
.rlt{
|
||||
position: absolute;
|
||||
left: 260px;
|
||||
top: 380px;
|
||||
width: 83px;
|
||||
height: 24px;
|
||||
.ssxz{
|
||||
width: 104rpx;
|
||||
height: 48rpx;
|
||||
color: rgba(154, 154, 154, 1);
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
text-align: right;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
|
||||
.srtxt{
|
||||
position: absolute;
|
||||
left: 500rpx;
|
||||
top: 380px;
|
||||
width: 200rpx;
|
||||
height: 24px;
|
||||
height: 48rpx;
|
||||
color: rgba(154, 154, 154, 1);
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
text-align: right;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
|
||||
.xbtxt{
|
||||
position: absolute;
|
||||
left: 311px;
|
||||
top: 324px;
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
width: 64rpx;
|
||||
height: 48rpx;
|
||||
color: rgba(154, 154, 154, 1);
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
text-align: right;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
.jltxtxt{
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 200px;
|
||||
width: 56px;
|
||||
height: 21px;
|
||||
color: rgba(154, 154, 154, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
|
||||
.txcheck{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 221px;
|
||||
width: 422px;
|
||||
height: 82px;
|
||||
text-align: center;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.itemxx{
|
||||
margin-left: 21px;
|
||||
margin-top: 32rpx;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.iii{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
@ -1,14 +1,17 @@
|
||||
<!--pages/index/index.wxml-->
|
||||
<view class="bg">
|
||||
<view class="quest"></view><!--问题图标-->
|
||||
<view class="alb"></view><!--阿拉伯文字图标-->
|
||||
<view class="qr"></view><!--扫码图标-->
|
||||
<view class="js" bindtap="scanCodeEvent" ></view><!--晶石图片-->
|
||||
<view class="yw"></view><!--下方黄色小卡图-->
|
||||
<view class="jstext"></view><!--晶石文字-->
|
||||
<view class="yx">
|
||||
<view class="hqjs" bindtap="go2Get"><text>获取晶石</text></view>
|
||||
</view><!--圆形图片-->
|
||||
<view class="bd">
|
||||
<view class="bg">
|
||||
<!-- <view class="quest"></view>问题图标 -->
|
||||
<view class="alb"></view><!--阿拉伯文字图标-->
|
||||
<view class="qr">
|
||||
<view class="js" bindtap="scanCodeEvent" ></view><!--晶石图片-->
|
||||
</view><!--扫码图标-->
|
||||
<view class="yw">
|
||||
<view class="shadow"></view>
|
||||
</view><!--下方黄色小卡图-->
|
||||
<view class="jstext"></view><!--晶石文字-->
|
||||
<view class="yx" bindtap="go2Get">获取晶石</view><!--圆形图片-->
|
||||
</view>
|
||||
</view>
|
||||
<t-toast id="t-toast" />
|
||||
|
||||
|
||||
Loading…
Reference in new issue