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

<ui namespace="VankeFloorListBoardCell_iPhone">
    <linear orientation="v" class="wrapper">
        <button id="mask" class="mask"/>
        <image class="bg"/>
        <image id="imgPhoto" class="photo"/>
        
        <linear orientation="h" class="name-wrapper">
            <image class="name-bg" />
            <label id="lblName" class="name"></label>
        </linear>

        <linear orientation="v" class="data-wrapper">
            <linear orientation="h" class="row open-date-wrapper">
                <label class="lbl floor-ctr">开盘日期:</label>
                <label id="lblOpenDate" class="value floor-ctr"></label>
            </linear>
            
            <linear orientation="h" class="row sale-amount-wrapper">
                <label class="lbl floor-ctr">销售额:</label>
                <label id="lblSaleAmount" class="value floor-ctr"></label>
                <label class="unit floor-ctr">元</label>
            </linear>
            
            <linear orientation="h" class="row flow-wrapper">
                <label class="lbl">客流:</label>
                <label id="lblPassengerFlow" class="value"></label>
                <label class="unit">人</label>
            </linear>
            
            <linear orientation="h" class="row price-wrapper">
                <label class="lbl">客单价:</label>
                <label id="lblPrice" class="value"></label>
                <label class="unit">元/人</label>
            </linear>
            
        </linear>
    </linear>
    
    <style type="text/css">
        
        .wrapper {
            width: 100%;
            height: 100%;
            padding: 2px;
        }
    
        .bg {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: white;
        }
        
        .photo {
            width: 100%;
            height: 155px;
            background-color: #999;
            image-mode: fill;
            image-loading: white;
        }
    
        .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        
        .name-wrapper {
            position: absolute;
            left: 0px;
            top: 115px;
            width: 100%;
            height: 40px;
        }
        
        .name-wrapper > .name-bg {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: #444444;
            alpha: 0.5;
        }
        
        .name-wrapper .name {
            color: white;
            font-size: 18px;
            font-weight: bold;
            padding-left: 10px;
        }
        
        .data-wrapper {
            width: 100%;
            position: absolute;
            left: 0px;
            top: 155px;
        }
        
        .data-wrapper .row {
            width: 100%;
            height: 20px;
            padding-right: 10px;
        }
        
        .data-wrapper .row .lbl {
            width: 70px;
            padding-left: 10px;
            color: #AAAAAA;
        }
        
        .data-wrapper .row .value {
            width: auto;
            float: right;
        }
        
        .data-wrapper .row .unit {
            width: auto;
            color: #888888;
            float: right;
        }
        
        #lblSaleAmount {
            padding-right: -15px;
        }
        
        #lblPassengerFlow {
            padding-right: -15px;
        }
        
        #lblPrice {
            padding-right: -32px;
        }
        
        .data-wrapper .value.red {
            color: #ed1b23;
            font-size: 15px;
            font-weight: bold;
        }
        
        .data-wrapper .value.purple {
            color: #5435ad;
            font-size: 15px;
            font-weight: bold;
        }
        
        .data-wrapper .value.orange {
            color: #ea6402;
            font-size: 15px;
            font-weight: bold;
        }
    </style>
</ui>
