版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/github_38854224/article/details/89450407
注意：导航条切换目前是写死在页面里的，没有做到从后台获取导航条目进行改变。
<?php
define("BABY_PATH","/****/baby");
include_once(BABY_PATH . '/**ew.php');
include_once("/o*****/memcache.php");
$ms=new Mysqls();
$daren_arr = array(
1=>"时尚达人",
2=>"手工达人",
3=>"美食达人",
4=>"育儿达人",
5=>"美妆达人",
6=>"旅行达人",
7=>"摄影达人",
8=>"管理员",
9=>"资深专家",
10=>"手工达人",
11=>"手绘达人",
12=>"手工达人",
13=>"败家达人",
14=>"手工达人",
15=>"海外达人",
16=>"爱心妈妈",
17=>"橙品达人"
);
$qq_id = intval($_GET['o_user_id']) ? intval($_GET['o_user_id']) : 0;
if($qq_id>0){
setcookie("mmyx_o_id",$qq_id,time()+3600*24,"/",".qubaobei.com");
}
$qq_id = $_COOKIE['mmyx_o_id'];
//获取达人列表
$super_json = file_get_contents("https:/***_post_list.php?mobile=51&o_user_id=".$qq_id);
$supers = json_decode($super_json,true);
$supers_pic = $supers['user'];
foreach($supers_pic as $k=>$v){
$sql = "sele****']}' limit 1";
$nickname = $ms->getRow($sql);
$supers_pic[$k]['nickname'] = $nickname['nickname'];
$supers_pic[$k]['daren'] = $daren_arr[$v['medal_id']];
}
$sql = "selec****ite=2 limit 1";
$user_id = $ms->getRow($sql);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0,telephone=no" />
<meta name="format-detection" content="telephone=no" />
<link href="http://app.ci123.com/act/zjl/css3/animate.css" rel="stylesheet" type="text/css">
<title>妈妈优选</title>
<script language="javascript">
var phoneWidth = parseInt(window.screen.width);var iwidth = 750;var phoneScale = phoneWidth/iwidth;var ua = navigator.userAgent;var os = 1;if (/Android (\d+\.\d+)/.test(ua)){var version = parseFloat(RegExp.$1);os = 2;if(version>2.3){document.write('<meta name="viewport" content="width='+iwidth+', minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">')}else{document.write('<meta name="viewport" content="width='+iwidth+', target-densitydpi=device-dpi">')}} else {document.write('<meta name="viewport" content="width='+iwidth+', user-scalable=no, target-densitydpi=device-dpi">')}
</script>
<style type="text/css">
body{margin:0;padding:0;font-family:Arial;font-size:24px; background:#f3f3f3;color: #2c2d2e;}
ul,li,dl,dt,dd,p,div{margin:0;padding:0;list-style:none}
@font-face {
font-family: 'mamabbs'; /* project id 613978 */
src: url('//at.alicdn.com/t/font_613978_tgoiu4cg8q8.eot');
src: url('//at.alicdn.com/t/font_613978_tgoiu4cg8q8.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_613978_tgoiu4cg8q8.woff2') format('woff2'),
url('//at.alicdn.com/t/font_613978_tgoiu4cg8q8.woff') format('woff'),
url('//at.alicdn.com/t/font_613978_tgoiu4cg8q8.ttf') format('truetype'),
url('//at.alicdn.com/t/font_613978_tgoiu4cg8q8.svg#mamabbs') format('svg');
}
.hide{display: none}
.flexBetw{display:flex;align-items: center;justify-content: space-between;}
.flexCenter{display:flex;align-items: center;}
.top{width:100%;background:#fff;padding:20px 0;}
.search{width:690px;height:60px;background:#f3f3f3;line-height:62px;font-size:26px;color:#8a8a8a;text-align:center;margin:0 auto;border-radius:60px;font-family:"mamabbs" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing: grayscale;}
.expert .expTit{padding:44px 16px 28px 18px;}
.expert .exLeft{font-size: 28px;font-weight: 550;}
.expert .exRight{color:#8a8a8a;}
.expert .exRight span{margin-left: 15px; font-family: mamabbs;}
.expert ul{padding-left: 16px; display:flex;align-items: center;overflow-x: scroll;-webkit-overflow-scrolling:touch;}
.expert ul::-webkit-scrollbar{display: none;color:rgba(255,255,255,0);}
.expert li{width:34%;height: 280px;margin-right:12px; padding: 22px;border-radius: 15px;background: #fff;display: flex;align-items: center;flex-direction: column; flex-shrink:0;-webkit-tap-highlight-color: rgba(0,0,0,0);}
.expert .tou{width:100px;height: 100px;border-radius: 50%;overflow: hidden;}
.expert li div{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;text-align: center;}
.expert .exName{width: 90%; padding:20px 0 8px; font-size: 30px;font-weight: bold;}
.expert .lei{width: 90%;padding: 0 0 12px;color: #8a8a8a; }
.expert .shu{width:105%;}
.expert .butt{width:80%;height: 50px;margin-top: 10px; border-radius: 25px;line-height: 50px;color: #fff;background: #ea414a;transition: 0.3s;}
.expert .butt2{background: #d3d3d3;-webkit-animation-name:pulse2;animation-name:pulse2;}
@-webkit-keyframes pulse2{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}
@keyframes pulse2{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}
.icon{float:left;margin:7px 0 0 18px;width:102px;height:97px;background:url(images/daren.jpg) no-repeat;background-size:102px 97px;}
.fixed{position:fixed!important;top: 0;}
.middleBar{margin-top: 30px; position: relative;}
.middleBar .more{position: relative;position: absolute;top:8px;right: 0;}
.wall_bar{height:540px;padding-top: 30px;margin-bottom: 1px; overflow-x: scroll;-webkit-overflow-scrolling:touch;display: flex;align-items: flex-start;font-size: 30px;background: -webkit-linear-gradient(#fff, #f2f2f2); background: linear-gradient(#fff, #f2f2f2);position: relative;}
.wall_bar::-webkit-scrollbar{display: none;color:rgba(255,255,255,0);}
.wall_bar li{margin-right:28px;padding: 0 24px; flex-shrink:0;-webkit-tap-highlight-color: rgba(0,0,0,0);transition: 0.3s;line-height: 42px;}
.wall_bar li:first-child{padding-left: 56px;}
.wall_bar li:last-child{padding-right: 178px;}
.wall_bar .wlBarOn{font-size: 34px;font-weight: bold;color: #eb6131;}
.wall_bar #redLine{width: 10px;height: 12px;background: #eb6131;border-radius: 6px;position: absolute;top: 80px;}
.wall{width:100%;position: relative;top:-450px;}
.wall .wall-column {float: left; width:50%;padding:0 1.4%;display:block;box-sizing:border-box;}
.wall .wall-column .article{margin:0 0 25px 0;background:#fff;border-radius:15px;overflow:hidden;}
.article img {width:100%;}
.article p{font-size:28px;color:#000;width:320px;margin:16px auto 18px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;line-height:1.3em;}
.article .img{float:left;width:42px;height:42px;border-radius:42px;overflow:hidden;margin:0 13px 21px 14px;}
.article .name{float:left;font-size:24px;color:#8a8a8a;padding-top:8px;width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.article .iconfont{float:right;font-size:24px;margin-top:10px;margin-right:25px;font-family:"mamabbs" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;color:#a9a9a9;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.article .on{color:#f00;}
.loading{clear:both;margin:0 auto;width:200px;text-align:center;color:#555;/*display:none;*/}
.loading i{display:inline-block;width:15px;height:15px;background:url(http://filebaby.qubaobei.com/box/images/phone/loading.png) no-repeat;background-size:15px 15px;animation:loading 0.8s linear infinite;-webkit-animation:loading 0.8s linear infinite;}
.loading span{margin-left:8px;}
.fenLei .meng{width:100%;height: 100%;background: rgba(0,0,0,0.6);position: fixed;top: 0;}
.fenLei ul{width:98%;height: 600px;padding: 18% 1%;background: #fff;border-radius: 30px 30px 0 0;position: fixed;left: 0;bottom: 0;transition: 0.3s;}
.fenLei li{float: left; width:162px;height: 90px;margin: 10px; border-radius: 10px;background: #f4f5f5;line-height: 90px;text-align: center;font-size: 30px;}
.fenLei .menclose{bottom: -874px;}
.fenLei .meClose{width: 40px;height: 10px; font-family: mamabbs;font-size: 34px;position: absolute;top:34px;left:36px;background: #fff;}
.fenLei .leiOn{font-weight: bold;color: #e66a65;}
.wall_bar .rb1{left:61px;}
.wall_bar .rb2{left:26%;}
.wall_bar .rb3{left:44%;}
.wall_bar .rb4{left:62.5%;}
.wall_bar .rb5{left:80.5%;}
.wall_bar .rb6{left:98.5%;}
.wall_bar .rb7{left:121%;}
.wall_bar .rb8{left:147.5%;}
.wall_bar .rb9{left:169%;}
.wall_bar .rb10{left:187.5%;}
.wall_bar .rb11{left:205%;}
.wall_bar .rb12{left:223.5%;}
.wall_bar .rb13{left:243.5%;}
.wall_bar .rb14{left:263.5%;}
.wall_bar .rb15{left:286.5%;}
.wall_bar .rb16{left:308%;}
</style>
<script language="javascript">
var uid = <?php echo $user_id['id'];?>;
function getFocus(th,to_uid){
var num = $(th).prev().children("span").text();
if($(th).hasClass("butt2")){
$(th).removeClass("butt2").text(" 关注");
$.get("http:/****aby_query.php?method=del***Relate&qq_id="+uid+"&relate="+to_uid);
$(th).prev().children("span").text(parseInt(num)-1);
}else {
$(th).addClass("butt2").text("取消关注");
$.get("http://w****/baby_query.php?method=Relate&qq_id=" +uid+"&relate="+to_uid);
$(th).prev().children("span").text(parseInt(num)+1);
}
event.stopPropagation();
}
</script>
</head>
<body>
<div class="top">
<div class="search" onclick="window.location.href='search.php?action=goto_box'"> 掉发怎么办？</div>
</div>
<div class="expert">
<div class="expTit flexBetw">
<div class="exLeft"><img src="images/icon_expert.png" width="158px" height="38px" /></div>
<!-- <div class="exLeft">你可能感兴趣的达人</div>-->
<div class="exRight" onClick="darenList()">查看更多<span></span></div>
</div>
<ul>
<?php foreach($supers_pic as $v):?>
<li onclick="turnUserCenter(<?php echo $v['user_id'] ?>)">
<div class="tou"><img src="<?php echo $v['avatar'];?>" width="100px" height="100px" /></div>
<div class="exName"><?php echo $v['nickname'];?></div>
<div class="lei"><?php echo $v['daren'];?></div>
<!-- <div class="shu"><?php echo $v['post_num'];?>发帖，<span><?php echo $v['fans_num'];?></span>粉丝</div>-->
<?php if(!$v['relate']):?>
<div class="butt animated pulse" onClick="getFocus(this,<?php echo $v['user_id'];?>)">关注</div>
<?php else:?>
<div class="butt animated pulse butt2" onClick="getFocus(this,<?php echo $v['user_id'];?>)">取消关注</div>
<?php endif;?>
</li>
<?php endforeach;?>
</ul>
</div>
<div class="middleBar">
<ul id="ulBar" class="wall_bar">
<li class="wlBarOn" onClick="touchBar('1',0,this,0)" id="c_1">精选</li>
<li onClick="touchBar('2',9,this,0)" id="c_2">护肤</li>
<li onClick="touchBar('3',8,this,0)" id="c_3">彩妆</li>
<li onClick="touchBar('4',2,this,0)" id="c_4">奶粉</li>
<li onClick="touchBar('5',5,this,0)" id="c_5">美食</li>
<li onClick="touchBar('6',6,this,0)" id="c_6">早教</li>
<li onClick="touchBar('7',4,this,0)" id="c_7">洗护用品</li>
<li onClick="touchBar('8',3,this,0)" id="c_8">哺喂用品</li>
<li id="redLine" class="rb1"></li>
<li onClick="touchBar('9',10,this,0)" id="c_9">服饰</li>
<li onClick="touchBar('10',11,this,0)" id="c_10">保健</li>
<li onClick="touchBar('11',12,this,0)" id="c_11">出行</li>
<li onClick="touchBar('12',17,this,0)" id="c_12">家居</li>
<li onClick="touchBar('13',1,this,0)" id="c_13">纸尿裤</li>
<li onClick="touchBar('14',16,this,0)" id="c_14">孕期</li>
<li onClick="touchBar('15',13,this,0)" id="c_15">产后塑身</li>
<li onClick="touchBar('16',14,this,0)" id="c_16">其他</li>
</ul>
<div class="more" onClick="showMore()"><img src="images/more.png" width="88px" height="88px" /></div>
</div>
<div class="wall">
</div>
<div class="fenLei">
<div class="meng hide"></div>
<ul id="menUl" class="menclose">
<div class="meClose" onClick="menClose()"></div>
<li class="leiOn" onClick="chooseLei(1,0,this)" id="d_1">精选</li>
<li onClick="chooseLei(2,9,this)" id="d_2">护肤</li>
<li onClick="chooseLei(3,8,this)" id="d_3">彩妆</li>
<li onClick="chooseLei(4,2,this)" id="d_4">奶粉</li>
<li onClick="chooseLei(5,5,this)" id="d_5">美食</li>
<li onClick="chooseLei(6,6,this)" id="d_6">早教</li>
<li onClick="chooseLei(7,4,this)" id="d_7">洗护用品</li>
<li onClick="chooseLei(8,3,this)" id="d_8">哺喂用品</li>
<li onClick="chooseLei(9,10,this)" id="d_9">服饰</li>
<li onClick="chooseLei(10,11,this)" id="d_10">保健</li>
<li onClick="chooseLei(11,12,this)" id="d_11">出行</li>
<li onClick="chooseLei(12,17,this)" id="d_12">家居</li>
<li onClick="chooseLei(13,1,this)" id="d_13">纸尿裤</li>
<li onClick="chooseLei(14,16,this)" id="d_14">孕期</li>
<li onClick="chooseLei(15,13,this)" id="d_15">产后塑身</li>
<li onClick="chooseLei(16,14,this)" id="d_16">其他</li>
</ul>
</div>
<div id="more" class="loading"><i></i><span>正在加载...</span></div>
<div style="display:none;"><script src="https://s13.cnzz.com/z_stat.php?id=1262163010&web_id=1262163010" language="JavaScript"></script></div>
<script src="http://file2.ci123.com/ast/js/jquery_172.js" language="javascript"></script>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
<script src="js/jaliswall.js" type="text/javascript"></script>
<script type="text/javascript">
var isSending=false;
var page=1,tag_id=0,o_tag_id=0;
var uid = <?php echo $user_id['id'];?>;
function turnUserCenter(qq_uid){
window.location='ios:mamabbs_user:'+qq_uid;
}
function chooseLei(id,tag_id,th){
$("#menUl").find("li").removeClass("leiOn");
$(th).addClass("leiOn");
//同步修改另一个导航
touchBar(id,tag_id,'no',1);
menClose();
}
function touchBar(id,tag_id_n,th,type){
$("#ulBar").find("li").removeClass("wlBarOn");
if(type){
$("#c_"+id).addClass("wlBarOn");
}else{
$(th).addClass("wlBarOn");
}
$("#redLine").removeClass('rb1 rb2 rb3 rb4 rb5 rb6 rb7 rb8 rb9 rb10 rb11 rb12 rb13 rb14 rb15 rb16');
$("#redLine").addClass("rb"+id);
//同步修改另一个导航
$("#menUl").find("li").removeClass("leiOn");
$("#d_"+id).addClass("leiOn");
page = 1;
tag_id = tag_id_n;
isSending = false;
getWinner(tag_id_n);
}
/*
function getFocus(th,to_uid){
var num = $(th).prev().children("span").text();
if($(th).hasClass("butt2")){
$(th).removeClass("butt2").text(" 关注");
$.get("http://www.****baby_query.php?method=deleteRelate&qq_id="+uid+"&relate="+to_uid);
$(th).prev().children("span").text(parseInt(num)-1);
}else {
$(th).addClass("butt2").text("取消关注");
$.get("http://www.*******baby_query.php?method=Relate&qq_id=" +uid+"&relate="+to_uid);
$(th).prev().children("span").text(parseInt(num)+1);
}
event.stopPropagation();
}
*/
function menClose(){
$(".meng").fadeOut();
$("#menUl").addClass("menclose");
}
function showMore(){
$(".meng").fadeIn();
$("#menUl").removeClass("menclose");
}
$(function(){
getWinner(tag_id);
});
function go_page(id) {
var qq_id="<?php echo $qq_id?>";
if(qq_id == 12974368){
window.location.href='article_detail.php?id='+id+"&qq_id="+qq_id+"&action=goto_box"+"&time="+new Date().getTime();
}else {
window.location.href='article_detail.php?id='+id+"&qq_id="+qq_id+"&action=goto_box"+"&time="+new Date().getTime();
}
}
function darenList(){
window.location.href='writer_list.php?action=goto_box';
}
function dianzhan(id,context){
var qq_id='<?php echo $qq_id ?>';
qq_id=parseInt(qq_id);
//换图标,更新数据
var zan=$(context).hasClass("on");
var guanzhu = $(context).find(".num").text();
guanzhu=parseInt(guanzhu);
if(zan){
//alert("已经赞过啦");
return false;
}else {
$(context).addClass("on");
$(context).find(".num").text(guanzhu+1);
}
//更新到数据库中
if(qq_id>0){
$.getJSON("sub/baby_query.php",{method:"update_app_zan",user_id:qq_id,cms_id:id,rnd:new Date().getTime()},function (data) {
//alert(JSON.stringify(data))
})
}
}
function getWinner(tag_id){
var qq_id='<?php echo $qq_id ?>';
qq_id=parseInt(qq_id);
if(isSending){
return false;
}
isSending=true;
$.ajax({
type: "get",
url: "sub/baby_query.php",
data: {method:"getCms_list_page_new",page:page,qq_id:qq_id,tag_id:tag_id,rnd:new Date().getTime()},
dataType:"json",
error: function(){
alert("亲，网络超时啦~请稍后再试");
isSending=false;
},
timeout: 20000,
beforesend: function(){
isSending=true;
},
success: function(data){
$("#more").hide();
if(data['ret']==1){
if(tag_id == o_tag_id){
$(".wall").append(data['data']);
page++;
}else{
$(".wall").html(data['data']);
o_tag_id = tag_id;
page++;
}
isSending=false;
}else {
alert("亲，没有啦~")
page=-1;
}
$('.wall').jaliswall({ item: '.article' });
}
});
}
$(window).scroll(function(){
if(page < 0){
return false;
}
var h=$(document).height();
var h2=$(window).height();
var s=$(window).scrollTop();
var l=h-h2-s;
if(l < 300 ){
$("#more").show();
getWinner(tag_id);
}
});
</script>
</body>
</html>