web项目-demo

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

            }

        },

    }
})