邮件激活页面,点击“重新获取验证码”时间间隔设置为60秒,并调整按钮样式

This commit is contained in:
daiao 2016-12-23 16:57:32 +08:00
parent c3465537b5
commit 283f8035b9
2 changed files with 51 additions and 10 deletions

View File

@ -10,7 +10,27 @@
</head>
<body>
<% email = @user.mail.split("@")[1] %>
<script>
var countdown = 60;
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
$("#btn").removeClass("btn-grey");
val.value="重新获取验证码";
countdown = 60;
} else {
val.setAttribute("disabled", true);
$("#btn").addClass("btn-grey");
val.value="重新发送(" + countdown + ")";
countdown--;
if(countdown >= 0){
setTimeout(function() {
settime(val)
},1000)
}
}
}
</script>
<div style="border: 1px solid #c0c0c0 ; width:100%; margin-top: 10px" >
<h3 style=" padding-bottom: 8px; margin-top:5px; border-bottom: 1px solid #c0c0c0;color:black; ">
@ -26,14 +46,9 @@
<a href="#" class="f-blue"><%= @user.mail %></a>
</div>
<p>
<a href="http://mail.<%= email %>" style="background: #15bccf;margin: auto;
color: #fff;
font-size: 13px;
border: none;
padding: 10px 16px;
line-height: 1.33;" target="_blank"><%= l(:label_check_email)%></a>
&nbsp; &nbsp; <%= link_to l(:label_mail_resend), { :controller => 'account', :action => 'resendmail',:user => @user}, :remote => true, :method => 'get' %>
<a href="http://mail.<%= email %>" class="btn btn-blue" target="_blank"><%= l(:label_check_email)%></a>
&nbsp; &nbsp; <%#= link_to l(:label_mail_resend), { :controller => 'account', :action => 'resendmail',:user => @user}, :remote => true, :method => 'get' %>
<a href="<%= resendmail_path(@user) %>" data-remote="true"><input class="btn btn-blue" type="button" id="btn" value="重新获取验证码" onclick="settime(this)" /></a>
</p>

View File

@ -845,4 +845,30 @@ a.export_icon{background: url(/images/item.png) -58px -30px no-repeat; width: 45
a.export_icon:hover {background: url(/images/item.png) -58px -60px no-repeat;}
.export_icon_li:hover ul {display:block;}
.break_full_word { word-break: normal !important;word-wrap: break-word !important; }
.break_full_word { word-break: normal !important;word-wrap: break-word !important; }
/*模板a标签按钮 20161013byLB*/
a.btn{display: inline-block;border:none; padding:0 10px;color: #333;background: #e1e1e1; text-align:center;font-size: 12px; height: 30px;line-height: 30px;-webkit-border-radius: 3px;-moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
a:hover.btn{background: #c3c3c3; color: #333;}
a.btn-green{background: #60b25e; color: #fff;}
a:hover.btn-green{background: #51a74f; color: #fff;}
a.btn-blue{background: #3b94d6; color: #fff;}
a:hover.btn-blue{background: #2788d0; color: #fff;}
a.btn-orange{background:#ff7b33; color: #fff;}
a:hover.btn-orange:hover{background:#ee4a1f; color: #fff;}
a.btn-line{display: inline-block;border:none; padding:0 10px;color: #333;background:#fff; border: 1px solid #d5d5d5; text-align:center;font-size: 12px; height: 30px;line-height: 30px;-webkit-border-radius: 3px;-moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
a:hover.btn-line{background:#eee; }
a.btn-line-green{border: 1px solid #51a74f; color: #51a74f;}
a:hover.btn-line-green{ background: #51a74f; color: #fff;}
a.btn-line-blue{border: 1px solid #2788d0; color: #2788d0;}
a:hover.btn-line-blue{ background: #2788d0; color: #fff;}
a.btn-line-orange{border: 1px solid #ee4a1f; color: #ee4a1f;}
a:hover.btn-line-orange{ background: #ee4a1f; color: #fff;}
a.btn-small{ padding: 0px 10px; font-size: 12px;line-height: 20px; background-image: linear-gradient(#fcfcfc, #eee); border: 1px solid #d5d5d5;-webkit-border-radius: 3px;-moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; color: #333;}
a:hover.btn-small{background-image:linear-gradient(#ededed, #dddddd);}
a.sub_btn{ cursor:pointer; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #707070; color:#000; border-radius:3px; padding:1px 10px; background:#dbdbdb;}
a:hover.sub_btn{ background:#b5e2fa; color:#000; border:1px solid #3c7fb1;}
input.btn{display: inline-block;border:none; padding:0 10px;color: #333;background: #e1e1e1; text-align:center;font-size: 12px; height: 30px;line-height: 30px;-webkit-border-radius: 3px;-moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
input.btn-blue{background: #3b94d6; color: #fff; cursor:pointer;}
input:hover.btn-blue{background: #2788d0; color: #fff;}
input.btn-grey{background: #d9d9d9; color: #656565; cursor:default;}
input.btn-grey:hover{background: #717171; color: #fff; cursor:default;}