Notes

<template>
<div style="width:100%; ">
<div v-for="(details,index) in getHotel" :key="index">
<div class="card mb-3 card" v-if="details.prices.length > 0">
<!-- v-if="details && details.title != null" -->
<div class="row no-gutters" style="padding:20px">
<div class="col-md-8">
<img :src="'http://'+details.picture" class="card-img hotelImages">
</div>

<div class="col-md-12">
<div class="card-body details">
<p class="card-text float-right totalDetails" style="font-size:30px">
<span class="priceTariff">Gecelik</span><br>
<span class="price">{{getPrice(details)}}TL</span>
<br>
<button class="btn btn-success float-right" @click="totalPricePageClick">Tüm Fiyatlar</button>
</p>
<!-- <div class="float-right line"></div> -->
<h5 class="card-title hotelTitle">{{details.name}}</h5>
<p class="card-text">{{details.locationDetail}}</p>
<p class="card-text"><small class="text-muted hotelScore" v-if="details.averageScore != null">{{details.averageScore}}</small></p>
<p class="card-text"><small class="text-muted hotelScore" v-if="details.averageScore == null">Puan yok</small></p>

</div>
</div>
<div class="col-md-4 topCard">
<bi-top-price-card :topPrice="details.prices"></bi-top-price-card>
</div>
</div>
<!-- <div v-if="details == null || details.title == null">
<h1>Lütfen arama yapın...</h1>
</div> -->
<div>
<bi-price-card style="margin-top:10px;padding:20px" class="active" :getPrice="details.prices" v-if="details.prices.length > 0"></bi-price-card>
</div>

</div>
</div>

</div>
</template>
<script>
export default {
props: {
getHotel: {}
},
data() {
return {
totalPages: false
}
},
methods: {
getPrice(hotel) {
if (hotel.prices.length > 0) {
return hotel.prices[0].price.price
.toFixed(2)
.replace(/d(?=(d{3})+.)/g, '$&,')
} else {
return 0
}
},
totalPricePageClick() {
this.totalPages = !this.totalPages
}
}
}
</script>

<style>
.hotelImages {
height: 250px;
width: 340px;
}
.details {
margin-right: 50px;
}
.price {
font-weight: bold;
text-align: center;
color: #4169e1;
}
.priceTariff {
font-size: 15px;
font-weight: initial;
}
.totalDetails {
text-align: right;
}
.hotelTitle {
font-size: 25px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.hotelScore {
font-family: "Courier New", Courier, monospace;
font-size: 15px;
border: 3px solid #87ceeb;
background-color: #87ceeb;
color: white !important;
border-radius: 50px;
padding: 3px;
position: absolute;
bottom: 10px;
}
.line {
height: 220px;
margin-right: 30px;
margin-left: 15px;
width: 0.05em;
background-color: gray;
}
.card {
-webkit-box-shadow: 9px 6px 12px -10px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 9px 6px 12px -10px rgba(0, 0, 0, 0.75);
box-shadow: 9px 6px 12px -10px rgba(0, 0, 0, 0.75);
}
.topCard {
text-align: center;
}
</style>