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

<ui namespace="VankeStatementDetailMonthCell_iPhone">
    <linear orientation="h" class="wrapper">
        <image class="bg"/>
        
        <linear orientation="v" class="col-wrapper date-col">
            <linear orientation="h" class="col-body">
                <linear orientation="h" class="row">
                    <label class="lbl">账单日期</label>
                </linear>
                
                <linear orientation="h" class="row">
                    <button id="pickerMask" />
                    <linear orientation="h" class="row-wrapper">
                        <label id="lblYear" class="lbl year-val"></label>
                        <label class="lbl year">年</label>
                        <label id="lblMonth" class="lbl mon-val"></label>
                        <label class="lbl month">月</label>
                        <image id="imgDatePicker" class="date-picker" />
                    </linear>
                </linear>
            </linear>
        </linear>

        <linear orientation="v" class="col-wrapper summary-col">
            <linear orientation="h" class="col-body">
                <linear orientation="h" class="row">
                    <linear orientation="h" class="row1-wrapper">
                        <label id="lblTotalPrefix" class="lbl">本期应付总额</label>
                    </linear>
                </linear>
                <linear orientation="h" class="row">
                    <linear orientation="h" class="row2-wrapper">
                        <label id="lblAmount" class="lbl amount"></label>
                        <label class="lbl unit">元</label>
                     </linear>
                </linear>
            </linear>
        </linear>
    </linear>
   
  <style type="text/css">
      
    .wrapper {
        width: 100%;
        height: 100%;
    }
    
    .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-image: url(wave_line.png);
    }
    
    .col-wrapper {
        width: 50%;
        height: 100%;
        v-align: center;
    }
    
    .col-wrapper .col-body {
        width: 100%;
        height: auto;
    }
    
    .lbl {
        width: auto;
        color: #aaaaaa;
        font-size: 14px;
    }
    
    .row {
        width: 100%;
        height: 20px;
        margin-bottom: 5px;
    }
    
    .row-wrapper {
        width: auto;
        height: 100%;
    }
    
    /** 左边日期列 */
    .date-col {
        align: center;
    }
    
    .date-col .col-body {
        width: 100px;
    }
    
    .date-col .row {
        align: left;
    }
    
    .date-col .year-val,
    .date-col .mon-val {
        color: #904cf5;
        font-size: 20px;
        font-style: bold;
    }
    
    .date-col .month,
    .date-col .year {
        color: black;
        font-size: 12px;
        padding-top: 2px;
    }
    
    .date-col .date-picker {
        image-src: url(arrow_down.png);
        width: auto;
        height: 100%;
    }
    
    #pickerMask {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        width: 100%;
    }
    
    /** 右边汇总列 */
    .summary-col {
        padding-right: 10px;
    }
    
    .summary-col .row {
        align: right;
    }
    
    .summary-col .row1-wrapper,
    .summary-col .row2-wrapper {
        width: auto;
    }
    
    .summary-col .amount {
        color: red;
        font-size: 20px;
        font-style: bold;
    }
    
    .summary-col .unit {
        color: black;
        font-size: 12px;
        padding-top: 2px;
    }
    
  </style>
</ui>