lhf

app.json

@@ -62,7 +62,8 @@
     "van-cell": "@vant/weapp/cell/index",
     "van-cell-group": "@vant/weapp/cell-group/index",
     "van-tab": "@vant/weapp/tab/index",
-    "van-tabs": "@vant/weapp/tabs/index"
+    "van-tabs": "@vant/weapp/tabs/index",
+    "van-image": "@vant/weapp/image/index"
   
     
   }

pages/mine/index.js

@@ -2,6 +2,17 @@
 
 Page({
     data: {
+        statusBarHeight:0
+    },
+    onLoad:function(){
+        wx.getSystemInfo({
+          success:(res)=>{
+              let statusBarHeight = res.statusBarHeight
+              this.setData({
+                statusBarHeight:statusBarHeight
+              })
+          }
+        })
     },
     onShow() {
         this.getTabBar().init();

pages/mine/index.json

@@ -1,5 +1,6 @@
 {
     "usingComponents": {
         
-    }
+    },
+    "navigationStyle": "custom"
 }

pages/mine/index.wxml

@@ -1,21 +1,23 @@
-<view class="mine_title">
-    <view class="title_left">
-        <view style="font-size:40rpx">胆怯的麦粒</view>
-        <view style="font-size:24rpx; color: #9b9999;"> 欢迎您使⽤硕为思平台</view>
+<view style="background: url(/images/img_mybg.png); background-size:cover;">
+    <!-- style="margin-top:{{statusBarHeight*2}}rpx" -->
+    <view class="mine_title">
+        <view class="title_left">
+            <view style="font-size:48rpx;font-weight:600;">胆怯的麦粒</view>
+            <view style="font-size:24rpx; color: #9b9999;margin-top: 24rpx;"> 欢迎您使⽤硕为思平台</view>
+        </view>
+        <view class="title_right">
+            <van-image round width="128rpx" height="128rpx" fit='cover' src="https://img.yzcdn.cn/vant/cat.jpeg" />
+        </view>
     </view>
-    <view class="title_right">
-        <van-image round width="200rpx" height="200rpx" fit='cover' src="https://img.yzcdn.cn/vant/cat.jpeg" />
+    <view class="content">
+        <van-cell title="账号绑定" is-link icon="/images/my_con1.png" border="{{false}}" title-class='cell_label' />
+        <van-cell title="帮助中心" is-link icon="/images/my_con2.png" border="{{false}}" title-class='cell_label' />
+        <van-cell title="我的报告" is-link icon="/images/my_con3.png" border="{{false}}" title-class='cell_label' />
+        <van-cell title="隐私政策" is-link icon="/images/my_con4.png" border="{{false}}" title-class='cell_label' />
+        <van-cell title="关于我们" is-link icon="/images/my_con5.png" border="{{false}}" title-class='cell_label' />
     </view>
 
-</view>
-<view class="content">
-        <van-cell title="账号绑定" is-link icon="location-o" border="{{false}}" title-class='cell_label' />
-        <van-cell title="帮助中心" is-link icon="location-o" border="{{false}}" title-class='cell_label'/>
-        <van-cell title="我的报告" is-link icon="location-o" border="{{false}}" title-class='cell_label'/>
-        <van-cell title="隐私政策" is-link icon="location-o" border="{{false}}" title-class='cell_label'/>
-        <van-cell title="关于我们" is-link icon="location-o" border="{{false}}" title-class='cell_label' />
-</view>
-
-<view class="quit">
-    <van-button type="primary" block color='#d9edff' custom-style='btn_style'>退出登录</van-button>
+    <view class="quit">
+        <button class="btns">退出登录</button>
+    </view>
 </view>

pages/mine/index.wxss

@@ -1,23 +1,60 @@
 .container {
     width: 100%;
-    /* height: 330px; */
+    height: 330px;
 }
 .mine_title{
-    height: 400rpx;
+    height: 360rpx;
     width: 100%;
+}
+.mine_title .title_left{
+    float: left;
+    height: 128rpx;
+    margin-left: 32rpx;
+    margin-top: 224rpx;
+}
+.mine_title .title_right{
+    float: right;
+    margin-right: 32rpx;
+    margin-top: 208rpx;
+    height: 128rpx;
+}
+.quit{
+    margin-top:160rpx;
     display: flex;
-    justify-content:space-around;
-    align-items: center;
+    align-content: space-between;
+}
+.btns{
+    color: #0084FF;
+    border:2rpx solid #99CEFF;
+    display: inline-block;
+    width: 688rpx;
+    font-size: 28rpx;
+    height: 88rpx;
+    line-height:88rpx ;
+    background: #d9edff;
+}
+.content{
+    margin-top: 136rpx;
 }
 .cell_label{
-    margin-left: 20rpx;
     font-size: 32rpx;
-    font-weight: 600;
+    margin-left: 36rpx;
+    margin-top: 20rpx;
 }
-.quit{
-    margin-top:192rpx;
+.content .van-cell{
+    background: transparent;
+    height: 128rpx;
+}
+.content .van-icon__image{
+    width: 48rpx;
+    height: 48rpx;
+    position: relative;
+    left: 32rpx;
+    top: 50%;
+    transform: translateX(-50%);
 }
-.btn_style{
-    color: black;
-    border:4rpx solid #99ceff;
+.content .van-icon-arrow{
+   position: relative;
+   top: 50%;
+   transform: translateX(-50%);
 }