HTML
xxxxxxxxxx1
<template>2
<section class="intro">3
<div class="bg-image vh-100" style="background-color: #F5DF4D;">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">9
<MDBCardBody class="d-flex justify-content-between py-2">10
<MDBInput v-model="inputValue" inputGroup="lg" :formOutline="false" class="form-control rounded" placeholder="Search">11
<template #prepend>12
<span class="input-group-text border-0 px-1" id="basic-addon2"><i class="fas fa-search fa-lg" style="color: #939597;"></i></span>13
</template>14
</MDBInput>15
<p class="mb-0 d-flex flex-row align-self-center" style="color: #939597;"><span class="font-weight-bold pe-1">108 </span>results</p>16
</MDBCardBody>17
</MDBCard>18
<MDBCard>19
<MDBCardBody class="p-4">20
<h6 class="mt-3 mb-4" style="color: #939597;">Advanced search</h6>21
<MDBRow>22
<MDBCol md="4" class="mb-3">23
<MDBDropdown v-model="dropdown1">24
<MDBDropdownToggle size="lg" outline="dark" class="btn-block btn-rounded" @click="dropdown1 = !dropdown1">Accessories </MDBDropdownToggle>25
<MDBDropdownMenu>26
<MDBDropdownItem href="#">Action</MDBDropdownItem>27
<MDBDropdownItem href="#">Another action</MDBDropdownItem>28
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>29
</MDBDropdownMenu>30
</MDBDropdown>31
</MDBCol>32
<MDBCol md="4" class="mb-3">33
<MDBDropdown v-model="dropdown2">34
<MDBDropdownToggle size="lg" outline="dark" class="btn-block btn-rounded" @click="dropdown2 = !dropdown2">Color </MDBDropdownToggle>35
<MDBDropdownMenu>36
<MDBDropdownItem href="#">Action</MDBDropdownItem>37
<MDBDropdownItem href="#">Another action</MDBDropdownItem>38
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>39
</MDBDropdownMenu>40
</MDBDropdown>41
</MDBCol>42
<MDBCol md="4" class="mb-3">43
<MDBDropdown v-model="dropdown3">44
<MDBDropdownToggle size="lg" outline="dark" class="btn-block btn-rounded" @click="dropdown3 = !dropdown3">Size </MDBDropdownToggle>45
<MDBDropdownMenu>46
<MDBDropdownItem href="#">Action</MDBDropdownItem>47
<MDBDropdownItem href="#">Another action</MDBDropdownItem>48
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>49
</MDBDropdownMenu>50
</MDBDropdown>51
</MDBCol>52
</MDBRow>53
<MDBRow>54
<MDBCol md="4" class="mb-3">55
<MDBDropdown v-model="dropdown4">56
<MDBDropdownToggle size="lg" outline="dark" class="btn-block btn-rounded" @click="dropdown4 = !dropdown4">Sale </MDBDropdownToggle>57
<MDBDropdownMenu>58
<MDBDropdownItem href="#">Action</MDBDropdownItem>59
<MDBDropdownItem href="#">Another action</MDBDropdownItem>60
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>61
</MDBDropdownMenu>62
</MDBDropdown>63
</MDBCol>64
<MDBCol md="4" class="mb-3">65
<MDBDropdown v-model="dropdown5">66
<MDBDropdownToggle size="lg" outline="dark" class="btn-block btn-rounded" @click="dropdown5 = !dropdown5">Time </MDBDropdownToggle>67
<MDBDropdownMenu>68
<MDBDropdownItem href="#">Action</MDBDropdownItem>69
<MDBDropdownItem href="#">Another action</MDBDropdownItem>70
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>71
</MDBDropdownMenu>72
</MDBDropdown>73
</MDBCol>74
<MDBCol md="4" class="mb-3">75
<MDBDropdown v-model="dropdown6">76
<MDBDropdownToggle size="lg" outline="dark" class="btn-block btn-rounded" @click="dropdown6 = !dropdown6">Type </MDBDropdownToggle>77
<MDBDropdownMenu>78
<MDBDropdownItem href="#">Action</MDBDropdownItem>79
<MDBDropdownItem href="#">Another action</MDBDropdownItem>80
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>81
</MDBDropdownMenu>82
</MDBDropdown>83
</MDBCol>84
</MDBRow>85
<div class="d-flex justify-content-between align-items-center mt-4">86
<div>87
<MDBBtn color="dark" rounded >Search</MDBBtn>88
<MDBBtn color="link" rounded style="color: #939597;">Delete</MDBBtn>89
</div>90
</div>91
</MDBCardBody>92
</MDBCard>93
</MDBCol>94
</MDBRow>95
</MDBContainer>96
</div>97
</div>98
</section>99
</template>SCSS
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
.btn-link:hover {24
background-color: rgba(0,0,0,.05);25
}26
.btn-link:active, .btn-link.active {27
background-color: rgba(0,0,0,.05);28
}29
.btn-link:focus, .btn-link.focus {30
background-color: rgba(0,0,0,.05);31
}32
.btn-link:active:focus, .btn-link.active:focus {33
background-color: rgba(0,0,0,.05);34
}35
</style>JS
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