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

<template id="">
  <div class="">
    <v-toolbar color="white" class="WM-Intro">
      <v-toolbar-title >CSSD-DOC</v-toolbar-title>
      <v-spacer></v-spacer>
      <div class="my-2">
        <a href="https://app.cssd-doc.com/dashboard" v-if="auth"><v-btn color="black">Dashboard</v-btn></a>
        <a href="https://app.cssd-doc.com/login" v-else><v-btn color="black">Login</v-btn></a>
      </div>
    </v-toolbar>
    <v-parallax src="img/Static/Intro/bg.jpg" height="600">
      <v-layout
      column
      align-center
      justify-center
      class="black--text"
      >
      <p class="display-4 mb-5">CSSD-DOC</p>
      <h1 class="black--text mb-2 display-1 text-center">Central Sterile Supply Department App & Software</h1>
      <div class="subheading mb-4 text-center black--text">Management & Traceability & Documentation solution for CSSD / SPD</div>
      <a href="/Landingpage"><v-btn color="black">Download App</v-btn></a>
    </v-layout>
  </v-parallax>
  <section>
    <v-layout
    column
    wrap
    class="my-12"
    style="background-color:#f7f7f7"
    >
    <v-flex xs12 sm4 class="my-4 mb-5">
      <div class="text-center WM-Align-C">
        <h2 class="display-1">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 md2>
          </v-flex>
          <v-flex xs12 md3>
            <v-card flat class="transparent">
              <v-card-title v-for="(item , i) in items.items1"  :key="i" primary-title class="layout WM-Padding-8">
                <div class="title">- {{ item }}</div>
              </v-card-title>
            </v-card>
          </v-flex>
          <v-flex xs12 md3>
            <v-card flat class="transparent">
              <v-card-title v-for="(item , i) in items.items2"  :key="i" primary-title class="layout WM-Padding-8">
                <div class="title">- {{ item }}</div>
              </v-card-title>
            </v-card>
          </v-flex>
          <v-flex xs12 md3>
            <v-card flat class="transparent">
              <v-card-title v-for="(item , i) in items.items3"  :key="i" primary-title class="layout WM-Padding-8">
                <div class="title">- {{ item }}</div>
              </v-card-title>
            </v-card>
          </v-flex>
          <v-flex xs12 md1>
          </v-flex>
        </v-layout>
      </v-container>
    </v-flex>
  </v-layout>
</section>
<section>
  <v-parallax src="img/Static/Intro/bg02.jpg" height="380">
    <v-layout column align-center justify-center>
      <div class="headline white--text mb-4 text-center">MEC of High Level Disinfector</div>
      <em>Easy & Fast & Reliable</em>
    </v-layout>
  </v-parallax>
</section>
<section>
  <v-layout
  column
  wrap
  class="my-12"
  align-center
  style="background-color:#f7f7f7"
  >
  <v-flex xs12 sm4 class="my-4">
    <div class="text-center WM-Align-C">
      <h2 class="headline">Product identification and traceability</h2>
      <span class="subheading">
        Surgical Instrument Traceability
      </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 WM-Align-C">
              <v-icon x-large class="black--text text--lighten-2" style="font-size:40px !important">WMi-menu</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>
              <div class="WM-Align-C">
                Define and identify every instrument
              </div>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 md4>
          <v-card flat class="transparent">
            <v-card-text class="text-center WM-Align-C">
              <v-icon x-large class="black--text text--lighten-2 fas fa-archive" style="font-size:40px !important"></v-icon>
            </v-card-text>
            <v-card-title primary-title class="layout justify-center">
              <div class="headline">Sterile Package</div>
            </v-card-title>
            <v-card-text>
              <div class="WM-Align-C">
                Define and identify every things in every sterile package
              </div>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 md4>
          <v-card flat class="transparent">
            <v-card-text class="text-center WM-Align-C">
              <v-icon x-large class="black--text text--lighten-2 fas fa-inbox" style="font-size:40px !important"></v-icon>
            </v-card-text>
            <v-card-title primary-title class="layout justify-center">
              <div class="headline text-center">Labels</div>
            </v-card-title>
            <v-card-text>
              <div class="WM-Align-C">
                Make a unique label for every sterile package
              </div>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-flex>
</v-layout>
</section>
</div>
</template>
<style media="screen">
.v-card__title.WM-Padding-8 {
  padding: 8px !important;
}
.container.grid-list-xl :not(:only-child) .layout:last-child {
  margin: auto -12px !important;
}
.v-toolbar.WM-Intro {
  box-shadow : unset;
  margin-bottom: 0;
}
.v-toolbar.WM-Intro:not(.v-toolbar--fixed) .v-toolbar__content {
  margin-left: 0;
}
</style>
<script>
import { TokenService } from '@/services/auth/storage.service'

export default {
  data: () => ({
      auth : false,
    items: {
      items1 : [
        'Physical Parameters, STEAM',
        'BD Green Card Test',
        'BDS – Test',
        'Verify Sterilization Cycle, STEAM',
        'Routine Control (Daily/Weekly), STEAM',
        'Repair & Calibration, STEAM',
        'Implant Sterilization, STEAM',
      ],
      items2 : [
        'Physical Parameter, PLASMA',
        'Verify Sterilization Cycle, PLASMA',
        'Routine Control (Daily/Weekly), PLASMA',
        'Repair & Calibration, PLASMA',
        'Package Checks, PLASMA',
        'Wash – Checks',
        'Package Checks, STEAM',
      ],
      items3 : [
        'Physical Parameters, EtO',
        'Verify Sterilization Cycle, EtO',
        'Repair & Calibration, Eto',
        'Package Checks, EtO',
        'Protein Residue Test',
        'Seal Check'
      ],
    },
  }),
  components: {

  },
  created(){
      if(TokenService.getToken()){
          this.auth = true;
      }
  },
}
</script>