cssd-back/resources/js/vue/views/Intro/Intro.vue

<template id="">
  <div class="">
    <v-toolbar color="white">
      <v-toolbar-title v-text="title"></v-toolbar-title>
    </v-toolbar>
    <!-- _______________ Section 2::Begin _______________ -->
    <section>
      <v-parallax src="https://images.squarespace-cdn.com/content/v1/5bf5d5da506fbea76ffa4abe/1547249524951-CQ5U440SQYT23ODKL23G/ke17ZwdGBToddI8pDm48kKAwwdAfKsTlKsCcElEApLR7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UegTYNQkRo-Jk4EWsyBNhwKrKLo5CceA1-Tdpfgyxoog5ck0MD3_q0rY3jFJjjoLbQ/yenyi.jpg" height="600">
        <v-layout
        column
        align-center
        justify-center
        class="white--text"
        >
        <!-- <img src="assets/vuetify.png" alt="Vuetify.js" height="200"> -->
        <p class="display-4 mb-5">CSSD-DOC</p>
        <h1 class="white--text mb-2 mt-5 display-1 text-center">Central Sterile Supply Department App & Software</h1>
        <div class="subheading mb-4 text-center">Management & Traceability & Documentation solution for CSSD / SPD</div>
      </v-layout>
    </v-parallax>
  </section>
  <section>
    <v-layout
    column
    wrap
    class="my-12"
    align-center
    >
    <v-flex xs12 sm4 class="my-4">
      <div class="text-center">
        <h2 class="headline">-Sterilization process monitoring</h2>
        <span class="subheading">
          - Sterilizer test records
        </span>
      </div>
    </v-flex>
    <v-flex xs12>
      <v-container grid-list-xl>
        <v-layout row wrap align-left>
          <v-flex xs12 md4>
            <v-card flat class="transparent">
              <p v-for="(item , i) in items.items1"  :key="i" class="headline text-left">item</p>
            </v-card>
          </v-flex>
          <v-flex xs12 md4>
            <v-card flat class="transparent">
              <p v-for="(item , i) in items.items2"  :key="i" class="headline text-left">item</p>
            </v-card>
          </v-flex>
          <v-flex xs12 md4>
            <v-card flat class="transparent">
              <p v-for="(item , i) in items.items3"  :key="i" class="headline text-left" v-text="item"></p>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-flex>
  </v-layout>
</section>
<!-- _______________ Section 2::End _______________ -->

<!-- _______________ Section 7::Begin _______________ -->
<section>
  <v-layout
  column
  wrap
  class="my-12"
  align-center
  >
  <v-flex xs12 sm4 class="my-4">
    <div class="text-center">
      <h2 class="headline">Product identification and traceability</h2>
      <span class="subheading">
        Cras facilisis mi vitae nunc
      </span>
    </div>
  </v-flex>
  <v-flex xs12>
    <v-container grid-list-xl>
      <v-layout row wrap align-center>
        <v-flex xs12 md4>
          <v-card flat class="transparent">
            <v-card-text class="text-center">
              <v-icon x-large class="blue--text text--lighten-2">mdi-palette</v-icon>
            </v-card-text>
            <v-card-title primary-title class="layout justify-center">
              <div class="headline text-center">Item</div>
            </v-card-title>
            <v-card-text>
              Define and identify every instrument.
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 md4>
          <v-card flat class="transparent">
            <v-card-text class="text-center">
              <v-icon x-large class="blue--text text--lighten-2">mdi-flash</v-icon>
            </v-card-text>
            <v-card-title primary-title class="layout justify-center">
              <div class="headline">Fast development</div>
            </v-card-title>
            <v-card-text>
              Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
              Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 md4>
          <v-card flat class="transparent">
            <v-card-text class="text-center">
              <v-icon x-large class="blue--text text--lighten-2">mdi-wrench</v-icon>
            </v-card-text>
            <v-card-title primary-title class="layout justify-center">
              <div class="headline text-center">Completely Open Sourced</div>
            </v-card-title>
            <v-card-text>
              Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
              Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-flex>
</v-layout>
</section>

</div>
</template>
<script>

export default {
  data: () => ({
    items: [
      {
        items1 : [
          'aaaaa',
          'aaaaa',
          'aaaaaa'
        ],
      },
      {
        items2 : [
          'aaaaa',
          'aaaaa',
          'aaaaaa'
        ],
      },
      {
        items3 : [
          'aaaaa',
          'aaaaa',
          'aaaaaa'
        ],
      },
    ],
    disabled: false,
    dense: false,
    twoLine: false,
    threeLine: false,
    shaped: false,
    flat: false,
    subheader: false,
    inactive: false,
    subGroup: false,
    nav: false,
    avatar: false,
    rounded: false,
  }),
  components: {

  },
  created(){
  },
}
</script>