【研修プロジェクト】「On Campus」APP ~大学キャンパス周辺サービス検索プラットフォーム~

1.プロジェクトの概要

1. 市場背景

中国におけるインターネットユーザーの増加に伴い、インターネット産業は市場経済において重要な役割を果たしています。同時に、情報時代の到来により、人々の伝統的なコミュニケーション手段は完全に変化しました。手紙から電話へ、電話から携帯電話へ、通話携帯から多くの情報が得られるスマートフォンへ、人々が情報を得る主な手段は質的に変化してきました。人々は携帯電話の通話やテキストメッセージの機能だけでなく、情報を受け取り、時事問題を理解し、ソーシャルネットワークを構築し、生活を円滑化し、ゲームをするためのツールとして満足するでしょう。大学生は一般的にさまざまな情報プラットフォームを強く受け入れ、依存していますが、市場には複合生活サービスアプリケーションソフトウェアがあり、大学生のニーズに応じて、大学生の興味は、情報を提供するための基本的な出発点であり、情報プラットフォームを促進します。大学生の勉強と生活 戻る

非常に少ないです。そこで大学生向けのキャンパス検索プラットフォームも誕生しました。

2. 製品紹介

  キャンパス検索プラットフォームは、大学生の学習や生活を円滑にするために、大学周辺の生活必需品、食料、住居、交通情報などを集約し、一元的に公開する大学生向けアプリケーションソフトです。大学の新入生の消費者にサービスを提供し、大学の新入生に情報を提供し、学生の問い合わせを容易にすることを目的としています。

2. プロジェクト内容

1. 生活ガイド

   周囲の食べ物:学食の個性的な看板料理、供給窓口、供給時期、価格、学校周辺のレストランの看板料理、名物料理、新しい料理、一人当たりの消費量、注文戦略、先輩・姉妹のおすすめ指数、レストランのクーポン、キャンパス内のテイクアウト店の電話番号、メニュー、食事と飲み物のマッチングパッケージ、レジャーショッピング:周辺ビジネス街のショッピングモール、スーパーマーケット、書店、飲料店などのさまざまなグレードの分布、動線、ショッピングの特徴的なブランドショッピングモール、季節の割引情報、市内アクティビティ、特徴あるレストラン、注目のホテル、共同購入情報、キャンパスライフレター:断水、停電、寮点検、クラブ活動、納涼会などの情報公開。

2. 学習ガイド

   コース選択ガイド、優良コース推奨、コース選択戦略、CET-4およびCET-6の選択単位マッチング戦略、コンピュータ、学科試験、国家試験、その他専門試験対策ガイド、データ共有、履修登録、学校の講義ガイド、周辺の大学、図書館、大学院入試の空席状況、教材の団体購入、過去生の学習ノートの購入、学校の再試験、事前学習、交換留学生などの情報公開。

3. プレイガイド

  周辺観光スポットの観光ガイド、同窓会、日替わり賃貸住宅、備品レンタルなど。

4. その他

自動車教習所の受験登録、各局による各種証明書の発行手続きなど。

3. プロジェクトの実現

周囲の商店と協力して学生にサービスを提供します学校周辺の一連の支援施設、レストラン、ホテル、ショップなどと協力し、APPで詳細情報と広告を提供し、大学生のキャンパス検索プラットフォームに参加できるようにします。および周辺の加盟店は、プラットフォーム上で電子割引を提供できます。 クーポン機能、共同購入機能、QR コード機能がターゲット ユーザーを引き付けます。キャンパス情報や新入生情報を中心に学校と連携する 学校情報提供に関しては、学校との連携が必要であり、学校と交渉して学校の日々の情報や紹介をプラットフォームに掲載することも可能。学校と連携し、入学したばかりの新入生のプロモーションを行い、学期初めの教育内容に加え、新入生向けの総合的なプロモーションを行う プラットフォームアプリのQRコードを校内の目立つ場所に掲示生徒がダウンロードして学校に表示し、オンラインで宣伝できるようにします。その後、多くの学校と協力し、他の大学組織に昇格しました。

4. 製品の目的

ユーザーベースを拡大する

ユーザーアクティビティを改善する

製品エクスペリエンスの向上

ビジネスパートナーを見つけて収益を拡大する

5. 革新性と利点

他のサービスプラットフォームとの違いは、キャンパス検索プラットフォームが大学生を対象としており、消費者が細分化されていると同時に、プラットフォームが公開するすべてのコンテンツが学生の人生経験に基づいており、学生によって行われている点です。専門のデータコレクターが収集・整理・審査・確認を行った上で公開しており、すべての情報公開は大学生の生活の利便性を考慮したものです。

6. モード

「大学生向けキャンパス検索プラットフォーム」の主な収益手段は、加盟店への支払いと広告の販売であり、その中でも広告がプラットフォームの最も基本的な収益モデルとなります。OCO ビジネス モデルでは、ユーザーはオンラインで消費 + オフラインでの体験を行い、オンラインとオフラインを組み合わせることでユーザー エクスペリエンスがより便利になります。

7. 作品展示

8.PPT表示

9、コード表示

<!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>

10. 研修報告書

 

おすすめ

転載: blog.csdn.net/lf21qp/article/details/131819985