webfront / videoWeb · 提交

转到一个项目

作者 乔爽
提交 0e9c504c27c3c45f602220a0ef5e02798af8693f 1 个父辈 43b473d7

update

内嵌 并排对比
正在显示 9 个修改的文件 包含 1765 行增加 和 7 行删除
1 1
  2 +
2 .container{ 3 .container{
3 position: relative; 4 position: relative;
4 } 5 }
  1 +
  2 +
  3 +
  4 +
  5 +.container {
  6 + width: 100%;
  7 + display: flex;
  8 + flex-flow: column;
  9 + align-items: center;
  10 + justify-content: center;
  11 +
  12 +}
  13 +.top{
  14 + width: 7.5rem;
  15 + /*height: 1.5rem;*/
  16 + background-color: #F7F7F7;
  17 + display: flex;
  18 + flex-flow: column;
  19 + align-items: center;
  20 + justify-content: center;
  21 +}
  22 +.top_t{
  23 + width: 6.86rem;
  24 + height: 0.8rem;
  25 + display: flex;
  26 + align-items: center;
  27 + justify-content: space-between;
  28 +}
  29 +.top_t_left{
  30 + width: 1.2rem;
  31 + display: flex;
  32 + justify-content: space-between;
  33 + align-items: center;
  34 +}
  35 +.top_t_left_text{
  36 + font-size:0.3rem;
  37 + font-family:PingFang-SC-Medium;
  38 + font-weight:500;
  39 + color:rgba(166,16,16,1);
  40 +}
  41 +.icon-caidan{
  42 +
  43 +}
  44 +/*中部*/
  45 +.top_t_middle{
  46 + width: 1.2rem;
  47 + height: 0.5rem;
  48 + display: flex;
  49 +}
  50 +.top_t_middle img{
  51 + width: 100%;
  52 + height: 100%;
  53 +}
  54 +/*右边*/
  55 +.top_t_right{
  56 + width: 1.2rem;
  57 + display: flex;
  58 + justify-content: space-between;
  59 + align-items: center;
  60 +}
  61 +.icon-10{
  62 + position: relative;
  63 +}
  64 +.top_t_right_pic{
  65 + width: 0.4rem;
  66 + height: 0.4rem;
  67 + display: flex;
  68 + -webkit-border-radius: 50%;
  69 + -moz-border-radius: 50%;
  70 + border-radius: 50%;
  71 +}
  72 +.top_t_right_pic img{
  73 + width: 100%;
  74 + height: 100%;
  75 + -webkit-border-radius: 50%;
  76 + -moz-border-radius: 50%;
  77 + border-radius: 50%;
  78 +}
  79 +/*-----底部------*/
  80 +.top_d{
  81 + width: 5.56rem;
  82 + display: flex;
  83 + padding-bottom: 0.03rem;
  84 + border-bottom: 1px solid #999999;
  85 + margin: 0.3rem 0 0.2rem 0;
  86 +}
  87 +.top_d_input{
  88 + width: 5rem;
  89 + text-align: center;
  90 + border: none;
  91 + outline: none;
  92 + background-color: #F7F7F7;
  93 + font-size: 0.3rem;
  94 + box-sizing: border-box;
  95 + padding: 0 0.2rem;
  96 +}
  97 +.top_d_input::placeholder{
  98 + color: #999999;
  99 +}
  100 +
  101 +/*----------------------------- 轮播图 -----------------------------------*/
  102 +.banner{
  103 + width: 6.86rem;
  104 + height: 3rem;
  105 + background-color: red;
  106 + -webkit-border-radius: 0.1rem;
  107 + -moz-border-radius: 0.1rem;
  108 + border-radius: 0.1rem;
  109 + margin-top: 0.23rem;
  110 +}
  111 +/*----------------------------- 最新 -----------------------------------*/
  112 +.new{
  113 + /*margin-top: 0.54rem;*/
  114 + display: flex;
  115 + flex-flow: column;
  116 + align-items: center;
  117 + justify-content: center;
  118 +}
  119 +.new_e{
  120 + font-size: 0.14rem;
  121 + color: #A61010;
  122 +}
  123 +.new_c{
  124 + margin-bottom: 0.2rem;
  125 + margin-top: 0.08rem;
  126 + font-size: 0.3rem;
  127 + color: #333333;
  128 + position: relative;
  129 + font-weight: bold;
  130 +}
  131 +.new_video_item{
  132 + width: 6.86rem;
  133 + display: flex;
  134 + justify-content: space-around;
  135 +}
  136 +.new_video{
  137 + width: 3rem;
  138 + height: 3.5rem;
  139 + /*height: 2.1rem;*/
  140 + background:rgba(255,255,255,1);
  141 + box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14);
  142 + border-radius: 0.1rem;
  143 + display: flex;
  144 + flex-flow: column;
  145 + justify-content: center;
  146 + align-items: center;
  147 +}
  148 +.new_video_top{
  149 + width: 2.6rem;
  150 + height: 2.7rem;
  151 + display: flex;
  152 + margin-top: 0.2rem;
  153 +}
  154 +.new_video_top img{
  155 +
  156 + width: 100%;
  157 + height: 100%;
  158 +}
  159 +.new_video_bottom{
  160 + width: 2.8rem;
  161 + /*height: 0.4rem;*/
  162 + flex: 1;
  163 + display: flex;
  164 + align-items: center;
  165 + justify-content: space-between;
  166 + position: relative;
  167 +}
  168 +.new_video_bottom_name{
  169 + width: 2.8rem;
  170 + position: absolute;
  171 + font-size:0.2rem;
  172 + font-family:PingFang-SC-Medium;
  173 + font-weight:500;
  174 + color:rgba(51,51,51,1);
  175 + text-align: center;
  176 +
  177 + -webkit-box-orient: vertical;
  178 + -webkit-line-clamp: 1;
  179 + overflow: hidden;
  180 + text-overflow: ellipsis;
  181 + white-space: nowrap;
  182 +}
  183 +.new_video_bottom_right{
  184 + font-size: 0.3rem;
  185 + font-family:FZHCJW--GB1-0;
  186 + font-weight:400;
  187 + color:rgba(166,16,16,1);
  188 +}
  189 +
  190 +.item_pic{
  191 + width: 6.86rem;
  192 + display: flex;
  193 + justify-content: space-around;
  194 +}
  195 +.pic_box{
  196 + width: 3rem;
  197 + /*height: 2.2rem;*/
  198 + background:rgba(255,255,255,1);
  199 + box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14);
  200 + border-radius: 0.1rem;
  201 + display: flex;
  202 + flex-flow: column;
  203 + align-items: center;
  204 + justify-content: center;
  205 +}
  206 +.pic_box_top{
  207 + width: 3rem;
  208 + height: 1.7rem;
  209 + display: flex;
  210 + border-radius: 0.1rem 0.1rem 0 0;
  211 +}
  212 +.pic_box_top img{
  213 + width: 100%;
  214 + height: 100%;
  215 + border-radius: 0.1rem 0.1rem 0 0;
  216 +}
  217 +.pic_box_bottom{
  218 + height: 0.4rem;
  219 + font-size: 0.24rem;
  220 + font-family:PingFang-SC-Medium;
  221 + font-weight:500;
  222 + color:rgba(51,51,51,1);
  223 + display: flex;
  224 + align-items: center;
  225 + justify-content: center;
  226 +}
  227 +.video_more{
  228 + margin-top: 0.33rem;
  229 + font-size: 0.14rem;
  230 + font-family:Moon20-Regular;
  231 + font-weight:400;
  232 + color:rgba(166,16,16,1);
  233 + position: relative;
  234 + display: flex;
  235 + align-items: center;
  236 + flex-flow: column;
  237 + justify-content: center;
  238 +}
  239 +.video_more:last-child{
  240 + margin-bottom: 0.6rem;
  241 +}
  242 +.video_more:before{
  243 + content: "";
  244 + width: 0.8rem;
  245 + height:0.02rem;
  246 +
  247 + background-color: #E8E8E8;
  248 + position: absolute;
  249 + top: 0.32rem;
  250 +
  251 +}
  252 +/*title*/
  253 +.title{
  254 + display: flex;
  255 + flex-flow: column;
  256 + align-items: center;
  257 + justify-content: space-between;
  258 +}
  259 +.marin_top{
  260 + margin-top: 0.31rem ;
  261 +}
  262 +.between{
  263 + width: 2.6rem;
  264 + justify-content: space-between;
  265 +}
  266 +.show{
  267 + display: flex;
  268 + flex-flow: column;
  269 + align-items: center;
  270 + justify-content: center;
  271 +}
  272 +.show_time{
  273 + width: 6.86rem;
  274 + display: flex;
  275 +}
  276 +.show_time_year{
  277 + display: flex;
  278 +}
  279 +.show_time_month{
  280 + display: flex;
  281 +}
  282 +
  283 +.container{
  284 + position: relative;
  285 +}
  286 +.mid{
  287 + display: flex;
  288 + flex-flow: column;
  289 + align-items: center;
  290 + justify-content: center;
  291 +}
  292 +
  293 +.add_number{
  294 +
  295 + font-size: 0.24rem;
  296 + font-family:PingFang-SC-Bold;
  297 + font-weight:bold;
  298 + color:rgba(166,16,16,1);
  299 + line-height: 0.24rem;
  300 + position: absolute;
  301 + top: -0.2rem;
  302 + right: -0.5rem;
  303 +}
  304 +.item_box{
  305 +
  306 +}
  307 +.margin-t{
  308 + margin-top: 0.46rem;
  309 +}
  310 +
  311 +
  312 +
  313 +
@@ -101,7 +101,7 @@ @@ -101,7 +101,7 @@
101 width: 7.5rem; 101 width: 7.5rem;
102 display: flex; 102 display: flex;
103 margin-top: 0.6rem; 103 margin-top: 0.6rem;
104 - justify-content: center; 104 + /*justify-content: center;*/
105 overflow-x: scroll; 105 overflow-x: scroll;
106 } 106 }
107 .mid_item{ 107 .mid_item{
@@ -219,7 +219,7 @@ @@ -219,7 +219,7 @@
219 padding: 0.2rem 0; 219 padding: 0.2rem 0;
220 } 220 }
221 .mid_pic{ 221 .mid_pic{
222 - width: 6.86rem; 222 + width: 6.26rem;
223 height: 2.6rem; 223 height: 2.6rem;
224 display: flex; 224 display: flex;
225 } 225 }
@@ -275,4 +275,169 @@ @@ -275,4 +275,169 @@
275 text-align: center; 275 text-align: center;
276 padding: 0 0.3rem; 276 padding: 0 0.3rem;
277 } 277 }
  278 +.share_size{
  279 +
  280 + font-size: 0.2rem;
  281 + font-family:MicrosoftYaHei;
  282 + font-weight:400;
  283 + color:rgba(153,153,153,1);
  284 + line-height: 0.3rem;
  285 +}
  286 +.message_text{
  287 + margin-top: 1.4rem;
  288 + width: 6.86rem;
  289 + height: 1.5rem;
  290 + background:rgba(192,44,44,0);
  291 + border:1px solid rgba(232, 232, 232, 1);
  292 + border-radius: 0.06rem;
  293 +}
  294 +.message_text textarea{
  295 + width: 100%;
  296 + height: 100%;
  297 + border: none;
  298 + outline: none;
  299 + box-sizing: border-box;
  300 + padding: 0.2rem 0.2rem;
  301 +}
  302 +.sub_box{
  303 + margin-top: 0.22rem;
  304 + width: 6.86rem;
  305 + display: flex;
  306 + justify-content: space-between;
  307 +}
278 308
  309 +.message_sub{
  310 + width: 1.2rem;
  311 + height: 0.3rem;
  312 + background:rgba(166,16,16,1);
  313 + border-radius: 0.04rem;
  314 +
  315 + font-size: 0.2rem;
  316 + line-height: 0.3rem;
  317 + font-family:PingFang-SC-Medium;
  318 + font-weight:500;
  319 + color:rgba(255,254,254,1);
  320 +
  321 + text-align: center;
  322 +}
  323 +/*分享*/
  324 +.share_function{
  325 + width: 3.2rem;
  326 + height: 0.8rem;
  327 + display: flex;
  328 + justify-content: space-around;
  329 + background-color: #e5e5e5;
  330 + border-radius: 0.04rem;
  331 + position: absolute;
  332 + right: 0;
  333 + top: 0.6rem;
  334 +}
  335 +.share_function_item{
  336 + display: flex;
  337 + flex-flow: column;
  338 + align-items: center;
  339 + justify-content: space-around;
  340 + font-size: 0.16rem;
  341 +}
  342 +
  343 +/*评论*/
  344 +.comment{
  345 + margin-top: 0.38rem;
  346 + width: 6.86rem;
  347 + display: flex;
  348 + flex-flow: column;
  349 + margin-bottom: 1rem;
  350 +}
  351 +.comment_title{
  352 +
  353 + font-size: 0.3rem;
  354 + font-family:PingFang-SC-Medium;
  355 + font-weight:500;
  356 + color:rgba(51,51,51,1);
  357 + line-height: 0.3rem;
  358 +}
  359 +.comment_item{
  360 + margin-top: 0.22rem;
  361 + display: flex;
  362 +}
  363 +.comment_item_left{
  364 + width: 0.5rem;
  365 + height: 0.5rem;
  366 + border-radius:50%;
  367 + display: flex;
  368 +}
  369 +.comment_item_left img{
  370 + width: 100%;
  371 + height: 100%;
  372 + border-radius:50%;
  373 +}
  374 +.comment_item_right{
  375 + display: flex;
  376 + flex-flow: column;
  377 + flex: 1;
  378 + margin-left: 0.24rem;
  379 +}
  380 +.comment_item_right_name{
  381 +
  382 + font-size: 0.2rem;
  383 + font-family:MicrosoftYaHei;
  384 + font-weight:400;
  385 + color:rgba(51,51,51,1);
  386 + /*line-height:30px;*/
  387 + line-height: 0.5rem;
  388 +}
  389 +.comment_item_right_text{
  390 + font-size: 0.16rem;
  391 + margin-top: 0.1rem;
  392 + line-height: 0.3rem;
  393 +}
  394 +.comment_item_right_text p{
  395 + line-height: 0.3rem;
  396 +}
  397 +/*底部内容*/
  398 +.comment_item_bottom{
  399 + display: flex;
  400 +
  401 +
  402 + font-size: 0.16rem;
  403 + font-family:PingFang-SC-Medium;
  404 + font-weight:500;
  405 + color:rgba(153,153,153,1);
  406 + /*line-height:30px;*/
  407 + justify-content: space-between;
  408 + margin-top: 0.3rem;
  409 +}
  410 +.comment_item_bottom_left{
  411 +
  412 +}
  413 +.comment_item_bottom_right{
  414 + display: flex;
  415 + justify-content: space-between;
  416 + width: 3rem;
  417 +}
  418 +.comment_item_bottom_right_item{
  419 +
  420 +}
  421 +.comment_reply{
  422 + margin-top: 0.2rem;
  423 + border-left: 0.04rem solid #E8E8E8;
  424 + display: flex;
  425 +}
  426 +.comment_reply_left{
  427 + margin-left: 0.07rem;
  428 + width: 0.5rem;
  429 + height: 0.5rem;
  430 + border-radius: 50%;
  431 + display: flex;
  432 +}
  433 +.comment_reply_left img{
  434 + width: 100%;
  435 + height: 100%;
  436 + border-radius: 50%;
  437 +}
  438 +.margin_to{
  439 + margin-top: 0.2rem;
  440 +}
  441 +.pic_small{
  442 + margin-left: 0.07rem;
  443 +}
  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 +
  100 +.mid{
  101 + width: 7.5rem;
  102 + display: flex;
  103 + margin-top: 0.6rem;
  104 + justify-content: center;
  105 + overflow-x: scroll;
  106 +}
  107 +.mid_item{
  108 + display: flex;
  109 + flex-flow: column;
  110 + align-items: center;
  111 + border-bottom: 1px solid #e8e8e8;
  112 + margin-left: 0.38rem;
  113 +}
  114 +.mid_item_pic{
  115 + width: 1.6rem;
  116 + height: 1.8rem;
  117 + display: flex;
  118 +}
  119 +
  120 +.mid_item_pic img{
  121 + width: 100%;
  122 + height: 100%;
  123 +}
  124 +.mid_item_text{
  125 +
  126 + font-size: 0.16rem;
  127 + font-family:MicrosoftYaHei;
  128 + font-weight:400;
  129 + color:rgba(51,51,51,1);
  130 + /*line-height:30px;*/
  131 + margin-top: 0.1rem;
  132 + margin-bottom: 0.1rem;
  133 +}
  134 +.bottom{
  135 + display: flex;
  136 + margin-top: 0.3rem;
  137 +}
  138 +.bottom_top{
  139 + display: flex;
  140 + border-bottom: 1px solid #e8e8e8;
  141 + height: 1.8rem;
  142 + align-items: center;
  143 +}
  144 +.bottom_top_pic{
  145 + width: 0.9rem;
  146 + height: 0.9rem;
  147 + display: flex;
  148 +}
  149 +.bottom_top_pic img{
  150 + width: 100%;
  151 + height: 100%;
  152 +}
  153 +.bottom_top_text{
  154 + display: flex;
  155 + flex-flow: column;
  156 + margin-left: 0.33rem;
  157 +}
  158 +.bottom_top_text_big{
  159 +
  160 + font-size: 0.36rem;
  161 + font-family:PingFang-SC-Bold;
  162 + font-weight:bold;
  163 + color:rgba(51,51,51,1);
  164 + /*line-height:24px;*/
  165 + line-height: 0.45rem;
  166 +}
  167 +.bottom_top_text_small{
  168 +
  169 + font-size: 0.24rem;
  170 + font-family:PingFang-SC-Medium;
  171 + font-weight:500;
  172 + color:rgba(51,51,51,1);
  173 + line-height: 0.45rem;
  174 +}
  175 +.bottom_top_b{
  176 + margin-top: 0.13rem;
  177 + display: flex;
  178 + width: 4.3rem;
  179 + justify-content: space-between;
  180 +}
  181 +.bottom_top_b_left{
  182 +
  183 + font-size: 0.2rem;
  184 + font-family:PingFang-SC-Medium;
  185 + font-weight:500;
  186 + color:rgba(51,51,51,1);
  187 + /*line-height:24px;*/
  188 +}
  189 +.bottom_top_b_att{
  190 + width: 1rem;
  191 + height: 0.28rem;
  192 + background: #C02C2C;
  193 + border-radius: 0.04rem;
  194 +
  195 + font-size: 0.2rem;
  196 + line-height: 0.28rem;
  197 + text-align: center;
  198 + color: #ffffff;
  199 +}
  200 +
  201 +
  202 +/*底部菜单栏*/
  203 +.menu{
  204 + width: 7.5rem;
  205 + height: 1.58rem;
  206 + position: fixed;
  207 + bottom: 0;
  208 + background: #ffffff;
  209 + display: flex;
  210 + flex-flow: column;
  211 + justify-content: center;
  212 +}
  213 +.menu_top{
  214 + display: flex;
  215 + justify-content: space-around;
  216 +}
  217 +.menu_top_item{
  218 + display: flex;
  219 + align-items: center;
  220 +}
  221 +.menu_bottom{
  222 + display: flex;
  223 + justify-content: space-between;
  224 + box-sizing: border-box;
  225 + padding: 0 0.3rem;
  226 +}
  227 +.menu_bottom_item{
  228 + font-size: 0.24rem;
  229 + line-height: 2;
  230 +}
  231 +
  232 +
  233 +
  234 +
  235 +
  236 +
  237 +.container {
  238 + width: 100%;
  239 + display: flex;
  240 + flex-flow: column;
  241 + align-items: center;
  242 + justify-content: center;
  243 +
  244 +}
  245 +.top{
  246 + width: 7.5rem;
  247 + /*height: 1.5rem;*/
  248 + background-color: #F7F7F7;
  249 + display: flex;
  250 + flex-flow: column;
  251 + align-items: center;
  252 + justify-content: center;
  253 +}
  254 +.top_t{
  255 + width: 6.86rem;
  256 + height: 0.8rem;
  257 + display: flex;
  258 + align-items: center;
  259 + justify-content: space-between;
  260 +}
  261 +.top_t_left{
  262 + width: 1.2rem;
  263 + display: flex;
  264 + justify-content: space-between;
  265 + align-items: center;
  266 +}
  267 +.top_t_left_text{
  268 + font-size:0.3rem;
  269 + font-family:PingFang-SC-Medium;
  270 + font-weight:500;
  271 + color:rgba(166,16,16,1);
  272 +}
  273 +.icon-caidan{
  274 +
  275 +}
  276 +/*中部*/
  277 +.top_t_middle{
  278 + width: 1.2rem;
  279 + height: 0.5rem;
  280 + display: flex;
  281 +}
  282 +.top_t_middle img{
  283 + width: 100%;
  284 + height: 100%;
  285 +}
  286 +/*右边*/
  287 +.top_t_right{
  288 + width: 1.2rem;
  289 + display: flex;
  290 + justify-content: space-between;
  291 + align-items: center;
  292 +}
  293 +.icon-10{
  294 + position: relative;
  295 +}
  296 +.top_t_right_pic{
  297 + width: 0.4rem;
  298 + height: 0.4rem;
  299 + display: flex;
  300 + -webkit-border-radius: 50%;
  301 + -moz-border-radius: 50%;
  302 + border-radius: 50%;
  303 +}
  304 +.top_t_right_pic img{
  305 + width: 100%;
  306 + height: 100%;
  307 + -webkit-border-radius: 50%;
  308 + -moz-border-radius: 50%;
  309 + border-radius: 50%;
  310 +}
  311 +/*-----底部------*/
  312 +.top_d{
  313 + width: 5.56rem;
  314 + display: flex;
  315 + padding-bottom: 0.03rem;
  316 + border-bottom: 1px solid #999999;
  317 + margin: 0.3rem 0 0.2rem 0;
  318 +}
  319 +.top_d_input{
  320 + width: 5rem;
  321 + text-align: center;
  322 + border: none;
  323 + outline: none;
  324 + background-color: #F7F7F7;
  325 + font-size: 0.3rem;
  326 + box-sizing: border-box;
  327 + padding: 0 0.2rem;
  328 +}
  329 +.top_d_input::placeholder{
  330 + color: #999999;
  331 +}
  332 +
  333 +/*----------------------------- 轮播图 -----------------------------------*/
  334 +.banner{
  335 + width: 6.86rem;
  336 + height: 3rem;
  337 + background-color: red;
  338 + -webkit-border-radius: 0.1rem;
  339 + -moz-border-radius: 0.1rem;
  340 + border-radius: 0.1rem;
  341 + margin-top: 0.23rem;
  342 +}
  343 +/*----------------------------- 最新 -----------------------------------*/
  344 +.new{
  345 + /*margin-top: 0.54rem;*/
  346 + display: flex;
  347 + flex-flow: column;
  348 + align-items: center;
  349 + justify-content: center;
  350 +}
  351 +.new_e{
  352 + font-size: 0.14rem;
  353 + color: #A61010;
  354 +}
  355 +.new_c{
  356 + margin-bottom: 0.2rem;
  357 + margin-top: 0.08rem;
  358 + font-size: 0.3rem;
  359 + color: #333333;
  360 + position: relative;
  361 + font-weight: bold;
  362 +}
  363 +.new_video_item{
  364 + width: 6.86rem;
  365 + display: flex;
  366 +
  367 + justify-content: space-around;
  368 +}
  369 +.new_video{
  370 + width: 3rem;
  371 + height: 3.5rem;
  372 + /*height: 2.1rem;*/
  373 + background:rgba(255,255,255,1);
  374 + box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14);
  375 + border-radius: 0.1rem;
  376 + display: flex;
  377 + flex-flow: column;
  378 + justify-content: center;
  379 + align-items: center;
  380 +}
  381 +.new_video_top{
  382 + width: 2.6rem;
  383 + height: 2.7rem;
  384 + display: flex;
  385 + margin-top: 0.2rem;
  386 +}
  387 +.new_video_top img{
  388 +
  389 + width: 100%;
  390 + height: 100%;
  391 +}
  392 +.new_video_bottom{
  393 + width: 2.8rem;
  394 + /*height: 0.4rem;*/
  395 + flex: 1;
  396 + display: flex;
  397 + align-items: center;
  398 + justify-content: space-between;
  399 + position: relative;
  400 +}
  401 +.new_video_bottom_name{
  402 + width: 2.8rem;
  403 + position: absolute;
  404 + font-size:0.2rem;
  405 + font-family:PingFang-SC-Medium;
  406 + font-weight:500;
  407 + color:rgba(51,51,51,1);
  408 + text-align: center;
  409 +
  410 + -webkit-box-orient: vertical;
  411 + -webkit-line-clamp: 1;
  412 + overflow: hidden;
  413 + text-overflow: ellipsis;
  414 + white-space: nowrap;
  415 +}
  416 +.new_video_bottom_right{
  417 + font-size: 0.3rem;
  418 + font-family:FZHCJW--GB1-0;
  419 + font-weight:400;
  420 + color:rgba(166,16,16,1);
  421 +}
  422 +
  423 +.item_pic{
  424 + width: 6.86rem;
  425 + display: flex;
  426 + justify-content: space-around;
  427 +}
  428 +.pic_box{
  429 + width: 3rem;
  430 + /*height: 2.2rem;*/
  431 + background:rgba(255,255,255,1);
  432 + box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14);
  433 + border-radius: 0.1rem;
  434 + display: flex;
  435 + flex-flow: column;
  436 + align-items: center;
  437 + justify-content: center;
  438 +}
  439 +.pic_box_top{
  440 + width: 3rem;
  441 + height: 1.7rem;
  442 + display: flex;
  443 + border-radius: 0.1rem 0.1rem 0 0;
  444 +}
  445 +.pic_box_top img{
  446 + width: 100%;
  447 + height: 100%;
  448 + border-radius: 0.1rem 0.1rem 0 0;
  449 +}
  450 +.pic_box_bottom{
  451 + height: 0.4rem;
  452 + font-size: 0.24rem;
  453 + font-family:PingFang-SC-Medium;
  454 + font-weight:500;
  455 + color:rgba(51,51,51,1);
  456 + display: flex;
  457 + align-items: center;
  458 + justify-content: center;
  459 +}
  460 +.video_more{
  461 + margin-top: 0.33rem;
  462 + font-size: 0.14rem;
  463 + font-family:Moon20-Regular;
  464 + font-weight:400;
  465 + color:rgba(166,16,16,1);
  466 + position: relative;
  467 + display: flex;
  468 + align-items: center;
  469 + flex-flow: column;
  470 + justify-content: center;
  471 +}
  472 +.video_more:last-child{
  473 + margin-bottom: 0.6rem;
  474 +}
  475 +.video_more:before{
  476 + content: "";
  477 + width: 0.8rem;
  478 + height:0.02rem;
  479 +
  480 + background-color: #E8E8E8;
  481 + position: absolute;
  482 + top: 0.32rem;
  483 +
  484 +}
  485 +/*title*/
  486 +.title{
  487 + display: flex;
  488 + flex-flow: column;
  489 + align-items: center;
  490 + justify-content: space-between;
  491 +}
  492 +.marin_top{
  493 + margin-top: 0.31rem ;
  494 +}
  495 +.between{
  496 + width: 2.6rem;
  497 + justify-content: space-between;
  498 +}
  499 +.show{
  500 + display: flex;
  501 + flex-flow: column;
  502 + align-items: center;
  503 + justify-content: center;
  504 +}
  505 +.show_time{
  506 + width: 6.86rem;
  507 + display: flex;
  508 +}
  509 +.show_time_year{
  510 + display: flex;
  511 +}
  512 +.show_time_month{
  513 + display: flex;
  514 +}
  515 +
  516 +.container{
  517 + position: relative;
  518 +}
  519 +.mid{
  520 + display: flex;
  521 + flex-flow: column;
  522 + align-items: center;
  523 + justify-content: center;
  524 +}
  525 +
  526 +.add_number{
  527 +
  528 + font-size: 0.24rem;
  529 + font-family:PingFang-SC-Bold;
  530 + font-weight:bold;
  531 + color:rgba(166,16,16,1);
  532 + line-height: 0.24rem;
  533 + position: absolute;
  534 + top: -0.2rem;
  535 + right: -0.5rem;
  536 +}
  537 +.item_box{
  538 +
  539 +}
  540 +.item_box:last-child{
  541 + margin-bottom: 1rem;
  542 +}
  543 +.margin-t{
  544 + margin-top: 0.46rem;
  545 +}
  546 +
  547 +.menu_box{
  548 +
  549 +}
  550 +.items{
  551 + margin-bottom: 1rem;
  552 +}
  553 +
  554 +
@@ -320,7 +320,7 @@ @@ -320,7 +320,7 @@
320 </div> 320 </div>
321 321
322 <!--动态层--> 322 <!--动态层-->
323 - <div class="mask"> 323 + <div class="mask" >
324 <div class="pop"> 324 <div class="pop">
325 <div class="pop_text pop_color"> 325 <div class="pop_text pop_color">
326 精选 326 精选
  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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  7 + <!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
  8 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9 + <link rel="stylesheet" type="text/css" href="css/common.css">
  10 + <link rel="stylesheet" type="text/css" href="css/rw.css">
  11 +
  12 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_u8m5zjdi1u.css">
  13 + <script src="js/base.js"></script>
  14 + <script src="js/jquery.min.js"></script>
  15 + <link rel="stylesheet" href="css/swiper.css">
  16 + <style>
  17 + .icon-caidan{
  18 + font-size: 0.5rem;
  19 + }
  20 + .icon-magnifier{
  21 + color: #999999;
  22 + }
  23 + .icon-bofangshipin{
  24 + font-size: 0.38rem;
  25 +
  26 + }
  27 + .swiper-container {
  28 + width: 100%;
  29 + height: 100%;
  30 + }
  31 +
  32 + .top_dot{
  33 + width: 0.08rem;
  34 + height: 0.08rem;
  35 + background:rgba(166,16,16,1);
  36 + border:1px solid rgba(255, 255, 255, 1);
  37 + border-radius: 50%;
  38 + position: absolute;
  39 + top: 0;
  40 + right: 0;
  41 + }
  42 + </style>
  43 +</head>
  44 +<script src="js/swiper.js"></script>
  45 +<body>
  46 +<div class="container">
  47 + <div class="top">
  48 + <!--顶部菜单-->
  49 + <div class="top_t">
  50 + <!--左-->
  51 + <div class="top_t_left">
  52 + <!--中文字-->
  53 + <div class="top_t_left_text">
  54 + 中
  55 + </div>
  56 + <!--菜单图标-->
  57 + <div class="iconfont icon-caidan"></div>
  58 + </div>
  59 + <!--中-->
  60 + <div class="top_t_middle">
  61 + <img src="images/peke.png">
  62 + </div>
  63 + <!--右-->
  64 + <div class="top_t_right">
  65 + <!--铃声-->
  66 + <div class="iconfont icon-10">
  67 + <div class="top_dot"></div>
  68 + </div>
  69 + <!--头像-->
  70 + <div class="top_t_right_pic">
  71 + <img src="images/1.png">
  72 + </div>
  73 + </div>
  74 + </div>
  75 + <!--底部搜索-->
  76 + <div class="top_d">
  77 + <div class="iconfont icon-magnifier"></div>
  78 + <input class="top_d_input" placeholder="搜索音乐/作品/风格">
  79 + </div>
  80 + </div>
  81 +
  82 + <div class="item_box margin-t">
  83 + <!--名称-->
  84 + <div class="new">
  85 + <div class="new_e">
  86 + Musicians
  87 + </div>
  88 + <div class="new_c">
  89 + 音乐家
  90 + <div class="add_number">+4</div>
  91 + </div>
  92 + <!--最新小视频窗口-->
  93 + <div class="new_video_item">
  94 + <div class="new_video">
  95 + <div class="new_video_top">
  96 + <img src="images/peke.png">
  97 + </div>
  98 + <div class="new_video_bottom">
  99 +
  100 +
  101 +
  102 + <div class="new_video_bottom_name">
  103 + 小猪佩奇
  104 + 小猪佩奇
  105 + 小猪佩奇
  106 + 小猪佩奇
  107 + 小猪佩奇
  108 + 小猪佩奇
  109 + </div>
  110 + </div>
  111 + </div>
  112 + <div class="new_video">
  113 + <div class="new_video_top">
  114 + <img src="images/peke.png">
  115 + </div>
  116 + <div class="new_video_bottom">
  117 + <div class="new_video_bottom_name">
  118 + 小猪佩奇
  119 +
  120 + </div>
  121 + </div>
  122 + </div>
  123 +
  124 +
  125 + </div>
  126 +
  127 +
  128 + </div>
  129 + <!--更多-->
  130 + <div class="video_more">
  131 + MORE
  132 + </div>
  133 + </div>
  134 +
  135 + <div class="item_box ">
  136 + <!--名称-->
  137 + <div class="new">
  138 + <div class="new_e">
  139 + Orchestra
  140 + </div>
  141 + <div class="new_c">
  142 + 乐团
  143 +
  144 + </div>
  145 + <!--最新小视频窗口-->
  146 + <div class="item_pic">
  147 + <!--图片盒子-->
  148 + <div class="pic_box">
  149 + <!--图片-->
  150 + <div class="pic_box_top">
  151 + <img src="images/peke.png">
  152 + </div>
  153 + <!--文字-->
  154 + <div class="pic_box_bottom">
  155 + 某某主题
  156 + </div>
  157 + </div>
  158 + <div class="pic_box">
  159 + <!--图片-->
  160 + <div class="pic_box_top">
  161 + <img src="images/peke.png">
  162 + </div>
  163 + <!--文字-->
  164 + <div class="pic_box_bottom">
  165 + 某某主题
  166 + </div>
  167 + </div>
  168 + </div>
  169 + </div>
  170 + <!--更多-->
  171 + <div class="video_more">
  172 + MORE
  173 + </div>
  174 +</div>
  175 +
  176 + <div class="item_box ">
  177 + <!--名称-->
  178 + <div class="new">
  179 + <div class="new_e">
  180 + Other
  181 + </div>
  182 + <div class="new_c">
  183 + 其他
  184 +
  185 + </div>
  186 + <!--最新小视频窗口-->
  187 + <div class="item_pic">
  188 + <!--图片盒子-->
  189 + <div class="pic_box">
  190 + <!--图片-->
  191 + <div class="pic_box_top">
  192 + <img src="images/peke.png">
  193 + </div>
  194 + <!--文字-->
  195 + <div class="pic_box_bottom">
  196 + 某某主题
  197 + </div>
  198 + </div>
  199 + <div class="pic_box">
  200 + <!--图片-->
  201 + <div class="pic_box_top">
  202 + <img src="images/peke.png">
  203 + </div>
  204 + <!--文字-->
  205 + <div class="pic_box_bottom">
  206 + 某某主题
  207 + </div>
  208 + </div>
  209 + </div>
  210 + </div>
  211 + <!--更多-->
  212 + <div class="video_more">
  213 + MORE
  214 + </div>
  215 + </div>
  216 +
  217 +
  218 +
  219 +
  220 +
  221 +
  222 +
  223 +</div>
  224 +</body>
  225 +<script>
  226 + var swiper = new Swiper('.swiper-container',{
  227 +
  228 + loop: true, // 循环模式选项
  229 + // autoplay: {
  230 + // delay: 1000,
  231 + // disableOnInteraction: false,
  232 + // },
  233 +
  234 + pagination: {
  235 + el: '.swiper-pagination',
  236 + },
  237 + });
  238 +</script>
  239 +</html>
@@ -2,13 +2,13 @@ @@ -2,13 +2,13 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 - <title>搜索无结果</title> 5 + <title>视频详情</title>
6 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 6 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
7 7
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9 <link rel="stylesheet" type="text/css" href="css/common.css"> 9 <link rel="stylesheet" type="text/css" href="css/common.css">
10 <link rel="stylesheet" type="text/css" href="css/spxq.css"> 10 <link rel="stylesheet" type="text/css" href="css/spxq.css">
11 - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_i66rltl2rzp.css"> 11 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_bamhpf0xfl8.css">
12 <script src="js/base.js"></script> 12 <script src="js/base.js"></script>
13 <script src="js/jquery.min.js"></script> 13 <script src="js/jquery.min.js"></script>
14 14
@@ -59,6 +59,22 @@ @@ -59,6 +59,22 @@
59 } 59 }
60 .share_color{ 60 .share_color{
61 color: #999999; 61 color: #999999;
  62 + position: relative;
  63 + }
  64 + .icon-weibo-copy{
  65 + display: flex;
  66 + }
  67 + .size_icon{
  68 + font-size: 0.34rem;
  69 + }
  70 + .icon-shangsanjiao{
  71 + position: absolute;
  72 + color: #e5e5e5;
  73 + right: 0;
  74 + top: 0.42rem;
  75 + }
  76 + .bottom_icon{
  77 + font-size: 0.16rem;
62 } 78 }
63 </style> 79 </style>
64 </head> 80 </head>
@@ -227,16 +243,121 @@ @@ -227,16 +243,121 @@
227 <div class="share_item">长笛</div> 243 <div class="share_item">长笛</div>
228 <div class="share_item">音乐风格</div> 244 <div class="share_item">音乐风格</div>
229 <div class="iconfont icon-xinaixin share_color"> 245 <div class="iconfont icon-xinaixin share_color">
230 - <span></span> 246 + <span class="share_size">1235</span>
  247 + </div>
  248 + <div class="iconfont icon-fenxiang share_color">
  249 + <div class="share_box">
  250 + <!--上三角-->
  251 + <div class="iconfont icon-shangsanjiao"></div>
  252 + <!--分享内容-->
  253 + <div class="share_function">
  254 + <div class="share_function_item">
  255 + <div class="iconfont icon-weibo-copy size_icon"></div>
  256 + <p>微博</p>
  257 + </div>
  258 + <div class="share_function_item">
  259 + <div class="iconfont icon-weixin size_icon"></div>
  260 + <p>微信</p>
  261 + </div>
  262 + <div class="share_function_item">
  263 + <div class="iconfont icon-tuite size_icon"></div>
  264 + <p>推特</p>
  265 + </div>
  266 + <div class="share_function_item">
  267 + <div class="iconfont icon-NGlianshu size_icon"></div>
  268 + <p>脸书</p>
  269 + </div>
  270 +
  271 + </div>
  272 + </div>
  273 + </div>
  274 + </div>
  275 + </div>
  276 +
  277 + <!--信息栏目-->
  278 + <div class="message_text">
  279 + <textarea type="text"></textarea>
  280 + </div>
  281 +
  282 + <div class="sub_box">
  283 + <div ></div>
  284 + <div class="message_sub">
  285 + 发送
  286 + </div>
  287 + </div>
  288 +
  289 + <!--评论-->
  290 + <div class="comment">
  291 + <div class="comment_title">
  292 + 评论(1256)
  293 + </div>
  294 + <div class="comment_item">
  295 + <div class="comment_item_left">
  296 + <img src="images/1.png">
  297 + </div>
  298 + <div class="comment_item_right">
  299 + <div class="comment_item_right_name">
  300 + 魔力怪
231 </div> 301 </div>
232 - <div class="iconfont icon-fenxiang share_color"></div> 302 + <div class="comment_item_right_text">
  303 +
  304 + <p>生活如同时间一样，对每个人都是一样的。但是往往不同的人的不同的思维、眼光、心态，造就了不一样的生活方式，生活局面。有的人生活光彩夺目，有的人生活布满荆棘。
  305 + <p>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢</p>
  306 +
  307 + </div>
  308 + <!--时间日期-->
  309 + <div class="comment_item_bottom">
  310 + <div class="comment_item_bottom_left">
  311 + 2018年12月31日
  312 + </div>
  313 + <div class="comment_item_bottom_right">
  314 + <div class="comment_item_bottom_right_item">举报</div>
  315 + <div class="comment_item_bottom_right_item">删除</div>
  316 + <div class="iconfont icon-dianzan bottom_icon">222</div>
  317 + <div class="iconfont icon-xiaoxi bottom_icon"></div>
233 </div> 318 </div>
  319 +
234 </div> 320 </div>
235 321
  322 + <div class="reply_box">
  323 + <!--回复内容-->
  324 + <div class="comment_reply">
236 325
  326 + <div class="comment_item_left pic_small">
  327 + <img src="images/1.png">
  328 + </div>
  329 + <div class="comment_item_right">
  330 + <div class="comment_item_right_name">
  331 + 魔力怪
  332 + </div>
  333 + <div class="comment_item_right_text">
237 334
  335 + <p>生活如同时间一样，对每个人都是一样的。但是往往不同的人的不同的思维、眼光、心态，造就了不一样的生活方式，生活局面。有的人生活光彩夺目，有的人生活布满荆棘。
  336 + <p>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢</p>
238 337
  338 + </div>
239 339
  340 + </div>
  341 + </div>
  342 + <!--时间日期-->
  343 + <div class="comment_item_bottom margin_to">
  344 + <div class="comment_item_bottom_left">
  345 + 2018年12月31日
  346 + </div>
  347 + <div class="comment_item_bottom_right">
  348 + <div class="comment_item_bottom_right_item">举报</div>
  349 + <div class="comment_item_bottom_right_item">删除</div>
  350 + <div class="iconfont icon-dianzan bottom_icon">222</div>
  351 + <div class="iconfont icon-xiaoxi bottom_icon"></div>
  352 + </div>
  353 +
  354 + </div>
  355 + </div>
  356 + </div>
  357 +
  358 +
  359 +</div>
  360 + </div>
240 </div> 361 </div>
241 </body> 362 </body>
242 <script> 363 <script>
  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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  7 +
  8 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9 + <link rel="stylesheet" type="text/css" href="css/common.css">
  10 + <link rel="stylesheet" type="text/css" href="css/yq.css">
  11 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7sk198wo5xx.css">
  12 + <script src="js/base.js"></script>
  13 + <script src="js/jquery.min.js"></script>
  14 +
  15 + <style>
  16 + .icon-caidan{
  17 + font-size: 0.5rem;
  18 + }
  19 + .icon-magnifier{
  20 + color: #999999;
  21 + }
  22 +
  23 + .f_size{
  24 + font-weight: normal;
  25 + font-size: 0.18rem;
  26 + }
  27 + .icon-xiugai{
  28 + margin-left: 0.15rem;
  29 + font-size: 0.3rem;
  30 + color: #999999;
  31 + display: flex;
  32 + font-weight: bold;
  33 + align-items: center;
  34 + }
  35 + .top_dot{
  36 + width: 0.08rem;
  37 + height: 0.08rem;
  38 + background:rgba(166,16,16,1);
  39 + border:1px solid rgba(255, 255, 255, 1);
  40 + border-radius: 50%;
  41 + position: absolute;
  42 + top: 0;
  43 + right: 0;
  44 + }
  45 + .color_black{
  46 + color: black;
  47 + }
  48 + .margin_t{
  49 + margin-top: 0.1rem;
  50 + }
  51 +
  52 + /*底部菜单*/
  53 + .font_s{
  54 + font-size: 0.4rem;
  55 + color: #A61010;
  56 + }
  57 + .icon-bilibilidonghua{
  58 + font-size: 0.8rem;
  59 + }
  60 +
  61 + </style>
  62 +</head>
  63 +
  64 +<body>
  65 +<div class="container">
  66 + <div class="top">
  67 + <!--顶部菜单-->
  68 + <div class="top_t">
  69 + <!--左-->
  70 + <div class="top_t_left">
  71 + <!--中文字-->
  72 + <div class="top_t_left_text">
  73 + 中
  74 + </div>
  75 + <!--菜单图标-->
  76 + <div class="iconfont icon-caidan"></div>
  77 + </div>
  78 + <!--中-->
  79 + <div class="top_t_middle">
  80 + <img src="images/peke.png">
  81 + </div>
  82 + <!--右-->
  83 + <div class="top_t_right">
  84 + <!--铃声-->
  85 + <div class="iconfont icon-10">
  86 + <!--小红点-->
  87 + <div class="top_dot"></div>
  88 + </div>
  89 + <!--头像-->
  90 + <div class="top_t_right_pic">
  91 + <img src="images/1.png">
  92 + </div>
  93 + </div>
  94 + </div>
  95 + <!--底部搜索-->
  96 + <div class="top_d">
  97 + <div class="iconfont icon-magnifier"></div>
  98 + <input class="top_d_input" placeholder="搜索音乐/作品/风格">
  99 + </div>
  100 + </div>
  101 +
  102 + <div class="items">
  103 + <div class="item_box margin-t">
  104 + <!--名称-->
  105 + <div class="new">
  106 + <div class="new_e">
  107 + String Instrument
  108 + </div>
  109 + <div class="new_c">
  110 + 拉弦乐
  111 + </div>
  112 + <!--最新小视频窗口-->
  113 + <div class="new_video_item">
  114 + <div class="new_video">
  115 + <div class="new_video_top">
  116 + <img src="images/peke.png">
  117 + </div>
  118 + <div class="new_video_bottom">
  119 +
  120 +
  121 +
  122 + <div class="new_video_bottom_name">
  123 + 小猪佩奇
  124 + 小猪佩奇
  125 + 小猪佩奇
  126 + 小猪佩奇
  127 + 小猪佩奇
  128 + 小猪佩奇
  129 + </div>
  130 + </div>
  131 + </div>
  132 + <div class="new_video">
  133 + <div class="new_video_top">
  134 + <img src="images/peke.png">
  135 + </div>
  136 + <div class="new_video_bottom">
  137 + <div class="new_video_bottom_name">
  138 + 小猪佩奇
  139 +
  140 + </div>
  141 + </div>
  142 + </div>
  143 +
  144 +
  145 + </div>
  146 +
  147 +
  148 + </div>
  149 + <!--更多-->
  150 + <div class="video_more">
  151 + MORE
  152 + </div>
  153 + </div>
  154 +
  155 + <div class="item_box ">
  156 + <!--名称-->
  157 + <div class="new">
  158 + <div class="new_e">
  159 + Pluck Music
  160 + </div>
  161 + <div class="new_c">
  162 + 弹拨
  163 +
  164 + </div>
  165 + <!--最新小视频窗口-->
  166 + <div class="new_video_item">
  167 + <div class="new_video">
  168 + <div class="new_video_top">
  169 + <img src="images/peke.png">
  170 + </div>
  171 + <div class="new_video_bottom">
  172 +
  173 +
  174 +
  175 + <div class="new_video_bottom_name">
  176 + 小猪佩奇
  177 + 小猪佩奇
  178 + 小猪佩奇
  179 + 小猪佩奇
  180 + 小猪佩奇
  181 + 小猪佩奇
  182 + </div>
  183 + </div>
  184 + </div>
  185 + <div class="new_video">
  186 + <div class="new_video_top">
  187 + <img src="images/peke.png">
  188 + </div>
  189 + <div class="new_video_bottom">
  190 + <div class="new_video_bottom_name">
  191 + 小猪佩奇
  192 +
  193 + </div>
  194 + </div>
  195 + </div>
  196 +
  197 +
  198 + </div>
  199 +
  200 +
  201 + </div>
  202 + <!--更多-->
  203 + <div class="video_more">
  204 + MORE
  205 + </div>
  206 +
  207 +
  208 + </div>
  209 +
  210 + <div class="item_box ">
  211 + <!--名称-->
  212 + <div class="new">
  213 + <div class="new_e">
  214 + Wind instrumen
  215 + </div>
  216 + <div class="new_c">
  217 + 吹管乐
  218 +
  219 + </div>
  220 + <!--最新小视频窗口-->
  221 + <div class="item_pic">
  222 + <!--图片盒子-->
  223 + <div class="pic_box">
  224 + <!--图片-->
  225 + <div class="pic_box_top">
  226 + <img src="images/peke.png">
  227 + </div>
  228 + <!--文字-->
  229 + <div class="pic_box_bottom">
  230 + 某某主题
  231 + </div>
  232 + </div>
  233 + <div class="pic_box">
  234 + <!--图片-->
  235 + <div class="pic_box_top">
  236 + <img src="images/peke.png">
  237 + </div>
  238 + <!--文字-->
  239 + <div class="pic_box_bottom">
  240 + 某某主题
  241 + </div>
  242 + </div>
  243 + </div>
  244 + </div>
  245 + <!--更多-->
  246 + <div class="video_more">
  247 + MORE
  248 + </div>
  249 + </div>
  250 +
  251 + <div class="item_box ">
  252 + <!--名称-->
  253 + <div class="new">
  254 + <div class="new_e">
  255 + Percussion
  256 + </div>
  257 + <div class="new_c">
  258 + 打击乐
  259 +
  260 + </div>
  261 + <!--最新小视频窗口-->
  262 + <div class="item_pic">
  263 + <!--图片盒子-->
  264 + <div class="pic_box">
  265 + <!--图片-->
  266 + <div class="pic_box_top">
  267 + <img src="images/peke.png">
  268 + </div>
  269 + <!--文字-->
  270 + <div class="pic_box_bottom">
  271 + 某某主题
  272 + </div>
  273 + </div>
  274 + <div class="pic_box">
  275 + <!--图片-->
  276 + <div class="pic_box_top">
  277 + <img src="images/peke.png">
  278 + </div>
  279 + <!--文字-->
  280 + <div class="pic_box_bottom">
  281 + 某某主题
  282 + </div>
  283 + </div>
  284 + </div>
  285 + </div>
  286 + <!--更多-->
  287 + <div class="video_more">
  288 + MORE
  289 + </div>
  290 + </div>
  291 + </div>
  292 +
  293 +
  294 +
  295 +
  296 +
  297 + <!--底部菜单栏-->
  298 + <div class="menu">
  299 + <div class="menu_box">
  300 + <div class="menu_top">
  301 + <div class="menu_top_item">
  302 + <div class="iconfont icon-qietu11 font_s"></div>
  303 + </div>
  304 + <div class="menu_top_item">
  305 + <div class="iconfont icon-weixin font_s"></div>
  306 + </div>
  307 + <div class="menu_top_item">
  308 + <div class="iconfont icon-tuite font_s"></div>
  309 + </div>
  310 + <div class="menu_top_item">
  311 + <div class="iconfont icon-bilibilidonghua font_s"></div>
  312 + </div>
  313 + <div class="menu_top_item">
  314 + <div class="iconfont icon-NGlianshu font_s"></div>
  315 + </div>
  316 + <div class="menu_top_item">
  317 + <div class="iconfont icon-youtube font_s"></div>
  318 + </div>
  319 + <div class="menu_top_item">
  320 + <div class="iconfont icon-CD font_s"></div>
  321 + </div>
  322 +
  323 + </div>
  324 + <div class="menu_bottom">
  325 + <div class="menu_bottom_item">
  326 + 隐私协议
  327 + </div>
  328 + <div class="menu_bottom_item">
  329 + 关于我们
  330 + </div>
  331 + <div class="menu_bottom_item">
  332 + 联系我们
  333 + </div>
  334 + <div class="menu_bottom_item">
  335 + 商店
  336 + </div>
  337 + </div>
  338 + </div>
  339 + </div>
  340 +
  341 +</div>
  342 +</body>
  343 +<script>
  344 + //标题切换
  345 + $('.item_m').click(function () {
  346 + var index = $(this).index()
  347 +
  348 + $(this).addClass('item_color').siblings(".item_m").removeClass('item_color')
  349 +
  350 +
  351 + //内容切换
  352 + var dataid = $(this).attr("data-id");
  353 + if(dataid == 1){
  354 + $(".message").show();
  355 + $('.audit').hide();
  356 + }else {
  357 + $(".audit").show();
  358 + $(".message").hide();
  359 + }
  360 +
  361 +
  362 +
  363 + })
  364 +</script>
  365 +</html>