1、先上图
2、 上代码
<div class="base-wrap word-break" style="padding:0 0 50px;">
<!--顶部-->
<!--精彩交友话题-->
<!--广告-->
<div class="ad-rent" >
<style type="text/css">
/* css 重置 */
/**{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px 宋体; }
img{ border:0; }
a{ text-decoration:none; color:#333; }*/
/* 本例子css */
.slideBox{ width:100%; overflow:hidden; position:relative; }
.slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
.slideBox .hd ul{ overflow:hidden; zoom:1; float:left; }
.slideBox .hd ul li{ float:left; margin-right:2px; width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
.slideBox .hd ul { background:#ff6699; color:#fff; }
.slideBox .bd { position:relative; height:100%; z-index:0; }
.slideBox .bd li{ zoom:1; vertical-align:middle; }
.slideBox .bd img{ width:100%;border:none; }
</style>
<div class="slideBox">
<div class="hd">
</div>
<div class="bd">
<ul >
<script type="text/template" >
{#each list as item}
<li>
<a href="javascript:void(0);" >
<p class="wzsl" style="color:#FF0000;font-size: 15px;margin: 0;padding: 0;line-height: 1.5em; font-family: 'Times New Roman', Times, serif;">👫$${item}找到伴侣</p>
</a>
</li>
{#/each}
</script>
</ul>
</div>
</div>
</div>
<!--公告-->
<!--交友圈-->
<!--交友圈 end-->
<!--会员推荐-->
<div style="margin-top: 8px;background: #fff;">
<p class="today-recommend-f">
<i class="icon-big-vip"></i>精选视频
</p>
<div >
<script type="text/template" >
<ul class="clearfix">
{#each list as item}
<li>
<div class="index-big-head" style="height:268px;">
<a href="../user_center/other_user_index.html?uid=${}" >
<video style="width:100%;height:268px;"
webkit-playsinline="true" playsinline x5-video-player-type="h5" x-webkit-airplay="true"
controls=""
preload=""
loop=""
poster="$${}">
<source src='$${}#t=0.1' type="video/mp4">
</video>
</a>
<span class="bz icon-index-zan" οnclick="ondianzan(${},${})"><i></i></span>
<i class="index-zan-integral" ></i>
{#if == 1}
<span class="index-vip"></span>
{#/if}
<!--{#if ==1000}-->
<span class="index-shangshouye"></span>
<!--{#/if}-->
<!--{#if ==1}-->
<span class="index-line"></span>
<!--{#/if}-->
</div>
<div class="index-big-f" >
<p class="f-14rem index-icon-infor clearfix">
<!--<a href="../user_center/other_user_index.html?uid=${}" >-->
<!--<img-->
<!--style="float: left;max-width:60%;text-align:left;background-position:left top;width: 49px;height: 49px;border-radius: 50%;overflow: hidden;border:1px solid #e6e6e6;margin-right: 1.3rem;"-->
<!--src="${}"/>-->
<!--</a>-->
<a style="font-size: 17px" href="../user_center/other_user_index.html?uid=${}" >
<span class="wzsl_1" style="float: left;max-width:60%">${} </span>
</a>
<!--{#if =='0'}-->
<!--<i class="icon-circle-nv"></i>-->
<!--{#/if}-->
<!--{#if =='1'}-->
<!--<i class="icon-circle-nan"></i>-->
<!--{#/if}-->
<!--{#if ==1}-->
<!--<i class="icon-circle-tel"></i>-->
<!--{#/if}-->
<!--{#if !='/commom_imgs/default_girl_head_img.jpg' }-->
<!--<i class="icon-circle-photo"></i>-->
<!--{#/if}-->
<!--<br>-->
<!--<span class="f-12rem">-->
<!--${>0?:"-"}岁 -->
<!--${>0 ? + "cm ": "" } -->
<!--$${>3?(0,3)+"..":}-->
<!--</span>-->
</p>
</div>
</li>
{#/each}
</ul>
</script>
</div>
</div>
<!--加载数据-->
<p class="f-14rem rel load-data" style="display:none;">加载失败，请重新尝试...</p>
<p class="f-14rem rel load-data" style="display:none;">
<img src="/content/images/" />正在加载，请稍等...</p>
<p class="f-14rem rel load-data" style="display:none;">已加载全部数据...</p>
<!--红包弹窗-->
<link href="../css/index_css/redbagv=6." rel="stylesheet" />
<link href="../css/index_css/openbagv=2." rel="stylesheet" />
<!--邀请好友奖励-->
<div class="openredbg" style="display:none">
<div class="bag-mask" style="cursor: pointer;"></div>
<div class="inner-wrap layui-m-anim-scale">
<i class="bag-close"></i>
<a href="javascript:;" class="bag-open open"></a>
<div class="bg-top">
<div class="baginfo">
<img class="bag-photo"
src="/image/jpg/2017/7/27/" alt="">
<p class="bag-username">交友网</p>
<p class="bag-bagtype">邀请好友奖励</p>
<p class="bag-des">恭喜你获得红包一个！赶紧领取吧</p>
</div>
</div>
<div class="lookothers">
<a href="javascript:;">看看大家的手气></a>
</div>
</div>
</div>
<!--恭喜你获得红包。。。。。。。-->
<div class="container" style="display: none">
<div class="RedBox" style="margin-top: 55px;">
<div class="topcontent">
<h2 class="bounceInDown">恭喜你获得红包</h2>
<span class="text flash"><b class="redmoney">88</b>元</span>
<div class="avatar">
<div >
<img src="http://39.106.161.5:8081/image/image4/5816b415b06d1d32157790b1_%E5%9C%A3%E5%A2%"
alt="" width="80" height="80" class="zoomIn">
</div>
</div>
<div class="description1 flipInX">
<a href="/fu/redbaglog-772537">查看红包记录</a></div>
<div class="description2 close" style="cursor: pointer">关闭</div>
</div>
</div>
</div>
<script type="text/javascript">
//红包
$(document).on('click', '.bag-close,.bag-mask',function() {
$('.openredbg').hide();
}).on('click', '.openredbag', function () {
= "/fu/award-772537?v=" + new Date().getMilliseconds();
}).on('click','.close',function() {
$('.container').hide();
}).on('click','.open',function() {
$.ajax({
type: "post",
url: "/fajax/GetInviteRedPacket-772537",
data: { rid: '140742' },
dataType: "JSON",
success: function (data) {
if ( && ) {
$('.openredbg').hide();
var datas = ;
$('.redmoney').html();
$('.nums').html();
$('.container').show();
} else {
PopMsg();
}
}
});
})
</script>
<!--关注消息提醒-->
<!--关注提醒-->
<div class="real-time-reminder-fix" style="display:none;">
<ul class="bz base-wrap d-flex d-flex-center real-time-reminder">
<li class="rtr-head">
<img src="/image/jpg/2017/7/27/" style="width: 100%; height: 30px;">
</li>
<li class="flex rtr-f">
送花 / 打赏 / 打招呼 / 暗恋 / 聊天 / 回复等实时提醒
</li>
<li class="rtr-focus"><a href="javascript:void(0);" class="qrcode_attention_popup">关注</a></li>
<li class="rtr-close"><a href="javascript:void(0);" class="qrcode_attention_close"></a></li>
</ul>
</div>
<!--关注提醒的弹框-->
<div style="display:none;">
<div class="black-mask-03"></div>
<div class="dialog-06">
<span style="display: block;">
<img src="/image/jpg/openqrcode/gh_d119f1c883cf_772537.jpg" style="width: 100%;">
</span>
<p class="f-15rem" style="color: black;margin:10px 0 0;">长按关注 实时提醒</p>
<a class="reminder-qr-close" href="javascript:void(0);"></a>
</div>
</div>
<script type="text/javascript">
//关注
$(".qrcode_attention_popup").click(function () {
$("#guanzhu-qrcode-box").show();
GetCookies("is_show_guanzhu_772537", null, { path: "/", domain: ".", expires: 0 });
});
$(".qrcode_attention_close").click(function () {
$("#qrcode_attention_block").remove();
GetCookies("is_show_guanzhu_772537", "1", { path: "/", domain: ".", expires: 1 });
});
$(".reminder-qr-close").click(function () {
$("#guanzhu-qrcode-box").hide();
});
</script>
<!--底部导航-->
<link href="../css/index_css/footer-topv=1." rel="stylesheet" />
<style>
.friend-footer ul li span {
display: block;
}
</style>
<!--底部导航-->
<footer class="friend-footer" style="left: 0px;">
<ul class="bz">
<li class="footer-index-icon">
<a class="bz" href="../user_list/">
<i></i>
<span>附近</span>
</a>
</li>
<li class="footer-news-icon" msgcts="0">
<a class="bz " href="../im/conversation-list/">
<i>
<em class="alert-red-dot" style="top: -2px;right: -8px;display:none;"></em>
</i>
<span>消息</span>
</a>
</li>
<li class="footer-search-icon">
<a class="bz active" href="javascript:void(0);">
<i></i>
<span>小视频</span>
</a>
</li>
<li class="footer-friend-icon">
<a class="bz " href="../circle_friends/">
<i></i>
<span>社区</span>
</a>
</li>
<li class="footer-me-icon message-alert" msgcts="0">
<a class="bz " href="../user_center/user_index.html">
<i>
<!--<em class="alert-red-dot" style="top: -2px;right: -8px;display: none;">1</em>-->
<!--<em class="alert-red-dot-ellipsis" style="top: -2px;right: -8px;display:none;"></em>-->
</i>
<span>我的</span>
</a>
</li>
</ul>
</footer>
<!--公众号关注-->
<!--公众号弹窗-->
<link rel="stylesheet" type="text/css"
href="../css/index_css/dialogv=" />
<div class="dialog followdialog" style="display: none;" >
<div class="dialogBox" style="z-index: 100;border-radius: 4px;">
<div class="dialogContent">
<span class="close" style="cursor: pointer" οnclick="$('.followdialog').hide()"></span>
<div class="content" style="color: #111;font-size: 16px;line-height: 1.5;padding-top: 25px;">长按关注</div>
<span class="qr"><img src="/image/jpg/openqrcode/gh_d119f1c883cf_772537.jpg" /></span>
<p style="font-size: 15px;text-align: center;line-height: 1.45;">关注公众号后<br/>可及时收到对方的回复哟</p>
</div>
</div>
</div>
<!---->
<script src="../js/index_js/msgtipsv=2."></script>
<script type="text/javascript">
//GetVchatReminds(420159290,772537, ".footer-news-icon");
//WsWebSocket(420159290,772537, ".message-alert");
</script>
</div>
3、 演示网站 :8088/jiaoyou/video_live/video_live.html
4、不懂的联系 丘丘 ： 823627970