优化

pages/message/index.js

@@ -2,7 +2,7 @@ const app = getApp()
 Page({
   data: {
     menu: {
-      show: true,
+      show: false,
       top: 0,
       left: 0
     }
@@ -32,9 +32,14 @@ Page({
     this.setData({
       menu: {
         show: true,
-        top: hFlag ? e.detail.y : e.detail.y - 100,
-        left: wFlag ? e.detail.x : e.detail.x - 135
+        top: hFlag ? touches[0].clientY : touches[0].clientY - 100,
+        left: wFlag ? touches[0].clientX : touches[0].clientX - 135
       }
     })
+  },
+  cancelMenu() {
+    this.setData({
+      'menu.show': false
+    })
   }
 })

pages/message/index.less

@@ -41,6 +41,7 @@
       border-bottom: 1rpx solid #D8D8D8;
 
       .avatar {
+        border-radius: 50rpx;
         width: 80rpx;
         height: 80rpx;
       }
@@ -92,6 +93,7 @@
           .miniAvatar {
             width: 38rpx;
             height: 38rpx;
+            border-radius: 50rpx;
             margin-left: 4rpx;
           }
         }
@@ -112,6 +114,14 @@
     }
   }
 
+  .menuBg {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+  }
+
   .menu {
     position: fixed;
     width: 278rpx;

pages/message/index.wxml

@@ -19,9 +19,9 @@
       </view>
     </view>
     <view class="base authority">
-      <image src="/static/message3.png" class="avatar" />
+      <image src="/static/zan.png" class="avatar" />
       <view class="body">
-        <view class="name">评论</view>
+        <view class="name">赞</view>
         <view class="avatars">
           <image src="/static/tj2.png" class="miniAvatar" wx:for="{{6}}" wx:key="index" />
         </view>
@@ -31,6 +31,16 @@
         <view class="unread">10</view>
       </view>
     </view>
+    <view class="base authority">
+      <image src="/static/notice.png" class="avatar" />
+      <view class="body">
+        <view class="name">通知</view>
+      </view>
+      <view class="right">
+        <view class="date">2023-3-14</view>
+        <view class="unread">10</view>
+      </view>
+    </view>
     <view class="base user" wx:for="{{16}}" wx:key="index" bind:longpress="onLongPress" hover-class='pressHover'>
       <image src="/static/message3.png" class="avatar" />
       <view class="body">
@@ -45,7 +55,8 @@
       </view>
     </view>
   </view>
-  <view class="menu" style="top:{{menu.top}}px;left:{{menu.left}}px">
+  <view class="menuBg" bind:touchstart="cancelMenu" wx:if="{{menu.show}}"></view>
+  <view class="menu" wx:if="{{menu.show}}" style="top:{{menu.top}}px;left:{{menu.left}}px">
     <view class="menu-one">
       <image src="/static/istop.png" class="icon" /> 置顶该聊天
     </view>

pages/message/index.wxss

@@ -38,6 +38,7 @@
   border-bottom: 1rpx solid #D8D8D8;
 }
 .messagePage .messageList .base .avatar {
+  border-radius: 50rpx;
   width: 80rpx;
   height: 80rpx;
 }
@@ -80,6 +81,7 @@
 .messagePage .messageList .authority .body .avatars .miniAvatar {
   width: 38rpx;
   height: 38rpx;
+  border-radius: 50rpx;
   margin-left: 4rpx;
 }
 .messagePage .messageList .user .info {
@@ -91,6 +93,13 @@
 .messagePage .messageList .pressHover {
   background-color: #f1f1f1;
 }
+.messagePage .menuBg {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+}
 .messagePage .menu {
   position: fixed;
   width: 278rpx;