开发用户信息展示

pages/personal/index.less

@@ -8,17 +8,15 @@
 
   .userBox {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
-    background-color: white;
-    padding: 20rpx 12rpx 0rpx;
+    padding: 16rpx 40rpx;
     border-radius: 20rpx;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+    background-color: white;
 
     .identity {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+      position: relative;
       text-align: center;
 
       .avatar {
@@ -30,6 +28,11 @@
       }
 
       .identityText {
+        position: absolute;
+        top: 86rpx;
+        left: 0rpx;
+        right: 0rpx;
+        margin: auto;
         width: 80rpx;
         margin-top: 6rpx;
         font-size: 24rpx;
@@ -42,16 +45,15 @@
     .userRight {
       flex: 1;
       margin-left: 30rpx;
-      padding: 0px 10rpx;
 
-      .uRtop {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+      .topBox {
+        .row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
 
-        .uRtopleft {
           .nickName {
-            max-width: 340rpx;
+            width: 200rpx;
             color: #333;
             font-size: 32rpx;
           }
@@ -59,59 +61,62 @@
           .gradeText {
             margin: 18rpx 0rpx 12rpx;
             font-size: 24rpx;
-            color: #989A9C;
+            color: rgba(0, 0, 0, 0.6);
+
+            .copy {
+              width: 22rpx;
+              height: 22rpx;
+            }
+          }
+
+          .count {
+            margin-top: 10rpx;
+            flex: 1;
+            font-size: 24rpx;
+            color: rgba(0, 0, 0, 0.6);
+            text-align: left;
+
+            .countNum {
+              margin-left: 10rpx;
+            }
+          }
+
+
+
+          .countEnd {
+            text-align: right;
+            border: none;
           }
         }
+      }
+
+      .btmBox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 30rpx;
 
         .follow {
           display: flex;
           align-items: center;
           justify-content: center;
-          width: 140rpx;
+          width: 200rpx;
           height: 52rpx;
           font-size: 24rpx;
           border-radius: 50rpx;
-          border: 1rpx solid #1BC665;
-          color: #1BC665;
+          background-color: #10CA61;
+          color: white;
 
           .character {
-            width: 22rpx;
-            height: 22rpx;
+            width: 24rpx;
+            height: 24rpx;
             margin-right: 6rpx;
           }
         }
 
         .isFans {
-          border: 1rpx solid #969696;
-          color: #969696;
-        }
-      }
-
-      .uRBtm {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        padding: 18rpx 0rpx;
-
-        .count {
-          flex: 1;
-          font-size: 28rpx;
-          color: rgba(0, 0, 0, 0.6);
-          text-align: left;
-
-          .countNum {
-            margin-left: 10rpx;
-          }
-        }
-
-        .countFirst {
-          text-align: left;
-        }
-
-        .countEnd {
-          text-align: right;
-          border: none;
+          background-color: #E2ECFB;
+          color: #333;
         }
       }
     }

pages/personal/index.wxml

@@ -6,42 +6,49 @@
       <view class="identityText">{{userInfo.user.profession}}</view>
     </view>
     <view class="userRight">
-      <view class="uRtop">
-        <view class="uRtopleft">
+      <view class="topBox">
+        <view class="row">
           <view class="nickName textOver">{{userInfo.user.nickName||userInfo.user.eid }}</view>
-          <view class="gradeText textOver">学号：{{userInfo.user.eid}}</view>
-        </view>
-        <view class="follow {{userInfo.like?'isFans':''}}" bindtap="setFans">
-          <image src="{{userInfo.like?'/static/follow_2.png':'/static/follow_1.png'}}" class="character" />
-          <text>{{userInfo.like?'已关注':'关注'}}</text>
-        </view>
-      </view>
-      <view class="uRBtm" wx:if="{{type=='user'}}">
-        <view class="count countFirst">
-          作品<text class="countNum textOver">{{filters.numFilter(userInfo.readAmount)|| 0}}</text>
+          <view class="gradeText textOver">学号：{{userInfo.user.eid}}
+            <image src="/static/copy.png" class="copy"/>
+          </view>
         </view>
-        <view class="count">
-          粉丝<text class="countNum textOver">{{filters.numFilter(userInfo.fansAmount)|| '0'}}</text>
+        <view class="row" wx:if="{{type=='user'}}">
+          <view class="count">
+            作品<text class="countNum textOver">{{filters.numFilter(userInfo.readAmount)|| 0}}</text>
+          </view>
+          <view class="count">
+            粉丝<text class="countNum textOver">{{filters.numFilter(userInfo.fansAmount)|| '0'}}</text>
+          </view>
+          <view class="count countEnd">
+            播放<text class="countNum textOver">{{filters.numFilter(userInfo.playAmount) || 0}}</text>
+          </view>
         </view>
-        <view class="count countEnd">
-          播放<text class="countNum textOver">{{filters.numFilter(userInfo.playAmount) || 0}}</text>
+        <view class="row" wx:if="{{type=='pk'}}">
+          <view class="count">
+            总场<text class="countNum textOver">{{filters.numFilter(userInfo.totalCount)|| 0}}</text>
+          </view>
+          <view class="count">
+            胜<text class="countNum textOver">{{filters.numFilter(userInfo.winCount)|| 0}}</text>
+          </view>
+          <view class="count">
+            平<text class="countNum textOver">{{filters.numFilter(userInfo.flatCount)|| '0'}}</text>
+          </view>
+          <view class="count">
+            负<text class="countNum textOver">{{filters.numFilter(userInfo.failCount) || 0}}</text>
+          </view>
         </view>
       </view>
-      <view class="uRBtm" wx:if="{{type=='pk'}}">
-        <view class="count countFirst">
-          总场<text class="countNum textOver">{{filters.numFilter(userInfo.totalCount)|| 0}}</text>
-        </view>
-        <view class="count countFirst">
-          胜<text class="countNum textOver">{{filters.numFilter(userInfo.winCount)|| 0}}</text>
-        </view>
-        <view class="count">
-          平<text class="countNum textOver">{{filters.numFilter(userInfo.flatCount)|| '0'}}</text>
+      <view class="btmBox">
+        <view class="follow {{userInfo.like?'isFans':''}}" bindtap="setFans">
+          <image src="{{userInfo.like?'/static/follow_2.png':'/static/follow_1.png'}}" class="character" />
+          <text>{{userInfo.like?'已关注':'关注'}}</text>
         </view>
-        <view class="count countEnd">
-          负<text class="countNum textOver">{{filters.numFilter(userInfo.failCount) || 0}}</text>
+        <view class="follow {{userInfo.like?'isFans':''}}" bindtap="setFans">
+          <image src="/static/sx.png" class="character" />
+          <text>发私信</text>
         </view>
       </view>
-
     </view>
   </view>
   <view class="divider">

pages/personal/index.wxss

@@ -8,17 +8,15 @@
 }
 .personalBox .userBox {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  background-color: white;
-  padding: 20rpx 12rpx 0rpx;
+  padding: 16rpx 40rpx;
   border-radius: 20rpx;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  background-color: white;
 }
 .personalBox .userBox .identity {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  position: relative;
   text-align: center;
 }
 .personalBox .userBox .identity .avatar {
@@ -29,6 +27,11 @@
   background-color: #e4e1e1;
 }
 .personalBox .userBox .identity .identityText {
+  position: absolute;
+  top: 86rpx;
+  left: 0rpx;
+  right: 0rpx;
+  margin: auto;
   width: 80rpx;
   margin-top: 6rpx;
   font-size: 24rpx;
@@ -39,66 +42,66 @@
 .personalBox .userBox .userRight {
   flex: 1;
   margin-left: 30rpx;
-  padding: 0px 10rpx;
 }
-.personalBox .userBox .userRight .uRtop {
+.personalBox .userBox .userRight .topBox .row {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
-.personalBox .userBox .userRight .uRtop .uRtopleft .nickName {
-  max-width: 340rpx;
+.personalBox .userBox .userRight .topBox .row .nickName {
+  width: 200rpx;
   color: #333;
   font-size: 32rpx;
 }
-.personalBox .userBox .userRight .uRtop .uRtopleft .gradeText {
+.personalBox .userBox .userRight .topBox .row .gradeText {
   margin: 18rpx 0rpx 12rpx;
   font-size: 24rpx;
-  color: #989A9C;
-}
-.personalBox .userBox .userRight .uRtop .follow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 140rpx;
-  height: 52rpx;
-  font-size: 24rpx;
-  border-radius: 50rpx;
-  border: 1rpx solid #1BC665;
-  color: #1BC665;
+  color: rgba(0, 0, 0, 0.6);
 }
-.personalBox .userBox .userRight .uRtop .follow .character {
+.personalBox .userBox .userRight .topBox .row .gradeText .copy {
   width: 22rpx;
   height: 22rpx;
-  margin-right: 6rpx;
-}
-.personalBox .userBox .userRight .uRtop .isFans {
-  border: 1rpx solid #969696;
-  color: #969696;
 }
-.personalBox .userBox .userRight .uRBtm {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 18rpx 0rpx;
-}
-.personalBox .userBox .userRight .uRBtm .count {
+.personalBox .userBox .userRight .topBox .row .count {
+  margin-top: 10rpx;
   flex: 1;
-  font-size: 28rpx;
+  font-size: 24rpx;
   color: rgba(0, 0, 0, 0.6);
   text-align: left;
 }
-.personalBox .userBox .userRight .uRBtm .count .countNum {
+.personalBox .userBox .userRight .topBox .row .count .countNum {
   margin-left: 10rpx;
 }
-.personalBox .userBox .userRight .uRBtm .countFirst {
-  text-align: left;
-}
-.personalBox .userBox .userRight .uRBtm .countEnd {
+.personalBox .userBox .userRight .topBox .row .countEnd {
   text-align: right;
   border: none;
 }
+.personalBox .userBox .userRight .btmBox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 30rpx;
+}
+.personalBox .userBox .userRight .btmBox .follow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 200rpx;
+  height: 52rpx;
+  font-size: 24rpx;
+  border-radius: 50rpx;
+  background-color: #10CA61;
+  color: white;
+}
+.personalBox .userBox .userRight .btmBox .follow .character {
+  width: 24rpx;
+  height: 24rpx;
+  margin-right: 6rpx;
+}
+.personalBox .userBox .userRight .btmBox .isFans {
+  background-color: #E2ECFB;
+  color: #333;
+}
 .personalBox .divider {
   margin: 36rpx 4rpx;
 }