Skip to content

H
hunter-ht.cn
Commit d90f2e01 by liuyingying
Options

野旷天低树天清月近人

parent f097ff24
Showing with 217 additions and 11 deletions
Hunter_ht/hunter/static/hunter/style.css
......@@ -8,9 +8,85 @@
padding: 0;
}
body{
background-color: #ffffff;
background-color: rgba(253, 253, 253, .3);
width:100%;
}
button{
line-height: 25px;
/* border: solid 1px black; */
border-radius: 5px;
cursor: pointer;
}
#error_log{
color:red;
width:60%;
margin:0 auto;
font-size:12px;
}
#login_div{
position:fixed;
width:100%;
height:100%;
top: -100%;
right:-100%;
z-index: 999;
}
.show_login{
top:0 !important;
right:0 !important;
}
#login_wrap{
width: 500px;
height: 250px;
border-radius: 10px;
margin: 90px 10px;
float: right;
background-color: white;
box-shadow: -1px -1px 3px #cec9c9 inset;
-moz-box-shadow: -1px -1px 3px #cec9c9 inset;
-webkit-box-shadow: -1px -1px 3px #cec9c9 inset;
}
#input_div{
width: 100%;
height: 140px;
margin: 10px auto 0;
padding-top: 10px;
}
#input_div>input{
width: 60%;
height: 45px;
font-size: 16px;
border: solid 1px #e4e4e4;
background: #fdfdfd;
border-radius: 7px;
margin: 15px auto;
display: block;
padding: 0 25px;
z-index: 9999;
}
#btn_div{
width: 67%;
height: 50px;
margin: 0px auto;
}
#btn_div>button{
width:40%;
height:40px;
display: block;
margin:10px 5%;
float: left;
outline: none;
}
#cancel_btn{
background: #d4d4d4;
color:white;
}
#login_btn{
background: #ffffff;
font-size: 16px;
}
ul li{
list-style-type: none;
margin:0;
......@@ -78,22 +154,42 @@ nav>div{
.bottom>a:hover, .active{
font-size:20px;
color: #000;
border-bottom:solid 5px #6e829e;
border-bottom:solid 4px #6e829e;
/*border-bottom:solid 5px #97b7e6;*/
}
.top>a{
.top>button{
width:50px;
height:25px;
float: right;
font-size:12px;
outline:none;
}
.top>ul{
width:200px;
display: block;
float: right;
}
.top>a:hover{
.top>ul>li{
display: block;
float: right;
margin-right: 10px;
}
.top>ul>li:hover{
font-size:16px;
color: #0063a9;
color: #000;
cursor: pointer;
/*border-bottom:solid 5px #97b7e6;*/
}
.top>button:hover{
font-size:14px;
color: dimgrey;
border-bottom:solid 3px #eeeeee;
}
#bar>.top{
height:20px;
font-size:14px;
margin: 15px 25px 5px;
height: 20px;
font-size: 14px;
margin: 5px 25px 10px;
}
#bar>.top>a{
color:grey;
......@@ -304,3 +400,22 @@ ul:after{
color:dimgrey;
float: left;
}
footer{
background: #ffffff;
min-width: 100%;
}
footer .copyright{
font-size: 12px;
color: #999;
margin: 0 auto;
width: 100%;
text-align: center;
padding: 20px 0;
}
footer .copyright a{
color:#999;
}
footer .copyright a:hover{
color: #6e829e;
}
\ No newline at end of file
Hunter_ht/hunter/templates/hunter/index.html
......@@ -2,21 +2,38 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hunter.index</title>
<title>hunter-ht</title>
{% load static %}
<link rel="icon" href="{% static 'hunter/images/logo.ico' %}" type="text/icon">
<link rel="stylesheet" type="text/css" href="{% static 'hunter/style.css' %}">
<script src="{% static 'hunter/jquery-1.9.1.min.js' %}"></script>
</head>
<body>
<div id="login_div" class="">
<div id="login_wrap">
<div id="input_div">
<input type="text" placeholder="username" autofocus="autofocus">
<input type="password" placeholder="password">
</div>
<div id="error_log"></div>
<div id="btn_div">
<button id="cancel_btn" onclick="hide_log()">
取消
</button>
<button id="login_btn" onclick="login()">
登录
</button>
</div>
</div>
</div>
<nav>
<div>
<div id="hunter">
<span>HUNTER</span>
</div>
<div id="bar">
<div class="top">
<a>登录</a>
<div class="top" id="top_bar">
<button onclick="show_log()">登录</button>
</div>
<div class="bottom">
<a href="#article" class="main_bar">文章随笔</a>
......@@ -209,6 +226,12 @@
</ul>
{% endif %}
</section>
<footer>
<div class="w-1000 copyright">
Copyright © 2013-2020 <strong><a href="//www.runoob.com/" target="_blank">野旷天低树天清月近人</a></strong>&nbsp;
<strong><a href="//www.hunter-ht.cn/" target="_blank">hunter-ht.cn</a></strong> All Rights Reserved. 备案号：<a target="_blank" rel="nofollow" href="http://www.beian.miit.gov.cn">湘ICP备18008562号</a>
</div>
</footer>
<script>
var pre_clicked=4;
......@@ -217,6 +240,13 @@
let i = $(".bottom>a").index(this);
click_bar(i);
});
let storage = window.sessionStorage;
if (!storage["userID"]&&!storage["username"]){
}else{
login_success(storage['username'],storage['userID'])
}
};
function click_bar(index){
let a_list = document.getElementsByClassName("main_bar");
......@@ -224,6 +254,65 @@
$(a_list[index]).addClass('active');
pre_clicked=index;
}
function hide_log() {
$('#login_div').removeClass("show_login");
$('input').val("");
$('#error_log').empty();
}
function show_log(){
$('#login_div').addClass("show_login");
$('input')[0].focus()
}
function login(){
let username = $("input")[0].value;
let password = $("input")[1].value;
if(username===""||password===""){
login_fail('用户名密码不能为空');
}else{
$.ajax({
url:'/login/',
type:'post',
dataType:'json',
data:{
"username":username,
"password":password,
},
success:function(response){
console.log(response);
if(response['message']==="success"){
let user_id=response['userid'];
let storage = window.sessionStorage;
storage['username'] = username;
storage['userID'] = user_id;
console.log(storage);
login_success(username,user_id);
}else{
login_fail(response['message']);
}
},
error:function (xhr) {
console.error('something went wrong...');
login_fail("something went wrong...");
}
})
}
}
function login_success(name,userid){
$('#top_bar').empty();
$('#top_bar').append("<ul><li onclick='logout()'>退出</li><li id="+userid+" title='点击进入个人中心'>"+name+"</li></ul>");
hide_log();
}
function login_fail(message){
$('#error_log').empty();
$('#error_log').append(message);
}
function logout(){
$('#top_bar').empty();
$('#top_bar').append('<button onclick="show_log()">登录</button>');
let storage = window.sessionStorage;
storage.clear();
console.log(storage);
}
</script>
</body>
</html>
\ 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