lixin-web
Version:
vue and bootstrap
217 lines (201 loc) • 7.56 kB
HTML
<html lang="zh-CN" >
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title>电子游艺</title>
<!-- 引用样式文件开始 -->
<link rel="stylesheet" type="text/css" href="/css/common-all-plugin.css">
<link rel="stylesheet" type="text/css" href="/css/common.css">
<link rel="stylesheet" type="text/css" href="/css/game-recreation.css">
<!-- 引用样式文件结束 -->
<!-- 引用脚本文件开始-->
<script type="text/javascript" src="/config.js"></script>
<!-- 引用脚本文件结束-->
</head>
<body>
<div class="bar"></div><script type="text/javascript">load("bar"); </script>
<div class="menu01"></div><script type="text/javascript">load("menu01"); </script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 图片切换 -->
<div class="carousel-inner" role="listbox" style="height:250px;">
<div class="item active">
<div style="background:url(img/game_recreation/sportJj.jpg) center; height:250px;"> </div>
<div class="carousel-caption">
</div>
</div>
</div>
</div>
<div class="recreation-main">
<div id="LaoHuJi" class="container" v-show="switch" style="display:none">
<div id="ShaiXuan">
<div class="col-md-8" v-for="(key01,val01) in ShaiXuanData">
<label>{{val01.name}}</label> <span v-for="(key02,val02) in val01.content" @click="ShaiXuan(val02)" class="{{tag==val02.tag?'select':''}}"> {{val02.name}} </span>
</div>
<div id="SouSuo" class="col-md-4">
<div class="input-group">
<input type="text" placeholder="搜索" class="form-control" v-model="searchData" @keyup.enter="search()">
<span class="input-group-addon glyphicon glyphicon-search" @click="search()"></span>
</div>
</div>
</div>
<div id="LieBiao">
<div v-for="el in LieBiao" v-show="!el.hide" class="col-sm-3">
<div class="yuanlai">
<div class="img">
<img alt="" src="/img/LaoHuJi/{{el.gameCode}}.jpg" height="110" width="185">
</div>
<span class="begin-one">
<a href="/game-service.html?type=1&gameCode={{el.gameCode}}&flag=true" v-show="el.freePlay!=-1" target="_blank">免费试玩</a>
<a href="/game-service.html?type=1&gameCode={{el.gameCode}}&flag=false" v-bind:class="{ 'top1': el.freePlay==-1}" target="_blank">开始游戏</a>
</span>
</div>
<div class="tiyujinji_lao">
<p class="game-name">
{{el.gameName}}
<i class="sc heart fa {{el.ShouCang?'fa-heart':'fa-heart-o'}}" title="点击可收藏游戏" @click="ShouCang(el)">
<span v-show="!el.ShouCang">收藏</span><span v-show="el.ShouCang">已收藏</span></i>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bot" ></div><script type="text/javascript">$(".bot").load("/include-bot.html"); </script>
<script >include('/common-all-plugin-01.js');</script>
<script >include('/common-all-plugin-02.js');</script><script >include('/common-all-plugin-03.js');</script>
<script >include('/app.js');</script>
<script >include('/common-all.js');</script>
</body>
</html>
<script>
$('.recreation-main-con li').hover(function(){
$(this).find('.min-1').toggleClass("active3")
});
var index=0;
$('.recreation-main-nav1-1 a').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var index = $(this).index();
$('.recreation-main .section').eq(index).show().siblings('.section').hide();
}).eq(0).click()
// function openGame(gameCode,ShiWan) {
// Will.ajax({platformCode:'PT'},'/api/game/get-login-url',function(data){
// window.open(data+'&gameCode='+gameCode+'&tryModel='+ShiWan);
// });
// }
var LaoHuJiVue = new Vue({
el:'#LaoHuJi',
data:{
LieBiao:[],ShaiXuanData:{
"YXLB01":{
name:"游戏类别",
content:{
'all':{name:"全部",tag:0,code:'all'},
'slot':{name:"老虎机",tag:8,code:'slot'},
'table_card':{name:"桌游",tag:32,code:'table_card'},
'scratch_card':{name:"刮刮乐",tag:9,code:'scratch_card'},
'arcade':{name:"街机游戏",tag:10,code:'arcade'},
'live_game':{name:"真人游戏",tag:35,code:'live_game'},
'video_poker':{name:"视频扑克",tag:40,code:'video_poker'},
'sc':{name:"收藏",tag:88,codes:[],code:'sc'}
}
}
},searchData:"",tag:0,switch:1
},created:function(){
var that = this;
var ShouCang = localStorage.LaoHuJi?JSON.parse(localStorage.LaoHuJi):[];
this.ShaiXuanData.YXLB01.content.sc.codes = ShouCang;
Will.ajax({},'/api/game/get-game-list?platformCode=PT', function(data){
Lazy(data.list).each(function(el01){
el01.hide = 0;
el01.ShouCang = 0;
if(Lazy(ShouCang).contains(el01.gameCode)){
el01.ShouCang = 1;
}
// if(!el01.freePlay==-1){
// el01.free=0;
// }
});
that.LieBiao=data.list;
});
},watch:{
'ShaiXuanData.YXLB01.content.sc.codes':function(){
var that = this;
localStorage.LaoHuJi = JSON.stringify(this.ShaiXuanData.YXLB01.content.sc.codes);
Lazy(that.LieBiao).each(function(el01){
el01.ShouCang = 0;
if(Lazy(that.ShaiXuanData.YXLB01.content.sc.codes).contains(el01.gameCode)){
el01.ShouCang = 1;
}
});
}
},methods:{
ShaiXuan:function(val){
this.tag = val.tag;
if(val.tag==0){
Lazy(this.LieBiao).each(function(el01){
el01.hide = 0;
});
return;
};
Lazy(this.LieBiao).each(function(el01){
el01.hide = 1;
});
if(val.tag==88){
Lazy(this.LieBiao).each(function(el01){
if(Lazy(val.codes).contains(el01.gameCode)){
el01.hide = 0;
}
});
return;
}else{
Lazy(this.LieBiao).each(function(el01){
if( val.code == el01.gameTypeCode){
el01.hide = 0;
}
});
}
},search:function(){
var that = this;
var searchStr = that.searchData.toLowerCase();
Lazy(this.LieBiao).each(function(el01){
el01.hide = 1;
});
Lazy(this.LieBiao).each(function(el01){
if((el01.gameName.toLowerCase()).indexOf(searchStr)>=0 ||(el01.gameEnName.toLowerCase(searchStr)).indexOf(that.searchData)>=0 ) {
el01.hide = 0;
}
});
},ShouCang:function(el){
var codes = this.ShaiXuanData.YXLB01.content.sc.codes;
if(el.ShouCang==1){
codes.$remove(el.gameCode);
if(this.tag==88) el.hide=1;
}else{
codes.push(el.gameCode);
}
}
}
});
function gotoTop(min_height){
var gotoTop_html = '<div id="gotoTop"><div class="huojian"><i class="glyphicon glyphicon-eject"></i></div>返回顶部</div>';
$("body").append(gotoTop_html);
$("#gotoTop").click(
function(){$('html,body').animate({scrollTop:0},200);
}).hover(
function(){$(this).addClass("hover");},
function(){$(this).removeClass("hover");
});
min_height ? min_height = min_height : min_height = 600;
$(window).scroll(function(){
var s = $(window).scrollTop();
if( s > min_height){
$("#gotoTop").fadeIn(100);
}else{
$("#gotoTop").fadeOut(200);
};
});
};
gotoTop();
</script>