webfront / videoWeb · 提交

转到一个项目

作者 乔爽
提交 496de97308aa84d6ae8fe134a2960a231fa65d3d 1 个父辈 13e322d2

update

内嵌 并排对比
正在显示 11 个修改的文件 包含 1355 行增加 和 6 行删除
  1 +
  2 +
  3 +.container {
  4 + width: 100%;
  5 + display: flex;
  6 + flex-flow: column;
  7 + align-items: center;
  8 + justify-content: center;
  9 +
  10 +}
  11 +.top{
  12 + width: 7.5rem;
  13 + /*height: 1.5rem;*/
  14 + background-color: #F7F7F7;
  15 + display: flex;
  16 + flex-flow: column;
  17 + align-items: center;
  18 + justify-content: center;
  19 +}
  20 +.top_t{
  21 + width: 6.86rem;
  22 + height: 0.8rem;
  23 + display: flex;
  24 + align-items: center;
  25 + justify-content: space-between;
  26 +}
  27 +.top_t_left{
  28 + width: 1.2rem;
  29 + display: flex;
  30 + justify-content: space-between;
  31 + align-items: center;
  32 +}
  33 +.top_t_left_text{
  34 + font-size:0.3rem;
  35 + font-family:PingFang-SC-Medium;
  36 + font-weight:500;
  37 + color:rgba(166,16,16,1);
  38 +}
  39 +.icon-caidan{
  40 +
  41 +}
  42 +/*中部*/
  43 +.top_t_middle{
  44 + width: 1.2rem;
  45 + height: 0.5rem;
  46 + display: flex;
  47 +}
  48 +.top_t_middle img{
  49 + width: 100%;
  50 + height: 100%;
  51 +}
  52 +/*右边*/
  53 +.top_t_right{
  54 + width: 1.2rem;
  55 + display: flex;
  56 + justify-content: space-between;
  57 + align-items: center;
  58 +}
  59 +.icon-10{
  60 + position: relative;
  61 +}
  62 +.top_t_right_pic{
  63 + width: 0.4rem;
  64 + height: 0.4rem;
  65 + display: flex;
  66 + -webkit-border-radius: 50%;
  67 + -moz-border-radius: 50%;
  68 + border-radius: 50%;
  69 +}
  70 +.top_t_right_pic img{
  71 + width: 100%;
  72 + height: 100%;
  73 + -webkit-border-radius: 50%;
  74 + -moz-border-radius: 50%;
  75 + border-radius: 50%;
  76 +}
  77 +/*-----底部------*/
  78 +.top_d{
  79 + width: 5.56rem;
  80 + display: flex;
  81 + padding-bottom: 0.03rem;
  82 + border-bottom: 1px solid #999999;
  83 + margin: 0.3rem 0 0.2rem 0;
  84 +}
  85 +.top_d_input{
  86 + width: 5rem;
  87 + text-align: center;
  88 + border: none;
  89 + outline: none;
  90 + background-color: #F7F7F7;
  91 + font-size: 0.3rem;
  92 + box-sizing: border-box;
  93 + padding: 0 0.2rem;
  94 +}
  95 +.top_d_input::placeholder{
  96 + color: #999999;
  97 +}
  98 +/*---------- 信息框 ----------*/
  99 +.mid{
  100 + margin-top: 0.53rem;
  101 + width: 6.86rem;
  102 + height: 1.5rem;
  103 + background:rgba(255,255,255,1);
  104 + box-shadow:0 0.04rem 0.12rem 0 rgba(155,155,155,0.1);
  105 + border-radius: 0.1rem;
  106 + display: flex;
  107 + align-items: center;
  108 + box-sizing: border-box;
  109 + padding-left: 0.3rem;
  110 +}
  111 +.mid_left{
  112 + width: 0.9rem;
  113 + height: 0.9rem;
  114 + display: flex;
  115 + /*align-items: center;*/
  116 + border-radius: 50%;
  117 +
  118 +}
  119 +.mid_left img{
  120 + width: 100%;
  121 + height: 100%;
  122 + border-radius: 50%;
  123 +}
  124 +.mid_right{
  125 + margin-left: 0.3rem;
  126 +}
  127 +.mid_right_big{
  128 +
  129 + font-size: 0.36rem;
  130 + font-family:PingFang-SC-Bold;
  131 + font-weight:bold;
  132 + color:rgba(51,51,51,1);
  133 + line-height: 0.24rem;
  134 + display: flex;
  135 +}
  136 +.mid_right_small{
  137 + margin-top: 0.2rem;
  138 + font-size: 0.2rem;
  139 + font-family:PingFang-SC-Medium;
  140 + font-weight:500;
  141 + color:rgba(51,51,51,1);
  142 + line-height: 0.24rem;
  143 + display: flex;
  144 +}
  145 +.item{
  146 + width: 6.86rem;
  147 + display: flex;
  148 + justify-content: space-around;
  149 + margin-top: 0.6rem;
  150 +}
  151 +.item_m{
  152 +
  153 + font-size: 0.36rem;
  154 + font-family:MicrosoftYaHei-Bold;
  155 + font-weight:bold;
  156 + /*color:rgba(166,16,16,1);*/
  157 + line-height: 0.36rem;
  158 + position: relative;
  159 +}
  160 +/*.item_right{*/
  161 +
  162 + /*font-size: 0.36rem;*/
  163 + /*font-family:MicrosoftYaHei-Bold;*/
  164 + /*font-weight:bold;*/
  165 + /*color:rgba(51,51,51,1);*/
  166 + /*line-height: 0.36rem;*/
  167 + /*position: relative;*/
  168 +/*}*/
  169 +.item_number{
  170 + width: 0.2rem;
  171 + height: 0.2rem;
  172 + background:rgba(166,16,16,1);
  173 + border:2px solid rgba(255, 255, 255, 1);
  174 + border-radius:50%;
  175 +
  176 +
  177 + font-size: 0.12rem;
  178 + font-family:MicrosoftYaHei;
  179 + font-weight:400;
  180 + color:rgba(252,254,255,1);
  181 + line-height: 0.36rem;
  182 + display: flex;
  183 + align-items: center;
  184 + justify-content: center;
  185 +
  186 + position: absolute;
  187 + top: -0.18rem;
  188 + left: 0.6rem;
  189 +}
  190 +.item_color{
  191 + color: #A61010;
  192 +}
  193 +.item_color:before{
  194 + content: "";
  195 + width: 0.8rem;
  196 + height: 0.02rem;
  197 + background: #A61010;
  198 + position: absolute;
  199 + bottom: -0.15rem;
  200 + /*color: #A61010;*/
  201 +}
  202 +.message{
  203 + margin-top: 0.5rem;
  204 + width: 6.86rem;
  205 + font-size: 0.24rem;
  206 + font-family:MicrosoftYaHei;
  207 + font-weight:400;
  208 +
  209 + line-height: 0.36rem;
  210 +}
  211 +.message_box{
  212 + margin-top: 0.2rem;
  213 +}
  214 +.color_red{
  215 + color: #A61010;
  216 +}
  217 +/*审核消息*/
  218 +.audit{
  219 + margin-top: 0.66rem;
  220 + width: 6.86rem;
  221 +}
  222 +.audit_big{
  223 + margin-top: 0.28rem;
  224 + font-size: 0.24rem;
  225 + font-family:MicrosoftYaHei-Bold;
  226 + font-weight:bold;
  227 + color:rgba(51,51,51,1);
  228 + line-height: 0.36rem;
  229 +}
  230 +.audit_big:first-child{
  231 + margin-top: 0;
  232 +}
  233 +.audit_big:last-child{
  234 + margin-bottom: 0.6rem;
  235 +}
  236 +.audit_small{
  237 +
  238 + font-size: 0.24rem;
  239 + font-family:MicrosoftYaHei;
  240 + font-weight:400;
  241 + color:rgba(51,51,51,1);
  242 + line-height: 0.36rem;
  243 +}
@@ -57,7 +57,7 @@ @@ -57,7 +57,7 @@
57 align-items: center; 57 align-items: center;
58 } 58 }
59 .icon-10{ 59 .icon-10{
60 - 60 + position: relative;
61 } 61 }
62 .top_t_right_pic{ 62 .top_t_right_pic{
63 width: 0.4rem; 63 width: 0.4rem;
@@ -29,7 +29,6 @@ @@ -29,7 +29,6 @@
29 align-items: center; 29 align-items: center;
30 justify-content: center; 30 justify-content: center;
31 31
32 -  
33 font-size: 0.48rem; 32 font-size: 0.48rem;
34 font-family:PingFang-SC-Bold; 33 font-family:PingFang-SC-Bold;
35 font-weight:bold; 34 font-weight:bold;
  1 +
  2 +
  3 +.container {
  4 + width: 100%;
  5 + display: flex;
  6 + flex-flow: column;
  7 + align-items: center;
  8 + justify-content: center;
  9 +
  10 +}
  11 +.top{
  12 + width: 7.5rem;
  13 + /*height: 1.5rem;*/
  14 + background-color: #F7F7F7;
  15 + display: flex;
  16 + flex-flow: column;
  17 + align-items: center;
  18 + justify-content: center;
  19 +}
  20 +.top_t{
  21 + width: 6.86rem;
  22 + height: 0.8rem;
  23 + display: flex;
  24 + align-items: center;
  25 + justify-content: space-between;
  26 +}
  27 +.top_t_left{
  28 + width: 1.2rem;
  29 + display: flex;
  30 + justify-content: space-between;
  31 + align-items: center;
  32 +}
  33 +.top_t_left_text{
  34 + font-size:0.3rem;
  35 + font-family:PingFang-SC-Medium;
  36 + font-weight:500;
  37 + color:rgba(166,16,16,1);
  38 +}
  39 +.icon-caidan{
  40 +
  41 +}
  42 +/*中部*/
  43 +.top_t_middle{
  44 + width: 1.2rem;
  45 + height: 0.5rem;
  46 + display: flex;
  47 +}
  48 +.top_t_middle img{
  49 + width: 100%;
  50 + height: 100%;
  51 +}
  52 +/*右边*/
  53 +.top_t_right{
  54 + width: 1.2rem;
  55 + display: flex;
  56 + justify-content: space-between;
  57 + align-items: center;
  58 +}
  59 +.icon-10{
  60 + position: relative;
  61 +}
  62 +.top_t_right_pic{
  63 + width: 0.4rem;
  64 + height: 0.4rem;
  65 + display: flex;
  66 + -webkit-border-radius: 50%;
  67 + -moz-border-radius: 50%;
  68 + border-radius: 50%;
  69 +}
  70 +.top_t_right_pic img{
  71 + width: 100%;
  72 + height: 100%;
  73 + -webkit-border-radius: 50%;
  74 + -moz-border-radius: 50%;
  75 + border-radius: 50%;
  76 +}
  77 +/*-----底部------*/
  78 +.top_d{
  79 + width: 5.56rem;
  80 + display: flex;
  81 + padding-bottom: 0.03rem;
  82 + border-bottom: 1px solid #999999;
  83 + margin: 0.3rem 0 0.2rem 0;
  84 +}
  85 +.top_d_input{
  86 + width: 5rem;
  87 + text-align: center;
  88 + border: none;
  89 + outline: none;
  90 + background-color: #F7F7F7;
  91 + font-size: 0.3rem;
  92 + box-sizing: border-box;
  93 + padding: 0 0.2rem;
  94 +}
  95 +.top_d_input::placeholder{
  96 + color: #999999;
  97 +}
  98 +/*---------- 信息框 ----------*/
  99 +.mid{
  100 + margin-top: 0.53rem;
  101 + width: 6.86rem;
  102 + height: 1.5rem;
  103 + background:rgba(255,255,255,1);
  104 + box-shadow:0 0.04rem 0.12rem 0 rgba(155,155,155,0.1);
  105 + border-radius: 0.1rem;
  106 + display: flex;
  107 + flex-flow: column;
  108 +}
  109 +.mid_box{
  110 + display: flex;
  111 + align-items: center;
  112 + box-sizing: border-box;
  113 + padding-left: 0.3rem;
  114 +}
  115 +.mid_left{
  116 + width: 0.9rem;
  117 + height: 0.9rem;
  118 + display: flex;
  119 + /*align-items: center;*/
  120 + border-radius: 50%;
  121 +
  122 +}
  123 +.mid_left img{
  124 + width: 100%;
  125 + height: 100%;
  126 + border-radius: 50%;
  127 +}
  128 +.mid_right{
  129 + margin-left: 0.3rem;
  130 +}
  131 +.mid_right_big{
  132 +
  133 + font-size: 0.36rem;
  134 + font-family:PingFang-SC-Bold;
  135 + font-weight:bold;
  136 + color:rgba(51,51,51,1);
  137 + line-height: 0.24rem;
  138 + display: flex;
  139 +}
  140 +.mid_right_small{
  141 + margin-top: 0.2rem;
  142 + font-size: 0.2rem;
  143 + font-family:PingFang-SC-Medium;
  144 + font-weight:500;
  145 + color:rgba(51,51,51,1);
  146 + line-height: 0.24rem;
  147 + display: flex;
  148 +}
  149 +.mid_bottom{
  150 + width: 5rem;
  151 + margin-top: 0.12rem;
  152 + margin-left: 1.5rem;
  153 + display: flex;
  154 + justify-content: space-between;
  155 +}
  156 +.mid_bottom_left{
  157 + width: 2rem;
  158 + display: flex;
  159 + justify-content: space-between;
  160 +}
  161 +.mid_bottom_left_title{
  162 +
  163 + font-size: 0.2rem;
  164 + font-family:PingFang-SC-Medium;
  165 + font-weight:500;
  166 + color:rgba(51,51,51,1);
  167 + line-height: 0.24rem;
  168 + display: flex;
  169 +}
  170 +.mid_bottom_left_number{
  171 +
  172 + font-size: 0.28rem;
  173 + font-family:PingFang-SC-Bold;
  174 + font-weight:bold;
  175 + color:rgba(51,51,51,1);
  176 + line-height: 0.24rem;
  177 +}
  178 +.mid_bottom_right{
  179 + width: 1rem;
  180 + height: 0.28rem;
  181 + background: #A61010;
  182 + border-radius: 0.04rem;
  183 +
  184 +
  185 + font-size: 0.2rem;
  186 + font-family:PingFang-SC-Medium;
  187 + font-weight:500;
  188 + color:rgba(255,255,255,1);
  189 + line-height: 0.28rem;
  190 + text-align: center;
  191 +}
  192 +
  193 +.items{
  194 + margin-top: 0.63rem;
  195 + width: 6.86rem;
  196 + font-size: 0.36rem;
  197 + font-family:PingFang-SC-Bold;
  198 + font-weight:bold;
  199 + color:rgba(51,51,51,1);
  200 + line-height: 0.24rem;
  201 +}
  202 +.item{
  203 + margin-top: 0.24rem;
  204 + width: 6.86rem;
  205 + display: flex;
  206 +}
  207 +.item_left{
  208 + width: 2.99rem;
  209 + height: 1.74rem;
  210 + display: flex;
  211 + border-radius: 0.08rem;
  212 +}
  213 +.item_left img{
  214 + width: 100%;
  215 + height: 100%;
  216 + border-radius: 0.08rem;
  217 +}
  218 +.item_right{
  219 + margin-left: 0.31rem;
  220 +}
  221 +.item_right_top{
  222 +
  223 + font-size: 0.28rem;
  224 + font-family:PingFang-SC-Bold;
  225 + font-weight:bold;
  226 + color:rgba(51,51,51,1);
  227 + line-height: 0.36rem;
  228 +}
  229 +.item_right_mid{
  230 +
  231 + font-size: 0.2rem;
  232 + font-family:PingFang-SC-Medium;
  233 + font-weight:500;
  234 + color:rgba(51,51,51,1);
  235 + line-height: 0.36rem;
  236 +}
  237 +.item_right_bottom{
  238 +
  239 + font-size: 0.2rem;
  240 + font-family:PingFang-SC-Medium;
  241 + font-weight:500;
  242 + color:rgba(51,51,51,1);
  243 + line-height: 0.36rem;
  244 +}
  245 +
  1 +
  2 +
  3 +.container {
  4 + width: 100%;
  5 + display: flex;
  6 + flex-flow: column;
  7 + align-items: center;
  8 + justify-content: center;
  9 +
  10 +}
  11 +.top{
  12 + width: 7.5rem;
  13 + /*height: 1.5rem;*/
  14 + background-color: #F7F7F7;
  15 + display: flex;
  16 + flex-flow: column;
  17 + align-items: center;
  18 + justify-content: center;
  19 +}
  20 +.top_t{
  21 + width: 6.86rem;
  22 + height: 0.8rem;
  23 + display: flex;
  24 + align-items: center;
  25 + justify-content: space-between;
  26 +}
  27 +.top_t_left{
  28 + width: 1.2rem;
  29 + display: flex;
  30 + justify-content: space-between;
  31 + align-items: center;
  32 +}
  33 +.top_t_left_text{
  34 + font-size:0.3rem;
  35 + font-family:PingFang-SC-Medium;
  36 + font-weight:500;
  37 + color:rgba(166,16,16,1);
  38 +}
  39 +.icon-caidan{
  40 +
  41 +}
  42 +/*中部*/
  43 +.top_t_middle{
  44 + width: 1.2rem;
  45 + height: 0.5rem;
  46 + display: flex;
  47 +}
  48 +.top_t_middle img{
  49 + width: 100%;
  50 + height: 100%;
  51 +}
  52 +/*右边*/
  53 +.top_t_right{
  54 + width: 1.2rem;
  55 + display: flex;
  56 + justify-content: space-between;
  57 + align-items: center;
  58 +}
  59 +.icon-10{
  60 + position: relative;
  61 +}
  62 +.top_t_right_pic{
  63 + width: 0.4rem;
  64 + height: 0.4rem;
  65 + display: flex;
  66 + -webkit-border-radius: 50%;
  67 + -moz-border-radius: 50%;
  68 + border-radius: 50%;
  69 +}
  70 +.top_t_right_pic img{
  71 + width: 100%;
  72 + height: 100%;
  73 + -webkit-border-radius: 50%;
  74 + -moz-border-radius: 50%;
  75 + border-radius: 50%;
  76 +}
  77 +/*-----底部------*/
  78 +.top_d{
  79 + width: 5.56rem;
  80 + display: flex;
  81 + padding-bottom: 0.03rem;
  82 + border-bottom: 1px solid #999999;
  83 + margin: 0.3rem 0 0.2rem 0;
  84 +}
  85 +.top_d_input{
  86 + width: 5rem;
  87 + text-align: center;
  88 + border: none;
  89 + outline: none;
  90 + background-color: #F7F7F7;
  91 + font-size: 0.3rem;
  92 + box-sizing: border-box;
  93 + padding: 0 0.2rem;
  94 +}
  95 +.top_d_input::placeholder{
  96 + color: #999999;
  97 +}
  98 +.mid{
  99 + width: 5.6rem;
  100 + margin-top: 0.32rem;
  101 + display: flex;
  102 + flex-flow: column;
  103 +}
  104 +.mid_big{
  105 + width: 100%;
  106 + font-size: 0.36rem;
  107 + font-family:PingFang-SC-Bold;
  108 + font-weight:bold;
  109 + color:rgba(51,51,51,1);
  110 + line-height: 0.24rem;
  111 + /*display: flex;*/
  112 + text-align: center;
  113 +}
  114 +.mid_item{
  115 + margin-top: 0.53rem;
  116 + width: 5.6rem;
  117 + display: flex;
  118 + /*flex-flow: column;*/
  119 + justify-content: space-between;
  120 + position: relative;
  121 +}
  122 +.mid_item_left{
  123 +
  124 + font-size: 0.3rem;
  125 + font-family:PingFang-SC-Medium;
  126 + font-weight:500;
  127 + color:rgba(51,51,51,1);
  128 + line-height: 0.24rem;
  129 +}
  130 +.mid_item_right{
  131 +
  132 + font-size: 0.2rem;
  133 + font-family:PingFang-SC-Medium;
  134 + font-weight:500;
  135 + color:rgba(166,16,16,1);
  136 + line-height: 0.24rem;
  137 +}
  138 +.mid_item_num{
  139 + width: 3rem;
  140 + font-size: 0.24rem;
  141 + font-family:PingFang-SC-Medium;
  142 + font-weight:500;
  143 + color:rgba(153,153,153,1);
  144 + position: absolute;
  145 + left: 1.5rem;
  146 + text-align: center;
  147 +}
  148 +/*设置邮箱*/
  149 +.mid_item2{
  150 + margin-top: 0.33rem;
  151 + width: 3.4rem;
  152 + display: flex;
  153 + justify-content: space-between;
  154 +
  155 +}
  156 +.mid_item2_left{
  157 + font-size: 0.3rem;
  158 + font-family:PingFang-SC-Medium;
  159 + font-weight:500;
  160 + color:rgba(51,51,51,1);
  161 + line-height: 0.24rem;
  162 +}
  163 +.mid_item2_right{
  164 + font-size: 0.2rem;
  165 + font-family:PingFang-SC-Medium;
  166 + font-weight:500;
  167 + color:rgba(166,16,16,1);
  168 +}
  169 +.bottom{
  170 + margin-top: 0.65rem;
  171 + width: 5.6rem;
  172 + display: flex;
  173 + flex-flow: column;
  174 +}
  175 +.bottom_big{
  176 + width: 100%;
  177 + font-size: 0.36rem;
  178 + font-family:PingFang-SC-Bold;
  179 + font-weight:bold;
  180 + color:rgba(51,51,51,1);
  181 + line-height: 0.24rem;
  182 + /*display: flex;*/
  183 + text-align: center;
  184 +}
  185 +.bottom_item{
  186 + margin-top: 0.07rem;
  187 + display: flex;
  188 + flex-wrap: wrap-reverse;
  189 + justify-content: space-between;
  190 + margin-bottom: 0.6rem;
  191 +}
  192 +.bottom_item_box{
  193 + margin-top: 0.4rem;
  194 + width: 2.2rem;
  195 + height: 2.2rem;
  196 + display: flex;
  197 + flex-flow: column;
  198 + background-color: #ffffff;
  199 + border-radius: 0.1rem;
  200 +
  201 + box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14);
  202 +
  203 +}
  204 +.bottom_item_box_top{
  205 + width: 2.2rem;
  206 + height: 1.5rem;
  207 + display: flex;
  208 + flex-flow: column;
  209 + align-items: center;
  210 + justify-content: center;
  211 +}
  212 +.bottom_item_box_top_p{
  213 + width: 0.7rem;
  214 + height: 0.7rem;
  215 + display: flex;
  216 + border-radius: 50%;
  217 +}
  218 +.bottom_item_box_top_p img{
  219 + width: 100%;
  220 + height: 100%;
  221 + -webkit-border-radius: 50%;
  222 + -moz-border-radius: 50%;
  223 + border-radius: 50%;
  224 +}
  225 +.bottom_item_box_top_t{
  226 + margin-top: 0.15rem;
  227 + font-size: 0.16rem;
  228 + font-family:MicrosoftYaHei;
  229 + font-weight:400;
  230 + color:rgba(51,51,51,1);
  231 +}
  232 +.bottom_item_box_mid{
  233 + width: 2.2rem;
  234 + height: 0.02rem;
  235 + background: #E8E8E8;
  236 +}
  237 +.bottom_item_box_bottom{
  238 + height: 0.64rem;
  239 + font-size: 0.24rem;
  240 + font-family:MicrosoftYaHei;
  241 + font-weight:400;
  242 + color:rgba(51,51,51,1);
  243 + display: flex;
  244 + align-items: center;
  245 + justify-content: center;
  246 +}
  247 +.margin_t{
  248 + margin-top: 0.1rem;
  249 +}
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>首页</title>
  6 + <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8 + <link rel="stylesheet" type="text/css" href="css/common.css">
  9 + <link rel="stylesheet" type="text/css" href="css/grzy.css">
  10 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_aj31y803pii.css">
  11 + <script src="js/base.js"></script>
  12 + <script src="js/jquery.min.js"></script>
  13 +
  14 + <style>
  15 + .icon-caidan{
  16 + font-size: 0.5rem;
  17 + }
  18 + .icon-magnifier{
  19 + color: #999999;
  20 + }
  21 +
  22 + .f_size{
  23 + font-weight: normal;
  24 + font-size: 0.18rem;
  25 + }
  26 + .icon-xiugai{
  27 + margin-left: 0.15rem;
  28 + font-size: 0.3rem;
  29 + color: #999999;
  30 + display: flex;
  31 + font-weight: bold;
  32 + align-items: center;
  33 + }
  34 + .top_dot{
  35 + width: 0.08rem;
  36 + height: 0.08rem;
  37 + background:rgba(166,16,16,1);
  38 + border:1px solid rgba(255, 255, 255, 1);
  39 + border-radius: 50%;
  40 + position: absolute;
  41 + top: 0;
  42 + right: 0;
  43 + }
  44 + .color_black{
  45 + color: black;
  46 + }
  47 + .margin_t{
  48 + margin-top: 0.1rem;
  49 + }
  50 + </style>
  51 +</head>
  52 +
  53 +<body>
  54 +<div class="container">
  55 + <div class="top">
  56 + <!--顶部菜单-->
  57 + <div class="top_t">
  58 + <!--左-->
  59 + <div class="top_t_left">
  60 + <!--中文字-->
  61 + <div class="top_t_left_text">
  62 + 中
  63 + </div>
  64 + <!--菜单图标-->
  65 + <div class="iconfont icon-caidan"></div>
  66 + </div>
  67 + <!--中-->
  68 + <div class="top_t_middle">
  69 + <img src="images/peke.png">
  70 + </div>
  71 + <!--右-->
  72 + <div class="top_t_right">
  73 + <!--铃声-->
  74 + <div class="iconfont icon-10">
  75 + <!--小红点-->
  76 + <div class="top_dot"></div>
  77 + </div>
  78 + <!--头像-->
  79 + <div class="top_t_right_pic">
  80 + <img src="images/1.png">
  81 + </div>
  82 + </div>
  83 + </div>
  84 + <!--底部搜索-->
  85 + <div class="top_d">
  86 + <div class="iconfont icon-magnifier"></div>
  87 + <input class="top_d_input" placeholder="搜索音乐/作品/风格">
  88 + </div>
  89 + </div>
  90 + <!--信息框-->
  91 + <div class="mid">
  92 + <!--左边图片-->
  93 + <div class="mid_left">
  94 + <img src="images/peke.png">
  95 + </div>
  96 + <!--右边图片-->
  97 + <div class="mid_right">
  98 + <!--大昵称-->
  99 + <div class="mid_right_big">
  100 + 皮还是皮不过我的你
  101 + <!--修改-->
  102 + <div class="iconfont icon-xiugai ">
  103 + <p class="f_size">修改</p>
  104 + </div>
  105 + </div>
  106 + <!--小昵称-->
  107 + <div class="mid_right_small">
  108 + 皮还是皮不过我的你
  109 + <!--修改按钮-->
  110 + <div class="iconfont icon-xiugai ">
  111 + <p class="f_size">修改</p>
  112 + </div>
  113 + </div>
  114 + </div>
  115 + </div>
  116 + <!--动态 审核-->
  117 + <div class="item">
  118 + <div class="item_m item_color" data-id ="1">
  119 + 动态
  120 + <div class="item_number" data-id ="1">
  121 + 12
  122 + </div>
  123 +
  124 + </div>
  125 + <div class="item_m ">
  126 + 审核
  127 + <div class="item_number">
  128 + 9
  129 + </div>
  130 + </div>
  131 + </div>
  132 + <!--动态消息-->
  133 + <div class="message" >
  134 + <div class="message_box">
  135 + <p class="color_red">
  136 + 小猪佩奇
  137 + <span class="color_black">
  138 + 赞了你的
  139 + </span>
  140 + 《中国流行音乐的发展历程》
  141 + </p>
  142 + <p class="color_red margin_t">
  143 + 小猪佩奇
  144 + <span class="color_black">
  145 + 关注了你
  146 + </span>
  147 + </p>
  148 + </div>
  149 + <div class="message_box">
  150 + <p class="color_red">
  151 + 小猪佩奇
  152 + <span class="color_black">
  153 + 赞了你的
  154 + </span>
  155 + 《中国流行音乐的发展历程》
  156 + </p>
  157 + <p class="color_red margin_t">
  158 + 小猪佩奇
  159 + <span class="color_black">
  160 + 关注了你
  161 + </span>
  162 + </p>
  163 + </div>
  164 + <div class="message_box">
  165 + <p class="color_red">
  166 + 小猪佩奇
  167 + <span class="color_black">
  168 + 赞了你的
  169 + </span>
  170 + 《中国流行音乐的发展历程》
  171 + </p>
  172 + <p class="color_red margin_t">
  173 + 小猪佩奇
  174 + <span class="color_black">
  175 + 关注了你
  176 + </span>
  177 + </p>
  178 + </div>
  179 +
  180 +
  181 + </div>
  182 + <!--审核消息-->
  183 + <div class="audit" style="display: none;" >
  184 + <div class="audit_big">
  185 + 正在审核
  186 + <p class="audit_small">你提交的 <span class="color_red">12306</span>内容正在审核中,请耐心等待。</p>
  187 + </div>
  188 +
  189 + <div class="audit_big" >
  190 + 正在审核
  191 + <p class="audit_small">你提交的 <span class="color_red">12306</span>内容正在审核中,请耐心等待。</p>
  192 + </div>
  193 + </div>
  194 +</div>
  195 +</body>
  196 +<script>
  197 + //标题切换
  198 + $('.item_m').click(function () {
  199 + var index = $(this).index()
  200 +
  201 + $(this).addClass('item_color').siblings(".item_m").removeClass('item_color')
  202 +
  203 +
  204 + //内容切换
  205 + var dataid = $(this).attr("data-id");
  206 + if(dataid == 1){
  207 + $(".message").show();
  208 + $('.audit').hide();
  209 + }else {
  210 + $(".audit").show();
  211 + $(".message").hide();
  212 + }
  213 +
  214 +
  215 +
  216 + })
  217 +</script>
  218 +</html>
@@ -51,6 +51,17 @@ @@ -51,6 +51,17 @@
51 height: 100%; 51 height: 100%;
52 border-radius: 0.1rem; 52 border-radius: 0.1rem;
53 } 53 }
  54 + .top_dot{
  55 + width: 0.08rem;
  56 + height: 0.08rem;
  57 + background:rgba(166,16,16,1);
  58 + border:1px solid rgba(255, 255, 255, 1);
  59 + border-radius: 50%;
  60 + position: absolute;
  61 + top: 0;
  62 + right: 0;
  63 + }
  64 +
54 </style> 65 </style>
55 </head> 66 </head>
56 <script src="js/swiper.js"></script> 67 <script src="js/swiper.js"></script>
@@ -66,7 +77,7 @@ @@ -66,7 +77,7 @@
66 中 77 中
67 </div> 78 </div>
68 <!--菜单图标--> 79 <!--菜单图标-->
69 - <div class="iconfont icon-caidan"></div> 80 + <div class="iconfont icon-caidan" ></div>
70 </div> 81 </div>
71 <!--中--> 82 <!--中-->
72 <div class="top_t_middle"> 83 <div class="top_t_middle">
@@ -75,7 +86,9 @@ @@ -75,7 +86,9 @@
75 <!--右--> 86 <!--右-->
76 <div class="top_t_right"> 87 <div class="top_t_right">
77 <!--铃声--> 88 <!--铃声-->
78 - <div class="iconfont icon-10"></div> 89 + <div class="iconfont icon-10">
  90 + <div></div>
  91 + </div>
79 <!--头像--> 92 <!--头像-->
80 <div class="top_t_right_pic"> 93 <div class="top_t_right_pic">
81 <img src="images/1.png"> 94 <img src="images/1.png">
@@ -319,5 +332,9 @@ @@ -319,5 +332,9 @@
319 el: '.swiper-pagination', 332 el: '.swiper-pagination',
320 }, 333 },
321 }); 334 });
  335 +
  336 + $('.icon-magnifier').click(
  337 + window.location.href = 'grzy_1'
  338 + )
322 </script> 339 </script>
323 </html> 340 </html>
@@ -52,6 +52,16 @@ @@ -52,6 +52,16 @@
52 height: 100%; 52 height: 100%;
53 border-radius: 0.1rem; 53 border-radius: 0.1rem;
54 } 54 }
  55 + .top_dot{
  56 + width: 0.08rem;
  57 + height: 0.08rem;
  58 + background:rgba(166,16,16,1);
  59 + border:1px solid rgba(255, 255, 255, 1);
  60 + border-radius: 50%;
  61 + position: absolute;
  62 + top: 0;
  63 + right: 0;
  64 + }
55 </style> 65 </style>
56 </head> 66 </head>
57 <script src="js/swiper.js"></script> 67 <script src="js/swiper.js"></script>
@@ -76,7 +86,9 @@ @@ -76,7 +86,9 @@
76 <!--右--> 86 <!--右-->
77 <div class="top_t_right"> 87 <div class="top_t_right">
78 <!--铃声--> 88 <!--铃声-->
79 - <div class="iconfont icon-10"></div> 89 + <div class="iconfont icon-10">
  90 + <div class="top_dot"></div>
  91 + </div>
80 <!--头像--> 92 <!--头像-->
81 <div class="top_t_right_pic"> 93 <div class="top_t_right_pic">
82 <img src="images/1.png"> 94 <img src="images/1.png">
@@ -20,6 +20,9 @@ @@ -20,6 +20,9 @@
20 .icon-magnifier{ 20 .icon-magnifier{
21 color: #999999; 21 color: #999999;
22 } 22 }
  23 + .icon-10{
  24 + position: relative;
  25 + }
23 .swiper-container { 26 .swiper-container {
24 width: 100%; 27 width: 100%;
25 height: 100%; 28 height: 100%;
@@ -58,6 +61,16 @@ @@ -58,6 +61,16 @@
58 opacity: 1; 61 opacity: 1;
59 background: #ffffff; 62 background: #ffffff;
60 } 63 }
  64 + .top_dot{
  65 + width: 0.08rem;
  66 + height: 0.08rem;
  67 + background:rgba(166,16,16,1);
  68 + border:1px solid rgba(255, 255, 255, 1);
  69 + border-radius: 50%;
  70 + position: absolute;
  71 + top: 0;
  72 + right: 0;
  73 + }
61 74
62 </style> 75 </style>
63 </head> 76 </head>
@@ -83,7 +96,9 @@ @@ -83,7 +96,9 @@
83 <!--右--> 96 <!--右-->
84 <div class="top_t_right"> 97 <div class="top_t_right">
85 <!--铃声--> 98 <!--铃声-->
86 - <div class="iconfont icon-10"></div> 99 + <div class="iconfont icon-10">
  100 + <div class="top_dot"></div>
  101 + </div>
87 <!--头像--> 102 <!--头像-->
88 <div class="top_t_right_pic"> 103 <div class="top_t_right_pic">
89 <img src="images/1.png"> 104 <img src="images/1.png">
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>用户展示页面</title>
  6 + <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8 + <link rel="stylesheet" type="text/css" href="css/common.css">
  9 + <link rel="stylesheet" type="text/css" href="css/yhzs.css">
  10 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_aj31y803pii.css">
  11 + <script src="js/base.js"></script>
  12 + <script src="js/jquery.min.js"></script>
  13 +
  14 + <style>
  15 + .icon-caidan{
  16 + font-size: 0.5rem;
  17 + }
  18 + .icon-magnifier{
  19 + color: #999999;
  20 + }
  21 +
  22 + .f_size{
  23 + font-weight: normal;
  24 + font-size: 0.18rem;
  25 + }
  26 + .icon-xiugai{
  27 + margin-left: 0.15rem;
  28 + font-size: 0.3rem;
  29 + color: #999999;
  30 + display: flex;
  31 + font-weight: bold;
  32 + align-items: center;
  33 + }
  34 + .top_dot{
  35 + width: 0.08rem;
  36 + height: 0.08rem;
  37 + background:rgba(166,16,16,1);
  38 + border:1px solid rgba(255, 255, 255, 1);
  39 + border-radius: 50%;
  40 + position: absolute;
  41 + top: 0;
  42 + right: 0;
  43 + }
  44 + .color_black{
  45 + color: black;
  46 + }
  47 + .margin_t{
  48 + margin-top: 0.1rem;
  49 + }
  50 + </style>
  51 +</head>
  52 +
  53 +<body>
  54 +<div class="container">
  55 + <div class="top">
  56 + <!--顶部菜单-->
  57 + <div class="top_t">
  58 + <!--左-->
  59 + <div class="top_t_left">
  60 + <!--中文字-->
  61 + <div class="top_t_left_text">
  62 + 中
  63 + </div>
  64 + <!--菜单图标-->
  65 + <div class="iconfont icon-caidan"></div>
  66 + </div>
  67 + <!--中-->
  68 + <div class="top_t_middle">
  69 + <img src="images/peke.png">
  70 + </div>
  71 + <!--右-->
  72 + <div class="top_t_right">
  73 + <!--铃声-->
  74 + <div class="iconfont icon-10">
  75 + <!--小红点-->
  76 + <div class="top_dot"></div>
  77 + </div>
  78 + <!--头像-->
  79 + <div class="top_t_right_pic">
  80 + <img src="images/1.png">
  81 + </div>
  82 + </div>
  83 + </div>
  84 + <!--底部搜索-->
  85 + <div class="top_d">
  86 + <div class="iconfont icon-magnifier"></div>
  87 + <input class="top_d_input" placeholder="搜索音乐/作品/风格">
  88 + </div>
  89 + </div>
  90 + <!--信息框-->
  91 + <div class="mid">
  92 + <div class="mid_box">
  93 + <!--左边图片-->
  94 + <div class="mid_left">
  95 + <img src="images/peke.png">
  96 + </div>
  97 + <!--右边文字-->
  98 + <div class="mid_right">
  99 + <!--大昵称-->
  100 + <div class="mid_right_big">
  101 + 皮还是皮不过我的你
  102 + <!--修改-->
  103 + <div class="iconfont icon-xiugai ">
  104 + <p class="f_size">修改</p>
  105 + </div>
  106 + </div>
  107 + <!--小昵称-->
  108 + <div class="mid_right_small">
  109 + 皮还是皮不过我的你
  110 + <!--修改按钮-->
  111 + <div class="iconfont icon-xiugai ">
  112 + <p class="f_size">修改</p>
  113 + </div>
  114 + </div>
  115 + </div>
  116 + </div>
  117 + <div class="mid_bottom">
  118 + <!--获赞数-->
  119 + <div class="mid_bottom_left">
  120 + <p class="mid_bottom_left_title">获赞数</p>
  121 + <p class="mid_bottom_left_number">123456</p>
  122 + </div>
  123 + <!--关注图标-->
  124 + <div class="mid_bottom_right">
  125 + 关注
  126 + </div>
  127 + </div>
  128 + </div>
  129 + <!--贡献-->
  130 + <div class="items">
  131 +
  132 + 贡献
  133 +
  134 + <div class="item">
  135 + <!--左边图片-->
  136 + <div class="item_left">
  137 + <img src="images/peke.png">
  138 + </div>
  139 + <!--右边文字-->
  140 + <div class="item_right">
  141 + <div class="item_right_top">
  142 + 《大势与运气》
  143 + </div>
  144 + <div class="item_right_mid">
  145 + 把运气附加在大势之中，如何
  146 + </div>
  147 + <div class="item_right_bottom">
  148 + <p>作者 还是皮不过你的我</p>
  149 + <p>时间 2019年2月30日</p>
  150 + </div>
  151 + </div>
  152 + </div>
  153 + </div>
  154 +
  155 +</div>
  156 +</body>
  157 +<script>
  158 +
  159 +
  160 +</script>
  161 +</html>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>首页</title>
  6 + <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8 + <link rel="stylesheet" type="text/css" href="css/common.css">
  9 + <link rel="stylesheet" type="text/css" href="css/zhsz.css">
  10 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_aj31y803pii.css">
  11 + <script src="js/base.js"></script>
  12 + <script src="js/jquery.min.js"></script>
  13 +
  14 + <style>
  15 + .icon-caidan{
  16 + font-size: 0.5rem;
  17 + }
  18 + .icon-magnifier{
  19 + color: #999999;
  20 + }
  21 + .f_size{
  22 + font-weight: normal;
  23 + font-size: 0.18rem;
  24 + }
  25 + .icon-xiugai{
  26 + margin-left: 0.15rem;
  27 + font-size: 0.3rem;
  28 + color: #999999;
  29 + display: flex;
  30 + font-weight: bold;
  31 + align-items: center;
  32 + }
  33 + .top_dot{
  34 + width: 0.08rem;
  35 + height: 0.08rem;
  36 + background:rgba(166,16,16,1);
  37 + border:1px solid rgba(255, 255, 255, 1);
  38 + border-radius: 50%;
  39 + position: absolute;
  40 + top: 0;
  41 + right: 0;
  42 + }
  43 + .color_black{
  44 + color: black;
  45 + }
  46 + .margin_t{
  47 + margin-top: 0.1rem;
  48 + }
  49 + </style>
  50 +</head>
  51 +
  52 +<body>
  53 +<div class="container">
  54 + <div class="top">
  55 + <!--顶部菜单-->
  56 + <div class="top_t">
  57 + <!--左-->
  58 + <div class="top_t_left">
  59 + <!--中文字-->
  60 + <div class="top_t_left_text">
  61 + 中
  62 + </div>
  63 + <!--菜单图标-->
  64 + <div class="iconfont icon-caidan"></div>
  65 + </div>
  66 + <!--中-->
  67 + <div class="top_t_middle">
  68 + <img src="images/peke.png">
  69 + </div>
  70 + <!--右-->
  71 + <div class="top_t_right">
  72 + <!--铃声-->
  73 + <div class="iconfont icon-10">
  74 + <!--小红点-->
  75 + <div class="top_dot"></div>
  76 + </div>
  77 + <!--头像-->
  78 + <div class="top_t_right_pic">
  79 + <img src="images/1.png">
  80 + </div>
  81 + </div>
  82 + </div>
  83 + <!--底部搜索-->
  84 + <div class="top_d">
  85 + <div class="iconfont icon-magnifier"></div>
  86 + <input class="top_d_input" placeholder="搜索音乐/作品/风格">
  87 + </div>
  88 + </div>
  89 + <!--账号设置-->
  90 + <div class="mid">
  91 + <div class="mid_big">
  92 + 账号设置
  93 + </div>
  94 + <!--手机号-->
  95 + <div class="mid_item">
  96 + <div class="mid_item_left">
  97 + 手机号
  98 + </div>
  99 + <div class="mid_item_right">
  100 + 修改
  101 + </div>
  102 + <!--手机数字-->
  103 + <div class="mid_item_num">
  104 + 1397****111
  105 + </div>
  106 + </div>
  107 + <!--邮箱-->
  108 + <div class="mid_item2">
  109 + <div class="mid_item2_left">
  110 + 邮箱
  111 + </div>
  112 + <div class="mid_item2_right">
  113 + 设置邮箱
  114 + </div>
  115 + </div>
  116 + <!--密码-->
  117 + <div class="mid_item2">
  118 + <div class="mid_item2_left">
  119 + 邮箱
  120 + </div>
  121 + <div class="mid_item2_right">
  122 + 修改密码
  123 + </div>
  124 + </div>
  125 + </div>
  126 + <!--第三方账号绑定-->
  127 + <div class="bottom">
  128 + <!--大标题-->
  129 + <div class="bottom_big">
  130 + 第三方账号绑定
  131 + </div>
  132 + <!--图标-->
  133 + <div class="bottom_item">
  134 + <div class="bottom_item_box">
  135 + <!--图片-->
  136 + <div class="bottom_item_box_top">
  137 + <div class="bottom_item_box_top_p">
  138 + <img src="images/peke.png">
  139 + </div>
  140 + <div class="bottom_item_box_top_t">
  141 + 微信
  142 + </div>
  143 + <!--<div class="bottom_item_box_top_t margin_t">-->
  144 + <!--已绑定"昵称"-->
  145 + <!--</div>-->
  146 + </div>
  147 + <!--下划线-->
  148 + <div class="bottom_item_box_mid"></div>
  149 + <!--文字-->
  150 + <div class="bottom_item_box_bottom">
  151 + 立即绑定
  152 + </div>
  153 + </div>
  154 +
  155 + <div class="bottom_item_box">
  156 + <!--图片-->
  157 + <div class="bottom_item_box_top">
  158 + <div class="bottom_item_box_top_p">
  159 + <img src="images/peke.png">
  160 + </div>
  161 + <div class="bottom_item_box_top_t">
  162 + 微信
  163 + </div>
  164 + <div class="bottom_item_box_top_t margin_t">
  165 + 已绑定"昵称"
  166 + </div>
  167 + </div>
  168 + <!--下划线-->
  169 + <div class="bottom_item_box_mid"></div>
  170 + <!--文字-->
  171 + <div class="bottom_item_box_bottom">
  172 + 取消绑定
  173 + </div>
  174 + </div>
  175 +
  176 +
  177 + </div>
  178 + </div>
  179 +
  180 +</div>
  181 +</body>
  182 +<script>
  183 + $('.bottom_item_box_bottom').click(function () {
  184 + if($('.bottom_item_box_top').has()){
  185 + $(this).addClass()
  186 + }
  187 + })
  188 +
  189 +</script>
  190 +</html>