examples/vue/showcase/compositing.vue

<template>
  <div class="wrapper" @click="update" >
    <div class="item" compositing=true>
      <div class="itemWrapper">
        <div class="nameWrapper">
          <text class="itemName">Thomas Carlyle</text>
        </div>
        <image class="itemPhoto" src="https://gw.alicdn.com/tps/TB1Jl1CPFXXXXcJXXXXXXXXXXXX-370-370.jpg"></image>
        <div class="descWrapper">
          <text class="itemDesc">Genius only means hard-working all one\'s life</text>
        </div>
      </div>
    </div>

    <div class="item" compositing=false>
      <div class="itemWrapper">
        <div class="nameWrapper">
          <text class="itemName">Thomas Carlyle</text>
        </div>
        <image class="itemPhoto" src="https://gw.alicdn.com/tps/TB1Jl1CPFXXXXcJXXXXXXXXXXXX-370-370.jpg"></image>
        <div class="descWrapper">
          <text class="itemDesc">Genius only means hard-working all one\'s life</text>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  .wrapper {
    align-items: center; 
    opacity: 0.8;
  }
  .itemWrapper {
    flex:1;
    border-top-right-radius: 80;
    border-bottom-right-radius: 80;
    border-top-width: 10;
    border-top-color: red;
    border-style: dashed;
    align-items: center;
    background-color: white;
  }
  .nameWrapper {
    background-color:rgba(255,0,0,0.5);
    border-radius: 30;
    overflow: visible;
    border-color: black;
    border-width: 10;
  }
  .item {
    margin-top: 120px; 
    background-color: #CCCCCC;
    align-items: center;
  }
  .itemName {
    font-size:28;
    color:#333333;
    line-height:42;
    text-align:left;
    margin-top: 24;
  }
  .itemPhoto {
    margin-top: 18;
    width: 220;
    height: 220;
    margin-bottom: 18;
    border-radius: 30;
    overflow: hidden;
    background-color: blue;
  }
  .itemDesc {
    font-size:24;
    margin:12;
    color:#999999;
    line-height:36;
    text-align:left;
  }
</style>

<script>
  module.exports = {
    data: {
    },
    methods: {
    }
  }
</script>