【实训项目】“万里挑衣” 项目-阿里云开发者社区

1.设计摘要

对于在校大学生常常有时候因为活动或者其他原因买了特殊的贵重衣服，比如正装，仅穿了一次便无处安放，而恰巧又有一些人可能对这类衣物紧急需要，临时订购时间又不够，想要租借的话身边认识的人又没有或者尺码不符合，不认识的话更不知道从何借起，多方询问费时费力，最后经过多次辗转才会到自己手里，还回去又是一番波折。再如某种大型活动如合唱需要租借大量服装，一是需要学生自己到处跑多个商家比较，二是学校偏远来回不便，费时费力。所以针对目前大学生衣物处理有必要开发一套方便大家的衣物租赁系统。

该系统给出了客户端各功能模块的设计与实现。所设计实现的主要功能模块包括个人中心、搜索模块、上架模块、消息模块、想要模块。其中用户管理模块中的管理员相关功能在WEB端实现。在现有条件下,该系统仅支持本校同学和同城入驻商家使用。

2.设计的模式及产品目标

2.1 模式

“百依百顺”APP采取O2O线上交流和支付，线下提供服务的模式。对于用户来说“百依百顺”提供用户一个可以方便租衣服的平台，同时可将自己闲置的衣服有效地租出去。

2.2 目标

2.2.1借出方方面

　　能让同学们闲置的衣物有安放之地。能为其提供：随时上架/下架自己的衣物，自由定价，具体成交金额可与买家沟通，可添加联系方式方便买家联系。平台收取的服务费根据最终成交金额而定。

2.2.2租方方面

　　能让同学在紧急时刻可找到自己需要的衣物。能为其提供：可按照关键词搜索衣物，可直接选择搜索条件搜索衣物，可按照价格排序。

2.2.3商家方面

　　可极大程度增加商家信息的租借率，在缩短用户找衣物时间的同时也提高了商家的使用效率。

3.设计的创新与优势

“百依百顺”APP不仅可以帮助用户可以随时找到需要类型的衣服，使用户不用为了借衣服到处奔波。其次，当用户想要把自己的衣服租出去也方便了许多，对于较贵的衣服还可以少量回血。这款APP不管对于普通学生还是对于社团管理人亦或者组织管理人，都带来的极大的便利，可以解决同学们租衣服不方便等问题。

4.设计的具体实现

4.1 项目的可行性分析

“百依百顺”APP不仅可以帮助用户可以随时找到需要类型的衣服，使用户不用为了借衣服到处奔波。其次，当用户想要把自己的衣服租出去也方便了许多，对于较贵的衣服还可以少量回血。这款APP不管对于普通学生还是对于社团管理人亦或者组织管理人，都带来的极大的便利，可以解决同学们租衣服不方便等问题。“百依百顺”APP采取线上交流和支付，线下提供服务的模式。对于用户来说“百依百顺”提供用户一个可以方便租衣服的平台，同时可将自己闲置的衣服有效地租出去。

4.2项目的需求分析

现如今，人们更加注重自己的生活体验，很多学校、公司会在一些重要的节日举办各式各样的晚会，尤其在大学校园里，这种情况更是比比皆是。在大型的晚会里，许多学院为了彰显自己的实力，为了给广大学生更加精彩的文娱体验，往往会在演出之前为主持人以及参演人员租赁大量演出服，那么，什么样的衣服更加适合相关场景、什么样的衣服穿着会比较合身，会成为学院领导的烦心事；即将到来的大学毕业季，也是租衣的重头戏，许多大学生都希望可以穿着合身的学士服完成自己步入社会前的最后一步，因此，如何借到大小合适、干净整洁的学士服就成为困扰广大学生的难题；此外现如今的大学生热衷于网购，但是买来的许多衣服却总是穿几次就藏入衣柜，失去了衣服的意义，如何处理这些衣服也足够令人头疼。因此，一旦出现可以处理这些难题的APP，必然会吸引大量顾客，解决他们的燃眉之急。

4.3项目的总体设计

“百衣百顺”APP共分为五大模块：个人中心、搜索模块、上架模块、消息模块、想要模块。

4.4项目的详细设计及实现

第一次打开APP会提示用户打开后台消息提醒，用户需手动关闭。

4.4.1个人中心：

用户注册：正式使用APP时先要进行注册。可用手机号直接注册，系统随机分配名字，可自行更改。
个人资料：可以对系统随机分配的名字进行修改，还有性别、年龄等。我们会保障用户提供的个人信息不被泄露，同时营造一个真实可靠、合法有序的平台环境。
我的订单：包括历史订单，每个订单后面会标注是租出去的还是借回来的。
我的上架：包括曾上架以及正在上架的衣物，并包括该衣物的成交量和总成交金额，最上方会显示总成交金额。
浏览记录：保存一定数量的浏览记录，方便回看。
设置：点击此处会出现清理缓存、意见反馈、关于我们、退出登录等几个功能。

图1-1 个人中心代码截图

图1-2个人中心运行截图

4.4.2搜索模块

可直接按关键词搜索，也可采用筛选条件的方式搜索。搜索出的界面还可进行进一步细化条件搜索如身高尺码，也可选择排序方式。

图2-1 搜索模块代码截图

图2-2 搜索模块运行截图

4.4.3上架模块

将自己的衣服拍照上传，上传时需添加信息：适用性别、适用身高、适用尺码、适用场合、价格等。

4.4.4消息模块

双方进行沟通的地方。

图4-1 消息模块代码截图

图4-2 消息模块运行截图

4.4.5想要模块

将喜欢的商品选择想要后界面统一显示，可方便多家比对。

图5-1 想要模块代码截图

图5-2 想要模块运行截图

4.4.6主页

最上方为轮播图，给用户提供最直观的推荐；中间是内容分类，用户可根据自己所需要的条件进行查看；最后为内容推荐，随机为用户推荐他们可能需要的衣物。

图6-1 轮播图代码截图

图6-2 主页分类代码截图

图6-3 主页推荐代码截图

图6-4 主页运行截图

导航栏的功能实现由以下代码完成：

图7 导航栏代码截图

4.5项目的测试与运行

导航栏部分：导航栏部分上下是一个框架，选择下方不同区域时根据选项不同填充不同的页面，初期在将导航栏由五个选项改为四个选项时没有理解这个，给课设带来了很大困难。

聊天部分：这部分遇到最大的问题是CSS格式，由于软件的实时预览无法显示该网页，以至于每次的改变都只能通过生成测试包安装至模拟器运行来观察是否符合自己的预期。

个人中心：删除了一些底部不需要的模块，更改了配字配色等方面。登录模块仅设计了界面，没有完成连接数据库。

喜欢模块：我们将这个页面设置成了一个静态页面，遇到的主要问题还是CSS格式，如何对齐如何让页面不那么乱是我们需要解决的主要问题。

主页部分：主页的内容比较多，有轮播图，分类，推荐等等，模块较多，链接的网页也比较多，要清楚代码每个地方是干什么的，如何找到自己想要更改的部分等都是我们要完成的任务。

测试方法以及步骤

（1）个人测试：本次课程设计是小组分工协作完成的，每个人开始只需对自己负责的模块界面进行测试，主要实现方法是通过实时预览或生成测试包安装到模拟器预览。最常用的是模拟器，因为部分人的电脑不支持实时预览，或者显示比例与实际不符。

（2）整体测试：最后我们将每个人的代码正和岛一起，测试方法对比个人测试是没有什么区别，但是连接到一起后，每次进行的更改经常导致其他界面一起被更改，以至于测试更加频繁和麻烦。

5.心得体会及建议

成员1：这次的课程设计对我来说，我得到的首先是技术上的进步，学会了一个APP的初步制作，对我来说团队合作也很重要，我们在一起讨论这个APP的所有需求以及每个模块和许许多多的细节问题，就是感觉越说发现的问题越多，需要想的东西就越多，感受到了一个小小的APP的制作的不易，而且感受到和同组人员不同观点的碰撞的快乐。

成员2：这次课设我复习了上学期关于后端的知识，但是遇到了一些问题。然后学习了关于开发APP的一些新知识，激发了我很大的兴趣。虽然前期我没有参与小组的实际工作，但是参与了项目初期的功能策划工作，后期也对项目前端进行了设计。虽然我们组最后的成果没有达到满意的地步，但是我们收获了很多解决困难的方法。

成员3：本次课设是要做一个应用类的手机app软件。在制作过程中，由于第一个星期要考研，所以没有参与设计，在第二个星期中，软件模型整体构架已经成型，所以我只是简单的负责了‘我的界面’和‘商品详情页’的制作。通过本次的课设我深刻的了解了在做一个项目时，团队合作的多么的重要。在组长的带领下，每个成员各司其职，共同实现了项目的要求，达到了预期的效果。十分感谢组内每个成员的帮助和协助。

成员4：这次的课设对我来说首要的收获就是有好的队友，组内分工合作非常愉快，每个人都各司其职，为我们整个设计过程出谋划策，短短两周的时间，我已经初步了解了一个线上APP的制作过程并且参与其中，我很开心，我认为自己又学会了一项新的技能，前期我们在讨论项目可行性以及主页设计详情的时候我们每个人观点的碰撞让我耳目一新，让我认识到了考虑问题还可以从这么多的层面去看，非常开心和我的队友们有这次合作。

成员5：这次的课程设计让我们第一次正式的体会到软件开发的全过程，每个人都有自己的任务，最后将大家的做出的合并在一起形成一个完整的体系，最后成果出来的时候有满满的成就感。而且这对我们我们的课程设计毕业设计等都有很大的帮助。遗憾的是时间太短，最终没有完成我们最初期对这个软件的构想，但也学习收获了很多。虽然这次课程设计结束了，但我们的学习之路还没有结束，临近毕业，我们依旧不能停止学习、扩充自己，要不停的为以后的学习、工作打下基础。

6.附录

程序清单

index.html //导航栏部分

cart.html //喜欢模块

home.html //主页模块

profile.html //个人中心

msg-con.html //消息模块

search.html //搜索模块

profile.css //个人中心所用CSS

common.css //通用CSS

Fun.css //消息模块所用CSS

7.参考文献

[1] 杨选辉．网页设计与制作教程.北京：清华大学出版社.2006

[2] 詹国华，潘红等．多媒体网页设计教程，.北京：高等教育出版社.2009

[3] 贾珺．动态网站设计与开发项目教程, 中国电力出版社.2009

[4] Bruce Eckel等.《Thinking in Java》机械工业出版社

[5] 乔保军等.《Java Web应用开发与实践(第二版)》清华大学出版社

[6] Ryan Benedettl&Ronan Cranley等.《Head First jQuery》中国电力出版社

8.PPT项目展示

9.核心代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <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>

【实训项目】“万里挑衣” 项目

1.设计摘要

2.设计的模式及产品目标

2.1 模式

2.2 目标

2.2.1借出方方面

2.2.2租方方面

2.2.3商家方面

3.设计的创新与优势

4.设计的具体实现

4.1 项目的可行性分析

4.2项目的需求分析

4.3项目的总体设计

4.4项目的详细设计及实现

4.4.1个人中心：

4.4.2搜索模块

4.4.3上架模块

4.4.4消息模块

4.4.5想要模块

4.4.6主页

4.5项目的测试与运行

5.心得体会及建议

6.附录

7.参考文献

8.PPT项目展示

9.核心代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【实训项目】“万里挑衣” 项目

1.设计摘要

2.设计的模式及产品目标

2.1 模式

2.2 目标

2.2.1借出方方面

2.2.2租方方面

2.2.3商家方面

3.设计的创新与优势

4.设计的具体实现

4.1 项目的可行性分析

4.2项目的需求分析

4.3项目的总体设计

4.4项目的详细设计及实现

4.4.1个人中心：

4.4.2搜索模块

4.4.3上架模块

4.4.4消息模块

4.4.5想要模块

4.4.6主页

4.5项目的测试与运行

5.心得体会及建议

6.附录

7.参考文献

8.PPT项目展示

9.核心代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景