作者 乔爽

update

... ... @@ -3,3 +3,824 @@
margin: 0 ;
line-height: 1;
}
.container {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
overflow-y: hidden;
}
.top{
width: 7.5rem;
/*height: 1.5rem;*/
background-color: #F7F7F7;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.top_t{
width: 6.86rem;
height: 0.8rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.top_t_left{
width: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.top_t_left_text{
font-size:0.3rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(166,16,16,1);
}
.icon-caidan{
}
/*中部*/
.top_t_middle{
width: 1.2rem;
height: 0.5rem;
display: flex;
}
.top_t_middle img{
width: 100%;
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.icon-10{
position: relative;
}
.top_t_right_pic{
width: 0.4rem;
height: 0.4rem;
display: flex;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.top_t_right_pic img{
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.top_t_right_text{
font-size: 0.2rem;
font-weight: 500;
color: #333333;
}
/*-----底部------*/
.top_d{
width: 5.56rem;
display: flex;
padding-bottom: 0.03rem;
border-bottom: 1px solid #999999;
margin: 0.3rem 0 0.2rem 0;
}
.top_d_input{
width: 5rem;
text-align: center;
border: none;
outline: none;
background-color: #F7F7F7;
font-size: 0.3rem;
box-sizing: border-box;
padding: 0 0.2rem;
}
.top_d_input::placeholder{
color: #999999;
}
/*---------- 信息框 ----------*/
.mid{
margin-top: 0.53rem;
width: 6.86rem;
height: 1.5rem;
background:rgba(255,255,255,1);
box-shadow:0 0.04rem 0.12rem 0 rgba(155,155,155,0.1);
border-radius: 0.1rem;
display: flex;
flex-flow: column;
}
.mid_box{
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 0.3rem;
}
.mid_left{
width: 0.9rem;
height: 0.9rem;
display: flex;
/*align-items: center;*/
border-radius: 50%;
}
.mid_left img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.mid_right{
margin-left: 0.3rem;
}
.mid_right_big{
font-size: 0.36rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height: 0.24rem;
display: flex;
}
.mid_right_small{
margin-top: 0.2rem;
font-size: 0.2rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height: 0.24rem;
display: flex;
}
.mid_bottom{
width: 5rem;
margin-top: 0.12rem;
margin-left: 1.5rem;
display: flex;
justify-content: space-between;
}
.mid_bottom_left{
width: 2rem;
display: flex;
justify-content: space-between;
}
.mid_bottom_left_title{
font-size: 0.2rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height: 0.24rem;
display: flex;
}
.mid_bottom_left_number{
font-size: 0.28rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height: 0.24rem;
}
.mid_bottom_right{
width: 1rem;
height: 0.28rem;
background: #A61010;
border-radius: 0.04rem;
font-size: 0.2rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(255,255,255,1);
line-height: 0.28rem;
text-align: center;
}
.items{
margin-top: 0.63rem;
width: 6.86rem;
font-size: 0.36rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height: 0.24rem;
}
.item{
margin-top: 0.24rem;
width: 6.86rem;
display: flex;
}
.item_left{
width: 2.99rem;
height: 1.74rem;
display: flex;
border-radius: 0.08rem;
}
.item_left img{
width: 100%;
height: 100%;
border-radius: 0.08rem;
}
.item_right{
margin-left: 0.31rem;
width: 3rem;
}
.item_right_top{
font-size: 0.28rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height: 0.36rem;
}
.item_right_mid{
font-size: 0.2rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height: 0.36rem;
margin-top: 0.2rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item_right_bottom{
font-size: 0.2rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height: 0.36rem;
margin-top: 0.2rem;
}
.item_right_bottom p{
line-height: 0.32rem;
}
/*动态层*/
.mask{
width: 7.5rem;
height: 100%;
position: fixed;
top: 1.69rem;
display: flex;
justify-content: center;
background:rgba(255,255,255,0.94);
/*margin-top: 0.46rem;*/
}
.mask_box{
width: 5.7rem;
height: 7rem;
display: flex;
flex-flow: column;
align-items: center;
background:rgba(255,255,255,1);
border-radius: 0.16rem;
box-shadow: 0 0.07rem 0.1rem 0.01rem rgba(0, 0, 0, 0.08);
}
.mask_text{
margin-top: 0.64rem;
font-size: 0.48rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
}
.mask_box_top{
margin-top: 0.64rem;
width: 3.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.tel_size{
margin-top: 0;
font-size: 0.36rem;
}
.mask_email{
font-size: 0.24rem;
font-weight: bold;
color: #999999;
margin-top: 0.1rem;
}
.mask_box_mid{
margin-top: 0.9rem;
display: flex;
flex-flow: column;
position: relative;
}
.mask_box_text{
display: flex;
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
position: absolute;
left: -0.9rem;
top: 0.16rem;
align-items: center;
}
.mask_box_mid_input{
font-size: 0.24rem;
width: 3.5rem;
height: 0.6rem;
outline:none;
border: none;
text-decoration: none;
box-sizing: border-box;
padding: 0.1rem;
}
.mask_box_mid_input::placeholder{
color: #999999;
}
.mask_box_mid_input_code{
font-size: 0.16rem;
color: #A61010;
position: absolute;
top: 0.8rem;
right: 0;
}
.mask_box_sub{
margin-top: 0.53rem;
width: 3.5rem;
height: 0.5rem;
line-height: 0.5rem;
text-align: center;
background:rgba(192,44,44,1);
border-radius: 0.04rem;
font-size: 0.26rem;
font-weight: bold;
color: #fff;
}
.mask_box_account{
width: 3.5rem;
display: flex;
justify-content: space-between;
font-size: 0.14rem;
color: #333333;
margin-top: 0.28rem;
}
.mask_box_underline{
margin-top: 0.29rem;
width: 4.8rem;
height: 0.02rem;
background-color: #e8e8e8;
}
.mask_box_third{
font-size: 0.18rem;
text-align: center;
color: #333333;
margin-top: 0.23rem;
}
.mask_box_model{
width: 3.5rem;
margin-top: 0.7rem;
display: flex;
justify-content: space-between;
}
.mask_box_model_sub{
width: 0.4rem;
height: 0.4rem;
display: flex;
border-radius: 50%;
}
.mask_box_model_sub img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.mask_box_bottom{
margin-top: 0.59rem;
width: 3.5rem;
font-size: 0.18rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(153,153,153,1);
display: flex;
justify-content: space-between;
}
.mask_box_t{
font-size: 0.14rem;
color: #333333;
margin-top: 0.28rem;
}
/*立即登录,10秒后进入登录界面*/
.now_sub{
width: 7.5rem;
height: 100%;
position: fixed;
top: 1.69rem;
flex-flow: column;
display: flex;
align-items: center;
background:rgba(255,255,255,0.94);
}
.mask_big{
margin-top: 2.97rem;
font-size: 0.48rem;
font-weight: bold;
color: #333333;
}
.mask_small{
margin-top: 0.88rem;
font-size: 0.48rem;
font-weight: 500;
}
/*邮箱注册*/
.tel_register{
font-size: 0.24rem;
font-weight: bold;
color: #999999;
margin-top: 0.1rem;
}
.email_register{
font-size: 0.36rem;
font-weight: bold;
color: #333333;
}
.sub_verity{
margin-top: 0.3rem;
}
.mask_box_mid_input_remind{
font-size: 0.12rem;
position: absolute;
top: 0.86rem;
color: #999999;
}
.mask_underline{
height: 0.8rem;
}
.height_input{
margin-top: 0.18rem;
width: 3.6rem;
}
/*发送至邮箱*/
.mask_middle{
font-size: 0.36rem;
font-weight: bold;
margin-top: 1rem;
}
.mask_s{
font-size: 0.3rem;
margin-top: 0.8rem;
}
/*密码找回*/
.find{
margin-top: 0;
}
.mask_find{
margin-top: 3.04rem;
width: 5.3rem;
display: flex;
flex-flow: column;
}
.mask_find_big{
font-size: 0.48rem;
font-weight: bold;
color: #333333;
}
.mask_find_small{
margin-top: 0.21rem;
font-size: 0.3rem;
color: #333333;
}
.mask_find_box{
width: 5.3rem;
height: 0.86rem;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #A61010;
margin-top: 0.5rem;
}
.mask_find_box_input{
width: 5.3rem;
font-size: 0.36rem;
color: #333333;
outline: none;
border: none;
background-color: transparent;
}
.mask_find_box_input::placeholder{
color: #999999;
}
/*下一步按钮*/
.mask_find_next{
margin-top: 0.79rem;
width: 5.3rem;
height: 0.6rem;
line-height: 0.6rem;
background:rgba(192,44,44,1);
border-radius: 0.04rem;
text-align: center;
font-size: 0.3rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(252,254,255,1);
}
/*验证手机有效性*/
.mask_find_box_small{
font-size: 0.24rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(153,153,153,1);
line-height:36px;
}
/*手机号设置*/
.width_input{
width: 3rem;
}
.m_top{
margin-top: 0.7rem;
}
.mask_tel{
font-size: 0.48rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
/*line-height:24px;*/
margin-top: 1.03rem;
}
.mask_new{
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
/*line-height:24px;*/
height: 0.8rem;
display: flex;
border-bottom: 1px solid #e8e8e8;
}
.mask_box_i{
margin-top: 1rem;
}
.mask_new_input{
width: 4rem;
font-size: 0.24rem;
outline: none;
border: none;
}
.mask_new_input::placeholder{
color: #999999;
}
.mask_new_small{
width: 2.7rem;
font-size: 0.24rem;
outline: none;
border: none;
}
.mask_new_small::placeholder{
color: #999999;
}
.mask_new_text{
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
/*line-height:24px;*/
}
.border_no{
border: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.mask_tel_button{
display: flex;
justify-content: space-between;
font-size: 0.29rem;
color: #ffffff;
margin-top: 1.32rem;
}
.mask_tel_button_left{
width: 1.9rem;
height: 0.5rem;
background:rgba(232,232,232,1);
border-radius: 0.04rem;
line-height: 0.5rem;
text-align: center;
}
.mask_tel_button_right{
width: 1.9rem;
height: 0.5rem;
background:rgba(192,44,44,1);
border-radius: 0.04rem;
line-height: 0.5rem;
text-align: center;
}
.mask_ver_button{
width: 4rem;
height: 0.5rem;
background:rgba(192,44,44,1);
border-radius: 0.04rem;
font-size: 0.3rem;
color: #ffffff;
margin-top: 1.1rem;
text-align: center;
line-height: 0.5rem;
}
/*设置昵称*/
.mask_name{
margin-top: 1.72rem;
width: 5.7rem;
height: 4.4rem;
background:rgba(255,255,255,1);
border-radius: 0.16rem;
display: flex;
flex-flow: column;
align-items: center;
box-shadow: 0 0.07rem 0.1rem 0.01rem rgba(0, 0, 0, 0.08);
}
.mask_name_title{
margin-top: 0.65rem;
font-size: 0.48rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
/*line-height:24px;*/
}
.mask_name_input{
height: 0.8rem;
width: 4.3rem;
display: flex;
border-bottom: 1px solid #e8e8e8;
margin-top: 0.5rem;
}
.mask_name_input input{
width: 100%;
border: none;
outline: none;
font-size: 0.24rem;
}
.mask_name_input input::placeholder{
color: #999999;
}
.mask_name_hint{
margin-top: 0.15rem;
width: 4.3rem;
font-size: 0.14rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
/*line-height:36px;*/
}
.mask_name_sub{
margin-top: 0.5rem;
width: 4.2rem;
height: 0.5rem;
background:rgba(192,44,44,1);
border-radius: 0.04rem;
color: #ffffff;
font-size: 0.3rem;
line-height: 0.5rem;
text-align: center;
}
/*绑定手机号继续*/
.tel_height{
margin-top: 0.7rem;
height: 7rem;
}
.mask_tel_box{
display: flex;
align-items: center;
flex-flow: column;
}
.mask_tel_box p{
margin-top: 0.23rem;
font-size: 0.24rem;
color: #333333;
text-align: center;
}
.mask_tel_box_pic{
margin-top: 0.44rem;
width: 1rem;
height: 0.99rem;
border-radius: 0.5rem;
}
.mask_tel_box_pic img{
width: 100%;
height: 100%;
border-radius: 0.5rem;
}
.margin_to{
margin-top: 0.9rem;
}
.mask_jump{
margin-top: 0.55rem;
font-size: 0.18rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
/*line-height:24px;*/
}
.mask_name_way{
margin-top: 1.09rem;
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height: 0.24rem;
}
.way_top{
margin-top: 0.97rem;
}
/*解绑账号2*/
.mask_way_sub{
width: 4rem;
display: flex;
justify-content: space-between;
margin-top: 0.96rem;
}
.mask_way_sub_left{
width: 1.9rem;
height: 0.5rem;
line-height: 0.5rem;
background:rgba(232,232,232,1);
border-radius: 0.04rem;
font-size: 0.3rem;
color: #ffffff;
text-align: center;
}
.mask_way_sub_right{
width: 1.9rem;
height: 0.5rem;
line-height: 0.5rem;
background:rgba(192,44,44,1);
border-radius:4px;
font-size: 0.3rem;
color: #ffffff;
text-align: center;
}
.submit_height{
margin-top: 2.02rem;
height: 3rem;
}
.mask_submit_text{
display: flex;
flex-flow: column;
font-size: 0.3rem;
color: #333333;
margin-top: 0.73rem;
}
.mask_submit_bottom{
margin-top: 0.43rem;
width: 2.5rem;
height: 0.5rem;
background:rgba(192,44,44,1);
border-radius: 0.04rem;
line-height: 0.5rem;
text-align: center;
font-size: 0.26rem;
color: #ffffff;
}
/*隐私协议*/
.mask_title{
font-size: .48rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
}
.mask_small_text{
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height: 0.36rem;
padding: 0.3rem 0.5rem;
margin-bottom: 2rem;
}
.privacy{
/*display: flex;*/
/*flex-flow: column;*/
}
.mask_box_a{
display: flex;
flex-flow: column;
align-items: center;
overflow-y: auto;
margin-bottom: 0.6rem;
}
... ...
... ... @@ -7,7 +7,6 @@
align-items: center;
justify-content: center;
overflow-y: hidden;
}
.top{
width: 7.5rem;
... ... @@ -223,9 +222,9 @@
}
.item_right{
margin-left: 0.31rem;
width: 3rem;
}
.item_right_top{
font-size: 0.28rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
... ... @@ -233,20 +232,26 @@
line-height: 0.36rem;
}
.item_right_mid{
font-size: 0.2rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height: 0.36rem;
margin-top: 0.2rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item_right_bottom{
font-size: 0.2rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height: 0.36rem;
margin-top: 0.2rem;
}
.item_right_bottom p{
line-height: 0.32rem;
}
/*动态层*/
... ...
... ... @@ -108,7 +108,7 @@
font-weight:bold;
color:rgba(51,51,51,1);
line-height: 0.24rem;
/*display: flex;*/
text-align: center;
}
.mid_item{
... ... @@ -192,7 +192,7 @@
.bottom_item_box{
margin-top: 0.4rem;
width: 2.2rem;
height: 2.2rem;
/*height: 2.2rem;*/
display: flex;
flex-flow: column;
background-color: #ffffff;
... ... @@ -208,6 +208,7 @@
flex-flow: column;
align-items: center;
justify-content: center;
position: relative;
}
.bottom_item_box_top_p{
width: 0.7rem;
... ... @@ -246,4 +247,5 @@
}
.margin_t{
margin-top: 0.1rem;
position: absolute;
}
... ...
... ... @@ -67,7 +67,7 @@
</div>
<!--中-->
<div class="top_t_middle">
<img src="images/peke.png">
<img src="images/icon_1.png">
</div>
<!--右-->
<div class="top_t_right">
... ...
... ... @@ -82,7 +82,7 @@
</div>
<!--中-->
<div class="top_t_middle">
<img src="images/peke.png">
<img src="images/icon_1.png">
</div>
<!--右-->
<div class="top_t_right">
... ... @@ -320,7 +320,7 @@
</div>
<!--动态层-->
<div class="mask" >
<div class="mask" style="display: none;" >
<div class="pop">
<div class="pop_text pop_color">
精选
... ...
... ... @@ -191,7 +191,7 @@
《大势与运气》
</div>
<div class="item_right_mid">
把运气附加在大势之中,如何
把运气附加在大势之中,如何把运气附加在大势之中,如何
</div>
<div class="item_right_bottom">
<p>作者 还是皮不过你的我</p>
... ... @@ -818,7 +818,7 @@
</div>
<!--关于我们-->
<div class="mask" style="display: flex;">
<div class="mask" style="display: none;">
<div class="mask_box_a">
<!--大标题-->
<div class="mask_title">
... ...
... ... @@ -46,6 +46,8 @@
}
.margin_t{
margin-top: 0.1rem;
position: absolute;
bottom: -0.1rem;
}
</style>
</head>
... ... @@ -66,7 +68,7 @@
</div>
<!--中-->
<div class="top_t_middle">
<img src="images/peke.png">
<img src="images/icon_1.png">
</div>
<!--右-->
<div class="top_t_right">
... ... @@ -132,91 +134,226 @@
</div>
<!--图标-->
<div class="bottom_item">
<div class="bottom_item_box">
<!--图片-->
<div class="bottom_item_box_top">
<div class="bottom_item_box_top_p">
<img src="images/peke.png">
<!--微信-->
<div class="Wechat_box">
<!--未绑定-->
<div class="bottom_item_box Wechat_y">
<!--图片-->
<div class="bottom_item_box_top">
<div class="bottom_item_box_top_p">
<img src="images/weChat_1.png">
</div>
<div class="bottom_item_box_top_t">
微信
</div>
<!--<div class="bottom_item_box_top_t margin_t">-->
<!--已绑定"昵称"-->
<!--</div>-->
</div>
<div class="bottom_item_box_top_t">
微信
<!--下划线-->
<div class="bottom_item_box_mid"></div>
<!--文字-->
<div class="bottom_item_box_bottom bind_Wechat">
立即绑定
</div>
<!--<div class="bottom_item_box_top_t margin_t">-->
<!--已绑定"昵称"-->
<!--</div>-->
</div>
<!--下划线-->
<div class="bottom_item_box_mid"></div>
<!--文字-->
<div class="bottom_item_box_bottom">
立即绑定
<!--已绑定-->
<div class="bottom_item_box Wechat_n" style="display: none;">
<!--图片-->
<div class="bottom_item_box_top">
<div class="bottom_item_box_top_p">
<img src="images/weChat_1.png">
</div>
<div class="bottom_item_box_top_t">
微信
</div>
<div class="bottom_item_box_top_t margin_t">
已绑定"昵称"
</div>
</div>
<!--下划线-->
<!--<div class="bottom_item_box_mid"></div>-->
<!--文字-->
<div class="bottom_item_box_bottom unbind_Wechat">
取消绑定
</div>
</div>
</div>
<div class="bottom_item_box">
<!--图片-->
<div class="bottom_item_box_top">
<div class="bottom_item_box_top_p">
<img src="images/peke.png">
</div>
<div class="bottom_item_box_top_t">
微信
<!--微博-->
<div class="WeBlog_box">
<!--未绑定-->
<div class="bottom_item_box WeBlog_y">
<!--图片-->
<div class="bottom_item_box_top">
<div class="bottom_item_box_top_p">
<img src="images/weBlog_1.png">
</div>
<div class="bottom_item_box_top_t">
微博
</div>
<!--<div class="bottom_item_box_top_t margin_t">-->
<!--已绑定"昵称"-->
<!--</div>-->
</div>
<div class="bottom_item_box_top_t margin_t">
已绑定"昵称"
<!--下划线-->
<div class="bottom_item_box_mid"></div>
<!--文字-->
<div class="bottom_item_box_bottom bind_WeBlog">
立即绑定
</div>
</div>
<!--下划线-->
<!--<div class="bottom_item_box_mid"></div>-->
<!--文字-->
<div class="bottom_item_box_bottom">
取消绑定
<!--已绑定-->
<div class="bottom_item_box WeBlog_n" style="display: none;">
<!--图片-->
<div class="bottom_item_box_top">
<div class="bottom_item_box_top_p">
<img src="images/weBlog_1.png">
</div>
<div class="bottom_item_box_top_t">
微博
</div>
<div class="bottom_item_box_top_t margin_t">
已绑定"昵称"
</div>
</div>
<!--下划线-->
<!--<div class="bottom_item_box_mid"></div>-->
<!--文字-->
<div class="bottom_item_box_bottom unbind_WeBlog">
取消绑定
</div>
</div>
</div>
<div class="bottom_item_box">
<!--图片-->
<div class="bottom_item_box_top">
<div class="bottom_item_box_top_p">
<img src="images/peke.png">
<!--Facebook-->
<div class="Facebook_box">
<!--未绑定-->
<div class="bottom_item_box Facebook_y">
<!--图片-->
<div class="bottom_item_box_top">
<div class="bottom_item_box_top_p">
<img src="images/faceBook_1.png">
</div>
<div class="bottom_item_box_top_t">
Facebook
</div>
<!--<div class="bottom_item_box_top_t margin_t">-->
<!--已绑定"昵称"-->
<!--</div>-->
</div>
<div class="bottom_item_box_top_t">
微信
<!--下划线-->
<div class="bottom_item_box_mid"></div>
<!--文字-->
<div class="bottom_item_box_bottom bind_Facebook">
立即绑定
</div>
<!--<div class="bottom_item_box_top_t margin_t">-->
<!--已绑定"昵称"-->
<!--</div>-->
</div>
<!--下划线-->
<div class="bottom_item_box_mid"></div>
<!--文字-->
<div class="bottom_item_box_bottom">
立即绑定
<!--已绑定-->
<div class="bottom_item_box Facebook_n" style="display: none;">
<!--图片-->
<div class="bottom_item_box_top">
<div class="bottom_item_box_top_p">
<img src="images/faceBook_1.png">
</div>
<div class="bottom_item_box_top_t">
Facebook
</div>
<div class="bottom_item_box_top_t margin_t">
已绑定"昵称"
</div>
</div>
<!--下划线-->
<!--<div class="bottom_item_box_mid"></div>-->
<!--文字-->
<div class="bottom_item_box_bottom unbind_Facebook">
取消绑定
</div>
</div>
</div>
<div class="bottom_item_box">
<!--图片-->
<div class="bottom_item_box_top">
<div class="bottom_item_box_top_p">
<img src="images/peke.png">
<!--谷歌-->
<div class="Google_box">
<!--未绑定-->
<div class="bottom_item_box Google_y">
<!--图片-->
<div class="bottom_item_box_top">
<div class="bottom_item_box_top_p">
<img src="images/Google_1.png">
</div>
<div class="bottom_item_box_top_t">
Google
</div>
</div>
<div class="bottom_item_box_top_t">
微信
<!--下划线-->
<div class="bottom_item_box_mid"></div>
<!--文字-->
<div class="bottom_item_box_bottom bind_Google">
立即绑定
</div>
<!--<div class="bottom_item_box_top_t margin_t">-->
<!--已绑定"昵称"-->
<!--</div>-->
</div>
<!--下划线-->
<div class="bottom_item_box_mid"></div>
<!--文字-->
<div class="bottom_item_box_bottom">
立即绑定
<!--已绑定-->
<div class="bottom_item_box Google_n" style="display: none;">
<!--图片-->
<div class="bottom_item_box_top">
<div class="bottom_item_box_top_p">
<img src="images/Google_1.png">
</div>
<div class="bottom_item_box_top_t">
Google
</div>
<div class="bottom_item_box_top_t margin_t">
已绑定"昵称"
</div>
</div>
<!--下划线-->
<!--<div class="bottom_item_box_mid"></div>-->
<!--文字-->
<div class="bottom_item_box_bottom unbind_Google">
取消绑定
</div>
</div>
</div>
</div>
</div>
<!--设置新密码-->
<div class="mask">
<div class="mask_box m_top">
<!--标题-->
<div class="mask_tel">
设置密码
</div>
<!--输入框盒子-->
<div class="mask_box_i">
<!--设置新密码-->
<div class="mask_new">
<input class="mask_new_input" type="text" placeholder="设置新密码">
</div>
<!--输入验证码-->
<div class="mask_new">
<input class="mask_new_input" type="text" placeholder="再次输入密码">
</div>
<!--底部按钮-->
<div class="mask_tel_button">
<!--左边取消-->
<div class="mask_tel_button_left">
取消
</div>
<!--右边保存-->
<div class="mask_tel_button_right">
确定
</div>
</div>
</div>
</div>
</div>
... ... @@ -229,5 +366,43 @@
}
})
// ----------微信绑定----------
$('.bind_Wechat').click(function () {
$('.Wechat_y').hide()
$('.Wechat_n').show()
})
$('.unbind_Wechat').click(function () {
$('.Wechat_y').show()
$('.Wechat_n').hide()
})
// ----------微博绑定----------
$('.bind_WeBlog').click(function () {
$('.WeBlog_y').hide()
$('.WeBlog_n').show()
})
$('.unbind_WeBlog').click(function () {
$('.WeBlog_y').show()
$('.WeBlog_n').hide()
})
// ----------Facebook绑定----------
$('.bind_Facebook').click(function () {
$('.Facebook_y').hide()
$('.Facebook_n').show()
})
$('.unbind_Facebook').click(function () {
$('.Facebook_y').show()
$('.Facebook_n').hide()
})
// ----------Google绑定----------
$('.bind_Google').click(function () {
$('.Google_y').hide()
$('.Google_n').show()
})
$('.unbind_Google').click(function () {
$('.Google_y').show()
$('.Google_n').hide()
})
</script>
</html>
... ...