weex 组件实践 ：cell

image.png

<template>
  <div class="container">
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3AJt"></image>
        <div class="rightView">
          <text class="title">我是标题</text>
          <text class="subTitle">我是子标题</text>
          </div>
        
    </div>
  </div>
</template>

<style>
  .cell { 
    margin-top: 10; 
    margin-left: 10; 
    flex-direction: row;
    /*background-color:gray;*/
    border-style:bottom;
    border-width:1px;
    border-color:gray;
    
  }
  .thumb { 
    width: 200px; 
    height: 200px; 
    
  }
  .rightView { 
    flex: 1; 
    margin-left:50px;
    color: white; 
    font-size: 50;
    /*background-color:red;*/
    
  }
  .title { 
    text-align: left; 
    color: white; 
    font-size: 50;
    background-color:blue;
    
  }
  .subTitle {
    /*position: absolute;*/
    /*bottom: 0px;*/
    /*left:0px;*/
    /*right:0px;*/
    text-align: left; 
    color: red; 
    font-size: 50;
    background-color:yellow;
    
  }
</style>