%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div>
<section id="ch">
<div class="container">
<div class="row">
<div class="col">
</div>
<div class="col">
<form action="" class="custom-form">
<div v-if="step === 1">
<h3> Customized Holidays</h3>
<p> Memorable travel experiences tailor made to your specifications </p>
<div class="form-group">
<label for="">Select Destination</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
</div>
<button @click.prevent="next()">Next</button>
</div>
<div v-if="step === 2">
<h3>What Kind of trip are you planing</h3>
<p>Tailor-made holidays for you! Tell us what you want and we will design it for you or explore our special packages. </p>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gp1" id="" value="1" checked>
Romantic
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gp1" id="" value="2" >
Family Trip
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gp1" id="" value="3" >
Honeymoon Trip
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gp1" id="" value="4" >
Group Trip
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gp1" id="" value="5" >
Solo Trip
</label>
</div>
<button @click.prevent="prev()">Previous</button>
<button @click.prevent="next()">Next</button>
</div>
<div v-if="step === 3">
<h3>What Kind of destination you prefer</h3>
<p>Tailor-made holidays for you! Tell us what you want and we will design it for you or explore our special packages. </p>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gp2" id="" value="1" checked>
Adventure
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gp2" id="" value="2" >
Leisure
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gp2" id="" value="3" >
Beaches
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gp2" id="" value="4" >
Hill Stations
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gp2" id="" value="5" >
Nature
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gp2" id="" value="5" >
Snow
</label>
</div>
<button @click.prevent="prev()">Previous</button>
<button @click.prevent="next()">Next</button>
</div>
<div v-if="step === 4">
<p>Tailor-made holidays for you! Tell us what you want and we will design it for you or explore our special packages. </p>
<div class="form-group">
<label for="">Name</label>
<input type="text"
class="form-control" name="" id="" aria-describedby="helpId" placeholder="">
</div>
<div class="form-group">
<label for="">Email</label>
<input type="text"
class="form-control" name="" id="" aria-describedby="helpId" placeholder="">
</div>
<div class="form-group">
<label for="">Phone</label>
<input type="text"
class="form-control" name="" id="" aria-describedby="helpId" placeholder="">
</div>
<button @click.prevent="prev()">Previous</button>
<button @click.prevent="submit()">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<section id="tid">
<div class="container">
<div class="row">
<h2>Trending International Destinations </h2>
</div>
<div class="row">
<div class="col">
<a :href="'/destination/5'">
<div>
<img src="/images/maldives.jpg">
<h3>Maldives</h3>
</div> </a>
</div>
<div class="col">
<a :href="'/destination/3'">
<div>
<img src="/images/dubai2.jpg">
<h3>Dubai</h3>
</div> </a>
</div>
<div class="col">
<img src="/images/singapore.jpg">
<h3>Singapore</h3>
</div>
<div class="col">
<img src="/images/srilanka.jpg">
<h3>Srilanka</h3>
</div>
</div>
<a :href="'/international-packages'"><button id="button2">View Details</button></a>
</div>
</section>
<section id="tid">
<div class="container">
<div class="row">
<h2>Trending Domestic Destinations </h2>
</div>
<div class="row">
<div class="col">
<img src="/images/kerala2.jpg">
<h3>Kerala</h3>
<a :href="'/destination/2'"><button id="button2">View Details</button></a>
</div>
<div class="col">
<img src="/images/goa.jpg">
<h3>Goa</h3>
</div>
<div class="col">
<img src="/images/ladakh.jpg">
<h3>Ladakh</h3>
</div>
<div class="col">
<img src="/images/rajasthan.jpg">
<h3>Rajasthan</h3>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data(){
return {
packages:[],
tasks:[],
searchQuery:'',
isTyping: false,
isLoading: false,
property_type:null,
property_for:null,
city: [],
test:[],
step:1,
registration:{
name:null,
email:null,
street:null,
city:null,
state:null,
numtickets:0,
shirtsize:'XL'
},
themes: [],
products: [
{name:'test1', color:'red', size:'XL'},
{name:'test2', color:'black', size:'L'},
{name:'test3', color:'red', size:'L'},
{name:'test4', color:'black', size:'XL'},
{name:'test5', color:'red', size:'L'},
{name:'test6', color:'yellow', size:'XL'},
{name:'test7', color:'black', size:'L'}
],
sortBy: 'name',
keyword: '',
}
},
watch: {
searchQuery: _.debounce(function() {
this.isTyping = false;
}, 500),
isTyping: function(value) {
if (!value) {
this.searchUser(this.searchQuery);
}
}
},
methods:{
searchUser: function(searchQuery) {
this.isLoading = true;
axios.get('client/searchquery?q=' + searchQuery)
.then(response => {
this.isLoading = false;
this.users = response.data;
});
},
getResults:function(page = 1) {
axios.get('properties?page=' + page)
.then(response => {
this.properties = response.data;
});
},
loadusers:function(){
axios.get('/packages').then(response => {
this.packages = response.data
this.test=this.packages.data
})
},
prev() {
this.step--;
},
next() {
this.step++;
},
submit() {
alert('Thankyou for submiting your query');
},
loadtotalcount(){
axios.get('/client/totalcount') .then(response => {
this.tasks = response.data
})
},
getPosts:function () {
axios.get('/client').then(function(response){
this.rows = response.data;
}.bind(this));
},
searchProperty:function (){
axios.post('/properties/searchproperty', {
property_for: this.property_for,
}).then(response => {
this.properties = response.data})
}
},
computed:{
computedProducts: function () {
return this.test.filter((item) => {
return (this.keyword.length === 0 || item.package_name.match(this.keyword)) &&
(this.city.length === 0 || this.city == item.destination) &&
(this.themes.length === 0 || this.themes.includes(item.themes))
})
}
},
created: function(){
this.loadusers(),
this.loadtotalcount()
},
}
</script>
<style scoped>
.filterTitle{
font-weight: 700;
color: #000;
margin-bottom: 14px;
font-size: 16px;
line-height: 16px;
margin-top: 22px;
}
.searchHeader{
background: #f9c11e;
height: 60px;
margin-bottom: 20px;
}
.st{
font-size: 1.5rem;
font-weight: bold;
padding-bottom: 15px;
padding-top: 15px;
}
.contact-title{
display: inline-block;
}
#ch{
background-image: url("/images/bg2.jpg");
height: 450px;
}
.custom-form{
width: 36.125rem;
background-color: #fff;
padding: 2.475rem 2.875rem;
margin-top: 10%;
opacity: 0.9;
}
#tid{
padding-top: 2%;
padding-bottom: 4%;
}
#tid h2{
font-weight: bold;
font-size: 22px;
padding-bottom: 1%;
}
#tid h3{
font-size: 20px;
font-weight: bold;
padding-top: 5%;
}
#tid a, a:hover, a:focus, a:active {
text-decoration: none;
color: inherit;
}
</style>
Zerion Mini Shell 1.0