buylist.vue

<template>
  <div class="viewport" style="overflow: auto;">
    <md-toolbar :md-elevation="1" style="height : 30px" class="md-title">
      <span>Buylist</span>
    </md-toolbar>
    <md-list class="md-double-line" style="height : 230px">
      <md-list-item>
        <md-button class="md-icon-button md-raised" style="color:#1DDB16;backgroundColor:#1DDB16">
          <img src="../../assets/book-open-flat.png" />
        </md-button>
        <div class="md-list-item-text">
          <span>&nbsp;&nbsp;책 제목</span>
          <span>&nbsp;&nbsp;구매 대기중</span>
        </div>
        <md-button class="md-icon-button md-raised md-accent">
          <img src="../../assets/x-512.png" />
        </md-button>
        <md-button class="md-icon-button md-raised md-primary">
          <img src="../../assets/check-icon.png" />
        </md-button>
      </md-list-item>
      <md-divider></md-divider>
      <md-list-item>
        <md-button class="md-icon-button md-raised" style="color:#1DDB16;backgroundColor:#1DDB16">
          <img src="../../assets/book-open-flat.png" />
        </md-button>
        <div class="md-list-item-text">
          <span>&nbsp;&nbsp;책 제목</span>
          <span>&nbsp;&nbsp;구매 대기중</span>
        </div>
        <md-button class="md-icon-button md-raised md-accent">
          <img src="../../assets/x-512.png" />
        </md-button>
        <md-button class="md-icon-button md-raised md-primary">
          <img src="../../assets/check-icon.png" />
        </md-button>
      </md-list-item>
      <md-divider></md-divider>
      <md-list-item>
        <md-button class="md-icon-button md-raised" style="color:#1DDB16;backgroundColor:#1DDB16">
          <img src="../../assets/book-open-flat.png" />
        </md-button>
        <div class="md-list-item-text">
          <span>&nbsp;&nbsp;책 제목</span>
          <span>&nbsp;&nbsp;구매 대기중</span>
        </div>
        <md-button class="md-icon-button md-raised md-accent">
          <img src="../../assets/x-512.png" />
        </md-button>
        <md-button class="md-icon-button md-raised md-primary">
          <img src="../../assets/check-icon.png" />
        </md-button>
      </md-list-item>
      <md-divider></md-divider>
      <md-list-item>
        <md-button class="md-icon-button md-raised" style="color:#1DDB16;backgroundColor:#1DDB16">
          <img src="../../assets/book-open-flat.png" />
        </md-button>
        <div class="md-list-item-text">
          <span>&nbsp;&nbsp;책 제목</span>
          <span>&nbsp;&nbsp;구매 대기중</span>
        </div>
        <md-button class="md-icon-button md-raised md-accent">
          <img src="../../assets/x-512.png" />
        </md-button>
        <md-button class="md-icon-button md-raised md-primary">
          <img src="../../assets/check-icon.png" />
        </md-button>
      </md-list-item>
      <md-divider></md-divider>
      <md-list-item>
        <md-button class="md-icon-button md-raised" style="color:#1DDB16;backgroundColor:#1DDB16">
          <img src="../../assets/book-open-flat.png" />
        </md-button>
        <div class="md-list-item-text">
          <span>&nbsp;&nbsp;책 제목</span>
          <span>&nbsp;&nbsp;구매 대기중</span>
        </div>
        <md-button class="md-icon-button md-raised md-accent">
          <img src="../../assets/x-512.png" />
        </md-button>
        <md-button class="md-icon-button md-raised md-primary">
          <img src="../../assets/check-icon.png" />
        </md-button>
      </md-list-item>
      <md-divider></md-divider>
    </md-list>
  </div>
</template>

<script>
import Vue from 'vue'
import VueMaterial from 'vue-material'
import Multiselect from 'vue-multiselect'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
Vue.use(VueMaterial)
  export default {
    name: 'SubheaderExample'
  }
</script>

<style lang="scss" scoped>
  .viewport {
    width: 100%;
    display: inline-block;
    vertical-align: top;
  }
</style>