<?xml version="1.0" encoding="UTF-8"?>

<ui namespace="VankeStatementListItemCell_iPhone">
    <linear orientation="v" class="wrapper">
        <button id="mask" class="mask"/>
        <image class="bg"/>

        <linear orientation="h" class="inner-wrapper">
            <image class="inner-bg"/>
            
            <linear orientation="v" class="col photo-col">
                <image id="imgPhoto" class="photo"/>
            </linear>
     
             <linear orientation="v" class="col name-col">
                 <label id="lblCode" class="code"/>
                 <label id="lblName" class="name"/>
             </linear>
             
             <linear orientation="h" class="col amount-col">
                 <linear orientation="h" class="amount-wrapper">
                     <label id="lblAmount" class="amount" />
                     <label class="unit">元</label>
                 </linear>
             </linear>
             
             <linear orientation="v" class="col state-col">
                 <image id="imgState" class="state"/>
             </linear>            
        </linear>
        
    </linear>
    
    <style type="text/css">
        
        .wrapper {
            width: 100%;
            height: 100%;
        }
        
        .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        
        .bg {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: #c5c4ca;
        }
        
        .inner-wrapper {
            width: 100%;
            height: 100%;
            padding-bottom: 1px;
        }
        
        .inner-bg {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: white;
        }
        
        .col {
            height: 100%;
        }
        
        .photo-col {
            width: 15%;
        }
        
        .photo-col .photo {
            width: 100%;
            height: 100%;
            image-mode: fit;
            image-loading: white;
            padding: 2px;
        }
        
        .name-col {
            width: 40%;
            padding: 20px 10px 0px 10px;
        }
        
        .name-col .code {
            width: 100%;
            height: auto;
            text-overflow: ellipsis;
            font-size: 15px;
        }
        
        .name-col .name {
            width: 100%;
            height: auto;
            text-overflow: ellipsis;
            font-size: 15px;
        }
        
        .amount-col {
            width: 30%;
            align: right;
        }
        
        .amount-col .amount-wrapper {
            width: auto;
            height: 100%;
        }
        
        .amount-col .amount {
            font-size: 18px;
            width: auto;
        }
        
        .amount-col .unit {
            font-size: 12px;
            width: auto;
            color: #aaaaaa;
        }
        
        .state-col {
            width: auto;
            position: absolute;
            right: 0px;
            top: -15px;
        }
        
        .state-col .state {
            height: 100%;
            width: auto;
        }
        
    </style>
</ui>