vue-demo/src/views/Home.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>