update

src/pages/messagePush/index.vue

@@ -1,11 +1,74 @@
 <script setup>
-
+import BD1 from "../../static/icons/bd1.png";
+import BD2 from "../../static/icons/bd2.png";
+import BD3 from "../../static/icons/bd3.png";
+import BD4 from "../../static/icons/bd4.png";
+import BDH from "../../static/icons/bdh.png";
+import WBDICON from "../../static/icons/缺省图.png";
+import XNav from "../../components/XNav.vue";
+import BindMsgModal from "../../components/BindMsgModal.vue";
 </script>
 
 <template>
     <!--消息推送-->
+    <x-nav></x-nav>
+
+    <view class="!flex flex-col items-center !mt-[128rpx]">
+        <image class="!size-[260rpx]" mode="aspectFill" :src="WBDICON"></image>
+        <view class="!mt-[-70rpx] relative z-10">暂未绑定</view>
+        <view class="text-[#86909C] test-28r">当前消息推送无法使用，将影响您收益!</view>
+
+        <bind-msg-modal>
+            <view class="!mt-[80rpx] rounded-[4rpx] bg-[var(--primary-color)] text-[#fff] py-[10rpx] px-[32rpx]">开始绑定
+            </view>
+        </bind-msg-modal>
+    </view>
+
+    <view class="btm h-[50vh] !flex flex-col items-center px-[40rpx] !mx-[20rpx]">
+        <image class="!w-[300rpx] !mt-[40rpx] !mb-[40rpx]" mode="widthFix" :src="BDH"></image>
+        <view class="!flex items-center bg-[#fff] p-[28rpx] w-full rounded-[16rpx] gap-[28rpx]">
+            <image class="!size-[70rpx]" mode="aspectFill" :src="BD1"></image>
+            <view>
+                <view class="test-28r" style="font-weight: bold">结算提醒</view>
+                <view class="test-24r text-[#4E5969]">新的收益入账，待您确认后方可提现</view>
+            </view>
+        </view>
+
+        <view class="!flex items-center bg-[#fff] p-[28rpx] w-full rounded-[16rpx] gap-[28rpx] !mt-[20rpx]">
+            <image class="!size-[70rpx]" mode="aspectFill" :src="BD2"></image>
+            <view>
+                <view class="test-28r" style="font-weight: bold">回填提醒</view>
+                <view class="test-24r text-[#4E5969]">回填时间临近时，会提醒您</view>
+            </view>
+        </view>
+
+        <view class="!flex items-center bg-[#fff] p-[28rpx] w-full rounded-[16rpx] gap-[28rpx] !mt-[20rpx]">
+            <image class="!size-[70rpx]" mode="aspectFill" :src="BD3"></image>
+            <view>
+                <view class="test-28r" style="font-weight: bold">修改提醒</view>
+                <view class="test-24r text-[#4E5969]">来自商家的修改建议，助力变现</view>
+            </view>
+        </view>
+
+        <view class="!flex items-center bg-[#fff] p-[28rpx] w-full rounded-[16rpx] gap-[28rpx] !mt-[20rpx]">
+            <image class="!size-[70rpx]" mode="aspectFill" :src="BD4"></image>
+            <view>
+                <view class="test-28r" style="font-weight: bold">申诉提醒</view>
+                <view class="test-24r text-[#4E5969]">通知您向平台发起的任务申诉结果</view>
+            </view>
+        </view>
+    </view>
 </template>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.btm {
+    width: calc(100% - 40rpx);
+    border-radius: 20px 20px 0px 0px;
+    background: linear-gradient(180.00deg, rgb(68, 125, 255) 0.763%, rgb(255, 255, 255) 99.237%);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    margin-bottom: calc(24rpx + constant(safe-area-inset-bottom));
+    margin-bottom: calc(24rpx + env(safe-area-inset-bottom));
+}
 </style>