Ledger Nano X - The secure hardware wallet
SHARE
TWEET

Untitled

olexander_dan May 20th, 2020 841 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div>
  3.     <p class="display-4 text-center fadeInUp" v-wow>Популярний вибір:</p>
  4.     <b-card-group columns>
  5.       <div v-for="car in popularCars" :key="car.id">
  6.         <div v-if="car.model.imageName != null">
  7.           <b-card
  8.             :img-src="require('@/assets/modelsPhotos/' + car.model.imageName)"
  9.             :img-alt="car.model.model + ' photo'"
  10.             img-top
  11.             class="fadeInUp d-inline-block"
  12.             v-wow
  13.           >
  14.             <b-card-text class="mb-0">
  15.               <div class="d-flex justify-content-between align-items-center">
  16.                 <div>
  17.                   <h2>{{ car.model.brand + " " + car.model.model }}</h2>
  18.                   <h4>{{ car.model.year }}</h4>
  19.                   <h5>{{ car.model.type }}</h5>
  20.                 </div>
  21.                 <b-button variant="danger">
  22.                   <div class="text-left">Від</div>
  23.                   <div class="d-flex align-items-baseline text-left">
  24.                     <h4>{{ car.dayPrice }}</h4>
  25.                     <div class="my-0">/день</div>
  26.                   </div>
  27.                 </b-button>
  28.               </div>
  29.             </b-card-text>
  30.           </b-card>
  31.         </div>
  32.       </div>
  33.     </b-card-group>
  34.   </div>
  35. </template>
  36.  
  37. <script>
  38. import DataService from "../../service/DataService";
  39.  
  40. export default {
  41.   name: "Landing",
  42.   data() {
  43.     return {
  44.       popularCars: [],
  45.       carsResource: "cars",
  46.     };
  47.   },
  48.   methods: {
  49.     loadCars() {
  50.       DataService.retrieveAllRecords(this.carsResource)
  51.         .then((response) => {
  52.           this.popularCars = this._.uniqBy(response.data, "model.model").slice(
  53.             0,
  54.             6
  55.           );
  56.         })
  57.         .catch((error) => {
  58.           console.log(error);
  59.         });
  60.     },
  61.   },
  62.   created() {
  63.     this.loadCars();
  64.   },
  65. };
  66. </script>
  67.  
  68. <style lang="css">
  69. @import "../../styles/main.css";
  70. @import "../../styles/animate.css";
  71.  
  72. @media (min-width: 1px) {
  73.   .card-columns {
  74.     column-count: 1;
  75.   }
  76. }
  77.  
  78. @media (min-width: 1000px) {
  79.   .card-columns {
  80.     column-count: 2;
  81.   }
  82. }
  83.  
  84. @media (min-width: 1400px) {
  85.   .card-columns {
  86.     column-count: 3;
  87.   }
  88. }
  89. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top