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

<ui namespace="VankeServiceSaleCell_iPhone">
  <linear orientation="h" class="wrapper">
      <image class="bg" />
      
      <linear orientation="v" class="left-wrapper">
          <button id="btnHistoryMask" class="mask" />
          <image id="imgLeftBg" class="bg" />
          <linear orientation="v" class="inner" >
              <image id="imgLeftIcon" class="icon red" />
              <label id="lblDate" class="lbl">查看历史</label>
          </linear>
      </linear>
      
      <linear orientation="v" class="right-wrapper">
          <button id="mask" class="mask" />
          <image id="imgRightBg" class="bg red" />
          <image class="indictor" />
          
          <linear orientation="v" class="label">
              <label class="title">昨日销售</label>
          </linear>
          
          <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%;
    }
    
    .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    
    .wrapper > .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: white;
    }
    
    .wrapper > .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
        shadow-color: #f5f5f5;
    }
    
    /********************** left wrapper ***********************/
    .wrapper > .left-wrapper {
        height: 100%;
        width: 40%;
        v-align: center;
    }
    
     .wrapper > .left-wrapper > .inner {
         width: 100%;
         height: auto;
     }
    
    .wrapper > .left-wrapper > .inner > .lbl {
        width: 100%;
        height: auto;
        text-align: center;
        padding-top: 5px;
        color: #646467;
        font-size: 15px;
    }
    
    .wrapper > .left-wrapper > .inner > .icon {
        image-mode: center;
        width: 100%;
        height: auto;
    }
    
    .wrapper > .left-wrapper > .inner > .red {
        image-src: url(sales_red.png);
    }

    .wrapper > .left-wrapper > .inner > .purple {
        image-src: url(sales_purple.png);
    }
    
    .wrapper > .left-wrapper > .inner > .orange {
        image-src: url(sales_orange.png);
    }

    .wrapper > .left-wrapper > .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 1px;
        background-color: white;
    }
    
    /********************** right wrapper ***********************/
    .wrapper > .right-wrapper {
        height: 100%;
        width: 60%;
        align: right;
    }
    
    .wrapper > .right-wrapper > .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .wrapper > .right-wrapper > .red {
        background-color: #ed1b23;
    }
    
    .wrapper > .right-wrapper > .purple {
        background-color: #5435ad;
    }
    
    .wrapper > .right-wrapper > .orange {
        background-color: #ea6402;
    }
    
    .wrapper > .right-wrapper > .indictor {
        position: absolute;
        left: -50%;
        top: 0;
        image-src: url(right_icon.png);
    }
    
    .wrapper > .right-wrapper > .detl {
        width: auto;
        height: 50%;
        padding-right: -20px;
    }
    
    .wrapper > .right-wrapper > .detl > .icon {
        image-mode: center;
        width: 20px;
        height: auto;
        margin-top: 13px;
        margin-right: 5px;
    }
    
    .wrapper > .right-wrapper > .detl > .icon.down {
        image-src: url(little_down_icon.png);
    }
    
    .wrapper > .right-wrapper > .detl > .icon.up {
        image-src: url(little_up_icon.png);
    }
    
    .wrapper > .right-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 > .right-wrapper > .detl > .unit {
        width: auto;
        height: auto;
        color: #fbd6d7;
        font-size: 12px;
        margin-top: 10px;
        margin-left: 5px;
        line-num: 1;
        fit-width: true;
    }
    
    .wrapper > .right-wrapper > .label {
        width: auto;
        height: 50%;
        padding-right: -17px;
        v-align: center;
    }
    
    .wrapper > .right-wrapper > .label > .title {
        width: auto;
        height: auto;
        color: white;
        font-size: 17px;
        font-weight: bold;
        opacity: 0.9;
    }
  </style>
</ui>
