Skip to content

T
TW_Mobile
Commit 0d11260d by 肖小磊
Options

init

parents
Showing with 1200 additions and 0 deletions
dom.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type='text/css'>
/* .circle {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
.circle1,
.circle2,
.circle3,
.center {
position: absolute;
left: 50%;
top: 50%;
margin: -30px 0 0 -30px;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: #666666;
}
.center {
position: absolute;
left: 50%;
top: 50%;
margin: -35px 0 0 -35px;
width: 20px;
height: 20px;
border-radius: 35px;
background: #111111;
text-align: center;
line-height: 20px;
color: #EAEAEA;
font-size: 16px;
font-family: '';
}
.circle1 {
-webkit-animation: circle 3s linear infinite;
animation: circle 3s linear infinite;
}
.circle2 {
-webkit-animation: circle 3s linear 0.8s infinite;
animation: circle 3s linear 0.8s infinite;
} */
/* .circle3 {
-webkit-animation: circle 3s linear 1.6s infinite;
animation: circle 3s linear 1.6s infinite;
}
@-webkit-keyframes circle {
from {
opacity: 1;
-webkit-transform: scale(0);
}
to {
opacity: 0;
-webkit-transform: scale(3);
}
} */
body {
width: 300px;
margin: 20px auto;
}
.circle-red {
display: block;
background: black;
border-radius: 100%;
height: 100px;
width: 100px;
border: 4px solid #ffffff;
margin: 0;
background: radial-gradient(circle at 30px 30px, #f00, #000);
box-shadow: 0 0px 50px 10px #f00;
}
.circle-green {
display: block;
background: black;
border-radius: 100%;
height: 100px;
width: 100px;
border: 4px solid #ffffff;
margin: 0;
background: radial-gradient(circle at 30px 30px, #73c940, #000);
box-shadow: 0 0px 50px 10px #73c940;
}
.circle-yellow {
display: block;
background: black;
border-radius: 100%;
height: 100px;
width: 100px;
border: 4px solid #ffffff;
margin: 0;
background: radial-gradient(circle at 30px 30px, #f4f624, #000);
box-shadow: 0 0px 50px 10px #f4f624;
}
.circle-white {
display: block;
background: black;
border-radius: 100%;
height: 100px;
width: 100px;
border: 4px solid #ffffff;
margin: 0;
background: radial-gradient(circle at 30px 30px, #ffffff, #000);
box-shadow: 0 0px 50px 10px #ffffff;
}
</style>
</head>
<body>
<!-- <div class='circle'>
<div class='circle1'>&nbsp;</div>
<div class='circle2'>&nbsp;</div>
<div class='circle3'>&nbsp;</div>
<div class='center'></div>
</div> -->
<figure class="circle-yellow "></figure>
</body>
</html>
\ No newline at end of file
img/.DS_Store 0 → 100644
File added
img/0.png 0 → 100644
img/0.png

7.16 KB

img/1.png 0 → 100644
img/1.png

13.2 KB

img/2.png 0 → 100644
img/2.png

13.2 KB

img/3.png 0 → 100644
img/3.png

13.3 KB

img/pc.png 0 → 100644
img/pc.png

6.25 KB

img/red.png 0 → 100644
img/red.png

1.16 KB

img/search.png 0 → 100644
img/search.png

587 Bytes

index.css 0 → 100644
body{
margin: 0;
width: 100%;
height: 100%;
background: #ffffff;
}
.top{
width:100%;
height: 0.8rem;
line-height: 0.8rem;
border-bottom: 1px solid #ccc;
background:#ffffff;
font-size: 15px;
color: white;
display: flex;
}
.title{
width: 65%;
text-align: center;
color: #000;
}
.time{
width: 33%;
font-size: 0.28rem;
color: #999999;
text-align: right;
}
.location{
width: 100%;
height: auto;
padding-bottom: 0.3rem;
}
.store-name{
width: 96%;
margin-left: 2%;
padding-top: 0.1rem;
height: 0.8rem;
text-align: center;
}
.store-name div{
width: 100%;
font-size: 0.26rem;
}
.store-name div:last-child{
margin-top: 0.05rem;
font-size: 0.2rem;
}
.store-issue{
width: 96%;
height: auto;
margin-left: 2%;
border: 1px solid #ffffff;
background: #ffffff;
padding-bottom: 0.2rem；
}
.store-issue img{
width: 0.24rem;
height: 0.24rem;
margin-top: 0.03rem;
display: block;
}
.list-title{
width: 2.0rem;
height: 0.5rem;
line-height: 0.5rem;
font-size: 0.2rem;
display: flex;
margin-left:0.6rem;
}
.list-num{
width: 100%;
height: 0.5rem;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
line-height: 0.5rem;
display: flex;
font-size: 0.2rem;
}
.warn-list{
width: 100%;
height: auto;
}
ul{
margin: 0;
padding: 0;
}
li{
width: 96%;
height: 0.4rem;
line-height: 0.7rem;
margin-left: 2%;
margin-top: 0.12rem;
list-style:none;
}
.warn-title{
width: 0.8rem;
height: 0.3rem;
line-height: 0.3rem;
text-align: center;
background: green;
font-size: 0.17rem;
color: #ffffff;
}
.warn-title-top{
background: none;
color: #000000;
}
.warn-list li:first-child{
}
.warn-list li:last-child{
border-bottom: none;
}
.warn-pos{
width: 100%;
height: 0.3rem;
line-height: 0.3rem;
text-align: left;
font-size: 0.2rem;
margin-top: 0.25rem;
}
.warn-content{
width: 1.8rem;
height: 0.3rem;
line-height: 0.3rem;
text-align: center;
font-size: 0.2rem;
}
.warn-network{
width: 5.3rem;
height: 0.3rem;
line-height: 0.3rem;
text-align: left ;
margin-left: 0.1rem;
font-size: 0.2rem;
}
.warn-runstatus{
width: 1.3rem;
height: 0.3rem;
line-height: 0.3rem;
text-align: center;
font-size: 0.2rem;
}
.warn-businessdate{
width: 3.0rem;
height: 0.3rem;
line-height: 0.3rem;
text-align: right;
font-size: 0.2rem;
}
.warn-loginstatus{
width: 0.5rem;
height: 0.3rem;
line-height: 0.3rem;
text-align: center;
font-size: 0.2rem;
}
.warn-time{
width: 2.1rem;
height: 0.3rem;
line-height: 0.3rem;
text-align: center;
font-size: 0.2rem;
}
.warn-icon{
width: 1.3rem;
height: 0.3rem;
line-height: 0.3rem;
text-align: center;
}
.warn-icon img{
width: 0.23rem;
height: 0.23rem;
margin-top: 0.02rem;
margin-left: 0.43rem;
}
.pos{
background: #bd411f;
}
.itona{
background: #f29c39;
}
.server{
background: #439541;
}
.sok{
background: #999999;
}
.list-detail{
width: 100%;
height: auto;
border: 1px solid #ccc;
background: #ffffff;
}
.list-detail-pos,.list-detail-sok,.list-detail-itona,.list-detail-server{
width: 2.8rem;
height: 3.8rem;
border: 1px solid #cecece;
margin-left: 0.15rem;
margin-top: 0.1rem;
float: left;
}
.l-detail-title{
width: 1.6rem;
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
margin: 0 auto;
font-size: 0.23rem;
color: #ffffff;
}
.l-detail-content{
width: 2.6rem;
height: 3.0rem;
margin-left: 0.1rem;
margin-top: 0.1rem;
font-size: 0.25rem;
color: #333;
}
.ld-content-img{
width: 0.28rem;
height: 0.28rem;
display: flex;
margin-top: 0.2rem;
}
.ld-content-time,.ld-content-update,.ld-content-status{
width: 100%;
height: 0.7rem;
line-height: 0.7rem;
font-size: 0.25rem;
display: flex;
}
.ld-content-status{
margin-top: 0.1rem;
}
.newstatus{
width: 2.3rem;
height: 1.1rem;
line-height: 0.3rem;
padding-top: 0.18rem;
}
.ld-content-data{
margin-left: 0.2rem;
}
.mask{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
text-align: center;
display: none;
}
.mask-top{
margin: 0 auto ;
width:70%;
height: 5.3rem;
border-radius: 10px;
margin-top: 1.5rem;
background: #ffffff;
}
.mask-title{
margin: 0 auto ;
font-size: 12px;
padding-top: 5px;
padding-left: 5px;
text-align: left;
}
.mask-content{
margin: 0 auto ;
margin-top: 1px;
width: 90%;
height: auto;
text-align: left;
font-size: 0.19rem;
text-indent: 2em;
}
.mask-content2{
color: red;
}
.mask-button{
margin: 0 auto ;
width: 3.2rem;
height: 0.5rem;
border-radius: 5px;
line-height: 0.5rem;
background: #ffffff;
font-size: 0.19rem;
margin-top: 0.6rem;
}
.circle-red {
display: block;
background: #000;
border-radius: 100%;
height: 0.2rem;
width: 0.2rem;
border: 1px solid #ffffff;
margin: 0;
background: radial-gradient(circle at 5px 2px, #f00, #000);
box-shadow: 0 0px 10px 3px #f00;
margin-left: 0.4rem;
}
.circle-green {
display: block;
background: #000;
border-radius: 100%;
height: 0.2rem;
width: 0.2rem;
border: 1px solid #ffffff;
margin: 0;
background: radial-gradient(circle at 5px 2px, #73c940, #000);
box-shadow: 0 0px 10px 3px #73c940;
margin-left: 0.4rem;
}
.circle-yellow {
display: block;
background: #f4f624;
border-radius: 100%;
height: 0.2rem;
width: 0.2rem;
border: 1px solid #ffffff;
margin: 0;
background: radial-gradient(circle at 2px 2px, #f4f624, #000);
box-shadow: 0 0px 10px 3px #f4f624;
margin-left: 0.4rem;
}
.circle-white {
display: block;
background: #000;
border-radius: 100%;
height: 0.2rem;
width: 0.2rem;
border: 1px solid #ffffff;
margin: 0;
background: radial-gradient(circle at 5px 2px, #ffffff, #000);
box-shadow: 0 0px 10px 3px #ffffff;
margin-left: 0.4rem;
}
/* 新版 */
.list-list{
width: 94%;
height: 1.15rem;
border-bottom: 1px solid #ccc;
}
.warn-status{
width:1.0rem;
height: 0.3rem;
line-height: 0.3rem;
font-size: 0.2rem;
}
.login-status{
width: 1.1rem;
height: 0.3rem;
text-align: right;
border-left: 1px solid #ccc;
margin-left: 0.2rem;
}
.list-bottom{
width: 100%;
height: 0.3rem;
line-height: 0.3rem;
margin-top: 0.13rem;
display: flex;
color: #999999;
}
.animation1{
width: 0.24rem;
height: 0.24rem;
margin-left: 0.1rem;
}
.warn-pos-totle{
font-size: 16px;
color: #333333;
}
.warn-pos-status{
font-size: 12px;
color: #333333;
}
/* 搜索 */
.search{
width: 100%;
height: 0.9rem;
border: 1px solid #ffffff;
background: #efefef;
display: flex;
}
.search-center{
width: 70%;
height: 0.5rem;
border-radius: 0.25rem;
background: #ffffff;
margin-left:5%;
margin-top: 0.2rem;
display: flex;
}
.search-icon{
width: 0.3rem;
height: 0.3rem;
margin-top: 0.1rem;
margin-left: 0.2rem;
}
.search-input{
width: 70%;
height: 0.3rem;
margin-top: 0.1rem;
margin-left: 0.15rem;
font-size: 0.20rem;
border: none;
outline: none;
}
.search-botton{
width: 1.0rem;
height: 0.3rem;
border-radius: 0.15rem;
outline: none;
border: none;
background: #bd411f;
color: #ffffff;
font-size: 0.16rem;
margin-top: 0.3rem;
margin-left: 0.3rem;
}
.loginout-botton{
width: 1.0rem;
height: 0.3rem;
border-radius: 0.15rem;
outline: none;
border: none;
background: #cccccc;
color: #ffffff;
font-size: 0.16rem;
margin-top: 0.3rem;
margin-left: 0.3rem;
}
.square
{
border:1px solid #ccc;
margin: 3px;
}
\ No newline at end of file
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta name="format-detection" content="telephone=no" />
<title>Gomax</title>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
<script src="http://of6msta6t.bkt.clouddn.com/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// var CurUrl = "http://gomax.mcd.com.cn/";
var CurUrl = "http://localhost:58947/";
var questions = [];
//16px=0.16rem
//100px=1rem
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
IsLogin();
LoadRedPosData();
})(document, window);
function LoginOut() {
if (window.confirm("确实要登出吗？")) {
localStorage.token = "";
location.href = "login/login.html";
}
}
function LoadData() {
var url = CurUrl + "Store/GoMaxH5_/";
//var url = "http://localhost:58947";
var StoreID = $.trim($("#txtPosID").val());
$("#store_no").html(StoreID);
if (StoreID && StoreID != "") {
var token = localStorage.token;
if (!token || token == "") {
token = "token";
}
$.ajax({
url: url,
type: "post",
data: { "storeid": StoreID, "token": token },
success: function (result) {
if (result.statusCode == -1) {
alert("login timeout");
location.href = 'login/login.html';
return;
}
$("#divStoreName").html(result.data.storeName);
var html = "";
var index = 0;
$.each(result.data.faultPosList, function (index, ele) {
questions.push(ele.questions);
if (ele.runStatus == "red" || ele.runStatus == "yellow") {
html += "<li class=\"list-list\" onclick=Comes(" + index + ")>";
}
else {
html += "<li class=\"list-list\">";
}
html += " <div class=\"warn-pos \">";
html += " <span class=\"warn-pos-totle\"> " + ele.postID + "</span> <span class=\"warn-pos-status\" ></span>";
html += "</div >";
html += "<div class=\"list-bottom\" >";
html += "<span class=\"warn-status\">运行状态:</span>";
if (ele.runStatus == "red") {
html += "<img class=\"animation1\" src=\"img/red.png \">";
}
else if (ele.runStatus == "yellow") {
html += "<img class=\"animation1\" src=\"img/yellow.png \">";
}
else if (ele.runStatus == "green") {
html += "<img class=\"animation1\" src=\"img/green.png \">";
}
html += "<span class=\"warn-status login-status\">状态:</span>";
html += "<span class=\"warn-loginstatus\">";
html += ele.netStatus
html += "</span>";
html += "<span class=\"warn-businessdate\">";
html += "营业日：" + ele.businessDate;
if (ele.type != "Backroom" && ele.type != "Crew" && ele.type != "MDS") {
html += "<br/>键位编号：" + ele.screenVersion
}
html += "</span>";
html += "</div >";
html += "</li >";
});
$(".warn-list").html(html);
}
});
}
}
function LoadRedPosData() {
var url = CurUrl + "Store/GoMaxH5/RedPos/";
$.ajax({
url: url,
type: "get",
success: function (result) {
var html = "";
var index = 0;
$.each(result.data, function (index, ele) {
questions.push(ele.questions);
if (ele.runStatus == "red" || ele.runStatus == "yellow") {
html += "<li class=\"list-list\" onclick=Comes(" + index + ")>";
}
else {
html += "<li class=\"list-list\">";
}
html += " <div class=\"warn-pos \">";
html += " <span class=\"warn-pos-totle\"> " + ele.posID + "(" + ele.storeID + ")" +ele.storeName + "</span> <span class=\"warn-pos-status\" ></span>";
html += "</div >";
html += "<div class=\"list-bottom\" >";
html += "<span class=\"warn-status\">运行状态:</span>";
if (ele.runStatus == "red") {
html += "<img class=\"animation1\" src=\"img/red.png \">";
}
else if (ele.runStatus == "yellow") {
html += "<img class=\"animation1\" src=\"img/yellow.png \">";
}
else if (ele.runStatus == "green") {
html += "<img class=\"animation1\" src=\"img/green.png \">";
}
html += "<span class=\"warn-status login-status\">状态:</span>";
html += "<span class=\"warn-loginstatus\">";
html += ele.netStatus
html += "</span>";
html += "<span class=\"warn-businessdate\">";
html += "营业日：" + ele.businessDate;
if (ele.type != "Backroom" && ele.type != "Crew" && ele.type != "MDS") {
html += "<br/>键位编号：" + ele.screenVersion
}
html += "</span>";
html += "</div >";
html += "</li >";
});
$(".warn-list").html(html);
}
});
}
function IsLogin() {
var url = CurUrl + "Store/GoMaxH5_/";
$.ajax({
url: url,
type: "post",
data: { "storeid": "123456", "token": localStorage.token },
success: function (result) {
if (result.statusCode == -1) {
location.href = 'login/login.html';
}
}
});
}
</script>
</head>
<body>
<div style="width:100%;height:100%;position: relative;top: 0;left: 0;overflow: hidden;">
<div class="search">
<div class="search-center">
<img class="search-icon" src="img/search.png" alt="">
<input class="search-input" type="text" id="txtPosID">
</div>
<button class="search-botton" onclick="LoadData()">搜索</button>
<button class="loginout-botton" onclick="LoginOut()">登出</button>
</div>
<div class="top">
<span id="divStoreName" class="title"></span>
<span class="time" id="store_no"></span>
</div>
<div class="location">
<div class="store-issue">
<div class="warn-list">
</div>
</div>
</div>
</div>
<div class="mask">
<div class="mask-top">
<div class="mask-title" id="question_detail"></div>
<div class="mask-content" id="divQuestion">
哈吉社保卡山东快书大家哈圣诞贺卡设计的环境表现不错撒娇都不卡的空间
</div>
<div class="mask-title">处理建议</div>
<div class="mask-content mask-content2" id="divSolution">
哈吉社保卡山东快书大家哈圣诞贺卡设计的环境表现不错撒娇都不卡的空间
</div>
</div>
<div class="mask-button" onclick="Go()">关闭</div>
</div>
<script src="http://of6msta6t.bkt.clouddn.com/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="index.js"></script>
</body>
</html>
\ No newline at end of file
index.js 0 → 100644
//动画控制
//紧急情况
//Donghua();
//Donghua2();
var isshow = true;
function Donghua() {
if (isshow) {
$(".animation1").addClass("circle-red");
$(".animation1").removeClass("circle-white");
isshow = false;
} else {
$(".animation1").addClass("circle-white");
$(".animation1").removeClass("circle-red");
isshow = true;
}
setTimeout(Donghua, 300)
}
//一般错误
var isshow2 = true;
function Donghua2() {
if (isshow2) {
$(".animation2").addClass("circle-yellow");
$(".animation1").removeClass("circle-white");
isshow2 = false;
} else {
$(".animation2").addClass("circle-white");
$(".animation1").removeClass("circle-yellow");
isshow2 = true;
}
setTimeout(Donghua2, 1000)
}
//遮罩控制
//xianshi
function Come(question, solution) {
$('.mask').show('fast');
$("#divQuestion").html(question);
$("#divSolution").html(solution);
}
function Comes(index) {
var question = questions[index];
if (question.length > 0) {
var html = "";
$.each(question, function (index, eles) {
html += "<div class=\"square\">";
html += "<div class=\"mask-title\">问题现象</div>";
html += "<div class=\"mask-content\">";
html += eles.face;
html += "</div>";
html += "<div class=\"mask-title\">问题描述</div>";
html += "<div class=\"mask-content\">";
html += eles.question;
html += "</div>";
html += "<div class=\"mask-title\">处理建议</div>"
html += "<div class=\"mask-content mask-content2\">";
html += eles.solution;
html += "</div>";
html += " </div>";
});
$('.mask').show('fast');
//alert(html);
$("#question_detail").siblings().remove();
$("#question_detail").after(html);
}
}
//yincang
function Go() {
$('.mask').hide('fast');
}
\ No newline at end of file
login/css/styles.css 0 → 100644
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
body {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body ::-webkit-input-placeholder {
/* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body ::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body :-ms-input-placeholder {
/* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
.wrapper {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
opacity: 0.8;
position: absolute;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.wrapper.form-success .container h1 {
-webkit-transform: translateY(85px);
-ms-transform: translateY(85px);
transform: translateY(85px);
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
}
.container h1 {
font-size: 40px;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-put;
transition-timing-function: ease-in-put;
font-weight: 200;
}
form {
padding: 20px 0;
position: relative;
z-index: 2;
}
form input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
form input:hover {
background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
background-color: white;
width: 300px;
color: #53e3a6;
}
form button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #53e3a6;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
form button:hover {
background-color: #f5f7f9;
}
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
@-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
@keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
\ No newline at end of file
login/login.html 0 → 100644
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="htmleaf-container">
<div class="wrapper">
<div class="container">
<h1>GoMax</h1>
<form class="form">
<input type="text" placeholder="Username" id="username">
<input type="password" placeholder="Password" id="password">
<button type="submit" id="login-button">Login</button>
</form>
</div>
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$('#login-button').click(function (event) {
event.preventDefault();
//$('form').fadeOut(500);
//$('.wrapper').addClass('form-success');
//alert("123");
var username = $("#username").val();
var password = $("#password").val();
if (username == "") {
alert("请填写用户名.");
$("#username")[0].focus();
return;
}
if (password == "") {
alert("请填写密码.");
$("#password")[0].focus();
return;
}
$.ajax({
url: "http://gomax.mcd.com.cn/User/H5Login",
type: "post",
data: { "loginName": username, "password": password },
success: function (data) {
if (!data.data.loginSuccess) {
alert("用户名或密码错误");
}
else {
localStorage.token = data.data.token;
location.href = '../'
}
},
error: function () {
alert("errors");
}
});
});
</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