修改互换微信弹窗

pagesme/message/info.vue

@@ -54,18 +54,22 @@
         </view>
       </template>
     </z-paging>
-    <u-popup :show="show" mode="center"  @close="close" @open="open" customStyle="min-height: 15vh; width: 700rpx; border-radius: 10rpx;">
-      <view class="popup-content">
-        <text style="font-weight: bold">互换微信成功</text>
-      </view>
-      <view style="display: flex;justify-content: center;align-items: center">
-        <view style="color: black;font-size: 18px;">微信号：</view>
-        <view style="margin-top: 5px">
-          <u-tooltip color="black" size="16" :text="wxTask.memWxCode" overlay bgColor="#e3e4e6"></u-tooltip>
+    <view class="dialog_box" v-if="show">
+      <view class="bg"></view>
+      <view class="dialog_content">
+        <view class="bag">
+          <view class="close-button" @click="close()">×</view>
+          <image class="pop-bgc" :src="baseUrl + '/common/home-pop-bg.png'"></image>
+          <view class="divss">
+            <view class="namne">对方微信号：</view>
+            <view style="margin-top: 20rpx;display: flex;justify-content: space-between;margin-left: 50rpx;width: 80%">
+              <u-tooltip color="black" size="18" :text="wxTask.memWxCode" overlay bgColor="#e3e4e6"></u-tooltip>
+              <view style="font-size: 32rpx;">(长按复制)</view>
+            </view>
+          </view>
         </view>
-        <view>(长按复制)</view>
       </view>
-    </u-popup>
+    </view>
 
     <ELM ref="elm" :msg="tipMsg" :isCancel="false" :isConfirm="isConfirm" @confirm="confirm"></ELM>
     <ELM ref="elmShowApply" :msg='tipMsg' :isConfirm="showApply" :isClose="true" cancelName="拒绝" confirmName="接受" @confirm="acceptPayConfirm" @cancel="refuseConfirm"></ELM>
@@ -659,4 +663,113 @@ export default {
   padding-right: 20px;
 }
 
+.dialog_box {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+
+  .bg {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .dialog_content {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+
+    .title {
+      font-size: 50rpx;
+      color: #fff;
+      margin: 40rpx auto;
+    }
+
+    .bag {
+      position: relative;
+      width: 500rpx;
+      height: 562rpx;
+      background: #ffffff;
+      border-radius: 24rpx 24rpx 24rpx 24rpx;
+      opacity: 1;
+      overflow: hidden;
+      margin-left: 125rpx;
+      margin-top: 40%;
+
+      // 关闭按钮样式
+      .close-button {
+        position: absolute;
+        top: 20rpx;
+        right: 20rpx;
+        width: 40rpx;
+        height: 40rpx;
+        line-height: 40rpx;
+        text-align: center;
+        font-size: 40rpx;
+        font-weight: bold;
+        color: #999999;
+        cursor: pointer;
+        z-index: 10;
+
+        &:active {
+          color: #666666; // 点击时颜色变化
+        }
+      }
+
+      .divss {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        .namne {
+          color: rgba(45, 49, 50, 0.8);
+          font-weight: 400;
+          font-size: 40rpx;
+          font-family: 'PingFang SC-Heavy, PingFang SC';
+          width: 100%;
+          height: 56rpx;
+          line-height: 56rpx;
+          margin-top: 180rpx;
+          margin-left: 50rpx;
+        }
+
+        .namnes {
+          width: 364rpx;
+          height: 96rpx;
+          font-size: 28rpx;
+          font-family: 'PingFang SC-Regular, PingFang SC';
+          font-weight: 400;
+          color: #4a4a4a;
+          line-height: 48rpx;
+          margin: 0 auto;
+          margin-top: 80rpx;
+          text-align: center;
+        }
+      }
+
+      .pop-bgc {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        // z-index: -1;
+      }
+
+    }
+  }
+}
+
+
 </style>