From dd255bf30848e81ae8e338065a3991e3da0e8c90 Mon Sep 17 00:00:00 2001
From: eson <474420502@qq.com>
Date: Wed, 3 Mar 2021 16:41:18 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppBar.vue          |  3 +-
 src/components/Carousel.vue        | 44 +++++++++++++++++-
 src/components/MenuContentList.vue | 33 ++++++++++++++
 src/views/Home.vue                 | 72 ++++++++++++++++--------------
 4 files changed, 116 insertions(+), 36 deletions(-)
 create mode 100644 src/components/MenuContentList.vue

diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
index 773d86c..ba815ba 100644
--- a/src/components/AppBar.vue
+++ b/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>
diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index 18f0216..1f72683 100644
--- a/src/components/Carousel.vue
+++ b/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>
\ No newline at end of file
+</script>
+
diff --git a/src/components/MenuContentList.vue b/src/components/MenuContentList.vue
new file mode 100644
index 0000000..ea614c1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e2d083d..3e644bf 100644
--- a/src/views/Home.vue
+++ b/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-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-row class="flex-nowrap" justify="center">
+          <v-sheet rounded="lg" class="left-menu-sheet ma-1">
+            <!-- 左菜单列表 -->
+            <MenuContentList></MenuContentList>
+          </v-sheet>
 
-                <!-- 分割线 -->
-                <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 cols="2">
+          <v-sheet class="ma-1" min-height="100vh" min-width="60vw" rounded="lg">
+            <v-col>
+              <!-- 轮播 -->
               <Carousel></Carousel>
-              </v-col>
-              <v-col>
+            </v-col>
+
+            <v-col>
+              <!-- 显示商品内容列表 -->
               <v-row justify="start">
-                <v-card width="200" height="200" class="ma-1">
-                  <v-img src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
+                <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="200" height="200" class="ma-1">
-                  <v-img src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
+                <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-col>
+            </v-col>
+          </v-sheet>
+
+          <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>
\ No newline at end of file