vue-demo/src/views/Home.vue

71 lines
2.0 KiB
Vue
Raw Normal View History

2021-02-26 16:06:19 +08:00
<template>
<!-- App.vue -->
<v-app id="inspire">
<AppBar></AppBar>
<v-main class="grey lighten-3">
<v-container>
<v-row>
<v-col cols="2">
<v-sheet rounded="lg">
<v-list color="transparent">
<v-list-item v-for="n in 5" :key="n" link>
<v-list-item-content>
<v-list-item-title>List Item {{ n }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<!-- 分割线 -->
<v-divider class="my-2"></v-divider>
<v-list-item link color="grey lighten-4">
<v-list-item-content>
<v-list-item-title>Refresh</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-sheet>
</v-col>
<v-col>
<v-sheet min-height="80vh" rounded="lg">
<v-col>
<Carousel></Carousel>
</v-col>
<v-col>
<v-row>
<v-card width="200" height="200" class="d-flex flex-wrap " >
<v-img src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
</v-card>
<v-card width="200" height="200" class="d-flex flex-wrap " >
<v-img src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
</v-card>
</v-row>
</v-col>
</v-sheet>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
2021-02-26 16:06:19 +08:00
</template>
<script>
import Carousel from "../components/Carousel.vue";
import AppBar from "../components/AppBar";
2021-02-26 16:06:19 +08:00
export default {
name: "Home",
data: () => ({
links: ["Dashboard", "Messages", "Profile", "Updates"],
}),
2021-02-26 16:06:19 +08:00
components: {
Carousel,
AppBar,
},
};
2021-02-26 16:06:19 +08:00
</script>