diff --git a/pages/index/planList.vue b/pages/index/planList.vue
index 06c7f06..36b05e2 100644
--- a/pages/index/planList.vue
+++ b/pages/index/planList.vue
@@ -25,12 +25,9 @@
 
     <view
       class="selectTab"
-      :style="{
-        backgroundImage: `url(${
-          activeTab === 'completed'
-            ? '/static/images/plan-tab1.png'
-            : '/static/images/plan-tab2.png'
-        })`,
+      :class="{
+        'tab-completed': activeTab === 'completed',
+        'tab-incomplete': activeTab === 'incomplete',
       }"
     >
       <view
@@ -112,6 +109,9 @@ export default {
     display: flex;
     // background: url("@/static/images/plan-tab2.png") no-repeat 0 0;
     background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    transition: opacity 0.3s ease;
     border-radius: 16rpx;
     padding: 32rpx 0;
     margin: 0 32rpx 32rpx;
@@ -170,6 +170,15 @@ export default {
       }
     }
   }
+
+  .tab-completed {
+    background-image: url("/static/images/plan-tab1.png");
+  }
+
+  .tab-incomplete {
+    background-image: url("/static/images/plan-tab2.png");
+  }
+
   .planList {
     padding: 0 32rpx;
     .plan-item {