用户中心样式修改

pages/usercenter/usercenter.js

@@ -90,6 +90,12 @@ Page({
             isLogin:false
         })
     },
+    todo(){
+        wx.showToast({
+          title: '这个功能还没做!',
+          icon: 'none'
+        })
+    },
 
 
     /**

pages/usercenter/usercenter.wxml

@@ -7,42 +7,53 @@
     <view class="userinfo">
         <!-- <button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber" catchtap="getUserProfile" class="login-btn">点此登录</button> -->
         <view wx:if="{{isLogin}}">
-            <view class="userinfo-avatar" bindtap="bindViewTap">
+            <view class="userinfo-avatar">
                 <!-- <open-data type="userAvatarUrl"></open-data> -->
                 <image src="{{headUrl}}"></image>
             </view>
             <!-- <open-data type="userNickName" class="nickname"></open-data> -->
             <text class="nickname">{{userName}}</text>
             <text class="level">{{roleId=="1"?"VIP":""}}</text>
-            <view class="logout" bind:tap="logout">退出登录</view>
+            <view class="logout" bindtap="logout">退出登录</view>
+        </view>
+        <view wx:else>
+            <view class="userinfo-avatar" bindtap="bindViewTap">
+                <image src="https://crisis.zhiweidata.com/static/avatar.png"></image>
+            </view>
+            <text class="nickname">微信用户</text>
+            <text class="level">请登录</text>
         </view>
-        <button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber" class="login-btn" wx:else>点此登录</button>
-
-        
     </view>
 
     <!-- 推荐功能 -->
     <view class="features">
         <text class="title">推荐功能</text>
-        <view class="container">
-            <view class="qwe">
-                <image src="../../image/wechatHL.png" mode="heightFix"></image>
+        <view class="list">
+            <view class="items" bindtap="todo">
+                <image src="../../image/myCrisis.png" mode="aspectFill"></image>
                 <text style="display: block;">我的危机</text>
             </view>
-            <view class="qwe">
-                <image src="../../image/wechatHL.png" mode="heightFix"></image>
+            <view class="items" bindtap="todo">
+                <image src="../../image/myReport.png" mode="aspectFill"></image>
                 <text style="display: block;">我的报告</text>
             </view>
-            <view class="qwe">
-                <image src="../../image/wechatHL.png" mode="heightFix"></image>
+            <view class="items" bindtap="todo">
+                <image src="../../image/auth.png" mode="aspectFill"></image>
                 <text style="display: block;">账号权限</text>
             </view>
-            <view class="qwe">
-                <image src="../../image/wechatHL.png" mode="heightFix"></image>
+            <view class="items" bindtap="todo">
+                <image src="../../image/account.png" mode="aspectFill"></image>
                 <text style="display: block;">账号管理</text>
             </view>
         </view>
     </view>
+
+    <view wx:if="{{isLogin}}">
+        <button class="logout-btn" bindtap="logout" style="color: red;">退出登录</button>
+    </view>
+    <view wx:else>
+        <button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber" class="login-btn">点此登录</button>
+    </view>
 </view>
 
 

pages/usercenter/usercenter.wxss

@@ -6,7 +6,8 @@
 .top{
     width: 100%;
     height: 250rpx;
-    background-color: #00a0e8;
+    /* background-color: #025FEA; */
+    background-image: linear-gradient(#025FEA 70%,#DAE5F5 100%);
 }
 .userinfo {
     position: relative;
@@ -48,30 +49,38 @@
     color: #999;
 }
 
-
+/* 推荐功能 */
 .features{
-    position: relative;
     width: 700rpx;
-    height: 300rpx;
-    margin: 150rpx auto;
+    height: 250rpx;
+    margin: 130rpx auto;
     background-color: #fff;
     border-radius: 5px;
     box-shadow: 0px 5px 5px #e8e8e8;
 }
 
 .features .title{
-    position: absolute; 
-    left: 30rpx;
-    top: 30rpx;
+    display: flex;
+    justify-content: space-between;
+    height: 80rpx;
+    line-height: 80rpx;
+    font-size: 30rpx;
+    font-weight:bold;
+    border-bottom: 1px solid #e8e8e8;
+    padding: 0 30rpx;
 }
-.features .container{
-    display: flex; 
-    flex-direction: row;
+.features .list{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 25rpx;
+    height: 160rpx;
 }
-.qwe{
-    text-align: center;
-    width: 25vh;
+.features .list .items{
+    align-items: center;
 }
-.container image{
-    height: 7vh;
+.features .list image{
+    height: 80rpx;
+    width: 80rpx;
+    align-items: center;
 }
\ No newline at end of file