webfront / videoWeb · 提交

转到一个项目

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

update

内嵌 并排对比
正在显示 9 个修改的文件 包含 1765 行增加 和 7 行删除
.container{
position: relative;
}
... ...
.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;
}
/*----------------------------- 轮播图 -----------------------------------*/
.banner{
width: 6.86rem;
height: 3rem;
background-color: red;
-webkit-border-radius: 0.1rem;
-moz-border-radius: 0.1rem;
border-radius: 0.1rem;
margin-top: 0.23rem;
}
/*----------------------------- 最新 -----------------------------------*/
.new{
/*margin-top: 0.54rem;*/
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.new_e{
font-size: 0.14rem;
color: #A61010;
}
.new_c{
margin-bottom: 0.2rem;
margin-top: 0.08rem;
font-size: 0.3rem;
color: #333333;
position: relative;
font-weight: bold;
}
.new_video_item{
width: 6.86rem;
display: flex;
justify-content: space-around;
}
.new_video{
width: 3rem;
height: 3.5rem;
/*height: 2.1rem;*/
background:rgba(255,255,255,1);
box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14);
border-radius: 0.1rem;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.new_video_top{
width: 2.6rem;
height: 2.7rem;
display: flex;
margin-top: 0.2rem;
}
.new_video_top img{
width: 100%;
height: 100%;
}
.new_video_bottom{
width: 2.8rem;
/*height: 0.4rem;*/
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.new_video_bottom_name{
width: 2.8rem;
position: absolute;
font-size:0.2rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
text-align: center;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.new_video_bottom_right{
font-size: 0.3rem;
font-family:FZHCJW--GB1-0;
font-weight:400;
color:rgba(166,16,16,1);
}
.item_pic{
width: 6.86rem;
display: flex;
justify-content: space-around;
}
.pic_box{
width: 3rem;
/*height: 2.2rem;*/
background:rgba(255,255,255,1);
box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14);
border-radius: 0.1rem;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.pic_box_top{
width: 3rem;
height: 1.7rem;
display: flex;
border-radius: 0.1rem 0.1rem 0 0;
}
.pic_box_top img{
width: 100%;
height: 100%;
border-radius: 0.1rem 0.1rem 0 0;
}
.pic_box_bottom{
height: 0.4rem;
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
display: flex;
align-items: center;
justify-content: center;
}
.video_more{
margin-top: 0.33rem;
font-size: 0.14rem;
font-family:Moon20-Regular;
font-weight:400;
color:rgba(166,16,16,1);
position: relative;
display: flex;
align-items: center;
flex-flow: column;
justify-content: center;
}
.video_more:last-child{
margin-bottom: 0.6rem;
}
.video_more:before{
content: "";
width: 0.8rem;
height:0.02rem;
background-color: #E8E8E8;
position: absolute;
top: 0.32rem;
}
/*title*/
.title{
display: flex;
flex-flow: column;
align-items: center;
justify-content: space-between;
}
.marin_top{
margin-top: 0.31rem ;
}
.between{
width: 2.6rem;
justify-content: space-between;
}
.show{
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.show_time{
width: 6.86rem;
display: flex;
}
.show_time_year{
display: flex;
}
.show_time_month{
display: flex;
}
.container{
position: relative;
}
.mid{
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.add_number{
font-size: 0.24rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(166,16,16,1);
line-height: 0.24rem;
position: absolute;
top: -0.2rem;
right: -0.5rem;
}
.item_box{
}
.margin-t{
margin-top: 0.46rem;
}
... ...
... ... @@ -101,7 +101,7 @@
width: 7.5rem;
display: flex;
margin-top: 0.6rem;
justify-content: center;
/*justify-content: center;*/
overflow-x: scroll;
}
.mid_item{
... ...
... ... @@ -219,7 +219,7 @@
padding: 0.2rem 0;
}
.mid_pic{
width: 6.86rem;
width: 6.26rem;
height: 2.6rem;
display: flex;
}
... ... @@ -275,4 +275,169 @@
text-align: center;
padding: 0 0.3rem;
}
.share_size{
font-size: 0.2rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(153,153,153,1);
line-height: 0.3rem;
}
.message_text{
margin-top: 1.4rem;
width: 6.86rem;
height: 1.5rem;
background:rgba(192,44,44,0);
border:1px solid rgba(232, 232, 232, 1);
border-radius: 0.06rem;
}
.message_text textarea{
width: 100%;
height: 100%;
border: none;
outline: none;
box-sizing: border-box;
padding: 0.2rem 0.2rem;
}
.sub_box{
margin-top: 0.22rem;
width: 6.86rem;
display: flex;
justify-content: space-between;
}
.message_sub{
width: 1.2rem;
height: 0.3rem;
background:rgba(166,16,16,1);
border-radius: 0.04rem;
font-size: 0.2rem;
line-height: 0.3rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(255,254,254,1);
text-align: center;
}
/*分享*/
.share_function{
width: 3.2rem;
height: 0.8rem;
display: flex;
justify-content: space-around;
background-color: #e5e5e5;
border-radius: 0.04rem;
position: absolute;
right: 0;
top: 0.6rem;
}
.share_function_item{
display: flex;
flex-flow: column;
align-items: center;
justify-content: space-around;
font-size: 0.16rem;
}
/*评论*/
.comment{
margin-top: 0.38rem;
width: 6.86rem;
display: flex;
flex-flow: column;
margin-bottom: 1rem;
}
.comment_title{
font-size: 0.3rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height: 0.3rem;
}
.comment_item{
margin-top: 0.22rem;
display: flex;
}
.comment_item_left{
width: 0.5rem;
height: 0.5rem;
border-radius:50%;
display: flex;
}
.comment_item_left img{
width: 100%;
height: 100%;
border-radius:50%;
}
.comment_item_right{
display: flex;
flex-flow: column;
flex: 1;
margin-left: 0.24rem;
}
.comment_item_right_name{
font-size: 0.2rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(51,51,51,1);
/*line-height:30px;*/
line-height: 0.5rem;
}
.comment_item_right_text{
font-size: 0.16rem;
margin-top: 0.1rem;
line-height: 0.3rem;
}
.comment_item_right_text p{
line-height: 0.3rem;
}
/*底部内容*/
.comment_item_bottom{
display: flex;
font-size: 0.16rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
/*line-height:30px;*/
justify-content: space-between;
margin-top: 0.3rem;
}
.comment_item_bottom_left{
}
.comment_item_bottom_right{
display: flex;
justify-content: space-between;
width: 3rem;
}
.comment_item_bottom_right_item{
}
.comment_reply{
margin-top: 0.2rem;
border-left: 0.04rem solid #E8E8E8;
display: flex;
}
.comment_reply_left{
margin-left: 0.07rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
display: flex;
}
.comment_reply_left img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.margin_to{
margin-top: 0.2rem;
}
.pic_small{
margin-left: 0.07rem;
}
... ...
.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{
width: 7.5rem;
display: flex;
margin-top: 0.6rem;
justify-content: center;
overflow-x: scroll;
}
.mid_item{
display: flex;
flex-flow: column;
align-items: center;
border-bottom: 1px solid #e8e8e8;
margin-left: 0.38rem;
}
.mid_item_pic{
width: 1.6rem;
height: 1.8rem;
display: flex;
}
.mid_item_pic img{
width: 100%;
height: 100%;
}
.mid_item_text{
font-size: 0.16rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(51,51,51,1);
/*line-height:30px;*/
margin-top: 0.1rem;
margin-bottom: 0.1rem;
}
.bottom{
display: flex;
margin-top: 0.3rem;
}
.bottom_top{
display: flex;
border-bottom: 1px solid #e8e8e8;
height: 1.8rem;
align-items: center;
}
.bottom_top_pic{
width: 0.9rem;
height: 0.9rem;
display: flex;
}
.bottom_top_pic img{
width: 100%;
height: 100%;
}
.bottom_top_text{
display: flex;
flex-flow: column;
margin-left: 0.33rem;
}
.bottom_top_text_big{
font-size: 0.36rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
/*line-height:24px;*/
line-height: 0.45rem;
}
.bottom_top_text_small{
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height: 0.45rem;
}
.bottom_top_b{
margin-top: 0.13rem;
display: flex;
width: 4.3rem;
justify-content: space-between;
}
.bottom_top_b_left{
font-size: 0.2rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
/*line-height:24px;*/
}
.bottom_top_b_att{
width: 1rem;
height: 0.28rem;
background: #C02C2C;
border-radius: 0.04rem;
font-size: 0.2rem;
line-height: 0.28rem;
text-align: center;
color: #ffffff;
}
/*底部菜单栏*/
.menu{
width: 7.5rem;
height: 1.58rem;
position: fixed;
bottom: 0;
background: #ffffff;
display: flex;
flex-flow: column;
justify-content: center;
}
.menu_top{
display: flex;
justify-content: space-around;
}
.menu_top_item{
display: flex;
align-items: center;
}
.menu_bottom{
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.3rem;
}
.menu_bottom_item{
font-size: 0.24rem;
line-height: 2;
}
.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;
}
/*----------------------------- 轮播图 -----------------------------------*/
.banner{
width: 6.86rem;
height: 3rem;
background-color: red;
-webkit-border-radius: 0.1rem;
-moz-border-radius: 0.1rem;
border-radius: 0.1rem;
margin-top: 0.23rem;
}
/*----------------------------- 最新 -----------------------------------*/
.new{
/*margin-top: 0.54rem;*/
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.new_e{
font-size: 0.14rem;
color: #A61010;
}
.new_c{
margin-bottom: 0.2rem;
margin-top: 0.08rem;
font-size: 0.3rem;
color: #333333;
position: relative;
font-weight: bold;
}
.new_video_item{
width: 6.86rem;
display: flex;
justify-content: space-around;
}
.new_video{
width: 3rem;
height: 3.5rem;
/*height: 2.1rem;*/
background:rgba(255,255,255,1);
box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14);
border-radius: 0.1rem;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.new_video_top{
width: 2.6rem;
height: 2.7rem;
display: flex;
margin-top: 0.2rem;
}
.new_video_top img{
width: 100%;
height: 100%;
}
.new_video_bottom{
width: 2.8rem;
/*height: 0.4rem;*/
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.new_video_bottom_name{
width: 2.8rem;
position: absolute;
font-size:0.2rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
text-align: center;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.new_video_bottom_right{
font-size: 0.3rem;
font-family:FZHCJW--GB1-0;
font-weight:400;
color:rgba(166,16,16,1);
}
.item_pic{
width: 6.86rem;
display: flex;
justify-content: space-around;
}
.pic_box{
width: 3rem;
/*height: 2.2rem;*/
background:rgba(255,255,255,1);
box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14);
border-radius: 0.1rem;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.pic_box_top{
width: 3rem;
height: 1.7rem;
display: flex;
border-radius: 0.1rem 0.1rem 0 0;
}
.pic_box_top img{
width: 100%;
height: 100%;
border-radius: 0.1rem 0.1rem 0 0;
}
.pic_box_bottom{
height: 0.4rem;
font-size: 0.24rem;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
display: flex;
align-items: center;
justify-content: center;
}
.video_more{
margin-top: 0.33rem;
font-size: 0.14rem;
font-family:Moon20-Regular;
font-weight:400;
color:rgba(166,16,16,1);
position: relative;
display: flex;
align-items: center;
flex-flow: column;
justify-content: center;
}
.video_more:last-child{
margin-bottom: 0.6rem;
}
.video_more:before{
content: "";
width: 0.8rem;
height:0.02rem;
background-color: #E8E8E8;
position: absolute;
top: 0.32rem;
}
/*title*/
.title{
display: flex;
flex-flow: column;
align-items: center;
justify-content: space-between;
}
.marin_top{
margin-top: 0.31rem ;
}
.between{
width: 2.6rem;
justify-content: space-between;
}
.show{
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.show_time{
width: 6.86rem;
display: flex;
}
.show_time_year{
display: flex;
}
.show_time_month{
display: flex;
}
.container{
position: relative;
}
.mid{
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.add_number{
font-size: 0.24rem;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(166,16,16,1);
line-height: 0.24rem;
position: absolute;
top: -0.2rem;
right: -0.5rem;
}
.item_box{
}
.item_box:last-child{
margin-bottom: 1rem;
}
.margin-t{
margin-top: 0.46rem;
}
.menu_box{
}
.items{
margin-bottom: 1rem;
}
... ...
... ... @@ -320,7 +320,7 @@
</div>
<!--动态层-->
<div class="mask">
<div class="mask" >
<div class="pop">
<div class="pop_text pop_color">
精选
... ...
<!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 name="viewport" content="width=device-width, initial-scale=1" />-->
<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/rw.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_u8m5zjdi1u.css">
<script src="js/base.js"></script>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/swiper.css">
<style>
.icon-caidan{
font-size: 0.5rem;
}
.icon-magnifier{
color: #999999;
}
.icon-bofangshipin{
font-size: 0.38rem;
}
.swiper-container {
width: 100%;
height: 100%;
}
.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;
}
</style>
</head>
<script src="js/swiper.js"></script>
<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>
</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="item_box margin-t">
<!--名称-->
<div class="new">
<div class="new_e">
Musicians
</div>
<div class="new_c">
音乐家
<div class="add_number">+4</div>
</div>
<!--最新小视频窗口-->
<div class="new_video_item">
<div class="new_video">
<div class="new_video_top">
<img src="images/peke.png">
</div>
<div class="new_video_bottom">
<div class="new_video_bottom_name">
小猪佩奇
小猪佩奇
小猪佩奇
小猪佩奇
小猪佩奇
小猪佩奇
</div>
</div>
</div>
<div class="new_video">
<div class="new_video_top">
<img src="images/peke.png">
</div>
<div class="new_video_bottom">
<div class="new_video_bottom_name">
小猪佩奇
</div>
</div>
</div>
</div>
</div>
<!--更多-->
<div class="video_more">
MORE
</div>
</div>
<div class="item_box ">
<!--名称-->
<div class="new">
<div class="new_e">
Orchestra
</div>
<div class="new_c">
乐团
</div>
<!--最新小视频窗口-->
<div class="item_pic">
<!--图片盒子-->
<div class="pic_box">
<!--图片-->
<div class="pic_box_top">
<img src="images/peke.png">
</div>
<!--文字-->
<div class="pic_box_bottom">
某某主题
</div>
</div>
<div class="pic_box">
<!--图片-->
<div class="pic_box_top">
<img src="images/peke.png">
</div>
<!--文字-->
<div class="pic_box_bottom">
某某主题
</div>
</div>
</div>
</div>
<!--更多-->
<div class="video_more">
MORE
</div>
</div>
<div class="item_box ">
<!--名称-->
<div class="new">
<div class="new_e">
Other
</div>
<div class="new_c">
其他
</div>
<!--最新小视频窗口-->
<div class="item_pic">
<!--图片盒子-->
<div class="pic_box">
<!--图片-->
<div class="pic_box_top">
<img src="images/peke.png">
</div>
<!--文字-->
<div class="pic_box_bottom">
某某主题
</div>
</div>
<div class="pic_box">
<!--图片-->
<div class="pic_box_top">
<img src="images/peke.png">
</div>
<!--文字-->
<div class="pic_box_bottom">
某某主题
</div>
</div>
</div>
</div>
<!--更多-->
<div class="video_more">
MORE
</div>
</div>
</div>
</body>
<script>
var swiper = new Swiper('.swiper-container',{
loop: true, // 循环模式选项
// autoplay: {
// delay: 1000,
// disableOnInteraction: false,
// },
pagination: {
el: '.swiper-pagination',
},
});
</script>
</html>
... ...
... ... @@ -2,13 +2,13 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索无结果</title>
<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/spxq.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_i66rltl2rzp.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_bamhpf0xfl8.css">
<script src="js/base.js"></script>
<script src="js/jquery.min.js"></script>
... ... @@ -59,6 +59,22 @@
}
.share_color{
color: #999999;
position: relative;
}
.icon-weibo-copy{
display: flex;
}
.size_icon{
font-size: 0.34rem;
}
.icon-shangsanjiao{
position: absolute;
color: #e5e5e5;
right: 0;
top: 0.42rem;
}
.bottom_icon{
font-size: 0.16rem;
}
</style>
</head>
... ... @@ -227,16 +243,121 @@
<div class="share_item">长笛</div>
<div class="share_item">音乐风格</div>
<div class="iconfont icon-xinaixin share_color">
<span></span>
<span class="share_size">1235</span>
</div>
<div class="iconfont icon-fenxiang share_color">
<div class="share_box">
<!--上三角-->
<div class="iconfont icon-shangsanjiao"></div>
<!--分享内容-->
<div class="share_function">
<div class="share_function_item">
<div class="iconfont icon-weibo-copy size_icon"></div>
<p>微博</p>
</div>
<div class="share_function_item">
<div class="iconfont icon-weixin size_icon"></div>
<p>微信</p>
</div>
<div class="share_function_item">
<div class="iconfont icon-tuite size_icon"></div>
<p>推特</p>
</div>
<div class="share_function_item">
<div class="iconfont icon-NGlianshu size_icon"></div>
<p>脸书</p>
</div>
</div>
</div>
</div>
<div class="iconfont icon-fenxiang share_color"></div>
</div>
</div>
<!--信息栏目-->
<div class="message_text">
<textarea type="text"></textarea>
</div>
<div class="sub_box">
<div ></div>
<div class="message_sub">
发送
</div>
</div>
<!--评论-->
<div class="comment">
<div class="comment_title">
评论(1256)
</div>
<div class="comment_item">
<div class="comment_item_left">
<img src="images/1.png">
</div>
<div class="comment_item_right">
<div class="comment_item_right_name">
魔力怪
</div>
<div class="comment_item_right_text">
<p>生活如同时间一样，对每个人都是一样的。但是往往不同的人的不同的思维、眼光、心态，造就了不一样的生活方式，生活局面。有的人生活光彩夺目，有的人生活布满荆棘。
<p>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢</p>
</div>
<!--时间日期-->
<div class="comment_item_bottom">
<div class="comment_item_bottom_left">
2018年12月31日
</div>
<div class="comment_item_bottom_right">
<div class="comment_item_bottom_right_item">举报</div>
<div class="comment_item_bottom_right_item">删除</div>
<div class="iconfont icon-dianzan bottom_icon">222</div>
<div class="iconfont icon-xiaoxi bottom_icon"></div>
</div>
</div>
<div class="reply_box">
<!--回复内容-->
<div class="comment_reply">
<div class="comment_item_left pic_small">
<img src="images/1.png">
</div>
<div class="comment_item_right">
<div class="comment_item_right_name">
魔力怪
</div>
<div class="comment_item_right_text">
<p>生活如同时间一样，对每个人都是一样的。但是往往不同的人的不同的思维、眼光、心态，造就了不一样的生活方式，生活局面。有的人生活光彩夺目，有的人生活布满荆棘。
<p>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢</p>
</div>
</div>
</div>
<!--时间日期-->
<div class="comment_item_bottom margin_to">
<div class="comment_item_bottom_left">
2018年12月31日
</div>
<div class="comment_item_bottom_right">
<div class="comment_item_bottom_right_item">举报</div>
<div class="comment_item_bottom_right_item">删除</div>
<div class="iconfont icon-dianzan bottom_icon">222</div>
<div class="iconfont icon-xiaoxi bottom_icon"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
... ...
<!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 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/yq.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7sk198wo5xx.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;
}
.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;
}
/*底部菜单*/
.font_s{
font-size: 0.4rem;
color: #A61010;
}
.icon-bilibilidonghua{
font-size: 0.8rem;
}
</style>
</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>
</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="items">
<div class="item_box margin-t">
<!--名称-->
<div class="new">
<div class="new_e">
String Instrument
</div>
<div class="new_c">
拉弦乐
</div>
<!--最新小视频窗口-->
<div class="new_video_item">
<div class="new_video">
<div class="new_video_top">
<img src="images/peke.png">
</div>
<div class="new_video_bottom">
<div class="new_video_bottom_name">
小猪佩奇
小猪佩奇
小猪佩奇
小猪佩奇
小猪佩奇
小猪佩奇
</div>
</div>
</div>
<div class="new_video">
<div class="new_video_top">
<img src="images/peke.png">
</div>
<div class="new_video_bottom">
<div class="new_video_bottom_name">
小猪佩奇
</div>
</div>
</div>
</div>
</div>
<!--更多-->
<div class="video_more">
MORE
</div>
</div>
<div class="item_box ">
<!--名称-->
<div class="new">
<div class="new_e">
Pluck Music
</div>
<div class="new_c">
弹拨
</div>
<!--最新小视频窗口-->
<div class="new_video_item">
<div class="new_video">
<div class="new_video_top">
<img src="images/peke.png">
</div>
<div class="new_video_bottom">
<div class="new_video_bottom_name">
小猪佩奇
小猪佩奇
小猪佩奇
小猪佩奇
小猪佩奇
小猪佩奇
</div>
</div>
</div>
<div class="new_video">
<div class="new_video_top">
<img src="images/peke.png">
</div>
<div class="new_video_bottom">
<div class="new_video_bottom_name">
小猪佩奇
</div>
</div>
</div>
</div>
</div>
<!--更多-->
<div class="video_more">
MORE
</div>
</div>
<div class="item_box ">
<!--名称-->
<div class="new">
<div class="new_e">
Wind instrumen
</div>
<div class="new_c">
吹管乐
</div>
<!--最新小视频窗口-->
<div class="item_pic">
<!--图片盒子-->
<div class="pic_box">
<!--图片-->
<div class="pic_box_top">
<img src="images/peke.png">
</div>
<!--文字-->
<div class="pic_box_bottom">
某某主题
</div>
</div>
<div class="pic_box">
<!--图片-->
<div class="pic_box_top">
<img src="images/peke.png">
</div>
<!--文字-->
<div class="pic_box_bottom">
某某主题
</div>
</div>
</div>
</div>
<!--更多-->
<div class="video_more">
MORE
</div>
</div>
<div class="item_box ">
<!--名称-->
<div class="new">
<div class="new_e">
Percussion
</div>
<div class="new_c">
打击乐
</div>
<!--最新小视频窗口-->
<div class="item_pic">
<!--图片盒子-->
<div class="pic_box">
<!--图片-->
<div class="pic_box_top">
<img src="images/peke.png">
</div>
<!--文字-->
<div class="pic_box_bottom">
某某主题
</div>
</div>
<div class="pic_box">
<!--图片-->
<div class="pic_box_top">
<img src="images/peke.png">
</div>
<!--文字-->
<div class="pic_box_bottom">
某某主题
</div>
</div>
</div>
</div>
<!--更多-->
<div class="video_more">
MORE
</div>
</div>
</div>
<!--底部菜单栏-->
<div class="menu">
<div class="menu_box">
<div class="menu_top">
<div class="menu_top_item">
<div class="iconfont icon-qietu11 font_s"></div>
</div>
<div class="menu_top_item">
<div class="iconfont icon-weixin font_s"></div>
</div>
<div class="menu_top_item">
<div class="iconfont icon-tuite font_s"></div>
</div>
<div class="menu_top_item">
<div class="iconfont icon-bilibilidonghua font_s"></div>
</div>
<div class="menu_top_item">
<div class="iconfont icon-NGlianshu font_s"></div>
</div>
<div class="menu_top_item">
<div class="iconfont icon-youtube font_s"></div>
</div>
<div class="menu_top_item">
<div class="iconfont icon-CD font_s"></div>
</div>
</div>
<div class="menu_bottom">
<div class="menu_bottom_item">
隐私协议
</div>
<div class="menu_bottom_item">
关于我们
</div>
<div class="menu_bottom_item">
联系我们
</div>
<div class="menu_bottom_item">
商店
</div>
</div>
</div>
</div>
</div>
</body>
<script>
//标题切换
$('.item_m').click(function () {
var index = $(this).index()
$(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();
}
})
</script>
</html>
... ...