74 lines
1.9 KiB
Vue
74 lines
1.9 KiB
Vue
<template>
|
|
<!-- App.vue -->
|
|
<v-app id="inspire">
|
|
<!-- 顶部菜单表 -->
|
|
<AppBar></AppBar>
|
|
|
|
<v-main class="grey lighten-3">
|
|
<v-container>
|
|
<v-row class="flex-nowrap" justify="center">
|
|
<v-sheet rounded="lg" class="left-menu-sheet ma-1">
|
|
<!-- 左菜单列表 -->
|
|
<MenuContentList></MenuContentList>
|
|
</v-sheet>
|
|
|
|
<v-sheet class="ma-1" min-height="100vh" min-width="60vw" rounded="lg">
|
|
<v-col>
|
|
<!-- 轮播 -->
|
|
<Carousel></Carousel>
|
|
</v-col>
|
|
|
|
<v-col>
|
|
<!-- 显示商品内容列表 -->
|
|
<v-row justify="start">
|
|
<v-card width="100" height="100" class="ma-1">
|
|
<v-img class="ma-1" src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
|
|
|
|
<v-card-text>
|
|
猫
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<v-card width="100" height="100" class="ma-1">
|
|
<v-img class="ma-1" src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
|
|
</v-card>
|
|
</v-row>
|
|
</v-col>
|
|
</v-sheet>
|
|
|
|
<v-sheet rounded="lg" class="left-menu-sheet ma-1" >
|
|
<!-- 左菜单列表 -->
|
|
<MenuContentList></MenuContentList>
|
|
</v-sheet>
|
|
</v-row>
|
|
</v-container>
|
|
</v-main>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
import Carousel from "../components/Carousel.vue";
|
|
import AppBar from "../components/AppBar";
|
|
import MenuContentList from "../components/MenuContentList";
|
|
|
|
export default {
|
|
name: "Home",
|
|
data: () => ({
|
|
links: ["Dashboard", "Messages", "Profile", "Updates"],
|
|
}),
|
|
components: {
|
|
Carousel,
|
|
AppBar,
|
|
MenuContentList,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.left-menu-sheet {
|
|
width: 15%;
|
|
|
|
}
|
|
|
|
|
|
</style> |