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);
                
            }
            
        },
        
        
    }
})

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！