no message

pages/my/index.vue

@@ -1,22 +1,222 @@
 <template>
-  <view>
+  <view class="my-box">
+    <my-nav @navHeight="setNavHeight"></my-nav>
+    <view class="my-data" :style="{'height':'calc(100% - '+navHeight+'rpx)'}">
+      <scroll-view :scroll-y="true" :style="{'height':'calc(100% - '+(navHeight+50)+'rpx)'}">
+        <view class="my-content">
+          <view class="content-basic">
+            <view class="basic-left">
+              <image class="basic-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
+            </view>
+            <view class="basic-right">
+              <view class="basic-name">
+                <view class="name-text sys-color-black-0 sys-weight-600">出江湖救急</view>
+                <view class="name-vip">
+                  <image class="name-img" src="/static/img/my/svip.png" mode="heightFix"></image>
+                </view>
+                <view class="name-ok name-no">
+                  <image class="name-img" src="/static/img/my/open.png" mode="heightFix"></image>
+                </view>
+              </view>
+              <view class="basic-signature sys-color-gray-9">
+                都能拿到你
+              </view>
+              <view class="basic-wallet">
+                <view class="wallet-item">
+                  <image class="wallet-img" src="/static/img/my/wallet.png" mode="aspectFill"></image>
+                  <view class="wallet-text sys-color-gray-6">钱包</view>
+                </view>
+                <view class="wallet-item">
+                  <view class="wallet-text sys-color-gray-6">波点兑换</view>
+                  <image class="exchange-img" src="/static/img/my/right.png" mode="aspectFill"></image>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="content-statistics">
+            <view class="statistics-item">
+              <view class="statistics-num sys-color-black sys-weight-600">431
+                <view class="statistics-dot sys-color-white">1</view>
+              </view>
+              <view class="statistics-text sys-color-gray-9 sys-weight-400">礼物墙</view>
+            </view>
+            <view class="statistics-item">
+              <view class="statistics-num sys-color-black sys-weight-600">431
+                <view class="statistics-dot sys-color-white">1</view>
+              </view>
+              <view class="statistics-text sys-color-gray-9 sys-weight-400">心动足迹</view>
+            </view>
+            <view class="statistics-item">
+              <view class="statistics-num sys-color-black sys-weight-600">431
+                <view class="statistics-dot sys-color-white">1</view>
+              </view>
+              <view class="statistics-text sys-color-gray-9 sys-weight-400">访客</view>
+
+            </view>
+            <view class="statistics-item">
+              <view class="statistics-num sys-color-black sys-weight-600">
+                165
+                <view class="statistics-dot sys-color-white">..</view>
+              </view>
+              <view class="statistics-text sys-color-gray-9 sys-weight-400">谁喜欢我</view>
+
+            </view>
+
+          </view>
+        </view>
+      </scroll-view>
+    </view>
 
   </view>
 </template>
 
 <script>
+import MyNav from "@/pages/my/model/my-nav";
 export default {
+  components: {MyNav},
   data() {
     return {
-
+      navHeight:0
     }
   },
   methods: {
-
+    setNavHeight(navHeight){
+      this.navHeight=navHeight
+    }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.my-box{
+  background-image: url("/static/img/my/bg.png");
+  background-repeat: no-repeat;//不平铺
+  background-position: top center;//居中
+  background-size: contain;//随容器大小
+  height: calc(100vh - 50px - env(safe-area-inset-bottom));
+  .my-data{
+    background-color: #fff;
+    border-radius: 30rpx 30rpx 0 0;
+    padding: 40rpx 32rpx 10rpx 32rpx;
+    .my-content{
+      .content-basic{
+        display: flex;
+        justify-content: space-between;
+        height: 168rpx;
+        .basic-left{
+          .basic-img{
+            border-radius: 50%;
+            width: 168rpx;
+            height: 168rpx;
+          }
+        }
+        .basic-right{
+          width: calc(100% - 168rpx);
+          padding-left: 24rpx;
+          .basic-name{
+            display: flex;
+            justify-content: flex-start;
+            height: 56rpx;
+            align-items: center;
+            .name-text{
+              font-size: 40rpx;
+              line-height: 56rpx;
+            }
+            .name-img{
+              height: 28rpx;
+            }
+            .name-vip{
+              margin-left: 8rpx;
+            }
+            .name-ok{
+              margin-left: 8rpx;
+            }
+            .name-no{
+              filter: grayscale(100%);
+            }
+          }
+          .basic-signature{
+            width: 100%;
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            font-size: 28rpx;
+            height: 40rpx;
+            line-height: 40rpx;
+          }
+          .basic-wallet{
+            display: flex;
+            justify-content: flex-start;
+            margin-top: 24rpx;
+            .wallet-item{
+              padding: 0 16rpx;
+              height: 40rpx;
+              background: #F2F2F2;
+              border-radius: 200rpx;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              margin-right: 20rpx;
+              .wallet-text{
+                height: 40rpx;
+                line-height: 40rpx;
+                font-size: 26rpx;
+              }
+              .wallet-img{
+                width: 40rpx;
+                height: 40rpx;
+                margin-right: 4rpx;
+              }
+              .exchange-img{
+                width: 24rpx;
+                height: 24rpx;
+                margin-left: 4rpx;
+              }
+
+            }
+          }
+
+        }
+
+      }
+      .content-statistics{
+        margin-top: 24rpx;
+        padding: 16rpx 40rpx 0 40rpx;
+        display: flex;
+        justify-content: space-between;
+        .statistics-item{
+          .statistics-num{
+            position: relative;
+            display: flex;
+            justify-content: center;
+            font-size: 40rpx;
+            .statistics-dot{
+              position: absolute;
+              top: -16rpx;
+              right: -12rpx;
+              border-radius: 200rpx;
+              width: 24rpx;
+              height: 24rpx;
+              line-height: 24rpx;
+              text-align: center;
+              font-size: 18rpx;
+              background-color: #ED301D;
+            }
+          }
+          .statistics-text{
+            margin-top: 8rpx;
+            font-size: 26rpx;
+          }
+
+
+        }
+      }
+    }
+
+  }
+
+
+}
 
 </style>

pages/my/model/my-nav.vue

@@ -1,27 +1,17 @@
 <template>
   <view class="">
-    <view class="header"  :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px'}]">
+    <view class="header"  :style="[{'height': customBarH + 'rpx', 'padding-top': statusBarH + 'px'}]">
       <view class="header-left">
-        <view class="left-text sys-color-black-0 sys-weight-600">筛选</view>
-        <view class="left-img">
-          <image class="down-img" src="/static/img/common/down.png" mode="aspectFill"></image>
-        </view>
-      </view>
-      <view class="header-center">
-        <view class="center-list">
-          <view class="center-item sys-weight-600" @click="setTabNum(0)" :class="{'sys-color-black':tabNum===0,'sys-color-gray-9':tabNum!==0,}">发现</view>
-          <view class="center-item sys-weight-600" @click="setTabNum(1)"  :class="{'sys-color-black':tabNum===1,'sys-color-gray-9':tabNum!==1,}">附近</view>
-          <view class="center-item sys-weight-600" @click="setTabNum(2)"  :class="{'sys-color-black':tabNum===2,'sys-color-gray-9':tabNum!==2,}">匹配</view>
-        </view>
-        <view class="center-bg" :style="{'left':(tabNum*122)+'rpx'}"></view>
+        <image class="left-img" src="/static/img/my/like.png" mode="heightFix"></image>
       </view>
+
       <view class="header-right">
-        <image class="right-img" src="/static/img/index/pull-back.png" mode="aspectFill"></image>
-        <image class="right-img" src="/static/img/index/exposure.png" mode="aspectFill"></image>
+        <image class="right-img" src="/static/img/my/edit.png" mode="aspectFill"></image>
+        <image class="right-img" src="/static/img/my/set.png" mode="aspectFill"></image>
       </view>
     </view>
     <view class="box-title">
-      <view class="" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px'}]">
+      <view class="" :style="[{'height': customBarH + 'rpx', 'padding-top': statusBarH + 'px'}]">
       </view>
     </view>
   </view>
@@ -37,7 +27,7 @@
     data() {
       return {
         statusBarH: 0,
-        customBarH: 0,
+        customBarH: 132,
         left: 35,
         isXcx:false,
         tabNum:0
@@ -64,21 +54,7 @@
       uni.getSystemInfo({
         success: (e) =>{
           this.statusBarH = e.statusBarHeight + 10
-          let custom=0;
-          //#ifdef MP-WEIXIN
-          custom = wx.getMenuButtonBoundingClientRect()
-          this.customBarH = custom.height
-          //#endif
-          //#ifdef H5
-          this.customBarH = 34
-          this.left=0
-          //#endif
-          // #ifdef APP-PLUS
-          this.customBarH = 34
-          this.left=0
-          //#endif
-          console.log('self.customBarH---------'+this.customBarH)
-          console.log('self.statusBarH---------'+this.statusBarH)
+
           this.$emit('navHeight', this.customBarH+this.statusBarH)
         }
       })
@@ -91,76 +67,28 @@
 @import url("/static/css/en-common.css") ;
 
   .header {
-    width: calc(100vw - 72rpx);
+    width: calc(100vw - 62rpx);
     position: fixed;
     left: 0;
     top: 0;
     z-index: 100;
     display: flex;
     justify-content: space-between;
-    height: 88rpx;
-    padding: 12rpx 36rpx;
+    align-items: center;
+    padding: 0 44rpx 0 18rpx;
+    height: 132rpx;
     //box-sizing: border-box;
-    background-color: #fff;
     .header-left{
-      padding: 10rpx 0;
-      height: 44rpx;
-      display: flex;
-      justify-content: flex-start;
-      .left-text{
-        height: 44rpx;
-        line-height: 44rpx;
-        font-size: 28rpx;
-      }
       .left-img{
-        padding: 0 6rpx;
-        .down-img{
-          width: 24rpx;
-          height: 24rpx;
-        }
+        height: 132rpx;
       }
     }
-    .header-center{
-      width: 366rpx;
-      height: 64rpx;
-      background: #EEEEEE;
-      border-radius: 200rpx;
-      position: relative;
-      .center-list{
-        z-index: 112;
-        display: flex;
-        justify-content: space-between;
-        height: 64rpx;
-        .center-item{
-          z-index: 113;
-          width: 122rpx;
-          height: 64rpx;
-          line-height: 64rpx;
-          text-align: center;
-          font-size: 32rpx;
-        }
-      }
-      .center-bg{
-        z-index: 111;
-        position: absolute;
-        margin: 4rpx 2rpx;
-        width: 120rpx;
-        background-color: #fff;
-        border-radius: 200rpx;
-        height: 56rpx;
-        left: 0;
-        top: 0;
-        transition: .5s ease;
-      }
 
-
-    }
     .header-right{
-      height: 64rpx;
+      height: 52rpx;
       display: flex;
       justify-content: flex-end;
       .right-img{
-        padding: 6rpx 0;
         width: 52rpx;
         height: 52rpx;
       }

static/css/en-common.css

@@ -1,4 +1,4 @@
-@import "../../components/static/css/en-iconfont";
+@import "en-iconfont";
 
 :root {
     /*所有字体颜色*/