From ef4ea946fd5689ea5aad886d8102785f9bf0dcb2 Mon Sep 17 00:00:00 2001
From: Ge Hao <althoughghgh@gmail.com>
Date: Mon, 19 Dec 2016 17:21:26 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84mine=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/mine/mine.js   |   2 -
 pages/mine/mine.wxml |  37 ++++++--------
 pages/mine/mine.wxss | 115 ++++++++++++++++++++++++-------------------
 3 files changed, 79 insertions(+), 75 deletions(-)

diff --git a/pages/mine/mine.js b/pages/mine/mine.js
index 88fb542..cbb1f71 100644
--- a/pages/mine/mine.js
+++ b/pages/mine/mine.js
@@ -11,8 +11,6 @@ Page({
       nickName: ''
     },
     zichan_slides: [],
-    xunZhang: 'https://bayewechat.oss-cn-shanghai.aliyuncs.com/rassets/revision/' +
-              'icon-medal-0-0c9193833e3a24dead6c39ba969c2e71eea1ba88b8ce88c3b76cd2b08804280d.png',
     baye_rank: null,
     disableGetMobileCode: false,
     disableSubmitMobileCode: true,
diff --git a/pages/mine/mine.wxml b/pages/mine/mine.wxml
index 4515604..76ed7e0 100644
--- a/pages/mine/mine.wxml
+++ b/pages/mine/mine.wxml
@@ -1,30 +1,25 @@
-<view class='mine-header'>
-  <view class="userinfo">
-    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
-    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
-  </view>
-  <view wx:if="{{baye_rank}}" class='xunzhang'>
-    <image src="{{xunZhang}}" mode="aspectFit"></image>
-    <view class="rank"><text>{{baye_rank ? baye_rank : ''}}</text></view>
-  </view>
+<view class="userinfo">
+  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
+  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+  <text class="userinfo-nickname">{{baye_rank ? baye_rank : ''}}</text>
 </view>
 
 <view class="separate"></view>
 
 <view wx:if="{{needBindMobile}}">
-  <form bindsubmit="bindGetPassCode">
-    <view class="check mobile">
-      <view><text>绑定手机号：</text></view>
-      <view><input type="digit" name="mobile"></input></view>
-      <view><button formType="submit" disabled="{{disableGetMobileCode}}">{{getCodeButtonText}}</button></view>
-    </view>
-  </form>
+  <view class="login-title">关联手机号</view>
+
   <form bindsubmit="bindSubmitMobile">
-    <view class="check code">
-      <view><text>输入验证码：</text></view>
-      <view><input type="digit" name="code"></input></view>
-      <view><button formType="submit" disabled="{{disableSubmitMobileCode}}">提交</button></view>
-    </view>
+    <form bindsubmit="bindGetPassCode">
+      <view class="login">
+        <view class="first-line"><input type="digit" name="mobile" placeholder="输入手机号"></input></view>
+        <view class="second-line">
+          <input type="digit" name="code" placeholder="四位验证码"></input>
+          <button formType="submit" disabled="{{disableGetMobileCode}}">{{getCodeButtonText}}</button>
+        </view>
+      </view>
+    </form>
+    <view class="third-line"><button formType="submit" disabled="{{disableSubmitMobileCode}}">提交</button></view>
   </form>
 </view>
 <view wx:else>
diff --git a/pages/mine/mine.wxss b/pages/mine/mine.wxss
index caa402e..72f698c 100644
--- a/pages/mine/mine.wxss
+++ b/pages/mine/mine.wxss
@@ -1,49 +1,24 @@
-.mine-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  height: 130rpx;
-  background-size: auto, auto;
-  background: url(https://bayewechat.oss-cn-shanghai.aliyuncs.com/rassets/revision/icon-bg1-31089b3b52ad92a9bf410ade08221b538a7bfd69ef65303eca4d227731972a33.png) no-repeat;
-  padding-top: 30rpx;
-  padding-bottom: 15rpx;
-}
-
-.xunzhang {
-  margin-right: 70rpx;
-}
-
-.xunzhang image {
-  width: 110rpx;
-  height: 120rpx;
-}
-
-.xunzhang .rank {
-  position: relative;
-  top: -92rpx;
-  left: 0;
-  font-size: 24rpx;
-  width: 110rpx;
-  text-align: center;
-}
 
 .userinfo {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 25rpx;
+  background: linear-gradient(to bottom, #FCD33D 0%, #FFF6D7 100%);
 }
 
 .userinfo-avatar {
-  width: 85rpx;
-  height: 85rpx;
-  margin: 20rpx;
+  width: 100rpx;
+  height: 100rpx;
   border-radius: 50%;
+  margin-top: 20rpx;
+  margin-bottom: 25rpx;
 }
 
 .userinfo-nickname {
-  color: #fff;
+  color: #272727;
   font-size: 28rpx;
-  margin-top: 30rpx;
+  line-height: 40rpx;
 }
 
 .separate {
@@ -133,32 +108,68 @@
 }*/
 
 /* 绑定手机号的两个form */
-.check {
+.login-title {
+  margin: 20rpx 0 25rpx;
+  text-align: center;
+  font-size: 30rpx;
+}
+
+.login {
+  font-size: 32rpx;
   display: flex;
-  flex-direction: row;
-  justify-content: space-around;
+  flex-direction: column;
   align-items: center;
-  font-size: 30rpx;
-  height: 110rpx;
 }
 
-.check text {
-  width: auto;
+.login .first-line {
+  height: 80rpx;
+  border: 1rpx solid rgb(217, 217, 217);
+  border-radius: 5px;
+  width: 600rpx;
+  margin-bottom: 20rpx;
+}
+
+.login .first-line input {
+  padding-left: 20rpx;
+  height: 80rpx;
 }
 
-.check input {
-  padding-left: 10rpx;
-  border: 1rpx solid #66B2FF;
-  height: 70rpx;
-  width: 280rpx;
-  font-size: 34rpx;
+.login .second-line {
+  height: 80rpx;
+  display: flex;
+  width: 600rpx;
+  margin-bottom: 50rpx;
 }
 
-.check button {
-  width: 220rpx;
-  font-size: 30rpx;
+.login .second-line input {
+  height: 80rpx;
+  width: 350rpx;
+  margin-right: 20rpx;
+  border: 1rpx solid rgb(217, 217, 217);
   padding-left: 20rpx;
-  padding-right: 20rpx;
+  border-radius: 5px;
+}
+
+.login .second-line button {
+  text-align: center;
+  height: 84rpx;
+  line-height: 84rpx;
+  width: 250rpx;
+  font-size: 30rpx;
+  background-color: #FFC800;
+}
+
+.third-line {
+  margin-left: auto;
+  margin-right: auto;
+  width: 600rpx;
+  margin-bottom: 20rpx;
+}
+
+.third-line button {
+  height: 80rpx;
+  font-size: 32rpx;
+  background-color: #FFC800;
 }
 /*************/