proj-iott/modules/video_pro/video_pro_index1.html.erb

81 lines
2.3 KiB
Plaintext
Raw Normal View History

2024-08-11 13:36:34 +00:00
<div class="i-video_data video_data-index-1">
<h3 class="i-annc__page-title">{{page-title}}</h3>
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
<li class="video_data col-sm-12 row" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
<a class=" video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
<img class=" col-sm-3 video_snapshot" src="{{snapshot_url}}"/>
<div class="col-sm-9 video_info">
<div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
<div class="video_title"><h4>{{video_title}}</h4></div>
<div class="video_desc">{{video_desc}}</div>
<div class="view_info">
<span><img src="{{hd_icon_url}}" alt="HD"></span>
<span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
</div>
</div>
</a>
</li>
</ul>
<div class="clearfix"></div>
<style>
.video_data{
overflow: hidden;
margin-bottom: 1.875em;
box-shadow: #0000004d 0 0 4px;
border: 1px solid #bbb;
margin: 0.5em;
padding: 1em;
&:hover{
border: 1px solid #55bbd0;
box-shadow: #55bbd0e6 0 0 4px;
}
}
.video_data_wrap{
display: flex;
flex-wrap: wrap;
}
.video_group_time{
color: #4487cb;
}
.video_tag{
color: #e4374a;
display: none;
}
.video_title h4{
font-size: 1.6em;
font-weight: bold;
margin-bottom: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.view_info{
float: right;
}
.view_info img{
margin-right: 5px;
}
.video_group_time{
display: none;
}
.video_tags{
display: none;
}
.video_desc{
color: #333;
padding-top: 0.5em;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.video_title{
border-bottom: 2px solid #55bbd0;
padding-bottom: 0.5em;
}
</style>
</div>
{{pagination_goes_here}}