%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="searchbox center">
<form action="" class="search-property" @submit.prevent="greet()">
<h3>Search Property</h3>
<div v-if="step === 1">
<label for="">I am Looking For</label>
<div class="dselect">
<input type="radio" name="payment" id="propertyservice" value="1" v-model="picked" checked>
<label for="propertyservice">
<i class="" aria-hidden="true"></i>
<span>Property Service</span>
</label>
<input type="radio" name="payment" id="maintenance" value="2" v-model="picked">
<label for="maintenance">
<i class="" aria-hidden="true"></i>
<span>Maintenance Service</span>
</label>
</div>
<div v-if="picked==1">
<label for="">I am a</label>
<div class="dselect">
<input type="radio" name="iam" id="owner" value="1" v-model="iam" checked>
<label for="owner">
<i class="" aria-hidden="true"></i>
<span>Owner</span>
</label>
<input type="radio" name="iam" id="tenant" value="2" v-model="iam">
<label for="tenant">
<i class="" aria-hidden="true"></i>
<span>Tenant</span>
</label>
<input type="radio" name="iam" id="buyer" value="3" v-model="iam">
<label for="buyer">
<i class="" aria-hidden="true"></i>
<span>Buyer</span>
</label>
</div>
<div v-if="iam==1">
<label for="">Looking to</label>
<div class="dselect">
<input type="radio" name="lk" id="sell" value="2" v-model="lk" checked>
<label for="sell">
<i class="" aria-hidden="true"></i>
<span>Sell My Property</span>
</label>
<input type="radio" name="lk" id="rent" value="3" v-model="lk">
<label for="rent">
<i class="" aria-hidden="true"></i>
<span>Rent Out My Property</span>
</label>
</div>
</div>
<div class="form-group">
<label for="">Property Type</label>
<select v-model="property_type" class="form-control">
<optgroup label="Residential">
<option value="1">Apartment</option>
<option value="2">House</option>
<option value="3">Villa Gated Community</option>
<option value="4">Residential Land</option>
</optgroup>
<optgroup label="Commercial">
<option value="9">Commercial Office Space</option>
<option value="5">Office in IT Park/ SEZ</option>
<option value="6">Shop/Showroom/Retail Space</option>
<option value="7">Commercial Land</option>
<option value="8">Warehouse/ Godown</option>
</optgroup>
</select> </div>
</div> <!-- end picked ==1 -->
</div>
<div v-if="step === 2">
<div v-if="picked==1">
<label for="">location</label>
<select name="" id="" class="form-control">
<option value="">Aluva</option>
</select>
<label for="">Additional Info</label>
<input type="text" class="form-control">
<label for="">Name</label>
<input type="text" class="form-control">
<label for="">Phone</label>
<div class="_2qtUG">
<div class="_2CXtV">
<select class="minc" v-model="min">
<option value="10000">10000</option>
<option value="20000">20000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
<option value="60000">60000</option>
<option value="70000">70000</option>
<option value="80000">80000</option>
<option value="90000">90000</option>
<option value="100000">1 Lac</option>
<option value="150000">1.5 Lac</option>
<option value="200000">2 Lac</option>
<option value="400000">4 Lac</option>
<option value="700000">7 Lac</option>
<option value="1000000">10 Lac</option>
</select>
<span class="budgetspan">to</span>
<input type="text">
</div>
</div>
</div>
<div v-if="picked==1">
<label for="">Budget</label>
<div class="_2qtUG">
<div class="_2CXtV">
<select class="minc" v-model="min">
<option value="10000">10000</option>
<option value="20000">20000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
<option value="60000">60000</option>
<option value="70000">70000</option>
<option value="80000">80000</option>
<option value="90000">90000</option>
<option value="100000">1 Lac</option>
<option value="150000">1.5 Lac</option>
<option value="200000">2 Lac</option>
<option value="400000">4 Lac</option>
<option value="700000">7 Lac</option>
<option value="1000000">10 Lac</option>
</select>
<span class="budgetspan">to</span>
<select class="minc" v-model="max">
<option value="10000">10000</option>
<option value="20000">20000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
<option value="60000">60000</option>
<option value="70000">70000</option>
<option value="80000">80000</option>
<option value="90000">90000</option>
<option value="100000">1 Lac</option>
<option value="150000">1.5 Lac</option>
<option value="200000">2 Lac</option>
<option value="400000">4 Lac</option>
<option value="700000">7 Lac</option>
<option value="1000000">10 Lac</option>
</select>
</div>
</div>
</div>
<div v-else>
<label for="">Budget</label>
<div class="_2qtUG">
<div class="_2CXtV">
<select class="minc" v-model="min">
<option value="500000">5 Lac</option>
<option value="1000000">10 Lac</option>
<option value="2000000">20 Lac</option>
<option value="3000000">30 Lac</option>
<option value="4000000">40 Lac</option>
<option value="5000000">50 Lac</option>
<option value="6000000">60 Lac</option>
<option value="7000000">70 Lac</option>
<option value="8000000">80 Lac</option>
<option value="9000000">90 Lac</option>
<option value="10000000">1 Cr</option>
<option value="20000000">2 Cr</option>
<option value="30000000">3 Cr</option>
<option value="40000000">4 Cr</option>
<option value="50000000">5 Cr</option>
<option value="100000000">10 Cr</option>
<option value="200000000">20 Cr</option>
</select>
<span class="budgetspan">to</span>
<select class="minc" v-model="max">
<option value="500000">5 Lac</option>
<option value="1000000">10 Lac</option>
<option value="2000000">20 Lac</option>
<option value="3000000">30 Lac</option>
<option value="4000000">40 Lac</option>
<option value="5000000">50 Lac</option>
<option value="6000000">60 Lac</option>
<option value="7000000">70 Lac</option>
<option value="8000000">80 Lac</option>
<option value="9000000">90 Lac</option>
<option value="10000000">1 Cr</option>
<option value="20000000">2 Cr</option>
<option value="30000000">3 Cr</option>
<option value="40000000">4 Cr</option>
<option value="50000000">5 Cr</option>
<option value="100000000">10 Cr</option>
<option value="200000000">20 Cr</option>
</select>
</div>
</div>
</div>
<button type="submit" class="btn btn-danger">Search</button>
</div>
<div v-if="step==3">
<label for="">Name</label>
<input type="text" class="form-control">
<label for="">Phone</label>
<div class="_2qtUG">
<div class="_2CXtV">
<select class="minc" v-model="min">
<option value="10000">10000</option>
<option value="20000">20000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
<option value="60000">60000</option>
<option value="70000">70000</option>
<option value="80000">80000</option>
<option value="90000">90000</option>
<option value="100000">1 Lac</option>
<option value="150000">1.5 Lac</option>
<option value="200000">2 Lac</option>
<option value="400000">4 Lac</option>
<option value="700000">7 Lac</option>
<option value="1000000">10 Lac</option>
</select>
<span class="budgetspan">to</span>
<input type="text">
</div>
</div>
</div>
<button @click.prevent="prev()" class="btn btn-primary">Previous</button>
<button @click.prevent="next()" class="btn btn-primary">Next</button>
</form>
</div>
</template>
<script>
export default {
data(){
return{
users:[],
searchQuery:'',
searchQuery1:'',
destination:'',
locationlist:{},
picked:'1',
locations:[],
location:'',
step:1,
min:'',
max:'',
iam:'',
data: this.$route.params.data
}
},
mounted() {
console.log('Component mounted.')
},
methods:{
prev() {
this.step--;
},
next() {
this.step++;
},
},
created:function(){
}
}
</script>
<style scoped>
.center {
margin: auto;
width: 60%;
border: 5px solid #e6e6e6;
padding: 10px;
}
.dselect label {
height: 47px;
width: 150px;
border: 1px solid #d3d7d5;
margin: auto;
border-radius: 6px;
position: relative;
color: #000;
transition: 0.5s;
background: #fff;
background-color: rgb(255, 255, 255);
}
.dselect label > span {
font-size: 12px;
font-family: "Poppins", sans-serif;
font-weight: 501;
position: absolute;
left: 50%;
transform: translate(-50%, 80%);
top: 2px;
width: 100%;
text-align: center;
}
</style>
Zerion Mini Shell 1.0