[Day27] 前端14：About.vue

第 12 屆 iThome 鐵人賽

DAY 27

Modern Web

普通人寫前後端，可以挺過30天吧！？系列第 27 篇

12th鐵人賽

q98765tw

團隊imac_web_Sr

2020-10-10 02:05:33

1813 瀏覽

分享至

接下來就是登入後需要呈現的畫面了！

先上成果

可以看到這裡面有使用到的組件

About.vue

<template>
<div id="app">
    <v-app id="inspire" class="xxx">

        <v-app-bar app clipped-left color="teal lighten-3" dense>
            <v-icon left>{{ icons.mdiShareVariant }}</v-icon>
            <div class="mx-4"></div>
            <v-icon class="mx-4" large>
            </v-icon>

            <v-toolbar-title class="mr-12 align-center">
                <span class="font-weight-thin font-italic display-1">BlogeR</span>
            </v-toolbar-title>

            <v-spacer>

            </v-spacer>

            <v-btn icon style="right:20px" v-on:click="logout()">
                <v-icon> logout</v-icon>
            </v-btn>
            <div class="mx-24"></div>
        </v-app-bar>

        <v-main>

            <v-carousel>

                <router-view />
                <v-carousel-item v-for="(it,i) in its" :key="i" :src="it.src"></v-carousel-item>
            </v-carousel>
            <v-container v-bind="{ [`grid-list-lg`]: true }" fluid>
                <v-layout row wrap>
                    <v-flex v-for="n in 9" :key="n" xs4>
                        <v-card flat tile>
                            <v-img :src="`https://unsplash.it/150/300?image=${Math.floor(Math.random() * 200) + 1}`" height="150px"></v-img>
                        </v-card>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-main>
    </v-app>

</div>
</template>

<script>
import {
    mdiAccount,
    mdiPencil,
    mdiShareVariant,
    mdiDelete,
} from '@mdi/js'
export default {
    props: {
        source: String,
    },
    methods: {

        logout() {
            const vm = this;
            localStorage.clear();
            vm.$router.push('/');

        }
    },
    data: () => ({

        its: [{
                src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
            },
            {
                src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
            },
            {
                src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
            },
            {
                src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
            }
        ],
        icons: {
            mdiAccount,
            mdiPencil,
            mdiShareVariant,
            mdiDelete,
        },
        drawer: null,
        items: [{
                icon: 'mdi-trending-up',
                text: 'Most Popular'
            },
            {
                icon: 'mdi-youtube-subscription',
                text: 'Subscriptions'
            },
            {
                icon: 'mdi-history',
                text: 'History'
            },
            {
                icon: 'mdi-playlist-play',
                text: 'Playlists'
            },
            {
                icon: 'mdi-clock',
                text: 'Watch Later'
            },
        ],
        items2: [{
                picture: 28,
                text: 'Joseph'
            },
            {
                picture: 38,
                text: 'Apple'
            },
            {
                picture: 48,
                text: 'Xbox Ahoy'
            },
            {
                picture: 58,
                text: 'Nokia'
            },
            {
                picture: 78,
                text: 'MKBHD'
            },
        ],
    }),
    created() {
        this.$vuetify.theme = true
    },
}
</script>

1.vue

<template>
<div>
    <v-alert style="top:8px" v-model="alert" dismissible close-icon="mdi-delete" border="left" elevation="2" outlined type="success" text>
        Welcome back BlogeR ! Now you can see upgrade photo ~
    </v-alert>

</div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            alert: true,
        }
    },
}
</script>