import React from "react";
import Flex from "@/components/Flex";
import less from './index.less';


/**
 * 标题视图
 * @constructor
 */
const TitleView = ({bgUrl, bgStyle = {}, title = "", extra}) => {


  ///////////////////////////////////////// 页面渲染

  return <Flex justify={"space-between"} alignItems={"center"}>
    <Flex
      className={less.titleBg} justify={"center"} alignItems={"center"}
      style={{...bgStyle, backgroundImage: `url(${bgUrl})`}}
    >
      <Flex>{title}</Flex>
    </Flex>

    {extra}
  </Flex>

};

export default TitleView;
