fjrcloud-community-app/pages/index/guest.vue

<template>
  <s-layout title="访客管理" >
    <view class="guest-page">

      <!-- 空状态内容区 -->
      <view class="empty-state">
        <!-- 空状态图标 -->
        <view class="empty-icon">
          <image 
            class="icon-img" 
            src="/static/img/guest.png" 
            mode="aspectFit"
          />
        </view>
        
        <!-- 提示文字 -->
        <text class="empty-text">功能开发中，敬请期待...</text>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

  // 页面无需逻辑处理
</script>

<style lang="scss" scoped>
  /* 页面容器 */
  .guest-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #FFF5F0 0%, #FFFFFF 30%);
    padding-bottom: 120rpx;
    overflow:hidden;
  }

  /* 导航栏 */
  .navbar {
    width: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(env(safe-area-inset-top) + 44rpx);
    height: calc(44rpx + env(safe-area-inset-top));

    .navbar-content {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .navbar-title {
      font-size: 34rpx;
      font-weight: 500;
      color: #333333;
      letter-spacing: 1rpx;
    }
  }

  /* 空状态容器 */
  .empty-state {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 200rpx;

    /* 空状态图标 */
    .empty-icon {
      width: 400rpx;
      height: 300rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40rpx;

      .icon-img {
        width: 100%;
        height: 100%;
      }
    }

    /* 提示文字 */
    .empty-text {
      font-size: 28rpx;
      color: #999999;
      text-align: center;
      line-height: 1.6;
      letter-spacing: 0.5rpx;
    }
  }
</style>