Просмотр исходного кода

user update

我的 界面排版
获取头像的功能好像出了点问题emmm
然后数据库改下搞个正式一点的组织名(我这里显示的是12)
mulioid 4 лет назад
Родитель
Сommit
76ec54ed52

+ 1 - 1
miniprogram/app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/user/user",
     "pages/main/main",
     "pages/message/message",
     "pages/search/search",
@@ -10,7 +11,6 @@
     "pages/publisherPage/publisherPage",
     "pages/publisherLogin/publisherLogin",
     "pages/activityPublish/activityPublish",
-    "pages/user/user",
     "pages/myQuestion/myQuestion",
     "pages/receivedQuestion/receivedQuestion",
     "pages/publisherInfoChange/publisherInfoChange",

BIN
miniprogram/images/user/about.png


BIN
miniprogram/images/user/feedback.png


BIN
miniprogram/images/user/follow.png


BIN
miniprogram/images/user/like.png


BIN
miniprogram/images/user/question.png


BIN
miniprogram/images/user/setting.png


+ 24 - 38
miniprogram/pages/user/user.wxml

@@ -1,5 +1,5 @@
 <!--为使用者-我的页面-->
-<view class="card block-background-color">
+<view class="card">
   <cover-image class="avatar" src="{{hasUserInfo ? userInfo.avatarUrl : '/images/user/user.png'}}"></cover-image>
   <view wx:if="{{hasUserInfo}}" class="nickname primary-text">{{userInfo.nickName}}</view>
   <view wx:else class="nickname"><button class="block-background-color" size="mini" open-type="getUserInfo"
@@ -7,66 +7,52 @@
   <view class="location secondary-text">{{publisherId.length == 0 ? '尚未加入任何社团组织' : publisherName}}</view>
 </view>
 
-<view wx:if="{{hasUserInfo}}">
-  <view class="gap"></view>
+<view class="mid" wx:if="{{hasUserInfo}}">
 
   <view class="btn block-background-color" hover-class="btn-hover" bindtap="myFavor">
-    <image class="btn-icon" mode="aspectFit" src="/images/user/follow.png"></image>
+    <image class="btn-icon" mode="aspectFit" src="/images/user/like.png"></image>
     <view class="btn-text primary-text">我的收藏</view>
-    <view class="btn-arrow secondary-text">></view>
   </view>
 
-  <view class="line"></view>
 
   <view class="btn block-background-color" hover-class="btn-hover" bindtap="myFollow">
     <image class="btn-icon" mode="aspectFit" src="/images/user/follow.png"></image>
     <view class="btn-text primary-text">我的关注</view>
-    <view class="btn-arrow secondary-text">></view>
   </view>
 
-  <view class="line"></view>
 
   <view class="btn block-background-color" hover-class="btn-hover" bindtap="myQuestion">
     <image class="btn-icon" mode="aspectFit" src="/images/user/question.png"></image>
     <view class="btn-text primary-text">我的提问</view>
-    <view class="btn-arrow secondary-text">></view>
   </view>
 
-  <view class="gap"></view>
 
-  <view class="btn block-background-color" hover-class="btn-hover" bindtap="setting">
-    <image class="btn-icon" mode="aspectFit" src="/images/user/setting.png"></image>
-    <view class="btn-text primary-text">设置</view>
-    <view class="btn-arrow secondary-text">></view>
-  </view>
 
-  <view class="line"></view>
+  <view class="bottom">
+    <view class="btn" bindtap="setting">
+      <image class="btn-icon" mode="aspectFit" src="/images/user/setting.png"></image>
+      <view>设置</view>
+    </view>
 
-  <view class="btn block-background-color" hover-class="btn-hover" bindtap="aboutUs">
-    <image class="btn-icon" mode="aspectFit" src="/images/user/about.png"></image>
-    <view class="btn-text primary-text">关于我们</view>
-    <view class="btn-arrow secondary-text">></view>
-  </view>
+    <view class="btn" bindtap="aboutUs">
+      <image class="btn-icon" mode="aspectFit" src="/images/user/about.png"></image>
+     <view>关于我们</view>
+    </view>
 
-  <view class="line"></view>
-
-  <view class="btn block-background-color" hover-class="btn-hover" bindtap="opinion">
-    <image class="btn-icon" mode="aspectFit" src="/images/user/feedback.png"></image>
-    <view class="btn-text primary-text">意见反馈</view>
-    <view class="btn-arrow secondary-text">></view>
+    <view class="btn" bindtap="opinion">
+      <image class="btn-icon" mode="aspectFit" src="/images/user/feedback.png"></image>
+      <view>意见反馈</view>
+    </view>
   </view>
+</view>
 
-  <view class="gap"></view>
 
-  <view wx:if="{{publisherId.length == 0}}" class="btn block-background-color" hover-class="btn-hover"
+
+<view wx:if="{{publisherId.length == 0}}" class="publisher primary-background-color" hover-class="btn-hover"
     bindtap="publisherLogin">
-    <image class="btn-icon" mode="aspectFit" src="/images/user/settle.png"></image>
-    <view class="btn-text primary-text">社团/组织入驻</view>
-    <view class="btn-arrow secondary-text">></view>
-  </view>
-  <view wx:else class="btn block-background-color" hover-class="btn-hover" bindtap="publisherPage">
-    <image class="btn-icon" mode="aspectFit" src="/images/user/settle.png"></image>
-    <view class="btn-text primary-text">社团/组织管理</view>
-    <view class="btn-arrow secondary-text">></view>
+    <text class="white-text-color">社团\n组织\n入驻</text>
   </view>
-</view>
+  <view wx:else class="publisher primary-background-color" hover-class="btn-hover" bindtap="publisherPage">
+    <text class="white-text-color">社团\n组织\n管理</text>
+</view>
+

+ 47 - 35
miniprogram/pages/user/user.wxss

@@ -1,43 +1,39 @@
 /* components/user/user.wxss */
 .card {
-  height: 300rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 150rpx;
 }
 
 .avatar {
-  position: absolute;
-  top: 50rpx;
-  left: 50rpx;
   height: 200rpx;
   width: 200rpx;
-  border-radius: 20%;
+  border-radius: 100%;
+  margin-bottom: 20rpx;
 }
 
 .nickname {
-  position: absolute;
-  font-size: 50rpx;
-  line-height: 50rpx;
-  top: 100rpx;
-  left: 300rpx;
+  font-size: 40rpx;
+  margin-bottom: 10rpx;
 }
 
 .location {
-  position: absolute;
-  font-size: 27rpx;
-  line-height: 30rpx;
-  top: 175rpx;
-  left: 300rpx;
+  font-size: 30rpx;
 }
 
-.gap {
-  height: 20rpx;
-}
-
-.line {
-  height: 5rpx;
+.mid{
+  margin-top: 40rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .btn {
-  height: 100rpx;
+  display: flex;
+  flex-direction: row;
+  margin-top: 20rpx;
+  align-items: center;
 }
 
 .btn-hover {
@@ -45,25 +41,41 @@
 }
 
 .btn-icon {
-  position: relative;
-  float: left;
-  top: 28rpx;
-  left: 35rpx;
   height: 44rpx;
   width: 44rpx;
+  margin-right: 10rpx;
 }
 
 .btn-text {
-  position: relative;
-  float: left;
-  left: 50rpx;
-  line-height: 100rpx;
   font-size: 35rpx;
 }
 
-.btn-arrow {
-  position: relative;
-  float: right;
-  right: 40rpx;
-  line-height: 100rpx;
+
+.publisher{
+  position: absolute;
+  top: 730rpx;
+  height: 180rpx;
+  width: 15%;
+  border-radius: 20rpx;
+  left: -20rpx;
+  display: flex;
+  align-items: center;
+  padding-left: 40rpx;
+  font-size: 35rpx;
 }
+
+
+
+.bottom {
+  bottom: 0rpx;
+  position: absolute;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  z-index: 100;
+  background-color: #ffffff;
+  box-shadow: 0rpx -5rpx 15rpx 0rpx rgba(0, 0, 0, 0.16) inset;
+  font-size: 24rpx;
+  padding-bottom: 20rpx;
+}