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

97 lines
1.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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>