管理者

管理者/css/applyBook.css

+
+
+
+/* 大背景 */
+body
+{
+    width: 1420px;
+    height: 970px;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/all-back.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+
+
+/* 管理员头像及提示 */
+.page
+{
+    height: 177px;
+    width: 360px;
+    margin-top: 21px;
+    margin-left:18px;
+    transition: all 0.5s;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/page.png");
+}
+.page:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+
+/* 提示文字 */
+.page-p1
+{
+    display: block;
+    padding-top: 30px;
+    margin-left: 180px;
+    font-size: 44px;
+    color: #fff;
+    letter-spacing :6px;
+}
+.page-p2
+{
+    display: block;
+    padding-top: 14px;
+    margin-left: 185px;
+    font-size: 26px;
+    color: #fff;
+    letter-spacing :3px;
+}
+
+
+
+
+
+/* 导航栏 */
+nav
+{
+    margin-top: 50px;
+    margin-left: 18px;
+    width: 363px;
+    height: 542px;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/nav-back.png");
+    text-align: center;
+    transition: all 0.5s;
+    letter-spacing :4px;
+    border: none;
+}
+nav:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.nav-ul
+{
+    padding-top: 100px;
+}
+.nav-li
+{
+    padding: 28px 0 28px 0;
+    font-size: 36px;
+}
+nav ul li
+{
+    line-height: 50px;
+    height: 50px;
+    position: relative;
+    text-align: center;
+    font-size: 20px;
+    transition: all .3s linear;
+}
+
+nav ul li ul
+{
+    display: none;
+    position: absolute;
+    left: 363px;
+    top: -20px;
+    width: 150px;
+    height: 10px;
+    transition: all .3s linear;
+}
+
+nav ul li ul li
+{
+    background-color: #434446;
+    transition: all .3s linear;
+}
+nav ul li ul li:hover
+{
+    background-color: rgb(116, 115, 112);
+    transition: all .3s linear;
+}
+nav li:hover
+{
+    background-color: rgb(116, 115, 112);
+    transition: all .3s linear;
+}
+
+nav ul li:hover ul
+{
+    display: block;
+    border:none;
+    transition: all .3s linear;
+}
+
+
+
+
+/* 滚动条 */
+::-webkit-scrollbar
+{
+    width : 16px;  
+    height: 0px;
+}
+::-webkit-scrollbar-thumb 
+{
+    background-color: gray;
+    background-image: -webkit-linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.2) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.2) 50%,
+        rgba(255, 255, 255, 0.2) 75%,
+        transparent 75%,
+        transparent
+    );
+}
+::-webkit-scrollbar-track 
+{
+    border-radius: 10px;
+}
+
+
+
+
+
+/* 排头 */
+.list
+{
+    margin-left: 454px;
+    margin-top: -710px;
+    width: 950px;
+    height: 81px;
+}
+.list ul li
+{
+    width: auto;
+    text-align: center;
+    height: 50px;
+    float: left;
+    font-size: 27px;
+    color: #fff;
+    background-color: #434446;
+    border-radius: 100px;
+    margin-right: 25px;
+    font-weight: lighter;
+    padding: 12px 32px  2px 35px;
+    letter-spacing: 3px;
+}
+
+
+
+
+/* 按钮 */
+.agree
+{
+    float: right;
+    background-color: #09ade2;
+    text-align: center;
+    height: 38px;
+    width: 72px;
+    color: #fff;
+    font-weight: lighter;
+    font-size: 24px;
+    border-radius: 30px;
+    padding: 7px 20px 0 20px;
+    border: none;
+    margin: 0;
+    transition: all 0.5s;
+}
+
+.reject
+{
+    float: right;
+    height: 34px;
+    width: 70px;
+    border-radius: 30px;
+    padding: 7px 20px 0 20px;
+    margin-left: 10px;
+    transition: all 0.5s;
+
+    color: red;
+    background-color: transparent;
+    text-align: center;
+    font-weight: lighter;
+    font-size: 24px;
+    border-radius: 30px;
+    border: 2px solid red;
+    line-height: 28px;
+
+}
+.agree:hover
+
+{
+    
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.reject:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+
+
+
+
+
+/* 主体部分 */
+#main
+{
+    width: 1020px;
+    height: 812px;
+    margin-left: 430px;
+}
+.item
+{
+    width: 1020px;
+    height: 47px;
+    font-size: 27px;
+    color: #fff;
+    margin: 30px 0 55px 0;
+}
+.part
+{
+    display: inline;
+    width: 770px;
+    line-height :3px;
+    height: 47px;
+}
+
+
+.book_name
+{   
+    float: left;
+    width: 250px;
+    text-align: center;
+    height: 36px;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    overflow:hidden;
+    line-height: 43px;
+    transition: all 0.5s;
+}   
+.book_name:hover
+{
+    overflow: visible;
+    transform: translateY(30px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.book_id
+{
+    float: left;
+    width: 80px;
+    height: 36px;
+    line-height: 43px;
+    padding: 0 30px 0 35px;
+    transition: all 0.5s;
+}
+.book_id:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.borrow_time
+{
+    float: left;
+    width: 150px;
+    height: 36px;
+    line-height: 43px;
+    padding: 0 20px 0 20px;
+    transition: all 0.5s;
+}
+.borrow_time:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+#user_name
+{
+    float: left;
+    width: 81px;
+    height: 36px;
+    line-height: 43px;
+    padding: 0 0 0 50px;
+    transition: all 0.5s;
+}
+#user_name:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+
+

管理者/css/common.css

+/* 覆盖默认样式 */
+/* 覆盖默认样式 */
+
+ * {
+     margin: 0;
+     padding: 0;
+     outline: none;
+ }
+
+ a {
+     color: #fff;
+     text-decoration: none;
+ }
+
+
+
+ /* input 样式重写 */
+
+ input {
+     /* border: 1px solid rgba(212, 210,210);
+     border-radius: 5px;
+     height: 25px; */
+     outline: none;
+ }
+
+
+
+
+
+
+ /* 下拉框样式重写 */
+ select {
+     border: 1px solid rgb(212,210,210);
+     border-radius: 5px;
+     height: 30px;
+ }
+
+
+
+ /* 单选框样式重写 */
+ input[type = 'radio']:focus {
+     outline: none;
+ }
+
+ label {
+     position: absolute;
+     left: 5px;
+     top: 8px;
+     width: 15px;
+     height: 15px;
+     border-radius: 50%;
+     border: 1px solid #999;
+ }
+
+ .el-radio-box {
+     position: relative;
+     line-height: 30px;
+ }
+
+ .el-radio-box span {
+     position: relative;
+     left: 10px;
+ }
+
+ .el-radio-box input:checked+label {
+     background-color: #349EDF;
+     border: 1px solid #349EDF;
+ }
+
+ .el-radio-box input:checked+label::after {
+     position: absolute;
+     content: "";
+     width: 4px;
+     height: 8px;
+     top: 1px;
+     left: 8px;
+     border: 2px solid #fff;
+     border-top: none;
+     border-left: none;
+     transform: rotate(45deg);
+ }
+
+ button {
+     border: none;
+ }
+
+ select {
+     outline: rgba(30,128,255);
+ }
+
+ textarea {
+     border: 1px solid rgb(212,210,210);
+     border-radius: 5px;
+ }
+
+ textarea:focus {
+     outline: 1px rgba(30,128,255) solid;
+ }
+
+ .el-radio-box input[type='radio'] {
+     width: 20px;
+     height: 20px;
+     opacity: 0;
+ }
+
+
+
+ body,
+div,
+dd,
+dl,
+dt,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+input,
+form,
+a,
+p,
+textarea {
+    margin: 0;
+    padding: 0;
+    font-family: "Helvetica Neue" Arial, Helvetica, sans-serif;
+}
+
+ul,
+ol,
+li {
+    list-style: none;
+}
+
+
+/* a{
+    text-decoration: none;
+    display: block;
+} */
+
+img {
+    border: none;
+    display: block;
+}

管理者/css/history.css

+
+
+
+/* 大背景 */
+body
+{
+    width: 1420px;
+    height: 970px;
+    text-align: center;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/all-back.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+
+
+/* 管理员头像及提示 */
+.page
+{
+    height: 177px;
+    width: 360px;
+    margin-top: 21px;
+    margin-left:18px;
+    transition: all 0.5s;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/page.png");
+}
+.page:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+
+/* 提示文字 */
+.page-p1
+{
+    display: block;
+    padding-top: 30px;
+    margin-left: 180px;
+    font-size: 44px;
+    color: #fff;
+    letter-spacing :6px;
+}
+.page-p2
+{
+    display: block;
+    padding-top: 14px;
+    margin-left: 185px;
+    font-size: 26px;
+    color: #fff;
+    letter-spacing :3px;
+}
+
+
+
+
+
+/* 导航栏 */
+nav
+{
+    margin-top: 50px;
+    margin-left: 18px;
+    width: 363px;
+    height: 542px;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/nav-back.png");
+    text-align: center;
+    transition: all 0.5s;
+    letter-spacing :4px;
+}
+nav:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.nav-ul
+{
+    padding-top: 100px;
+}
+.nav-li
+{
+    padding: 28px 0 28px 0;
+    font-size: 36px;
+}
+nav ul li
+{
+    line-height: 50px;
+    height: 50px;
+    position: relative;
+    text-align: center;
+    font-size: 20px;
+    transition: all .3s linear;
+}
+
+nav ul li ul
+{
+    display: none;
+    position: absolute;
+    left: 363px;
+    top: -20px;
+    width: 150px;
+    height: 10px;
+    transition: all .3s linear;
+}
+
+nav li:hover
+{
+    background-color: rgb(116, 115, 112);
+    transition: all .3s linear;
+}
+
+nav ul li:hover ul
+{
+    display: block;
+    border-right:none;
+    transition: all .3s linear;
+}
+nav ul li ul li
+{
+    background-color: #434446;
+    transition: all .3s linear;
+}
+nav ul li ul li:hover
+{
+    background-color: rgb(116, 115, 112);
+    transition: all .3s linear;
+}
+
+
+
+
+
+
+
+
+/* 滚动条 */
+
+::-webkit-scrollbar
+{
+    overflow-x: scroll;
+    overflow-y: scroll;
+    width : 16px;  
+    height: 0px;
+}
+::-webkit-scrollbar-thumb 
+{
+    background-color: gray;
+    background-image: -webkit-linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.2) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.2) 50%,
+        rgba(255, 255, 255, 0.2) 75%,
+        transparent 75%,
+        transparent
+    );
+}
+::-webkit-scrollbar-track 
+{
+    border-radius: 10px;
+}
+
+
+
+
+
+/* 排头 */
+.list
+{
+    margin-left: 454px;
+    margin-top: -710px;
+    width: 1050px;
+    height: 81px;
+}
+.list ul li
+{
+    width: auto;
+    text-align: center;
+    height: 50px;
+    float: left;
+    font-size: 27px;
+    color: #fff;
+    background-color: #434446;
+    border-radius: 100px;
+    margin-right: 25px;
+    font-weight: lighter;
+    padding: 12px 32px  2px 35px;
+    letter-spacing: 3px;
+}
+
+
+
+
+/* 搜索框 */
+
+div.search
+{
+    height: 40px;
+    width: 600px;	
+    position: absolute;
+    margin-top: -770px;
+    margin-left: 450px;	
+
+}
+
+div.search form
+{
+    width: 100%;
+    height: 100%;
+    border-radius: 30px;
+
+}
+
+div.search form input
+{
+    border-radius: 30px;
+    background-color: #b2b2b2;
+}
+div.search form input:nth-child(2)
+{
+    width: 400px;
+    height: 100%;
+    font-size: 20px;
+    text-indent: 40px;
+    border: none;
+    float: left;
+
+}
+
+div.search form input:nth-child(3)
+{
+    margin-left: -40px;
+    width: 100px;
+    height: 100%;
+    font-size: 20px;
+    letter-spacing: 2px;
+    border: none;
+}
+
+div.search form img
+{
+    position: absolute;
+    left: 17vw;
+    transform: translateX(-250px);
+    margin-top: 10px;
+    height: 20px;
+}
+
+
+
+
+

管理者/css/lookBook.css

+
+
+
+/* 大背景 */
+body
+{
+    width: 1420px;
+    height: 970px;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/all-back.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+
+
+/* 管理员头像及提示 */
+.page
+{
+    height: 177px;
+    width: 360px;
+    margin-top: 21px;
+    margin-left:18px;
+    transition: all 0.5s;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/page.png");
+}
+.page:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+
+/* 提示文字 */
+.page-p1
+{
+    display: block;
+    padding-top: 30px;
+    margin-left: 180px;
+    font-size: 44px;
+    color: #fff;
+    letter-spacing :6px;
+}
+.page-p2
+{
+    display: block;
+    padding-top: 14px;
+    margin-left: 185px;
+    font-size: 26px;
+    color: #fff;
+    letter-spacing :3px;
+}
+
+
+
+
+
+/* 导航栏 */
+nav
+{
+    margin-top: 50px;
+    margin-left: 18px;
+    width: 363px;
+    height: 542px;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/nav-back.png");
+    text-align: center;
+    transition: all 0.5s;
+    letter-spacing :4px;
+}
+nav:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.nav-ul
+{
+    padding-top: 100px;
+}
+.nav-li
+{
+    padding: 28px 0 28px 0;
+    font-size: 36px;
+}
+nav ul li
+{
+    line-height: 50px;
+    height: 50px;
+    position: relative;
+    text-align: center;
+    font-size: 20px;
+    transition: all .3s linear;
+}
+
+nav ul li ul
+{
+    display: none;
+    position: absolute;
+    left: 363px;
+    top: -20px;
+    width: 150px;
+    height: 10px;
+    transition: all .3s linear;
+}
+
+nav li:hover
+{
+    background-color: rgb(116, 115, 112);
+    transition: all .3s linear;
+}
+
+nav ul li:hover ul
+{
+    display: block;
+    border-right:none;
+    transition: all .3s linear;
+}
+nav ul li ul li
+{
+    background-color: #434446;
+    transition: all .3s linear;
+}
+nav ul li ul li:hover
+{
+    background-color: rgb(116, 115, 112);
+    transition: all .3s linear;
+}
+
+
+
+
+
+/* 滚动条 */
+::-webkit-scrollbar
+{
+    width : 16px;  
+    height: 0px;
+}
+::-webkit-scrollbar-thumb 
+{
+    background-color: gray;
+    background-image: -webkit-linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.2) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.2) 50%,
+        rgba(255, 255, 255, 0.2) 75%,
+        transparent 75%,
+        transparent
+    );
+}
+::-webkit-scrollbar-track 
+{
+    border-radius: 10px;
+}
+
+
+
+
+
+/* 排头 */
+.list
+{
+    margin-left: 454px;
+    margin-top: -710px;
+    width: 950px;
+    height: 81px;
+}
+.list ul li
+{
+    width: auto;
+    text-align: center;
+    height: 50px;
+    float: left;
+    font-size: 27px;
+    color: #fff;
+    background-color: #434446;
+    border-radius: 100px;
+    margin-right: 25px;
+    font-weight: lighter;
+    padding: 12px 32px  2px 35px;
+    letter-spacing: 3px;
+}
+
+
+
+
+/* 按钮 */
+.agree
+{
+    float: right;
+    background-color: #09ade2;
+    text-align: center;
+    height: 40px;
+    width: 72px;
+    color: #fff;
+    font-weight: lighter;
+    font-size: 24px;
+    border-radius: 30px;
+    padding: 7px 20px 0 20px;
+    border: none;
+    margin: 0;
+}
+
+.reject
+{
+    float: right;
+    background-color: red;
+    text-align: center;
+    height: 40px;
+    width: 70px;
+    color: #fff;
+    font-weight: lighter;
+    font-size: 24px;
+    border-radius: 30px;
+    padding: 7px 20px 5px 20px;
+    border: none;
+    margin-left: 10px;
+}
+
+
+
+
+
+
+/* 主体部分 */
+#main
+{
+    width: 1020px;
+    height: 812px;
+    margin-left: 430px;
+}
+.item
+{
+    width: 1020px;
+    height: 47px;
+    font-size: 27px;
+    color: #fff;
+    line-height: 10px;
+    margin: 30px 0 55px 0;
+}
+.part
+{
+    display: inline;
+    width: 770px;
+    height: 47px;
+}
+.part span
+{
+    width: auto;
+    padding: 0px 50px  0px 0px;
+}
+.item span
+{
+    width: auto;
+}
+
+
+
+
+
+
+

管理者/css/returnBook.css

+
+
+
+/* 大背景 */
+body
+{
+    width: 1420px;
+    height: 970px;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/all-back.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+
+
+/* 管理员头像及提示 */
+.page
+{
+    height: 177px;
+    width: 360px;
+    margin-top: 21px;
+    margin-left:18px;
+    transition: all 0.5s;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/page.png");
+}
+.page:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+
+/* 提示文字 */
+.page-p1
+{
+    display: block;
+    padding-top: 30px;
+    margin-left: 180px;
+    font-size: 44px;
+    color: #fff;
+    letter-spacing :6px;
+}
+.page-p2
+{
+    display: block;
+    padding-top: 14px;
+    margin-left: 185px;
+    font-size: 26px;
+    color: #fff;
+    letter-spacing :3px;
+}
+
+
+
+
+
+/* 导航栏 */
+nav
+{
+    margin-top: 50px;
+    margin-left: 18px;
+    width: 363px;
+    height: 542px;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/nav-back.png");
+    text-align: center;
+    transition: all 0.5s;
+    letter-spacing :4px;
+}
+nav:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.nav-ul
+{
+    padding-top: 100px;
+}
+.nav-li
+{
+    padding: 28px 0 28px 0;
+    font-size: 36px;
+}
+nav ul li
+{
+    line-height: 50px;
+    height: 50px;
+    position: relative;
+    text-align: center;
+    font-size: 20px;
+    transition: all .3s linear;
+}
+
+nav ul li ul
+{
+    display: none;
+    position: absolute;
+    left: 363px;
+    top: -20px;
+    width: 150px;
+    height: 10px;
+    transition: all .3s linear;
+}
+
+nav li:hover
+{
+    background-color: rgb(116, 115, 112);
+    transition: all .3s linear;
+}
+
+nav ul li:hover ul
+{
+    display: block;
+    border-right:none;
+    transition: all .3s linear;
+}
+nav ul li ul li
+{
+    background-color: #434446;
+    transition: all .3s linear;
+}
+nav ul li ul li:hover
+{
+    background-color: rgb(116, 115, 112);
+    transition: all .3s linear;
+}
+
+
+
+/* 滚动条 */
+::-webkit-scrollbar
+{
+    width : 16px;  
+    height: 0px;
+}
+::-webkit-scrollbar-thumb 
+{
+    background-color: gray;
+    background-image: -webkit-linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.2) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.2) 50%,
+        rgba(255, 255, 255, 0.2) 75%,
+        transparent 75%,
+        transparent
+    );
+}
+::-webkit-scrollbar-track 
+{
+    border-radius: 10px;
+}
+
+
+
+
+
+/* 排头 */
+.list
+{
+    margin-left: 454px;
+    margin-top: -710px;
+    width: 950px;
+    height: 81px;
+}
+.list ul li
+{
+    width: auto;
+    text-align: center;
+    height: 50px;
+    float: left;
+    font-size: 27px;
+    color: #fff;
+    background-color: #434446;
+    border-radius: 100px;
+    margin-right: 25px;
+    font-weight: lighter;
+    padding: 12px 32px  2px 35px;
+    letter-spacing: 3px;
+}
+
+
+
+/* 按钮 */
+.agree
+{
+    float: right;
+    background-color: #09ade2;
+    text-align: center;
+    height: 38px;
+    width: 72px;
+    color: #fff;
+    font-weight: lighter;
+    font-size: 24px;
+    border-radius: 30px;
+    padding: 7px 20px 0 20px;
+    border: none;
+    margin: 0;
+    transition: all 0.5s;
+}
+
+.reject
+{
+    float: right;
+    background-color: red;
+    text-align: center;
+    height: 38px;
+    width: 70px;
+    color: #fff;
+    font-weight: lighter;
+    font-size: 24px;
+    border-radius: 30px;
+    padding: 7px 20px 0 20px;
+    border: none;
+    margin-left: 10px;
+    transition: all 0.5s;
+}
+.agree:hover
+
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.reject:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+
+
+
+
+
+/* 主体部分 */
+#main
+{
+    width: 1020px;
+    height: 812px;
+    margin-left: 430px;
+}
+.item
+{
+    width: 1020px;
+    height: 47px;
+    font-size: 27px;
+    color: #fff;
+    margin: 30px 0 55px 0;
+}
+.part
+{
+    display: inline;
+    width: 770px;
+    line-height :3px;
+    height: 47px;
+}
+
+
+.book_name
+{   
+    float: left;
+    width: 250px;
+    text-align: center;
+    height: 36px;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    overflow:hidden;
+    line-height: 43px;
+    transition: all 0.5s;
+}   
+.book_name:hover
+{
+    overflow: visible;
+    transform: translateY(30px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.book_id
+{
+    float: left;
+    width: 80px;
+    height: 36px;
+    line-height: 43px;
+    padding: 0 30px 0 35px;
+    transition: all 0.5s;
+}
+.book_id:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.borrow_time
+{
+    float: left;
+    width: 150px;
+    height: 36px;
+    line-height: 43px;
+    padding: 0 20px 0 20px;
+    transition: all 0.5s;
+}
+.borrow_time:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.user_name
+{
+    float: left;
+    width: 81px;
+    height: 36px;
+    line-height: 43px;
+    padding: 0 0 0 50px;
+    transition: all 0.5s;
+}
+.user_name:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+

管理者/css/timeoutHint.css

+
+
+/* 大背景 */
+body
+{
+    width: 1420px;
+    height: 970px;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/all-back.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+
+
+/* 管理员头像及提示 */
+.page
+{
+    height: 177px;
+    width: 360px;
+    margin-top: 21px;
+    margin-left:18px;
+    transition: all 0.5s;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/page.png");
+}
+.page:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+
+/* 提示文字 */
+.page-p1
+{
+    display: block;
+    padding-top: 30px;
+    margin-left: 180px;
+    font-size: 44px;
+    color: #fff;
+    letter-spacing :6px;
+}
+.page-p2
+{
+    display: block;
+    padding-top: 14px;
+    margin-left: 185px;
+    font-size: 26px;
+    color: #fff;
+    letter-spacing :3px;
+}
+
+
+
+
+
+/* 导航栏 */
+nav
+{
+    margin-top: 50px;
+    margin-left: 18px;
+    width: 363px;
+    height: 542px;
+    background: url("https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/nav-back.png");
+    text-align: center;
+    transition: all 0.5s;
+    letter-spacing :4px;
+}
+nav:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.nav-ul
+{
+    padding-top: 100px;
+}
+.nav-li
+{
+    padding: 28px 0 28px 0;
+    font-size: 36px;
+}
+nav ul li
+{
+    line-height: 50px;
+    height: 50px;
+    position: relative;
+    text-align: center;
+    font-size: 20px;
+    transition: all .3s linear;
+}
+
+nav ul li ul
+{
+    display: none;
+    position: absolute;
+    left: 363px;
+    top: -20px;
+    width: 150px;
+    height: 10px;
+    transition: all .3s linear;
+}
+
+nav li:hover
+{
+    background-color: rgb(116, 115, 112);
+    transition: all .3s linear;
+}
+
+nav ul li:hover ul
+{
+    display: block;
+    border-right:none;
+    transition: all .3s linear;
+}
+
+nav ul li ul li
+{
+    background-color: #434446;
+    transition: all .3s linear;
+}
+nav ul li ul li:hover
+{
+    background-color: rgb(116, 115, 112);
+    transition: all .3s linear;
+}
+
+
+
+
+
+/* 滚动条 */
+::-webkit-scrollbar
+{
+    width : 16px;  
+    height: 0px;
+}
+::-webkit-scrollbar-thumb 
+{
+    background-color: gray;
+    background-image: -webkit-linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.2) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.2) 50%,
+        rgba(255, 255, 255, 0.2) 75%,
+        transparent 75%,
+        transparent
+    );
+}
+::-webkit-scrollbar-track 
+{
+    border-radius: 10px;
+}
+
+
+
+
+
+
+/* 排头 */
+.list
+{
+    margin-left: 454px;
+    margin-top: -710px;
+    width: 1050px;
+    height: 81px;
+}
+.list ul li
+{
+    width: auto;
+    text-align: center;
+    height: 50px;
+    float: left;
+    font-size: 27px;
+    color: #fff;
+    background-color: #434446;
+    border-radius: 100px;
+    margin-right: 25px;
+    font-weight: lighter;
+    padding: 12px 32px  2px 35px;
+    letter-spacing: 3px;
+}
+
+
+
+
+
+/* 按钮 */
+.hint
+{
+    color: #ffc600;
+    background-color: transparent;
+    text-align: center;
+    height: 44px;
+    width: 80px;
+    font-weight: lighter;
+    font-size: 24px;
+    border-radius: 30px;
+    padding: 0 20px 0 20px;
+    border: 4px solid #ffc600;
+    margin-right: 100px;
+    line-height: 45px;
+
+    float: right;
+    transition: all 0.5s;
+}
+.hint:hover
+{
+
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+
+
+
+/* 主体部分 */
+#main
+{
+    width: 1020px;
+    height: 812px;
+    margin-left: 430px;
+}
+.item
+{
+    width: 1020px;
+    height: 47px;
+    font-size: 27px;
+    color: #fff;
+    margin: 30px 0 55px 0;
+}
+.part
+{
+    display: inline;
+    width: 770px;
+    line-height :3px;
+    height: 47px;
+}
+
+
+.book_name
+{   
+    float: left;
+    width: 250px;
+    text-align: center;
+    height: 36px;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    overflow:hidden;
+    line-height: 43px;
+    transition: all 0.5s;
+}   
+.book_name:hover
+{
+    overflow: visible;
+    transform: translateY(30px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.book_id
+{
+    float: left;
+    width: 80px;
+    height: 36px;
+    line-height: 43px;
+    padding: 0 30px 0 35px;
+    transition: all 0.5s;
+}
+.book_id:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.borrow_time
+{
+    float: left;
+    width: 150px;
+    height: 36px;
+    line-height: 43px;
+    padding: 0 20px 0 20px;
+    transition: all 0.5s;
+}
+.borrow_time:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}
+.user_name
+{
+    float: left;
+    width: 81px;
+    height: 36px;
+    line-height: 43px;
+    padding: 0 0 0 50px;
+    transition: all 0.5s;
+}
+.user_name:hover
+{
+    transform: translateY(-5px); 
+    box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
+}

管理者/html/applyBook.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>管理员</title>
+    <link rel="stylesheet" href="../css/common.css">
+    <link rel="stylesheet" href="../css/applyBook.css">
+</head>
+<body>
+
+<!-- 管理员头像及提示文字 -->
+    <div class="page">
+            <p class="page-p1">你好,</p>
+            <p class="page-p2">管理员</p>
+    </div>
+
+<!-- 导航栏 -->
+    <nav>
+        <ul class="nav-ul">
+            <li class="nav-li"><a href="../html/applyBook.html">管理界面</a>
+                <ul>
+                    <li><a href="../html/applyBook.html">申请管理</a></li>
+                    <li><a href="../html/returnBook.html">还书管理</a></li>
+                    <li><a href="../html/timeputHInt.html">超时提示</a></li>
+                </ul>
+            </li>
+            <li class="nav-li"><a href="../html/lookBook.html">浏览书籍</a></li>
+            <li class="nav-li"><a href="../html/history.html">历史借阅</a></li>
+        </ul>
+    </nav>
+
+<!-- 排头 -->
+    <div class="list">
+        <ul>
+            <li>书籍名称</li>
+            <li>编号</li>
+            <li>借书时间</li>
+            <li>申请人</li>
+        </ul>
+    </div>
+    
+    <div id="main">
+    </div>
+</body>
+<script src="../js/applyBook.js"></script>
+</html>
\ No newline at end of file

管理者/html/history.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>管理员</title>
+    <link rel="stylesheet" href="../css/common.css">
+    <link rel="stylesheet" href="../css/history.css">
+</head>
+<body>
+
+<!-- 管理员头像及提示文字 -->
+    <div class="page">
+            <p class="page-p1">你好,</p>
+            <p class="page-p2">管理员</p>
+    </div>
+
+<!-- 导航栏 -->
+    <nav>
+        <ul class="nav-ul">
+            <li class="nav-li"><a href="../html/applyBook.html">管理界面</a>
+                <ul>
+                    <li class="menu-item"><a href="../html/applyBook.html">申请管理</a></li>
+                    <li class="menu-item"><a href="../html/returnBook.html">还书管理</a></li>
+                    <li class="menu-item"><a href="../html/timeputHInt.html">超时提示</a></li>
+                </ul>
+            </li>
+            <li class="nav-li"><a href="../html/lookBook.html">浏览书籍</a></li>
+            <li class="nav-li"><a href="../html/history.html">历史借阅</a></li>
+        </ul>
+    </nav>
+
+
+<!-- 搜索框 -->
+<div class="search">
+    <form action="#" method="post">
+        <img src="https://gitee.com/tznzbc/tan-zhennings-small-warehouse/raw/master/history-find.png" alt="">
+        <input type="text" name="condition" placeholder="请输入关键字">
+        <input type="submit" value="搜索">
+    </form>	
+</div>
+
+
+<!-- 排头 -->
+    <div class="list">
+        <ul>
+            <li id="book_name">书籍名称</li>
+            <li id="book_id">编号</li>
+            <li id="borrow_time">借书时间</li>
+            <li id="return_time">还书时间</li>
+            <li id="user_name">申请人</li>
+        </ul>
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file

管理者/html/lookBook.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>管理员</title>
+    <link rel="stylesheet" href="../css/common.css">
+    <link rel="stylesheet" href="../css/lookBook.css">
+</head>
+<body>
+
+<!-- 管理员头像及提示文字 -->
+    <div class="page">
+            <p class="page-p1">你好,</p>
+            <p class="page-p2">管理员</p>
+    </div>
+
+<!-- 导航栏 -->
+    <nav>
+        <ul class="nav-ul">
+            <li class="nav-li"><a href="../html/applyBook.html">管理界面</a>
+                <ul>
+                    <li><a href="../html/applyBook.html">申请管理</a></li>
+                    <li><a href="../html/returnBook.html">还书管理</a></li>
+                    <li><a href="../html/timeputHInt.html">超时提示</a></li>
+                </ul>
+            </li>
+            <li class="nav-li"><a href="../html/lookBook.html">浏览书籍</a></li>
+            <li class="nav-li"><a href="../html/history.html">历史借阅</a></li>
+        </ul>
+    </nav>
+
+<!-- 排头 -->
+    <div class="list">
+        <ul>
+            <li>书籍名称</li>
+            <li>编号</li>
+            <li>还书时间</li>
+            <li>申请人</li>
+        </ul>
+
+    </div>
+
+<!-- 书籍展示 -->
+    <div id="main">
+    </div>
+
+
+</body>
+<script src="../js/lookBook.js"></script>
+</html>
\ No newline at end of file

管理者/html/returnBook.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>管理员</title>
+    <link rel="stylesheet" href="../css/common.css">
+    <link rel="stylesheet" href="../css/returnBook.css">
+</head>
+<body>
+
+<!-- 管理员头像及提示文字 -->
+    <div class="page">
+            <p class="page-p1">你好,</p>
+            <p class="page-p2">管理员</p>
+    </div>
+
+<!-- 导航栏 -->
+    <nav>
+        <ul class="nav-ul">
+            <li class="nav-li"><a href="../html/applyBook.html">管理界面</a>
+                <ul>
+                    <li><a href="../html/applyBook.html">申请管理</a></li>
+                    <li><a href="../html/returnBook.html">还书管理</a></li>
+                    <li><a href="../html/timeputHInt.html">超时提示</a></li>
+                </ul>
+            </li>
+            <li class="nav-li"><a href="../html/lookBook.html">浏览书籍</a></li>
+            <li class="nav-li"><a href="../html/history.html">历史借阅</a></li>
+        </ul>
+    </nav>
+
+<!-- 排头 -->
+    <div class="list">
+        <ul>
+            <li>书籍名称</li>
+            <li>编号</li>
+            <li>还书时间</li>
+            <li>申请人</li>
+        </ul>
+
+    </div>
+    <div id="main">
+    </div>  
+</body>
+<script src="../js/returnBook.js"></script>
+</html>
\ No newline at end of file

管理者/html/timeputHInt.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>管理员</title>
+    <link rel="stylesheet" href="../css/common.css">
+    <link rel="stylesheet" href="../css/timeoutHint.css">
+</head>
+<body>
+
+<!-- 管理员头像及提示文字 -->
+    <div class="page">
+            <p class="page-p1">你好,</p>
+            <p class="page-p2">管理员</p>
+    </div>
+
+<!-- 导航栏 -->
+    <nav>
+        <ul class="nav-ul">
+            <li class="nav-li"><a href="../html/applyBook.html">管理界面</a>
+                <ul>
+                    <li><a href="../html/applyBook.html">申请管理</a></li>
+                    <li><a href="../html/returnBook.html">还书管理</a></li>
+                    <li><a href="../html/timeputHInt.html">超时提示</a></li>
+                </ul>
+            </li>
+            <li class="nav-li"><a href="../html/lookBook.html">浏览书籍</a></li>
+            <li class="nav-li"><a href="../html/history.html">历史借阅</a></li>
+        </ul>
+    </nav>
+
+<!-- 排头 -->
+    <div class="list">
+        <ul>
+            <li>书籍名称</li>
+            <li>编号</li>
+            <li>借书时间</li>
+            <li>申请人</li>
+        </ul>
+    </div>
+    
+    <div id="main">
+    </div>
+</body>
+<script src="../js/timeoutHint.js"></script>
+</html>
\ No newline at end of file

管理者/js/applyBook.js

+window.onload = function () 
+window.onload = function () 
+{
+
+    function render() {
+        let res = [{ user_name: '张三哥', book_id: 12,borrow_time:'2022-2-19',remark:'You',book_name:'《C语言程序设计》',user_id: 1 }, { user_name: '李四哥', book_id: 12,borrow_time:'2022-2-19',book_name:'《Java语言程序设计》',user_id: 2 },{ user_name: '王五姐', book_id: 12,borrow_time:'2022-2-19',book_name:'《C++语言程序设计》',user_id: 3 },{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 4},{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 5}]
+        let outer = document.getElementById("main");
+        let buf = '';
+
+        for (let i = 0; i < res.length; i++) 
+        {
+            buf += `
+            <div class="item">
+                <div class='part'>
+                    <div class='book_name'>${res[i].book_name}</div>
+                    <div class='book_id'>${res[i].book_id}</div>
+                    <div class='borrow_time'>${res[i].borrow_time}</div>
+                    <div id='user_name'>${res[i].user_name}</div>
+                </div>
+                <div class='reject' desc='${res[i].user_id}'>删除</div>
+                <div class='agree' desc='${res[i].user_id}'>同意</div> 
+            </div>
+                `
+                
+        }
+        outer.innerHTML = buf;
+    }
+    function remark()
+    {
+        let res = [{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',remark:'You',book_name:'《C语言程序设计设计式设计说是》',user_id: 1 }, { user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 1 },{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 1 },{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 1 },{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 1 }]
+        let blank='';
+            document.getElementById('user_name').onclick = function()
+                {       
+                    
+                    blank +=    
+                        `
+                            <div id='user_name'>${res[i].remark}</div>
+                        `
+                }                
+        document.getElementById('user_name').innerHTML = blank;
+               
+    }
+    render();
+    remark();
+    document.getElementById('main').addEventListener('click', (e) => {
+        let id = null;
+        if (e.target.innerHTML == '同意')
+            {
+                e.target.innerHTML = '已同意';
+                id = e.target.getAttribute('desc');
+            }
+        else if (e.target.innerHTML == '删除') 
+            {
+                id = e.target.getAttribute('desc');
+                e.target.parentNode.style.display = 'none';
+            }
+    })
+}

管理者/js/lookBook.js

+window.onload = function () 
+window.onload = function () 
+{
+
+    function render() {
+        let res = [{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》', user_id: 1 }, { name: 'amy', age: 14, id: 2 }, { name: 'hell', age: 15, id: 3 }]
+        let outer = document.getElementById("main");
+        let buf = '';
+        for (let i = 0; i < res.length; i++) 
+        {
+            buf += `
+            <div class="item">
+
+                <div class='part'>
+                    <span>${res[i].book_name}</span>
+                    <span>${res[i].book_id}</span>
+                    <span>${res[i].borrow_time}</span>
+                    <span>${res[i].user_name}</span>
+
+                </div>
+                <div class='reject' desc='${res[i].id}'>删除</div>
+                <div class='agree' desc='${res[i].id}'>同意</div> 
+            </div>
+                `
+        }
+
+        outer.innerHTML = buf;
+    }
+    render();
+
+    document.getElementById('main').addEventListener('click', (e) => {
+        let id = null;
+        if (e.target.innerHTML == '同意')
+            {
+                e.target.innerHTML = '已同意';
+                id = e.target.getAttribute('desc');
+                    // 使用axios将这个参数id传到后端，让后端执行同意的代码修改数据库，这里省略
+                    //注意实际写的时候可以将更新按钮为已同意的代码写在请求成功的回调函数中，下面的删除同理，这样有利于在后端处理失败时给用户反馈。但也可以先更新视图再给后端发送请求，有利于用户体验
+            }
+        else if (e.target.innerHTML == '删除') 
+            {
+                id = e.target.getAttribute('desc');
+                e.target.parentNode.style.display = 'none';
+                    // 使用axios将参数id传到后端，让后端执行删除本条数据的请求，这里省略
+            }
+    })
+
+}
\ No newline at end of file

管理者/js/returnBook.js

+window.onload = function () 
+window.onload = function () 
+{
+
+    function render() {
+        let res = [{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计设计式设计说是》',user_id: 1 }, { user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 1 },{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 1 },{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 1 },{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 1 }]
+        let outer = document.getElementById("main");
+        let buf = '';
+        for (let i = 0; i < res.length; i++) 
+        {
+            buf += `
+            <div class="item">
+
+                <div class='part'>
+                    <div class='book_name'>${res[i].book_name}</div>
+                    <div class='book_id'>${res[i].book_id}</div>
+                    <div class='borrow_time'>${res[i].borrow_time}</div>
+                    <div class='user_name'>${res[i].user_name}</div>
+                </div>
+                <div class='reject' desc='${res[i].id}'>删除</div>
+                <div class='agree' desc='${res[i].id}'>同意</div> 
+            </div>
+                `
+        }
+        outer.innerHTML = buf;
+    }
+    render();
+    document.getElementById('main').addEventListener('click', (e) => {
+        let id = null;
+        if (e.target.innerHTML == '同意')
+            {
+                e.target.innerHTML = '已同意';
+                id = e.target.getAttribute('desc');
+            }
+        else if (e.target.innerHTML == '删除') 
+            {
+                id = e.target.getAttribute('desc');
+                e.target.parentNode.style.display = 'none';
+                    // 使用axios将参数id传到后端，让后端执行删除本条数据的请求，这里省略
+            }
+    })
+}

管理者/js/timeoutHint.js

+window.onload = function () 
+window.onload = function () 
+{
+
+    function render() {
+        let res = [{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计设计式设计说是》',user_id: 1 }, { user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 1 },{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 1 },{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 1 },{ user_name: '王晓红', book_id: 12,borrow_time:'2022-2-19',book_name:'《C语言程序设计》',user_id: 1 }]
+        let outer = document.getElementById("main");
+        let buf = '';
+        for (let i = 0; i < res.length; i++) 
+        {
+            buf += `
+            <div class="item">
+
+                <div class='part'>
+                    <div class='book_name'>${res[i].book_name}</div>
+                    <div class='book_id'>${res[i].book_id}</div>
+                    <div class='borrow_time'>${res[i].borrow_time}</div>
+                    <div class='user_name'>${res[i].user_name}</div>
+                </div>
+                <div class='hint' desc='${res[i].is_timeout}'>已超时</div>
+            </div>
+                `
+        }
+        outer.innerHTML = buf;
+    }
+    render();
+    document.getElementById('main').addEventListener('click', (e) => {
+        let id = null;
+        if (e.target.innerHTML == '同意')
+            {
+                e.target.innerHTML = '已同意';
+                id = e.target.getAttribute('desc');
+            }
+        else if (e.target.innerHTML == '删除') 
+            {
+                id = e.target.getAttribute('desc');
+                e.target.parentNode.style.display = 'none';
+                    // 使用axios将参数id传到后端，让后端执行删除本条数据的请求，这里省略
+            }
+    })
+}