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> |