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

function LoginLayout() {
  return (
    <div className="wrap">
      <Container
        component="main"
        maxWidth="xs"
        style={{
          display: "flex",
          alignItems: "center",
          boxShadow: "0 0 36px #999",
          padding: 0,
          borderRadius: 12,
          overflow:"hidden",
        }}
        borderRadius={2}
      >

        <Box
          className="right"
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            height: 600,
            padding: 6,
            backgroundColor:"rgba(255,255,255,0.8)",
          }}
        >
          <Logo></Logo>
          <Typography component="h1" variant="h5" mt={1} 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;