webApp开发-2列布局

Posted 2020-10-03 alan-alan

html

<div class="acc_item" id="acc_set">
     <div class="row bg_fff border_top">
         <div class="inner_item border_right col-50">
             <div class="con set item" ng-click="changeState(‘setting‘)">
                 <div class="ite">设置</div>
             </div>
         </div>
         <div class="inner_item col-50">
             <div class="con msg item" ng-click="changeState(‘myMessage‘)">
                 <div class="ite" ng-if="user.unreadcount == 0 ">我的消息</div>
                 <div class="ite">我的消息({{user.unreadcount}})</div>
                 <div class="ite" ng-if="user.unreadcount >99 ">我的消息(99+)</div>
             </div>
         </div>
     </div>
 </div>

View Code

 

<div class="acc_item bg_fff m_t_10" id="acc_item">
     <div class="row  border_top">
         <div class="inner_item border_right col-50">
             <div class="con item wallet" ng-click="changeState(‘setting‘)">
                 <div class="ite2">我的钱包</div>
                 <div class="ite2">0.00 &nbsp;元</div>
             </div>
         </div>
         <div class="inner_item col-50">
             <div class="con msg item ct" ng-click="changeState(‘myMessage‘)">
                 <div class="ite">我的卡券</div>
             </div>
         </div>
     </div>
     <div class="row  border_top">
         <div class="inner_item border_right col-50">
             <div class="con item order" ng-click="changeState(‘setting‘)">
                 <div class="ite2">我的订单</div>
                 <div class="ite2">共 &nbsp;4 &nbsp;笔</div>
             </div>
         </div>
         <div class="inner_item border_right col-50">
             <div class="con item bank" ng-click="changeState(‘setting‘)">
                 <div class="ite2">银行卡</div>
                 <div class="ite2">共 &nbsp;3 &nbsp;张</div>
             </div>
         </div>
     </div>
 </div>

View Code

 

CSS

/* set */
#acc_set{
    margin-top:-10px;
}
.acc_item .set {
    background: url(../img/account/icon_01.png) no-repeat left center;
    background-size: auto 0.35rem;
}
.acc_item .msg {
    background: url(../img/account/icon_02.png) no-repeat left center;
    background-size: auto 0.35rem;
}
#acc_set .ite{
    margin-top:-0.16rem;
    text-align:left;
    font-size: 0.14rem !important;
    color: #333333 !important;
}
#acc_set .inner_item{
    margin-top:0 !important;
}

/*  item 入口*/
#acc_item .con{
    display:block;
}
#acc_item .ite{
    margin-top:-0.16rem;
    text-align:left;
    font-size: 0.14rem !important;
    color: #333333 !important;
}
#acc_item .inner_item .ite2{
    margin-top:-0.15rem;
    text-align:left;
    font-size: 0.14rem !important;
    color: #333333 !important;
}
#acc_item .inner_item .ite2:nth-of-type(2){
    font-size:0.13rem !important;
    color: #999999 !important;
}
.acc_item .wallet{
    background: url(../img/account/icon_03.png) no-repeat left center;
    background-size: auto 0.35rem;
}

.order .ite2,
.bank .ite2{
    margin-top:-0.25rem !important;
    text-align:left;
    font-size: 0.14rem !important;
    color: #333333 !important;
}
.order .ite2:nth-of-type(2),
.bank .ite2:nth-of-type(2){
    padding-top:10px;
    font-size:0.13rem !important;
    color: #999999 !important;
}
.acc_item .ct {
    background: url(../img/account/icon_04.png) no-repeat left center;
    background-size: auto 0.35rem;
}
.acc_item .order {
    background: url(../img/account/icon_009.png) no-repeat left center;
    background-size: auto 0.35rem;
    margin-left: 0.10rem;
}
.acc_item .bank {
    background: url(../img/account/icon_08.png) no-repeat left center;
    background-size: auto 0.35rem;
}