add: Some pages and config

.devcontainer/devcontainer.json

@@ -1,4 +1,5 @@
 {
   "image": "node:18-bullseye",
-  "remoteUser": "1000"
+  "remoteUser": "1000",
+  "appPort": [3000, "60888:3000"]
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "remote.localPortHost": "allInterfaces"
+}

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  // images: {
+  //   loader: "custom"
+  // },
 }
 
 module.exports = nextConfig

pages/dashboard.tsx

@@ -1,12 +1,39 @@
 import { NextPage } from "next";
-import { Navbar } from "react-bootstrap";
+import { Button, Card, Col, Container, Form, Row } from "react-bootstrap";
 
 const DashBoard: NextPage = () => {
+  const entryBlocks = [{}, {}];
+
   return (
     <>
-      <Navbar>
-        <Navbar.Brand href="#home">My Website</Navbar.Brand>
-      </Navbar>
+      <style global jsx>
+        {`
+          html,
+          body,
+          body > div:first-child,
+          div#__next,
+          div#__next > div {
+            height: 100%;
+          }
+        `}
+      </style>
+      <Container className="py-4 py-lg-5 align-items-center text-center">
+        <Col>
+          <h3 className="display-4">智慧养老综合服务平台</h3>
+          <hr />
+          <Container>
+            <Col md="2">
+              <Card style={{ background: "linear-gradient(to right top, #7f7fd5, #86a8e7, #91eae4)"}}>
+                <Card.Body>
+                  <Card.Title className="text-white fw-bold">养老大数据</Card.Title>
+                  <Card.Link></Card.Link>
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col md="3"></Col>
+          </Container>
+        </Col>
+      </Container>
     </>
   );
 };

pages/login.tsx

@@ -0,0 +1,38 @@
+import { NextPage } from "next";
+import { Button, Col, Container, Form, Row } from "react-bootstrap";
+
+
+const Login: NextPage = () => {
+  return (
+    <>
+      <Container className="my-5 px-4 py-5">
+        <Row className="p-4 pt-lg-5 align-items-center rounded-3 border shadow-lg">
+          <Col lg="7">
+            <h1 className="display-4 fw-bold lh-1">登录</h1>
+            <p className="lead">智慧养老综合服务平台</p>
+          </Col>
+          <Col md="10" lg="5">
+            <Form className="p-4 p-md-5 border rounded-3">
+              <Form.Group className="mb-3" controlId="loginUsername">
+                <Form.Label>用户名</Form.Label>
+                <Form.Control type="text" placeholder="Enter Username"></Form.Control>
+              </Form.Group>
+
+              <Form.Group className="mb-3" controlId="loginPassword">
+                <Form.Label>密码</Form.Label>
+                <Form.Control type="password" placeholder="Enter password"></Form.Control>
+              </Form.Group>
+
+              <Form.Group className="mb-3" controlId="loginRemember">
+                <Form.Check type="radio" label="记住我" />
+              </Form.Group>
+              <Button variant="primary" type="submit" size="lg">登录</Button>
+            </Form>
+          </Col>
+        </Row>
+      </Container>
+    </>
+  );
+};
+
+export default Login;

pages/test.tsx

@@ -0,0 +1,30 @@
+import { NextPage } from "next";
+import {
+  Button,
+  Col,
+  Container,
+  OverlayTrigger,
+  Popover,
+} from "react-bootstrap";
+
+const popover = (
+  <Popover id="mypop">
+    <Popover.Header as="h3">Right Popover</Popover.Header>
+    <Popover.Body>My Something special.</Popover.Body>
+  </Popover>
+);
+
+const Test: NextPage = () => {
+  return (
+    <Container>
+      <Col>
+        <h3 className="display-3">Hello</h3>
+        <OverlayTrigger trigger="click" placement="right" overlay={popover}>
+          <Button variant="primary">Click to see.</Button>
+        </OverlayTrigger>
+      </Col>
+    </Container>
+  );
+};
+
+export default Test;