Element.io Card

by Hugo Licon

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card :body-style="{ padding: '0px' }">
          <img class="image" src="https://res.cloudinary.com/prixz/image/upload/a_90/v1569111914/tickets/prueba1116.jpg">
        <div style="padding: 14px;">
          <span>Yummy hamburger</span>
          <div class="bottom clearfix">
            <time class="time">{{ currentDate }}</time>
            <el-button type="text" class="button">Operating button</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card :body-style="{ padding: '0px' }">
        <div style="display: flex; align-items: center; justify-content: center; background-color: red; overflow: hidden; height: 360px; padding: 20px">
          <img src="https://via.placeholder.com/1080x810.png" style="transform: rotate(90deg); flex-shrink: 0; image0size: cover;">
        </div>
        <div style="padding: 14px;">
          <span>Yummy hamburger</span>
          <div class="bottom clearfix">
            <time class="time">{{ currentDate }}</time>
            <el-button type="text" class="button">Operating button</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
  }

  .clearfix::before,
  .clearfix::after {
      display: table;
      content: "";
  }
  
  .clearfix::after {
      clear: both;
  }
  
  
div.top {
 width: 100%;
 height: 300px;
 border: 2px solid red;

}

.img {
    transform: rotate(90deg);
}

Babel + JSX

var Main = {
  data() {
    return {
      currentDate: new Date()
    };
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')