空白H5 页面模板

import { useEffect, useState } from 'react';
import back from '@/assets/back.png';
import { SafeAreaType, getSafeArea, toBack } from '@/utils/hxBridge';
import cls from './index.less';

export default () => {
  const [loading, setLoading] = useState(false);
 
  const [safeArea, setSafeArea] = useState<SafeAreaType>({
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  }); // 安全距离

  useEffect(() => {
    getSafeArea()
      ?.then((res: SafeAreaType) => {
        setSafeArea(res);
      })
      .catch((err) => {
        console.log(err, '安全区获取失败');
        // setSafeTop(null);
      });
  }, []);

  const handleBack = () => {
    toBack();
  };
 
  //加载中
  if (loading) {
    return <div className={cls.loading}>加载中...</div>;
  }

  return (
    <div className={cls.root}>
      <div className={cls.container}>
        <div
          className={cls.header}
          style={{
            paddingTop: safeArea.top,
          }}
        >
          <div className={cls.back} onClick={handleBack}>
            <img src={back} alt="" />
          </div>
          <div>个人中心</div>
          <div className={cls.right}></div>
        </div>
        <div className={cls.scrollBox}>
                 内容区域
        </div>
      </div>
    </div>
  );
};

.textEllipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.loading {
  text-align: center;
  margin-top: 50vh;
}

.root {
  font-size: 32px;
  position: relative;
  
  .container {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 88px;
      padding: 0 30px;

      .back {
        width: 44px;
      }

      img {
        width: 100%;
      }

      .right {
        width: 44px;
      }
    }
    .scrollBox {
      flex: 1;
      overflow: scroll;
    }
    
  }
}