Blame view
src/pages/layout/Footers.vue
5.22 KB
8ab31dc8b
changes
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<template>
<div id="page-footers">
<v-container grid-list-xl fluid>
<v-layout row wrap>
<v-flex lg12>
<v-widget title="Default">
<div slot="widget-content">
<v-footer class="pa-3">
<v-spacer></v-spacer>
<div>© {{ new Date().getFullYear() }}</div>
</v-footer>
</div>
</v-widget>
</v-flex>
<v-flex lg12>
<v-widget title="With icon">
<div slot="widget-content">
<v-footer height="auto">
<v-card
flat
tile
class="indigo lighten-1 white--text text-xs-center"
>
<v-card-text>
<v-btn
v-for="icon in icons"
:key="icon"
icon
class="mx-3 white--text"
>
<v-icon size="24px">{{ icon }}</v-icon>
</v-btn>
</v-card-text>
<v-card-text class="white--text pt-0">
Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. Mauris cursus commodo interdum. Praesent ut risus eget metus luctus accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula lacinia malesuada. Nulla placerat augue vel ipsum ultrices, cursus iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor vel ut orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</v-card-text>
<v-card-text class="white--text">
©2018 — <strong>Vuetify</strong>
</v-card-text>
</v-card>
</v-footer>
</div>
</v-widget>
</v-flex>
<v-flex lg12>
<v-widget title="Complex layout">
<div slot="widget-content">
<v-footer height="auto">
<v-card flat tile>
<v-card-title class="teal white--text">
<strong class="subheading">Get connected with us on social networks!</strong>
<v-spacer></v-spacer>
<v-btn
v-for="icon in icons"
:key="icon"
icon
dark
class="mx-3"
>
<v-icon size="24px">{{ icon }}</v-icon>
</v-btn>
</v-card-title>
<v-card-text class="grey lighten-3">
<v-layout>
<v-flex
v-for="(col, i) in rows"
:key="i"
xs3
>
<span class="body-2" v-text="col.title.toUpperCase()"/>
<div
v-for="(child, i) in col.children"
:key="i"
v-text="child"
/>
</v-flex>
<v-flex xs3 layout column>
<span class="body-2">CONTACT</span>
<div>
<v-icon size="18px" class="mr-3">fa-home</v-icon>
New York, NY 10012, US
</div>
<div>
<v-icon size="18px" class="mr-3">fa-envelope</v-icon>
info@example.com
</div>
<div>
<v-icon size="18px" class="mr-3">fa-phone</v-icon>
+ 01 234 567 88
</div>
<div>
<v-icon size="18px" class="mr-3">fa-print</v-icon>
+ 01 234 567 89
</div>
</v-flex>
</v-layout>
</v-card-text>
<v-card-actions class="grey lighten-2 justify-center">
©2018 — <strong>Vuetify</strong>
</v-card-actions>
</v-card>
</v-footer>
</div>
</v-widget>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
import VWidget from '@/components/VWidget';
export default {
components: {
VWidget
},
data () {
return {
icons: ['fa-facebook', 'fa-twitter', 'fa-google-plus', 'fa-linkedin', 'fa-instagram'],
rows: [
{
title: 'Company Name',
children: ['Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit']
},
{
title: 'Products',
children: ['MDBootstrap', 'MDWordPress', 'BrandFlow', 'Bootstrap Angular']
},
{
title: 'Useful Links',
children: ['Your account', 'Become an Affiliate', 'Shipping Rates', 'Helper']
}
]
};
},
computed: {
},
methods: {
}
};
</script>
|