update

css/index.css

@@ -21,6 +21,7 @@
     padding:0px;
 }
 .container{
+    width: 100%;
     height: 100vh;
 }
 .content{
@@ -36,4 +37,30 @@
     border-radius: 5px;
     height: 100%;
     background: #ddd;
+}
+.item .task .name,.school,.grade,.subject{
+    padding:10px;
+}
+.item .task .grade span{
+    display: inline-block;
+    width: 32%;
+}
+/* scan */
+.scan_content{
+    height: 84%;
+    padding: 10px;
+}
+.left{
+    height: 100%;
+    background: #ccc;
+}
+.middle{
+    height: 100%;
+    background: #eee;
+    padding-left:10px;
+}
+.right{
+    height: 100%;
+    background: #ccc;
+    padding-left: 10px;
 }

index.html

@@ -20,9 +20,18 @@
     </div>
     <div class="layui-row layui-col-space10 content">
       <div class="layui-col-lg3 item">
-          <div class="task">
-
-          </div>
+        <div class="task">
+          <h2 class="name">测试测试测试测试测试测试</h2>
+          <p class="school">中和中学</p>
+          <p class="grade">
+            <span>高一</span>
+            <span>19班</span>
+            <span>2021-09-05 15:14:34</span>
+          </p>
+          <p class="subject">
+            <a href="scan.html" class="layui-btn layui-btn-normal layui-btn-sm">数学</a>
+          </p>
+        </div>
       </div>
       <div class="layui-col-lg3 item">
         <div class="task">
@@ -89,36 +98,17 @@
   <script src="js/api.js" charset="utf-8"></script>
   <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
   <script>
-    layui.use(['form'], function () {
-      var form = layui.form
-      layer = layui.layer
-      //自定义验证规则
-      form.verify({
-        username: function (value) {
-          console.log(value)
-          if (value.length < 1) {
-            return '请输入用户名!';
-          }
-        }
-        , password: [
-          /^[\S]{6,12}$/
-          , '密码必须6到12位，且不能出现空格!'
-        ]
-      });
-      //监听提交
-      form.on('submit(login)', function (data) {
-        var data = form.val("login")
-        LayuiPostJson({
-          url: LOGINAPI,
-          data: data
-        }).then(res => {
-          localStorage.setItem("token",res.access_token)
-        }).catch(err => {
-          layer.msg("账号或密码错误!")
-        })
-        return false;
-      });
-    });
+    var token = localStorage.getItem("token")
+    // 获取管理员信息
+    LayuiGetJson({
+      url: ACCOUNTINFOAPI,
+      data: {},
+      token:token
+    }).then(res => {
+      console.log(res)
+    }).catch(err => {
+      window.location.href = "login.html"
+    })
   </script>
 
 </body>

js/api.js

@@ -1,3 +1,4 @@
+var Authorization = localStorage.getItem("token")
 var LayuiGetJson = param => {
     return new Promise((resovle, reject) => {
         $.ajax({
@@ -5,9 +6,9 @@ var LayuiGetJson = param => {
             async: param.async || true,
             url: param.url,
             data: param.data || {},
-            header:{
+            headers:{
                 "Content-Type": "application/json;charset=utf-8",
-                "Authorization":"Bearer " + localStorage.getItem("token")
+                "Authorization": "Bearer " + Authorization
             },
             success: res => {
                 resovle(res);
@@ -27,7 +28,7 @@ var LayuiPostJson = param => {
             data: param.data || {},
             header:{
                 "Content-Type": "application/json;charset=utf-8",
-                "Authorization":"Bearer " + localStorage.getItem("token")
+                "Authorization":"Bearer " + Authorization
             },
             success: res => {
                 resovle(res);
@@ -40,4 +41,5 @@ var LayuiPostJson = param => {
 }
 // 接口配置
 const HOST = "http://47.108.130.28:8000"
-var LOGINAPI = HOST + "/v1/login"
+var LOGINAPI = HOST + "/v1/login"
+var ACCOUNTINFOAPI = HOST + "/v1/admin/account"

login.html

@@ -41,9 +41,10 @@
   <script src="js/api.js" charset="utf-8"></script>
   <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
   <script>
-    layui.use(['form'], function () {
+    layui.use(['form','laytpl'], function () {
       var form = layui.form
-      layer = layui.layer
+      var layer = layui.layer
+      var laytpl = layui.laytpl
       //自定义验证规则
       form.verify({
         username: function (value) {
@@ -65,6 +66,7 @@
           data: data
         }).then(res => {
           localStorage.setItem("token",res.access_token)
+          window.location.href = "index.html"
         }).catch(err => {
           layer.msg("账号或密码错误!")
         })

scan.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Layui</title>
+  <meta name="renderer" content="webkit">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <link rel="stylesheet" href="layui/css/layui.css" media="all">
+  <link rel="stylesheet" href="css/index.css" media="all">
+
+</head>
+
+<body>
+  <div class="layui-fluid container">
+    <div class="layui-row top">
+      <div class="layui-col-lg12">
+      </div>
+    </div>
+    <div class="layui-row layui-col-space10 scan_content">
+      <div class="layui-col-lg3 left">
+        <div class="task">
+          <h2 class="name">测试测试测试测试测试测试</h2>
+          <p class="school">中和中学</p>
+          <p class="grade">
+            <span>高一</span>
+            <span>19班</span>
+            <span>2021-09-05 15:14:34</span>
+          </p>
+          <p class="subject">
+            <a href="" class="layui-btn layui-btn-normal layui-btn-sm">数学</a>
+          </p>
+        </div>
+      </div>
+      <div class="layui-col-lg7 middle">
+        <div class="task">
+          <h2 class="name">测试测试测试测试测试测试</h2>
+          <p class="school">中和中学</p>
+          <p class="grade">
+            <span>高一</span>
+            <span>19班</span>
+            <span>2021-09-05 15:14:34</span>
+          </p>
+          <p class="subject">
+            <a href="" class="layui-btn layui-btn-normal layui-btn-sm">数学</a>
+          </p>
+        </div>
+      </div>
+      <div class="layui-col-lg2 right">
+        <div class="task">
+          <h2 class="name">测试测试测试测试测试测试</h2>
+          <p class="school">中和中学</p>
+          <p class="grade">
+            <span>高一</span>
+            <span>19班</span>
+            <span>2021-09-05 15:14:34</span>
+          </p>
+          <p class="subject">
+            <a href="" class="layui-btn layui-btn-normal layui-btn-sm">开始</a>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="layui-row">
+      <div class="layui-col-lg12 bottom"></div>
+    </div>
+  </div>
+  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+  <script src="layui/layui.js" charset="utf-8"></script>
+  <script src="js/api.js" charset="utf-8"></script>
+  <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
+  <script>
+    var token = localStorage.getItem("token")
+    // 获取管理员信息
+    LayuiGetJson({
+      url: ACCOUNTINFOAPI,
+      data: {},
+      token:token
+    }).then(res => {
+      console.log(res)
+    }).catch(err => {
+      window.location.href = "login.html"
+    })
+  </script>
+
+</body>
+
+</html>