开发我的页面新样式

app.json

@@ -11,7 +11,6 @@
     "pages/ranking/index",
     "pages/userWorks/index",
     "pages/works/index",
-    "pages/collection/index",
     "pages/personal/index",
     "pages/childClassify/index",
     "pages/reading/index",

pages/my/index.less

@@ -2,115 +2,115 @@
   padding: 0rpx 20rpx 30rpx;
 
   .userBox {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
     background-color: white;
-    padding: 20rpx 12rpx 0rpx;
+    padding: 20rpx 20rpx 0rpx;
     border-radius: 20rpx;
 
-    .identity {
+    .above {
       display: flex;
-      flex-direction: column;
       align-items: center;
-      text-align: center;
+      justify-content: space-between;
+      padding-bottom: 30rpx;
+      border-bottom: 1rpx solid #D6D6D6;
 
-      .avatar {
-        width: 106rpx;
-        height: 106rpx;
-        border-radius: 50%;
+      .identity {
         position: relative;
-      }
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
 
-      .identityText {
-        width: 80rpx;
-        margin-top: 6rpx;
-        font-size: 24rpx;
-        color: white;
-        background-color: #10CA61;
-        border-radius: 25rpx;
-      }
-    }
+        .avatar {
+          width: 106rpx;
+          height: 106rpx;
+          border-radius: 50%;
+          position: relative;
+        }
 
-    .userRight {
-      flex: 1;
-      margin-left: 30rpx;
-      padding: 0px 10rpx;
+        .identityText {
+          position: absolute;
+          bottom: -10rpx;
+          width: 80rpx;
+          font-size: 24rpx;
+          color: white;
+          background-color: #10CA61;
+          border-radius: 25rpx;
+        }
+      }
 
-      .uRtop {
-        display: flex;
-        justify-content: space-between;
+      .userRight {
+        flex: 1;
+        margin-left: 40rpx;
+        padding: 0px 10rpx;
 
-        .uRtopleft {
-          .nickName {
-            max-width: 340rpx;
-            color: #333;
-            font-size: 32rpx;
+        .uRtop {
+          display: flex;
+          justify-content: space-between;
+
+          .uRtopleft {
+            .nickName {
+              margin: 10rpx 0rpx 18rpx;
+              max-width: 340rpx;
+              color: #333;
+              font-size: 32rpx;
+            }
+
+            .gradeText {
+              font-size: 24rpx;
+              color: #989A9C;
+            }
           }
 
-          .gradeText {
-            margin: 18rpx 0rpx 12rpx;
-            font-size: 24rpx;
-            color: #989A9C;
+          .uRtopRight {
+            display: flex;
+            align-items: center;
+
+            .edit {
+              width: 22rpx;
+              height: 28rpx;
+            }
+
+            text {
+              margin: 0px 10rpx;
+              font-size: 24rpx;
+              color: #666;
+            }
           }
         }
 
-        .uRtopRight {
+        .uRBtm {
           display: flex;
           align-items: center;
-
-          .edit {
-            width: 22rpx;
-            height: 28rpx;
+          justify-content: space-between;
+          border-top: 1px solid rgba(0, 0, 0, 0.1);
+          padding: 18rpx 0rpx;
+
+          .count {
+            width: 33%;
+            font-size: 28rpx;
+            color: rgba(0, 0, 0, 0.6);
+            border-right: 1px solid rgba(51, 51, 51, 0.3);
+            text-align: center;
+
+            .countNum {
+              margin-left: 10rpx;
+            }
           }
 
-          text {
-            margin: 0px 10rpx;
-            font-size: 24rpx;
-            color: #666;
+          .countFirst {
+            text-align: left;
           }
-        }
-      }
 
-      .uRBtm {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        padding: 18rpx 0rpx;
-
-        .count {
-          width: 33%;
-          font-size: 28rpx;
-          color: rgba(0, 0, 0, 0.6);
-          border-right: 1px solid rgba(51, 51, 51, 0.3);
-          text-align: center;
-
-          .countNum {
-            margin-left: 10rpx;
+          .countEnd {
+            text-align: right;
+            border: none;
           }
         }
-
-        .countFirst {
-          text-align: left;
-        }
-
-        .countEnd {
-          text-align: right;
-          border: none;
-        }
       }
     }
   }
 
-  .iosVip {
-    margin: 4rpx 0px 0px 6rpx;
-    font-size: 20rpx;
-    color: #333;
-  }
-
-  .sectionBoxs {
-    margin-top: 20rpx;
+  .below {
     padding: 20rpx 30rpx;
     display: flex;
     align-items: center;
@@ -131,14 +131,14 @@
 
       .title {
         margin-top: 8rpx;
-        font-size: 28rpx;
+        font-size: 22rpx;
         color: #333;
       }
 
-      /* .noticeTips {
+      .noticeTips {
         position: absolute;
-        right: -2rpx;
-        top: -6rpx;
+        right: 10rpx;
+        top: -8rpx;
         width: 34rpx;
         padding: 4rpx 0rpx;
         border-radius: 40rpx;
@@ -146,7 +146,7 @@
         font-size: 18rpx;
         text-align: center;
         background-color: #FF0000;
-      } */
+      }
     }
 
     .contactBtn {
@@ -157,8 +157,16 @@
     }
   }
 
+  .iosVip {
+    margin: 4rpx 0px 0px 6rpx;
+    font-size: 20rpx;
+    color: #333;
+  }
+
+
+
   .medalBox {
-    margin-top: 20rpx;
+    margin: 30rpx 0rpx;
     padding: 20rpx 30rpx;
     background-color: white;
     border-radius: 20rpx;

pages/my/index.wxml

@@ -3,64 +3,61 @@
 <view class="container seat">
   <!-- 用户信息 -->
   <view class="userBox">
-    <view class="identity">
-      <image class='avatar' src='{{ userInfo.user.avatar}}'></image>
-      <view class="identityText">{{ userInfo.user.profession}}</view>
-    </view>
-    <view class="userRight">
-      <view class="uRtop">
-        <view class="uRtopleft">
-          <view class="nickName textOver">{{userInfo.user.nickName||'请输入昵称' }}</view>
-          <view class="gradeText textOver">学号：{{userInfo.user.eid}}</view>
-        </view>
-        <view class="uRtopRight" bindtap="jump" data-url="/pages/editUser/index">
-          <image class="edit" src="/static/edit_new.png" mode="" />
-          <text>编辑</text>
-        </view>
+    <view class="above">
+      <view class="identity">
+        <image class='avatar' src='{{ userInfo.user.avatar}}'></image>
+        <view class="identityText">{{ userInfo.user.profession}}</view>
       </view>
-      <view class="uRBtm">
-        <view class="count countFirst">
-          作品<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 class="userRight">
+        <view class="uRtop">
+          <view class="uRtopleft">
+            <view class="nickName textOver">{{userInfo.user.nickName||'请输入昵称' }}</view>
+            <view class="gradeText textOver">学号：{{userInfo.user.eid}}</view>
+          </view>
+          <view class="uRtopRight" bindtap="jump" data-url="/pages/editUser/index">
+            <image class="edit" src="/static/edit_new.png" mode="" />
+            <text>编辑</text>
+          </view>
         </view>
+        <!-- <view class="uRBtm">
+          <view class="count countFirst">
+            作品<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>
     </view>
+    <view class="below sectionBoxs">
+      <view class="sBox" bindtap='jump' data-url="/pages/follow/index">
+        <image class="img" src="/static/concern.png" mode="" />
+        <text class="title">朋友 {{1234}}</text>
+      </view>
+      <view class="sBox" bindtap='jump' data-url="/pages/userWorks/index">
+        <image class="img" src="/static/work.png" mode="" />
+        <text class="title">作品 {{1234}}</text>
+      </view>
+      <view class="sBox" bindtap='jump' data-url="/pages/notice/index">
+        <view class="noticeTips">31</view>
+        <image class="img" src="/static/message.png" mode="" />
+        <text class="title">消息通知</text>
+      </view>
+      <button class="resetBtn contactBtn" open-type="contact" plain="true">
+        <view class="sBox">
+          <image class="img" src="/static/contact.png" mode="" />
+          <text class="title">联系客服</text>
+        </view>
+      </button>
+    </view>
   </view>
   <!-- ios会员展示到期时间 -->
   <view class="iosVip" wx:if="{{isIos&&vipTime}}">
     会员至：{{filters.formatDate(vipTime,4)}}
   </view>
-  <!-- 跳转菜单 -->
-  <view class="sectionBoxs">
-    <view class="sBox" bindtap='jump' data-url="/pages/userWorks/index">
-      <image class="img" src="/static/work.png" mode="" />
-      <text class="title">我的作品</text>
-    </view>
-    <view class="sBox" bindtap='jump' data-url="/pages/follow/index">
-      <image class="img" src="/static/concern.png" mode="" />
-      <text class="title">我的关注</text>
-    </view>
-    <view class="sBox" bindtap='jump' data-url="/pages/collection/index">
-      <image class="img" src="/static/collect.png" mode="" />
-      <text class="title">我的收藏</text>
-    </view>
-    <view class="sBox" bindtap='jump' data-url="/pages/notice/index">
-      <!-- <view class="noticeTips">31</view> -->
-      <image class="img" src="/static/message.png" mode="" />
-      <text class="title">消息通知</text>
-    </view>
-    <button class="resetBtn contactBtn" open-type="contact" plain="true">
-      <view class="sBox">
-        <image class="img" src="/static/contact.png" mode="" />
-        <text class="title">联系客服</text>
-      </view>
-    </button>
-  </view>
   <!-- 勋章 -->
   <view class="medalBox">
     <view class="header">

pages/my/index.wxss

@@ -2,96 +2,96 @@
   padding: 0rpx 20rpx 30rpx;
 }
 .container .userBox {
+  background-color: white;
+  padding: 20rpx 20rpx 0rpx;
+  border-radius: 20rpx;
+}
+.container .userBox .above {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: white;
-  padding: 20rpx 12rpx 0rpx;
-  border-radius: 20rpx;
+  padding-bottom: 30rpx;
+  border-bottom: 1rpx solid #D6D6D6;
 }
-.container .userBox .identity {
+.container .userBox .above .identity {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
 }
-.container .userBox .identity .avatar {
+.container .userBox .above .identity .avatar {
   width: 106rpx;
   height: 106rpx;
   border-radius: 50%;
   position: relative;
 }
-.container .userBox .identity .identityText {
+.container .userBox .above .identity .identityText {
+  position: absolute;
+  bottom: -10rpx;
   width: 80rpx;
-  margin-top: 6rpx;
   font-size: 24rpx;
   color: white;
   background-color: #10CA61;
   border-radius: 25rpx;
 }
-.container .userBox .userRight {
+.container .userBox .above .userRight {
   flex: 1;
-  margin-left: 30rpx;
+  margin-left: 40rpx;
   padding: 0px 10rpx;
 }
-.container .userBox .userRight .uRtop {
+.container .userBox .above .userRight .uRtop {
   display: flex;
   justify-content: space-between;
 }
-.container .userBox .userRight .uRtop .uRtopleft .nickName {
+.container .userBox .above .userRight .uRtop .uRtopleft .nickName {
+  margin: 10rpx 0rpx 18rpx;
   max-width: 340rpx;
   color: #333;
   font-size: 32rpx;
 }
-.container .userBox .userRight .uRtop .uRtopleft .gradeText {
-  margin: 18rpx 0rpx 12rpx;
+.container .userBox .above .userRight .uRtop .uRtopleft .gradeText {
   font-size: 24rpx;
   color: #989A9C;
 }
-.container .userBox .userRight .uRtop .uRtopRight {
+.container .userBox .above .userRight .uRtop .uRtopRight {
   display: flex;
   align-items: center;
 }
-.container .userBox .userRight .uRtop .uRtopRight .edit {
+.container .userBox .above .userRight .uRtop .uRtopRight .edit {
   width: 22rpx;
   height: 28rpx;
 }
-.container .userBox .userRight .uRtop .uRtopRight text {
+.container .userBox .above .userRight .uRtop .uRtopRight text {
   margin: 0px 10rpx;
   font-size: 24rpx;
   color: #666;
 }
-.container .userBox .userRight .uRBtm {
+.container .userBox .above .userRight .uRBtm {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding: 18rpx 0rpx;
 }
-.container .userBox .userRight .uRBtm .count {
+.container .userBox .above .userRight .uRBtm .count {
   width: 33%;
   font-size: 28rpx;
   color: rgba(0, 0, 0, 0.6);
   border-right: 1px solid rgba(51, 51, 51, 0.3);
   text-align: center;
 }
-.container .userBox .userRight .uRBtm .count .countNum {
+.container .userBox .above .userRight .uRBtm .count .countNum {
   margin-left: 10rpx;
 }
-.container .userBox .userRight .uRBtm .countFirst {
+.container .userBox .above .userRight .uRBtm .countFirst {
   text-align: left;
 }
-.container .userBox .userRight .uRBtm .countEnd {
+.container .userBox .above .userRight .uRBtm .countEnd {
   text-align: right;
   border: none;
 }
-.container .iosVip {
-  margin: 4rpx 0px 0px 6rpx;
-  font-size: 20rpx;
-  color: #333;
-}
-.container .sectionBoxs {
-  margin-top: 20rpx;
+.container .below {
   padding: 20rpx 30rpx;
   display: flex;
   align-items: center;
@@ -99,41 +99,46 @@
   background-color: white;
   border-radius: 20rpx;
 }
-.container .sectionBoxs .sBox {
+.container .below .sBox {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  /* .noticeTips {
-        position: absolute;
-        right: -2rpx;
-        top: -6rpx;
-        width: 34rpx;
-        padding: 4rpx 0rpx;
-        border-radius: 40rpx;
-        color: white;
-        font-size: 18rpx;
-        text-align: center;
-        background-color: #FF0000;
-      } */
-}
-.container .sectionBoxs .sBox .img {
+}
+.container .below .sBox .img {
   width: 69rpx;
   height: 69rpx;
 }
-.container .sectionBoxs .sBox .title {
+.container .below .sBox .title {
   margin-top: 8rpx;
-  font-size: 28rpx;
+  font-size: 22rpx;
   color: #333;
 }
-.container .sectionBoxs .contactBtn {
+.container .below .sBox .noticeTips {
+  position: absolute;
+  right: 10rpx;
+  top: -8rpx;
+  width: 34rpx;
+  padding: 4rpx 0rpx;
+  border-radius: 40rpx;
+  color: white;
+  font-size: 18rpx;
+  text-align: center;
+  background-color: #FF0000;
+}
+.container .below .contactBtn {
   border: none;
   padding: 0rpx;
   line-height: normal;
   margin: 0;
 }
+.container .iosVip {
+  margin: 4rpx 0px 0px 6rpx;
+  font-size: 20rpx;
+  color: #333;
+}
 .container .medalBox {
-  margin-top: 20rpx;
+  margin: 30rpx 0rpx;
   padding: 20rpx 30rpx;
   background-color: white;
   border-radius: 20rpx;