webfront / videoWeb · 提交

转到一个项目

作者 乔爽
提交 fd03cbd2dd90349f2867c84410472decbaccf943 1 个父辈 cf31f0cf

update

内嵌 并排对比
正在显示 2 个修改的文件 包含 109 行增加 和 263 行删除
... ... @@ -5,261 +5,6 @@
}
.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;
... ...
... ... @@ -99,7 +99,7 @@
<div class="mid_item_left">
手机号
</div>
<div class="mid_item_right">
<div class="mid_item_right set_tel">
修改
</div>
<!--手机数字-->
... ... @@ -112,16 +112,16 @@
<div class="mid_item2_left">
邮箱
</div>
<div class="mid_item2_right">
<div class="mid_item2_right set_email" >
设置邮箱
</div>
</div>
<!--密码-->
<div class="mid_item2">
<div class="mid_item2_left">
邮箱
密码
</div>
<div class="mid_item2_right">
<div class="mid_item2_right set_code">
修改密码
</div>
</div>
... ... @@ -325,12 +325,83 @@
</div>
</div>
<!--设置新密码-->
<div class="mask">
<!----------修改手机号---------->
<div class="mask mask_setTel" style="display: none;">
<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 border_no">
<div class="mask_new">
<input class="mask_new_small" type="text" placeholder="手机验证码">
</div>
<div class="mask_new_text">获取验证码</div>
</div>
<!--底部按钮-->
<div class="mask_tel_button">
<!--左边取消-->
<div class="mask_tel_button_left close_tel">
取消
</div>
<!--右边保存-->
<div class="mask_tel_button_right">
确定
</div>
</div>
</div>
</div>
</div>
<!----------设置邮箱---------->
<div class="mask mask_setEmail" style="display: none;">
<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 border_no">
<div class="mask_new">
<input class="mask_new_small" type="text" placeholder="邮箱验证码">
</div>
<div class="mask_new_text">获取验证码</div>
</div>
<!--底部按钮-->
<div class="mask_tel_button">
<!--左边取消-->
<div class="mask_tel_button_left close_email">
取消
</div>
<!--右边保存-->
<div class="mask_tel_button_right">
确定
</div>
</div>
</div>
</div>
</div>
<!----------设置密码---------->
<div class="mask mask_newCode" style="display: none;">
<div class="mask_box m_top">
<!--标题-->
<div class="mask_tel">
设置密码
修改密码
</div>
<!--输入框盒子-->
<div class="mask_box_i">
... ... @@ -345,7 +416,7 @@
<!--底部按钮-->
<div class="mask_tel_button">
<!--左边取消-->
<div class="mask_tel_button_left">
<div class="mask_tel_button_left close_code">
取消
</div>
<!--右边保存-->
... ... @@ -403,6 +474,36 @@
$('.Google_n').hide()
})
// 手机号
$('.set_tel').click(function () {
$('.mask_setTel').show()
// $('.mask_tel_button_left').hide()
})
$('.close_tel').click(function () {
$('.mask_setTel').hide()
$('.mask_new_input').val("")
$('.mask_new_small').val("")
})
// 设置邮箱
$('.set_email').click(function () {
$('.mask_setEmail').show()
})
$('.close_email').click(function () {
$('.mask_setEmail').hide()
$('.mask_new_input').val('')
$('.mask_new_small').val('')
})
// 修改密码
$('.set_code').click(function () {
$('.mask_newCode').show()
})
$('.close_code').click(function () {
$('.mask_newCode').hide()
$('.mask_new_input').val('')
})
</script>
</html>
... ...