1. Design Summary
For college students, they often buy special expensive clothes for activities or other reasons, such as formal clothes, and they have nowhere to put them after wearing them once. However, some people may need such clothes urgently, and there is not enough time for temporary ordering. If you want to rent it, there is no one you know or the size does not match. If you don’t know it, you don’t know where to borrow it. It takes time and effort to ask many people, and finally it will be in your hands after many rounds. Returning it is another time. twists and turns. Another example is that a large-scale event such as a chorus needs to rent a large amount of clothing. First, students need to travel to multiple shops to compare, and second, the school is remote and inconvenient, which is time-consuming and laborious. Therefore, it is necessary to develop a clothing rental system that is convenient for everyone to deal with the clothing of college students.
The system gives the design and implementation of each functional module of the client. The main functional modules designed and implemented include personal center, search module, shelf module, message module and want module. Among them, the administrator-related functions in the user management module are implemented on the WEB side. Under the existing conditions, the system only supports the use of the students of the school and merchants settled in the same city.
2. Design mode and product goals
2.1 Mode
"Baiyi Baishun" APP adopts the mode of O2O online communication and payment, and offline service. For users, "Bai Yi Bai Shun" provides users with a platform where they can rent clothes conveniently, and at the same time they can effectively rent out their idle clothes.
2.2 Goals
2.2.1 Lending side
Let students have a place to store their idle clothes. It can provide it with: putting on/off its own clothes at any time, free pricing, the specific transaction amount can be communicated with the buyer, and contact information can be added to facilitate the buyer's contact. The service fee charged by the platform is determined according to the final transaction amount.
2.2.2 The lessor side
It allows students to find the clothes they need in an emergency. It can provide: you can search for clothes according to keywords, you can directly select search conditions to search for clothes, and you can sort by price.
2.2.3 Merchants
It can greatly increase the rental rate of merchant information, shorten the time for users to find clothes, and improve the efficiency of merchants.
3. Design innovation and advantages
The "Bai Yi Bai Shun" APP can not only help users find the type of clothes they need at any time, so that users don't have to travel around to borrow clothes. Secondly, it is much more convenient when users want to rent out their clothes, and a small amount of blood can be returned to more expensive clothes. This APP brings great convenience to ordinary students, club managers or organization managers, and can solve the inconvenience of renting clothes for students.
4. The specific implementation of the design
4.1 Feasibility analysis of the project
The "Bai Yi Bai Shun" APP can not only help users find the type of clothes they need at any time, so that users don't have to travel around to borrow clothes. Secondly, it is much more convenient when users want to rent out their clothes, and a small amount of blood can be returned to more expensive clothes. This APP brings great convenience to ordinary students, club managers or organization managers, and can solve the inconvenience of renting clothes for students. The "Bai Yi Bai Shun" APP adopts the mode of online communication and payment, and offline service. For users, "Bai Yi Bai Shun" provides users with a platform where they can rent clothes conveniently, and at the same time they can effectively rent out their idle clothes.
4.2 Requirements analysis of the project
Nowadays, people pay more attention to their own life experience. Many schools and companies will hold various evening parties on some important festivals, especially on university campuses. This situation abounds. In large-scale evening parties, in order to show their strength and give students a more exciting entertainment experience, many colleges often rent a large number of performance costumes for the host and participants before the performance. So, what kind of clothes are more suitable for relevant parties? The scene and what kind of clothes will fit better will become the troubles of the college leaders; the upcoming college graduation season is also the highlight of renting clothes. Therefore, how to borrow suitable-sized, clean and tidy bachelor uniforms has become a difficult problem for the majority of students; in addition, nowadays college students are keen on online shopping, but many of the clothes they buy are always hidden in the closet after wearing them several times, losing Knowing the meaning of clothes, how to deal with these clothes is enough to cause headaches. Therefore, once an APP that can solve these problems appears, it will inevitably attract a large number of customers and solve their urgent needs.
4.3 Overall Design of the Project
The "Baiyi Baishun" APP is divided into five modules: personal center, search module, shelf module, message module, and want module.
4.4 Detailed design and realization of the project
When opening the APP for the first time, the user will be prompted to open the background message reminder, and the user needs to manually close it.
4.4.1 Personal center:
- User registration: When using the APP officially, you must first register. You can register directly with your mobile phone number, and the system randomly assigns names, which can be changed by yourself.
- Personal information: You can modify the name randomly assigned by the system, as well as gender, age, etc. We will ensure that the personal information provided by users will not be disclosed, and at the same time create a real, reliable, legal and orderly platform environment.
- My Orders: Including historical orders, each order will be marked whether it is rented out or borrowed.
- My listings: including clothes that have been on the shelves and are on the shelves, and include the transaction volume and total transaction amount of the clothing, and the total transaction amount will be displayed at the top.
- Browsing records: Save a certain number of browsing records for easy review.
- Settings: Click here to display several functions such as clearing cache, feedback, about us, and logout.
Figure 1-1 Screenshot of personal center code
Figure 1-2 Screenshot of personal center operation
4.4.2 Search module
You can search directly by keyword, or search by filtering conditions. The searched interface can also be further refined to search for conditions such as height and size, and you can also choose a sorting method.
Figure 2-1 Screenshot of search module code
Figure 2-2 Screenshot of the search module running
4.4.3 Shelving Modules
Take photos of your clothes and upload them, and you need to add information when uploading: applicable gender, applicable height, applicable size, applicable occasion, price, etc.
4.4.4 Message module
The place where the two parties communicate.
Figure 4-1 Screenshot of message module code
Figure 4-2 Screenshot of message module running
4.4.5 want module
After selecting the products you like, the interface will be displayed uniformly, which is convenient for multiple comparisons.
Figure 5-1 want module code screenshot
Figure 5-2 Screenshot of wanting to run the module
4.4.6 Home page
At the top is the carousel image, which provides users with the most intuitive recommendations; in the middle is content classification, which users can view according to the conditions they need; at the end is content recommendation, which randomly recommends clothes they may need for users.
Figure 6-1 Screenshot of the carousel code
Figure 6-2 Screenshot of home page classification code
Figure 6-3 Screenshot of home page recommendation code
Figure 6-4 Screenshot of running the home page
The function implementation of the navigation bar is completed by the following code:
Figure 7 screenshot of navigation bar code
4.5 Project testing and operation
Navigation bar: The top and bottom of the navigation bar are a frame. When selecting different areas below, different pages are filled according to the options. At the beginning, when the navigation bar was changed from five options to four options, I didn’t understand this, which brought a lot of trouble to the course design. Very difficult.
Chat part: The biggest problem encountered in this part is the CSS format. Since the real-time preview of the software cannot display the webpage, so that every change can only be done by generating a test package and installing it to the emulator to see whether it meets your expectations.
Personal Center: Deleted some unnecessary modules at the bottom, changed the matching of words and colors, etc. The login module only designs the interface, but does not complete the connection to the database.
Like the module: We set this page as a static page. The main problem we encountered was the CSS format. How to align and make the page less messy is the main problem we need to solve.
Home page: The home page has a lot of content, including carousels, classifications, recommendations, etc. There are many modules, and there are many linked web pages. You need to know what each part of the code does, how to find the part you want to change, etc. These are the tasks we have to accomplish.
Test method and steps
(1) Personal test: This course design is completed by the division of labor and cooperation of the group. Everyone only needs to test the module interface they are responsible for at the beginning. The main method of implementation is to preview in real time or generate a test package and install it on the simulator. The most commonly used is the emulator, because some people's computers do not support real-time preview, or the display ratio does not match the actual one.
(2) Overall testing: In the end, we put everyone's code together with the island. There is no difference between the test method and the individual test, but after connecting together, each change often causes other interfaces to be changed together, so that the test is even more difficult. Frequent and troublesome.
5. Experience and suggestions
Member 1: For me in this course design, what I got first was technical progress, and I learned the preliminary production of an APP. Teamwork is also very important to me. We discussed all the requirements of this APP together. As well as each module and many details, I feel that the more I talk about it, the more problems I find, and the more things I need to think about. I feel that it is not easy to make a small APP, and I feel that it is different from the people in the same group. The joy of collision of viewpoints.
Member 2: In this class, I reviewed the knowledge about the backend last semester, but encountered some problems. Then I learned some new knowledge about developing APP, which aroused my great interest. Although I did not participate in the actual work of the team in the early stage, I participated in the functional planning work at the early stage of the project, and also designed the front end of the project later. Although the final results of our group were not satisfactory, we have gained a lot of solutions to difficulties.
Member 3: This course is designed to make an application-type mobile app software. During the production process, I did not participate in the design due to the postgraduate entrance examination in the first week. In the second week, the overall structure of the software model has been formed, so I was simply responsible for the 'my interface' and 'product details page' production. Through this course setting, I have a deep understanding of how important teamwork is when working on a project. Under the leadership of the team leader, each member performed their own duties, and jointly realized the requirements of the project and achieved the expected results. Many thanks to each member of the group for their help and assistance.
Member 4: For me, the first thing I gained from this class is to have good teammates. The division of labor and cooperation in the group is very pleasant. Everyone performs their own duties and advises us throughout the design process. In just two weeks, I have a preliminary understanding of the production process of an online APP and participated in it. I am very happy. I think I have learned a new skill. When we discussed the feasibility of the project and the details of the homepage design in the early stage, each of us’s views The collision made me feel refreshed, and made me realize that considerations can be viewed from so many levels. I am very happy to have this cooperation with my teammates.
Member 5: This course design allows us to formally experience the whole process of software development for the first time. Everyone has their own tasks. Finally, everyone’s work will be combined to form a complete system, and the final result will come out. Sometimes there is a sense of accomplishment. And this is of great help to our course design, graduation design, etc. It is a pity that the time was too short, and we did not complete our initial conception of this software in the end, but we also learned a lot. Although the course design is over this time, our learning journey is not over yet. As we approach graduation, we still cannot stop learning and expanding ourselves, and we must continue to lay the foundation for future study and work.
6. Appendix
program list
index.html //navigation bar part
cart.html //like module
home.html //home page module
profile.html //Personal Center
msg-con.html //message module
login-con.html //login module
search.html //search module
profile.css //CSS used in personal center
common.css //Common CSS
Fun.css //CSS used by the message module
7. References
[1] Yang Xuanhui. Web Design and Production Tutorial. Beijing: Tsinghua University Press. 2006
[2] Zhan Guohua, Pan Hong and so on. Multimedia Web Design Course,. Beijing: Higher Education Press. 2009
[3] Jia Jun . Dynamic Website Design and Development Project Tutorial, China Electric Power Press. 2009
[4] Bruce Eckel et al. " Thinking in Java " Machinery Industry Press
[5] Qiao Baojun et al. " Java Web Application Development and Practice (Second Edition) " Tsinghua University Press
[6] Ryan Benedettl&Ronan Cranley et al. " Head First jQuery " China Electric Power Publishing House
8. PPT project display
9. Core code
<!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="">
</td>
<td tapmode onclick="">
</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>