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

<ui namespace="VankeServiceBoardCell_iPhone">
  <linear orientation="v" class="wrapper">
      <image id="imgBg" class="bg" />
      <button id="mask" class="mask"/>
      
      <linear orientation="h" class="label-wrapper">
          <linear orientation="v" class="icon-wrapper">
              <image id="imgIcon" class="icon" />
          </linear>
          
          <linear orientation="v" class="title-wrapper">
              <label id="lblTitle" class="title">服务标题</label>
          </linear>
      </linear>
      
      <linear orientation="v" class="detl-wrapper">
          <linear orientation="h" class="detl">
              <image id="imgAmountIcon" class="icon up" />
              <label id="lblAmount" class="amount">0</label>
              <label id="lblAmountUnit" class="unit">单位</label>
          </linear>
     </linear>
  </linear>
  
  <style type="text/css">
    .wrapper {
        width: 100%;
        height: 100%;
    }
    
    .wrapper > .bg {
        background-color: red;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    
    .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .wrapper > .label-wrapper,
    .wrapper > .detl-wrapper {
        height: 50%;
        width: 100%;
    }
    
    <!-- for label row -->
    .wrapper > .label-wrapper > .icon-wrapper,
    .wrapper > .label-wrapper > .title-wrapper {
        width: 50%;
        height: 100%;
    }
    
    .wrapper > .label-wrapper > .icon-wrapper {
        align: left;
    }
    
    .wrapper > .label-wrapper > .title-wrapper {
        align: right;
    }
    
    .wrapper > .label-wrapper > .icon-wrapper .icon {
        image-src: url(icon_username.png);
        image-mode: center;
        width: 40px;
        height: 100%;
    }
    
    .wrapper > .label-wrapper > .title-wrapper .title {
        width: auto;
        height: 100%;
        v-align: center;
        padding-right: -17px;
        color: white;
        font-size: 17px;
        font-weight: bold;
        opacity: 0.9;
    }
    
    <!-- for detail row -->
    .wrapper > .detl-wrapper {
        align: right;
    }
    
    .wrapper > .detl-wrapper .detl{
        width: auto;
        height: 100%;
        padding-right: -20px;
    }
    
    .wrapper > .detl-wrapper > .detl > .icon {
        image-mode: center;
        width: auto;
        height: auto;
        margin-top: 13px;
        margin-right: 5px;
    }
    
    .wrapper > .detl-wrapper > .detl > .icon.down {
        image-src: url(little_down_icon.png);
    }
    
    .wrapper > .detl-wrapper > .detl > .icon.up {
        image-src: url(little_up_icon.png);
    }
    
    .wrapper > .detl-wrapper > .detl > .amount {
        width: auto;
        height: auto;
        color: white;
        font-size: 25px;
        font-weight: bold;
        line-num: 1;
        fit-width: true;
        text-align: right;
    }
    
    .wrapper > .detl-wrapper > .detl > .unit {
        width: auto;
        height: auto;
        color: #fbd6d7;
        font-size: 12px;
        margin-top: 10px;
        margin-left: 5px;
        line-num: 1;
        fit-width: true;
    }
    
    .not-available {
        font-size: 19px;
        font-weight: normal;
        float: right;
        padding-right: 17px;
    }
  </style>
</ui>
