调整样式

src/components/AppBar.vue

@@ -7,9 +7,10 @@
 
       <v-spacer></v-spacer>
 
-      <v-responsive max-width="260">
+      <v-responsive min-width="20vw" max-width="35vw">
         <v-text-field dense flat hide-details rounded solo-inverted></v-text-field>
       </v-responsive>
+      
     </v-container>
   </v-app-bar>
 </template>

src/components/Carousel.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-carousel cycle height="200" hide-delimiter-background show-arrows-on-hover>
+  <!-- <v-carousel cycle height="200" hide-delimiter-background show-arrows-on-hover>
     <v-carousel-item v-for="(slide, i) in slides" :key="i">
       <v-sheet :color="colors[i]" height="100%">
         <v-row class="fill-height" align="center" justify="center">
@@ -7,11 +7,51 @@
         </v-row>
       </v-sheet>
     </v-carousel-item>
+  </v-carousel>-->
+  <v-carousel cycle  height="240px" hide-delimiter-background show-arrows-on-hover>
+    <v-carousel-item
+      v-for="(item,i) in items"
+      :key="i"
+ 
+    >
+    <v-sheet height="100%" >
+      <v-img 
+       :src="item.src"
+        height="100%"
+        contain
+        cover="true"
+       >
+      </v-img>
+    </v-sheet>
+    </v-carousel-item>
   </v-carousel>
 </template>
 
+<style>
+ 
+</style>
+
 <script>
 export default {
   name: "Carousel",
+  data() {
+    return {
+      items: [
+        {
+          src: "https://loremflickr.com/240/180",
+        },
+        {
+          src: "https://loremflickr.com/240/180",
+        },
+        {
+          src: "https://loremflickr.com/240/180",
+        },
+        {
+          src: "https://loremflickr.com/240/180",
+        },
+      ],
+    };
+  },
 };
 </script>
+

src/components/MenuContentList.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-list color="transparent">
+    <v-btn icon>
+      <v-icon>mdi-magnify</v-icon>
+    </v-btn>
+
+    <v-spacer></v-spacer>
+
+    <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>
+</template>
+
+<script>
+export default {
+  name: "MenuContentList",
+};
+</script>
+
+<style>
+</style>

src/views/Home.vue

@@ -1,50 +1,45 @@
 <template>
   <!-- App.vue -->
   <v-app id="inspire">
+    <!-- 顶部菜单表 -->
     <AppBar></AppBar>
 
     <v-main class="grey lighten-3">
       <v-container>
-        <v-row>
+        <v-row class="flex-nowrap" justify="center">
-          <v-col cols="2">
+          <v-sheet rounded="lg" class="left-menu-sheet ma-1">
-            <v-sheet rounded="lg">
+            <!-- 左菜单列表 -->
-              <v-list color="transparent">
+            <MenuContentList></MenuContentList>
-                <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-sheet class="ma-1" min-height="100vh" min-width="60vw" rounded="lg">
             <v-col>
-            <v-sheet min-height="80vh" rounded="lg">
+              <!-- 轮播 -->
-              <v-col cols="2">
               <Carousel></Carousel>
             </v-col>
+
             <v-col>
+              <!-- 显示商品内容列表 -->
               <v-row justify="start">
-                <v-card width="200" height="200" class="ma-1">
+                <v-card width="100" height="100" class="ma-1">
-                  <v-img src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
+                  <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="200" height="200" class="ma-1">
+                <v-card width="100" height="100" class="ma-1">
-                  <v-img src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
+                  <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-col>
+
+          <v-sheet rounded="lg" class="left-menu-sheet ma-1" >
+            <!-- 左菜单列表 -->
+            <MenuContentList></MenuContentList>
+          </v-sheet>
         </v-row>
       </v-container>
     </v-main>
@@ -54,6 +49,7 @@
 <script>
 import Carousel from "../components/Carousel.vue";
 import AppBar from "../components/AppBar";
+import MenuContentList from "../components/MenuContentList";
 
 export default {
   name: "Home",
@@ -63,6 +59,16 @@ export default {
   components: {
     Carousel,
     AppBar,
+    MenuContentList,
   },
 };
 </script>
+
+<style>
+.left-menu-sheet {
+  width: 15%;
+  
+}
+
+ 
+</style>