wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by unknown
Commit ce9692ed3ca9939be274eb7f1080b855e357fd8d 1 parent 87a26dad

hot-rank css修改 @review by 王成龙

Inline Side-by-side
Showing 5 changed files with 658 additions and 4 deletions
{{> layout/simple-header}}
<div class="login-page passport-page yoho-page clearfix">
<div class="bindwrapper">
<h3 class="welcomeword">欢迎加入<span class="yoho">YOHO!FAMILY</span></h3>
<p class="safeword">为了您的账户安全，请您完善账户信息，以便为您提供更优质的服务</p>
<form action="" id="bindmobileform">
<div class="yohobindrow">
<div class="name areatag">地区</div>
<div class="content">
<div class="yohoselectarea">
<div class="optionshow">
<span class="areaname" id="areaname">中国</span><span class="righttag"></span>
</div>
<div class="optionslist hide">
<div class="optionitem" areanum="+88">中国香港</div>
<div class="optionitem" areanum="+87">中国台湾</div>
<div class="optionitem" areanum="+86">中国</div>
</div>
</div>
</div>
</div>
<div class="yohobindrow">
<div class="name phonetag">手机号码</div>
<div class="content">
<div class="yohophonewrapper"><div class="areanum" id="areanum">+86</div><input type="text" class="phonenum" /></div>
</div>
</div>
</form>
<div class="protoctolwrapper">
<div class="choosewrapper"><input type="checkbox" class="choosetag"></div>
<span>我已阅读并同意遵守<a href="" class="protoctol">YOHO!有货服务条款</a></span>
</div>
<div class="btnwrapper">
<a href="javascript:void(0)" class="yohobindbtn" id="bindfirststep">下一步</a>
</div>
</div>
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
$tip: sprite-map("passport/tip/*.png", $spacing: 10px);
@import "login", "register", "back", "welcome";
.passport-page {
width: 1150px;
margin-left: auto;
... ... @@ -208,3 +206,5 @@ $tip: sprite-map("passport/tip/*.png", $spacing: 10px);
margin-top: 50px;
}
}
@import "login", "register", "back", "welcome", "third";
\ No newline at end of file
... ...
.yohobindbtn {
display: block;
width:210px;
height: 45px;
line-height: 45px;
background-color: #f02200;
color: #fff;
font-size: 16px;
text-align: center;
}
.hide {
display: none;
}
.novisiable {
visibility: hidden;
}
.actlevel {
background-color: #f02200 !important;
color: white !important;
}
.mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.bindwrapper {
margin: 0 auto;
width: 980px;
min-height: 450px;
padding-top: 122px;
}
.welcomeword {
width: 100%;
text-align: center;
font-size: 22px;
line-height: 22px;
color: #545454;
margin-bottom: 15px;
.yoho {
color: #e12000;
}
}
.safeword {
width: 100%;
text-align: center;
font-size: 16px;
line-height: 16px;
color: #545454;
margin-bottom: 63px;
}
.yohobindrow {
width: 480px;
margin: 0 auto 22px;
height: 40px;
.name {
float: left;
text-align: right;
margin-right: 14px;
width: 96px;
}
.areatag {
height: 30px;
line-height: 30px;
}
.phonetag,
.setpwdtag {
height: 47px;
line-height: 47px;
}
.content {
float: left;
text-align: left;
margin-top: 0;
padding-left: 0;
}
&::after {
display: block;
content: '';
clear: both;
}
}
.sendnotify {
width: 260px;
text-align: left;
margin: 0 auto 18px;
}
.validaterow {
overflow: hidden;
margin: 0 auto 22px;
padding-left: 250px;
.name {
float: left;
text-align: right;
margin-right: 14px;
width: 96px;
}
.areatag {
height: 30px;
line-height: 30px;
}
.phonetag {
height: 47px;
line-height: 47px;
}
.content {
float: left;
text-align: left;
}
&::after {
display: block;
content: '';
clear: both;
}
.validatewrapper {
float: left;
height: 45px;
width: 133px;
text-align: center;
line-height: 45px;
background-color: #d8d8d8;
color: #000;
font-size: 13px;
.yohobindbtn{
width: 133px;
font-size: 13px;
}
margin-left: 18px;
}
}
.validatepicrow {
overflow: hidden;
margin: 0 auto 22px;
padding-left: 250px;
.name {
float: left;
text-align: right;
margin-right: 14px;
width: 96px;
}
.areatag {
height: 30px;
line-height: 30px;
}
.yohophonewrapper {
}
.phonetag {
height: 47px;
line-height: 47px;
}
.content {
float: left;
text-align: left;
}
&::after {
display: block;
content: '';
clear: both;
}
.validatewrapper {
float: left;
height: 45px;
text-align: center;
line-height: 45px;
color: #000;
font-size: 13px;
.yohobindbtn{
width: 133px;
font-size: 13px;
}
margin-left: 18px;
}
.change-captcha {
cursor: pointer;
color: #f02200;
text-decoration: underline;
}
}
.setpwdwrapper {
margin-bottom: 10px;
height: 45px;
}
.safelevel {
width: 291px;
height: 15px;
margin: 0 auto;
text-align: right;
font-size: 10px;
color: #000;
span {
width: 28px;
height: 15px;
line-height: 15px;
background-color: #e5e5e5;
font-size: 10px;
color: #000;
margin-right: 4px;
padding: 1px 8px;
}
}
.green .color {
background-color: #0f0;
color: #fff;
}
.yellow .color {
background-color: #ff0;
color: #fff;
}
.red .color {
background-color: #f00;
color: #fff;
}
.yohoselectarea {
position: relative;
box-sizing: border-box;
width: 131px;
height: 33px;
.optionshow {
width: 100%;
height: 100%;
padding-left: 16px;
border: 1px solid #d9d9d9;
.areaname {
display: block;
float: left;
width: 110px;
height: 100%;
line-height: 33px;
font-size: 13px;
color: #000;
}
.righttag {
display: block;
float: left;
width: 21px;
height: 100%;
line-height: 33px;
background-color: #d8d8d8;
background-image: url('../img/arrowbottom.png');
background-repeat: no-repeat;
background-position: center center;
}
}
.optionslist {
background-color: white;
position: absolute;
top: 35px;
left: 0;
width: 149px;
z-index: 2;
.optionitem {
height: 33px;
line-height: 33px;
padding-left: 16px;
font-size: 13px;
&:hover {
background-color: #dfdfdf;
}
}
}
}
.yohophonewrapper {
width: 271px;
height: 47px;
border: 1px solid #d9d9d9;
position: relative;
.areanum {
float: left;
height: 100%;
width: 63px;
line-height: 47px;
text-align: center;
color: #000;
background-color: #d8d8d8;
}
.phonenum {
outline: none;
box-sizing: border-box;
float: left;
height: 45px;
width: 205px;
line-height: 38px;
padding-left: 8px;
border: none;
color: #000;
}
}
.protoctolwrapper{
width: 350px;
margin: 38px auto 0;
padding-left: 85px;
overflow: hidden;
.choosewrapper {
float: left;
width: 13px;
height: 13px;
background-color: #4c4c4c;
background-image: none;
background-position: center center;
background-repeat: no-repeat;
margin-right: 14px;
}
.choosetag {
width: 100%;
height: 100%;
display: block;
opacity: 0;
filter: alpha(opacity=0);
}
span {
float: left;
}
.protoctol {
color: #f02200;
text-decoration: underline;
}
&::after {
display: block;
content: '';
clear: both;
}
}
.confirmwrapper {
overflow: hidden;
margin-top: 47px !important;
}
.btnwrapper{
width: 350px;
margin: 20px auto 0;
padding-left: 85px;
}
.thirdloginwrapper {
margin: 0 auto;
width: 1150px;
min-height: 450px;
padding-top: 160px;
.safeword {
margin-bottom: 30px;
}
.left {
box-sizing: border-box;
float: left;
width: 450px;
height: 318px;
border-right: 1px solid #e5e5e5;
}
.right {
box-sizing: border-box;
float: right;
width: 696px;
padding-top: 64px;
height: 318px;
}
.gobuy,
.completeprofile {
float: left;
display: inline-block;
width: 94px;
height: 94px;
line-height: 94px;
text-align: center;
border-radius: 50%;
background-color: #f02200;
color: white;
}
.gobuy {
margin-left: 228px;
margin-right: 80px;
}
}
.bindsuccesswrapper {
margin: 0 auto;
width: 1150px;
min-height: 450px;
padding-top: 160px;
.successwrapper {
width: 320px;
height: 29px;
margin: 0 auto 16px;
.successtag {
display: inline-block;
margin-right: 28px;
float: left;
width: 29px;
height: 29px;
background-image: url('../img/bindsuccess.png');
background-repeat: no-repeat;
}
.congratulation {
display: inline-block;
height: 29px;
line-height: 29px;
font-size: 22px;
}
}
.info {
text-align: center;
font-size: 16px;
margin-bottom: 48px;
}
.gobuynow {
margin: 0 auto;
}
}
.bindconfrimwrapper {
width: 900px;
height: 439px;
margin: 153px auto;
background-color: #fff;
box-sizing: border-box;
padding-top: 37px;
.topwrapper {
width: 281px;
height: 90px;
margin: 0 auto 32px;
.userphoto {
width: 90px;
height: 90px;
vertical-align: middle;
border-radius: 50%;
margin-right: 22px;
}
.username{
vertical-align: middle;
}
}
.usertaginfo {
text-align: center;
font-size: 16px;
color: #545454;
margin-bottom: 10px;
}
.usertagremind {
text-align: center;
font-size: 14px;
color: #000;
margin-bottom: 47px;
}
.otherphone{
margin: 0 auto 64px;
}
.logindirectly {
display: block;
text-align: center;
text-decoration: underline;
color: #f02200;
}
}
.yohobindbtn[disabled] {
background-color: #e5e5e5;
cursor: not-allowed;
}
.gobindwrapper {
width: 100%;
height: 45px;
margin-bottom: 70px;
&::after {
display: block;
content: '';
clear: both;
}
.myphone {
float: left;
margin-left: 20px;
width: 193px;
}
.logindirectly {
display: inline-block;
}
.validaterow {
overflow: hidden;
margin: 0 auto 22px;
padding-left: 222px;
float: left;
.name {
float: left;
text-align: right;
margin-right: 14px;
width: 96px;
}
.areatag {
height: 30px;
line-height: 30px;
}
.phonetag {
height: 47px;
line-height: 47px;
}
.content {
float: left;
text-align: left;
.validatacode {
outline: none;
box-sizing: border-box;
float: left;
height: 45px;
width: 113px;
line-height: 38px;
padding-left: 8px;
border: 1px solid #d9d9d9;
color: #000;
}
}
.validatewrapper {
float: left;
height: 45px;
width: 133px;
text-align: center;
line-height: 45px;
background-color: #d8d8d8;
color: #000;
font-size: 13px;
margin-left: 18px;
.yohobindbtn{
width: 133px;
font-size: 13px;
}
}
}
}
.gobindbottomwrapper {
width: 100%;
padding-left: 341px;
.logindirectly {
display: inline-block;
float: left;
margin-right: 36px;
text-decoration: underline;
color: #f02200;
}
}
.pwd-tips {
position: absolute;
top: -10px;
left: 285px;
width: 158px !important;
height: 70px;
padding-top: 7px;
font-size: 12px;
background: url(http://6.url.cn/zc/chs/img/pwd_sprite.png?v=10069) no-repeat;
}
.pwd-tips {
position: absolute;
top: -10px;
left: 285px;
width: 158px !important;
height: 70px;
padding-top: 7px;
font-size: 12px;
background: url(http://6.url.cn/zc/chs/img/pwd_sprite.png?v=10069) no-repeat
}
.pwd-tips div {
height: 22px;
line-height: 22px;
margin-left: 15px;
padding-left: 18px;
}
.pwd-tips .default {
background: url(http://6.url.cn/zc/chs/img/pwd_sprite.png?v=10069) 0 -215px no-repeat;
}
.pwd-tips .yes {
background: url(http://6.url.cn/zc/chs/img/pwd_sprite.png?v=10069) 0 -247px no-repeat;
}
.pwd-tips .no {
background: url(http://6.url.cn/zc/chs/img/pwd_sprite.png?v=10069) 0 -281px no-repeat;
}
.pwd-tips .red {
color: red !important;
}
.msg-tip {
position: absolute;
top: 17px;
left: 285px;
white-space: nowrap;
}
.msg-tip img {
height: 12px;
width: 12px;
}
.backdrop {
position: fixed;
background: #000;
width: 100%;
height: 100%;
left: 0 ;
top: 0 ;
bottom: 0;
right: 0;
opacity: .5;
filter: alpha(opacity=50);
}
\ No newline at end of file
... ...
... ... @@ -185,9 +185,7 @@
color: #000;
.sale-price {
text-decoration: line-through;
margin: 0 10px 0 0;
color: #999;
}
}
}
... ...
... ... @@ -231,4 +231,12 @@ class LoginController extends WebAction
return $str;
}
public function thirdPartyAction() {
$data = array(
'thirdParty' => array(
)
);
$this->_view->display('third-party', $data);
}
}
... ...