安装包
This commit is contained in:
307
web/templates/guanwang/doudouindex.html
Normal file
307
web/templates/guanwang/doudouindex.html
Normal file
@@ -0,0 +1,307 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>智慧豆豆</title>
|
||||
<script src="yaocai/js/jquery-2.1.1.js"></script>
|
||||
<style type="text/css">
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
body {
|
||||
|
||||
font-family:"Helvetica Neue", sans-serif;
|
||||
margin:4%;
|
||||
}
|
||||
h1{
|
||||
font-size:30px;
|
||||
|
||||
text-align:center;
|
||||
margin:50px auto;
|
||||
}
|
||||
#content{
|
||||
|
||||
}
|
||||
#content article{
|
||||
background:#E6E6FA;
|
||||
width:20%;
|
||||
float:left;
|
||||
box-sizing:border-box;
|
||||
padding:2%;
|
||||
text-align:center;
|
||||
margin-bottom:25px;
|
||||
}
|
||||
#content article h1{
|
||||
font-size:36px;
|
||||
color:rgba(255,255,255,.9);
|
||||
margin:20px auto;
|
||||
}
|
||||
#content article p{
|
||||
color:rgba(255,255,255,.7);
|
||||
}
|
||||
#content article img{
|
||||
width:50%;
|
||||
}
|
||||
@media screen and (min-width: 768px) and (max-width: 979px) {
|
||||
#content article{
|
||||
width:50%;
|
||||
position:relative;
|
||||
text-align:left;
|
||||
}
|
||||
#content article img{
|
||||
width:20%;
|
||||
position:absolute;
|
||||
}
|
||||
#content article h1{
|
||||
margin:0 0 20px 30%;
|
||||
text-align:left;
|
||||
}
|
||||
#content article p{
|
||||
margin-left:30%;
|
||||
}
|
||||
#content article:nth-child(odd){
|
||||
clear:both;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
#content article{
|
||||
width:50%;
|
||||
}
|
||||
#content article img{
|
||||
width:40%;
|
||||
}
|
||||
#content article:nth-child(odd){
|
||||
clear:both;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
#content article{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#cotenttwo{
|
||||
|
||||
padding:10px 8%;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
#cotenttwo{
|
||||
padding:10px 8%;
|
||||
}
|
||||
img{
|
||||
width:calc(100% - 350px);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 979px) {
|
||||
#cotenttwo{
|
||||
padding:10px 5%;
|
||||
}
|
||||
img{
|
||||
width:50%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
#cotenttwo{
|
||||
padding:10px 20px;
|
||||
}
|
||||
img{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#slideshow{
|
||||
background:#E6E6FA;
|
||||
width:980px;
|
||||
height:450px;
|
||||
overflow:hidden;
|
||||
margin:0 auto;
|
||||
position:relative;
|
||||
}
|
||||
#slideshow ul, #slideshow ul li, #slideshow-nav{
|
||||
list-style:none;
|
||||
position:absolute;
|
||||
}
|
||||
#slideshow-nav{
|
||||
width:100%;
|
||||
bottom:20px;
|
||||
text-align:center;
|
||||
}
|
||||
#slideshow-nav span{
|
||||
display:inline-block;
|
||||
border-radius:50%;
|
||||
width:15px;
|
||||
height:15px;
|
||||
font-size:0;
|
||||
background:rgba(255,255,255,.3);
|
||||
transition:all .5s;
|
||||
-webkit-transition:all .5s;
|
||||
margin:0 7px;
|
||||
cursor:pointer;
|
||||
user-select:none; /*使圆点不能被选中*/
|
||||
-webkit-user-select:none;
|
||||
}
|
||||
#slideshow-nav span.active{
|
||||
background:#FFF;
|
||||
}
|
||||
@media screen and (max-width: 979px) {
|
||||
#slideshow, ul, li, img{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>智慧豆豆app</h2>
|
||||
<div id="slideshow">
|
||||
<ul>
|
||||
<li><img src="p1.jpg"></li>
|
||||
<li><img src="p2.jpg"></li>
|
||||
<li><img src="p3.jpg"></li>
|
||||
<li><img src="p4.jpg"></li>
|
||||
</ul>
|
||||
<div id="slideshow-nav"></div>
|
||||
</div>
|
||||
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
var duration = 3000; //每张图片的持续显示时间
|
||||
var speed = 1000; //图片切换的动画时间
|
||||
var width = $('#slideshow').width(); //获得单张图片的宽度
|
||||
var curIndex = 0; //设置当前显示图片的索引值
|
||||
var totalIndex = $('#slideshow > ul > li').length; //获得总的图片数量
|
||||
var timer; //设置一个计时变量
|
||||
$('#slideshow > ul > li').each(function(index) {
|
||||
$(this).css("left", index*width+"px"); //设置轮播图片的横向排列
|
||||
$('#slideshow-nav').append("<span>"+(index+1)+"</span>"); //在导航中添加相应的节点
|
||||
});
|
||||
$('#slideshow-nav > span').each(function(index) {
|
||||
$(this).attr("index", index); //存储每个节点的索引值
|
||||
$(this).click(function(){ //当span元素被点击时
|
||||
curIndex = $(this).attr("index")-1; //刷新当前显示图片的索引值
|
||||
clearTimeout(timer); //清除计时
|
||||
move(); //重新执行move函数以显示该图片
|
||||
});
|
||||
});
|
||||
$('#slideshow-nav > span').eq(0).addClass("active"); //设置第一个圆点为active
|
||||
var firstChild = $('#slideshow > ul > li').eq(0).clone(); //将第一张图片复制一份
|
||||
$('#slideshow > ul').append(firstChild); //将该图片添加到列表最末
|
||||
firstChild.css("left", totalIndex*width+"px"); //将复制的第一张图片显示在图片序列最右侧
|
||||
function move(){
|
||||
curIndex++; //使索引值加以1
|
||||
if(curIndex>totalIndex){ //当索引值大于图片总数时
|
||||
curIndex = 1; //表示当前应播放第2张图片
|
||||
$('#slideshow > ul').css("left", "0px"); //将图片序列重置到原点
|
||||
}
|
||||
for(var i=0; i < totalIndex; i++){
|
||||
$('#slideshow-nav > span').eq(i).removeClass("active"); //清除所有导航节点的active类
|
||||
}
|
||||
if(curIndex === totalIndex){
|
||||
$('#slideshow-nav > span').eq(0).addClass("active"); //如果当前索引值等于图片总数，则说明当前正显示第一张图片的副本，因此应激活第一个导航节点
|
||||
}else{
|
||||
$('#slideshow-nav > span').eq(curIndex).addClass("active"); //在其余情况下，则为当前导航节点添加active类
|
||||
}
|
||||
$('#slideshow > ul').animate({left:width*curIndex*-1+"px"},speed); //为图片序列创建动画
|
||||
timer = setTimeout(move,duration+speed); //设置延迟一定时间后执行move函数，延迟时间等于动画时长加上每张图片的持续显示时间
|
||||
}
|
||||
timer = setTimeout(move,duration); //设置延迟一定时间后执行move函数，延迟时间等于每张图片的持续显示时间
|
||||
$('#slideshow').css("height", $('img').height()+"px");
|
||||
$(window).resize(function() {
|
||||
width = $('#slideshow').width();
|
||||
$('#slideshow').css("height", $('img').height()+"px");
|
||||
$('#slideshow > ul > li').each(function(index) {
|
||||
$(this).css("left", index*width+"px"); //设置轮播图片的横向排列
|
||||
});
|
||||
$('#slideshow > ul').stop().animate({left:width*curIndex*-1+"px"},0);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section id="cotenttwo">
|
||||
<article>
|
||||
<h1>功能模块简介</h1>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section id="content">
|
||||
<article>
|
||||
<img src="pic_two.jpg" alt="首页">
|
||||
<h1>首页</h1>
|
||||
<p>平台精彩推荐</p>
|
||||
</article>
|
||||
<article>
|
||||
<img src="pic_three.jpg" alt="发现">
|
||||
<h1>发现</h1>
|
||||
<p>线上可以实时互动的</p>
|
||||
</article>
|
||||
<article>
|
||||
<img src="pic_five.jpg" alt="购物车">
|
||||
<h1>购物车</h1>
|
||||
<p>便民购物</p>
|
||||
</article>
|
||||
<article>
|
||||
<img src="pic_four.jpg" alt="物业">
|
||||
<h1>物业</h1>
|
||||
<p>生活缴费</p>
|
||||
</article>
|
||||
<article>
|
||||
<img src="pic_one.jpg" alt="我的">
|
||||
<h1>我的</h1>
|
||||
<p>订单查询</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="cotenttwo">
|
||||
<article>
|
||||
<h1>应用介绍</h1>
|
||||
|
||||
<h1>豆豆智慧社区app是一款量身定制的小区管理软件，可以方便物业进行移动化的管理，实时给大家的生活保驾护航，有任何的需求，都可以直接线上进行反应，提供的服务非常的完善，线上也是可以实时互动的，让大家享受更是便利的社区生活
|
||||
，可以提供物业管理，商城，智能门禁和电梯等系列服务。
|
||||
</h1>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="cotenttwo">
|
||||
<article>
|
||||
<h1>下载地址(android)</h1>
|
||||
|
||||
|
||||
<div style="text-align: center;">
|
||||
<p>https://www.pgyer.com/zcsd</p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<img style="text-align: center;" src="zcsd.png">
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
<script src="yaocai/js/index.js"></script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user