xxxxxxxxxx1
<template>2
<section class="intro">3
<div class="bg-image vh-100" style="background-color: #aaf0d1;">4
<div class="mask d-flex align-items-center h-100" >5
<MDBContainer>6
<MDBRow>7
<MDBCol md="10" lg="8" xl="7" class=" mx-auto">8
<MDBCard class="mb-2" style="border-radius: 10em; background: linear-gradient(to right, #F0B6D5, #A38495);">9
<MDBCardBody class="p-2">10
<MDBInput v-model="inputValue" inputGroup="lg" :formOutline="false" class="form-control rounded bg-transparent text-white" placeholder="Type Keywords">11
<span class="input-group-text border-0" id="basic-addon2"><i class="fas fa-search fa-lg text-white"></i></span>12
</MDBInput>13
</MDBCardBody>14
</MDBCard>15
<MDBCard style="background-color: #edeaea;">16
<MDBCardBody class="p-4">17
<h6 class="text-uppercase mt-3 mb-4" style="color: #A38495;">Advanced search</h6>18
<MDBRow>19
<MDBCol md="4" class="mb-3">20
<MDBDropdown v-model="dropdown1">21
<MDBDropdownToggle size="lg" color="light" class="btn-block btn-rounded" @click="dropdown1 = !dropdown1">Accessories </MDBDropdownToggle>22
<MDBDropdownMenu>23
<MDBDropdownItem href="#">Action</MDBDropdownItem>24
<MDBDropdownItem href="#">Another action</MDBDropdownItem>25
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>26
</MDBDropdownMenu>27
</MDBDropdown>28
</MDBCol>29
<MDBCol md="4" class="mb-3">30
<MDBDropdown v-model="dropdown2">31
<MDBDropdownToggle size="lg" color="light" class="btn-block btn-rounded" @click="dropdown2 = !dropdown2">Color </MDBDropdownToggle>32
<MDBDropdownMenu>33
<MDBDropdownItem href="#">Action</MDBDropdownItem>34
<MDBDropdownItem href="#">Another action</MDBDropdownItem>35
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>36
</MDBDropdownMenu>37
</MDBDropdown>38
</MDBCol>39
<MDBCol md="4" class="mb-3">40
<MDBDropdown v-model="dropdown3">41
<MDBDropdownToggle size="lg" color="light" class="btn-block btn-rounded" @click="dropdown3 = !dropdown3">Size </MDBDropdownToggle>42
<MDBDropdownMenu>43
<MDBDropdownItem href="#">Action</MDBDropdownItem>44
<MDBDropdownItem href="#">Another action</MDBDropdownItem>45
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>46
</MDBDropdownMenu>47
</MDBDropdown>48
</MDBCol>49
</MDBRow>50
<MDBRow>51
<MDBCol md="4" class="mb-3">52
<MDBDropdown v-model="dropdown4">53
<MDBDropdownToggle size="lg" color="light" class="btn-block btn-rounded" @click="dropdown4 = !dropdown4">Sale </MDBDropdownToggle>54
<MDBDropdownMenu>55
<MDBDropdownItem href="#">Action</MDBDropdownItem>56
<MDBDropdownItem href="#">Another action</MDBDropdownItem>57
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>58
</MDBDropdownMenu>59
</MDBDropdown>60
</MDBCol>61
<MDBCol md="4" class="mb-3">62
<MDBDropdown v-model="dropdown5">63
<MDBDropdownToggle size="lg" color="light" class="btn-block btn-rounded" @click="dropdown5 = !dropdown5">Time </MDBDropdownToggle>64
<MDBDropdownMenu>65
<MDBDropdownItem href="#">Action</MDBDropdownItem>66
<MDBDropdownItem href="#">Another action</MDBDropdownItem>67
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>68
</MDBDropdownMenu>69
</MDBDropdown>70
</MDBCol>71
<MDBCol md="4" class="mb-3">72
<MDBDropdown v-model="dropdown6">73
<MDBDropdownToggle size="lg" color="light" class="btn-block btn-rounded" @click="dropdown6 = !dropdown6">Type </MDBDropdownToggle>74
<MDBDropdownMenu>75
<MDBDropdownItem href="#">Action</MDBDropdownItem>76
<MDBDropdownItem href="#">Another action</MDBDropdownItem>77
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>78
</MDBDropdownMenu>79
</MDBDropdown>80
</MDBCol>81
</MDBRow>82
<div class="d-flex justify-content-between align-items-center mt-4">83
<p class="mb-0" style="color: #939597;"><span class="text-pink font-weight-bold">108 </span>results</p>84
<div>85
<MDBBtn color="link" class="text-pink btn-rounded" :ripple="{ color: 'dark' }">Reset</MDBBtn>86
<MDBBtn class="btn-rounded purple-gradient">Search</MDBBtn>87
</div>88
</div>89
</MDBCardBody>90
</MDBCard>91
</MDBCol>92
</MDBRow>93
</MDBContainer>94
</div>95
</div>96
</section>97
</template>xxxxxxxxxx1
<style>2
#app {3
font-family: Roboto, Helvetica, Arial, sans-serif;4
}5
.fw-900 {6
font-weight: 900;7
}8
9
html,10
body,11
.intro {12
height: 100%;13
}14
15
.form-control {16
border-color: transparent;17
}18
19
.input-group>.form-control:focus {20
border-color: transparent;21
box-shadow: inset 0 0 0 1px transparent;22
}23
24
.btn-link:hover {25
color: #f0b6d5;26
background-color: rgba(255, 255, 255, .35);27
}28
29
.btn-link:active,30
.btn-link.active {31
color: #f0b6d5;32
background-color: rgba(255, 255, 255, .35);33
}34
35
.btn-link:focus,36
.btn-link.focus {37
color: #f0b6d5;38
background-color: rgba(255, 255, 255, .35);39
}40
41
.btn-link:active:focus,42
.btn-link.active:focus {43
color: #f0b6d5;44
background-color: rgba(255, 255, 255, .35);45
}46
47
.form-control::placeholder {48
color: #fff;49
}50
51
.purple-gradient {52
color: #fff;53
background: linear-gradient(to right, #F0B6D5, #A38495);54
}55
.btn.purple-gradient:hover {56
color: #fff;57
}58
59
.text-pink {60
color: #F0B6D561
}62
</style>xxxxxxxxxx1
<script>2
import {3
MDBContainer,4
MDBCard,5
MDBCardBody,6
MDBRow,7
MDBCol,8
MDBInput,9
MDBDropdown,10
MDBDropdownToggle,11
MDBDropdownMenu,12
MDBDropdownItem,13
MDBBtn14
} from "mdb-vue-ui-kit";15
16
import {17
ref18
} from "vue"19
20
export default {21
name: "App",22
components: {23
MDBContainer,24
MDBCard,25
MDBCardBody,26
MDBRow,27
MDBCol,28
MDBInput,29
MDBDropdown,30
MDBDropdownToggle,31
MDBDropdownMenu,32
MDBDropdownItem,33
MDBBtn34
},35
setup() {36
const inputValue = ref("");37
const dropdown1 = ref(false);38
const dropdown2 = ref(false);39
const dropdown3 = ref(false);40
const dropdown4 = ref(false);41
const dropdown5 = ref(false);42
const dropdown6 = ref(false);43
44
return {45
inputValue,46
dropdown1,47
dropdown2,48
dropdown3,49
dropdown4,50
dropdown5,51
dropdown652
}53
}54
}; 55
56
</script> Console errors: 0