70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<template>
|
|
<!-- <v-container class="pb-0"> -->
|
|
<div>
|
|
<v-app-bar flat color="indigo" app class="hidden-md-and-up">
|
|
<v-row>
|
|
<v-col cols="8" class="appTitle d-flex justify-start">
|
|
<v-toolbar-title>
|
|
Savvy Firebase
|
|
</v-toolbar-title>
|
|
</v-col>
|
|
<v-col cols="4" class="d-flex justify-end">
|
|
<v-btn color="primary">
|
|
Sign In
|
|
</v-btn>
|
|
</v-col>
|
|
<!-- <v-col>
|
|
<v-btn color="primary">
|
|
Register
|
|
</v-btn>
|
|
</v-col> -->
|
|
</v-row>
|
|
</v-app-bar>
|
|
<v-app-bar
|
|
flat
|
|
app
|
|
class="hidden-sm-and-down"
|
|
src="https://www.stellamccartney.com/cloud/smcwp/uploads/2016/01/1920x1080-black-solid-color-background.jpg"
|
|
>
|
|
<template v-slot:img="{ props }">
|
|
<v-img
|
|
v-bind="props"
|
|
gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
|
|
></v-img>
|
|
</template>
|
|
<v-row>
|
|
<v-col cols="2"></v-col>
|
|
<v-col cols="4" class="appTitle d-flex justify-start">
|
|
<v-toolbar-title>
|
|
Savvy Firebase Tutorial
|
|
</v-toolbar-title>
|
|
</v-col>
|
|
<v-col>
|
|
<v-spacer> </v-spacer>
|
|
</v-col>
|
|
<v-col cols="2">
|
|
<v-btn color="primary" class="mr-2">
|
|
Sign In
|
|
</v-btn>
|
|
<v-btn color="primary">
|
|
Register
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-app-bar>
|
|
<!-- </v-container> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Appbar"
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.appTitle {
|
|
color: white;
|
|
}
|
|
</style>
|