分类侧栏

src/App.vue

@@ -26,5 +26,7 @@ button {
 
 page {
   background-color: #F8F8F8;
+  height: 100%;
+  width: 100%;
 }
 </style>

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>