web項目-demo

標籤：ams   ons   邊框   module   alt   enter   services   function   normal   

1.定義結構

2.指定樣式

3.填充資料

4.跑通商務程序

<!--      -->    <div class="bg_fff row border_bottom" id="acc_list">         <div class="headimg col-30" ng-click="changeState(‘setHeader‘)"><img src="{{user.imagesrc}}" alt=""></div>         <div class="account col-40" ng-click="changeState(‘myInfo‘)">             <li class="item font_l_3">{{user.name}}</li>             <li class="item font_n_2">{{user.phoneTel}}</li>         </div>         <div class="realname col-30" ng-click="changeState(‘accountsInfo‘)">錢包賬戶、實名</div>     </div>

 

/*--預定義--*//*    normal 1    大多數文字 小標題 模組描述*/.font_n_1 {    font-size: 0.14rem !important;}/*    normal 2    大多數文字 表單*/.font_n_2 {    font-size: 0.13rem !important;}/*    large 1    突出情境，例如金額*/.font_l_1 {    font-size: 0.24rem !important;}.font_l_1_5 {    font-size: 0.20rem !important;}/*    large 2    重要文字或操作按鈕*/.font_l_2 {    font-size: 0.17rem !important;}/*    large 3    賬戶名*/.font_l_3 {    font-size: .17rem !important;}/*--文本色--*/.font_norm {    color: #0076c1 !important;}.font_dark {    color: #a2a2a2 !important;}.font_fff {    color: #fff !important;}.font_red {    color: red;}.font_black {    color: black;}/*--背景色--*/.bg_norm {    background: #0076c1 !important;}.bg_fff {    background: #fff !important;}.bg_ccc {    background: #ccc !important;}.bg_tp{    background: transparent !important;}/*上邊框*/.border_top{    border-top-style: solid;    border-top-width:1px;    border-top-color:#E4E4E4;}.border_bottom{    border-bottom-style: solid;    border-bottom-width:1px;    border-bottom-color:#E4E4E4;}/*--main--*//* 左圖右文 */#acc_list div.headimg,#acc_list div.account,#acc_list  div.realname{    text-align:center !important;    padding:5px;}#acc_list div.headimg{    margin-left:-10px;}#acc_list div.realname{    margin-right:10px;}#acc_list div.headimg img{    width:75px;    height:75px;    border-radius: 38px !important;    }#acc_list div.realname{     background: url(../img/menu_item_arrow.png) no-repeat right center;     background-size: auto 18px;     display:inline;     line-height:80px;     color: #999999 !important;}#acc_list li.item{    border:none;    text-align:left;}#acc_list li:nth-of-type(1) {    padding-bottom:8px;}#acc_list li:nth-of-type(2) {    padding:8px;}/*    賬戶名*/#acc_list .font_l_3 {    font-size: .17rem !important;    font-weight:bold !important;}

 

公用方法

angular.module(‘com.app.mobile.services‘, [])//.factory(‘sms‘,function(){return{init: function(){},}}).factory(‘commonfn‘,function(){    return{        init: function($scope,$state){            //            去往某個頁面            $scope.changeState = function(name, params){$state.go(name, params);}            $scope.goBack = function() {history.back();}            $scope.goStateWithNoAnim = function(stateName, params) {                $ionicHistory.nextViewOptions({                    disableAnimate : true                });                $state.go(stateName, params);                            }                    },                    }})

 

web項目-demo