[Proyecto de capacitación] Proyecto "Diez mil millas recogiendo ropa"

1. Resumen del diseño

Para los estudiantes universitarios, a menudo compran ropa costosa especial para actividades u otras razones, como ropa formal, y no tienen dónde ponerla después de usarla una vez. Sin embargo, algunas personas pueden necesitar esa ropa con urgencia y no hay suficiente tiempo para pedido temporal. Si quieres alquilarlo, no hay nadie que conozcas o el tamaño no coincide. Si no lo sabes, no sabes dónde pedirlo prestado. Se necesita tiempo y esfuerzo para preguntar a muchas personas. , y finalmente estará en tus manos después de muchas rondas. Devolverlo es otro momento. Giros y vueltas. Otro ejemplo es que un evento a gran escala, como un coro, necesita alquilar una gran cantidad de ropa. Primero, los estudiantes deben viajar a varias tiendas para comparar, y segundo, la escuela es remota e inconveniente, lo que requiere mucho tiempo y laborioso. Por lo tanto, es necesario desarrollar un sistema de alquiler de ropa que sea conveniente para todos para tratar con la ropa de los estudiantes universitarios.

El sistema entrega el diseño e implementación de cada módulo funcional del cliente. Los principales módulos funcionales diseñados e implementados incluyen el centro personal, el módulo de búsqueda, el módulo de estantería, el módulo de mensajes y el módulo de deseos. Entre ellas, las funciones relacionadas con el administrador en el módulo de gestión de usuarios se implementan en el lado WEB. En las condiciones existentes, el sistema sólo admite el uso de los estudiantes de la escuela y comerciantes radicados en la misma ciudad.

2. Modalidad de diseño y objetivos del producto

2.1 Modo

La aplicación "Baiyi Baishun" adopta el modo de comunicación y pago en línea O2O y el servicio fuera de línea. Para los usuarios, "Bai Yi Bai Shun" brinda a los usuarios una plataforma donde pueden alquilar ropa de manera conveniente y, al mismo tiempo, pueden alquilar efectivamente su ropa ociosa.

2.2 Metas

2.2.1 Lado del préstamo

　　Permita que los estudiantes tengan un lugar para guardar su ropa ociosa. Puede proporcionarle: ponerse/quitarse su propia ropa en cualquier momento, precio gratuito, el monto específico de la transacción se puede comunicar con el comprador y se puede agregar información de contacto para facilitar el contacto del comprador. La tarifa de servicio cobrada por la plataforma se determina de acuerdo con el monto final de la transacción.

2.2.2 El lado del arrendador

　　Permite a los estudiantes encontrar la ropa que necesitan en caso de emergencia. Puede proporcionar: puede buscar ropa según palabras clave, puede seleccionar directamente las condiciones de búsqueda para buscar ropa y puede ordenar por precio.

2.2.3 Comerciantes

　　Puede aumentar considerablemente la tasa de alquiler de la información comercial, acortar el tiempo para que los usuarios encuentren ropa y mejorar la eficiencia de los comerciantes.

3. Innovación de diseño y ventajas.

La aplicación "Bai Yi Bai Shun" no solo puede ayudar a los usuarios a encontrar el tipo de ropa que necesitan en cualquier momento, para que los usuarios no tengan que viajar para pedir ropa prestada. En segundo lugar, es mucho más conveniente cuando los usuarios quieren alquilar su ropa, y una pequeña cantidad de sangre puede devolverse a ropa más cara. Esta aplicación brinda una gran comodidad a los estudiantes comunes, gerentes de clubes o gerentes de organizaciones, y puede resolver el inconveniente de alquilar ropa para estudiantes.

4. La implementación específica del diseño.

4.1 Análisis de factibilidad del proyecto

La aplicación "Bai Yi Bai Shun" no solo puede ayudar a los usuarios a encontrar el tipo de ropa que necesitan en cualquier momento, para que los usuarios no tengan que viajar para pedir ropa prestada. En segundo lugar, es mucho más conveniente cuando los usuarios quieren alquilar su ropa, y una pequeña cantidad de sangre puede devolverse a ropa más cara. Esta aplicación brinda una gran comodidad a los estudiantes comunes, gerentes de clubes o gerentes de organizaciones, y puede resolver el inconveniente de alquilar ropa para estudiantes. La aplicación "Bai Yi Bai Shun" adopta el modo de comunicación y pago en línea y el servicio fuera de línea. Para los usuarios, "Bai Yi Bai Shun" brinda a los usuarios una plataforma en la que pueden alquilar ropa de manera conveniente y, al mismo tiempo, pueden alquilar efectivamente su ropa ociosa.

4.2 Análisis de requerimientos del proyecto

Hoy en día, las personas prestan más atención a su propia experiencia de vida. Muchas escuelas y empresas organizan varias fiestas nocturnas en algunos festivales importantes, especialmente en los campus universitarios. Esta situación abunda. En las fiestas nocturnas a gran escala, con el fin de mostrar su fuerza y ​​brindar a los estudiantes una experiencia de entretenimiento más emocionante, muchas universidades a menudo alquilan una gran cantidad de disfraces para el anfitrión y los participantes antes de la presentación. Entonces, ¿qué tipo de ropa es más adecuada? ¿Para fiestas relevantes? La escena y qué tipo de ropa se ajustará mejor se convertirán en los problemas de los líderes universitarios; la próxima temporada de graduación universitaria también es el punto culminante del alquiler de ropa. Por lo tanto, cómo pedir prestados uniformes de soltero de tamaño adecuado, limpios y ordenados se ha convertido en un problema difícil para la mayoría de los estudiantes, además, hoy en día los estudiantes universitarios son aficionados a las compras en línea, pero muchas de las prendas que compran siempre quedan escondidas en el armario después de usarlas varias veces, perdiendo Saber el significado de la ropa, cómo lidiar con esta ropa es suficiente para causar dolores de cabeza. Por lo tanto, una vez que aparece una aplicación que puede resolver estos problemas, inevitablemente atraerá a una gran cantidad de clientes y resolverá sus necesidades urgentes.

4.3 Diseño general del proyecto

La aplicación "Baiyi Baishun" se divide en cinco módulos: centro personal, módulo de búsqueda, módulo de estantería, módulo de mensajes y módulo de deseos.

4.4 Diseño detallado y realización del proyecto

    Al abrir la aplicación por primera vez, se le pedirá al usuario que abra el recordatorio del mensaje de fondo y el usuario debe cerrarlo manualmente.

4.4.1 Centro personal:

1. Registro de usuario: Al utilizar la APP de manera oficial, primero debe registrarse. Puede registrarse directamente con su número de teléfono móvil, y el sistema asigna nombres aleatoriamente, que puede cambiar usted mismo.
2. Información personal: Puedes modificar el nombre asignado aleatoriamente por el sistema, así como el sexo, edad, etc. Nos aseguraremos de que la información personal proporcionada por los usuarios no sea divulgada y, al mismo tiempo, crearemos un entorno de plataforma real, confiable, legal y ordenado.
3. Mis pedidos: incluidos los pedidos históricos, cada pedido se marcará si se alquila o se toma prestado.
4. Mis listados: incluye ropa que ha estado en los estantes y está en los estantes, e incluye el volumen de transacción y el monto total de la transacción de la ropa, y el monto total de la transacción se mostrará en la parte superior.
5. Registros de navegación: guarde una cierta cantidad de registros de navegación para revisarlos fácilmente.
6. Configuración: haga clic aquí para mostrar varias funciones, como borrar caché, comentarios, sobre nosotros y cerrar sesión.

 Figura 1-1 Captura de pantalla del código del centro personal

 Figura 1-2 Captura de pantalla del funcionamiento del centro personal

4.4.2 Módulo de búsqueda

Puede buscar directamente por palabra clave o buscar por condiciones de filtrado. La interfaz de búsqueda también se puede refinar aún más para buscar condiciones como la altura y el tamaño, y también puede elegir un método de clasificación.

 Figura 2-1 Captura de pantalla del código del módulo de búsqueda

 Figura 2-2 Captura de pantalla del módulo de búsqueda ejecutándose

4.4.3 Módulos de estanterías

Tome fotos de su ropa y cárguelas, y debe agregar información al cargar: género aplicable, altura aplicable, tamaño aplicable, ocasión aplicable, precio, etc.

4.4.4 Módulo de mensajes

El lugar donde las dos partes se comunican.

 Figura 4-1 Captura de pantalla del código del módulo de mensajes

 Figura 4-2 Captura de pantalla del módulo de mensajes en ejecución

4.4.5 módulo de deseos

Después de seleccionar los productos que le gustan, la interfaz se mostrará de manera uniforme, lo cual es conveniente para múltiples comparaciones.

 Figura 5-1 Captura de pantalla del código del módulo deseado

 Figura 5-2 Captura de pantalla de querer ejecutar el módulo

4.4.6 Página de inicio

En la parte superior está la imagen del carrusel, que brinda a los usuarios las recomendaciones más intuitivas; en el medio está la clasificación de contenido, que los usuarios pueden ver según las condiciones que necesitan; al final está la recomendación de contenido, que recomienda aleatoriamente la ropa que pueden necesitar para usuarios

 Figura 6-1 Captura de pantalla del código del carrusel

Figura 6-2 Captura de pantalla del código de clasificación de la página de inicio

 Figura 6-3 Captura de pantalla del código de recomendación de la página de inicio

 Figura 6-4 Captura de pantalla de la ejecución de la página de inicio

La implementación de la función de la barra de navegación se completa con el siguiente código:

  Figura 7 captura de pantalla del código de barras de navegación

4.5 Prueba y operación del proyecto

Parte de la barra de navegación: las partes superior e inferior de la barra de navegación son un marco. Al seleccionar diferentes áreas a continuación, se llenan diferentes páginas de acuerdo con las opciones. Al principio, cuando la barra de navegación se cambió de cinco opciones a cuatro opciones, yo no entendía esto, lo que trajo muchos problemas al diseño del curso, muy difícil.

Parte del chat: el mayor problema encontrado en esta parte es el formato CSS, ya que la vista previa en tiempo real del software no puede mostrar la página web, por lo que cada cambio solo se puede realizar generando un paquete de prueba e instalándolo en el emulador para ver si cumple con sus expectativas.

Centro personal: eliminó algunos módulos innecesarios en la parte inferior, cambió la combinación de palabras y colores, etc. El módulo de inicio de sesión solo diseña la interfaz, pero no completa la conexión a la base de datos.

Me gusta el módulo: configuramos esta página como una página estática. El principal problema que encontramos fue el formato CSS. Cómo alinear y hacer que la página sea menos desordenada es el principal problema que debemos resolver.

Página de inicio: La página de inicio tiene mucho contenido, incluyendo carruseles, clasificaciones, recomendaciones, etc. Hay muchos módulos y hay muchas páginas web enlazadas. Necesitas saber qué hace cada parte del código, cómo encontrar el parte que desea cambiar, etc. Estas son las tareas que tenemos que realizar.

Método de prueba y pasos

 (1) Prueba personal: el diseño de este curso se completa con la división del trabajo y la cooperación del grupo. Todos solo necesitan probar la interfaz del módulo de la que son responsables al principio. El principal método de implementación es la vista previa en tiempo real o generar un paquete de prueba e instalarlo en el simulador. El más utilizado es el emulador, porque las computadoras de algunas personas no admiten la vista previa en tiempo real o la relación de visualización no coincide con la real.

   (2) Prueba general: al final, juntamos el código de todos con la isla. No hay diferencia entre el método de prueba y la prueba individual, pero después de conectarse, cada cambio a menudo hace que otras interfaces se cambien juntas, de modo que la prueba es aún más difícil, frecuente y problemática.

5. Experiencia y sugerencias

Miembro 1: Para mí, en el diseño de este curso, lo primero que obtuve fue el progreso técnico y aprendí la producción preliminar de una aplicación. El trabajo en equipo también es muy importante para mí. Discutimos todos los requisitos de esta aplicación juntos. módulo y muchos detalles, siento que cuanto más hablo de él, más problemas encuentro y más cosas en las que tengo que pensar. Siento que no es fácil hacer una aplicación pequeña, y siento que es diferente de las personas en el mismo grupo La alegría de la colisión de puntos de vista.

Miembro 2: En esta clase, revisé el conocimiento sobre el backend el semestre pasado, pero encontré algunos problemas. Luego aprendí algunos nuevos conocimientos sobre el desarrollo de APP, lo que despertó mi gran interés. Aunque no participé en el trabajo real del equipo en la etapa inicial, participé en el trabajo de planificación funcional en la etapa inicial del proyecto y también diseñé la parte frontal del proyecto más adelante. Aunque los resultados finales de nuestro grupo no fueron satisfactorios, hemos ganado muchas soluciones a las dificultades.

Miembro 3: este curso está diseñado para hacer un software de aplicación móvil de tipo aplicación. Durante el proceso de producción, no participé en el diseño debido al examen de ingreso de posgrado en la primera semana. En la segunda semana, se formó la estructura general del modelo de software, por lo que simplemente fui responsable de 'mi interfaz' y producción de 'página de detalles del producto'. A través de este curso, tengo una comprensión profunda de cuán importante es el trabajo en equipo cuando se trabaja en un proyecto. Bajo el liderazgo del líder del equipo, cada miembro realizó sus propias funciones y en conjunto se dieron cuenta de los requisitos del proyecto y lograron los resultados esperados. Muchas gracias a cada miembro del grupo por su ayuda y asistencia.

Integrante 4: Para mí, lo primero que aprendí de esta clase es tener buenos compañeros. La división del trabajo y la cooperación en el grupo es muy agradable. Cada uno realiza sus propias funciones y nos asesora durante todo el proceso de diseño. En solo dos semanas. , tengo una comprensión preliminar del proceso de producción de una aplicación en línea y participé en ella. Estoy muy feliz. Creo que aprendí una nueva habilidad. Cuando discutimos la viabilidad del proyecto y los detalles del diseño de la página de inicio en el etapa inicial, las opiniones de cada uno de nosotros La colisión me hizo sentir renovado y me hizo darme cuenta de que las consideraciones se pueden ver desde muchos niveles. Estoy muy feliz de tener esta cooperación con mis compañeros de equipo.

Miembro 5: El diseño de este curso nos permite experimentar formalmente todo el proceso de desarrollo de software por primera vez. Cada uno tiene sus propias tareas. Finalmente, el trabajo de todos se combinará para formar un sistema completo y el resultado final saldrá. A veces hay una sensación de logro. Y esto es de gran ayuda para nuestro diseño de cursos, diseño de graduación, etc. Es una pena que el tiempo fuera demasiado corto, y al final no completamos nuestra concepción inicial de este software, pero también aprendimos mucho. Aunque el diseño del curso ha terminado en este momento, nuestro viaje de aprendizaje aún no ha terminado. A medida que nos acercamos a la graduación, aún no podemos dejar de aprender y expandirnos, y debemos continuar sentando las bases para el estudio y el trabajo futuros.

6. Apéndice

lista de programas

index.html //parte de la barra de navegación

cart.html //me gusta módulo

home.html //módulo de la página de inicio

profile.html //Centro personal

msg-con.html //módulo de mensaje

login-con.html //módulo de inicio de sesión

search.html //módulo de búsqueda

profile.css //CSS utilizado en el centro personal

common.css //CSS común

Fun.css //CSS utilizado por el módulo de mensajes

7. Referencias

[1] Yang Xuanhui. Tutorial de diseño y producción web Beijing: Tsinghua University Press 2006

[2] Zhan Guohua, Pan Hong, etc. Curso de Diseño Web Multimedia, Beijing: Higher Education Press, 2009

[3] Jia junio . Tutorial de proyecto de desarrollo y diseño de sitios web dinámicos, China Electric Power Press, 2009

[4] Bruce Eckel y otros " Pensando en Java " Prensa de la Industria de Maquinaria

[5] Qiao Baojun y otros " Desarrollo y práctica de aplicaciones web Java (segunda edición) " Tsinghua University Press

[6]  Ryan Benedettl y Ronan Cranley y otros " Head First jQuery " China Electric Power Publishing House

8. Visualización del proyecto PPT 

9. Código central

<!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;
            position: relative;
        }
        .foot{
        	position: fixed;
        	bottom: 0;
        }

        .shop{
            background-color: #FFF;
            border-top: 1px solid #CCC;
            border-bottom: 1px solid #CCC;
            margin-bottom: 14px;
        }
        .shop span{
            color: #1A1A1A;
            font-size: 11px;
        }
        .shop_name{
            border-bottom: 1px solid #CCC;
            height: 53px;
        }
        .shop_name_left{

        }
        .shop .checkBox{
            display: inline-block;
            background: url(../../res/img/tmall_checkbox_off.png) center center no-repeat;
            background-size: 100% 100%;
            width: 17px;
            height: 17px;
            margin: 18px 12px;
        }
        .shop .checkBox.active{
            background: url(../../res/img/tmall_checkbox_on.png) center center no-repeat;
            background-size: 100% 100%;
        }
        .shop_name_text{
            font-size: 14px;
            line-height: 53px;
        }

        .shop_item_group{

        }
        .shop_item{
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient:horizontal;
            display: -webkit-flex;
            display: flex;
            position: relative;
            padding: 15px 0;
        }
        .shop_item_left{
            position: relative;
        }
        .item_icon{
            width: 53px;
        }
        .shop_item_center{
            position: relative;
            -webkit-box-flex: 1; 
            -webkit-flex: 1;
            flex: 1;
            padding-left: 7px;
        }
        .shop_item_center .title{
            display: block;
            width:40%;
            line-height: 17px;
            text-indent: 0 !important;
        }
        .shop_item_center .description{
            display: block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            line-height: 17px;
        }
        .shop_item_center .classify{
            display: block;
            color: #9E9E9E;
            line-height: 14px;
        }
        .tag_group .tag{
            height: 12px;
        }
        .shop_item_right{
            text-align: right;
            position: relative;
            width: 73px;
            padding-right: 7px;
        }
        .shop_item_right .price{
            margin-bottom: 30px;
        }
        .count_group{
            line-height: 100%;
        }
        .count_group .edit_icon{
            width: 18px;
            height: 18px;
            background: url(../../res/img/tm_mcart_ic_edit.png) center center no-repeat;
            background-size: 100% 100%;
            vertical-align: bottom;
            margin-left: 4px;
        }
        .count_group .count{
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="main">
            
            <div class="shop">
                <!-- 店铺名 -->
                <div class="shop_name clearfix">
                    <div class="shop_name_left pull-left">
                        <i class="checkBox"></i>
                    </div>
                    <span class="shop_name_text">
                    	专卖主持服装店
                    </span>
                </div>
                <!-- 宝贝组 -->
                <div class="shop_item_group">
                    <!-- 单个宝贝 -->
                    <div class="shop_item clearfix">
                        <div class="shop_item_left pull-left">
                            <i class="checkBox"></i>
                            <img src="../../image/zhuchi.jpg" alt="" class="item_icon">
                        </div>
                        <div class="shop_item_center" 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);">
                            <span class="title">礼服主持女粉色长袖</span>
                            <!--<span class="description">
                                礼服女
                            </span>-->
                            <span class="classify">
                                颜色：粉色；尺码：L
                            </span>
                            <!--<div class="tag_group">
                                <img src="../../res/img/tm_brand_11_tab.png" alt="" class="tag">
                            </div>-->
                        </div>
                        <div class="shop_item_right pull-right">
                            <span class="price">￥100.00</span>
                            <div class="count_group clearfix">
                                <i class="edit_icon pull-right"></i>
                                <span class="count pull-right">1</span>
                                <span class="multiply pull-right">×</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        <!-- 1 -->
            <!-- <div class="shop">
                <div class="shop_name clearfix">
                    <div class="shop_name_left pull-left">
                        <i class="checkBox active"></i>
                    </div>
                    <span class="shop_name_text">
                        罗技百事得专卖店
                    </span>
                </div>
                
                <div class="shop_item_group">
                    
                    <div class="shop_item clearfix">
                        <div class="shop_item_left pull-left">
                            <i class="checkBox active"></i>
                            <img src="../../image/cart_item_icon1.png" alt="" class="item_icon">
                        </div>
                        <div class="shop_item_center">
                            <span class="title">顺丰包邮 新品上市罗技</span>
                            <span class="description">
                                MK345无线键鼠套装 配MK275无线鼠标
                            </span>
                            <span class="classify">
                                颜色分类：MK345 送16G优盘+超大游戏垫
                            </span>
                            <div class="tag_group">
                                <img src="../../res/img/cart_tags1.png" alt="" class="tag">
                            </div>
                        </div>
                        <div class="shop_item_right pull-right">
                            <span class="price">￥199.00</span>
                            <div class="count_group clearfix">
                                <i class="edit_icon pull-right"></i>
                                <span class="count pull-right">1</span>
                                <span class="multiply pull-right">×</span>
                            </div>
                        </div>
                    </div>
                    <div class="shop_item clearfix">
                        <div class="shop_item_left pull-left">
                            <i class="checkBox active"></i>
                            <img src="../../image/cart_item_icon1.png" alt="" class="item_icon">
                        </div>
                        <div class="shop_item_center">
                            <span class="title">顺丰包邮 新品上市罗技</span>
                            <span class="description">
                                MK345无线键鼠套装 配MK275无线鼠标
                            </span>
                            <span class="classify">
                                颜色分类：MK345 送16G优盘+超大游戏垫
                            </span>
                            <div class="tag_group">
                                <img src="../../res/img/cart_tags1.png" alt="" class="tag">
                            </div>
                        </div>
                        <div class="shop_item_right pull-right">
                            <span class="price">￥199.00</span>
                            <div class="count_group clearfix">
                                <i class="edit_icon pull-right"></i>
                                <span class="count pull-right">1</span>
                                <span class="multiply pull-right">×</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
            <div class="shop">
                <!-- 店铺名 -->
                <div class="shop_name clearfix">
                    <div class="shop_name_left pull-left">
                        <i class="checkBox active"></i>
                    </div>
                    <span class="shop_name_text">
                        小饼干店
                    </span>
                </div>
                <!-- 宝贝组 -->
                <div class="shop_item_group">
                    <!-- 单个宝贝 -->
                    <div class="shop_item clearfix">
                        <div class="shop_item_left pull-left">
                            <i class="checkBox active"></i>
                            <img src="../../image/hechang.jpg" alt="" class="item_icon">
                        </div>
                        <div class="shop_item_center" 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);">
                            <span class="title">晚礼服新款长袖主持粉色</span>
                            <!--<span class="description">
                                冬季男鞋2014棉靴保暖棉鞋韩版…
                            </span>-->
                            <span class="classify">
                                颜色:红色；尺码：L
                            </span>
                        </div>
                        <div class="shop_item_right pull-right">
                            <span class="price">￥99.00</span>
                            <div class="count_group clearfix">
                                <i class="edit_icon pull-right"></i>
                                <span class="count pull-right">1</span>
                                <span class="multiply pull-right">×</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <!-- 2 -->
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){

    };
</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;
    }
    .more_unit .title{
        text-indent: 0.75em;
        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/index_ad_1.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/index_ad_2.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/index_ad_3.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/index_ad_4.jpg" alt="狂欢延续，999送黄金">
                    </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/index_ad_5.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="sp1_2 industry clearfix" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    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/zhengzhuang.jpg" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    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/zhuchi.jpg" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    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/biye2.jpg" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    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/manzhan.jpg" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    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/hunsha.jpg" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    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/laladui.jpg" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    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/hanfu1.jpg" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    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/xiangsheng.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="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    data-title="详情" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/zhuchi.jpg" alt="">
                        </div>
                        <span class="title">主持</span>
                        <span class="price">￥98.0</span>
                    </div>
                    <div class="more_unit sp1_2" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    data-title="详情" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/xiangsheng.jpg" alt="">
                        </div>
                        <span class="title">相声大褂</span>
                        <span class="price">￥98.0</span>
                    </div>
                    <div class="more_unit sp1_2" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    data-title="详情" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/laladui.jpg" alt="">
                        </div>
                        <span class="title">啦啦队服装</span>
                        <span class="price">￥98.0</span>
                    </div>
                    <div class="more_unit sp1_2" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    data-title="详情" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/biye2.jpg" alt="">
                        </div>
                        <span class="title">毕业季</span>
                        <span class="price">￥98.0</span>
                    </div>
                    <div class="more_unit sp1_2" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    data-title="详情" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/manzhan.jpg" alt="">
                        </div>
                        <span class="title">漫展</span>
                        <span class="price">￥98.0</span>
                    </div>
                    <div class="more_unit sp1_2" tapmode="tap-active" data-url="https://detail.tmall.com/item.htm?id=573063694784&ali_refid=a3_430583_1006:1153410142:N:B4NxitJdhxjLg2h3anyi2Q==:2591b8a99047956276489c19888f2df6&ali_trackid=1_2591b8a99047956276489c19888f2df6&spm=a230r.1.14.1" 
                    data-title="详情" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/hanfu1.jpg" alt="">
                        </div>
                        <span class="title">汉服</span>
                        <span class="price">￥98.0</span>
                    </div>
                </div>
                <!-- 更多惊喜 end -->
                <img src="../../image/index_img_p8.png" 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>
<!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" />
    <link rel="stylesheet" type="text/css" href="../../css/profile.css" />

</head>
<body>
    <div id="wrap">
        <div id="main">
            <div class="profile_box">
                <div class="profile_top">
                <!--<i class="msg_icon" tapmode="tap-active" onclick="openCommon('msg','消息盒子')"></i>
                    <span class="config" tapmode="tap-active" onclick="openCommon('config','设置')">设置</span>-->
                    <span class="login_btn" tapmode="tap-active" onclick="openCommon('login','点击登录')">点击登录</span>
                </div>
                <!--<div class="tabBar">
                    <div class="tabBar_inner" tapmode="tap-active" onclick="openCommon('login','登录')">
                        <span class="num_top">0</span>
                        <span class="text">待付款</span>
                    </div>
                    <div class="tabBar_inner" tapmode="tap-active" onclick="openCommon('login','登录')">
                        <span class="num_top">0</span>
                        <span class="text">待发货</span>
                    </div>
                    <div class="tabBar_inner" tapmode="tap-active" onclick="openCommon('login','登录')">
                        <span class="num_top">0</span>
                        <span class="text">待收货</span>
                    </div>
                    <div class="tabBar_inner" tapmode="tap-active" onclick="openCommon('login','登录')">
                        <span class="num_top">0</span>
                        <span class="text">待评价</span>
                    </div>
                    <div class="tabBar_inner last" tapmode="tap-active" onclick="openCommon('login','登录')">
                        <span class="num_top">0</span>
                        <span class="text">退款/售后</span>
                    </div>
                </div>-->
            </div>
            <div class="profile_detail_container">
                <div class="profile_detail_box clearfix">
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')">
                            <img src="../../image/profile_item1.png" alt="">
                            <span class="title">我的租借</span>
                            <span class="brief">查看所有租借</span>
                        </div>
                    </div>
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')">
                            <img src="../../image/profile_item2.png" alt="">
                            <span class="title">我的上架</span>
                            <span class="brief">查看历史上架</span>
                        </div>
                    </div>
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')">
                            <img src="../../image/profile_item3.png" alt="">
                            <span class="title">我的收藏</span>
                            <span class="brief">收藏过的商品</span>
                        </div>
                    </div>
                </div>
                <div class="profile_detail_box clearfix">
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')">
                            <img src="../../image/profile_item7.png" alt="">
                            <span class="title">收藏店铺</span>
                            <span class="brief">收藏过的店铺</span>
                        </div>
                    </div>
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')">
                            <img src="../../image/profile_item5.png" alt="">
                            <span class="title">优惠券</span>
                            <span class="brief">我的优惠券</span>
                        </div>
                    </div>
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')">
                            <img src="../../image/profile_item6.png" alt="">
                            <span class="title">会员卡</span>
                            <span class="brief">我的会员卡</span>
                        </div>
                    </div>
                </div>
                <div class="profile_detail_box clearfix">
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')">
                            <img src="../../image/my_setting_user_icon_normal.png" alt="">
                            <span class="title">设置</span>
                            <span class="brief">修改设置</span>
                        </div>
                    </div>
                </div>
            </div>
        </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/common.js"></script>
<script type="text/javascript">
    apiready = function(){
        Zepto(function($){
            var em = parseInt(getComputedStyle(document.body,false).fontSize);
            var emW = em*3/4;
            var bodyW = $api.offset(document.body).w;
            var sp1_3 = (bodyW - 4*emW)/3;
            $('.profile_detail_inner').width(sp1_3);
        });
    }
    // apiready();
</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>
        #header{
            text-align: center;
        }
        #header h5{
            display: inline-block;
            color: #FFF;
            line-height: 48px;
            width: 100%;
            position: absolute;
            left: 0;
        }
        .btn_box{
            width: 52px;
            height: 48px;
            position: relative;
        }
        .btn_box img{
            width: 23px;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
        }
        .btn_box.pull-left{
            background: url(../../res/img/webview_dividing.png) right center no-repeat;
            background-size: 1px 100%;
            position: relative;
            z-index: 1;
        }
        .btn_box.pull-left:active,.btn_box.pull-left.tap-active{
            background: #7F0000 url(../../res/img/webview_dividing.png) right center no-repeat;
            background-size: 1px 100%;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="btn_box pull-left" tapmode="tap-active" onclick="api.closeWin();">
                <img src="../../res/img/tmall_btn_bar_back.png" alt="">
            </div>
            <h5></h5>
        </div>
        <div id="main"> 
            
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">

    apiready = function(){
        window.header = $api.byId('header');
        $api.fixIos7Bar(header); 
        window.headerPos = $api.offset(header);
        var main = $api.byId('main');
        window.mainPos = $api.offset(main);
        var name = api.pageParam.name;
        var title = api.pageParam.title;
        $api.dom('#header h5').innerHTML = title;
        var url = './'+name+'-con.html'
        api.openFrame({
            name: name,
            url: url,
            rect: {
                x: 0,
                y: headerPos.h,
                w: 'auto',
                h: mainPos.h
            }
        });  
    }
</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;
        }
        table{
            border-collapse:collapse;
        }
        tr{
            width: 100%;
        }
        td{
            border: 1px solid #ccc;
            position: relative;
            width: 33%;
        }
        table img{
            width: 100%;
        }
        td .normal{
            display: block;
        }
        td .shadow{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        td .s1{
            background: url(../../image/class_nav1.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s1{
            background: url(../../image/class_nav1_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s2{
            background: url(../../image/class_nav2.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s2{
            background: url(../../image/class_nav2_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s3{
            background: url(../../image/class_nav3.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s3{
            background: url(../../image/class_nav3_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s4{
            background: url(../../image/class_nav4.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s4{
            background: url(../../image/class_nav4_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s5{
            background: url(../../image/class_nav5.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s5{
            background: url(../../image/class_nav5_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s6{
            background: url(../../image/class_nav6.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s6{
            background: url(../../image/class_nav6_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s7{
            background: url(../../image/class_nav7.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s7{
            background: url(../../image/class_nav7_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s8{
            background: url(../../image/class_nav8.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s8{
            background: url(../../image/class_nav8_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s9{
            background: url(../../image/class_nav9.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s9{
            background: url(../../image/class_nav9_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s10{
            background: url(../../image/class_nav10.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s10{
            background: url(../../image/class_nav10_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s11{
            background: url(../../image/class_nav11.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s11{
            background: url(../../image/class_nav11_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s12{
            background: url(../../image/class_nav12.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s12{
            background: url(../../image/class_nav12_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s13{
            background: url(../../image/class_nav13.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s13{
            background: url(../../image/class_nav13_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s14{
            background: url(../../image/class_nav14.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s14{
            background: url(../../image/class_nav14_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s15{
            background: url(../../image/class_nav15.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s15{
            background: url(../../image/class_nav15_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td .s16{
            background: url(../../image/class_nav16.png) center center no-repeat;
            background-size: 100% 100%;
        }
        td:active .s16{
            background: url(../../image/class_nav16_p.png) center center no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="main"> 
            <div class="container">
                <table>
                    <tr>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav1.png" alt="" class="normal">
                            <div class="shadow s1"></div>
                        </td>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav2.png" alt="" class="normal">
                            <div class="shadow s2"></div>
                        </td>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav3.png" alt="" class="normal">
                            <div class="shadow s3"></div>
                        </td>
                    </tr>
                    <tr>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav4.png" alt="" class="normal">
                            <div class="shadow s4"></div>
                        </td>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav5.png" alt="" class="normal">
                            <div class="shadow s5"></div>
                        </td>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav6.png" alt="" class="normal">
                            <div class="shadow s6"></div>
                        </td>
                    </tr>
                    <tr>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav7.png" alt="" class="normal">
                            <div class="shadow s7"></div>
                        </td>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav8.png" alt="" class="normal">
                            <div class="shadow s8"></div>
                        </td>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav9.png" alt="" class="normal">
                            <div class="shadow s9"></div>
                        </td>
                    </tr>
                    <tr>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav10.png" alt="" class="normal">
                            <div class="shadow s10"></div>
                        </td>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav11.png" alt="" class="normal">
                            <div class="shadow s11"></div>
                        </td>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav12.png" alt="" class="normal">
                            <div class="shadow s12"></div>
                        </td>
                    </tr>
                    <tr>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav13.png" alt="" class="normal">
                            <div class="shadow s13"></div>
                        </td>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav14.png" alt="" class="normal">
                            <div class="shadow s14"></div>
                        </td>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav15.png" alt="" class="normal">
                            <div class="shadow s15"></div>
                        </td>
                    </tr>
                    <tr>
                        <td tapmode onclick="">
                            <img src="../../image/class_nav16.png" alt="" class="normal">
                            <div class="shadow s16"></div>
                        </td>
                        <td tapmode onclick="">
                            &nbsp;
                        </td>
                        <td tapmode onclick="">
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </div>
            
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
    apiready = function(){
        var width = api.frameWidth;
        var aTd = $api.domAll('td');
        var w33 = width*0.33;
        for (var i = 0,len = aTd.length; i < len; i++) {
            $api.css(aTd[i],'width:'+w33+'px;');
        };
    }
</script>
</html>