diff --git a/package.json b/package.json
index 8a4688e..0c17c90 100644
--- a/package.json
+++ b/package.json
@@ -34,10 +34,13 @@
     },
     "rules": {}
   },
+  "rules": {
+    "vue/multi-word-component-names": "off"
+  },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not dead",
     "not ie 11"
   ]
-}
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 591a031..6bb3680 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,21 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
+  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
+  <coffeeIndex />
+  <!-- <MenuList /> -->
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+// import HelloWorld from './components/HelloWorld.vue'
+import coffeeIndex from './components/coffeeIndex.vue';
+// import MenuList from './components/MenuList.vue';
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    // HelloWorld,
+    coffeeIndex
+    // MenuList
   }
 }
 </script>
@@ -21,6 +27,14 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  width: 100%;
+  height: 100%;
+}
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #f5f5f5;
+  height: 100%;
+  width: 100%;
 }
 </style>
diff --git a/src/assets/coffee1.png b/src/assets/coffee1.png
new file mode 100644
index 0000000..f452514
Binary files /dev/null and b/src/assets/coffee1.png differ
diff --git a/src/components/MenuList.vue b/src/components/MenuList.vue
new file mode 100644
index 0000000..b79dd1f
--- /dev/null
+++ b/src/components/MenuList.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="menu-list">
+      <MenuItem
+        v-for="(item, index) in menuItems"
+        :key="index"
+        :productName="item.productName"
+        :image="item.image"
+        :temperature="item.temperature"
+        :capacity="item.capacity"
+        :price="item.price"
+      />
+    </div>
+  </template>
+  
+  <script>
+  import MenuItem from "../view/MenuItem.vue";
+  
+  export default {
+    components: { MenuItem },
+    data() {
+      return {
+        menuItems: [
+          {
+            productName: "金典冷萃咖啡",
+            image: "path-to-image.jpg",
+            temperature: "冷",
+            capacity: "400ml",
+            price: 33,
+          },
+          // 添加其他菜单项
+        ],
+      };
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .menu-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/coffeeIndex.vue b/src/components/coffeeIndex.vue
new file mode 100644
index 0000000..e280d43
--- /dev/null
+++ b/src/components/coffeeIndex.vue
@@ -0,0 +1,232 @@
+<template>
+    <div class="hello">
+        <header>
+            <h1>Coffee Menu</h1>
+            <div class="menu2">
+                <h2>咖啡菜单</h2>
+                <div class="divider-container">
+                    <div class="divider-pink">
+                    </div>
+                    <div class="divider-green">
+                    </div>
+                    <div class="divider-orange">
+                    </div>
+                </div>
+            </div>
+        </header>
+        <div class="menu-container">
+            <li v-for="item in coffeeList" :key="item.productName">
+                <div class="menu-item">
+                    <img src="../assets/coffee1.png" alt="Golden Iced Coffee">
+                    <div class="menu-item-content">
+                        <h3 class="menu-item-title">{{ item.productName }}</h3>
+                        <p class="menu-item-details">{{ item.temperature }}</p>
+                        <p class="menu-item-details">{{ item.capacity }}</p>
+                        <p class="menu-item-price">{{ item.price }}</p>
+                    </div>
+                </div>
+            </li>
+            <!-- Sample Menu Item -->
+
+            <!-- Repeat similar blocks for other menu items -->
+        </div>
+    </div>
+</template>
+
+<script setup>
+const coffeeList = [
+    {
+        productName: "金典冷萃咖啡",
+        image: "path-to-image.jpg",
+        temperature: "冷",
+        capacity: "400ml",
+        price: 33,
+    },
+    {
+        productName: "拿铁",
+        image: "path-to-image.jpg",
+        temperature: "热",
+        capacity: "400ml",
+        price: 30,
+    },
+    {
+        productName: "摩卡",
+        image: "path-to-image.jpg",
+        temperature: "热",
+        capacity: "400ml",
+        price: 35,
+    },
+    {
+        productName: "卡布奇诺",
+        image: "path-to-image.jpg",
+        temperature: "热",
+        capacity: "400ml",
+        price: 30,
+    },
+    {
+        productName: "美式",
+        image: "path-to-image.jpg",
+        temperature: "热",
+        capacity: "400ml",
+        price: 25,
+    },
+    {
+        productName: "馥芮白",
+        image: "path-to-image.jpg",
+        temperature: "冷",
+        capacity: "400ml",
+        price: 35,
+    },
+    {
+        productName: "焦糖玛奇朵",
+        image: "path-to-image.jpg",
+        temperature: "热",
+        capacity: "400ml",
+        price: 35,
+    },
+    {
+        productName: "抹茶拿铁",
+        image: "path-to-image.jpg",
+        temperature: "热",
+        capacity: "400ml",
+        price: 35,
+    },
+    {
+        productName: "冰美式",
+        image: "path-to-image.jpg",
+        temperature: "冷",
+        capacity: "400ml",
+        price: 25,
+    },
+    {
+        productName: "冰拿铁",
+        image: "path-to-image.jpg",
+        temperature: "冷",
+        capacity: "400ml",
+        price: 30,
+    },
+    {
+        productName: "冰摩卡",
+        image: "path-to-image.jpg",
+        temperature: "冷",
+        capacity: "400ml",
+        price: 35,
+    },
+    {
+        productName: "冰卡布奇诺",
+        image: "path-to-image.jpg",
+        temperature: "冷",
+        capacity: "400ml",
+        price: 30,
+    },
+]
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.menu2 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.divider-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 70%;
+    margin-top: 10px;
+    margin-left: 7px;
+    padding: 0;
+}
+
+.divider-pink, .divider-green, .divider-orange {
+    height: 13px;
+    width: 33%;
+    margin: 0px;
+}
+.divider-pink {
+    background-color: #e91e63;
+}
+.divider-green {
+    background-color: #4caf50;
+}
+.divider-orange {
+    background-color: #ff9800;
+}
+
+.hello {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f5f5f5;
+    height: 100%;
+    width: 100%;
+}
+
+header {
+    text-align: left;
+    background-color: #ffffff;
+    padding: 20px;
+    padding-left: 80px;
+    border-bottom: 2px solid #ddd;
+}
+
+header h1 {
+    margin-left: 20px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    font-size: 2.1rem;
+}
+
+header h2 {
+    margin-left: 20px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    font-size: 1.5rem;
+    color: #777;
+}
+
+.menu-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 20px;
+}
+
+.menu-item {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    margin: 15px;
+    width: 280px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.menu-item img {
+    width: 100%;
+    height: auto;
+}
+
+.menu-item-content {
+    padding: 15px;
+}
+
+.menu-item-title {
+    font-size: 1.2rem;
+    margin: 0;
+    color: #333;
+}
+
+.menu-item-details {
+    margin: 10px 0;
+    font-size: 0.9rem;
+    color: #555;
+}
+
+.menu-item-price {
+    font-size: 1rem;
+    color: #e91e63;
+    font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/src/view/MenuItem.vue b/src/view/MenuItem.vue
new file mode 100644
index 0000000..d380e6a
--- /dev/null
+++ b/src/view/MenuItem.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="menu-item">
+        <!-- <img :src="image" alt="Product Image" class="menu-image" />
+        <div class="menu-details">
+            <h3>{{ productName }}</h3>
+            <p>Temperature: {{ temperature }}</p>
+            <p>Capacity: {{ capacity }}</p>
+            <p>Price: ¥{{ price }}</p>
+        </div> -->
+
+        <div class="menu-item">
+            <img src="../assets/coffee1.png" alt="Golden Iced Coffee">
+            <div class="menu-item-content">
+                <h3 class="menu-item-title">Golden Iced Coffee</h3>
+                <p class="menu-item-details">Temperature: Cold | Capacity: 400ml</p>
+                <p class="menu-item-price">Price: 33元</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        productName: String,
+        image: String,
+        temperature: String,
+        capacity: String,
+        price: Number,
+    },
+};
+</script>
+
+<style scoped>
+
+.menu-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 20px;
+}
+
+.menu-item {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    margin: 15px;
+    width: 280px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.menu-item img {
+    width: 100%;
+    height: auto;
+}
+
+.menu-item-content {
+    padding: 15px;
+}
+
+.menu-item-title {
+    font-size: 1.2rem;
+    margin: 0;
+    color: #333;
+}
+
+.menu-item-details {
+    margin: 10px 0;
+    font-size: 0.9rem;
+    color: #555;
+}
+
+.menu-item-price {
+    font-size: 1rem;
+    color: #e91e63;
+    font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/主页面参考图.png b/主页面参考图.png
new file mode 100644
index 0000000..3d8774a
Binary files /dev/null and b/主页面参考图.png differ