切换导航条
此项目
正在载入...
登录
webfront
/
videoWeb
·
提交
转到一个项目
GitLab
转到群组
项目
活动
文件
提交
管道
0
构建
0
图表
里程碑
问题
0
合并请求
0
成员
标记
维基
派生
网络
创建新的问题
下载为
邮件补丁
差异文件
浏览文件
作者
乔爽
6 years ago
提交
0e9c504c27c3c45f602220a0ef5e02798af8693f
1 个父辈
43b473d7
update
隐藏空白字符变更
内嵌
并排对比
正在显示
9 个修改的文件
包含
1765 行增加
和
7 行删除
css/index_2.css
css/rw.css
css/search.css
css/spxq.css
css/yq.css
index_2.html
rw.html
spxq.html
yq.html
css/index_2.css
查看文件 @
0e9c504
.container
{
position
:
relative
;
}
...
...
css/rw.css
0 → 100644
查看文件 @
0e9c504
.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
;
}
...
...
css/search.css
查看文件 @
0e9c504
...
...
@@ -101,7 +101,7 @@
width
:
7.5rem
;
display
:
flex
;
margin-top
:
0.6rem
;
justify-content
:
center
;
/*justify-content: center;*/
overflow-x
:
scroll
;
}
.mid_item
{
...
...
css/spxq.css
查看文件 @
0e9c504
...
...
@@ -219,7 +219,7 @@
padding
:
0.2rem
0
;
}
.mid_pic
{
width
:
6.
8
6rem
;
width
:
6.
2
6rem
;
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
;
}
...
...
css/yq.css
0 → 100644
查看文件 @
0e9c504
.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
;
}
...
...
index_2.html
查看文件 @
0e9c504
...
...
@@ -320,7 +320,7 @@
</div>
<!--动态层-->
<div
class=
"mask"
>
<div
class=
"mask"
>
<div
class=
"pop"
>
<div
class=
"pop_text pop_color"
>
精选
...
...
rw.html
0 → 100644
查看文件 @
0e9c504
<!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>
...
...
spxq.html
查看文件 @
0e9c504
...
...
@@ -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>
...
...
yq.html
0 → 100644
查看文件 @
0e9c504
<!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>
...
...
请
注册
或
登录
后发表评论