【实训项目】“在校园”APP-大学校园周边服务搜索平台-阿里云开发者社区

一、项目摘要

1、市场背景

随着中国互联网用户群的日益庞大，互联网产业正扮演着市场经济的重要角色。与此同时，信息时代的来临彻底改变了人们传统的通信手段。从寄信到打电话，从打电话到通话手机，从通话手机到能获取大信息量的智能手机，人们获取信息的主要手段发生了质的变化。人们不会仅仅满足于手机只有通话与发短信的功能，而更多是把手机当成接受讯息的工具，了解时事的工具，建立社交网络的工具，便利生活的工具，游戏娱乐的工具。而大学生对于各种信息平台的接受度和依赖度普遍非常强，但是市面上的生活服务类应用软件鱼龙混杂，针对大学生的需求，以大学生的利益为基本出发点提供信息方便大学生的学习生活的应用软件还

少之又少。于是针对大学生群体的校园搜索平台也孕育而生了。

2、产品简介

校园搜索平台是一个，针对在校大学生，聚合大学周边衣食住行等信息，分类集中发布，方便大学生学习生活的应用软件。是为了服务大学新生消费者，为大学新生提供信息，方便同学们查询。

二、项目内容

1、生活指南

周边饮食：学校食堂的特有招牌菜，供应窗口，供应时间段，价格、学校周边餐馆的招牌菜，特色菜，新款菜系，人均消费，点菜攻略，学长学姐推荐指数，餐馆优惠券，校内外外卖店电话，菜单，餐点饮料搭配套餐；休闲购物：周边商圈不同档次商场，超市，书店，饮品店等的分布，交通路线、商场的特色品牌，换季折扣信息，同城活动、特色餐馆，特色酒店，团购信息；校内生活信:停水，停电，宿舍检查，社团活动，晚会举办等信息发布。

2、学习指南

选课指南，优秀课程推荐，选课攻略，选修学分搭配攻略四六级，计算机，司考，国考等专业考试备考指南，资料分享，学习班报名，本校，周边院校，图书馆的讲座指南，考研占座，资料团购，购买往届同学的学习笔记，学校补考，预修，交换生等信息发布。

3、游玩指南

周边景点旅游攻略、同学聚会，日租房，器械出租等。

4、其他

报名驾校考试、各局开各种证明的流程等。

三、项目实现

联合周边商户，服务同学联合学校周边的一系列配套设施，饭店、旅店、商铺等，为其在APP里提供详细信息和广告，使其加盟大学生校园搜索平台，周边商户可在平台里提供电子优惠券功能、团购功能、二维码功能吸引目标用户。与学校联合，校园信息和新生作为重点，学校资讯提供方面肯定要和学校有一定合作才能提供相应的信息，可与学校谈妥把学校的日常信息、介绍放进平台内。与学校合作对于刚进校的新生来做推广，把其加进开学教育内容，对大一新生做全面的推广，在学校醒目地方贴该平台应用的二维码让学生们下载，并在校内网上做宣传。之后与多个学校合作，推广到其他高校组织。

四、产品目标

扩大用户群

提高用户活跃度

改进产品体验

找到商业伙伴，扩大营收

五、创新与优势

和其他服务类平台不同的是：校园搜索平台针对的是在校大学生，对消费者进行了细分，同时平台发布的所有内容，是结合同学们的生活体验，由专门的资料搜集整理人员进行搜集整理筛选确认之后再发布的，所有的信息发布都是以方便大学生生活为基本出发点。

六、模式

“大学生校内搜索平台”的主要盈利手段以商家付费、销售广告来进行，其中广告是最基本的平台盈利模式。OCO商业模式用户线上消费＋线下体验，线上线下相结合，使用户体验更加方便。

七、作品展示

八、PPT展示

九、代码展示

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
</head>
<body>
    <div id="wrap">
        <div id="main"> 
            <label class="con">Hello APP!</label><br><br>
      <div id='sys-info' style="text-align:left;margin:10px;border:1px;"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
    apiready = function(){
    var ver = api.version;
    var sType = api.systemType;
    var sVer = api.systemVersion;
    var id = api.deviceId;
    var model = api.deviceModel;
    var name = api.deviceName;
    var cType = api.connectionType;
    var wgtParam = api.wgtParam || '';
    if(wgtParam){
      wgtParam = JSON.stringify(wgtParam);
    }
    var pageParam = api.pageParam || '';
    if(pageParam){
      pageParam = JSON.stringify(pageParam);
    }
    var appParam = api.appParam || '';
    if(appParam){
      appParam = JSON.stringify(appParam);
    }
    var wgtRootDir = api.wgtRootDir;
    var winName = api.winName;
    var winWidth = api.winWidth;
    var winHeight = api.winHeight;
    var frameName = api.frameName||'';
    var frameWidth = api.frameWidth||'';
    var frameHeight = api.frameHeight||'';
    var str = '<ul>';
    str += '<li>版本信息: '+ ver +'</li>';
    str += '<li>系统类型: '+ sType +'</li>';
    str += '<li>系统版本: '+ sVer +'</li>';
    str += '<li>设备标识: '+ id +'</li>';
    str += '<li>设备型号: '+ model +'</li>';
    str += '<li>设备名称: '+ name +'</li>';
    str += '<li>网络状态: '+ cType +'</li>';
    str += '<li>根目录: '+ wgtRootDir +'</li>';
    str += '<li>主窗口名字: '+ winName +'</li>';
    str += '<li>主窗口宽度: '+ winWidth +'</li>';
    str += '<li>主窗口高度: '+ winHeight +'</li>';
    str += '<li>子窗口名字: '+ frameName +'</li>';
    str += '<li>子窗口宽度: '+ frameWidth +'</li>';
    str += '<li>子窗口高度: '+ frameHeight +'</li>';
    str += '</ul>';
    $api.byId('sys-info').innerHTML = str;
    }
</script>
</html>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
    #main{
        padding: 0;
    }
/*导航栏4个按钮*/
    #nav_top{
        padding-top: 130px;
        margin: 0 0.6em 1em 0.6em;
    }
    #nav_top .nav_top_list{
        background-color: #EEEEF0;
        overflow: hidden;
    }
    #nav_top .nav_top_li{
        background-color: #EEEEF0;
        border-radius: 3px;
        float: left;
        width: 25%;
    }
    #nav_top .nav_top_li:active,#nav_top .nav_top_li.tap-active{
        background-color: #999999;
    }
    #nav_top .text{
        float: left;
        text-indent: 6px;
        color: #58616D;
        font-size: 0.75em;
        line-height: 2em;
    }
    #nav_top .nav_top_li .icon{
        float: left;
        margin-left: 7px;
        width: 1.5em;
        height: 1.5em;
    }
    #nav_top .score .icon{
        background: url(../../res/img/index_icon_score.png) center center no-repeat;
        background-size: 100% 100%;
    }
    #nav_top .recharge .icon{
        background: url(../../res/img/index_icon_recharge.png) center center no-repeat;
        background-size: 100% 100%;
    }
    #nav_top .lottery .icon{
        background: url(../../res/img/index_icon_lottery.png) center center no-repeat;
        background-size: 100% 100%;
    }
    #nav_top .ju .icon{
        background: url(../../res/img/index_icon_ju.png) center center no-repeat;
        background-size: 100% 100%;
    }
/*导航栏4个按钮 end*/
/* home页具体内容 */
    .headlines{
        width: 100%;
        padding-top: 1em;
        background-color: #FFFFFF;
    }
    .container .title{
        text-indent: 13px;
        color: #58616D;
        width: 100%;
        display: block;
    }
    .container .brief{
        text-indent: 13px;
        font-size: 0.7em;
        color: #BDBDBD;
        width: 100%;
        margin: 6px 0 3px 0;
        display: block;
    }
    .headlines img{
        width: 100%;
        display: block;
    }
    .brand{
        background-color: #FFF;
    }
    .brand:after{
        clear: both;
        content: '';
        display: block;
    }
    .brand .brand_left{
        float: left;
        width: 46%;
        padding-top: 1em;
    }
    .brand .brand_left img{
        width: 100%;
        display: block;
    }
    .brand .brand_right{
        float: left;
        width: 54%;
        padding-top: 1em;
    }
    .brand .brand_right .title{
        text-indent: 0;
        width: 100%;
        display: block;
    }
    .brand .brand_right .brief{
        text-indent: 0;
        width: 100%;
        color: #58616D;
        display: block;
    }
    .brand .brand_right .img_box{
        width: 100%;
        margin-top: 20px;
    }
    .brand .brand_right .img_box:after{
        content: '';
        display: block;
        clear: both;
    }
    .brand .brand_right .img_box img{
        width: 46%;
        float: left;
        margin: 2px;
    }
    .count_down{
        background-color: #FFF;
        margin-top: 0.75em;
        margin-bottom: 0.75em;
    }
    .count_down:after{
        content: '';
        display: block;
        clear: both;
    }
    .count_down .left{
        float: left;
        width: 33%;
        padding-top: 1em;
    }
    .count_down .center{
        float: left;
        width: 33%;
    }
    .count_down .center img{
        width: 100%;
        display: block;
    }
    .count_down .right{
        float: left;
        width: 33%;
        padding-top: 1.5em;
    }
    .count_down .right .title{
        font-size: 0.7em;
        color: #58616D;
        display: block;
    }
    #counting_box{
        padding-left: 13px;
    }
    #counting_box li{
        float: left;
        font-size: 0.7em;
    }
    #counting_box .t{
        background-color: #333333;
        border-radius: 2px;
        color: #FFF;
        width: 0.75em;
        height: 1.3em;
        line-height: 1.4em;
        text-align: center;
        margin-right: 1px;
        text-decoration: line-through;
    }
/*会场*/
    .venue{
        width: 100%;
        padding-top: 1em;
        background-color: #FFFFFF;
    }
    .venue img{
        width: 100%;
        display: block;
    }
    .venue_big_box{
        width: 100%;
        padding-bottom: 1em;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .venue_big_inner{
    }
    .venue_big{
        padding-top: 1em;
        background-color: #FFFFFF;
    }
    .venue_big.v1{
        margin-left: 0;
    }
    .venue_big img{
        width: 100%;
        display: block;
    }
/*会场end*/
/*中间大广告*/
    .big_ads{
        margin-top: 0.75em;
        margin-bottom: 0.75em;
    }
    .big_ads.last{
        margin-top: 0;
    }
/*中间大广告end*/
/*行业精选*/
    .industry_select{
    }
    .industry{
        background-color: #FFF;
        margin-bottom: 0.75em;
    }
    .reload_header{
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    .reload_header .title{
        float: left;
        width: auto;
    }
    .reload_header .reload{
        float: right;
        color: #BDBDBD;
        border-radius: 3px;
        text-align: center;
        width: 5em;
        font-size: 0.8em;
        height: 1.5em;
        line-height: 1.4em;
    }
    .reload_header .reload .reload_icon{
        width: 1em;
        height: 1em;
        display: inline-block;
        background: url(../../res/img/tm_home_refresh_small_normal.png) center center no-repeat;
        background-size: 100% 100%;
        vertical-align: baseline;
    }
    .reload_header .reload:active,.reload_header .reload.tap-active{
        background-color: #666666;
    }
    .reload_header .reload:active .reload_icon,.reload_header .reload.tap-active .reload_icon{
        background: url(../../res/img/tm_home_refresh_small_press.png) center center no-repeat;
        background-size: 100% 100%;
    }
    .industry_left{
        padding-top: 1em;
        width: 50%;
        float: left;
    }
    .industry_right{
        width: 50%;
        float: left;
    }
    .industry_right img{
        width: 100%;
        display: block;
    }
/*行业精选end*/
/* 更多惊喜 */
    .more{
    }
    .more_unit{
        background-color: #FFF;
        margin-bottom: 0.75em;
    }
    .more_unit .img_box{
        margin: 0.75em auto;
    }
    .more_unit img{
        width: 100%;
        display: block;
    }
    .more_unit .price{
        text-indent: 0.75em;
        color: #FF4450;
        margin-bottom: 8px;
    }
/*更多惊喜 end*/
/* home页具体内容 end */
    </style>
</head>
<body>
    <div id="wrap">
        <div id="main"> 
            <!-- 轮播图 -->
            <div id='slider' class='swipe'>
                <div class='swipe-wrap'>
                    <div class="swipe-box" tapmode="tap-active" data-url="http://h5.m.taobao.com/channel/act/other/newbook.php" data-title="新书" onclick="toDetail(this);">
                        <img src="../../image/002.png" alt="全球知名大牌特卖汇">
                    </div>
                    <div class="swipe-box" tapmode="tap-active" data-url="http://h5.m.taobao.com/channel/act/other/newbook.php" data-title="新书" onclick="toDetail(this);">
                        <img src="../../image/003.jpg" alt="君御灯饰特惠日！">
                    </div>
                    <div class="swipe-box" tapmode="tap-active" data-url="http://h5.m.taobao.com/channel/act/other/newbook.php" data-title="新书" onclick="toDetail(this);">
                        <img src="../../image/004.jpg" alt="宇宙最萌面膜专场">
                    </div>
                </div>
                <div id="title-box">
                    <!-- <span id="title-box-text">
                        一周电影推荐《移动迷宫》
                    </span> -->
                    <ul id="title-box-ul">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <!-- 轮播图 end -->
            <!-- 上方导航栏 -->
            <div id="nav_top">
                <ul class="nav_top_list">
                    <li class="nav_top_li score" tapmode="tap-active" data-url="http://ju.taobao.com/m/jusp/juhuasuantm/mtp.htm" data-title="聚划算" onclick="toDetail(this);">
                        <i class="icon"></i>
                        <span class="text">领积分</span>
                    </li>
                    <li class="nav_top_li recharge" tapmode="tap-active" data-url="http://ju.taobao.com/m/jusp/juhuasuantm/mtp.htm" data-title="聚划算" onclick="toDetail(this);">
                        <i class="icon"></i>
                        <span class="text">充值</span>
                    </li>
                    <li class="nav_top_li lottery" tapmode="tap-active" data-url="http://ju.taobao.com/m/jusp/juhuasuantm/mtp.htm" data-title="聚划算" onclick="toDetail(this);">
                        <i class="icon"></i>
                        <span class="text">彩票</span>
                    </li>
                    <li class="nav_top_li ju" tapmode="tap-active" data-url="http://ju.taobao.com/m/jusp/juhuasuantm/mtp.htm" data-title="聚划算" onclick="toDetail(this);">
                        <i class="icon"></i>
                        <span class="text">聚划算</span>
                    </li>
                </ul>
            </div>
            <!-- 上方导航栏 end-->
            <!-- 下方详情 -->
            <!--<div class="container">-->
                <!--<div class="headlines sp1_3" tapmode="tap-active" data-url="http://m.tmall.com/channel/act/315/tmall-headlines_2014/11/19.php" data-title="天猫头条" onclick="toDetail(this);">
                    <span class="title">天猫头条</span>
                    <span class="brief">娇俏女</span>
                    <img src="../../image/index_img_headlines.png" alt="">
                </div>
                <div class="brand sp2_3">
                    <div class="brand_left" tapmode="tap-active" data-url="http://brand.tmall.com/mobilestreet/index.htm" data-title="品牌街" onclick="toDetail(this);">
                        <span class="title">品牌街</span>
                        <span class="brief">怀念书写的乐趣</span>
                        <img src="../../image/index_img_brand.png" alt="">
                    </div>
                    <div class="brand_right">
                        <span class="title">&nbsp;</span>
                        <span class="brief">我关注的才是大牌</span>
                        <div class="img_box">
                            <img src="../../image/index_brand_logo_1.png" alt="" tapmode="tap-active" data-url="http://jeanswest.m.tmall.com" data-title="真维斯" onclick="toDetail(this);">
                            <img src="../../image/index_brand_logo_2.png" alt="" tapmode="tap-active" data-url="http://cherry.m.tmall.com" data-title="cherry" onclick="toDetail(this);">
                            <img src="../../image/index_brand_logo_3.png" alt="" tapmode="tap-active" data-url="http://puma.m.tmall.com" data-title="puma" onclick="toDetail(this);">
                            <img src="../../image/index_brand_logo_4.png" alt="" tapmode="tap-active" data-url="http://playboy.m.tmall.com" data-title="playboy" onclick="toDetail(this);">
                        </div>
                    </div>                  
                </div>
                <div class="count_down sp1" tapmode="tap-active" data-url="http://page.m.tmall.com/myy/myy_cjy.html" data-title="喵一眼" onclick="toDetail(this);">
                    <div class="left">
                        <span class="title">喵一眼</span>
                        <span class="brief">精选商品限时抢购</span>
                        <ul id="counting_box" class="clearfix">
                            <li class="h1 t">0</li>
                            <li class="h2 t">0</li>
                            <li class="colon">:</li>
                            <li class="m1 t">2</li>
                            <li class="m2 t">5</li>
                            <li class="colon">:</li>
                            <li class="s1 t">0</li>
                            <li class="s2 t">0</li>
                        </ul>
                    </div>
                    <div class="center">
                        <img src="../../image/home_count_down.png" alt="">
                    </div>
                    <div class="right">
                        <span class="title">精品大量涌入</span>
                        <span class="brief">24小时整点更新</span>
                    </div>
                </div>
                <div class="venue_big_box sp1">
                    <div class="venue_big_inner clearfix">
                        <div class="venue_big sp1_3_big v1" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                            <span class="title">我的衣橱</span>
                            <span class="brief">私人时尚衣橱</span>
                            <img src="../../image/index_img_p5.png" alt="">
                        </div>
                        <div class="venue_big sp1_3_big" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                            <span class="title">专属试用</span>
                            <span class="brief">只属于你的试用</span>
                            <img src="../../image/index_img_p6.png" alt="">
                        </div>
                        <div class="venue_big sp1_3_big" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                            <span class="title">穿戴Style</span>
                            <span class="brief">我的搭配经</span>
                            <img src="../../image/index_img_p7.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="venue sp1_3" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                    <span class="title">建材会场</span>
                    <span class="brief">3年质保</span>
                    <img src="../../image/index_img_p1.png" alt="">
                </div>
                <div class="venue sp1_3" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                    <span class="title">居家会场</span>
                    <span class="brief">我的梦想家</span>
                    <img src="../../image/index_img_p2.png" alt="">
                </div>
                <div class="venue sp1_3" tapmode="tap-active" data-title="喵鲜生" data-url="http://miao.tmall.com/go/market/miao/m.php" onclick="toDetail(this);">
                    <span class="title">喵鲜生</span>
                    <span class="brief">双11生鲜抄底</span>
                    <img src="../../image/index_img_p3.png" alt="">
                </div>
                -->
                <img src="../../image/index_img_p4.png" alt="" class="big_ads sp1" tapmode="tap-active" data-url="http://h5.m.taobao.com/channel/act/other/newbook.php" data-title="新书" onclick="toDetail(this);">
                <div class="industry_select clearfix">
                    <div class="sp1 reload_header">
                        <span class="title">行业精选</span>
                        <!-- <span class="reload">
                            <i class="reload_icon"></i>
                            换一组
                        </span> -->
                    </div>
                    <!-- 行业精选 -->
                    <!--<div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">女装</span>
                            <span class="brief">手机优先购</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/005.jpg" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">电器城</span>
                            <span class="brief">抢稀缺手机</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index_img_i2.png" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">女鞋</span>
                            <span class="brief">抢秋冬新款</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index_img_i3.png" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">男装</span>
                            <span class="brief">潮男搭配</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index_img_i4.png" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">箱包</span>
                            <span class="brief">包你满意</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index_img_i5.png" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">男鞋</span>
                            <span class="brief">英伦休闲季</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index_img_i6.png" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">美妆</span>
                            <span class="brief">免费试用</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index_img_i7.png" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">食品</span>
                            <span class="brief">每天免费吃</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index_img_i8.png" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">运动</span>
                            <span class="brief">爱运动</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index_img_i9.png" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">居家</span>
                            <span class="brief">10点秒杀</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index_img_i10.png" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">母婴</span>
                            <span class="brief">萌装过冬</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index_img_i11.png" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">汽车车品</span>
                            <span class="brief">购车享大礼</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index_img_i12.png" alt="">
                        </div>
                    </div>-->
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">吃喝玩乐</span>
                            <span class="brief">havefun</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/007.jpg" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">学习</span>
                            <span class="brief">学习</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/006.jpg" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">兼职</span>
                            <span class="brief">我的兼职</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/005.jpg" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">其他</span>
                            <span class="brief">其他</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/001.jpg" alt="">
                        </div>
                    </div>
                </div>
                <!-- 更多惊喜 -->
                <!--<div class="more clearfix">
                    <div class="sp1 reload_header">
                        <span class="title">行业精选</span>
                        <span class="reload" tapmode="tap-active" onclick="changeGroup();">
                            <i class="reload_icon"></i>
                            换一组
                        </span>
                    </div>
                    <div class="more_unit sp1_2" tapmode="tap-active" data-url="http://detail.m.tmall.com/item.htm?spm=875.7403452.20000008.2.M7uZ74&id=13570491314&abbucket=&acm=03317.1003.1.99094&uuid=jsjqEXAo_mFKjC0zy31sCAXbPnigNyV/z&abtest=&scm=1003.1.03317.ITEM_13570491314_99094&pos=2" data-title="键盘" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/index_img_m1.png" alt="">
                        </div>
                        <span class="price">￥398.0</span>
                    </div>
                    <div class="more_unit sp1_2" tapmode="tap-active" data-url="http://detail.m.tmall.com/item.htm?spm=875.7403452.20000008.13.M7uZ74&id=18826634839&abbucket=&acm=03317.1003.1.99094&uuid=OUtYF9zr_mFKjC0zy31sCAXbPnigNyV/z&abtest=&scm=1003.1.03317.ITEM_18826634839_99094&pos=3" data-title="哑铃" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/index_img_m2.png" alt="">
                        </div>
                        <span class="price">￥288.0</span>
                    </div>
                    <div class="more_unit sp1_2" tapmode="tap-active" data-url="http://detail.m.tmall.com/item.htm?spm=875.7403452.20000008.13.M7uZ74&id=18826634839&abbucket=&acm=03317.1003.1.99094&uuid=OUtYF9zr_mFKjC0zy31sCAXbPnigNyV/z&abtest=&scm=1003.1.03317.ITEM_18826634839_99094&pos=3" data-title="哑铃" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/index_img_m3.png" alt="">
                        </div>
                        <span class="price">￥95.0</span>
                    </div>
                    <div class="more_unit sp1_2" tapmode="tap-active" data-url="http://detail.m.tmall.com/item.htm?spm=875.7403452.20000008.2.M7uZ74&id=13570491314&abbucket=&acm=03317.1003.1.99094&uuid=jsjqEXAo_mFKjC0zy31sCAXbPnigNyV/z&abtest=&scm=1003.1.03317.ITEM_13570491314_99094&pos=2" data-title="键盘" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/index_img_m4.png" alt="">
                        </div>
                        <span class="price">￥148.0</span>
                    </div>
                </div>-->
                <!-- 更多惊喜 end -->
                <img src="../../image/123.jpg" alt="" class="big_ads last sp1" tapmode="tap-active" data-url="http://h5.m.taobao.com/channel/act/other/newbook.php" data-title="新书" onclick="toDetail(this);">
            </div>
            <!-- 下方详情 end -->
            <!--  -->
            <div class="standard_hor">
                <span class="title"></span>
                <span class="brief"></span>
                <img src="" alt="">
            </div>
            <!-- div.standard_per -->
            <!--  -->
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/swipe.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){
        Zepto(function($){
        // home页 样式 初始化
            var sp1_3,sp1_2,sp2_3,sp1,sp1_3_big;
            var em = parseInt(getComputedStyle(document.body,false).fontSize);
            var emW = em*3/4;
            var bodyW = $api.offset(document.body).w;
            sp1_3 = (bodyW - 4*emW)/3;
            sp1_3_big = (bodyW - 4*emW)/3 + emW;
            sp2_3 = bodyW - sp1_3 - 3*emW;
            sp1_2 = (bodyW - 3*emW)/2;
            sp1 = bodyW - 2*emW;
            $('.sp1_3').width(sp1_3);
            $('.sp1_3_big').width(sp1_3_big);
            $('.sp2_3').width(sp2_3);
            $('.sp1_2').width(sp1_2);
            $('.sp1').width(sp1);
            $('.venue_big_inner').width((sp1_3_big*3 + emW*2));
            $('.more_unit .img_box').width(sp1_2 - emW*2);
        // home页 样式 初始化 end
            var aLi = $('#title-box-ul li');
            // var act_title = $('#title-box-text');
            window.mySwipe = Swipe($api.byId('slider'),{
                auto: 3000,
                continuous: true,
                callback: function(index,elem) {
                    var i = aLi.length;
                    while (i--) {
                        aLi[i].className = '';
                    }
                    aLi[index].className = 'active';
                    // var text = $(elem).find('img').attr('alt');
                    // act_title.text(text);
                }
            });
            $('#slider .swipe-box').on('click', function(event) {
            });
            var toDouble = function(num){
                var json;
                if (num < 10) {
                    num = '0' + num;
                } else{
                    num = num + '';
                }
                json = {
                    'n1': num.charAt(0),
                    'n2': num.charAt(1)
                };
                return json;
            }
            var h1 = $('#counting_box .h1');
            var h2 = $('#counting_box .h2');
            var m1 = $('#counting_box .m1');
            var m2 = $('#counting_box .m2');
            var s1 = $('#counting_box .s1');
            var s2 = $('#counting_box .s2');
            var countDownTimer;
            var countDown = function(date){
                var  counting = (date.getTime() - (new Date().getTime()))/1000;
                // var hh = parseInt(counting/3600);
                // var mm = parseInt((counting-hh*3600)/60);
                // var ss = parseInt(counting - hh*3600 - mm*60);
                // h1.text(toDouble(parseInt(counting/3600)).n1);
                countDownTimer = setInterval(function(){
                    counting -= 1; 
                    if (counting <= 0) {
                        // 倒计时结束……
                        clearInterval(countDownTimer);
                    }
                    var hh = parseInt(counting/3600);
                    var mm = parseInt((counting-hh*3600)/60);
                    var ss = parseInt(counting - hh*3600 - mm*60);
                    // toDouble(counting);
                    h1.text(toDouble(hh).n1);
                    h2.text(toDouble(hh).n2);
                    m1.text(toDouble(mm).n1);
                    m2.text(toDouble(mm).n2);
                    s1.text(toDouble(ss).n1);
                    s2.text(toDouble(ss).n2);
                },1000)
            };
            var countDownTime = new Date();
            countDownTime.setMinutes(countDownTime.getMinutes()+25);
            countDown(countDownTime);
        });
    }
    // apiready();
</script>
</html>

【实训项目】“在校园”APP-大学校园周边服务搜索平台

一、项目摘要

1、市场背景

2、产品简介

二、项目内容

1、生活指南

2、学习指南

3、游玩指南

4、其他

三、项目实现

四、产品目标

五、创新与优势

六、模式

七、作品展示

八、PPT展示

九、代码展示

十、实训报告

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【实训项目】“在校园”APP-大学校园周边服务搜索平台

一、项目摘要

1、市场背景

2、产品简介

二、项目内容

1、生活指南

2、学习指南

3、游玩指南

4、其他

三、项目实现

四、产品目标

五、创新与优势

六、模式

七、作品展示

八、PPT展示

九、代码展示

十、实训报告

热门文章

最新文章

相关课程

相关电子书

相关实验场景