bluenote/src/components/page-wrapper/index.tsx

/**
 * 用于 page 根目录的样式等设置
 */
import { View, Video } from "@tarojs/components";
import React from "react";
import pageStyle from "./index.module.less";
import { GlobalModal } from '@/components/GlobalModal/index';
interface Props {
  children?: React.ReactChild | React.ReactChild[];
  style?: React.CSSProperties;
  styleBg?: string;
  onClick?: (e:any)=> void
}

const Index: React.FC<Props> = ({ children, styleBg, style, onClick }) => {
  // 自定义背景样式
  
  
  const bgImageStyle = {
    backgroundImage: `url(${styleBg})`,
  };

  const renderBg = () => {
    if(!styleBg) {
      return <></>
    }
    if(styleBg.lastIndexOf('.mp4') > -1){
      return <Video
        controls={false}
        showCenterPlayBtn={false}
        loop={true}
        muted={true}
        autoplay
        objectFit="cover"
        className={pageStyle.bg}
        src={styleBg}
      />
    }
    return <View className={pageStyle.bg} style={bgImageStyle}></View>
  }
  //  盖在背景上面的是视口高度的 渐变色
  const handleClick = (e:any)=> {
    onClick && onClick(e)
  }
  
  return (
    <View className={`relative font-normal text-14 leading-22 w-full`} onClick={handleClick}>
      {/* cover 背景图覆盖从上至下渐变 */}
      <View className={`global-linear-gradient-bg ${pageStyle.bgVerticalGradient}`}></View>
      {/* bg 背景图 */}
      {renderBg()}
      <View className="relative z-0 h-full w-full" style={style}>{children}</View>
      <GlobalModal></GlobalModal>
    </View>
  );
};

export default Index;