一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery1.11.3.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/public.js"></script>
</head>
<body>
<!--top-->
<div id="top">
<div class="topHead">
<div class="wrap clearfloat">
<h2>{{topData.topHead}}</h2>
<div class="topHeadCont clearfloat">
<p>{{topData.topQQ}}</p>
<div class="topHeadContW">
<!--登录前-->
<div class="topHeadInner topHeadBefor">
<a class="topLogin" href="javascript:;">{{topData.topLogin[0]}}</a> <span>|</span> <a class="topRegister" href="javascript:;">{{topData.topLogin[1]}}</a>
</div>
<!--登录后-->
<div class="topHeadInner topHeadBefore" style="display: none;">
您好！【云腾 （ID:7980046 <em class="ico1">等级：12</em>）】<span>|</span><a class="topExit" href="javascript:;">【退出】</a><span>|</span> <em class="ico2">金币：100</em> <span>|</span> <em class="ico3">银行：100</em> <span>|</span> 成长值：0
</div>
</div>
</div>
</div>
</div>
<div class="topNav">
<div class="wrap clearfloat">
<div class="logo"><a href="index.html"><img src="picture/logo.png"/></a></div>
<nav>
<ul class="clearfloat">
<li class="active"><a href="index.html">{{topData.navText[0]}}</a></li>
<li><a href="news.html">{{topData.navText[1]}}</a></li>
<li><a href="game.html">{{topData.navText[2]}}</a></li>
<li><a href="cooperation.html">{{topData.navText[3]}}</a></li>
<li><a href="gift.html">{{topData.navText[4]}}</a></li>
<li><a href="user.html">{{topData.navText[5]}}</a></li>
<li><a href="rank.html">{{topData.navText[6]}}</a></li>
</ul>
</nav>
</div>
<div class="muen">
<span class="muenX"></span>
<span class="muenY"></span>
<span class="muenZ"></span>
</div>
</div>
</div>
<!--/top-->
<!--登录、注册-->
<div class="loginWrap" id="login">
<div class="loginTan loginTanL">
<span class="loginClose"></span>
<h2>{{loginData.loginText[0]}}</h2>
<div class="loginInner">
<div class="loginInput">
<input type="text" name="" id="" value="" placeholder="账号 / 手机号"/>
</div>
</div>
<div class="loginInner">
<div class="loginInput">
<input type="password" name="" id="" value="" placeholder="请输入密码"/>
</div>
</div>
<div class="loginInner loginInnerYz clearfloat">
<div class="loginInput">
<input type="text" name="" id="" value="" placeholder="验证码"/>
</div>
<span><img src="picture/yzm_img.jpg"></span>
</div>
<div class="loginMark clearfloat">
<p><span class="chooseBtn"></span><label>{{loginData.passwordText[0]}}</label></p>
<a href="">{{loginData.passwordText[1]}}</a>
</div>
<button class="loginSure">{{loginData.loginName[0]}}</button>
<div class="loginBottom">
<a class="logoBack1" href="javascript:;">{{loginData.loginBototm[0]}}</a>
</div>
</div>
<div class="loginTan loginTanR">
<span class="loginClose"></span>
<h2>{{loginData.loginText[1]}}</h2>
<div class="loginInner">
<div class="loginInput">
<input type="text" name="" id="" value="" placeholder="手机号"/>
</div>
</div>
<div class="loginInner">
<div class="loginInput">
<input type="password" name="" id="" value="" placeholder="密码"/>
</div>
</div>
<div class="loginInner">
<div class="loginInput">
<input type="text" name="" id="" value="" placeholder="推荐人ID"/>
</div>
</div>
<div class="loginInner">
<div class="loginInput">
<input type="text" name="" id="" value="" placeholder="昵称"/>
</div>
</div>
<div class="loginInner loginInnerYz clearfloat">
<div class="loginInput">
<input type="text" name="" id="" value="" placeholder="验证码"/>
</div>
<span><img src="picture/yzm_img.jpg"></span>
</div>
<div class="loginInner loginInnerYz clearfloat">
<div class="loginInput">
<input type="text" name="" id="" value="" placeholder="短信验证码"/>
</div>
<span>{{loginData.loginYz}}</span>
</div>
<button class="loginSure">{{loginData.loginName[1]}}</button>
<div class="loginBottom">
<a class="logoBack2" href="javascript:;">{{loginData.loginBototm[1]}}</a>
</div>
</div>
</div>
<!--/登录、注册-->
<!--banner-->
<div class="banner" id="banner">
<ul class="bannerSlider">
<li><a href=""><img src="picture/banner_img.jpg"/></a></li>
<li><a href=""><img src="picture/banner_img.jpg"/></a></li>
<li><a href=""><img src="picture/banner_img.jpg"/></a></li>
</ul>
</div>
<!--/banner-->
<div class="main" id="main">
<div class="homeGame">
<div class="wrap">
<div class="homeTit">
<h2>{{ titleText[0].title }}</h2>
<p><em>{{ titleText[0].subTitle }}</em></p>
<span></span>
</div>
<div class="homeGameWrap">
<ul class="homeGameList clearfloat">
<li v-for='(item,index) in homeGame'>
<a href=""><div class="pic"><img :src="item.img"/></div></a>
<div class="homeGameBg">
<div class="homeGameBgW">
<div class="homeGameBgWrit">
<h3>{{item.title}}</h3>
<p v-html="item.text"></p>
<a href="">{{item.writ}}</a>
</div>
</div>
</div>
</li>
</ul>
<a class="moreHome" href="">{{moreText}}</a>
</div>
</div>
</div>
<div class="homeGift">
<div class="wrap">
<div class="homeTit homeTitFFF">
<h2>{{ titleText[1].title }}</h2>
<p><em>{{ titleText[1].subTitle }}</em></p>
<span></span>
</div>
<div class="homeGiftWrap">
<ul class="homeGiftList clearfloat">
<li v-for="(item,index) in homeGift">
<div class="homeGiftInner">
<div class="pic"><img :src="item.img"/></div>
<h3>{{item.title}}</h3>
<p v-html="item.text"></p>
<h4><span>{{item.num}}</span></h4>
</div>
<a href="">{{convertText}}</a>
</li>
</ul>
</div>
</div>
</div>
<div class="homeNews">
<div class="wrap clearfloat">
<div class="left homeNewsWrap">
<div class="homeNewsTit">
<em>{{titleHead[0].title}}</em>
<span>{{titleHead[0].subTitle}}</span>
</div>
<div class="homeNewsInner clearfloat">
<ul class="left">
<li class="m-list-flex" v-for="(item,index) in homeNews[0]">
<div class="time">
<span>{{item.timeNum}}</span>
<span>{{item.timeDate}}</span>
</div>
<div class="m-cell-bd">
<h3 class="single-line"><a href="">{{item.title}}</a></h3>
<p class="multi-line">{{item.text}}</p>
</div>
</li>
</ul>
<ul class="right">
<li class="m-list-flex" v-for="(item,index) in homeNews[1]">
<div class="time">
<span>{{item.timeNum}}</span>
<span>{{item.timeDate}}</span>
</div>
<div class="m-cell-bd">
<h3 class="single-line"><a href="">{{item.title}}</a></h3>
<p class="multi-line">{{item.text}}</p>
</div>
</li>
</ul>
</div>
</div>
<div class="right homeRankWrap">
<div class="homeNewsTit">
<em>{{titleHead[1].title}}</em>
<span>{{titleHead[1].subTitle}}</span>
</div>
<ul class="homeRankList">
<li class="m-list-flex clearfloat" v-for="(item,index) in homeRank">
<span v-html="item.num"></span>
<p class="m-cell-bd single-line">{{item.title}}</p>
<em>{{item.text}}</em>
</li>
</ul>
</div>
</div>
</div>
<div class="homeLink">
<div class="wrap">
<div class="homeTit homeTit0092ff">
<h2>{{ titleText[2].title }}</h2>
<p><em>{{ titleText[2].subTitle }}</em></p>
<span></span>
</div>
</div>
</div>
</div>
<div class="homeLinkBox">
<div class="wrap">
<div class="baner homeLinkWrap">
<ul class="homeLinkSlider clearfloat">
<!--<li v-for="(item,index) in homeLink">
<a href="">
<img :src="item.img"/>
</a>
</li>-->
<li><a href="http://www.bootstrapmb.com/"><img src="picture/home_link_img1.png" /></a></li>
<li><a href=""><img src="picture/home_link_img2.png"/></a></li>
<li><a href=""><img src="picture/home_link_img3.png"/></a></li>
<li><a href=""><img src="picture/home_link_img4.png"/></a></li>
<li><a href=""><img src="picture/home_link_img5.png"/></a></li>
<li><a href=""><img src="picture/home_link_img4.png"/></a></li>
<li><a href=""><img src="picture/home_link_img1.png"/></a></li>
<li><a href=""><img src="picture/home_link_img3.png"/></a></li>
<li><a href=""><img src="picture/home_link_img5.png"/></a></li>
<li><a href=""><img src="picture/home_link_img2.png"/></a></li>
</ul>
</div>
</div>
</div>
<!--footer-->
<div id="footer">
<div class="wrap clearfloat">
<div class="ewm">
<img src="picture/ewm.jpg"/>
<p>{{footerEwm}}</p>
</div>
<div class="left footerM">
<p>{{footerText[0]}}</p>
<p>{{footerText[1]}}</p>
<p>{{footerText[2]}}</p>
</div>
<div class="left">
<ul>
<li v-for='(item,index) in footerInfor'>
<span v-bind:class="'ico' + (index+1)"></span>
<em v-html="item.text"></em>
</li>
</ul>
</div>
</div>
</div>
<!--/footer-->
</body>
<script type="text/javascript">
$('.bannerSlider').bxSlider({
'auto':true,
'controls':false,
'touchEnabled':true,
'pager':true,
'speed':1000,
'pause':3000,
})
$('.homeLinkSlider').bxSlider({
'auto':true,
'controls':true,
'touchEnabled':true,
'pager':false,
'slideWidth': '218',
'minSlides': 2,
'maxSlides': 5,
'moveSlides': 2,
'speed':600,
})
</script>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
