标签: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); } }, } })
标签:ams ons 边框 module alt enter services function normal
原文地址:http://www.cnblogs.com/alan-alan/p/7365967.html