contactus.vue

<template>
  <q-page >
    <div class="q-ma-md">
      <q-btn  class="full-width" color="green" icon="chat" label="Chat With Librarian"  />
    </div>

    <div class="q-ma-md text-center text-weight-medium">
      Corporate Department<br>
      Perpustakaan Tun Abdul Razak<br>
      40450 Shah Alam<br>
      Selangor Darul Ehsan, Malaysia
    </div>

    <div class="q-pa-md">
      <q-list bordered separator>
        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-avatar color="dark" text-color="white" icon="phone" />
          </q-item-section>
          <q-item-section>Customer Services</q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-avatar color="dark" text-color="white" icon="phone" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Consultation Services 1</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-avatar color="dark" text-color="white" icon="phone" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Consultation Services 2</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </div>

    <div class="q-pa-md">
      <q-list bordered separator >
        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-avatar color="red" text-color="white" icon="mail" />
          </q-item-section>
          <q-item-section>korporatptar@uitm.edu.my</q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-avatar color="blue" text-color="white" icon="send" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Join Channel @UiTMLibrary</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-avatar color="green" text-color="white" icon="chat" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Message us on Whatsapp</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </div>

    <div class="q-mt-md">
      <q-btn color="dark" class="full-width" label="Connect With Us" />
    </div>

    <div class="q-mt-md">
      <q-list bordered separator>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-avatar color="blue" text-color="white" icon="facebook" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Facebook</q-item-label>
            <q-item-label caption lines="1">/KetuaPustakawanUiTM</q-item-label>

          </q-item-section>
        </q-item>
      </q-list>
    </div>
  </q-page>
</template>

<script>
export default {
  // name: 'PageName',
}
</script>