作者 suhang

要显示太多修改。

为保证性能只显示 32 of 32+ 个文件。

... ... @@ -19,15 +19,19 @@
}
.mask_box{
width: 5.7rem;
height: 7rem;
height:max-content;
/*
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);
padding: 0 .5rem;
padding-bottom: .32rem;
}
.mask_text{
margin-top: 0.64rem;
... ... @@ -35,8 +39,10 @@
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
text-align: center;
}
.mask_box_top{
margin: 0 auto;
margin-top: 0.64rem;
width: 3.5rem;
display: flex;
... ... @@ -54,10 +60,12 @@
margin-top: 0.1rem;
}
.mask_box_mid{
margin-top: 0.9rem;
margin-top: 0.3rem;
display: flex;
flex-flow: column;
position: relative;
padding: 0 1.05rem;
margin-bottom: .6rem;
}
.mask_box_text{
display: flex;
... ... @@ -66,7 +74,7 @@
font-weight:500;
color:rgba(51,51,51,1);
position: absolute;
left: -0.9rem;
left: .3rem;
top: 0.16rem;
align-items: center;
}
... ... @@ -76,7 +84,7 @@
height: 0.6rem;
outline:none;
border: none;
border-bottom: 1px solid #E8E8E8;
text-decoration: none;
box-sizing: border-box;
padding: 0.1rem;
... ... @@ -89,7 +97,7 @@
color: #A61010;
position: absolute;
top: 0.8rem;
right: 0;
right: 1.2rem;
}
.mask_box_sub{
margin-top: 0.53rem;
... ... @@ -102,11 +110,14 @@
font-size: 0.26rem;
font-weight: bold;
color: #fff;
margin: 0 auto;
margin-top: .2rem;
}
.mask_box_account{
width: 3.5rem;
display: flex;
justify-content: space-between;
padding: 0 1.05rem;
justify-content: flex-end;
font-size: 0.14rem;
color: #333333;
margin-top: 0.28rem;
... ... @@ -126,7 +137,8 @@
.mask_box_model{
width: 3.5rem;
margin-top: 0.7rem;
margin: 0 auto;
margin-top: 0.3rem;
display: flex;
justify-content: space-between;
... ... @@ -143,6 +155,7 @@
border-radius: 50%;
}
.mask_box_bottom{
margin: 0 auto;
margin-top: 0.59rem;
width: 3.5rem;
font-size: 0.18rem;
... ... @@ -156,6 +169,7 @@
font-size: 0.14rem;
color: #333333;
margin-top: 0.28rem;
text-align: center;
}
/*立即登录,10秒后进入登录界面*/
.now_sub{
... ... @@ -167,6 +181,7 @@
display: flex;
align-items: center;
background:rgba(255,255,255,0.94);
z-index: 9;
}
.mask_big{
margin-top: 2.97rem;
... ... @@ -197,7 +212,7 @@
.mask_box_mid_input_remind{
font-size: 0.12rem;
position: absolute;
top: 0.86rem;
top: 1.1rem;
color: #999999;
}
.mask_underline{
... ... @@ -224,8 +239,11 @@
.mask_find{
margin-top: 3.04rem;
width: 5.3rem;
display: flex;
flex-flow: column;
height: 5rem;
/* display: flex;*/
/* flex-flow: column;*/
margin: 0 auto;
/* background: #fff;*/
}
.mask_find_big{
font-size: 0.48rem;
... ... @@ -323,7 +341,7 @@
color: #999999;
}
.mask_new_small{
width: 2.7rem;
width: 4rem;
font-size: 0.24rem;
outline: none;
border: none;
... ... @@ -524,11 +542,18 @@
.mask_submit_text{
display: flex;
flex-flow: column;
text-align: center;
font-size: 0.3rem;
color: #333333;
margin-top: 0.73rem;
line-height: 1.5;
}
.mask_submit_text p{
line-height: 1.5;
font-weight: 600;
}
.mask_submit_bottom{
margin: 0 auto;
margin-top: 0.43rem;
width: 2.5rem;
height: 0.5rem;
... ...
.container {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.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 {
width: 7.5rem;
/*height: 1.5rem;*/
background-color: #F7F7F7;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.top_t_left{
width: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
.top_t {
width: 6.86rem;
height: 0.8rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.top_t_left_text{
font-size:0.3rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(166,16,16,1);
.top_t_left {
width: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.icon-caidan{
.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 {
width: 1.2rem;
height: 0.5rem;
display: flex;
}
.top_t_middle img{
width: 100%;
height: 100%;
.top_t_middle img {
width: 100%;
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
.top_t_right {
display: flex;
justify-content: space-between;
align-items: center;
}
.icon-10{
position: relative;
.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 {
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_pic img {
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
/*-----底部------*/
.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 {
width: 5.56rem;
display: flex;
padding-bottom: 0.03rem;
border-bottom: 1px solid #999999;
margin: 0.3rem 0 0.2rem 0;
}
.top_d_input::placeholder{
color: #999999;
.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;
align-items: center;
box-sizing: border-box;
padding-left: 0.3rem;
.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;
align-items: center;
box-sizing: border-box;
padding-left: 0.3rem;
flex-flow: initial;
}
.mid_left{
width: 0.9rem;
height: 0.9rem;
display: flex;
/*align-items: center;*/
border-radius: 50%;
.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_left img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.mid_right{
margin-left: 0.3rem;
.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_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_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;
}
.item{
width: 6.86rem;
display: flex;
justify-content: space-around;
margin-top: 0.6rem;
.item {
width: 6.86rem;
display: flex;
justify-content: space-around;
margin-top: 0.6rem;
}
.item_m{
font-size: 0.36rem;
font-family:MicrosoftYaHei-Bold;
font-weight:bold;
/*color:rgba(166,16,16,1);*/
line-height: 0.36rem;
position: relative;
.item_m {
font-size: 0.36rem;
font-family: MicrosoftYaHei-Bold;
font-weight: bold;
/*color:rgba(166,16,16,1);*/
line-height: 0.36rem;
position: relative;
}
/*.item_right{*/
/*font-size: 0.36rem;*/
/*font-family:MicrosoftYaHei-Bold;*/
/*font-weight:bold;*/
/*color:rgba(51,51,51,1);*/
/*line-height: 0.36rem;*/
/*position: relative;*/
/*font-size: 0.36rem;*/
/*font-family:MicrosoftYaHei-Bold;*/
/*font-weight:bold;*/
/*color:rgba(51,51,51,1);*/
/*line-height: 0.36rem;*/
/*position: relative;*/
/*}*/
.item_number{
width: 0.2rem;
height: 0.2rem;
background:rgba(166,16,16,1);
border:2px solid rgba(255, 255, 255, 1);
border-radius:50%;
font-size: 0.12rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(252,254,255,1);
line-height: 0.36rem;
display: flex;
align-items: center;
justify-content: center;
.item_number {
width: 0.2rem;
height: 0.2rem;
background: rgba(166, 16, 16, 1);
border: 2px solid rgba(255, 255, 255, 1);
border-radius: 50%;
position: absolute;
top: -0.18rem;
left: 0.6rem;
font-size: 0.12rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: rgba(252, 254, 255, 1);
line-height: 0.36rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -0.18rem;
left: 0.6rem;
}
.item_color{
color: #A61010;
.item_color {
color: #A61010;
}
.item_color:before{
content: "";
width: 0.8rem;
height: 0.02rem;
background: #A61010;
position: absolute;
bottom: -0.15rem;
/*color: #A61010;*/
.item_color:before {
content: "";
width: 0.8rem;
height: 0.02rem;
background: #A61010;
position: absolute;
bottom: -0.15rem;
/*color: #A61010;*/
}
.message{
margin-top: 0.5rem;
width: 6.86rem;
font-size: 0.24rem;
font-family:MicrosoftYaHei;
font-weight:400;
line-height: 0.36rem;
.message {
margin-top: 0.5rem;
width: 6.86rem;
font-size: 0.24rem;
font-family: MicrosoftYaHei;
font-weight: 400;
line-height: 0.36rem;
}
.message_box{
margin-top: 0.2rem;
.message_box {
margin-top: 0.2rem;
}
.color_red{
color: #A61010;
.color_red {
color: #A61010;
}
/*审核消息*/
.audit{
margin-top: 0.66rem;
width: 6.86rem;
.audit {
margin-top: 0.66rem;
width: 6.86rem;
}
.audit_big{
margin-top: 0.28rem;
font-size: 0.24rem;
font-family:MicrosoftYaHei-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height: 0.36rem;
.audit_big {
margin-top: 0.28rem;
font-size: 0.24rem;
font-family: MicrosoftYaHei-Bold;
font-weight: bold;
color: rgba(51, 51, 51, 1);
line-height: 0.36rem;
}
.audit_big:first-child{
margin-top: 0;
.audit_big:first-child {
margin-top: 0;
}
.audit_big:last-child{
margin-bottom: 0.6rem;
.audit_big:last-child {
margin-bottom: 0.6rem;
}
.audit_small{
font-size: 0.24rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(51,51,51,1);
line-height: 0.36rem;
.audit_small {
font-size: 0.24rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 0.36rem;
}
/*菜单*/
/*
.menu_item{
width: 7.5rem;
display: flex;
... ... @@ -256,21 +286,83 @@
top: 0.8rem;
z-index: 999;
}
.menu_item_a{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 0.38rem 0;
border-bottom: 1px solid #EBEBEB;
margin: 0 0.2rem;
}
.menu_item_a_pic{
width: 0.08rem;
height: 0.16rem;
display: flex;
*/
.menu_item_a {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 0.38rem 0;
border-bottom: 1px solid #EBEBEB;
margin: 0 0.2rem;
}
.menu_item_a_pic {
width: 0.08rem;
height: 0.16rem;
display: flex;
}
.menu_item_a_pic img {
width: 100%;
height: 100%;
}
.mask {
padding-top: 2.18rem;
}
.fit_name {
width: 5.7rem;
height: 4.4rem;
margin: 0 auto;
background: #fff;
box-shadow: 0 0.07rem 0.1rem 0.01rem rgba(0, 0, 0, 0.08);
padding-bottom: .59rem
}
.fit_name_title {
text-align: center;
position: relative;
font-size: .48rem;
padding-top: .65rem;
font-weight: bold;
}
.fit_name_title img {
width: .3rem;
height: .3rem;
position: absolute;
top: .23rem;
right: .34rem;
}
.fit_name_main form {
padding: 0 .85rem;
margin-top: .75rem;
}
.menu_item_a_pic img{
width: 100%;
height: 100%;
.fit_name_main form input {
width: 100%;
display: block;
padding: .25rem 0;
border: 0;
border-bottom: .01rem solid #E8E8E8;
outline: none;
}
.fit_name_main form p {
font-size: .24rem;
color: #999;
margin-top: .15rem;
}
.fit_name_main form button {
width: 100%;
height: .5rem;
border: 0;
color: #fff;
background: rgba(192, 44, 44, 1);
border-radius: .04rem;
outline: none;
}
... ...
.container {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.container {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.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 {
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 {
width: 1.2rem;
height: 0.5rem;
display: flex;
}
.top_t_middle img{
width: 100%;
height: 100%;
.top_t_middle img {
width: 100%;
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.2rem;
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 {
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_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{
width: 6.86rem;
display: flex;
flex-flow: column;
margin-top: 0.13rem;
}
.mid_head{
width: 6.86rem;
height: 3rem;
display: flex;
border-radius: 0.08rem;
}
.mid_head img{
width: 100%;
height: 100%;
border-radius: 0.08rem;
}
.mid_title{
margin-top: 0.6rem;
width: 6.84rem;
height: 2.83rem;
background:rgba(255,222,37,0);
border:1px solid rgba(232, 232, 232, 1);
border-radius: 0.1rem;
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height: 0.36rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.25rem 0.35rem 0.19rem 0.35rem;
overflow-y: scroll;
.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 {
width: 6.86rem;
display: flex;
flex-flow: column;
margin-top: 0.13rem;
}
.mid_head {
width: 6.86rem;
height: 3rem;
display: flex;
border-radius: 0.08rem;
}
.mid_head img {
width: 100%;
height: 100%;
border-radius: 0.08rem;
}
.mid_title {
margin-top: 0.6rem;
width: 6.84rem;
height: 2.83rem;
background: rgba(255, 222, 37, 0);
border: 1px solid rgba(232, 232, 232, 1);
border-radius: 0.1rem;
font-size: 0.24rem;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 0.36rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.25rem 0.35rem 0.19rem 0.35rem;
overflow-y: scroll;
}
/*文本框下的介绍内容*/
.mid_small{
display: flex;
justify-content: center;
margin-top: 0.25rem;
}
.mid_small_left{
width: 0.6rem;
font-size: 0.18rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
line-height: 0.3rem;
}
.mid_small_right{
font-size: 0.18rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
line-height: 0.3rem;
margin-left: 0.21rem;
}
.mid_type{
display: flex;
margin-top: 0.42rem;
flex-flow: column;
}
.mid_type_title{
width: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.36rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height: 0.3rem;
}
.mid_type_title_dot{
width: 0.14rem;
height: 0.14rem;
background:rgba(166,16,16,1);
border-radius:50%;
}
.mid_type_items{
width: 6rem;
display: flex;
flex-wrap: wrap;
margin-left: 0.4rem;
justify-content: space-between;
}
.mid_type_items_item{
width: 1.5rem;
height: 0.5rem;
background:rgba(166,16,16,0);
border:1px solid rgba(232, 232, 232, 1);
border-radius: 0.04rem;
line-height: 0.5rem;
text-align: center;
font-size: 0.24rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(51,51,51,1);
margin-top: 0.2rem;
}
.mid_type_items_title{
width: 6.1rem;
height: 0.5rem;
display: flex;
margin-top: 0.27rem;
background:rgba(232,232,232,0);
border:1px solid rgba(232, 232, 232, 1);
border-radius:0.04rem;
}
.mid_type_items_title input{
font-size: 0.24rem;
width: 100%;
outline: none;
border: none;
box-sizing: border-box;
padding: 0 0.14rem;
}
.mid_type_items_area{
margin-top: 0.2rem;
width: 6.1rem;
height: 2.41rem;
background:rgba(232,232,232,0);
border:1px solid rgba(232, 232, 232, 1);
border-radius: 0.04rem;
}
.mid_type_items_area textarea{
width: 100%;
height: 100%;
border: none;
outline: none;
box-sizing: border-box;
padding: 0.15rem 0.15rem;
}
.mid_type_items_area textarea::placeholder{
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
line-height: 0.3rem;
.mid_small {
display: flex;
justify-content: center;
margin-top: 0.25rem;
}
.mid_small_left {
width: 0.6rem;
font-size: 0.18rem;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
line-height: 0.3rem;
}
.mid_small_right {
font-size: 0.18rem;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
line-height: 0.3rem;
margin-left: 0.21rem;
}
.mid_type {
display: flex;
margin-top: 0.42rem;
flex-flow: column;
}
.mid_type_title {
width: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.36rem;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: rgba(51, 51, 51, 1);
line-height: 0.3rem;
}
.mid_type_title_dot {
width: 0.14rem;
height: 0.14rem;
background: rgba(166, 16, 16, 1);
border-radius: 50%;
}
.mid_type_items {
width: 6rem;
display: flex;
flex-wrap: wrap;
margin-left: 0.4rem;
justify-content: space-between;
}
.mid_type_items_item {
width: 1.5rem;
height: 0.5rem;
background: rgba(166, 16, 16, 0);
border: 1px solid rgba(232, 232, 232, 1);
border-radius: 0.1rem;
line-height: 0.5rem;
text-align: center;
font-size: 0.24rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: rgba(51, 51, 51, 1);
margin-top: 0.2rem;
}
.mid_type_items_item_active {
background: #A61010;
color: #fff;
}
.mid_type_items_title {
width: 6.1rem;
height: 0.5rem;
display: flex;
margin-top: 0.27rem;
background: rgba(232, 232, 232, 0);
border: 1px solid rgba(232, 232, 232, 1);
border-radius: 0.04rem;
}
.mid_type_items_title input {
font-size: 0.24rem;
width: 100%;
outline: none;
border: none;
box-sizing: border-box;
padding: 0 0.14rem;
}
.mid_type_items_area {
margin-top: 0.2rem;
width: 6.1rem;
height: 2.41rem;
background: rgba(232, 232, 232, 0);
border: 1px solid rgba(232, 232, 232, 1);
border-radius: 0.04rem;
}
.mid_type_items_area textarea {
width: 100%;
height: 100%;
border: none;
outline: none;
resize: none;
box-sizing: border-box;
padding: 0.15rem 0.15rem;
}
.mid_type_items_area textarea::placeholder {
font-size: 0.24rem;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
line-height: 0.3rem;
}
/*图片*/
.mid_type_intro{
margin-left: 0.3rem;
font-size: 0.18rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
line-height: 0.4rem;
}
.mid_pic_items{
display: flex;
flex-wrap: wrap;
margin-bottom: 0.3rem;
}
.mid_pic_item{
display: flex;
width: 2.93rem;
height: 1.7rem;
margin-left: 0.3rem;
margin-top: 0.3rem;
position: relative;
}
.mid_pic_item img{
width: 100%;
height: 100%;
}
.close_button{
width: 0.3rem;
height: 0.3rem;
background-color: #EB3941;
border-radius: 50%;
position: absolute;
right: -0.16rem;
top: -0.1rem;
display: flex;
align-items: center;
justify-content: center;
}
.mid_pic_set{
width: 2.93rem;
height: 1.7rem;
background:rgba(232,232,232,0);
border:2px dashed rgba(232,232,232,1);
margin-left: 0.3rem;
margin-top: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
}
.contact_way{
width: 1.7rem;
}
.mid_type_items_title input::placeholder{
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color: #999999;
line-height: 0.24rem;
}
.mid_type_items_sub{
margin: 0.65rem 0;
width: 3.5rem;
height: 0.5rem;
line-height: 0.5rem;
background:rgba(192,44,44,1);
border-radius: 0.04rem;
font-size: 0.26rem;
font-weight: bold;
text-align: center;
color: #ffffff;
}
.contact_mid{
display: flex;
align-items: center;
justify-content: center;
.mid_type_intro {
margin-left: 0.3rem;
font-size: 0.18rem;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
line-height: 0.4rem;
}
.mid_pic_items {
width: 6.13rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 0.3rem;
}
.mid_pic_item {
display: flex;
width: 2.93rem;
height: 1.7rem;
/* margin-left: 0.3rem;*/
margin-top: 0.3rem;
position: relative;
}
.mid_pic_item img {
width: 100%;
height: 100%;
}
.close_button {
width: 0.3rem;
height: 0.3rem;
background-color: #EB3941;
border-radius: 50%;
position: absolute;
right: -0.16rem;
top: -0.1rem;
display: flex;
align-items: center;
justify-content: center;
}
.mid_pic_set {
width: 2.93rem;
height: 1.7rem;
background: rgba(232, 232, 232, 0);
border: 2px dashed rgba(232, 232, 232, 1);
/* margin-left: 0.3rem;*/
margin-top: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
}
.contact_way {
width: 1.7rem;
}
.mid_type_items_title input::placeholder {
font-size: 0.24rem;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: #999999;
line-height: 0.24rem;
}
.mid_type_items_sub {
margin: 0.65rem 0;
width: 3.5rem;
height: 0.5rem;
line-height: 0.5rem;
background: rgba(192, 44, 44, 1);
border-radius: 0.04rem;
font-size: 0.26rem;
font-weight: bold;
text-align: center;
color: #ffffff;
}
.contact_mid {
display: flex;
align-items: c·enter;
justify-content: center;
}
/*菜单*/
.menu_item{
width: 7.5rem;
display: flex;
flex-flow: column;
font-size: 0.24rem;
font-weight: bold;
background-color: #F7F7F7;
position: absolute;
left: 0;
bottom: 0;
top: 0.8rem;
z-index: 999;
}
.menu_item_a{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 0.38rem 0;
border-bottom: 1px solid #EBEBEB;
margin: 0 0.2rem;
}
.menu_item_a_pic{
width: 0.08rem;
height: 0.16rem;
display: flex;
}
.menu_item_a_pic img{
width: 100%;
height: 100%;
.menu_item_a {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 0.38rem 0;
border-bottom: 1px solid #EBEBEB;
margin: 0 0.2rem;
}
.menu_item_a_pic {
width: 0.08rem;
height: 0.16rem;
display: flex;
}
.menu_item_a_pic img {
width: 100%;
height: 100%;
}
... ...
.container {
width: 100%;
... ... @@ -51,7 +51,6 @@
}
/*右边*/
.top_t_right{
width: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
... ... @@ -243,8 +242,10 @@
}
.item_pic{
width: 6.86rem;
flex-wrap: wrap;
display: flex;
justify-content: space-between;
margin-top: .3rem;
}
.pic_box{
width: 3.2rem;
... ... @@ -256,6 +257,7 @@
flex-flow: column;
align-items: center;
justify-content: center;
margin-bottom: .3rem;
}
.pic_box_top{
width: 3.2rem;
... ... @@ -365,14 +367,14 @@
.mask{
width: 7.5rem;
height: 100%;
background-color: #ffffff;
opacity: 0.9;
background-color: rgba(255,255,255,0.9);
position: fixed;
top: 1.69rem;
/*top: 0;*/
z-index: 999;
z-index: 9;
display: flex;
align-items: center;
/* align-items: center;*/
padding-top: .54rem;
overflow-y: hidden;
}
.pop{
... ... @@ -488,6 +490,10 @@
.month_item{
width: 70%;
display: flex;
justify-content: space-between;
justify-content: space-between;
}
input::-webkit-search-cancel-button {
/* display: none;*/
color: #000;
}
\ No newline at end of file
... ...
.container {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.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.2rem;
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_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.6rem;
display: flex;
width: 6.2rem;
flex-flow: column;
}
.mid_title{
font-size: 0.48rem;
... ...
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
body {
padding-top: 1.8rem;
}
.container {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.top {
width: 7.5rem;
/*height: 1.5rem;*/
background-color: #F7F7F7;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
z-index: 99;
}
.top_t_right_text {
font-size: 0.2rem;
font-weight: 500;
color: #333333;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: flex-start;
align-items: center;
}
.top_t {
width: 6.86rem;
height: 0.8rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.top_t_left {
width: 1.2rem;
/* width:max-content;*/
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 {
display: flex;
justify-content: space-between;
align-items: center;
}
.icon-10 {
position: relative;
margin-right: .1rem;
}
.top_t_right_pic {
width: 0.4rem;
height: 0.4rem;
display: flex;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin-left: .5rem;
position: relative;
}
.head_right_nav{
width: 2.14rem;
position: absolute;
top: 160%;
right: 0;
background:rgba(255,255,255,1);
box-shadow:0px 1px 6px 0px rgba(102,102,102,0.14);
border-radius:10px;
display: none;
}
.head_right_item a{
display: block;
height: .8rem;
font-size: .26rem;
padding-left: .27rem;
line-height: .8rem;
}
.top_t_right_pic img {
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
/*-----底部------*/
.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.6rem;
display: flex;
width: 6.2rem;
flex-flow: column;
}
.swiper-pagination-bullet{
background:rgba(255,255,255,0.61) !important;
}
.swiper-pagination-bullet-active{
background: #A61010 !important;
}
/*菜单*/
.menu_item {
width: 7.5rem;
display: flex;
flex-flow: column;
font-size: 0.24rem;
font-weight: bold;
background-color: #F7F7F7;
position: fixed;
left: 0;
bottom: 0;
top: 0.8rem;
z-index: 1999;
}
.menu_item_a {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 0.38rem 0;
border-bottom: 1px solid #EBEBEB;
margin: 0 0.2rem;
}
.menu_item_a_pic {
width: 0.08rem;
height: 0.16rem;
display: flex;
}
.menu_item_a_pic img {
width: 100%;
height: 100%;
}
.banner {
position: relative;
}
.growl {
position: fixed;
top: 50%;
left: 42%;
width:max-content;
height: .66rem;
z-index: 9999999;
text-align: center;
}
.alert {
padding: .15rem;
margin-bottom: .2rem;
border-radius: .04rem;
}
.message_success {
color: #fff;
font-size: .14rem;
}
.growl-item {
border-radius: .08rem;
background-color: rgba(0, 0, 0, 0.8);
border-color: #fff;
margin-top: -.88rem;
}
.more{
width: .8rem;
margin: 0 auto;
margin-top: .25rem;
padding: .11rem 0;
border-bottom: .01rem solid #A61010;
}
.more a{
display: block;
color: #A61010;
font-size: .14rem;
text-align: center;
}
\ No newline at end of file
... ...
... ... @@ -52,8 +52,7 @@
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.2rem;
.top_t_right{
display: flex;
justify-content: space-between;
align-items: center;
... ...
... ... @@ -50,8 +50,7 @@
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.2rem;
.top_t_right{
display: flex;
justify-content: space-between;
align-items: center;
... ...
body{
padding-bottom: 1.6rem;
}
.mid{
flex-flow: unset !important;
}
.container {
width: 100%;
display: flex;
... ... @@ -50,8 +54,7 @@
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.2rem;
.top_t_right{
display: flex;
justify-content: space-between;
align-items: center;
... ... @@ -187,7 +190,7 @@
/*line-height:24px;*/
}
.bottom_top_b_att{
width: 1rem;
width: 1.2rem;
height: 0.28rem;
background: #C02C2C;
border-radius: 0.04rem;
... ... @@ -205,10 +208,14 @@
height: 1.58rem;
position: fixed;
bottom: 0;
background-image: url(../images/big_bg.png);
background-repeat: no-repeat;
background-size: cover;
}
.menu_top{
display: flex;
justify-content: space-around;
padding: 0 0.3rem;
}
.menu_top_item{
display: flex;
... ...
... ... @@ -50,8 +50,7 @@
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.2rem;
.top_t_right{
display: flex;
justify-content: space-between;
align-items: center;
... ...
... ... @@ -50,8 +50,7 @@
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.2rem;
.top_t_right{
display: flex;
justify-content: space-between;
align-items: center;
... ... @@ -324,7 +323,8 @@
/*分享*/
.share_function{
width: 3.2rem;
height: 0.8rem;
/* height: 0.8rem;*/
padding: .12rem 0;
display: flex;
justify-content: space-around;
background-color: #fff;
... ... @@ -391,7 +391,8 @@
line-height: 0.5rem;
}
.comment_item_right_text{
font-size: 0.16rem;
font-size: 0.18rem;
font-weight: 500;
margin-top: 0.1rem;
line-height: 0.3rem;
}
... ...
body{
padding-bottom: 1rem;
}
.Figure_title {
text-align: center;
margin-top: .43rem;
margin-bottom: .26rem;
}
.Figure_title p {
font-size: .14rem;
color: #A61010;
font-weight: 500;
margin-bottom: .07rem;
}
.Figure_title h2 {
font-size: .3rem;
color: #333;
font-weight: bold;
}
.Figure_list {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 .53rem;
}
.Figure_item {
width: 3rem;
height: 3.5rem;
box-sizing: border-box;
padding: .2rem .3rem;
padding-bottom: 0;
margin-bottom: .2rem;
background: rgba(255, 255, 255, 1);
box-shadow: 0px .01rem .06rem 0px rgba(102, 102, 102, 0.14);
border-radius: .1rem;
}
.Figure_item img {
display: block;
width: 2.4rem;
height: 2.7rem;
}
.Figure_item_text {
padding: .18rem 0;
text-align: center;
font-size: .24rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.Article .Figure_item {
padding: 0;
}
.Article .Figure_item img {
width: 3rem;
border-radius: .1rem .1rem 0px 0px;
height: 1.7rem;
}
... ...
... ... @@ -50,8 +50,7 @@
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.5rem;
.top_t_right{
display: flex;
justify-content: space-between;
align-items: center;
... ... @@ -74,11 +73,7 @@
-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;
... ... @@ -202,7 +197,7 @@
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height: 0.24rem;
/* line-height: 0.24rem;*/
}
.item{
margin-top: 0.24rem;
... ... @@ -817,35 +812,4 @@
overflow-y: auto;
margin-bottom: 0.6rem;
}
/*菜单*/
.menu_item{
width: 7.5rem;
display: flex;
flex-flow: column;
font-size: 0.24rem;
font-weight: bold;
background-color: #F7F7F7;
position: absolute;
left: 0;
bottom: 0;
top: 0.8rem;
z-index: 1999;
}
.menu_item_a{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 0.38rem 0;
border-bottom: 1px solid #EBEBEB;
margin: 0 0.2rem;
}
.menu_item_a_pic{
width: 0.08rem;
height: 0.16rem;
display: flex;
}
.menu_item_a_pic img{
width: 100%;
height: 100%;
}
... ...
... ... @@ -50,8 +50,7 @@
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.2rem;
.top_t_right{
display: flex;
justify-content: space-between;
align-items: center;
... ... @@ -285,7 +284,6 @@
}
/*右边*/
.top_t_right{
width: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
... ...
... ... @@ -50,8 +50,7 @@
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.2rem;
.top_t_right{
display: flex;
justify-content: space-between;
align-items: center;
... ... @@ -178,7 +177,6 @@
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height: 0.24rem;
/*display: flex;*/
text-align: center;
}
... ...
... ... @@ -50,8 +50,7 @@
height: 100%;
}
/*右边*/
.top_t_right{
width: 1.2rem;
.top_t_right{
display: flex;
justify-content: space-between;
align-items: center;
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta charset="UTF-8">
<title>个人主页</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/grzy.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_aj31y803pii.css">
<script src="js/base.js"></script>
<script src="js/jquery.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_aj31y803pii.css">
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" type="text/css" href="css/grzy.css">
<script src="js/base.js"></script>
<script src="js/jquery.min.js"></script>
<style>
.icon-caidan{
font-size: 0.5rem;
}
.icon-magnifier{
color: #999999;
}
<style>
.icon-caidan {
font-size: 0.5rem;
}
.f_size{
font-weight: normal;
font-size: 0.18rem;
}
.icon-xiugai{
margin-left: 0.15rem;
font-size: 0.3rem;
color: #999999;
display: flex;
font-weight: bold;
align-items: center;
}
.top_dot{
width: 0.08rem;
height: 0.08rem;
background:rgba(166,16,16,1);
border:1px solid rgba(255, 255, 255, 1);
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
}
.color_black{
color: black;
}
.margin_t{
margin-top: 0.1rem;
}
</style>
</head>
.icon-magnifier {
color: #999999;
}
<body>
<div class="container">
<div class="top">
<!--顶部菜单-->
<div class="top_t">
<!--左-->
<div class="top_t_left">
<!--中文字-->
<div class="top_t_left_text">
</div>
<!--菜单图标-->
<div class="iconfont icon-caidan">
<div class="menu_item" style="display: none;">
.f_size {
font-weight: normal;
font-size: 0.18rem;
}
.icon-xiugai {
margin-left: 0.15rem;
font-size: 0.3rem;
color: #999999;
display: flex;
font-weight: bold;
align-items: center;
}
.top_dot {
width: 0.08rem;
height: 0.08rem;
background: rgba(166, 16, 16, 1);
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
}
.color_black {
color: black;
}
<!--<p class="index_jump">主页</p >-->
<!--<p class="rwxq_jump">人物详情</p>-->
<!--<p class="grzy_jump">个人主页</p>-->
<!--<p class="spxq_jump">视频详情</p>-->
<div class="menu_item_a">
<div>首页</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
<div class="menu_item_a">
<div>精选</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
<div class="menu_item_a">
<div>动态</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
<div class="menu_item_a">
<div>百科</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
.margin_t {
margin-top: 0.1rem;
}
</style>
</head>
</div>
<body>
<div class="container">
<div class="top">
<!--顶部菜单-->
<div class="top_t">
<!--左-->
<div class="top_t_left">
<!--中文字-->
<div class="top_t_left_text">
</div>
<!--菜单图标-->
<div class="iconfont icon-caidan">
<!--<div class=""></div>-->
<!--菜单列表-->
<div class="menu_item" style="display: none;">
</div>
</div>
<!--中-->
<div class="top_t_middle">
<img src="images/icon_1.png">
</div>
<!--右-->
<div class="top_t_right">
<!--铃声-->
<div class="iconfont icon-10">
<!--小红点-->
<div class="top_dot"></div>
</div>
<!--头像-->
<div class="top_t_right_pic">
<img src="images/1.png">
</div>
</div>
</div>
<!--底部搜索-->
<div class="top_d">
<div class="iconfont icon-magnifier"></div>
<input class="top_d_input" placeholder="搜索音乐/作品/风格">
</div>
</div>
<!--信息框-->
<div class="mid">
<!--左边图片-->
<div class="mid_left">
<img src="images/peke.png">
</div>
<!--右边图片-->
<div class="mid_right">
<!--大昵称-->
<div class="mid_right_big">
皮还是皮不过我的你
<!--修改-->
<div class="iconfont icon-xiugai ">
<p class="f_size">修改</p>
</div>
</div>
<!--小昵称-->
<div class="mid_right_small">
皮还是皮不过我的你
<!--修改按钮-->
<div class="iconfont icon-xiugai ">
<p class="f_size">修改</p>
</div>
</div>
</div>
</div>
<!--动态 审核-->
<div class="item">
<div class="item_m item_color" data-id ="1">
动态
<div class="item_number" data-id ="1">
12
</div>
<!--<p class="index_jump">主页</p >-->
<!--<p class="rwxq_jump">人物详情</p>-->
<!--<p class="grzy_jump">个人主页</p>-->
<!--<p class="spxq_jump">视频详情</p>-->
<a href="index.html">
<div class="menu_item_a">
<div>首页</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
</a>
<a href="">
<div class="menu_item_a">
<div>精选</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
</a>
<a href="">
<div class="menu_item_a">
<div>动态</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
</a>
<a href="">
<div class="menu_item_a">
<div>百科</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
</a>
</div>
</div>
</div>
<!--中-->
<div class="top_t_middle">
<img src="images/icon_1.png">
</div>
<!--右-->
<div class="top_t_right" style="display: none">
<!--铃声-->
<div class="iconfont icon-10">
<div class="top_dot"></div>
</div>
<div class="top_t_right_text">
注册/登录
</div>
<!--头像-->
<div class="top_t_right_pic" style="display: none">
<img src="images/1.png">
</div>
</div>
<div class="top_t_right">
<div class="top_t_right_pic">
<img src="images/1.png">
<div class="head_right_nav">
<div class="head_right_item">
<a href="grzy.html">个人主页</a>
</div>
<div class="head_right_item">
<a href="zhsz.html">设置</a>
</div>
<div class="head_right_item">
<a href="">退出登录</a>
</div>
</div>
</div>
</div>
</div>
<!--底部搜索-->
<div class="top_d">
<div class="iconfont icon-magnifier"></div>
<input class="top_d_input" placeholder="搜索音乐/作品/风格">
</div>
</div>
<!--信息框-->
<div class="mid">
<!--左边图片-->
<div class="mid_left">
<img src="images/peke.png">
</div>
<!--右边图片-->
<div class="mid_right">
<!--大昵称-->
<div class="mid_right_big">
皮还是皮不过我的你
<!--修改-->
<div class="iconfont icon-xiugai ">
<p class="f_size">修改</p>
</div>
</div>
<!--小昵称-->
<div class="mid_right_small">
皮还是皮不过我的你
<!--修改按钮-->
<div class="iconfont icon-xiugai ">
<p class="f_size">修改</p>
</div>
</div>
</div>
</div>
<!--动态 审核-->
<div class="item">
<div class="item_m item_color" data-id="1">
动态
<div class="item_number" data-id="1">
12
</div>
</div>
<div class="item_m ">
审核
<div class="item_number">
9
</div>
</div>
</div>
<!--动态消息-->
<div class="message" >
<div class="message_box">
<p class="color_red">
小猪佩奇
<span class="color_black">
赞了你的
</span>
《中国流行音乐的发展历程》
</p>
<p class="color_red margin_t">
小猪佩奇
<span class="color_black">
关注了你
</span>
</p>
</div>
<div class="message_box">
<p class="color_red">
小猪佩奇
<span class="color_black">
赞了你的
</span>
《中国流行音乐的发展历程》
</p>
<p class="color_red margin_t">
小猪佩奇
<span class="color_black">
关注了你
</span>
</p>
</div>
<div class="message_box">
<p class="color_red">
小猪佩奇
<span class="color_black">
赞了你的
</span>
《中国流行音乐的发展历程》
</p>
<p class="color_red margin_t">
小猪佩奇
<span class="color_black">
关注了你
</span>
</p>
</div>
</div>
<div class="item_m ">
审核
<div class="item_number">
9
</div>
</div>
</div>
<!--动态消息-->
<div class="message">
<div class="message_box">
<p class="color_red">
小猪佩奇
<span class="color_black">
赞了你的
</span>
《中国流行音乐的发展历程》
</p>
<p class="color_red margin_t">
小猪佩奇
<span class="color_black">
关注了你
</span>
</p>
</div>
<div class="message_box">
<p class="color_red">
小猪佩奇
<span class="color_black">
赞了你的
</span>
《中国流行音乐的发展历程》
</p>
<p class="color_red margin_t">
小猪佩奇
<span class="color_black">
关注了你
</span>
</p>
</div>
<div class="message_box">
<p class="color_red">
小猪佩奇
<span class="color_black">
赞了你的
</span>
《中国流行音乐的发展历程》
</p>
<p class="color_red margin_t">
小猪佩奇
<span class="color_black">
关注了你
</span>
</p>
</div>
</div>
<!--审核消息-->
<div class="audit" style="display: none;" >
<div class="audit_big">
正在审核
<p class="audit_small">你提交的 <span class="color_red">12306</span>内容正在审核中,请耐心等待。</p>
</div>
</div>
<!--审核消息-->
<div class="audit" style="display: none;">
<div class="audit_big">
正在审核
<p class="audit_small">你提交的 <span class="color_red">12306</span>内容正在审核中,请耐心等待。</p>
</div>
<div class="audit_big" >
正在审核
<p class="audit_small">你提交的 <span class="color_red">12306</span>内容正在审核中,请耐心等待。</p>
</div>
</div>
</div>
<div class="audit_big">
正在审核
<p class="audit_small">你提交的 <span class="color_red">12306</span>内容正在审核中,请耐心等待。</p>
</div>
</div>
<div class="mask fit" style="display: none">
<div class="fit_name">
<div class="fit_name_title">
设置昵称
<img src="images/close.png" alt="">
</div>
<div class="fit_name_main">
<form action="">
<input type="text" name="" id="" placeholder="请设置您的昵称">
<p>不超过8个中文,不超过12个英文字母,不能有除了_-以外的字符</p>
<button type="button">完成</button>
</form>
</div>
</div>
</div>
<div class="mask fit2" style="display: none">
<div class="fit_name">
<div class="fit_name_title">
设置签名
<img src="images/close.png" alt="">
</div>
<div class="fit_name_main">
<form action="">
<input type="text" name="" id="" placeholder="请设置您的签名">
<p>不超过30个中文</p>
<button type="button">完成</button>
</form>
</div>
</div>
</div>
<div id="message_info" class="growl" style="display:none;">
<div id="message_content" class="growl-item alert message_error"></div>
</div>
</div>
</body>
<script>
//点击打开菜单
$('.icon-caidan').click(function () {
console.log(11)
$('.menu_item').slideToggle();
// 关闭图片功能 2019.4.8
// if($(this).hasClass("icon-caidan")){
// $(this).addClass("icon-guanbi");
// $(this).removeClass("icon-caidan");
// $("body").css("overflow","hidden");
// }else{
// $(this).removeClass("icon-guanbi");
// $(this).addClass("icon-caidan");
// $("body").css("overflow","auto");
// }
})
var addMessage = function(type, message) {
$("#message_content").html("");
$("#message_content").removeClass("message_success");
$("#message_content").removeClass("message_error");
if (message != null && message != '') {
if (type == 'success') {
$("#message_content").addClass("message_success");
} else {
$("#message_content").addClass("message_error");
}
$("#message_content").html(message);
$("#message_info").fadeIn();
setTimeout(function() {
$("#message_info").fadeOut();
}, 1000);
};
};
//点击打开菜单
$('.icon-caidan').click(function() {
console.log(11)
$('.menu_item').slideToggle();
// 关闭图片功能 2019.4.8
// if($(this).hasClass("icon-caidan")){
// $(this).addClass("icon-guanbi");
// $(this).removeClass("icon-caidan");
// $("body").css("overflow","hidden");
// }else{
// $(this).removeClass("icon-guanbi");
// $(this).addClass("icon-caidan");
// $("body").css("overflow","auto");
// }
})
//标题切换
$('.item_m').click(function() {
var index = $(this).index()
//标题切换
$('.item_m').click(function () {
var index = $(this).index()
$(this).addClass('item_color').siblings(".item_m").removeClass('item_color')
$(this).addClass('item_color').siblings(".item_m").removeClass('item_color')
//内容切换
var dataid = $(this).attr("data-id");
if (dataid == 1) {
$(".message").show();
$('.audit').hide();
} else {
$(".audit").show();
$(".message").hide();
}
//内容切换
var dataid = $(this).attr("data-id");
if(dataid == 1){
$(".message").show();
$('.audit').hide();
}else {
$(".audit").show();
$(".message").hide();
}
})
//修改昵称
$('.mid_right_big .icon-xiugai').click(function() {
$('.fit').show()
})
$('.fit_name_title img').click(function() {
$('.fit').hide()
$('.fit2').hide()
addMessage('success', '取消修改');
})
$('.fit_name_main button').click(function() {
$('.fit').hide()
$('.fit2').hide()
addMessage('success', '修改成功');
})
//修改签名
$('.mid_right_small .icon-xiugai').click(function() {
$('.fit2').show()
// addMessage('success', '嘿嘿');
})
$('.top_t_right_pic img').click(function() {
$('.head_right_nav').toggle()
})
})
</script>
</html>
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta charset="UTF-8">
<title>贡献内容</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/gx.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7bu9hl90ppx.css">
<script src="js/base.js"></script>
<script src="js/jquery.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7bu9hl90ppx.css">
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" type="text/css" href="css/gx.css">
<script src="js/base.js"></script>
<script src="js/jquery.min.js"></script>
<style>
.icon-caidan{
<style>
.icon-caidan{
font-size: 0.5rem;
}
.icon-magnifier{
... ... @@ -63,238 +65,311 @@
</head>
<body>
<div class="container">
<div class="top">
<!--顶部菜单-->
<div class="top_t">
<!--左-->
<div class="top_t_left">
<!--中文字-->
<div class="top_t_left_text">
</div>
<!--菜单图标-->
<div class="iconfont icon-caidan">
<div class="menu_item" style="display: none;">
<!--<p class="index_jump">主页</p >-->
<!--<p class="rwxq_jump">人物详情</p>-->
<!--<p class="grzy_jump">个人主页</p>-->
<!--<p class="spxq_jump">视频详情</p>-->
<div class="menu_item_a">
<div>首页</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
<div class="menu_item_a">
<div>精选</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
<div class="menu_item_a">
<div>动态</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
<div class="menu_item_a">
<div>百科</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
<div class="container">
<div class="top">
<!--顶部菜单-->
<div class="top_t">
<!--左-->
<div class="top_t_left">
<!--中文字-->
<div class="top_t_left_text">
</div>
<!--菜单图标-->
<div class="iconfont icon-caidan">
<!--<div class=""></div>-->
<!--菜单列表-->
<div class="menu_item" style="display: none;">
<!--<p class="index_jump">主页</p >-->
<!--<p class="rwxq_jump">人物详情</p>-->
<!--<p class="grzy_jump">个人主页</p>-->
<!--<p class="spxq_jump">视频详情</p>-->
<a href="index.html">
<div class="menu_item_a">
<div>首页</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
</a>
<a href="">
<div class="menu_item_a">
<div>精选</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
</a>
<a href="">
<div class="menu_item_a">
<div>动态</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
</a>
<a href="">
<div class="menu_item_a">
<div>百科</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
</a>
</div>
</div>
</div>
<!--中-->
<div class="top_t_middle">
<img src="images/icon_1.png">
</div>
<!--右-->
<div class="top_t_right">
<!--铃声-->
<div class="iconfont icon-10">
<div class="top_dot"></div>
</div>
<div class="top_t_right_text">
注册/登录
</div>
<!--头像-->
<div class="top_t_right_pic" style="display: none">
<img src="images/1.png">
</div>
</div>
</div>
<!--底部搜索-->
<div class="top_d">
<div class="iconfont icon-magnifier"></div>
<input class="top_d_input" placeholder="搜索音乐/作品/风格">
</div>
</div>
<!--主体内容-->
<div class="mid">
<!--头部图片-->
<div class="mid_head">
<img src="images/banner_1.png">
</div>
<!--头部文本框-->
<div class="mid_title">
</div>
我在这里享受着很多地区不曾有的体验,每一天都在过四季。为此,很是苦恼,不知道怎么穿戴,分不清是穿多了还是穿少了。这种特有的气候,每年都会让体弱的人进出医院好几回。年少时,总觉得那些因为天气而生病的人,是残弱群体,而今,自己也慢慢加入这个群体,深深懂得,岁月不会优待谁,生老病死都得走这么一遭。这么一说,我感到一丝悲哀
</div>
</div>
<!--中-->
<div class="top_t_middle">
<img src="images/peke.png">
</div>
<!--右-->
<div class="top_t_right">
<!--铃声-->
<div class="iconfont icon-10">
<!--小红点-->
<div class="top_dot"></div>
</div>
<!--头像-->
<div class="top_t_right_pic">
<img src="images/1.png">
</div>
</div>
</div>
<!--底部搜索-->
<div class="top_d">
<div class="iconfont icon-magnifier"></div>
<input class="top_d_input" placeholder="搜索音乐/作品/风格">
</div>
</div>
<!--主体内容-->
<div class="mid">
<!--头部图片-->
<div class="mid_head">
<img src="images/banner_1.png">
</div>
<!--头部文本框-->
<div class="mid_title">
</div>
<!--文本框下的介绍内容-->
<div class="mid_small">
<!--图标-->
<div class="iconfont icon-gantanhao1"></div>
<!--<div class="mid_small_left">图标</div>-->
<!--文字-->
<div class="mid_small_right">
<p>包含图片/声音/视频或大附件内容请直接发送邮件至:</p>
<p>Musicofchina@outlook.com (后期会改成企业邮箱)</p>
</div>
</div>
我在这里享受着很多地区不曾有的体验,每一天都在过四季。为此,很是苦恼,不知道怎么穿戴,分不清是穿多了还是穿少了。这种特有的气候,每年都会让体弱的人进出医院好几回。年少时,总觉得那些因为天气而生病的人,是残弱群体,而今,自己也慢慢加入这个群体,深深懂得,岁月不会优待谁,生老病死都得走这么一遭。这么一说,我感到一丝悲哀
<!--类型-->
<div class="mid_type">
<!--标题-->
<div class="mid_type_title">
<!--圆点-->
<p class="mid_type_title_dot"></p>
<p>类型</p>
</div>
<!--内容-->
<div class="mid_type_items">
<div class="mid_type_items_item">人物</div>
<div class="mid_type_items_item">演出</div>
<div class="mid_type_items_item">文章</div>
<div class="mid_type_items_item">新闻</div>
<div class="mid_type_items_item">风格</div>
<div class="mid_type_items_item">乐器</div>
<div class="mid_type_items_item">其他</div>
</div>
</div>
</div>
<!--文本框下的介绍内容-->
<div class="mid_small">
<!--图标-->
<div class="iconfont icon-gantanhao1"></div>
<!--<div class="mid_small_left">图标</div>-->
<!--文字-->
<div class="mid_small_right">
<p>包含图片/声音/视频或大附件内容请直接发送邮件至:</p>
<p>Musicofchina@outlook.com (后期会改成企业邮箱)</p>
</div>
</div>
<!--内容-->
<div class="mid_type">
<!--标题-->
<div class="mid_type_title">
<!--圆点-->
<p class="mid_type_title_dot"></p>
<p>内容</p>
</div>
<!--内容-->
<div class="mid_type_items">
<!--标题-->
<div class="mid_type_items_title">
<input type="text" placeholder="标题">
</div>
<!--内容-->
<div class="mid_type_items_area">
<textarea placeholder="内容不少于100字"></textarea>
</div>
</div>
</div>
<!--类型-->
<div class="mid_type">
<!--标题-->
<div class="mid_type_title">
<!--圆点-->
<p class="mid_type_title_dot"></p>
<p>类型</p>
</div>
<!--内容-->
<div class="mid_type_items">
<div class="mid_type_items_item">人物</div>
<div class="mid_type_items_item">演出</div>
<div class="mid_type_items_item">文章</div>
<div class="mid_type_items_item">新闻</div>
<div class="mid_type_items_item">风格</div>
<div class="mid_type_items_item">乐器</div>
<div class="mid_type_items_item">其他</div>
</div>
</div>
<!--图片-->
<div class="mid_type">
<!--标题-->
<div class="mid_type_title">
<!--圆点-->
<p class="mid_type_title_dot"></p>
<p>内容</p>
</div>
<!--介绍-->
<div class="mid_type_intro">
点击上传相关图片,不多于6张
</div>
<!--内容-->
<div class="mid_type">
<!--标题-->
<div class="mid_type_title">
<!--圆点-->
<p class="mid_type_title_dot"></p>
<p>内容</p>
</div>
<!--内容-->
<div class="mid_type_items">
<!--标题-->
<div class="mid_type_items_title">
<input type="text" placeholder="标题">
</div>
<!--内容-->
<div class="mid_type_items_area">
<textarea placeholder="内容不少于100字"></textarea>
</div>
</div>
</div>
<!--图片列表-->
<div class="mid_pic_items">
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<!--图片-->
<div class="mid_type">
<!--标题-->
<div class="mid_type_title">
<!--圆点-->
<p class="mid_type_title_dot"></p>
<p>内容</p>
</div>
<!--介绍-->
<div class="mid_type_intro">
点击上传相关图片,不多于6张
</div>
<div class="mid_pic_set">
<div class="iconfont icon-icon02"></div>
</div>
</div>
<!--图片列表-->
<div class="mid_pic_items">
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>
</div>
<div class="mid_pic_set">
<div class="iconfont icon-icon02"></div>
</div>
</div>
<!--联系方式-->
<div class="mid_type ">
<!--标题-->
<div class="mid_type_title contact_way">
<!--圆点-->
<p class="mid_type_title_dot"></p>
<p>联系方式</p>
</div>
<!--内容-->
<div class="mid_type_items contact_mid">
<!--标题-->
<div class="mid_type_items_title">
<input type="text" placeholder="可输入邮箱/手机号/微信等联系方式">
</div>
<!--提交-->
<div class="mid_type_items_sub">
提交
</div>
</div>
</div>
</div>
</div>
<!--内容提交-->
<div class="mask" style="display: none;">
<div class="mask_box submit_height">
<div class="mask_submit_text">
<p>
内容已成功提交,我们将尽快审核。
</p>
<p>
(结果将通过站内信告知)
</p>
</div>
<div class="mask_submit_bottom">
确定
</div>
</div>
</div>
<!--联系方式-->
<div class="mid_type ">
<!--标题-->
<div class="mid_type_title contact_way">
<!--圆点-->
<p class="mid_type_title_dot"></p>
<p>联系方式</p>
</div>
<!--内容-->
<div class="mid_type_items contact_mid">
<!--标题-->
<div class="mid_type_items_title">
<input type="text" placeholder="可输入邮箱/手机号/微信等联系方式">
</div>
<!--提交-->
<div class="mid_type_items_sub">
提交
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
//点击打开菜单
$('.icon-caidan').click(function () {
console.log(11)
$('.menu_item').slideToggle();
// 关闭图片功能 2019.4.8
// if($(this).hasClass("icon-caidan")){
// $(this).addClass("icon-guanbi");
// $(this).removeClass("icon-caidan");
// $("body").css("overflow","hidden");
// }else{
// $(this).removeClass("icon-guanbi");
// $(this).addClass("icon-caidan");
// $("body").css("overflow","auto");
// }
})
//点击打开菜单
$('.icon-caidan').click(function() {
console.log(11)
$('.menu_item').slideToggle();
// 关闭图片功能 2019.4.8
// if($(this).hasClass("icon-caidan")){
// $(this).addClass("icon-guanbi");
// $(this).removeClass("icon-caidan");
// $("body").css("overflow","hidden");
// }else{
// $(this).removeClass("icon-guanbi");
// $(this).addClass("icon-caidan");
// $("body").css("overflow","auto");
// }
})
$('.mid_type_items_sub').click(function() {
$('.mask').show()
})
$('.mask_submit_bottom').click(function() {
$('.mask').hide()
})
if ($('.mid_pic_item').length = 6) {
$('.mid_pic_set').hide()
} else {
$('.mid_pic_set').show()
}
//添加图片
$('.mid_pic_set').click(function() {
$(this).before(`<div class="mid_pic_item">
<img src="images/back_1.png">
<div class="close_button">
<div class="iconfont icon-guanbi"></div>
</div>
</div>`)
if ($('.mid_pic_item').length >= 6) {
$('.mid_pic_set').hide()
} else {
$('.mid_pic_set').show()
}
})
//删除图片
$('.mid_type .mid_pic_items').on("click", ".close_button", function() {
$(this).parent().remove()
if ($('.mid_pic_item').length >= 6) {
$('.mid_pic_set').hide()
} else {
$('.mid_pic_set').show()
}
})
$('.mid_type_items_item').click(function() {
$(".mid_type_items_item").eq($(this).index()).addClass("mid_type_items_item_active").siblings().removeClass('mid_type_items_item_active');
})
</script>
</html>
... ...

17.3 KB | 宽: | 高:

17.9 KB | 宽: | 高:

  • 两方对比
  • 交换覆盖
  • 透明覆盖