fix:公司福利ui还原

my/renzheng/companyFund.vue

@@ -6,12 +6,19 @@
         <view class="progress-num"> <text>3</text>/8 </view>
         <view class="title">
           <view>公司福利</view>
-          <view class="check-num"> <text>{{ selectedCount }}</text>/{{ totalCount }} </view>
+          <view class="check-num">
+            <text>{{ selectedCount }}</text
+            >/{{ totalCount }}
+          </view>
         </view>
         <view class="desc"> 选择公司提供的福利信息，以吸引更多求职者 </view>
-        
+
         <!-- 福利分类 -->
-        <view class="welfare-category" v-for="(category, categoryIndex) in welfareList" :key="categoryIndex">
+        <view
+          class="welfare-category"
+          v-for="(category, categoryIndex) in welfareList"
+          :key="categoryIndex"
+        >
           <view class="category-title">{{ category.title }}</view>
           <view class="check-box">
             <view
@@ -20,27 +27,28 @@
               :key="index"
               @click="checkItem(categoryIndex, index)"
             >
+              <view class="check-txt">{{ item.name }}</view>
               <view class="check-icon" :class="{ 'check-icon-active': item.selected }">
                 <u-icon
                   name="checkmark"
                   color="#fff"
-                  size="28"
+                  size="18"
                   v-if="item.selected"
                 ></u-icon>
+                <u-icon name="plus" color="#666" size="28" v-else></u-icon>
               </view>
-              <view class="check-txt">{{ item.name }}</view>
             </view>
           </view>
         </view>
       </view>
     </view>
-    
+
     <!-- 已选福利 -->
     <view class="check-list" v-if="selectedWelfare.length > 0">
       已选：
-      <view 
-        class="check-list-item" 
-        v-for="(item, index) in selectedWelfare" 
+      <view
+        class="check-list-item"
+        v-for="(item, index) in selectedWelfare"
         :key="index"
         @click="removeSelected(item.categoryIndex, item.itemIndex)"
       >
@@ -48,7 +56,7 @@
         <text class="remove-icon">×</text>
       </view>
     </view>
-    
+
     <view class="submit-btn" @click="goJobPostingSecond">下一步</view>
   </view>
 </template>
@@ -65,8 +73,8 @@ export default {
             { name: "五险一金", selected: false },
             { name: "补充医疗保险", selected: false },
             { name: "意外险", selected: false },
-            { name: "定期体检", selected: false }
-          ]
+            { name: "定期体检", selected: false },
+          ],
         },
         {
           title: "薪资期权",
@@ -76,8 +84,8 @@ export default {
             { name: "保底工资", selected: false },
             { name: "底薪加提成", selected: false },
             { name: "股票期权", selected: false },
-            { name: "企业年金", selected: false }
-          ]
+            { name: "企业年金", selected: false },
+          ],
         },
         {
           title: "补贴",
@@ -86,8 +94,8 @@ export default {
             { name: "交通补贴", selected: false },
             { name: "住房补贴", selected: false },
             { name: "加班补贴", selected: false },
-            { name: "团建补贴", selected: false }
-          ]
+            { name: "团建补贴", selected: false },
+          ],
         },
         {
           title: "休假",
@@ -95,12 +103,12 @@ export default {
             { name: "带薪年假", selected: false },
             { name: "节假日加班费", selected: false },
             { name: "法定节假日三薪", selected: false },
-            { name: "员工购房", selected: false }
-          ]
-        }
+            { name: "员工购房", selected: false },
+          ],
+        },
       ],
       selectedCount: 0,
-      totalCount: 20
+      totalCount: 20,
     };
   },
   components: {
@@ -116,13 +124,13 @@ export default {
             selected.push({
               name: item.name,
               categoryIndex: categoryIndex,
-              itemIndex: itemIndex
+              itemIndex: itemIndex,
             });
           }
         });
       });
       return selected;
-    }
+    },
   },
   onLoad(options) {
     if (options.text) {
@@ -134,51 +142,56 @@ export default {
     checkItem(categoryIndex, itemIndex) {
       const item = this.welfareList[categoryIndex].items[itemIndex];
       item.selected = !item.selected;
-      
+
       // 更新选中数量
       this.updateSelectedCount();
     },
-    
+
     // 移除已选项目
     removeSelected(categoryIndex, itemIndex) {
       this.welfareList[categoryIndex].items[itemIndex].selected = false;
       this.updateSelectedCount();
     },
-    
+
     // 更新选中数量
     updateSelectedCount() {
       let count = 0;
-      this.welfareList.forEach(category => {
-        category.items.forEach(item => {
+      this.welfareList.forEach((category) => {
+        category.items.forEach((item) => {
           if (item.selected) count++;
         });
       });
       this.selectedCount = count;
     },
-    
+
     goJobPostingSecond() {
       if (this.selectedCount === 0) {
         uni.showToast({
-          title: '请至少选择一项福利',
-          icon: 'none'
+          title: "请至少选择一项福利",
+          icon: "none",
         });
         return;
       }
-      
+
       // 获取选中的福利列表
-      const selectedBenefits = this.selectedWelfare.map(item => item.name);
-      console.log('选中的福利:', selectedBenefits);
-      
+      const selectedBenefits = this.selectedWelfare.map((item) => item.name);
+      console.log("选中的福利:", selectedBenefits);
+
       // 跳转到下一页，传递选中的福利数据
-      uni.navigateTo({ 
-        url: "/pages/my/jobPostingSecond?benefits=" + encodeURIComponent(JSON.stringify(selectedBenefits))
+      uni.navigateTo({
+        url:
+          "/pages/my/jobPostingSecond?benefits=" +
+          encodeURIComponent(JSON.stringify(selectedBenefits)),
       });
-    }
+    },
   },
   mounted() {
     // 初始化总数量
-    this.totalCount = this.welfareList.reduce((total, category) => total + category.items.length, 0);
-  }
+    this.totalCount = this.welfareList.reduce(
+      (total, category) => total + category.items.length,
+      0
+    );
+  },
 };
 </script>
 
@@ -206,7 +219,7 @@ export default {
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      
+
       .progress-num {
         color: #016bf6;
         font-family: DM Sans;
@@ -220,7 +233,7 @@ export default {
           font-weight: 700;
         }
       }
-      
+
       .title {
         color: #333;
         width: 100%;
@@ -231,16 +244,15 @@ export default {
         justify-content: space-between;
         align-items: center;
         margin-bottom: 20rpx;
-        
+
         .check-num {
           font-family: DM Sans;
-          font-size: 32rpx;
-          font-weight: 500;
+          font-size: 48rpx;
+          font-weight: 700;
           line-height: 60rpx;
           color: #999;
           text {
             color: #016bf6;
-            font-size: 32rpx;
           }
         }
       }
@@ -258,61 +270,62 @@ export default {
         box-sizing: border-box;
         margin-bottom: 20rpx;
       }
-      
+
       .welfare-category {
         width: 100%;
         margin-bottom: 40rpx;
-        
+
         .category-title {
-          color: #333;
+          color: rgba(31, 44, 55, 1);
           font-family: DM Sans;
-          font-size: 32rpx;
-          font-weight: 600;
-          margin-bottom: 24rpx;
-          padding-left: 10rpx;
-          border-left: 6rpx solid #016bf6;
+          font-size: 28rpx;
+          font-weight: 500;
+          line-height: 44rpx;
+          padding-bottom: 20rpx;
+          box-sizing: border-box;
         }
-        
+
         .check-box {
           width: 100%;
           display: grid;
-          grid-template-columns: repeat(2, 1fr);
+          grid-template-columns: repeat(1, 1fr);
           gap: 20rpx;
-          
+
           .check-item {
             padding: 20rpx 24rpx;
             box-sizing: border-box;
             border-radius: 16rpx;
-            border: 2rpx solid rgba(227, 231, 236, 1);
             display: flex;
             align-items: center;
+            justify-content: space-between;
             gap: 20rpx;
-            background: #f8f9fa;
-            
             .check-icon {
-              width: 40rpx;
-              height: 40rpx;
+              width: 32rpx;
+              height: 32rpx;
               border-radius: 8rpx;
-              border: 2rpx solid rgba(227, 231, 236, 1);
+              border: 2rpx solid #666;
               display: flex;
               justify-content: center;
               align-items: center;
               background: #fff;
               flex-shrink: 0;
             }
-            
+
             .check-icon-active {
               background-color: #016bf6;
               border-color: #016bf6;
+              border-radius: 50%;
             }
-            
+
             .check-txt {
-              color: rgba(23, 23, 37, 1);
+              border-radius: 4px;
+              background: rgba(153, 153, 153, 0.1);
+              padding: 8rpx;
+              box-sizing: border-box;
+              color: rgba(102, 102, 102, 1);
               font-family: DM Sans;
-              font-size: 26rpx;
+              font-size: 24rpx;
               font-weight: 400;
-              line-height: 36rpx;
-              flex: 1;
             }
           }
         }
@@ -323,25 +336,28 @@ export default {
   .check-list {
     flex-shrink: 0;
     padding: 20rpx 40rpx;
-    background: #f8f9fa;
-    border-top: 1rpx solid #eee;
+    box-sizing: border-box;
+    color: #016bf6;
+    font-family: DM Sans;
+    font-size: 16rpx;
+    font-weight: 400;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 16rpx;
-    
+
     .check-list-item {
-      background: #016bf6;
-      color: #fff;
-      padding: 8rpx 20rpx;
-      border-radius: 20rpx;
-      font-size: 24rpx;
+      box-sizing: border-box;
+      border: 1rpx solid #016bf6;
+      border-radius: 8rpx;
+      background: rgba(252, 233, 220, 1);
+      padding: 4rpx 8rpx;
       display: flex;
       align-items: center;
       gap: 8rpx;
-      
+
       .remove-icon {
-        font-size: 28rpx;
+        font-size: 24rpx;
         font-weight: bold;
         margin-left: 8rpx;
         cursor: pointer;
@@ -367,4 +383,4 @@ export default {
     margin-top: 20rpx;
   }
 }
-</style>
+</style>