From 77ff420f0278c7ab8753757c3b271f05ec91cf7a Mon Sep 17 00:00:00 2001
From: shikong <919411476@qq.com>
Date: Thu, 17 Oct 2024 20:07:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E7=B1=BB=E4=BE=A7=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     |  2 ++
 src/pages/category/category.vue | 51 +++++++++++++++++++++++++++++++--
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7077df7..924dc42 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,5 +26,7 @@ button {
 
 page {
   background-color: #F8F8F8;
+  height: 100%;
+  width: 100%;
 }
 </style>
diff --git a/src/pages/category/category.vue b/src/pages/category/category.vue
index 9db4a06..5f104e5 100644
--- a/src/pages/category/category.vue
+++ b/src/pages/category/category.vue
@@ -1,10 +1,57 @@
 <script setup>
+import {reactive} from "vue";
 
+const ctx = reactive({
+  current: 0,
+  categories: [
+    {
+      name: "外卖外送",
+      value: "takeaway"
+    },
+    {
+      name: "美团优选",
+      value: "optimization"
+    },
+    {
+      name: "美团餐饮",
+      value: "catering"
+    },
+    {
+      name: "休闲娱乐",
+      value: "playing"
+    },
+    {
+      name: "酒店旅游",
+      value: "tourism"
+    },
+    {
+      name: "交通出行",
+      value: "traffic"
+    }
+  ]
+})
+
+function switchCategory(index) {
+  ctx.current = index
+}
 </script>
 
 <template>
-  <view>
-    分类页
+  <view class="flex w-full h-full">
+    <view class="w-1/4 h-full bg-gray-100">
+      <scroll-view class="h-full bg-gray-100">
+        <view v-for="(category, index) in ctx.categories" :key="index"
+              @click="switchCategory(index)"
+              :class="{'bg-white': index === ctx.current, 'bg-gray-100': index!== ctx.current}"
+              class="text-center p-4 rounded">
+          <text>{{ category.name }}</text>
+        </view>
+      </scroll-view>
+    </view>
+
+    <view class="flex-1 flex-grow-0 p-2">
+      123456
+    </view>
   </view>
 </template>