基本套路：

1、先安裝node，配置好npm config set cache 和 npm config set prefix

2、安裝android sdk  和 java 配置環境變數

3、執行npm 命令安裝 npm install -g cordova  和 npm install  -g ionic

4、執行 ionic start app(名字隨意) 生成如下

執行  ionic  build android 時  app目錄下config.xml 檔案裡   android-minSdkVersion 的value  最小要對應  要和 安裝的androidsdk 的 api 最小版本

 

5、ionic platform add android

6、套路最後一步 ionic run android

對於做web開發，重點的套路還是在www 檔案裡

 

接下來 套路里用到了幾種撩的技術，我不是一個好的僚機，實現如下的tab切換，粗略撩吧，撩不好就擼。。。

當然小白撩的也有不對的地方，還是很明顯的，希望互相幫助啦 

僚機目錄結構 主要用到了 angular，ionic是把angular封裝了的，還有requirejs（模組載入框架）

main.js  需要的js檔案

require.config({
   // baseUrl:'../',
    paths:{
        cordova:'cordova',
        fastclick:'../lib/fastclick',

        async:'../lib/async',   //幫助非同步引入類似下面百度地圖的js
        domReady:'../lib/domReady',
        BMap:'http://api.map.baidu.com/api?v=2.0&ak=A796271dae48229367c041db82735a4c&services=false',

        angular:'../lib/ionic/js/angular/angular',
        angularAnimate:'../lib/ionic/js/angular/angular-animate',
        angularSanitize:'../lib/ionic/js/angular/angular-sanitize',
        uiRouter:'../lib/ionic/js/angular-ui/angular-ui-router',
        ngResource:'../lib/ionic/js/angular/angular-resource',

        ionic:'../lib/ionic/js/ionic',
        ionicAngular:'../lib/ionic/js/ionic-angular',

        app:'app',
        config:'config',
        
        services:'services/services',
        mainServices:'services/mainServices',
        indexServices:'services/indexServices',
        mapServices:'services/mapServices',

        mainCtrl:'controllers/mainCtrl',
        indexCtrl:'controllers/indexCtrl',
        sortCtrl:'controllers/sortCtrl',
        memberCtrl:'controllers/memberCtrl',
        cartCtrl:'controllers/cartCtrl',
        mapCtrl:'controllers/mapCtrl',
        controllers:'controllers/controllers',

        directives:'directives/directives',
        mainDirective:'directives/mainDirective'
    },
    waitSeconds: 40,
    shim:{
        angular : {exports : 'angular'},
        angularAnimate : {deps: ['angular']},
        angularSanitize : {deps: ['angular']},
        uiRouter : {deps: ['angular']},
        ngResource: {deps: ['angular']},
        ionic :  {deps: ['angular'], exports : 'ionic'},
        ionicAngular: {deps: ['angular', 'ionic', 'uiRouter', 'angularAnimate', 'angularSanitize','ngResource']}
    },
    priority:['angular','ionic'],
    deps:['bootstrap']
});
 

config.js  ionic配置檔案 android 和ios ui介面的配置和動態效果

define(['app', 'ionic'], function (app) {
    'use strict';
    return angular.module('app.config', ['ionic']).config(function($ionicConfigProvider) {
        $ionicConfigProvider.platform.android.tabs.style('standard');
        $ionicConfigProvider.platform.android.tabs.position('standard');
        $ionicConfigProvider.platform.ios.navBar.alignTitle('center'); 
        $ionicConfigProvider.platform.android.navBar.alignTitle('center');
        
        $ionicConfigProvider.platform.android.views.transition('android');
        $ionicConfigProvider.platform.ios.views.transition('ios'); 
    });
});
 

bootstrap.js   angular 初始化

define(['ionic', 'angular', 'app', 'routes', 'fastclick'], function (ionic, angular, app) {
    'use strict';
    var $html,
        onDeviceReady = function () {
            angular.bootstrap(document, app.name);
        };
    document.addEventListener("deviceready", onDeviceReady, false);

    if (typeof cordova === 'undefined') {
        $html = angular.element(document.getElementsByTagName('html')[0]);
        angular.element().ready(function () {
            try {
                angular.bootstrap(document, [app.name]);
            } catch (e) {
                console.error(e.stack || e.message || e);
            }
        });
    }
    window.addEventListener('load', function() {   //fastclick 初始化
        new FastClick(document.body);
    }, false);
});

app.js  angular  建立app module

define(['angular',
        'uiRouter',
        'services',
        'controllers',
        'directives',
        'ionicAngular'],

    function (angular, uiRouter) {
        'use strict';
        var app = angular.module('app', [
            'ionic',
            'ngResource',
            'app.controllers',
            'app.directives',
            'app.services',
            'ui.router']);
        return app;
    });

routes.js  路由配置 主要是底部tab 切換 

define(['app'], function(app) {
    'use strict';

    app.config(['$stateProvider', '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $stateProvider
            
                .state('tab', {
                url: '/tab',
                abstract: true,
                templateUrl: 'templates/tabs.html'
            })
            
            .state('tab.index', {
                url: '/index',
                views: {
                    'tab-index': {
                        templateUrl: 'templates/site/index.html',
                        controller: 'indexCtrl'
                    }
                }
            })
            .state('tab.sort', {
                url: '/sort',
                views: {
                    'tab-sort': {
                        templateUrl: 'templates/sort/index.html',
                        controller: 'sortCtrl'
                    }
                }
            })
            .state('tab.cart', {
                url: '/cart',
                views: {
                    'tab-cart': {
                        templateUrl: 'templates/cart/index.html',
                        controller: 'cartCtrl'
                    }
                }
            })
            .state('tab.member', {
                url: '/member',
                views: {
                    'tab-member': {
                        templateUrl: 'templates/member/index.html',
                        controller: 'memberCtrl'
                    }
                }
            })
            // 地圖
            .state('map', {
                url: '/map',
                templateUrl: 'templates/etc/map.html',
                controller: 'mapCtrl'
            });
            // if none of the above states are matched, use this as the fallback
            $urlRouterProvider.otherwise('/tab/index');
    }]);
});

angular 每一個模組需要一個總模組

controllers.js

define(['app','mainCtrl', 'indexCtrl', 'sortCtrl', 'memberCtrl', 'cartCtrl', 'mapCtrl', 'services'], function(app){

    'use strict';
    var controllers = angular.module('app.controllers', ['app.services', 'app.config']);

    controllers.controller('mainCtrl',require('mainCtrl'));
    controllers.controller('indexCtrl', require('indexCtrl'));
    controllers.controller('sortCtrl', require('sortCtrl'));
    controllers.controller('memberCtrl',require('memberCtrl'));
    controllers.controller('cartCtrl',require('cartCtrl'));
    controllers.controller('mapCtrl',require('mapCtrl'));

    controllers.run(['$rootScope', function($rootScope) {
        $rootScope.sampleParam = "value";
    }]);

    return controllers;

});

indexCtrl.js  首頁 依賴 indexService

define(function () {
    'use strict';
    function ctrl($scope, $mainServices, $indexServices, $ionicTabsDelegate,  $ionicSlideBoxDelegate) {
        // 載入等待中
        $mainServices.showLoading();  
        $mainServices.hideLoding();   
        //首頁資料
        $indexServices.get(function(data){
            $scope.bannerList = data.banner.item;
            $scope.couponList = data.coupon.item;
            $scope.dazheList = data.tejia.item;
            $scope.addr = data.addr;
        });
    }

    ctrl.$inject = ['$scope', '$mainServices', '$indexServices', '$ionicTabsDelegate', '$ionicSlideBoxDelegate'];
    return ctrl;
    
});

mapCtrl.js

define(function () {
    'use strict';

    function ctrl($scope, $mapServices) {
        $mapServices.goFunc();
    }

    ctrl.$inject = ['$scope', '$mapServices'];
    return ctrl;
    
});

mainCtrl.js 個模組都需要用的ctrl，包括 底部more 顯示隱藏

define(function () {
    'use strict';

    function ctrl($scope, $ionicTabsDelegate) {
        $scope.tabmore = {
            show: false
        };
        $scope.header = {
            show: true
        };
        // more 隱藏顯示
        $scope.showToggle = function(target){
            $scope[target].show = !$scope[target].show;
        };
    }

    ctrl.$inject = ['$scope', '$ionicTabsDelegate'];
    return ctrl;
    
});

services.js 

define(['app','config', 'mainServices', 'indexServices', 'mapServices'], function (app) {
    'use strict';
    var config = require('config'),
        services = angular.module('app.services', ['app.config', 'ngResource']);
    
    services.factory('$mainServices', require('mainServices'));
    services.factory('$mapServices', require('mapServices'));
    services.service('$indexServices', require('indexServices'));

    return services;
});

indexServices.js  首頁資料請求

define(function(){
    'use strict'
    var service = function($http){
        return {
            get:function(callback){
                $http.get('json/index.json').success(function(data){
                   return callback(data);
                });
            }
        }
    };

    service.$inject = ['$http'];

    return service;
});

請求的 json 資料如下 隨意寫的 當然暫時 有的沒用到

{
    "banner": {
        "item":[
            {
                "img":"a.jpg", 
                "url":"www.baidu.com"
            },
            {
                "img":"b.jpg",
                "url":"http://www.sina.com.cn/"
            },
            {
                "img":"c.jpg",
                "url":"http://www.qq.com/"
            }
        ]
    }, 
    "addr":{
        "nowaddr":{
            "longitude":104.061854,
            "latitude":34.645081,
            "name":"成都"
        },
        "item":[
            {
                "longitude":104.061854,
                "latitude":34.645081,
                "name":"成都"
            },
            {
                "longitude":114.392543,
                "latitude":33.848829,
                "name":"哈哈"
            },
            {
                "longitude":204.061854,
                "latitude":40.645081,
                "name":"中國"
            },
            {
                "longitude":110.187771,
                "latitude":40.575614,
                "name":"哈哈"
            },
            {
                "longitude":114.264138,
                "latitude":34.891853,
                "name":"嘿嘿"
            },
            {
                "longitude":113.971186,
                "latitude":90.82062,
                "name":"太平洋"
            }

        ]
    },
    "coupon": {
        "item": [
            {
                "time": "2016.01.01-2017.05.14", 
                "money": 787, 
                "use": 7878, 
                "isGet": 0, 
                "url": "http://www.qq.com/"
            }, 
            {
                "time": "2016.01.01-2017.05.14 ", 
                "money": 787, 
                "use": 7878, 
                "isGet": 1, 
                "url": "http://www.qq.com/"
            }
        ]
    }, 
    "dazhe": {
        "item": [
            {
                "url": "http://www.qq.com/", 
                "jiage": 1000, 
                "use": 1200
            }, 
            {
                "url": "http://www.qq.com/", 
                "jiage": 1800, 
                "use": 12200
            }
        ]
    }, 
    "tejia": {
        "item": [
            {
                "url": "http://www.qq.com/", 
                "img": "t.png", 
                "name": "玉皇大帝", 
                "nowMoney": 40, 
                "oldMoeny": 45
            }, 
            {
                "url": "http://www.qq.com/", 
                "img": "y.png", 
                "name": "玉皇大帝", 
                "nowMoney": 40, 
                "oldMoeny": 45
            },
            {
                "url": "http://www.qq.com/", 
                "img": "y.png", 
                "name": "玉皇大帝", 
                "nowMoney": 40, 
                "oldMoeny": 45
            }, 
            {
                "url": "http://www.qq.com/", 
                "img": "t.png", 
                "name": "玉皇大帝", 
                "nowMoney": 40, 
                "oldMoeny": 45
            }
        ]
    }, 
    "tuijian": {
        "item": [
            {
                "url": "http://www.qq.com/", 
                "img": "e.png", 
                "name": "你好"
            }, 
            {
                "url": "http://www.qq.com/", 
                "img": "c.png", 
                "name": "你好"
            }, 
            {
                "url": "http://www.qq.com/", 
                "img": "b.png", 
                "name": "你好"
            }, 
            {
                "url": "http://www.qq.com/", 
                "img": "b.png", 
                "name": "nimei"
            }, 
            {
                "url": "http://www.qq.com/", 
                "img": "a.jpg", 
                "name": "kao"
            }
        ]
    }
}

mapServices.js  引入百度map    async!BMap

define(['domReady','async!BMap'], function(domReady){
    'use strict'
    var factory = function(){
        var map = new BMap.Map("bmap");
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
        map.enableScrollWheelZoom();
        var start = "魏公村" ,end = "百度大廈";
        var transit = new BMap.TransitRoute(map, {
            renderOptions: {map: map}
        });
        transit.search(start,end);
        var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/location.gif", new BMap.Size(14,23));
        return {
            goFunc:function(){
                //設定起終點圖示
                transit.setMarkersSetCallback(function(result){
                    result[0].marker.setIcon(myIcon);
                    result[1].marker.setIcon(myIcon);
                })
            }
        }
    }
    factory.$inject = [];
    return factory;
});

directives

define(['app','services','mainDirective'], function(app){
    'use strict';

    var directives = angular.module('app.directives', ['app.services']);
 
    //tabs tabMore  當然這樣做 是不對的 在tabs.html 寫data-src {'test1':'www.baidu.com','test2':'www.imooc.com'}"
    directives.directive('tabMore',[function(){
        return {
            restrict:'A',
            replace:false,
            link:function(scope, element, attrs){
                let src = JSON.parse(attrs.src.replace(/'/g,"\""));
                let htmlStr='';
                for(let i in src){
                    htmlStr += '<a href="'+ src[i] +'">'+ i +'</a>';
                }
                angular.element(document.querySelector('#tabsmore')).append(htmlStr);
            }
        };
    }]);
    //地圖 
    directives.directive('goaddr',[function(){
        return {
            restrict: 'A',
            replace: false,
            link:function(scope, element, attrs){
                
            }
        }
    }]);
    
    return directives;

});

html

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>TEST</title>
    <link type="text/css" href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
</head>

<body ng-controller="mainCtrl as mc">

    
    <ion-header-bar class="bar bar-header"  ng-show="header.show">
        <a href="javascript:;" class="icon-right ion-arrow-down-b button button-clear" ng-click="showToggle('header')">成都</a>
        <label class="item item-input stable-dark icon ion-search">
            <input type="search" class="dark" placeholder="search"/>
        </label>
    </ion-header-bar>
    <ion-nav-view></ion-nav-view>
    <script src='cordova.js'></script>
    <script data-main="js/main" src="lib/require.js"></script>
</body>
</html>

tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
    <ion-tab title="首頁" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/index">
        <ion-nav-view name="tab-index"></ion-nav-view>  <!-- name 對應路由 tab-index -->
    </ion-tab>
    <ion-tab title="分類" icon-off="ion-ios-keypad-outline" icon-on="ion-ios-keypad" href="#/tab/sort">
        <ion-nav-view name="tab-sort"></ion-nav-view>
    </ion-tab>
    <ion-tab title="購物車" icon-off="ion-ios-cart-outline" icon-on="ion-ios-cart" href="#/tab/cart">
        <ion-nav-view name="tab-cart"></ion-nav-view>
    </ion-tab>
    <ion-tab title="會員" icon-off="ion-ios-person-outline" icon-on="ion-ios-person" href="#/tab/member">
        <ion-nav-view name="tab-member"></ion-nav-view>
    </ion-tab>
    <ion-tab title="更多" icon-on="ion-ios-more-outline" tab-More="tab-More" icon-off="ion-ios-more"  data-src="{'test1':'www.baidu.com','test2':'www.imooc.com'}"  ng-click="showToggle('tabmore')"  >
      <!--  <ion-nav-view></ion-nav-view>  -->
    </ion-tab>
    <div class="tabsmore" id="tabsmore" ng-show="tabmore.show"></div>
</ion-tabs>

site/index.html 首頁

<ion-view>
    <!-- overflow-scroll='false' 安卓端滾動 效果css3-->
    <ion-content class="has-header" overflow-scroll='false'>
        <ion-slide-box  auto-play="true"  does-continue="true" slide-interval="2000">
            <ion-slide ng-repeat="b_item in bannerList" >
                <a href="{{b_item.url}}" >
                    <img ng-src="{{b_item.img}}" class="full-image">
                </a>
            </ion-slide>
        </ion-slide-box>
        <div class="pane-list row addr-now">
            <span ng-bind="addr.nowaddr.name" ></span>
            <!-- goaddr 地圖指令 -->
            <a class="addr-get" goaddr="goaddr" href="#/map" data-latitude="{{addr.nowaddr.latitude}}" data-longitude="{{addr.nowaddr.longitude}}">
                導航<em class="addr-icon"></em>
            </a>
        </div>
        <div class="pane-list">
            <ul class="row justify coupon-list">
                <li class="item coupon-item" ng-repeat="coupon_item in couponList">
                    <div class="coupon-con ">
                        <div class="row justify">
                            <div class="coupon-avatar">
                                <img src="images/store_coupon.png">
                            </div>
                            <div class="coupon-msg">
                                <p class="coupon_jg">¥{{coupon_item.money}}</p>
                                <p class="coupon_tj">滿{{coupon_item.use}}使用</p>
                            </div>
                        </div>
                        <p class="coupon-line"></p>
                        <time class="coupon-time" ng-bind="coupon_item.time"></time>
                    </div>
                </li>
            </ul>
            <a href="#" class="row coupon-more center">更多好券，去優惠券中心看看<em></em></a>
        </div>
        <div class="pane-list pane-list-te">
            <div class="pane-list-top row">
                <em>特</em>
                <h3>本週特價</h3>
                <a href="" class="pane-list-top-btn">檢視更多</a>
            </div>
            <ul class="row">
                <li class="col col-50" ng-repeat="t_item in dazheList">
                    <a href="{{t_item.url}}">
                        <img ng-src="{{t_item.img}}">
                    </a>
                    <p class="pane-list-te-name" ng-bind="t_item.name"></p>
                    <div>
                        <span class="pane-list-te-nm" ng-bind="'¥'+t_item.nowMoney"></span>
                        <span class="pane-list-te-om" ng-bind="'¥'+t_item.oldMoeny"></span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="addr-list" ng-show="!header.show">
            <div class="addr-title">
                <a href="javascript:;" class="cancel" ng-click="showToggle('header')"></a>
                切換
            </div>
            <ion-list>
                <ion-item ng-repeat="addr_item in addr.item" ng-bind="addr_item.name" data-latitude="{{addr_item.latitude}}" data-longitude="{{addr_item.longitude}}">
                </ion-item>
            </ion-list>
        </div>
    </ion-content>

</ion-view>

css

@media only screen and (max-device-width: 320px) and (orientation: portrait){
  .coupon-time  {
      display: block;
      position: relative;
      width: 140px;
      transform: scale(0.85);
      left: -7px;
    }
}
.pane {
  background-color: #f0f0f0;
}
ins, a {
    text-decoration: none;
}
.ionic-logo {
  display: block;
  margin: 15px auto;
  width: 96px;
  height: 96px;
}
.u-list{
  margin-top: 5px;
  margin-bottom: 0;
  background-color: #ffffff;
}
.u-title{
  padding: 4px 2.66666667%;
}
.row{
  padding: 0;
}
.u-list .col-33{
  margin: 0 0.5%;
}
.u-list .col-33 img{
  max-width: 100%;
}
.u-list .col-33{
  text-align: center;
}
.row.item{
  border: 0;
}
.pane-list {
  background-color: #ffffff;
  padding: 10px 0;
  margin-bottom: 10px;
}
.prefix{
  display: block;
  font-size: 12px;
  height: 14px;
  width: 14px;
  color: #fff;
  text-align: center;
  line-height: 14px;
  float: left;
  margin: 3px 4px 0 0;
  background-color: #4198f7;
}
.justify{    
  -webkit-box-pack: justify;
  box-pack: justify;
  justify-content: space-around;
  -webkit-justify-content: space-around;
}
.center {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}
.bar-header{
  background-color: #ff332a;
}
.bar-footer{
  background-color: #333333;
}
.bar-header .button-clear.button{
  font-size: 13px;
  color: #ffffff;
}
.bar.bar-header .button.button-clear:before{
  font-size: inherit;
}
.bar-header .item-input{
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  width: 70%;
  margin-left: 5%;
}
.bar-header .ion-search:before{
  margin-right: 5px;
  color: inherit;
  color: #b2b2b2;
}
.slider-pager .slider-pager-page {
  color: #ff332a;
}
.tabs-icon-top > .tabs .tab-item {
  color: #ffffff;
}
.tabs-icon-top.tabs-color-active-positive .tab-item.tab-item-active {
  color: #ff332a;
}
.tab-nav.tabs  .tab-item.activated {
  color: #ffffff;
}
.tab-nav.tabs {
  background-color: #333333;
  padding: 4px 0;
  height: 54px;
}
.tabsmore {
    position: absolute;
    background-color: #404040;
    width: 100px;
    right: 0px;
    bottom: 53px;
    text-align: left;
    overflow: hidden;
}
.tabsmore a {
    font-size: 13px;
    color: #cccccc;
    overflow: hidden;
    line-height: 34px;
    display: block;
    padding: 0 6px 0 10px;
    border-bottom: 1px solid #333333;
}
.coupon-item.item{
    border: 0;
    padding: 0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden;
    width: 47%;
    background: url('/images/yhq_b.png') no-repeat right center;
    background-size: contain;
    padding-right: 34.5px;
}
.coupon-con {
  height: 88px;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 4px 0 0 2%;
  border: 1px solid #dadada;
  border-right: none;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  flex: 10;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 70px auto;
}
.coupon-avatar img{
  margin-right: 2px;
  width: 45px;
  min-width: 30px;
  display: block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  margin: 0 auto;
}
.item .coupon_jg{
  font-size: 19px;
  text-align: left;
  color: #3991f2;
}
.item .coupon_tj{
  background-color: #88bdf7;
  height: 14px;
  line-height: 14px;
  padding: 0 5px;
  font-size: 12px;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  overflow: hidden;
  white-space: nowrap;
}
.coupon-line{
  height: 4px;
  margin-top: 6px;
  background: url('/images/yhq_yd.png') repeat-x center center;
  background-size: contain;
}
.coupon-time{
  color: #707070;
  font-size: 12px;
  margin-top: 1px;
}
.coupon-more.center{
  font-size: 14px;
  color: #ff4a4a;
  margin-top: 15px;
  text-align: center;
}
.coupon-more em {
    display: block;
    width: 29px;
    height: 17px;
    background: url('/images/icon_go.png') no-repeat center center;
    background-size: contain;
    margin-left: 1.5%;
    animation: morego 2s ease-in-out infinite;
    -webkit-animation: morego 2s ease-in-out infinite;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    opacity: 0.1;
}
@keyframes morego {
  form {
    transform: translateX(5px);
    -moz-transform: translateX(5px);
    -o-transform: translateX(5px);
    -webkit-transform: translateX(5px);
    opacity:0.1;
  }
  to {
    transform: translateX(12px);
    -moz-transform: translateX(12px);
    -o-transform: translateX(12px);
    -webkit-transform: translateX(12px);
    opacity:1;
  }
}
@-webkit-keyframes morego {
  form {
    transform: translateX(5px);
    -moz-transform: translateX(5px);
    -o-transform: translateX(5px);
    -webkit-transform: translateX(5px);
    opacity:0.1;
  }
  to {
    transform: translateX(12px);
    -moz-transform: translateX(12px);
    -o-transform: translateX(12px);
    -webkit-transform: translateX(12px);
    opacity:1;
  }
}
.pane-list-top{
    overflow: hidden;
    padding: 0 2.66666667%;
    margin-bottom: 8px;
}
.pane-list-top em {
    display: block;
    font-size: 12px;
    height: 14px;
    width: 14px;
    text-align: center;
    line-height: 14px;
    margin: 3px 4px 0 0;
    color: #fff;
}
.pane-list-top h3{
    padding: 0;
    margin: 0;
    font-size:17px;
    flex: 1;
}
.pane-list-top-btn{
    font-size: 12px;
    text-align: center;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    color: #ffffff;
    margin-top: 1px;
}
.pane-list-te .pane-list-top em{
    background-color: #ff332a;
}
.pane-list-te .pane-list-top-btn{
    background-color: #ff332a;
}
.pane-list-te .row{
    flex-wrap: wrap;
}
.pane-list-te ul a {
    text-align:center;
    display: block;
    height: 110px;
}
.pane-list-te ul img{
    max-height: 100%;
    max-width: 100%;
}
.pane-list-te-name{
    display: -webkit-box;
    display: -moz-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 6px 0 5px;
    font-size: 13px;
    color: #595959;
}
.pane-list-te-nm {
    font-size: 14px;
    color: #ff332a;
}
.pane-list-te-om {
    color: #b2b2b2;
    font-size: 12px;
    text-decoration: line-through;
    padding-left: 4px;
}
.addr-now {
    padding: 10px 1.66666667%;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
.addr-now span{
    display: block;
    max-width: 72.5%;
    color: #666666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.addr-get{
    width: 56px;
    font-size: 14px;
    color: #f352a5;
    position: relative;
}
.addr-icon{
    display: block;
    position: absolute;
    transform: rotateX(10deg) rotateZ(20deg);
    -moz-transform: rotateX(10deg) rotateZ(20deg);
    -o-transform: rotateX(10deg) rotateZ(20deg);
    -webkit-transform: rotateX(10deg) rotateZ(20deg);
    top: -1px;
    right: 4%;
    background: url('/images/icon_navigationr.png') no-repeat center center;
    background-size: contain;
    height: 22px;
    width: 22px;
    animation: navigationicon 1.5s linear infinite alternate;
    -webkit-animation: navigationicon 1.5s linear infinite alternate;
}
@keyframes navigationicon {
  form {
    transform: rotateX(0deg) rotateZ(0deg);
    -moz-transform: rotateX(0deg) rotateZ(0deg);
    -o-transform: rotateX(0deg) rotateZ(0deg);
    -webkit-transform: rotateX(0deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(50deg) rotateZ(70deg);
    -moz-transform: rotateX(50deg) rotateZ(70deg);
    -o-transform: rotateX(50deg) rotateZ(70deg);
    -webkit-transform: rotateX(50deg) rotateZ(70deg);
  }
}
@-webkit-keyframes navigationicon {
  form {
    transform: rotateX(0deg) rotateZ(0deg);
    -moz-transform: rotateX(0deg) rotateZ(0deg);
    -o-transform: rotateX(0deg) rotateZ(0deg);
    -webkit-transform: rotateX(0deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(50deg) rotateZ(70deg);
    -moz-transform: rotateX(50deg) rotateZ(70deg);
    -o-transform: rotateX(50deg) rotateZ(70deg);
    -webkit-transform: rotateX(50deg) rotateZ(70deg);
  }
}
.addr-list {
  position: absolute;
  top: 0;
  background-color: #ffffff;
  min-height: 100%;
  width: 100%;
  z-index: 9;
}
.addr-title{
  font-size: 19px;
  color: #000000;
  text-align: center;
  line-height: 44px;
  height: 44px;
  border-bottom: 1px solid #dcdcdc;
  background-color: #f5f5f5;
  position: relative;
}
.cancel{
  position: absolute;
  top: 2px;
  height: 40px;
  width: 28px;
  background: url('/images/icon_search.png') no-repeat center -19px;
  background-size: 18px 75.15px;
  left: 2.66666667%;
}

有需要的交流的可以加個好友