All files / components/home JobOpportunities.vue

0% Statements 0/2
100% Branches 0/0
0% Functions 0/1
0% Lines 0/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91                                                                                                                                                                                     
<template>
  <div class="home-job-opportunities flex flex-center q-py-md">
    <div class="row justify-center">
      <div class="col col-md-10 col-xs-12 text-center q-py-md">
        <div class="text-h4">Job opportunities</div>
      </div>
    </div>
    <div class="row justify-center">
      <div class="col col-md-10 col-xs-12">
        <q-card
          class="card"
          square
        >
          <q-tabs
            v-model="tab"
            inline-label
            stretch
            class="text-white shadow-0 bg-accent"
            active-bg-color="white"
            indicator-color="white"
            active-color="primary"
            align="left"
          >
            <q-tab
              name="recent"
              label="Recent"
            />
            <q-tab
              name="featured"
              label="Featured"
            />
            <q-tab
              name="mostviewed"
              label="Most viewed"
            />
          </q-tabs>
          <!-- <q-separator /> -->
          <q-card-section>
 
            <q-list>
 
              <JobListing
                v-for="i in 5"
                :key="i"
              />
            </q-list>
 
          </q-card-section>
        </q-card>
      </div>
    </div>
    <div class="row justify-center q-pt-md">
      <div class="col-auto">
        <q-btn outline>Load more</q-btn>
      </div>
 
    </div>
  </div>
</template>
 
<script>
import JobListing from "components/jobs/JobListing"
export default {
  // name: 'ComponentName',
  components: {
    JobListing,
  },
  data () {
    return { tab: "recent" };
  }
};
</script>
 
<style lang="stylus">
.home-job-opportunities {
  color: white;
  background-color: $primary;
  min-height: 600px;
  padding: 32px;
}
 
.home-job-opportunities .row {
  width: 100%;
}
 
.home-job-opportunities .card {
  width: 100%;
  min-height: 400px;
}
</style>