Skip to content

L
Lingyun_Winter_Vacation_project
Commit a9605977 by [username]
Options

llh

parent 5c1ceffa
Showing with 2807 additions and 0 deletions
项目测试/Item/User/User.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">
<title>Document</title>
<link rel="stylesheet" href="../reset.css">
<link rel="stylesheet" href="./common.css">
</head>
<body class="user-li-hidenscroll">
<div class="user-li-bigbox">
<div class="user-li-lendbook-alert"></div>
<div class="user-li-left-box">
<div class="user-li-left-user">
<div class="user-li-left-user-sign">
<svg class="icon" aria-hidden="true" id="icon-1">
<use xlink:href="#icon-denglu"></use>
</svg>
</div>
<div class="user-li-left-user-hello">
<div class="user-li-helloT">Hi~,</div>
<div class="user-li-hellot">xxx同学</div>
</div>
</div>
<div class="user-li-left-select">
<div class="user-li-select-content" id="user-li-select-content-allbook">全部书籍</div>
<div class="user-li-select-content" id="user-li-select-content-section">借阅情况</div>
<div class="user-li-select-content" id="user-li-select-content-list">热书榜单</div>
<div class="user-li-select-content" id="user-li-select-content-remain">超时提示</div>
</div>
</div>
<div>
<!-- 全部书籍 -->
<div class="uesr-li-right-box" id="user-li-content1">
<div class="user-li-right-search">
<input type="text" placeholder="请输入书名/作者" id="user-li-search-name">
<input type="text" placeholder="请输入出版社名称" id="user-li-search-carryout">
<button id="user-li-search-button1-little">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sousuo"></use>
</svg>
</button>
<button id="user-li-search-button2">切换为出版社查询</button>
<button id="user-li-search-button3">切换为作者/书名查询</button>
</div>
<div class="user-li-right-banner">
<div class="user-li-right-banner-big">
<div class="user-li-right-banner-content" id="user-allbook-banner-1">c语言</div>
<div class="user-li-right-banner-content" id="user-allbook-banner-2">Python</div>
<div class="user-li-right-banner-content" id="user-allbook-banner-3">C++</div>
<div class="user-li-right-banner-content" id="user-allbook-banner-4">Java</div>
<div class="user-li-right-banner-content" id="user-allbook-banner-5">r</div>
<div class="user-li-right-banner-content" id="user-allbook-banner-6">go</div>
</div>
<div class="user-li-right-banner-big">
<div class="user-li-right-banner-content" id="user-allbook-banner-7">CPU</div>
<div class="user-li-right-banner-content" id="user-allbook-banner-8">Windows</div>
<div class="user-li-right-banner-content" id="user-allbook-banner-9">算法</div>
<div class="user-li-right-banner-content" id="user-allbook-banner-10">计算机</div>
<div class="user-li-right-banner-content" id="user-allbook-banner-11">Web</div>
<div class="user-li-right-banner-content" id="user-allbook-banner-12">设计</div>
</div>
</div>
<div class="user-li-right-bookbox">
<!-- 书的样本 -->
<!-- <div class="uesr-li-allbook-book">
<img class="uesr-li-allbook-book-page"></i>
<div class="uesr-li-allbook-book-introduce">
<div class="uesr-li-allbook-book-introduceT">Java</div>
<div class="uesr-li-allbook-book-introduceT">编号：Y-1-3-5</div>
<button class="uesr-li-allbook-book-introduce-Sbutton">查看书籍</button>
<button class="uesr-li-allbook-book-introduce-Bbutton">申请借书</button>
</div>
</div> -->
</div>
<div class="user-li-allbook-alert-see">
<div class="user-li-allbook-alert-see-message">作者：dadadada</div>
<div class="user-li-allbook-alert-see-message">出版社：dajdwhdawhdu</div>
<div class="user-li-allbook-alert-see-message">编号：wdadwad</div>
<div class="user-li-allbook-alert-see-message">种类：dawjddja</div>
<div class="user-li-allbook-alert-see-message">借阅次数：wdad</div>
<button class="user-li-allbook-alert-see-button">返回</button>
</div>
<div class="user-li-allbook-alert-lend">
<div class="user-li-allbook-alert-lend-confirm">确定申请借书</div>
<button class="user-li-allbook-alert-lend-button-Y">确定</button>
<button class="user-li-allbook-alert-lend-button-N">取消</button>
</div>
</div>
<!-- 借阅情况 -->
<div class="uesr-li-right-box" id="user-li-content2">
<div class="user-xz-lend-top">
<div class="user-xz-lend-top-text1">书籍名称</div>
<div class="user-xz-lend-top-text2">编号</div>
<div class="user-xz-lend-top-text3">借书时间</div>
<div class="user-xz-lend-top-text4">状态</div>
</div>
<div class="user-xz-lend-window">
<div class="user-xz-lend-window-word">确定还书吗?</div>
<button class="user-xz-lend-window-button1">确定</button>
<button class="user-xz-lend-window-button2">取消</button>
</div>
<div class="user-xz-remind-top-line"></div>
<div class="user-xz-lend-bottom">
<!-- <div class="user-xz-lend-bottom-row"> -->
<!-- <div class="user-xz-lend-bottom-row-line"></div> -->
</div>
</div>
<!-- 热书榜单 -->
<div class="uesr-li-right-box" id="user-li-content3">
<div class="use-li-list-rankbox">
<div class="user-li-list-rank">
<div class="user-li-list-rank-page-box" id="user-li-list-rankpage1">
<img class="user-li-list-rank-page">
<div class="user-li-list-rank-page-hidden" id="user-li-list-rank-page-hidden1">
<div style="height: 20px;width: 20px;"></div>
<div style="width: 150px;display: flex;flex-direction: column;">
<div style="height: 30px;"></div>
<button class="uesr-li-list-book-introduce-Sbutton">查看书籍</button>
<div style="height: 20px;"></div>
<button class="uesr-li-list-book-introduce-Bbutton">申请借书</button>
</div>
</div>
</div>
<div class="user-li-list-rankborder" id="user-li-list-ranktop2">
<div class="user-li-list-rankborder-line"></div>
<div class="user-li-list-rankborder-row"></div>
<div class="user-li-list-rankborder-line"></div>
</div>
</div>
<div class="user-li-list-rank">
<div class="user-li-list-rank-page-box" id="user-li-list-rankpage2">
<img class="user-li-list-rank-page">
<div class="user-li-list-rank-page-hidden" id="user-li-list-rank-page-hidden2">
<div style="height: 20px;width: 20px;"></div>
<div style="width: 150px;display: flex;flex-direction: column;">
<div style="height: 30px;"></div>
<button class="uesr-li-list-book-introduce-Sbutton">查看书籍</button>
<div style="height: 20px;"></div>
<button class="uesr-li-list-book-introduce-Bbutton">申请借书</button>
</div>
</div>
</div>
<div class="user-li-list-rankborder" id="user-li-list-ranktop1">
<div class="user-li-list-rankborder-line"></div>
<div class="user-li-list-rankborder-row"></div>
<div class="user-li-list-rankborder-line"></div>
</div>
</div>
<div class="user-li-list-rank">
<div class="user-li-list-rank-page-box" id="user-li-list-rankpage3">
<img class="user-li-list-rank-page">
<div class="user-li-list-rank-page-hidden" id="user-li-list-rank-page-hidden3">
<div style="height: 20px;width: 20px;"></div>
<div style="width: 150px;display: flex;flex-direction: column;">
<div style="height: 30px;"></div>
<button class="uesr-li-list-book-introduce-Sbutton">查看书籍</button>
<div style="height: 20px;"></div>
<button class="uesr-li-list-book-introduce-Bbutton">申请借书</button>
</div>
</div>
</div>
<div class="user-li-list-rankborder" id="user-li-list-ranktop3">
<div class="user-li-list-rankborder-line"></div>
<div class="user-li-list-rankborder-row"></div>
<div class="user-li-list-rankborder-line"></div>
</div>
</div>
</div>
<div class="user-li-list-ranksignbox">
<div class="user-li-list-ranksign" id="user-li-list-ranktop2-sign">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-redu2"></use>
</svg>
</div>
<div class="user-li-list-ranksign" id="user-li-list-ranktop1-sign">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-redu1"></use>
</svg>
</div>
<div class="user-li-list-ranksign" id="user-li-list-ranktop3-sign">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-redu3"></use>
</svg>
</div>
</div>
<div class="user-li-list-rankline"></div>
<div class="user-li-list-rankanotherbook"></div>
<div class="user-li-list-alert-see">
<div class="user-li-list-alert-see-message" id="user-li-list-alert-see-message-name">书名：dadadada</div>
<div class="user-li-list-alert-see-message" id="user-li-list-alert-see-message-author">作者：dajdwhdawhdu</div>
<div class="user-li-list-alert-see-message" id="user-li-list-alert-see-message-id">编号：wdadwad</div>
<div class="user-li-list-alert-see-message" id="user-li-list-alert-see-message-carry">出版社：dawjddja</div>
<div class="user-li-list-alert-see-message" id="user-li-list-alert-see-message-count">借阅次数：wdad</div>
<button class="user-li-list-alert-see-button">返回</button>
</div>
<div class="user-li-list-alert-lend">
<div class="user-li-list-alert-lend-confirm">确定申请借书</div>
<button class="user-li-list-alert-lend-button-Y">确定</button>
<button class="user-li-list-alert-lend-button-N">取消</button>
</div>
</div>
<!-- 超时提醒 -->
<div class="uesr-li-right-box" id="user-li-content4">
<div class="user-xz-remind-top">
<div class="user-xz-remind-top-text1">书籍名称</div>
<div class="user-xz-remind-top-text2">编号</div>
<div class="user-xz-remind-top-text3">借书时间</div>
<div class="user-xz-remind-top-text4">数量</div>
</div>
<div class="user-xz-remind-top-line"></div>
<div class="user-xz-remind-bottom"></div>
</div>
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../sign/iconfont.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/3.4.0/jquery.js"></script>
<script src="./User.js"></script>
</body>
</html>
\ No newline at end of file
项目测试/Item/User/User.js 0 → 100644
// 全部书籍
// 全部书籍
//左边大导航栏的切换
axios.defaults.baseURL = "http://tpne94.natappfree.cc"
$('#user-li-content2').hide()
$('#user-li-content3').hide()
$('#user-li-content4').hide()
$('.user-li-list-rank-page-hidden').hide()
//全部书籍的点击
$('#user-li-select-content-allbook').click(()=>{
$('#user-li-content1').show()
$('#user-li-content2').hide()
$('#user-li-content3').hide()
$('#user-li-content4').hide()
$('#user-li-select-content-allbook').css('border-bottom','2px solid white')
$('#user-li-select-content-section').css('border-bottom','none')
$('#user-li-select-content-list').css('border-bottom','none')
$('#user-li-select-content-remain').css('border-bottom','none')
})
//申请借阅的点击
let section_message = null
$('#user-li-select-content-section').click(()=>{
$('#user-li-content2').show()
$('#user-li-content1').hide()
$('#user-li-content3').hide()
$('#user-li-content4').hide()
$('#user-li-select-content-section').css('border-bottom','2px solid white')
$('#user-li-select-content-allbook').css('border-bottom','none')
$('#user-li-select-content-list').css('border-bottom','none')
$('#user-li-select-content-remain').css('border-bottom','none')
let userid = 'e9488a52-d5f7-46a9-828e-98471de02882'
axios.post('javaProject2_war_exploded/Was_borrowedServlet',{
user_id : userid
}).then(res=>{
console.log(res)
document.getElementsByClassName('user-xz-lend-bottom')[0].innerHTML = ' '
for (let i=0;i<res.data.length;i++){
let $row=$('<div class="user-xz-lend-bottom-row"></div>');
let $box1=$('<span class="box1"></span>');
let $box2=$('<span class="box2"></span>');
let $box3=$('<span class="box3"></span>');
let $box4=$('<span class="box4"></span>');
let $box5=$('<span class="box5"></span>');
let $button=$('<span class="user-xz-button">申请还书</span>');
let $line=$('<div class="row-line"></div>');
$('.user-xz-lend-bottom').append($row);
$row.prepend($box1);
$box1.after($box2);
$box2.after($box3);
$box3.after($box4);
$box4.after($box5);
$box5.append($button);
$row.after($line);
}
for(let i=0;i<res.data.length;i++){
document.getElementsByClassName('box1')[i].innerHTML = res.data[i].book_name
document.getElementsByClassName('box3')[i].innerHTML = res.data[i].borrow_time
}
//申请还书按钮
for(let i=0;i<res.data.length;i++){
document.getElementsByClassName('user-xz-button')[i].addEventListener('click',()=>{
$('.user-xz-lend-window').show()
})
}
})
})
//申请借阅返回按钮
$('.user-xz-lend-window-button2').click(()=>{
$('.user-xz-lend-window').hide()
})
//热书榜单的节点插入
for(let i=0;i<7;i++){
$('<div class="user-li-list-rankanotherbook-box">').appendTo($('.user-li-list-rankanotherbook'))
}
$('<div class="user-li-list-rankanotherbook-num"></div>').appendTo($('.user-li-list-rankanotherbook-box'))
$('<div class="uesr-li-list-book"></div>').appendTo($('.user-li-list-rankanotherbook-box'))
$('<img class="uesr-li-list-book-page">').appendTo($('.uesr-li-list-book'))
$('<div class="uesr-li-list-book-introduce"></div>').appendTo($('.uesr-li-list-book'))
$('<div class="uesr-li-list-book-introduceT-name">书名</div>').appendTo($('.uesr-li-list-book-introduce'))
$('<div class="uesr-li-list-book-introduceT-id">编号：Y-1-3-5</div>').appendTo($('.uesr-li-list-book-introduce'))
$('<button class="uesr-li-list-book-introduce-Sbutton">查看书籍</button>').appendTo($('.uesr-li-list-book-introduce'))
$('<button class="uesr-li-list-book-introduce-Bbutton">申请借书</button>').appendTo($('.uesr-li-list-book-introduce'))
//输出数字
function user_list_numshow(){
let num_dom = document.getElementsByClassName('user-li-list-rankanotherbook-num');
let count = 4
for(let i = 0;i<7;i++){
num_dom[i].innerHTML = count
count++
}
}
user_list_numshow();
//榜单前三的动画
$('#user-li-list-rankpage1').mouseenter(()=>{
$('#user-li-list-rank-page-hidden1').slideDown('normal')
})
$('#user-li-list-rankpage1').mouseleave(()=>{
$('#user-li-list-rank-page-hidden1').slideUp('normal')
})
$('#user-li-list-rankpage2').mouseenter(()=>{
$('#user-li-list-rank-page-hidden2').slideDown('normal')
})
$('#user-li-list-rankpage2').mouseleave(()=>{
$('#user-li-list-rank-page-hidden2').slideUp('normal')
})
$('#user-li-list-rankpage3').mouseenter(()=>{
$('#user-li-list-rank-page-hidden3').slideDown('normal')
})
$('#user-li-list-rankpage3').mouseleave(()=>{
$('#user-li-list-rank-page-hidden3').slideUp('normal')
})
//热书榜单的点击事件
let list_message = null
$('#user-li-select-content-list').click(()=>{
$('#user-li-content3').show()
$('#user-li-content2').hide()
$('#user-li-content1').hide()
$('#user-li-content4').hide()
$('#user-li-select-content-list').css('border-bottom','2px solid white')
$('#user-li-select-content-section').css('border-bottom','none')
$('#user-li-select-content-allbook').css('border-bottom','none')
$('#user-li-select-content-remain').css('border-bottom','none')
axios({
method: 'post',
url: 'javaProject2_war_exploded/Top_printServlet',
data: {
name : 1
}
}).then(res=>{
console.log(res.data)
list_message = res
// console.log(document.getElementsByClassName('uesr-li-list-book-introduceT-name')[0])
// document.getElementsByClassName('uesr-li-list-book-introduceT-name')[3].innerHTML = res.data[3].book_name
// console.log(res.data.length)
for(let i=0;i<res.data.length-3;i++){
document.getElementsByClassName('uesr-li-list-book-introduceT-name')[i].innerHTML = res.data[i+3].book_name
document.getElementsByClassName('uesr-li-list-book-introduceT-id')[i].innerHTML = '编号：'+res.data[i+3].jdid+'-'+res.data[i+3].bookshelf_id+'-'+res.data[i+3].book_same_id
}
for(let i =0;i<3;i++){
document.getElementsByClassName('user-li-list-rank-page')[i].src = res.data[i].image
}
for(let i=0;i<7;i++){
console.log(document.getElementsByClassName('uesr-li-list-book-page')[i])
document.getElementsByClassName('uesr-li-list-book-page')[i].src = res.data[i+3].image
}
});
})
//查看书籍(热书榜单)
for(let i = 0;i<10;i++){
document.getElementsByClassName('uesr-li-list-book-introduce-Sbutton')[i].addEventListener('click',()=>{
$('.user-li-list-alert-see').css('display','block')
console.log(list_message.data)
document.getElementById('user-li-list-alert-see-message-name').innerHTML ='书名：'+ list_message.data[i].book_name
document.getElementById('user-li-list-alert-see-message-author').innerHTML ='作者：'+ list_message.data[i].author
document.getElementById('user-li-list-alert-see-message-id').innerHTML ='编号：'+ list_message.data[i].jdid+'-'+list_message.data[i+3].bookshelf_id+'-'+list_message.data[i+3].book_same_id
document.getElementById('user-li-list-alert-see-message-carry').innerHTML ='出版社：'+ list_message.data[i].publisher
document.getElementById('user-li-list-alert-see-message-count').innerHTML ='借阅次数：'+ list_message.data[i].borrow_times
})
// document.getElementsByClassName('uesr-li-allbook-book-page')[i].src = list_message.data[i].image
document.getElementsByClassName('uesr-li-list-book-introduce-Bbutton')[i].addEventListener('click',()=>{
$('.user-li-list-alert-lend').css('display','block')
})
}
//查看书籍和申请借书的返回按钮
$('.user-li-list-alert-see-button').click(()=>{
$('.user-li-list-alert-see').hide()
})
$('.user-li-list-alert-lend-button-N').click(()=>{
$('.user-li-list-alert-lend').hide()
})
//超时提示的点击
let userid = 'e9488a52-d5f7-46a9-828e-98471de02882'
$('#user-li-select-content-remain').click(()=>{
$('#user-li-content4').show()
$('#user-li-content2').hide()
$('#user-li-content3').hide()
$('#user-li-content1').hide()
$('#user-li-select-content-remain').css('border-bottom','2px solid white')
$('#user-li-select-content-section').css('border-bottom','none')
$('#user-li-select-content-list').css('border-bottom','none')
$('#user-li-select-content-allbook').css('border-bottom','none')
axios.post('/javaProject2_war_exploded/Time_outServlet',{
user_id : userid
}).then(res=>{
console.log(res)
document.getElementsByClassName('user-xz-remind-bottom')[0].innerHTML = ' '
for (let i=0;i<res.data.length;i++){
let $row=$('<div class="user-xz-remind-bottom-row"></div>');
let $box1=$('<span class="box1">书名</span>');
let $box2=$('<span class="box2">编号</span>');
let $box3=$('<span class="box3">2022-2-16</span>');
let $box4=$('<span class="box4">1</span>');
let $box5=$('<span class="box5"></span>');
let $button=$('<span class="button">已超时</span>');
let $line=$('<div class="row-line"></div>');
$('.user-xz-remind-bottom').append($row);
$row.prepend($box1);
$box1.after($box2);
$box2.after($box3);
$box3.after($box4);
$box4.after($box5);
$box5.append($button);
$row.after($line);}
})
})
//全部书籍的搜索框
//出版社查询的切换
let justfy = 0
$('#user-li-search-button3').hide()
$('#user-li-search-carryout').hide()
$('#user-li-search-button2').click(()=>{
$('#user-li-search-name').hide()
$('#user-li-search-carryout').show()
$('#user-li-search-button2').hide()
$('#user-li-search-button3').show()
justfy = 1
})
//作者书名的切换
$('#user-li-search-button3').click(()=>{
$('#user-li-search-name').show()
$('#user-li-search-carryout').hide()
$('#user-li-search-button2').show()
$('#user-li-search-button3').hide()
justfy = 0
})
//输入框的传入数据
//传入名字
// document.getElementById('user-li-search-button1-little').addEventListener('click',()=>{
// if(justfy == 0){
// axios.post('',{
// = document.getElementById('user-li-search-name').value
// })
// }else{
// axios.post('',{
// = document.getElementById('user-li-search-carryout').value
// })
// }
// })
// //统一创建节点
//先创建一个全部的书籍节点
for(let i=0;i<12;i++){
$("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
}
//根据点击的banner选择创建的节点数
//先删除所有的子节点
for(let i=0;i<12;i++){
document.getElementsByClassName('user-li-right-banner-content')[i].addEventListener('click',()=>{
document.getElementsByClassName('user-li-right-bookbox')[0].innerHTML=''
//再根据点击的banner创建相应的节点
// switch(i){
// case 1:
// axios.get('').then(res=>{
// console.log(res)
// for(let j=0;j< ;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
// })
// break;
// case 2:
// axios.get('').then(res=>{
// console.log(res)
// for(let j=0;j< ;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
// })
// break;
// case 3:
// axios.get('').then(res=>{
// console.log(res)
// for(let j=0;j< ;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
// })
// break;
// case 4:
// axios.get('').then(res=>{
// console.log(res)
// for(let j=0;j< ;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
// })
// break;
// case 5:
// axios.get('').then(res=>{
// console.log(res)
// for(let j=0;j< ;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
// })
// break;
// case 6:
// axios.get('').then(res=>{
// console.log(res)
// for(let j=0;j< ;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
// })
// break;
// case 7:
// axios.get('').then(res=>{
// console.log(res)
// for(let j=0;j< ;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
// })
// break;
// case 8:
// axios.get('').then(res=>{
// console.log(res)
// for(let j=0;j< ;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
// })
// break;
// case 9:
// axios.get('').then(res=>{
// console.log(res)
// for(let j=0;j< ;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
// })
// break;
// case 10:
// axios.get('').then(res=>{
// console.log(res)
// for(let j=0;j< ;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
// })
// break;
// case 11:
// axios.get('').then(res=>{
// console.log(res)
// for(let j=0;j< ;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
// })
// break;
// case 12:
// axios.get('').then(res=>{
// console.log(res)
// for(let j=0;j< ;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
// })
// break;
// }
})
// for(let j=0;j<date.length;j++){
// $("<div class='uesr-li-allbook-book'></div>").appendTo($('.user-li-right-bookbox'))
// }
}
$("<img class='uesr-li-allbook-book-page'>").appendTo($('.uesr-li-allbook-book'))
$("<div class='uesr-li-allbook-book-introduce'></div>").appendTo($('.uesr-li-allbook-book'))
$("<div class='uesr-li-allbook-book-introduceT'>Java</div>").appendTo($('.uesr-li-allbook-book-introduce'))
$("<div class='uesr-li-allbook-book-introduceT-id'>Y-1-3-5</div>").appendTo($('.uesr-li-allbook-book-introduce'))
$("<button class='uesr-li-allbook-book-introduce-Sbutton'>查看书籍</button>").appendTo($('.uesr-li-allbook-book-introduce'))
$("<button class='uesr-li-allbook-book-introduce-Bbutton'>申请借书</button>").appendTo($('.uesr-li-allbook-book-introduce'))
// let message = new Array(3)
// message[0]={
// name:'java',
// author:'cxz',
// id:'dadad'
// }
// message[1]={
// name:'python',
// author:'cxz',
// id:'dadad'
// }
// message[2]={
// name:'c++',
// author:'cxz',
// id:'dadad',
// image:'https://gitee.com/lidouble/lilihao-img/raw/master/lilihao-itemimg/使用者页面背景(1).jpg'
// }
//查看书籍的信息
for(let i=0;i<12;i++){
document.getElementsByClassName('uesr-li-allbook-book-introduce-Sbutton')[i].addEventListener('click',()=>{
$('.user-li-allbook-alert-see').show()
})
document.getElementsByClassName('uesr-li-allbook-book-introduce-Bbutton')[i].addEventListener('click',()=>{
$('.user-li-allbook-alert-lend').css('display','block')
})
}
// 查看书籍返回按钮
document.getElementsByClassName('user-li-allbook-alert-see-button')[0].addEventListener('click',()=>{
$('.user-li-allbook-alert-see').hide()
})
//申请借书的取消按钮
document.getElementsByClassName('user-li-allbook-alert-lend-button-N')[0].addEventListener('click',()=>{
$('.user-li-allbook-alert-lend').css('display','none')
})
//借阅查询
//热书榜单
//统一添加节点
//超时提醒
项目测试/Item/User/common.css 0 → 100644
body{
body{
background-image: url("https://gitee.com/lidouble/lilihao-img/raw/master/lilihao-itemimg/使用者页面背景2.0模糊处理.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
#icon-1{
font-size: 50px;
margin-bottom: 20px;
}
button{
cursor: pointer;
}
.user-li-hidenscroll{
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
overflow-x: hidden;
overflow-y: hidden;
}
.user-li-bigbox{
width: 100%;
height: 1000px;
display: flex;
justify-content: space-around;
flex: none;
background-repeat: no-repeat;
}
/* .user-li-lendbook-alert{
width: 200px;
height: 200px;
background-color: white;
z-index: 2;
} */
.user-li-left-box{
width: 300px;
height: 600px;
float: left;
margin-top: 22px;
}
.uesr-li-right-box{
width: 1140px;
height: 980px;
margin-top: 22px;
position: relative;
}
.user-li-left-user{
width: 100%;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 30px 30px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 2px 2px #555250;
transition: transform 0.5s ease-in-out;
}
.user-li-left-user:hover{
transform: translate(0,-2px);
}
.user-li-left-user-sign{
width: 70px;
height: 70px;
color: white;
border: 2px solid white;
border-radius: 70px;
text-align: center;
line-height: 106px;
font-size: 50px;
transition: transform 0.5s ease-in-out;
}
.user-li-left-user-sign:hover{
transform: scale(1.1,1.1);
}
.user-li-left-user-hello{
margin-left: 20px;
width: 128px;
height: 105px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.user-li-helloT{
width: 127px;
height: 44px;
font-size: 30px;
color: white;
letter-spacing: 5px;
}
.user-li-hellot{
width: 127px;
height: 38px;
font-size: 21px;
color: white;
letter-spacing: 10px;
margin-left: 15px;
}
.user-li-left-select{
margin-top: 55px;
width: 100%;
height: 500px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 30px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 2px 2px 2px #555250;
transition: transform 0.5s ease-in-out;
cursor: pointer;
}
.user-li-left-select:hover{
transform: translate(0,-5px);
}
.user-li-select-content{
width: 100%;
height: 90px;
background-color:rgba(0, 0, 0, 0.1);
font-size: 30px;
color: white;
text-align: center;
line-height: 90px;
transition: background-color 0.5s ease-in-out;
}
.user-li-left-select div:hover{
background-color: rgba(255, 255, 255, 0.5);
}
#user-li-content1{
position: relative;
left: 50px;
}
.user-li-right-search input{
width: 506px;
height: 20px;
border-radius: 70px;
background-color: rgba(180, 178, 176, 0.7);
color: white;
box-shadow: 2px 1px 2px #555250;
}
.user-li-right-search button{
font-size: 30px;
position: relative;
top: 5px;
left: -60px;
color: black;
padding: 5px;
transition: transform 0.5s ease-in-out;
}
.user-li-right-search button:hover{
transform:scale(1.05,1.05);
}
#user-li-search-button2,#user-li-search-button3{
padding: 10px;
font-size: 15px;
margin-left: 30px;
border-radius: 50px;
color: white;
background-color: rgba(180, 178, 176, 0.7);
box-shadow: 2px 2px 2px #555250;
transition: transform 0.5s ease-in-out , background-color 0.5s ease-in-out,color 0.5s ease-in-out;
}
#user-li-search-button2:hover,#user-li-search-button3:hover{
transform: scale(1.1,1.1);
background-color: white;
color: black;
}
.user-li-right-banner{
margin-top: 42px;
width: 718px;
height: 88px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.user-li-right-banner-big{
width: 100%;
height: 36px;
display: flex;
justify-content: space-between;
}
.user-li-right-banner-content{
width: 90px;
height: 36px;
border-radius: 30px;
color: white;
text-align: center;
line-height: 36px;
font-size: 22px;
box-shadow: 2px 1px 2px #555250;
transition: transform 0.5s ease-in-out , color 0.5s ease-in-out;
background-color: rgba(180, 178, 176, 0.8);
cursor: pointer;
}
.user-li-right-banner-content:hover{
transform: translate(0,-5px);
color: black;
}
#user-allbook-banner-8,#user-allbook-banner-2{
width: 120px;
}
/* #user-allbook-banner-3,#user-allbook-banner-2{
margin-left: 18px;
} */
.user-li-right-bookbox{
width: 928px;
height: 714px;
margin-top: 50px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
overflow-y:scroll;
/* border: 2px solid white; */
}
.user-li-right-bookbox::-webkit-scrollbar{
display: none;
}
.uesr-li-allbook-book{
margin-top: 5px;
margin-bottom: 36px;
width: 370px;
height: 215px;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
border-radius: 10px;
box-shadow: 2px 2px 2px #555250;
transition: transform 0.5s ease-in-out;
}
.uesr-li-allbook-book:hover{
transform: translate(0,-5px);
}
.uesr-li-allbook-book-page{
width: 180px;
height: 215px;
border-radius: 10px;
/* background-color: white; */
}
.uesr-li-allbook-book-introduce{
padding-left: 10px;
width: 194px;
height: 215px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.uesr-li-allbook-book-introduceT{
font-size: 28px;
color: white;
}
.uesr-li-allbook-book-introduceT-id{
font-size: 28px;
color: white;
}
.uesr-li-allbook-book-introduce-Sbutton{
width: 140px;
height: 43px;
padding: 0px;
font-size: 20px;
color: white;
border: 2px solid white;
border-radius: 30px;
transition: background-color 0.5s ease-in-out , color 0.5s ease-in-out;
}
.uesr-li-allbook-book-introduce-Sbutton:hover{
background-color: white;
color: black;
}
.uesr-li-allbook-book-introduce-Bbutton{
width: 140px;
height: 43px;
margin-bottom: 15px;
font-size: 20px;
color: white;
border-radius: 30px;
background-color: rgba(10, 173, 227, 1);
transition: background-color 0.5s ease-in-out , color 0.5s ease-in-out;
}
.uesr-li-allbook-book-introduce-Bbutton:hover{
background-color: greenyellow;
color: black;
}
.user-li-allbook-alert-see{
width: 700px;
height: 500px;
background-color: rgba(0, 0, 0, 0.8);
position:absolute;
top: 200px;
left: 10px;
border-radius: 30px;
display: none;
}
.user-li-allbook-alert-see-message{
width: 500px;
height: 50px;
margin-top: 25px;
margin-left: 20px;
margin-bottom: 10px;
/* background-color: white; */
line-height: 50px;
font-size: 30px;
color: white;
/* line-height: px; */
}
.user-li-allbook-alert-see-button{
width: 200px;
height: 50px;
font-size: 25px;
background-color: rgba(10, 173, 227, 1);
border-radius: 30px;
cursor: pointer;
margin-top: 30px;
margin-left: 250px;
transition: background-color 0.5s ease-in-out,color 0.5s ease-in-out;
}
.user-li-allbook-alert-see-button:hover{
background-color: yellowgreen;
color:black;
}
.user-li-allbook-alert-lend{
width: 400px;
height: 150px;
background-color: rgba(0, 0, 0, 0.9);
color: white;
position:absolute;
top: 350px;
left: 150px;
border-radius: 30px;
display: none;
}
.user-li-allbook-alert-lend-confirm{
margin-left: 110px;
font-size: 30px;
margin-top: 25px;
}
.user-li-allbook-alert-lend-button-Y{
width: 80px;
height: 40px;
border-radius: 30px;
margin-left: 100px;
margin-top: 20px;
background-color: rgba(10, 173, 227, 1);
}
.user-li-allbook-alert-lend-button-N{
width: 80px;
height: 40px;
border: 2px solid white;
border-radius: 30px;
margin-left: 35px;
margin-top: 20px;
line-height: 11px;
/* background-color: aqua; */
}
/*借阅查询*/
.user-xz-lend-top{
margin-left: 60px;
height:138px;
width:800px;
display:flex;
justify-content: space-between;
align-items: center;
}
[class^="user-xz-lend-top-text"]{
height:64px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50px;
font-size:28px;
color:white;
text-align: center;
line-height: 64px;
}
.user-xz-lend-top-text1{
width: 162px;
}
.user-xz-lend-top-text2{
width:136px;
}
.user-xz-lend-top-text3{
width:190px;
}
.user-xz-lend-top-text4{
width:162px;
}
.user-xz-lend-top-line{
height:6px;
width:1027px;
background: linear-gradient(244deg,rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%);
}
.user-xz-lend-bottom{
height:843px;
width:1140px;
overflow-y: auto;
}
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.user-xz-lend-bottom-row{
margin-left: 46px;
height:104px;
width:1027px;
display:flex;
justify-content: space-around;
align-items: center;
transition: transform 0.5s ease-in-out;
}
.user-xz-lend-bottom-row:hover{
transform: scale(1.05,1.05);
}
[class^="box"]{
height:100px;
color:white;
text-align:center;
line-height:100px;
font-size:30px;
}
.user-xz-button{
height:42px;
width:122px;
background-color: #0aade3;
border-radius: 50px;
font-size:22px;
color:white;
text-align: center;
line-height: 42px;
display: inline-block;
transition: background-color 0.5s ease-in-out , color 0.5s ease-in-out;
cursor: pointer;
}
.user-xz-button:hover{
background-color: greenyellow;
color: black;
}
.user-xz-remind-top-line{
margin-left: 46px;
height:4px;
width:100%;
background: linear-gradient(244deg,rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%);
}
.user-xz-lend-window{
width: 400px;
height: 150px;
background-color: rgba(0, 0, 0, 0.9);
color: white;
position:absolute;
top: 350px;
left: 150px;
border-radius: 30px;
display: none;
z-index: 100;
}
.user-xz-lend-window-word{
margin-left: 120px;
font-size: 30px;
margin-top: 25px;
}
.user-xz-lend-window-button1{
width: 80px;
height: 40px;
border-radius: 30px;
margin-left: 110px;
margin-top: 20px;
background-color: rgba(10, 173, 227, 1);
}
.user-xz-lend-window-button2{
width: 80px;
height: 40px;
border: 2px solid white;
border-radius: 30px;
margin-left: 20px;
margin-top: 20px;
line-height: 11px;
}
/* 热书榜单*/
.use-li-list-rankbox{
width: 100%;
height: 396px;
/* background-color: aquamarine; */
display: flex;
justify-content: space-around;
align-items: flex-end;
}
.user-li-list-rank{
width: 240px;
height: 400px;
/* background-color: white; */
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.user-li-list-rankborder{
width: 240px;
height: 100px;
display: flex;
padding-top: 20px;
}
.user-li-list-rankborder-line{
width: 5px;
height: 100%;
background: linear-gradient(to bottom , rgba(180, 178, 176, 0.8)10%,rgba(180, 178, 176, 0.4)30%,rgba(180, 178, 176, 0.3)60%,
rgba(180, 178, 176, 0.2)80%,rgba(180, 178, 176, 0)100%);
}
.user-li-list-rankborder-row{
width: 100%;
height: 5px;
background-color: rgba(180, 178, 176, 0.7);
}
.user-li-list-rank-page-box{
position: relative;
}
.user-li-list-rank-page{
width: 180px;
height: 200px;
background-color: white;
border-radius: 10px;
box-shadow: 2px 2px 2px #555250;
transition: transform 1s ease-in-out;
/* position: relative; */
}
.user-li-list-rank-page-hidden{
position: absolute ;
bottom: 0px ;
width: 180px;
height: 155px;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
}
.user-li-list-rank-page:hover{
transform: scale(1.05,1.05);
}
#user-li-list-ranktop2{
height: 130px;
}
#user-li-list-ranktop1{
height: 180px;
/* background-image: url('https://gitee.com/lidouble/lilihao-img/raw/master/lilihao-itemimg/80乘180.png'); */
}
#user-li-list-ranktop3{
height: 80px;
}
.user-li-list-ranksignbox{
display: flex;
justify-content: space-around;
}
.user-li-list-ranksign{
width: 50px;
height: 50px;
/* background-color: black; */
align-items: center;
line-height: 60px;
position: relative;
}
#user-li-list-ranktop2-sign{
top: -100px;
font-size: 50px;
}
#user-li-list-ranktop1-sign{
top: -130px;
font-size: 60px;
}
#user-li-list-ranktop3-sign{
top: -75px;
font-size: 40px;
}
.user-li-list-rankline{
width: 100%;
height: 5px;
background: linear-gradient(244deg,rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%);
/* border-color: linear-gradient(); */
}
.user-li-list-rankanotherbook{
width: 90%;
height: 470px;
/* background-color: aqua; */
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 30px;
margin-left: 20px;
}
.user-li-list-rankanotherbook::-webkit-scrollbar{
display: none;
}
.user-li-list-rankanotherbook-box{
width: 450px;
height: 215px;
margin-top: 10px;
margin-bottom: 20px;
/* background-color: rgba(0, 0, 0, 0.5); */
display: flex;
align-items: center;
justify-content: space-between;
/* box-shadow: 2px 2px 2px #555250; */
transition: transform 0.5s ease-in-out;
}
.user-li-list-rankanotherbook-num{
width: 50px;
height: 50px;
border-radius: 50px;
border: 2px solid white;
color: white;
background-color: transparent;
text-align: center;
line-height: 50px;
font-size: 40px;
}
.user-li-list-rankanotherbook-book{
width: 390px;
height: 215px;
display: flex;
border-radius: 10px;
background-color: #0aade3;
/* transition: transform 0.5s ease-in-out; */
}
.uesr-li-list-book{
width: 390px;
height: 215px;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
border-radius: 10px;
box-shadow: 2px 2px 2px #555250;
}
.user-li-list-rankanotherbook-box:hover{
transform: translate(0,-5px);
}
.uesr-li-list-book-page{
width: 180px;
height: 215px;
border-radius: 10px;
/* background-color: white; */
}
.uesr-li-list-book-introduce{
padding-left: 10px;
width: 194px;
height: 215px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.uesr-li-list-book-introduceT-name,.uesr-li-list-book-introduceT-id{
width: 194px;
font-size: 28px;
color: white;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.uesr-li-list-book-introduce-Sbutton{
width: 140px;
height: 43px;
font-size: 20px;
color: white;
border: 2px solid white;
border-radius: 30px;
transition: background-color 0.5s ease-in-out , color 0.5s ease-in-out;
line-height: 15px;
}
.uesr-li-list-book-introduce-Sbutton:hover{
background-color: white;
color: black;
}
.uesr-li-list-book-introduce-Bbutton{
width: 140px;
height: 43px;
margin-bottom: 15px;
font-size: 20px;
color: white;
border-radius: 30px;
background-color: rgba(10, 173, 227, 1);
transition: background-color 0.5s ease-in-out , color 0.5s ease-in-out;
}
.uesr-li-list-book-introduce-Bbutton:hover{
background-color: greenyellow;
color: black;
}
.user-li-list-alert-see{
width: 700px;
height: 500px;
background-color: rgba(0, 0, 0, 0.9);
position:absolute;
top: 200px;
left: 10px;
border-radius: 30px;
display: none;
}
.user-li-list-alert-see-message{
width: 500px;
height: 50px;
margin-top: 25px;
margin-left: 20px;
margin-bottom: 10px;
/* background-color: white; */
line-height: 50px;
font-size: 30px;
color: white;
/* line-height: px; */
}
#user-li-list-alert-see-message-name{
width: 700px;
}
.user-li-list-alert-see-button{
width: 200px;
height: 50px;
font-size: 25px;
background-color: rgba(10, 173, 227, 1);
border-radius: 30px;
cursor: pointer;
margin-top: 30px;
margin-left: 250px;
transition: background-color 0.5s ease-in-out,color 0.5s ease-in-out;
}
.user-li-list-alert-see-button:hover{
background-color: yellowgreen;
color:black;
}
.user-li-list-alert-lend{
width: 400px;
height: 150px;
background-color: rgba(0, 0, 0, 0.9);
color: white;
position:absolute;
top: 350px;
left: 150px;
border-radius: 30px;
display: none;
}
.user-li-list-alert-lend-confirm{
margin-left: 110px;
font-size: 30px;
margin-top: 25px;
}
.user-li-list-alert-lend-button-Y{
width: 80px;
height: 40px;
border-radius: 30px;
margin-left: 100px;
margin-top: 20px;
background-color: rgba(10, 173, 227, 1);
}
.user-li-list-alert-lend-button-N{
width: 80px;
height: 40px;
border: 2px solid white;
border-radius: 30px;
margin-left: 35px;
margin-top: 20px;
line-height: 11px;
}
/*超时提醒*/
.user-xz-remind-box{
position:absolute;
top:22px;
left:380px;
height:980px;
width:1140px;
}
.user-xz-remind-top{
margin-left: 60px;
height:136px;
width:800px;
display:flex;
justify-content: space-around;
align-items: center;
}
[class^="user-xz-remind-top-text"]{
top:60px;
height:64px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50px;
font-size:28px;
color:white;
text-align: center;
line-height: 64px;
}
.user-xz-remind-top-text1{
width: 162px;
background-color: rgba(0, 0, 0, 0.5);
}
.user-xz-remind-top-text2{
width:136px;
background-color: rgba(0, 0, 0, 0.5);
}
.user-xz-remind-top-text3{
width:190px;
background-color: rgba(0, 0, 0, 0.5);
}
.user-xz-remind-top-text4{
width:162px;
background-color: rgba(0, 0, 0, 0.5);
}
.user-xz-remind-top-line{
/* margin-left: 46px; */
position: relative;
left: -20px;
height:6px;
width:100%;
background: linear-gradient(244deg,rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%);
}
.user-xz-remind-bottom{
position:relative;
/* top:150px; */
height:843px;
width:1140px;
left: -5px;
overflow-y: auto;
}
::-webkit-scrollbar {
display: none;
}
.user-xz-remind-bottom-row{
/*position:absolute;*/
margin-left: 46px;
height:104px;
width:1027px;
display:flex;
justify-content: space-around;
align-items: center;
transition: transform 0.5s ease-in-out;
}
.user-xz-remind-bottom-row:hover{
transform: scale(1.05,1.05);
}
[class^="box"]{
height:100px;
color:white;
text-align:center;
line-height:100px;
font-size:30px;
}
.box1{
width:184px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.box2{
width:176px;
}
.box3{
width:228px;
}
.box4{
width:174px;
}
.box5{
width:204px;
}
.button{
height:42px;
width:122px;
border-width:4px;
border-color: #bb9201;
border-style:solid;
border-radius: 50px;
font-size:22px;
color:#bb9201;
text-align: center;
line-height: 42px;
display: inline-block;
transition: background-color 0.5s ease-in-out,border 0.5 ease-in-out,color 0.5s ease-in-out;
}
.button:hover{
background-color: rgba(227, 179 ,14);
border: 0px;
color: white;
}
.row-line{
height:4px;
width:1027px;
background: linear-gradient(244deg,rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%);
}
\ No newline at end of file
项目测试/Item/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">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<script>
let time = parseInt( new Date().getTime()/86400000)
// let time = new Date().getTime()/86400000
document.getElementById('test').innerHTML = time
</script>
</body>
</html>
\ No newline at end of file
项目测试/Item/request.js 0 → 100644
axios.defaults.baseURL = ""
axios.defaults.baseURL = ""
//请求拦截器
ServiceWorker.interceptors.request.use((config) => {
return config
}, error => {
return Promise.reject(error)
})
//响应拦截
ServiceWorker.interceptors.response.use(reponse => {
return response
}, error => {
return Promise.reject(error)
})
\ No newline at end of file
项目测试/Item/reset.css 0 → 100644
*{
*{
border: 0px;
margin: 0px;
padding: 0px;
}
input{
outline: none;
padding: 10px;
}
button{
outline: none;
padding: 10px;
background-color: rgba(180, 178, 176, 0);
border: 0px;
font-size: 18px;
color: white;
}
input::-webkit-input-placeholder{
color:black;
font-size: 20px;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:black;
font-size: 20px;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:black;
font-size: 20px;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:black;
font-size: 20px;
}
\ No newline at end of file
项目测试/Item/sign/demo.css 0 → 100644
/* Logo 字体 */
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
项目测试/Item/sign/demo_index.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe752;</span>
<div class="name">搜索</div>
<div class="code-name">&amp;#xe752;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">登录</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe629;</span>
<div class="name">热度2</div>
<div class="code-name">&amp;#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62a;</span>
<div class="name">热度1</div>
<div class="code-name">&amp;#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62b;</span>
<div class="name">热度3</div>
<div class="code-name">&amp;#xe62b;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.ttf?t=1645093994033') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-sousuo"></span>
<div class="name">
搜索
</div>
<div class="code-name">.icon-sousuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-denglu"></span>
<div class="name">
登录
</div>
<div class="code-name">.icon-denglu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-redu2"></span>
<div class="name">
热度2
</div>
<div class="code-name">.icon-redu2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-redu1"></span>
<div class="name">
热度1
</div>
<div class="code-name">.icon-redu1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-redu3"></span>
<div class="name">
热度3
</div>
<div class="code-name">.icon-redu3
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sousuo"></use>
</svg>
<div class="name">搜索</div>
<div class="code-name">#icon-sousuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-denglu"></use>
</svg>
<div class="name">登录</div>
<div class="code-name">#icon-denglu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-redu2"></use>
</svg>
<div class="name">热度2</div>
<div class="code-name">#icon-redu2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-redu1"></use>
</svg>
<div class="name">热度1</div>
<div class="code-name">#icon-redu1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-redu3"></use>
</svg>
<div class="name">热度3</div>
<div class="code-name">#icon-redu3</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
项目测试/Item/sign/iconfont.css 0 → 100644
@font-face {
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1645093994033') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-sousuo:before {
content: "\e752";
}
.icon-denglu:before {
content: "\e62e";
}
.icon-redu2:before {
content: "\e629";
}
.icon-redu1:before {
content: "\e62a";
}
.icon-redu3:before {
content: "\e62b";
}
项目测试/Item/sign/iconfont.js 0 → 100644
!function(e){var t,n,c,o,s,i='<svg><symbol id="icon-sousuo" viewBox="0 0 1024 1024"><path d="M953.474215 908.234504l-152.576516-163.241391c61.92508-74.48211 95.81186-167.36973 95.81186-265.073744 0-229.294809-186.63531-415.930119-416.102133-415.930119-229.294809 0-415.930119 186.63531-415.930119 415.930119s186.63531 415.930119 415.930119 415.930119c60.032925 0 118.00168-12.55703 172.186125-37.327062 16.169326-7.396607 23.221905-26.318159 15.825298-42.315471-7.396607-16.169326-26.318159-23.221905-42.315471-15.825298-45.927768 20.813707-94.951789 31.478582-145.695952 31.478582-194.031917 0-351.94087-157.908953-351.94087-351.94087 0-194.031917 157.908953-351.94087 351.94087-351.94087 194.031917 0 351.94087 157.908953 351.94087 351.94087 0 91.339493-34.918864 177.86259-98.048043 243.743995-12.213002 12.729044-11.868974 33.026709 0.860071 45.239711 1.032085 0.860071 2.236183 1.204099 3.268268 2.064169 0.860071 1.204099 1.376113 2.752226 2.408198 3.956325l165.477574 177.00252c6.192508 6.70855 14.793214 10.148833 23.393919 10.148833 7.912649 0 15.653284-2.92424 21.845792-8.600706C964.827146 941.433227 965.515202 921.135562 953.474215 908.234504z" ></path></symbol><symbol id="icon-denglu" viewBox="0 0 1024 1024"><path d="M819.292 623.785c-40.844-40.844-88.387-72.547-140.151-94.102 69.587-51.392 114.809-133.97 114.809-226.921 0-155.467-126.483-281.951-281.951-281.951s-281.951 126.483-281.951 281.951c0 92.95 45.221 175.529 114.809 226.921-51.762 21.555-99.308 53.26-140.151 94.102-82.080 82.080-127.284 191.213-127.284 307.292 0 32.174 26.082 58.254 58.254 58.254s58.254-26.080 58.254-58.254c0-175.385 142.685-318.068 318.068-318.068 175.385 0 318.068 142.685 318.068 318.068 0 32.174 26.080 58.254 58.254 58.254s58.254-26.080 58.254-58.254c0-116.081-45.204-225.211-127.284-307.292zM512 137.32c91.225 0 165.442 74.218 165.442 165.442s-74.218 165.442-165.442 165.442-165.442-74.218-165.442-165.442 74.218-165.442 165.442-165.442z" ></path></symbol><symbol id="icon-redu2" viewBox="0 0 1024 1024"><path d="M394.56088 1012.659848c-60.638314-32.996693-103.951396-90.957471-106.471429-159.155887-3.543798-127.497962 92.926248-190.026302 149.942013-275.392448 81.743598-122.85165 59.378297-199.082673 59.378297-199.082674s68.198416 35.280474 107.888949 166.085981c12.363916 38.666769 14.805199 77.412289 11.025148 113.874029-6.063831 92.138737-49.455664 175.142352-49.455664 175.142351s75.601015-14.805199 96.627547-141.121894c34.729216 33.075444 66.938399 80.719834 70.560948 130.884257 6.300085 86.468661-49.376913 166.007229-133.719296 200.106437 145.925709-30.712912 250.270861-144.429439 286.181343-227.511805 45.833115-104.581404 33.390448-197.822656 25.987849-278.699992-9.922633-110.25148 32.130431-192.15258 32.130432-192.15258s-80.562332 21.57779-139.94063 111.353995c-27.247866 41.029301-38.430516 101.27386-38.430516 101.27386s6.221334-53.393217-32.287933-151.202031C695.783675 291.378913 660.896957 257.279705 639.870424 186.876259 612.701309 92.37499 673.339624 0.236253 673.339624 0.236253S433.148898 41.186803 324.078684 233.418134c-96.548796 170.653541-56.858263 273.029916-56.858264 273.029916s-40.95055-35.280474-61.977082-84.263631c-21.026532-48.825656-16.38022-93.162501-16.38022-93.162501S18.130826 501.880489 101.213191 719.233408c55.755749 152.383296 163.487195 252.47589 293.505191 293.42644" fill="#FE7A41" ></path></symbol><symbol id="icon-redu1" viewBox="0 0 1024 1024"><path d="M394.56088 1012.659848c-60.638314-32.996693-103.951396-90.957471-106.471429-159.155887-3.543798-127.497962 92.926248-190.026302 149.942013-275.392448 81.743598-122.85165 59.378297-199.082673 59.378297-199.082674s68.198416 35.280474 107.888949 166.085981c12.363916 38.666769 14.805199 77.412289 11.025148 113.874029-6.063831 92.138737-49.455664 175.142352-49.455664 175.142351s75.601015-14.805199 96.627547-141.121894c34.729216 33.075444 66.938399 80.719834 70.560948 130.884257 6.300085 86.468661-49.376913 166.007229-133.719296 200.106437 145.925709-30.712912 250.270861-144.429439 286.181343-227.511805 45.833115-104.581404 33.390448-197.822656 25.987849-278.699992-9.922633-110.25148 32.130431-192.15258 32.130432-192.15258s-80.562332 21.57779-139.94063 111.353995c-27.247866 41.029301-38.430516 101.27386-38.430516 101.27386s6.221334-53.393217-32.287933-151.202031C695.783675 291.378913 660.896957 257.279705 639.870424 186.876259 612.701309 92.37499 673.339624 0.236253 673.339624 0.236253S433.148898 41.186803 324.078684 233.418134c-96.548796 170.653541-56.858263 273.029916-56.858264 273.029916s-40.95055-35.280474-61.977082-84.263631c-21.026532-48.825656-16.38022-93.162501-16.38022-93.162501S18.130826 501.880489 101.213191 719.233408c55.755749 152.383296 163.487195 252.47589 293.505191 293.42644" fill="#D60000" ></path></symbol><symbol id="icon-redu3" viewBox="0 0 1024 1024"><path d="M394.56088 1012.659848c-60.638314-32.996693-103.951396-90.957471-106.471429-159.155887-3.543798-127.497962 92.926248-190.026302 149.942013-275.392448 81.743598-122.85165 59.378297-199.082673 59.378297-199.082674s68.198416 35.280474 107.888949 166.085981c12.363916 38.666769 14.805199 77.412289 11.025148 113.874029-6.063831 92.138737-49.455664 175.142352-49.455664 175.142351s75.601015-14.805199 96.627547-141.121894c34.729216 33.075444 66.938399 80.719834 70.560948 130.884257 6.300085 86.468661-49.376913 166.007229-133.719296 200.106437 145.925709-30.712912 250.270861-144.429439 286.181343-227.511805 45.833115-104.581404 33.390448-197.822656 25.987849-278.699992-9.922633-110.25148 32.130431-192.15258 32.130432-192.15258s-80.562332 21.57779-139.94063 111.353995c-27.247866 41.029301-38.430516 101.27386-38.430516 101.27386s6.221334-53.393217-32.287933-151.202031C695.783675 291.378913 660.896957 257.279705 639.870424 186.876259 612.701309 92.37499 673.339624 0.236253 673.339624 0.236253S433.148898 41.186803 324.078684 233.418134c-96.548796 170.653541-56.858263 273.029916-56.858264 273.029916s-40.95055-35.280474-61.977082-84.263631c-21.026532-48.825656-16.38022-93.162501-16.38022-93.162501S18.130826 501.880489 101.213191 719.233408c55.755749 152.383296 163.487195 252.47589 293.505191 293.42644" fill="#FFBF3B" ></path></symbol></svg>',d=(d=document.getElementsByTagName("script"))[d.length-1].getAttribute("data-injectcss"),r=function(e,t){t.parentNode.insertBefore(e,t)};if(d&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}function l(){s||(s=!0,c())}function a(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(a,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=i,i=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?r(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(c=t,o=e.document,s=!1,a(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window);
!function(e){var t,n,c,o,s,i='<svg><symbol id="icon-sousuo" viewBox="0 0 1024 1024"><path d="M953.474215 908.234504l-152.576516-163.241391c61.92508-74.48211 95.81186-167.36973 95.81186-265.073744 0-229.294809-186.63531-415.930119-416.102133-415.930119-229.294809 0-415.930119 186.63531-415.930119 415.930119s186.63531 415.930119 415.930119 415.930119c60.032925 0 118.00168-12.55703 172.186125-37.327062 16.169326-7.396607 23.221905-26.318159 15.825298-42.315471-7.396607-16.169326-26.318159-23.221905-42.315471-15.825298-45.927768 20.813707-94.951789 31.478582-145.695952 31.478582-194.031917 0-351.94087-157.908953-351.94087-351.94087 0-194.031917 157.908953-351.94087 351.94087-351.94087 194.031917 0 351.94087 157.908953 351.94087 351.94087 0 91.339493-34.918864 177.86259-98.048043 243.743995-12.213002 12.729044-11.868974 33.026709 0.860071 45.239711 1.032085 0.860071 2.236183 1.204099 3.268268 2.064169 0.860071 1.204099 1.376113 2.752226 2.408198 3.956325l165.477574 177.00252c6.192508 6.70855 14.793214 10.148833 23.393919 10.148833 7.912649 0 15.653284-2.92424 21.845792-8.600706C964.827146 941.433227 965.515202 921.135562 953.474215 908.234504z" ></path></symbol><symbol id="icon-denglu" viewBox="0 0 1024 1024"><path d="M819.292 623.785c-40.844-40.844-88.387-72.547-140.151-94.102 69.587-51.392 114.809-133.97 114.809-226.921 0-155.467-126.483-281.951-281.951-281.951s-281.951 126.483-281.951 281.951c0 92.95 45.221 175.529 114.809 226.921-51.762 21.555-99.308 53.26-140.151 94.102-82.080 82.080-127.284 191.213-127.284 307.292 0 32.174 26.082 58.254 58.254 58.254s58.254-26.080 58.254-58.254c0-175.385 142.685-318.068 318.068-318.068 175.385 0 318.068 142.685 318.068 318.068 0 32.174 26.080 58.254 58.254 58.254s58.254-26.080 58.254-58.254c0-116.081-45.204-225.211-127.284-307.292zM512 137.32c91.225 0 165.442 74.218 165.442 165.442s-74.218 165.442-165.442 165.442-165.442-74.218-165.442-165.442 74.218-165.442 165.442-165.442z" ></path></symbol><symbol id="icon-redu2" viewBox="0 0 1024 1024"><path d="M394.56088 1012.659848c-60.638314-32.996693-103.951396-90.957471-106.471429-159.155887-3.543798-127.497962 92.926248-190.026302 149.942013-275.392448 81.743598-122.85165 59.378297-199.082673 59.378297-199.082674s68.198416 35.280474 107.888949 166.085981c12.363916 38.666769 14.805199 77.412289 11.025148 113.874029-6.063831 92.138737-49.455664 175.142352-49.455664 175.142351s75.601015-14.805199 96.627547-141.121894c34.729216 33.075444 66.938399 80.719834 70.560948 130.884257 6.300085 86.468661-49.376913 166.007229-133.719296 200.106437 145.925709-30.712912 250.270861-144.429439 286.181343-227.511805 45.833115-104.581404 33.390448-197.822656 25.987849-278.699992-9.922633-110.25148 32.130431-192.15258 32.130432-192.15258s-80.562332 21.57779-139.94063 111.353995c-27.247866 41.029301-38.430516 101.27386-38.430516 101.27386s6.221334-53.393217-32.287933-151.202031C695.783675 291.378913 660.896957 257.279705 639.870424 186.876259 612.701309 92.37499 673.339624 0.236253 673.339624 0.236253S433.148898 41.186803 324.078684 233.418134c-96.548796 170.653541-56.858263 273.029916-56.858264 273.029916s-40.95055-35.280474-61.977082-84.263631c-21.026532-48.825656-16.38022-93.162501-16.38022-93.162501S18.130826 501.880489 101.213191 719.233408c55.755749 152.383296 163.487195 252.47589 293.505191 293.42644" fill="#FE7A41" ></path></symbol><symbol id="icon-redu1" viewBox="0 0 1024 1024"><path d="M394.56088 1012.659848c-60.638314-32.996693-103.951396-90.957471-106.471429-159.155887-3.543798-127.497962 92.926248-190.026302 149.942013-275.392448 81.743598-122.85165 59.378297-199.082673 59.378297-199.082674s68.198416 35.280474 107.888949 166.085981c12.363916 38.666769 14.805199 77.412289 11.025148 113.874029-6.063831 92.138737-49.455664 175.142352-49.455664 175.142351s75.601015-14.805199 96.627547-141.121894c34.729216 33.075444 66.938399 80.719834 70.560948 130.884257 6.300085 86.468661-49.376913 166.007229-133.719296 200.106437 145.925709-30.712912 250.270861-144.429439 286.181343-227.511805 45.833115-104.581404 33.390448-197.822656 25.987849-278.699992-9.922633-110.25148 32.130431-192.15258 32.130432-192.15258s-80.562332 21.57779-139.94063 111.353995c-27.247866 41.029301-38.430516 101.27386-38.430516 101.27386s6.221334-53.393217-32.287933-151.202031C695.783675 291.378913 660.896957 257.279705 639.870424 186.876259 612.701309 92.37499 673.339624 0.236253 673.339624 0.236253S433.148898 41.186803 324.078684 233.418134c-96.548796 170.653541-56.858263 273.029916-56.858264 273.029916s-40.95055-35.280474-61.977082-84.263631c-21.026532-48.825656-16.38022-93.162501-16.38022-93.162501S18.130826 501.880489 101.213191 719.233408c55.755749 152.383296 163.487195 252.47589 293.505191 293.42644" fill="#D60000" ></path></symbol><symbol id="icon-redu3" viewBox="0 0 1024 1024"><path d="M394.56088 1012.659848c-60.638314-32.996693-103.951396-90.957471-106.471429-159.155887-3.543798-127.497962 92.926248-190.026302 149.942013-275.392448 81.743598-122.85165 59.378297-199.082673 59.378297-199.082674s68.198416 35.280474 107.888949 166.085981c12.363916 38.666769 14.805199 77.412289 11.025148 113.874029-6.063831 92.138737-49.455664 175.142352-49.455664 175.142351s75.601015-14.805199 96.627547-141.121894c34.729216 33.075444 66.938399 80.719834 70.560948 130.884257 6.300085 86.468661-49.376913 166.007229-133.719296 200.106437 145.925709-30.712912 250.270861-144.429439 286.181343-227.511805 45.833115-104.581404 33.390448-197.822656 25.987849-278.699992-9.922633-110.25148 32.130431-192.15258 32.130432-192.15258s-80.562332 21.57779-139.94063 111.353995c-27.247866 41.029301-38.430516 101.27386-38.430516 101.27386s6.221334-53.393217-32.287933-151.202031C695.783675 291.378913 660.896957 257.279705 639.870424 186.876259 612.701309 92.37499 673.339624 0.236253 673.339624 0.236253S433.148898 41.186803 324.078684 233.418134c-96.548796 170.653541-56.858263 273.029916-56.858264 273.029916s-40.95055-35.280474-61.977082-84.263631c-21.026532-48.825656-16.38022-93.162501-16.38022-93.162501S18.130826 501.880489 101.213191 719.233408c55.755749 152.383296 163.487195 252.47589 293.505191 293.42644" fill="#FFBF3B" ></path></symbol></svg>',d=(d=document.getElementsByTagName("script"))[d.length-1].getAttribute("data-injectcss"),r=function(e,t){t.parentNode.insertBefore(e,t)};if(d&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}function l(){s||(s=!0,c())}function a(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(a,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=i,i=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?r(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(c=t,o=e.document,s=!1,a(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window);
\ No newline at end of file
项目测试/Item/sign/iconfont.json 0 → 100644
{
{
"id": "",
"name": "",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "577365",
"name": "搜索",
"font_class": "sousuo",
"unicode": "e752",
"unicode_decimal": 59218
},
{
"icon_id": "975307",
"name": "登录",
"font_class": "denglu",
"unicode": "e62e",
"unicode_decimal": 58926
},
{
"icon_id": "15696921",
"name": "热度2",
"font_class": "redu2",
"unicode": "e629",
"unicode_decimal": 58921
},
{
"icon_id": "15696926",
"name": "热度1",
"font_class": "redu1",
"unicode": "e62a",
"unicode_decimal": 58922
},
{
"icon_id": "15696953",
"name": "热度3",
"font_class": "redu3",
"unicode": "e62b",
"unicode_decimal": 58923
}
]
}
项目测试/Item/test.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js创建子节点</title>
</head>
<body>
<button id="abc"> 点击</button>
</body>
<script type="text/javascript">
document.getElementById('abc').addEventListener('click',()=>{
window.location.href = 'https://m.html.cn/qa/javascript/11749.html'
})
</script>
</html>
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