Skip to content

Y
YunQi-Front-end
Commit c7dea23b by 郑国强
Options

Merge branch 'variable' of… 

Merge branch 'variable' of http://coding.yundingshuyuan.com/Wangjiaqi-Mayyyyy/YunQi-Front-end into variable
parents 00b67cb4 3895aa17
Showing with 565 additions and 0 deletions
前端/管理员页面/.gitkeep 0 → 100644
++ "b/\345\211\215\347\253\257/\347\256\241\347\220\206\345\221\230\351\241\265\351\235\242/.gitkeep"
前端/管理员页面/css/.gitkeep 0 → 100644
++ "b/\345\211\215\347\253\257/\347\256\241\347\220\206\345\221\230\351\241\265\351\235\242/css/.gitkeep"
前端/管理员页面/css/index.css 0 → 100644
* {
* {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
color: #f8f9fa;
}
body {
width: 100%;
background: url(../images/bank3.png) no-repeat;
background-size: cover;
}
button {
font-size: 18px;
color: #ffffff;
border-radius: 25px;
border: none;
box-shadow: 3px 3px 10px #bdc1c1;
}
.banner {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
width: 100%;
height: 66px;
background-color: rgba(30, 52, 91, .5);
}
.logo {
display: flex;
justify-content: center;
width: 673px;
height: 86px;
}
.img {
margin-top: 7px;
}
.word {
height: 66px;
line-height: 66px;
margin-left: 20px;
font-size: 16px;
color: #f8f9fa;
}
/*导航栏*/
.nav {
width: 1253px;
height: 86px;
}
.nav {
display: flex;
justify-content: center;
}
.nav div {
width: 88px;
height: 66px;
margin-left: 5px;
border-radius: 5px;
background-color: rgba(47, 61, 95, .3);
font-size: 16px;
color: #f8f9fa;
line-height: 66px;
text-align: center;
}
/*固定定位造成影响*/
.mage {
width: 100%;
height: 86px;
}
/*搜索框*/
.search {
/*flex布局消除间隙*/
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 259px;
}
.search input {
width: 844px;
height: 99px;
font-size: 24px;
border: 1px solid #e0e2e2;
border-right: none;
box-shadow: 0px 1px 5px #e5e5e5;
border-radius: 10px;
outline: none;
line-height: 99px;
}
input::-webkit-input-placeholder {
padding-left: 24px;
font-size: 24px;
color: #bdc1c1;
}
.search button {
width: 156px;
height: 99px;
background-color: #4072b8;
}
.search button img {
width: 46px;
height: 49px;
}
/*审核*/
.big {
width: 100%;
}
.box {
width: 1200px;
margin: 0 auto;
}
.order {
display: flex;
justify-content: space-between;
align-items: center;
width: 1200px;
height: 71px;
border-bottom: 2px solid #e0e2e2;
border-top: 2px solid #e0e2e2;
}
.order img {
width: 76px;
height: 71px;
}
.order .all {
display: flex;
}
.order .check {
width: 50px;
height: 71px;
font-size: 24px;
color: #333333;
text-align: center;
line-height: 71px;
}
/*获取审批信息按钮*/
.agree button {
width: 130px;
height: 41px;
background-color: #0093c3;
line-height: 41px;
}
/*表格*/
.box table {
width: 1200px;
}
.box table tr {
height: 120px;
}
.box table tr th {
width: 156px;
font-size: 18px;
color: #333333;
background-color: #e9eff7;
}
.box table tr td {
height: 118px;
background-color: #f9fdff;
line-height: 118px;
text-align: center;
}
table .agreebtn {
width: 83px;
height: 40px;
background-color: #0093c3;
}
table .returnbtn{
width: 83px;
height: 40px;
background-color: gray;
}
/*图书库*/
.whole {
position: relative;
width: 1200px;
margin: 0 auto;
}
.whole .header {
display: flex;
justify-content: space-between;
align-items: center;
width: 1200px;
height: 71px;
border-bottom: 2px solid #e0e2e2;
border-top: 2px solid #e0e2e2;
}
.one {
display: flex;
}
.one img {
width: 65px;
height: 65px;
}
.one .book {
width: 100px;
height: 71px;
font-size: 24px;
color: #333333;
text-align: center;
line-height: 71px;
}
.header .top {
float: right;
}
/*上架按钮*/
.top button {
width: 83px;
height: 42px;
background-color: #49be70;
line-height: 41px;
}
/*空白*/
.white {
width: 1200px;
height: 20px;
}
/*书籍种类*/
.kinds {
width: 1200px;
margin: 0 auto;
}
.kinds .kind{
display: flex;
align-items: center;
width: 1200px;
height: 254px;
background-color: #f9fdff;
border-bottom: 2px solid #e0e2e2;
border-top: 2px solid #e0e2e2;
}
.kind .pic {
width: 275px;
height: 226px;
border-right: 1px solid #bdd1df;
}
.pic img {
width: 210px;
height: 224px;
}
.kind .content {
width: 648px;
height: 194px;
padding: 30px 55px;
}
.kind .content div {
margin-top: 10px;
font-size: 24px;
color: #666666;
}
.kind .btn {
width: 167px;
height: 226px;
text-align: center;
line-height: 254px;
border-left: 1px solid #bdd1df;
}
.btn button{
width: 85px;
height: 44px;
background-color: #c30000;
}
/*上架弹出框*/
.out {
position: absolute;
top: -25%;
left: 25%;
width: 550px;
height: 510px;
padding: 20px;
border: 5px solid #bdd1df;
border-radius: 40px;
z-index: 1002;
overflow: auto;
background-color: #ffffff;
}
.out .file_image {
width: 304px;
height: 160px;
background-color: #0093c3;
}
.manager_input label {
font-size: 24px;
}
.manager_input input {
width: 335px;
height: 55px;
border: 1px solid #bdd1df;
border-radius: 10px;
outline: none;
font-size: 24px;
}
.manager_input div {
margin-top: 15px;
}
.manager_input button {
width: 83px;
height: 40px;
background-color: #0093c3;
}
.submit {
margin-top: 40px;
width: 510px;
text-align: center;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .2);
z-index: 1000;
}
前端/管理员页面/images/.gitkeep 0 → 100644
++ "b/\345\211\215\347\253\257/\347\256\241\347\220\206\345\221\230\351\241\265\351\235\242/images/.gitkeep"
前端/管理员页面/index.html 0 → 100644
<!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">
<link rel="stylesheet" href="css/index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="banner">
<div class="logo">
<div class="img"><img src=""></div>
<div class="word">欢迎你,管理者!</div>
</div>
<div class="nav">
<div><a href="#he">审核</a></div>
<div><a href="#ku">图书库</a></div>
<div>用户反馈</div>
</div>
</div>
<div class="mage"></div>
<div class="search">
<input type="text" placeholder="请输入你想要输入的内容" class="input">
<button class="searchbtn"><img src="images/search.png"></button>
</div>
<div class="big">
<div class="box">
<div class="order">
<div class="all">
<img src="images/order.png" alt="">
<div class="check" id="he">审核</div>
</div>
<div class="agree"><button class="getbtn">获取审批信息</button></div>
</div>
<div class="white"></div>
<table>
<thead>
<tr>
<th>申请用户</th>
<th>邮箱</th>
<th>书名</th>
<th>发起时间</th>
<th>借阅时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="none">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button class="agreebtn">同意</button>
<button class="returnbtn">驳回</button>
</td>
</tr>
<tr class="none">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button class="agreebtn">同意</button>
<button class="returnbtn">驳回</button>
</td>
</tr>
</tbody>
</table>
<div class="white"></div>
</div>
</div>
<div class="whole">
<div class="header">
<div class="one">
<img src="images/ku.png">
<div class="book" id="ku">图书库</div>
</div>
<div class="top"><button class="topbtn">上架</button></div>
</div>
<div class="white"></div>
<ul class="kinds">
<li class="kind">
<div class="pic"><img src="images/java1.jpg" alt=""></div>
<div class="content">
<div class="bookname">《Java从入门到项目实战》</div>
<div class="intro">类型</div>
<div class="num">本数</div>
<div class="inform">介绍</div>
</div>
<div class="btn">
<button class="bottombtn">下架</button>
</div>
</li>
<li class="kind">
<div class="pic"><img src="images/java1.jpg" alt=""></div>
<div class="content">
<div class="bookname">《Java从入门到项目实战》</div>
<div class="intro">类型</div>
<div class="num">本数</div>
<div class="inform">介绍</div>
</div>
<div class="btn">
<button class="bottombtn">下架</button>
</div>
</li>
</ul>
<div class="white"></div>
<div class="out">
<div class="file_image"></div>
<div class="manager_input">
<div>
<label>书名：</label>
<input type="text" placeholder="请输入书名并**带书名号">
</div>
<div>
<label>类型：</label>
<input type="text" placeholder="输入书籍类型">
</div>
<div>
<label>数量：</label>
<input type="text" placeholder="输入书籍数">
</div>
<div>
<label>介绍：</label>
<input type="text" placeholder="写入该书介绍">
</div>
<div class="submit"><button class="submitbtn">提交</button></div></div>
</div>
</div>
</div>
<div class="mask"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
\ No newline at end of file
前端/管理员页面/js/.gitkeep 0 → 100644
++ "b/\345\211\215\347\253\257/\347\256\241\347\220\206\345\221\230\351\241\265\351\235\242/js/.gitkeep"
前端/管理员页面/js/index.js 0 → 100644
//获取用户id 正则表达式
//获取用户id 正则表达式
let oSearch = document.getElementsByClassName("searchbtn")[0]
let oInput = document.getElementsByClassName("input")
//搜索框将请求传到搜索页面
oSearch.onclick = function() {
console.log(oInput.value)
//跳转链接
location.href="http://www.baidu.com"
//传参
//window.localStorage.setItem()
}
//添加命令功能
//1.用户传入命令，后端将请求传入前端，接收命令后开始实现功能
//2.后端直接把表格传到页面
//功能
let oTbody = document.querySelector("tbody")
let oGetbtn = document.getElementsByClassName("getbtn")[0]
oGetbtn.onclick = function() {
//后端传入的数据存入一个数组中 用for循环
/*let trs = oTbody.children
let tr1 = trs[0].cloneNode(true)
oTbody.insertBefore(tr1,trs[0])*/
axios.post('http://ci8ypw.natappfree.cc/AssetManagement_war_exploded/ViewUsersServlet')
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
}
//同意功能
let oAgreebtn = document.getElementsByClassName("agreebtn")
let oNone = document.getElementsByClassName("none")
for (let i = 0; i < 2; i++) {
oAgreebtn[i].onclick = function() {
//发出请求传给后端命令，后端传给用户
//命令成功时结果 需要考虑后端命令是否已经执行完
//传参：用户名 书名
//书籍数量 判断书籍数量是否足够
alert('已同意')
oNone[i].style.display = "none"
}
}
//驳回功能
let oReturnbtn = document.getElementsByClassName("returnbtn")
for (let j = 0; j < 2; j++) {
oReturnbtn[j].onclick = function() {
//传命令 确定后端完成命令 返回 弹出
alert('已驳回')
oNone[j].style.display = "none"
}
}
//上架
let ul = document.getElementsByClassName("kinds")[0]
let oTopbtn = document.getElementsByClassName("topbtn")[0]
oTopbtn.onclick = function() {
let lis = ul.children;
let li1 = lis[0].cloneNode(true)
ul.insertBefore(li1,lis[0])
/*li1.children[1].children[0].innerHTML = "加"*/
}
//下架 将书名传到后端删除
let oBottombtn = document.getElementsByClassName("bottombtn")
let oKind = document.getElementsByClassName("kind")
let oName = document.getElementsByClassName("name")
//接收后端书籍数量
for (let k = 0; k < 1; k++) {
oBottombtn[k].onclick = function() {
//传命令 确定后端完成命令 返回 弹出
alert('已下架')
oKind[k].style.display = "none"
}
}
//书籍数量会持续改变
//axios({
//})
//从数据库中获得书籍各种信息
//数组长度 问题是图片是否可以上去
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment