110 lines
3.0 KiB
HTML
110 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Home Service</title>
|
|
<link rel="stylesheet" href="../libs/vendor/css/google-fonts.css">
|
|
<link rel="stylesheet" href="../libs/vendor/css/vuetify.min.css">
|
|
<style>
|
|
[v-cloak] {
|
|
display: none
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div v-cloak id="app">
|
|
<v-app>
|
|
<v-layout row>
|
|
<v-flex xs12 sm6 offset-sm3>
|
|
<v-card>
|
|
<v-toolbar color="cyan" dark>
|
|
<v-toolbar-side-icon></v-toolbar-side-icon>
|
|
|
|
<v-toolbar-title>Inbox</v-toolbar-title>
|
|
|
|
<v-spacer></v-spacer>
|
|
|
|
<v-btn icon>
|
|
<v-icon>search</v-icon>
|
|
</v-btn>
|
|
</v-toolbar>
|
|
|
|
<v-list two-line>
|
|
<template v-for="(item, index) in items">
|
|
<v-subheader
|
|
v-if="item.header"
|
|
:key="item.header"
|
|
>
|
|
{{ item.header }}
|
|
</v-subheader>
|
|
|
|
<v-divider
|
|
v-else-if="item.divider"
|
|
:key="index"
|
|
:inset="item.inset"
|
|
></v-divider>
|
|
|
|
<v-list-tile
|
|
v-else
|
|
:key="item.title"
|
|
avatar
|
|
@click=""
|
|
>
|
|
<v-list-tile-avatar>
|
|
<img :src="item.avatar">
|
|
</v-list-tile-avatar>
|
|
|
|
<v-list-tile-content>
|
|
<v-list-tile-title v-html="item.title"></v-list-tile-title>
|
|
<v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
</template>
|
|
</v-list>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-app>
|
|
</div>
|
|
|
|
<!-- Vendor -->
|
|
<script src="../libs/vendor/vue.min.js"></script>
|
|
<script src="../libs/vendor/vuetify.js"></script>
|
|
<!-- App Script -->
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
items: [
|
|
{ header: 'Today' },
|
|
{
|
|
avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
|
|
title: 'Brunch this weekend?',
|
|
subtitle: "<span class='text--primary'>Ali Connors</span> — I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
|
|
},
|
|
{ divider: true, inset: true },
|
|
{
|
|
avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
|
|
title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
|
|
subtitle: "<span class='text--primary'>to Alex, Scott, Jennifer</span> — Wish I could come, but I'm out of town this weekend."
|
|
},
|
|
{ divider: true, inset: true },
|
|
{
|
|
avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
|
|
title: 'Oui oui',
|
|
subtitle: "<span class='text--primary'>Sandra Adams</span> — Do you have Paris recommendations? Have you ever been?"
|
|
}
|
|
]
|
|
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|