xxxxxxxxxx1
<template>2
<section class="intro">3
<div class="bg-image vh-100" style="4
background-color: #d9eff5;5
">6
<div class="mask d-flex align-items-center h-100">7
<MDBContainer>8
<MDBRow>9
<MDBCol md="10" lg="8" xl="7" class=" mx-auto">10
<MDBCard>11
<MDBCardHeader>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
</MDBCardHeader>16
<MDBCardBody class="p-4">17
<h6 class="text-muted text-uppercase mt-3 mb-4">ADVANCED SEARCH</h6>18
<MDBRow>19
<MDBCol md="4" class="mb-3">20
<MDBDropdown v-model="dropdown1">21
<MDBDropdownToggle size="lg" outline="info" class="btn-block" @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" outline="info" class="btn-block" @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" outline="info" class="btn-block" @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" outline="info" class="btn-block" @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" outline="info" class="btn-block" @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" outline="info" class="btn-block" @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="text-muted mb-0"><span class="text-info">108 </span>results</p>84
<div>85
<MDBBtn color="link" class="text-body" :ripple="{ color: 'dark' }">Reset</MDBBtn>86
<MDBBtn color="info" >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
.card-header {16
border-bottom: 3px solid #39c0ed;17
}18
19
.form-control {20
border-color: transparent;21
}22
23
.input-group>.form-control:focus {24
border-color: transparent;25
box-shadow: inset 0 0 0 1px transparent;26
}27
</style>xxxxxxxxxx1
<script>2
import {3
MDBContainer,4
MDBCard,5
MDBCardHeader,6
MDBCardBody,7
MDBRow,8
MDBCol,9
MDBInput,10
MDBDropdown,11
MDBDropdownToggle,12
MDBDropdownMenu,13
MDBDropdownItem,14
MDBBtn15
} from "mdb-vue-ui-kit";16
17
import { ref } from "vue"18
19
export default {20
name: "App",21
components: {22
MDBContainer,23
MDBCard,24
MDBCardHeader,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 { inputValue, dropdown1, dropdown2, dropdown3, dropdown4, dropdown5, dropdown6 }45
}46
};47
</script> Console errors: 0