修改组件

gaoluyang

4 天以前 025e46e11cb2962fd7692adfa401333758cc779b

 src/pages/cooperativeOffice/collaborativeApproval/contactSelect.vue

@@ -40,7 +40,7 @@
        <text class="list-title">全部联系人</text>
      </view>
      
      <van-list
      <u-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
@@ -63,7 +63,7 @@
            </view>
          </view>
        </view>
      </van-list>
      </u-list>
    </view>
  </view>
</template>
@@ -330,53 +330,7 @@
}

// 自定义单选按钮样式
:deep(.van-radio) {
  .van-radio__icon {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background: #fff;
    position: relative;
    transition: all 0.2s;
    
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      width: 8px;
      height: 8px;
      background: #006cfb;
      border-radius: 50%;
      transition: transform 0.2s;
    }
  }
  
  &.van-radio--checked {
    .van-radio__icon {
      border-color: #006cfb;
      background: #fff;
      
      &::before {
        transform: translate(-50%, -50%) scale(1);
      }
      
      &::after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border: 2px solid rgba(0, 108, 251, 0.2);
        border-radius: 50%;
        animation: ripple 0.6s ease-out;
      }
    }
  }
}
/* uview-plus的radio组件样式不需要额外的deep样式穿透，保持原有样式 */

@keyframes ripple {
  0% {
@@ -387,56 +341,5 @@
    transform: scale(1.2);
    opacity: 0;
  }
}
</style>

<style lang="scss">
/* 更新样式类名 */
:deep(.u-radio) {
   .u-radio__icon {
      width: 20px;
      height: 20px;
      border: 2px solid #ddd;
      border-radius: 50%;
      background: #fff;
      position: relative;
      transition: all 0.2s;
		
      &::before {
         content: '';
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%) scale(0);
         width: 8px;
         height: 8px;
         background: #006cfb;
         border-radius: 50%;
         transition: transform 0.2s;
      }
   }
	
   &.u-radio--checked {
      .u-radio__icon {
         border-color: #006cfb;
         background: #fff;
			
         &::before {
            transform: translate(-50%, -50%) scale(1);
         }
			
         &::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border: 2px solid rgba(0, 108, 251, 0.2);
            border-radius: 50%;
            animation: ripple 0.6s ease-out;
         }
      }
   }
}
</style>