APICloud成长记录 二 页面框架搭建调整

于 2016-08-25 10:46:24 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： APICloud混合式移动开发 文章标签： APICloud混合式移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35932345/article/details/52312388
版权
本文记录了使用APICloud进行混合移动应用开发时，如何搭建和调整home_frame.html页面的过程，深入探讨了APICloud技术在页面框架构建中的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<span style="font-family:Microsoft YaHei;font-size:14px;"></span>
<!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>main</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
    html,
            body {
                height: 100%;
                background-color: #f0f0f0;
            }
            
            body {//盒子布局
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-orient: vertical;//纵向布局
                -webkit-flex-flow: column;
                flex-flow: column;
            }
    //头部开始
    .header-outer {
                width: 100%;
                height: auto;
            }
            
            .header-item {
                position: relative;
                display: none;
            }
            
            .header-item-act {
                display: block;
            }
            
            header>div:nth-child(1) {
                position: relative;
                background-color: rgb(255, 132, 0);
                height: 50px;
            }
            
            header>div:nth-child(2) {
                position: relative;
                height: 50px;
                background-color: rgb(252, 252, 252);
            }
            
            header>div:nth-child(3) {
                position: relative;
                height: 50px;
                background-color: rgb(252, 252, 252);
            }
            /* header home */
            
            .home-citylist {
                float: left;
                height: 50px;
                line-height: 50px;
                color: #fff;
                font-size: 14px;
                margin-left: 15px;
            }
            
            .home-citylist>img {
                height: 20px;
                vertical-align: top;
                padding-top: 15px;
            }
            
            .home-search {
                position: absolute;
                bottom: 8px;
                left: 90px;
                right: 60px;
                height: 34px;
                line-height: 34px;
                background-color: rgb(250, 102, 4);
                border-radius: 34px;
                color: rgb(253, 194, 155);
                font-size: 14px;
            }
            
            .home-search>img {
                height: 20px;
                padding-top: 7px;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: top;
            }
            
            .home-msg {
                float: right;
            }
            
            .home-msg>img {
                height: 28px;
                padding-top: 11px;
                vertical-align: top;
                padding-left: 15px;
                padding-right: 15px;
            }
            /* header groupbuy */
            
            .groupbuy-citylist {
                float: left;
                height: 50px;
                line-height: 50px;
                color: rgb(255, 132, 0);
                font-size: 18px;
                margin-left: 15px;
            }
            
            .groupbuy-citylist>img {
                height: 15px;
                vertical-align: top;
                padding-top: 18px;
            }
            
            .groupbuy-search {
                position: absolute;
                bottom: 8px;
                left: 110px;
                right: 15px;
                height: 34px;
                line-height: 34px;
                background-color: rgb(232, 232, 232);
                border-radius: 34px;
                color: rgb(153, 153, 153);
                font-size: 14px;
            }
            
            .groupbuy-search>img {
                height: 20px;
                padding-top: 7px;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: top;
            }
            /* header search */
            
            .find-search {
                position: absolute;
                bottom: 8px;
                left: 15px;
                right: 60px;
                height: 34px;
                line-height: 34px;
                border-radius: 34px;
                background-color: rgb(232, 232, 232);
                color: rgb(153, 153, 153);
                font-size: 14px;
            }
            
            .find-search>img {
                height: 20px;
                padding-top: 7px;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: top;
            }
            
            .find-scanner {
                float: right;
                width: 50px;
                background: url(./image/header/qrcode_search.png) no-repeat center 6px;
                background-size: auto 24px;
                padding-top: 33px;
                color: rgb(153, 153, 153);
                font-size: 12px;
                text-align: center;
            }
            
            .find-scanner-hov {
                background-color: #ddd;
            }
    .place-holder{/*中间给其沾满空间*/
    width:100%;
    -webkit-box-flex: 1;
    -webkit-flex:1;
    flex:1;
    background-color:#3352CC;
    }
    /*给页脚盒子布局*/
    .footer{
    display:-webkit-box;
    display:-webkit-flex;
    -webkit-box-orient : horizontal;/*横向布局*/
    -webkit-flex-flow : row;
    flex-flow : row;
    width:100%;
    height :60px;
    background-color:red;
    }
    .footer .menu{
    box-sizing:border-box;
    padding-top:42px;
    padding-bottom:5px;
    -webkit-box-flex: 1;
    -webkit-flex:1;
    flex:1;
    height:60px;
    text-align:center;
    font-size:13px;
   
    background-size:30px 30px;
    background-position:center 6px;
    background-repeat:no-repeat;
    }
   
    .footer .home{
    background-image :url(../image/footer/home.png);
    }
    .footer .home.active{
    background-image :url(../image/footer/home_act.png);
    }
    .footer .groupbuy{
    background-image :url(../image/footer/groupbuy.png);
    }
    .footer .groupbuy.active{
    background-image :url(../image/footer/groupbuy_act.png);
    }
    .footer .find{
    background-image :url(../image/footer/find.png);
    }
    .footer .find.active{
    background-image :url(../image/footer/find_act.png);
    }
    .footer .my{
    background-image :url(../image/footer/my.png);
    }
    .footer .my.active{
    background-image :url(../image/footer/my_act.png);
    }
   
    .header{
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
    -webkit-box-orient: horizontal;
    -webkit-flex-flow:row;
    flex-flow:row;
    }
    </style>
</head>
<body>
<header id="header" class="header-outer">
            <div class="header-item header-item-act" id="home">
                <div class="home-citylist open-win" win="html/citylist">
                    <span class="currentCity">武汉</span>
                    <img src="../image/header/arrow_down_home.png">
                </div>
                <div class="home-search open-win" win="html/search">
                    <img src="../image/header/search_home.png">
                    <span>输入商户名、地点</span>
                </div>
                <div class="home-msg open-win" win="html/message">
                    <img src="../image/header/msg_home.png">
                </div>
            </div>
            <div class="header-item" id="groupbuy">
                <div class="groupbuy-citylist open-win" win="html/citylist">
                    <span class="currentCity">北京</span>
                    <img src="../image/header/arrow_down_groupbuy.png">
                </div>
                <div class="groupbuy-search open-win" win="html/search">
                    <img src="../image/header/search_groupbuy.png">搜索团购...
                </div>
            </div>
            <div class="header-item" id="find">
                <div class="find-search open-win" win="html/search">
                    <img src="../image/header/search_groupbuy.png"> 输入商户名、地点
                </div>
                <div class="find-scanner" tapmode="highlight" οnclick="fnOpenScanner()">
                    扫一扫
                </div>
            </div>
            <div class="header-item" id="my">
            </div>
        </header>
<div class="place-holder"></div>
<footer id="footer" class="footer">
<div class="menu home active" tapmode οnclick="showContent(0)">首页</div>
<div class="menu groupbuy" tapmode οnclick="showContent(1)">团购</div>
<div class="menu find" tapmode οnclick="showContent(2)">发现</div>
<div class="menu my" tapmode οnclick="showContent(3)">我的</div>

</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
init();
showContent(0);
};

var headers, menus,headerHeight,footerHeight;
function init(){
var header = $api.byId('header');
footer = $api.byId('footer');
headers = $api.domAll(header, '.header-item');//头部元素获取
//$api.fixIos7Bar(header);
menus = $api.domAll(footer, '.menu');
for(var i = 0;i < headers.length;i++){
$api.fixStatusBar(headers[i]);
}
headerHeight = $api.offset(header).h;//页眉高度
footerHeight = $api.offset(footer).h;//页脚高度
};



var frameNames = ['home_frame','groupbuy_frame','find_frame','my_frame'];//定义一个数组，通过数组来对头部以及尾部的元素切换，通过此连接到不同的页面，
//点击团购
function showContent(index){
for(var i = 0;i < menus.length;i++){
if(index == i ){//当index等于i时将元素添加上去
//对页尾
$api.addCls(menus[i], 'active');
//对页头
$api.addCls(headers[i], 'header-item-act');
var y = 3 == i ? 0 : headerHeight; //针对我的页面置顶需求,进行判断，当y=3时表示home页面没有头部，此是从零开始计算
//通过数组来循环操作
api.openFrame({
       name: frameNames[i],
       url: frameNames[i]+'.html',
       rect: {
       x:0,
       y:y,
       w:api.winWidth,
       h:api.winHeight - y - footerHeight
       }
    });
}else{
$api.removeCls(menus[i], 'active');//当元素离开时头部rm
$api.removeCls(headers[i], 'header-item-act');//当元素离开时 部rm
api.setFrameAttr({
       name: frameNames[i],
       hidden :true
       });

}
}
};
</script>

</html>




home_frame.html页面

<span style="font-family:Microsoft YaHei;"><!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>APICloud APP</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style>
            html,
            body {
                height: 100%;
                width: 100%;
                background-color: rgb(240, 240, 240);
            }
            /* swipe begin. */
            
            #swipe {
                position: relative;
                overflow: hidden;
                visibility: hidden;
                background-color: #fff;
            }
            
            .swipe-wrap {
                overflow: hidden;
                padding-bottom: 24px;
            }
            
            .swipe-page {
                float: left;
                width: 100%;
                position: relative;
            }
            
            .swipe-page-item {
                float: left;
                width: 25%;
                text-align: center;
            }
            
            .swipe-page-item>img {
                width: 60%;
                margin-top: 10px;
            }
            
            .swipe-page-item>span {
                display: block;
                font-size: 13px;
                margin-top: 5px;
            }
            
            #swipeIndicator {
                position: absolute;
                left: 50%;
                bottom: 0px;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
            }
            
            #swipeIndicator li {
                height: 24px;
                line-height: 24px;
                width: 16px;
                float: left;
                background: url(../image/swipe/indicator.png) no-repeat center center;
                background-color: transparent;
                background-size: 8px 8px;
            }
            
            #swipeIndicator li.active {
                background: url(../image/swipe/indicator_act.png) no-repeat center center;
                background-color: transparent;
                background-size: 8px 8px;
            }
            /* swipe end. */
            
            .h80 {
                height: 80px;
            }
            
            .h40 {
                height: 40px;
            }
            
            .h20 {
                height: 20px;
            }
            
            .h10 {
                height: 10px;
                background: #f0f0f0;
            }
            
            .h1 {
                height: 1px;
                margin-left: 15px;
                background: #f0f0f0;
            }
            
            .fr {
                float: right;
            }
            
            .fl {
                float: left;
            }
            
            .hightitem {
                background-color: #fff;
            }
            /* 抢购样式 */
            
            .snapup {
                height: 80px;
            }
            
            .snapup .infologo {
                height: 60px;
                margin: 10px;
            }
            
            .snapup .shelf2 {
                display: table;
                height: inherit;
                margin-left: 10px;
            }
            
            .snapup .shelfcell {
                display: table-cell;
                vertical-align: middle;
            }
            
            .snapup .shelfcell .title {
                margin-bottom: 10px;
            }
            
            .snapup .arrow {
                width: 20px;
                padding-top: 30px;
                padding-right: 10px;
            }
            /* 2X2样式 */
            
            .row {
                display: -webkit-box;
                display: -webkit-flex;
            }
            
            .col {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                position: relative;
            }
            
            .col img {
                position: absolute;
                right: 0;
                width: 80px;
                top: 0;
            }
            
            .col .matrixcell {
                display: table-cell;
                vertical-align: middle;
                padding-left: 10px;
            }
            
            .col .matrixcell .title {
                margin-bottom: 10px;
            }
            
            .matrix {
                display: table;
                height: inherit;
            }
            /* 猜你喜欢 */
            
            .guesstitle {
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                vertical-align: top;
                font-size: 12px;
                color: #999;
            }
            
            .guesstitle img {
                height: 15px;
                padding-top: 12px;
                padding-left: 10px;
            }
            
            .home-tuan-list .item {
                position: relative;
                display: block;
                padding-left: 10px;
                border-bottom: 1px solid #e0e0e0;
            }
            
            .home-tuan-list .cnt {
                padding: 7px 10px 10px 0;
                display: box;
                display: -webkit-box;
                min-height: 78px;
                background-size: auto 1px;
            }
            
            .home-tuan-list .pic {
                margin-right: 10px;
                background: center;
            }
            
            .home-tuan-list img {
                width: 90px;
                height: 66px;
                margin-top: 7px;
                margin-bottom: 5px;
                border-radius: 3px;
            }
            
            .home-tuan-list .wrap {
                -webkit-box-flex: 1;
            }
            
            .home-tuan-list .wrap2 {
                display: table;
                height: 88px;
                width: 100%;
            }
            
            .home-tuan-list .content {
                -webkit-box-flex: 1;
                box-flex: 1;
                display: table-cell;
                vertical-align: middle;
            }
            
            .home-tuan-list .shopname {
                color: #333;
                /*line-height: 16px;*/
                font-size: 17px;
                max-width: 11em;
                white-space: nowrap;
                word-wrap: normal;
                text-overflow: ellipsis;
                overflow: hidden;
                min-height: 10px;
                padding-bottom: 2px;
                padding-top: 3px;
                display: inline-block;
            }
            
            .home-tuan-list .title {
                color: #666;
                line-height: 16px;
                font-size: 13px;
                max-height: 30px;
                overflow: hidden;
                padding-top: 3px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            
            .home-tuan-list .hot-title {
                margin-bottom: 8px;
            }
            
            .home-tuan-list .hot-subtitle {
                margin-bottom: 9px;
            }
            
            .home-tuan-list .info {
                margin-top: 9px;
                /*margin-bottom: 11px;*/
                color: #666;
                font-size: 12px;
                position: relative;
                line-height: 15px;
                display: box;
                display: -webkit-box;
                height: 15px;
            }
            
            .home-tuan-list .symbol {
                font-size: 14px;
                color: #f60;
                display: block;
                margin-top: 1px;
            }
            
            .home-tuan-list .price {
                color: #f60;
                font-size: 20px;
                line-height: 15px;
                margin-right: 5px;
                margin-top: 1px;
            }
            
            .home-tuan-list .o-price {
                color: #999;
                margin-top: 5px;
                line-height: 10px;
            }
            
            .home-tuan-list .sale {
                color: #f63;
                border: solid 1px #ff916e;
                padding: 3px 2px 2px;
                font-size: 10px;
                border-radius: 2px;
                -webkit-border-radius: 2px;
                margin-left: 5px;
                line-height: 10px;
                height: 10px;
            }
            
            .home-tuan-list .distance {
                -webkit-box-flex: 1;
                box-flex: 1;
                -ms-box-flex: 1;
                -ms-flex: 1;
                text-align: right;
                line-height: 10px;
                margin-top: 5px;
                color: #999;
                float: right;
                font-size: 12px;
            }
            
            .home-tuan-list .price,
            .index-rec .home-tuan-list .o-price,
            .index-rec .home-tuan-list .distance,
            .index-rec .home-tuan-list .sale {
                display: block;
                line-height: 15px;
                font-size: 12px;
            }
            
            .Fix:after {
                display: block;
                content: '';
                height: 0;
                clear: both;
            }
            /* 3. */
            
            .section03 .col img {
                width: 60px;
                top: 10px;
            }
            
            .section03 .title01 .title {
                color: #965037;
            }
            
            .section03 .title02 .title {
                color: #ffa001;
            }
            
            .section03 .title03 .title {
                color: #ff558c;
            }
            
            .section03 .title04 .title {
                color: #19b4ff;
            }
            
            .section03 .matrixcell .info {
                color: #666;
            }
            /* 2. */
            
            .section02 .shelfcell .title span {
                color: #ff6633;
            }
            
            .section02 .shelfcell .subtitel {
                color: #666;
                font-size: 14px;
            }
            
            .swiper-container {
                background-color: #fff;
            }
            
            .item-hov {
                background-color: #FAFAFA;
            }
            
            .brb {
                border-bottom: 1px solid #e0e0e0;
                border-right: 1px solid #e0e0e0;
            }
            
            .bb {
                border-bottom: 1px solid #e0e0e0;
            }
            
            .br {
                border-right: 1px solid #e0e0e0;
            }
            
            .highlight {
                opacity: 0.7;
            }
        </style>
    </head>

    <body>
        <div class="h1"></div>
        <section id="swipe" class="section01">
            <div class="swipe-wrap">
                <div class="swipe-page">
                    <div class="swipe-page-row">
                        <div class="swipe-page-item">
                            <img src="../image/swipe/around.png">
                            <span>周边</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/beauty.png">
                            <span>丽人</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/children.png">
                            <span>亲子</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/decorate.png">
                            <span>家装</span>
                        </div>
                    </div>
                    <div class="swipe-page-row">
                        <div class="swipe-page-item">
                            <img src="../image/swipe/dessert.png">
                            <span>小吃快餐</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/discount.png">
                            <span>找优惠</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/food.png">
                            <span>美食</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/hotel.png">
                            <span>酒店</span>
                        </div>
                    </div>
                </div>
                <div class="swipe-page">
                    <div class="swipe-page-row">
                        <div class="swipe-page-item">
                            <img src="../image/swipe/house.png">
                            <span>到家</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/marry.png">
                            <span>婚庆</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/ktv.png">
                            <span>KTV</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/massage.png">
                            <span>足疗按摩</span>
                        </div>
                    </div>
                    <div class="swipe-page-row">
                        <div class="swipe-page-item">
                            <img src="../image/swipe/movie.png">
                            <span>电影</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/pet.png">
                            <span>宠物</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/rank.png">
                            <span>排行榜</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/relax.png">
                            <span>休闲娱乐</span>
                        </div>
                    </div>
                </div>
                <div class="swipe-page">
                    <div class="swipe-page-row">
                        <div class="swipe-page-item">
                            <img src="../image/swipe/reserve.png">
                            <span>预定</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/pub.png">
                            <span>俱乐部</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/shopping.png">
                            <span>购物</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/snack.png">
                            <span>面包甜点</span>
                        </div>
                    </div>
                    <div class="swipe-page-row">
                        <div class="swipe-page-item">
                            <img src="../image/swipe/sport.png">
                            <span>运动</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/takeaway.png">
                            <span>外卖</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/trip.png">
                            <span>周边游</span>
                        </div>
                        <div class="swipe-page-item">
                            <img src="../image/swipe/more.png">
                            <span>全部分类</span>
                        </div>
                    </div>
                </div>
            </div>
            <ul id="swipeIndicator">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </section>
        <div class="h20"></div>
        <div class="snapup hightitem section02">
            <img src="../image/home/flash_sale.png" class="fl infologo">
            <div class="shelf2 fl">
                <div class="shelfcell">
                    <div class="title">新时空休闲会所<span>￥159</span></div>
                    <span class="subtitel">每天十点开抢</span>
                </div>
            </div>
            <img src="../image/arrow.png" class="arrow fr">
        </div>
        <div class="h20"></div>
        <div class="row hightitem section03">
            <div class="col h80 brb">
                <div class="matrix">
                    <div class="matrixcell title01">
                        <div class="title">免费吃喝玩</div>
                        <div class="info">新用户专享</div>
                    </div>
                </div>
                <img src="../image/home/cover_02.png" class="fl">
            </div>
            <div class="col h80 bb">
                <div class="matrix">
                    <div class="matrixcell title02">
                        <div class="title">免费看电影</div>
                        <div class="info">新用户专享</div>
                    </div>
                </div>
                <img src="../image/home/cover_01.png" class="fl">
            </div>
        </div>
        <div class="row hightitem section03">
            <div class="col h80 br">
                <div class="matrix">
                    <div class="matrixcell title03">
                        <div class="title">食色性也</div>
                        <div class="info">光棍节等你来</div>
                    </div>
                </div>
                <img src="../image/home/cover_03.png" class="fl">
            </div>
            <div class="col h80">
                <div class="matrix">
                    <div class="matrixcell title04">
                        <div class="title">点评祝福</div>
                        <div class="info">单身用户专享</div>
                    </div>
                </div>
                <img src="../image/home/cover_04.png" class="fl">
            </div>
        </div>
        <div class="guesstitle">猜你喜欢<img src="../image/home/competitive_icon.png" alt=""></div>
        <div id="list" class="home-tuan-list">
            <div class="item Fix hightitem">
                <div class="cnt">
                    <img class="pic" src="../image/default.jpg">
                    <div class="wrap">
                        <div class="wrap2">
                            <div class="content">
                                <div class="shopname">商家名称</div>
                                <span class="distance">距离</span>
                                <div class="title">商家描述</div>
                                <div class="info">
                                    <span class="symbol">¥</span>
                                    <span class="price">价格</span>
                                    <span class="sale">1%返利</span>
                                    <span class="sale">减10元</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/swipe.js"></script>
    <script type="text/javascript">
        apiready = function() {
			init();
			initSwipe();
        };
        
        var swipe,indicators;
        function init(){
        	swipe = $api.byId('swipe');
        	var indicator = $api.byId('swipeIndicator');
        	indicators = $api.domAll(indicator, 'li');
        }
        //首页滑动导航
        function initSwipe(){//此是引用了</span><span style="font-family: "Microsoft YaHei";">swipe.js做的滑动导航</span><span style="font-family:Microsoft YaHei;">
        	new Swipe(swipe,{
        		callback:function(index){
        			for(var i = 0;i<indicators.length;i++){
        			if(i==index){
        				$api.addCls(indicators[i], 'active');
        				}else{
        					$api.removeCls(indicators[i], 'active');
        				}
        			}
        		}
        	});
        
        }
    </script>

</html>
</span>
my_frame页面： 

<span style="font-family:Microsoft YaHei;"><!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>APICloud APP</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style>
            html,
            body {
                height: 100%;
                background-color: #f0f0f0;
            }
            
            .h10 {
                height: 10px;
                background: #f0f0f0;
            }
            
            .h1 {
                height: 1px;
                margin-left: 15px;
                background: #f0f0f0;
            }
            
            .fr {
                float: right;
            }
            
            .hint {
                color: #666;
                font-size: 12px;
                margin-right: 5px;
            }
            
            .firstblock,
            .secondblock,
            .thirdblock {
                background-color: #fff;
            }
            
            .login {
                background-image: url(../image/my/personal_bkg.jpg);
                background-repeat: no-repeat;
                background-size: contain;
                position: relative;
            }
            
            .loginbg {
                width: 100%;
            }
            
            .login .personal_logo {
                position: absolute;
                top: 60px;
                width: 64px;
                height: 64px;
                left: 20px;
            }
            
            .person_arrow {
                position: absolute;
                height: 20px;
                right: 10px;
                top: 90px;
            }
            
            .login .userinfo {
                position: absolute;
                top: 60px;
                margin-left: 100px;
            }
            
            .login .userinfo .title {
                font-size: 20px;
                color: #fff;
            }
            
            .login .userinfo .subtitle {
                font-size: 14px;
                color: #fff;
                border: 1px solid #fff;
                display: inline-block;
                padding: 3px;
                border-radius: 4px;
                margin-top: 5px;
            }
            
            .item {
                height: 50px;
                line-height: 50px;
                padding-left: 15px;
                background-color: #fff;
            }
            
            .item_ico {
                float: left;
                width: 30px;
                padding: 10px 10px 10px 0;
            }
            
            .item_arrow {
                float: right;
                width: 16px;
                padding: 17px 15px 15px 0;
            }
            
            .item-hov {
                background-color: #E8E8E8;
            }
        </style>
    </head>

    <body>
        <div class="login">
            <img src="../image/my/personal_bkg.jpg" class="loginbg">
            <img id="userAvatar" src="../image/my/profile_default.png" class="personal_logo">
            <div class="userinfo">
                <div id="userAccount" class="title">点击登录</div>
                <div id="userRegion" class="subtitle">常居地：未设置</div>
            </div>
            <img src="../image/my/personal_icon_arrow.png" class="person_arrow">
        </div>
        <div class="h10"></div>
        <div class="firstblock">
            <div class="item">
                <img src="../image/my/my_order_user_icon_normal.png" alt="" class="item_ico">
                <span>我的订单</span>
                <img src="../image/arrow.png" class="item_arrow">
            </div>
            <div class="h1"></div>
            <div class="item">
                <img src="../image/my/my_coupon_user_icon_normal.png" class="item_ico">
                <span>我的团购券</span>
                <img src="../image/arrow.png" class="item_arrow">
            </div>
        </div>
        <div class="h10"></div>
        <div class="secondblock">
            <div class="item">
                <img src="../image/my/my_favorite_user_icon_normal.png" class="item_ico">
                <span>我的收藏</span>
                <img src="../image/arrow.png" class="item_arrow">
            </div>
            <div class="h1"></div>
            <div class="item">
                <img src="../image/my/my_history_user_icon_normal.png" class="item_ico">
                <span>最近浏览</span>
                <img src="../image/arrow.png" class="item_arrow">
            </div>
            <div class="h1"></div>
        </div>
        <div class="h10"></div>
        <div class="thirdblock">
            <div class="h1"></div>
            <div class="item">
                <img src="../image/my/my_setting_user_icon_normal.png" class="item_ico">
                <span>设置</span>
                <img src="../image/arrow.png" class="item_arrow">
            </div>
        </div>
        <div class="h10"></div>
        <div class="h10"></div>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript">
        apiready = function() {

        };
    </script>

</html></span>
find_frame页面 

<span style="font-family:Microsoft YaHei;"><!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>APICloud APP</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style>
            html,
            body {
                height: 100%;
                background: #f0f0f0;
            }
            
            .h1 {
                height: 1px;
            }
            
            .h80 {
                height: 80px;
            }
            
            .h40 {
                height: 40px;
                line-height: 40px;
            }
            
            .h20 {
                height: 20px;
            }
            
            .h10 {
                height: 10px;
                background: #f0f0f0;
            }
            
            .hightitem {
                background-color: #fff;
            }
            
            .sectionTitle {
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                vertical-align: top;
                font-size: 12px;
                color: #999;
            }
            
            .row {
                display: -webkit-box;
                display: -webkit-flex;
            }
            
            .col {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                position: relative;
            }
            
            .col img {
                position: absolute;
                right: 0;
                width: 80px;
                top: 0;
            }
            
            .col .matrix3 {
                display: table;
                height: inherit;
                width: 100%;
            }
            
            .matrix3 .matrixcell {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            
            .petty {
                height: 50%;
                width: 100%;
                float: left;
            }
            
            .brb {
                border-bottom: 1px solid #e0e0e0;
                border-right: 1px solid #e0e0e0;
            }
            
            .bb {
                border-bottom: 1px solid #e0e0e0;
            }
            
            .br {
                border-right: 1px solid #e0e0e0;
            }
            
            .section02 .col img {
                position: relative;
            }
            
            .section02 .col .petty {
                text-align: center;
                font-size: 20px;
                padding-top: 10px;
            }
            
            .section02 .col .petty img {
                width: 40%;
                margin-top: 10px;
            }
            
            .section02 .logocover {
                text-align: center;
                margin-top: 20px;
            }
            
            .section02 .logocover img {
                width: 80%;
            }
            
            .section02 .title {
                font-size: 20px;
                margin-top: 10px;
            }
            
            .section02 .subtitle {
                font-size: 14px;
                margin-top: 5px;
                color: #666;
            }
            
            .section03 .matrixcell {
                text-align: left;
                margin-left: 10px;
            }
            
            .section03 .col img {
                position: absolute;
                right: 10px;
                top: 10px;
                left: inherit;
                width: 50px;
            }
            
            .section03 .col {
                height: 80px;
            }
            
            .section03 .col .title {
                margin-left: 10px;
                font-size: 18px;
            }
            
            .section03 .col .subtitle {
                font-size: 13px;
                color: #666;
                margin-left: 10px;
                margin-top: 10px;
            }
            
            .card-list {
                position: relative;
                height: auto;
            }
            
            .card {
                border: 1px solid #e0e0e0;
                margin: 0 5px;
            }
            
            .card .upimg {
                position: relative;
            }
            
            .card .upimg img {
                width: 100%;
                height: 150px;
            }
            
            .card .title,
            .card .subtitle {
                font-size: 14px;
                bottom: 25px;
                color: #fff;
                margin-left: 10px;
                margin-top: 10px;
            }
            
            .card .hot {
                position: absolute;
                bottom: 5px;
                margin-left: 10px;
            }
            
            .card .hot span {
                color: #fff;
            }
            
            .card .downinfo {
                padding: 10px;
                font-size: 14px;
                color: #666;
                line-height: 20px;
            }
            
            .card .info {
                background-color: rgba(0, 0, 0, 0.4);
                position: absolute;
                bottom: 0px;
                width: 100%;
                padding-bottom: 5px;
            }
            
            .viewed-eye .eye {
                display: inline-block;
                width: 16px;
                height: 16px;
                background: url(../image/eye.png) no-repeat;
                background-size: 11px auto;
                margin-bottom: -3px;
            }
            
            .card .img_wrap {
                position: absolute;
                right: 0;
                bottom: 10px;
            }
            
            .card .subtitle {
                font-size: 12px;
                margin-top: 5px;
            }
            
            .card .viewed-eye {
                background-color: #000;
                padding: 5px;
                border-radius: 20px;
                color: #fff;
                font-size: 14px;
            }
            
            .highlight {
                opacity: 0.7;
            }
        </style>
    </head>

    <body>
        <div class="h1"></div>
        <div class="row hightitem section02">
            <div class="col br" tapmode="highlight" οnclick="fnOpenSearchResult('KTV')">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">身边热闹</div>
                        <div class="subtitle">发现新玩法</div>
                    </div>
                </div>
                <div class="logocover"><img src="../image/find/logo_01.png"></div>
            </div>
            <div class="col br" tapmode="highlight" οnclick="fnOpenSearchResult('家居')">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">品牌优惠</div>
                        <div class="subtitle">热门快餐5折起</div>
                    </div>
                </div>
                <div class="logocover"><img src="../image/find/logo_02.png"></div>
            </div>
            <div class="col">
                <div class="petty bb" tapmode="highlight" οnclick="fnOpenSearchResult('影视')">
                    看排行
                    <div class=""><img src="../image/find/logo_03.png">
                    </div>
                </div>
                <div class="petty" tapmode="highlight" οnclick="fnOpenSearchResult('俱乐部')">
                    查商区
                    <div class=""><img src="../image/find/logo_04.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="sectionTitle">免费领取</div>
        <div class="row hightitem section03">
            <div class="col brb" tapmode="highlight" οnclick="fnOpenShopList(1,-1)">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">最热0元抢</div>
                        <div class="subtitle">还不来就晚了</div>
                    </div>
                </div>
                <img src="../image/find/logo_05.png">
            </div>
            <div class="col bb" tapmode="highlight" οnclick="fnOpenShopList(1,-1)">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">天天霸王餐</div>
                        <div class="subtitle">白吃白喝白玩</div>
                    </div>
                </div>
                <img src="../image/find/logo_06.png" alt="">
            </div>
        </div>
        <div class="sectionTitle">趣味生活</div>
        <div id="list" class="card-list">
            <div class="card hightitem">
                <div class="upimg">
                    <img id="img_{{= data.id }}" src="../image/default1.jpg">
                    <div class="info">
                        <div class="title">标题</div>
                        <div class="subtitle">子标题</div>
                        <div class="img_wrap">
                            <div class="viewed-eye"><i class="eye"></i>热度</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="h10"></div>
        </div>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript">
        apiready = function() {

        };
    </script>

</html>
</span>
groupbuy_frame页面： 

<span style="font-family:Microsoft YaHei;"><!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>APICloud APP</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style>
            html,
            body {
                height: 100%;
                background-color: #f0f0f0;
            }
            
            .h1 {
                height: 1px;
            }
            
            .h20 {
                height: 20px;
            }
            
            .h40 {
                height: 40px;
                line-height: 40px;
            }
            
            .row {
                display: -webkit-box;
                display: -webkit-flex;
                flex: display;
            }
            
            .col {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                position: relative;
            }
            
            .hightitem {
                background-color: #fff;
            }
            
            .brb {
                border-bottom: 1px solid #e0e0e0;
                border-right: 1px solid #e0e0e0;
            }
            
            .bb {
                border-bottom: 1px solid #e0e0e0;
            }
            
            .matrix3 {
                display: table;
                height: inherit;
                width: 100%;
            }
            
            .matrix3 .matrixcell {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            
            .col img {
                width: 20px;
                position: relative;
                top: 5px;
                left: -4px;
            }
            
            .section02 .logocover {
                text-align: center;
                margin-top: 5px;
            }
            
            .section02 .col img {
                width: 70%;
                margin-bottom: 3px;
            }
            
            .section02 .title {
                margin-top: 10px;
            }
            
            .section02 .title div {
                font-size: 14px;
                color: #666;
                margin-top: 5px;
            }
            
            .title0201 .title {
                color: #FE8501;
            }
            
            .title0202 .title {
                color: #83B235;
            }
            
            .title0203 .title {
                color: #2E8AE0;
            }
            
            .section03 .matrixcell {
                text-align: left;
                margin-left: 10px;
            }
            
            .section03 .col img {
                position: absolute;
                right: 10px;
                top: 10px;
                left: inherit;
                width: 60px;
            }
            
            .section03 .col {
                height: 60px;
            }
            
            .section03 .col .title {
                margin-left: 10px;
                font-size: 14px;
            }
            
            .section03 .col .subtitle {
                margin-left: 10px;
                margin-top: 5px;
                font-size: 12px;
                color: #666;
            }
            
            .tabbar {
                text-align: center;
            }
            
            .tabbar .col {
                background-color: '#000';
            }
            
            .tabbar .col-act {
                background-color: '#f60';
            }
            
            .indicator {
                height: 3px;
                width: 100%;
                background: #f60;
                position: absolute;
                bottom: 0;
                display: none;
            }
            
            .indicator-act {
                display: block;
            }
            
            .home-tuan-list {
                display: none;
            }
            
            .home-tuan-list-act {
                display: block;
            }
            
            .home-tuan-list .item {
                position: relative;
                display: block;
                padding-left: 10px;
                border-bottom: 1px solid #e0e0e0;
            }
            
            .home-tuan-list .cnt {
                padding: 7px 10px 10px 0;
                display: box;
                display: -webkit-box;
                min-height: 78px;
                background-size: auto 1px;
            }
            
            .home-tuan-list .pic {
                margin-right: 10px;
                background: center;
            }
            
            .home-tuan-list img {
                width: 90px;
                height: 66px;
                margin-top: 7px;
                margin-bottom: 5px;
                border-radius: 3px;
            }
            
            .home-tuan-list .wrap {
                -webkit-box-flex: 1;
            }
            
            .home-tuan-list .wrap2 {
                display: table;
                height: 88px;
                width: 100%;
            }
            
            .home-tuan-list .content {
                -webkit-box-flex: 1;
                box-flex: 1;
                display: table-cell;
                vertical-align: middle;
            }
            
            .home-tuan-list .shopname {
                color: #333;
                font-size: 17px;
                max-width: 11em;
                white-space: nowrap;
                word-wrap: normal;
                text-overflow: ellipsis;
                overflow: hidden;
                min-height: 10px;
                padding-bottom: 2px;
                padding-top: 3px;
                display: inline-block;
            }
            
            .home-tuan-list .title {
                color: #666;
                line-height: 16px;
                font-size: 13px;
                max-height: 30px;
                overflow: hidden;
                padding-top: 3px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            
            .home-tuan-list .hot-title {
                margin-bottom: 8px;
            }
            
            .home-tuan-list .hot-subtitle {
                margin-bottom: 9px;
            }
            
            .home-tuan-list .info {
                margin-top: 9px;
                color: #666;
                font-size: 12px;
                position: relative;
                line-height: 15px;
                display: box;
                display: -webkit-box;
                height: 15px;
            }
            
            .home-tuan-list .symbol {
                font-size: 14px;
                color: #f60;
                display: block;
                margin-top: 1px;
            }
            
            .home-tuan-list .price {
                color: #f60;
                font-size: 20px;
                line-height: 15px;
                margin-right: 5px;
                margin-top: 1px;
            }
            
            .home-tuan-list .o-price {
                color: #999;
                margin-top: 5px;
                line-height: 10px;
            }
            
            .home-tuan-list .sale {
                color: #f63;
                border: solid 1px #ff916e;
                padding: 3px 2px 2px;
                font-size: 10px;
                border-radius: 2px;
                -webkit-border-radius: 2px;
                margin-left: 5px;
                line-height: 10px;
                height: 10px;
            }
            
            .home-tuan-list .distance {
                -webkit-box-flex: 1;
                box-flex: 1;
                -ms-box-flex: 1;
                -ms-flex: 1;
                text-align: right;
                line-height: 10px;
                margin-top: 5px;
                color: #999;
                float: right;
                font-size: 12px;
            }
            
            .home-tuan-list .price,
            .index-rec .home-tuan-list .o-price,
            .index-rec .home-tuan-list .distance,
            .index-rec .home-tuan-list .sale {
                display: block;
                line-height: 15px;
                font-size: 12px;
            }
            
            .Fix:after {
                display: block;
                content: '';
                height: 0;
                clear: both;
            }
            
            .highlight {
                opacity: 0.7;
            }
        </style>
    </head>

    <body>
        <div class="h1"></div>
        <div class="row hightitem">
            <div class="col h40 brb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/food.png">美食</div>
                    </div>
                </div>
            </div>
            <div class="col h40 brb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/movie.png">电影</div>
                    </div>
                </div>
            </div>
            <div class="col h40 bb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/hotel.png">酒店</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row hightitem">
            <div class="col h40 brb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/ktv.png">KTV</div>
                    </div>
                </div>
            </div>
            <div class="col h40 brb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/massage.png">足疗</div>
                    </div>
                </div>
            </div>
            <div class="col h40 bb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/girl.png">丽人</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row hightitem">
            <div class="col h40 brb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/ticket.png">门票</div>
                    </div>
                </div>
            </div>
            <div class="col h40 brb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/shopping.png">购物</div>
                    </div>
                </div>
            </div>
            <div class="col h40 bb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/all.png">全部</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="h20"></div>
        <div class="row hightitem section02">
            <div class="col title0201 brb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">
                            1元秒杀
                            <div>天天开抢</div>
                        </div>
                    </div>
                </div>
                <div class="logocover"><img src="../image/groupbuy/logo_01.png"></div>
            </div>
            <div class="col title0202 brb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">世纪难题
                            <div>周末去哪</div>
                        </div>
                    </div>
                </div>
                <div class="logocover"><img src="../image/groupbuy/logo_02.png"></div>
            </div>
            <div class="col title0203 bb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">排行榜
                            <div>最赞火锅榜</div>
                        </div>
                    </div>
                </div>
                <div class="logocover"><img src="../image/groupbuy/logo_03.png"></div>
            </div>
        </div>
        <div class="row hightitem section03">
            <div class="col brb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">精选密室</div>
                        <div class="subtitle">打开你的脑洞</div>
                    </div>
                </div>
                <img src="../image/groupbuy/logo_04.png">
            </div>
            <div class="col bb">
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">热门团购</div>
                        <div class="subtitle">火爆热门团购</div>
                    </div>
                </div>
                <img src="../image/groupbuy/logo_05.png">
            </div>
        </div>
        <div class="h20"></div>
        <div class="row hightitem tabbar" id="tabbar">
            <div class="col h40">
                为你精选
                <div class="indicator indicator-act"></div>
            </div>
            <div class="col h40">
                附近最热
                <div class="indicator"></div>
            </div>
            <div class="col h40">
                今日最新
                <div class="indicator"></div>
            </div>
        </div>
        <div id="list" class="home-tuan-list home-tuan-list-act"></div>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript">
        apiready = function() {

        };
    </script>

</html></span>

今天把页面搭建了下，希望对大家有用！



评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值