import Logo from "@/components/logo";
import { Box, Container, Link, Typography } from "@mui/material";
import { Outlet } from "@umijs/max";
import "./index.less";

function LoginLayout() {
  return (
    <div
      className="wrap"
      style={{
        backgroundImage: "url(./assets/hd.jpg)",
      }}
    >
      <div className="cover"></div>
      <Container
        component="main"
        maxWidth="xs"
        style={{
          display: "flex",
          alignItems: "center",
          boxShadow: "0 0 36px #999",
          padding: 0,
          borderRadius: 12,
          overflow: "hidden",
          backdropFilter: "blur(4px)",
        }}
        borderRadius={2}
      >
        <Box
          className="right"
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            height: 600,
            padding: 6,
            backgroundColor: "rgba(255,255,255,0.8)",
          }}
        >
          <Logo disabledLink={true}></Logo>
          <Typography component="h1" variant="h5" mt={4} mb={1}>
            精密测量虚拟仿真实训平台
          </Typography>
          <Outlet></Outlet>
        </Box>
      </Container>
      <Box sx={{ position: "absolute", bottom: 12 }}>
        <Typography variant="body2" color="textSecondary" align="center">
          {"© "}
          <Link color="inherit" href="/">
            My App
          </Link>{" "}
          {new Date().getFullYear()}
        </Typography>
      </Box>
    </div>
  );
}

export default LoginLayout;
