update

src/components/XNav/index.jsx

@@ -0,0 +1,41 @@
+import {Component} from "react";
+import {Slot, View} from "@tarojs/components";
+import './index.scss';
+import Taro from "@tarojs/taro";
+
+class XNav extends Component {
+
+  static defaultProps = {
+    backgroundColor: '#FFFFFF',
+    position: 'block',
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      statusBarHeight: 0,
+    };
+  }
+
+  componentDidMount() {
+    const sysInfo = Taro.getSystemInfoSync();
+    this.setState({ statusBarHeight: sysInfo.statusBarHeight });
+  }
+
+  render() {
+    const { statusBarHeight } = this.state;
+    return (
+      <View class='x-nav-box' style={{
+        paddingTop: `${statusBarHeight}px`,
+        backgroundColor: this.props.backgroundColor,
+        position: this.props.position,
+      }}>
+        <View class='cont'>
+          { this.props.children }
+        </View>
+      </View>
+    )
+  }
+}
+
+export default XNav;

src/components/XNav/index.scss

@@ -0,0 +1,12 @@
+.x-nav-box {
+  //padding-top: v-bind(TopHight);
+  //background-color: v-bind(backgroundColor);
+  //position: v-bind(position);
+  top: 0;
+  left: 0;
+  z-index: 999;
+  @apply w-full;
+  .cont {
+    height: 75rpx;
+  }
+}

src/components/XPageBg/index.jsx

@@ -0,0 +1,17 @@
+import { Component } from 'react'
+import { Image } from "@tarojs/components";
+
+class XPageBg extends Component {
+
+  static defaultProps = {
+    src: require('../../static/image/背景@2x.png')
+  }
+
+  render() {
+    return (
+      <Image class="w-h-full absolute -z-10" src={this.props.src}></Image>
+    );
+  }
+}
+
+export default XPageBg;