u

code/base-project/base-vue/packages/ao-design/src/radio/index.scss

@@ -3,80 +3,75 @@
 $radio-prefix: '#{$prefix}-radio';
 
 .#{$radio-prefix} {
+  color: $text-color-base;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  position: relative;
   cursor: pointer;
-  font-size: 14px;
   user-select: none;
 
-  &-wrapper {
-    position: relative;
-    width: 16px;
-    height: 16px;
+  &:hover .#{$radio-prefix}-main .#{$radio-prefix}-inner {
+    border-color: $primary-color;
+  }
 
-    input[type='radio'] {
-      position: absolute;
+  &.#{$radio-prefix}-checked .#{$radio-prefix}-main .#{$radio-prefix}-inner {
+    border-color: $primary-color;
+    &::after {
+      transform: translate(-50%, -50%) scale(1);
+      background-color: $primary-color;
+    }
+  }
+
+  .#{$radio-prefix}-main {
+    cursor: pointer;
+    display: inline-flex;
+    white-space: nowrap;
+    outline: 0;
+
+    .#{$radio-prefix}-input {
       opacity: 0;
-      width: 100%;
-      height: 100%;
+      outline: 0;
+      position: absolute;
+      z-index: -1;
       margin: 0;
-      cursor: pointer;
-      z-index: 2;
+      width: 0;
+      height: 0;
+      box-sizing: border-box;
     }
 
-    & .#{$radio-prefix}-circle {
-      position: absolute;
-      top: 0;
-      left: 0;
+    .#{$radio-prefix}-inner {
+      border: 1px solid $border-color;
+      border-radius: 100%;
       width: 16px;
       height: 16px;
-      border: 1px solid #d9d9d9;
-      border-radius: 50%;
-      background-color: #fff;
-      transition: all 0.2s;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1;
-    }
-
-    // 勾选圆点
-    input[type='radio']:checked + .#{$radio-prefix}-circle::after {
-      content: '';
-      width: 8px;
-      height: 8px;
-      background-color: #1890ff;
-      border-radius: 50%;
-      display: block;
-      animation: scaleIn 0.2s ease forwards;
-      box-shadow: 0 0 6px #1890ff33; // #33 = 20% 透明度
+      background-color: $bg-color-container;
+      position: relative;
+      display: inline-block;
+      cursor: pointer;
+      box-sizing: border-box;
+      outline: 0;
+      &::after {
+        box-sizing: border-box;
+        width: 8px;
+        height: 8px;
+        border-radius: 999px;
+        background-color: transparent;
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%) scale(0);
+        transition:
+          transform 0.15s ease-in,
+          background-color 0.15s ease-in;
+      }
     }
   }
 
-  &-content {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &-disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &-clicked {
-    .#{$radio-prefix}-circle {
-      transform: scale(0.9);
-      transition: transform 0.15s ease;
-    }
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    transform: scale(0);
-  }
-  to {
-    transform: scale(1);
+  .#{$radio-prefix}-content {
+    font-size: 12px;
+    margin-left: 8px;
+    vertical-align: middle;
+    line-height: 1;
   }
 }