<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>
</template>

<script>
import Carousel from "../components/Carousel.vue";
import AppBar from "../components/AppBar";

export default {
  name: "Home",
  data: () => ({
    links: ["Dashboard", "Messages", "Profile", "Updates"],
  }),
  components: {
    Carousel,
    AppBar,
  },
};
</script>
