<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title>邀请人数</title>
|
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"
|
type="text/javascript" charset="utf-8"></script>
|
<style type="text/css">
|
/*全局外框*/
|
* {
|
margin: 0;
|
padding: 0;
|
font-family: "微软雅黑";
|
}
|
|
.all_wai {
|
width: 100%;
|
position: relative;
|
background-color: #EFEFF4;
|
}
|
|
.bor {
|
border: 1px dashed black;
|
}
|
/*==============================================================================================*/
|
/*标签布局所用
|
/*==============================================================================================*/
|
.fboxRow {
|
display: flex;
|
flex-direction: row;
|
}
|
|
.fboxCol {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.fboxWrap {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
/**/
|
.flex1 {
|
flex: 1;
|
display: flex;
|
}
|
|
.flex2 {
|
flex: 2;
|
display: flex;
|
}
|
|
.flex3 {
|
flex: 3;
|
display: flex;
|
}
|
|
.flex4 {
|
flex: 4;
|
display: flex;
|
}
|
|
.flex5 {
|
flex: 5;
|
display: flex;
|
}
|
|
.flex6 {
|
flex: 6;
|
display: flex;
|
}
|
/*-----------------------------------------------------------------------------------------------*/
|
.Xstart {
|
justify-content: flex-start;
|
}
|
|
.Xcenter {
|
justify-content: center;
|
}
|
|
.Xend {
|
justify-content: flex-end;
|
}
|
|
.Xbetween {
|
justify-content: space-between;
|
}
|
|
.Xaround {
|
justify-content: space-around;
|
}
|
/**/
|
.Ystart {
|
align-items: flex-start;
|
}
|
|
.Ycenter {
|
align-items: center;
|
}
|
|
.Yend {
|
align-items: flex-end;
|
}
|
|
.Ybaseline {
|
align-items: baseline;
|
}
|
|
.Ystretch {
|
align-items: stretch;
|
}
|
|
/*顶部选择导航*/
|
.topwai {
|
width: 94%;
|
height: 40px;
|
padding: 0px 3%;
|
background-color: white;
|
}
|
|
.topdan {
|
font-size: 14px;
|
line-height: 35px;
|
color: #474747;
|
}
|
|
.top_xian {
|
width: 35px;
|
height: 3px;
|
}
|
/*文字被选中*/
|
.top_ziOK {
|
color: #E51A66;
|
}
|
/*线条被选中*/
|
.top_xianOK {
|
background-color: #E51A66;
|
}
|
|
/*内容滚动框*/
|
.scroll_wai {
|
width: 100%;
|
position: relative;
|
overflow: scroll;
|
}
|
/*好友单框*/
|
.you_dan {
|
width: 94%;
|
padding: 5px 3%;
|
background-color: white;
|
margin-bottom: 1px;
|
color: #666666;
|
font-size: 13px;
|
}
|
|
.you_dan:nth-of-type(1) {
|
margin-top: 8px;
|
}
|
/*头像*/
|
.you_img {
|
width: 35px;
|
height: 35px;
|
margin-right: 10px;
|
border-radius: 50%;
|
display: block;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="all_wai">
|
|
<!--顶部选择导航-->
|
<div class="topwai fboxRow">
|
<!--一度好友-->
|
<div id="itop1" class="topdan flex1 fboxCol Ycenter">
|
<div id="top_zi1">一度好友(0)</div>
|
<div id="top_xian1" class="top_xian">
|
<!--选择项下面的红线-->
|
</div>
|
</div>
|
<!--二度好友-->
|
<div id="itop2" class="topdan flex1 fboxCol Ycenter">
|
<div id="top_zi2">二度好友(0)</div>
|
<div id="top_xian2" class="top_xian">
|
<!--选择项下面的红线-->
|
</div>
|
</div>
|
</div>
|
|
<!--下面的内容滚动框-->
|
<div class="scroll_wai">
|
|
<!--一度好友-->
|
<div id="icont1">
|
</div>
|
|
<!--二度好友-->
|
<div id="icont2"></div>
|
|
</div>
|
|
</div>
|
<div class="you_dan fboxRow Ycenter muban">
|
<img class="you_img" />
|
<div class="uname"></div>
|
</div>
|
</body>
|
|
<script type="text/javascript">
|
$(document).ready(function() {
|
var html = $(".muban").prop("outerHTML");
|
$(".muban").remove();
|
|
//获取屏幕高度
|
var windowheight = $(window).height();
|
//设置全局外框高度
|
$(".all_wai").css("height", windowheight + "px");
|
//设置内容滚动框高度
|
$(".scroll_wai").css("height", (windowheight - 40) + "px");
|
$("#icont1,#icont2").hide();
|
|
//默认让一度好友被选中
|
$("#top_zi1").addClass("top_ziOK");
|
$("#top_xian1").addClass("top_xianOK");
|
$("#icont1").show();
|
|
//顶部导航 一度好友 点击事件
|
$("#itop1").click(function() {
|
$("#top_zi1").addClass("top_ziOK");
|
$("#top_xian1").addClass("top_xianOK");
|
$("#top_zi2").removeClass("top_ziOK");
|
$("#top_xian2").removeClass("top_xianOK");
|
$("#icont1").show();
|
$("#icont2").hide();
|
});
|
|
//顶部导航 二度好友 点击事件
|
$("#itop2").click(function() {
|
$("#top_zi1").removeClass("top_ziOK");
|
$("#top_xian1").removeClass("top_xianOK");
|
$("#top_zi2").addClass("top_ziOK");
|
$("#top_xian2").addClass("top_xianOK");
|
$("#icont2").show();
|
$("#icont1").hide();
|
});
|
var id = getArgsFromHref(location.href,"id");
|
$.post("../../client/findThreeFriendsCount",{"id":id},function(data){
|
if(data.code==0){
|
var count1 = data.data.count1;
|
var count2 = data.data.count2;
|
$("#top_zi1").text("一度好友("+count1+")");
|
$("#top_zi2").text("二度好友("+count2+")");
|
}
|
},'json')
|
|
$.post("../../client/findThreeFriends",{"id":id,"type":1},function(data){
|
if(data.code==0){
|
var list = data.data.list;
|
for (var i=0;i<list.length;i++) {
|
$("#icont1").append(html);
|
var $tr = $("#icont1 .muban").eq(i);
|
$tr.find(".uname").text(list[i].nickName);
|
$tr.find(".you_img").attr("src",list[i].portrait);
|
}
|
}
|
|
},'json')
|
|
$.post("../../client/findThreeFriends",{"id":id,"type":2},function(data){
|
if(data.code==0){
|
var list = data.data.list;
|
for (var i=0;i<list.length;i++) {
|
$("#icont2").append(html);
|
var $tr = $("#icont2 .muban").eq(i);
|
$tr.find(".uname").text(list[i].nickName);
|
$tr.find(".you_img").attr("src",list[i].portrait);
|
}
|
}
|
|
},'json')
|
|
|
});
|
|
function getArgsFromHref(sHref, sArgName) {
|
var args = sHref.split("?");
|
var retval = "";
|
|
if(args[0] == sHref) /*参数为空*/ {
|
return retval; /*无需做任何处理*/
|
}
|
var str = args[1];
|
args = str.split("&");
|
for(var i = 0; i < args.length; i++) {
|
str = args[i];
|
var arg = str.split("=");
|
if(arg.length <= 1) continue;
|
if(arg[0] == sArgName) retval = arg[1];
|
}
|
return retval;
|
}
|
</script>
|
|
</html>
|
