[Proyecto de formación] APP "On Campus"-la plataforma de búsqueda de servicios en todo el campus universitario

1. Resumen del proyecto

1. Antecedentes del mercado

Con el creciente número de usuarios de Internet en China, la industria de Internet está desempeñando un papel importante en la economía de mercado. Al mismo tiempo, el advenimiento de la era de la información ha cambiado por completo los medios tradicionales de comunicación de las personas. De enviar cartas a hacer llamadas telefónicas, de hacer llamadas a llamar a teléfonos móviles, y de hablar de teléfonos móviles a teléfonos inteligentes que pueden obtener una gran cantidad de información, el principal medio para que las personas obtengan información ha sufrido cambios cualitativos. Las personas no solo estarán satisfechas con las funciones de llamadas de teléfonos móviles y mensajes de texto, sino más bien como una herramienta para recibir información, comprender eventos actuales, construir redes sociales, facilitar la vida y jugar. Los estudiantes universitarios generalmente tienen una fuerte aceptación y dependencia de varias plataformas de información, pero hay software de aplicación de servicio de vida mixto en el mercado.De acuerdo con las necesidades de los estudiantes universitarios, los intereses de los estudiantes universitarios son el punto de partida básico para proporcionar información para facilitar la estudio y vida de los estudiantes universitarios.

Muy pocos. Así nació también una plataforma de búsqueda de campus para estudiantes universitarios.

2. Introducción del producto

  La plataforma de búsqueda de campus es un software de aplicación dirigido a estudiantes universitarios, que agrega información sobre necesidades básicas, alimentación, vivienda y transporte alrededor de la universidad, y las publica de manera centralizada para facilitar el estudio y la vida de los estudiantes universitarios. Es para servir a los consumidores universitarios de primer año, proporcionar información para los estudiantes universitarios de primer año y facilitar que los estudiantes realicen consultas.

2. Contenido del proyecto

1. Guía de vida

   Comida circundante: platos exclusivos en la cafetería de la escuela, ventana de suministro, período de tiempo de suministro, precio, platos exclusivos de restaurantes alrededor de la escuela, platos especiales, nuevas cocinas, consumo per cápita, estrategia de pedido, índice de recomendación de personas mayores y hermanas, cupones de restaurante , número de teléfono de la tienda de comida para llevar en el campus, menú, paquete a juego de comidas y bebidas; Compras de ocio: distribución de diferentes grados de centros comerciales, supermercados, librerías, tiendas de bebidas, etc., en los distritos comerciales circundantes, rutas de tráfico, marcas características de compras centros comerciales, información sobre descuentos de temporada, actividades dentro de la ciudad, restaurantes característicos, hoteles destacados, información sobre compras grupales; Carta de vida del campus: cortes de agua, cortes de energía, inspecciones de dormitorios, actividades de clubes, fiestas nocturnas y otros comunicados de información.

2. Guía de estudio

   Guía de selección de cursos, excelente recomendación de cursos, estrategia de selección de cursos, estrategia de correspondencia de créditos electivos para CET-4 y CET-6, computadora, exámenes departamentales, exámenes nacionales y otras guías de preparación para exámenes profesionales, intercambio de datos, registro de clases, guías de conferencias para la escuela , universidades y bibliotecas circundantes, ocupación de asientos para el examen de ingreso de posgrado, compra grupal de materiales, compra de notas de estudio de estudiantes anteriores, reexamen escolar, estudios previos, estudiantes de intercambio y otra divulgación de información.

3. Guía de reproducción

  Guías turísticos de atractivos aledaños, reuniones de clase, alojamiento de alquiler diario, alquiler de equipos, etc.

4. Otros

La inscripción para el examen de la escuela de manejo, el proceso de emisión de varios certificados por parte de cada oficina, etc.

3. Realización del proyecto

Coopere con los comerciantes de los alrededores para servir a los estudiantes. Coopere con una serie de instalaciones de apoyo alrededor de la escuela, restaurantes, hoteles, tiendas, etc., bríndeles información detallada y anuncios en la aplicación, para que puedan unirse a la plataforma de búsqueda de campus de estudiantes universitarios. y los comerciantes circundantes pueden proporcionar descuentos electrónicos en la función de cupón de la plataforma, la función de compra grupal y la función de código QR para atraer a los usuarios objetivo. Coopere con la escuela, centrándose en la información del campus y los nuevos estudiantes. En términos de provisión de información escolar, debe haber cierta cooperación con la escuela para proporcionar la información correspondiente. Puede negociar con la escuela para poner la información diaria y la introducción de la escuela en la plataforma. . Coopere con la escuela para promocionar a los estudiantes de primer año que acaban de ingresar a la escuela, agréguelo al contenido educativo de inicio de trimestre y realice una promoción integral para los estudiantes de primer año. Publique el código QR de la aplicación de la plataforma en un lugar visible de la escuela. para que los estudiantes lo descarguen y lo muestren en la escuela Promocionar en línea. Posteriormente, cooperó con muchas escuelas y promovió a otras organizaciones universitarias.

4. Objetivos del producto

expandir la base de usuarios

Mejorar la actividad del usuario

Mejorar la experiencia del producto

Encuentre socios comerciales y aumente los ingresos

5. Innovación y ventajas

La diferencia con otras plataformas de servicios es que la plataforma de búsqueda de campus está dirigida a estudiantes universitarios y los consumidores están segmentados. Al mismo tiempo, todo el contenido que publica la plataforma se basa en la experiencia de vida de los estudiantes y es conducido por recolectores de datos especializados. Se publica después de la recopilación, clasificación, selección y confirmación. Todas las publicaciones de información se basan en la conveniencia de la vida de los estudiantes universitarios.

6. Modo

El principal medio de ganancias para la "plataforma de búsqueda de campus para estudiantes universitarios" es pagar a los comerciantes y vender anuncios, entre los cuales los anuncios son el modelo de ganancias de plataforma más básico. En el modelo de negocio OCO, los usuarios consumen experiencia en línea + fuera de línea, y la combinación de en línea y fuera de línea hace que la experiencia del usuario sea más conveniente.

7. Exhibición de obras

8. Pantalla PPT

Nueve, pantalla de código

<!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. Informe de formación

 

Supongo que te gusta

Origin blog.csdn.net/lf21qp/article/details/131819985
Recomendado
Clasificación