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