diff --git a/src/pages/index/components/category-item/index.vue b/src/pages/index/components/category-item/index.vue
index 03e054e..8c66690 100644
--- a/src/pages/index/components/category-item/index.vue
+++ b/src/pages/index/components/category-item/index.vue
@@ -10,11 +10,13 @@ const props = defineProps({
 </script>
 
 <template>
-  <view style="text-align:center;padding:5px">
-    <image :src="props.src" mode="widthFix" style="width: 100%; height: 100%"/>
-    <text>
-      {{ props.title }}
-    </text>
+  <view style="text-align:center;padding:5px" class="h-18">
+    <image :src="props.src" mode="widthFix" class="w-full h-full"/>
+    <view>
+      <text>
+        {{ props.title }}
+      </text>
+    </view>
   </view>
 </template>
 
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 24632a6..cae30af 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -11,7 +11,7 @@
     </view>
   </view>
 
-  <swiper indicator-dots circular :autoplay="false" class="banner">
+  <swiper indicator-dots circular :autoplay="false" class="banner w-full">
     <swiper-item>
       <view style="display: grid;grid-template-columns: repeat(5, 1fr);">
         <category-item src="https://www.httpbin.org/image/png" title="美食"></category-item>
@@ -29,7 +29,7 @@
     </swiper-item>
 
     <swiper-item v-for="item in pic.list" :key="item.id">
-      <image @tap="previewImage(item)" :src="item.url"></image>
+      <image @tap="previewImage(item)" :src="item.url" class="w-full h-full"></image>
     </swiper-item>
   </swiper>
 
@@ -122,10 +122,9 @@ export default {
 }
 </script>
 <style>
-.banner,
-.banner image {
+.banner {
   width: 750rpx;
-  height: 450rpx;
+  height: 420rpx;
 }
 
 .content {