u

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

@@ -0,0 +1,82 @@
+@use '../_styles/_variables.scss' as *;
+
+$radio-prefix: '#{$prefix}-radio';
+
+.#{$radio-prefix} {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  user-select: none;
+
+  &-wrapper {
+    position: relative;
+    width: 16px;
+    height: 16px;
+
+    input[type='radio'] {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      cursor: pointer;
+      z-index: 2;
+    }
+
+    & .#{$radio-prefix}-circle {
+      position: absolute;
+      top: 0;
+      left: 0;
+      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% 透明度
+    }
+  }
+
+  &-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);
+  }
+}