deepChartVueApp/pages/blank/notice.vue

<template>

  <view class="blank-page">
      <view class="header" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- 返回按钮 -->
      <view class="head-left">
    <image class="back-button" @click="goBack" src="/static/icons/Left_(左).png">

   
    <!-- <text class="tip">当前特斯拉该如何布局？</text> -->
  </image>
    </view>  
       <view class="header-center">
        <text class="title" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
          >消息推送通知</text
        >
      </view>   
</view>
<image class="picture" src="/static/images/缺省.png" />
<text class="tip">暂无内容~</text>
  </view>
</template>

<script setup>
// 返回到 deepMate 页面
const goBack = () => {
  uni.navigateTo({
    url: '/pages/deepMate/deepMate'
  });
};
</script>

<style scoped>
.blank-page {
  display: flex;
  flex-direction: column;
  position: fixed;
  /* 充满视口，彻底禁用页面滚动 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  overflow: hidden;
  /* 锁定页面滚动 */
  background-color: #ffffff;
  padding: 20rpx 0rpx;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx rgba(0, 0, 0, 0.1);
}
.head-left {
  display: flex;
  align-items: center;
}
.back-button {
  width: 40rpx;
  height: 40rpx;
}
.header-center .title {
  position: fixed;
  top: 25rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}
.back-button:hover {
  background-color: #e0e0e0;
}

.back-button:active {
  transform: scale(0.95);
}

.back-icon {
  font-size: 32rpx;
  color: #333333;
  margin-right: 10rpx;
}

.picture {
  display: block;
  margin: 200rpx auto 0;  /* 图片水平居中 */
  width: 60%;
  height: 600rpx;
}
.tip {
  color: #999999;
  font-size: 28rpx;
  text-align: center;
  margin-top: 20rpx;
}
</style>