radio component

packages/radio/src/radio.vue

@@ -11,7 +11,11 @@
         type="radio"
         class="z-radio__control"
         :disabled="isDisabled">
-      <span class="z-radio__circle"></span>
+      <span class="zui-icon" :class="{
+        'zui-icon-checked': currentValue === name,
+        'zui-icon-check': currentValue !== name
+      }">
+      </span>
     </span>
     <span class="z-radio__label">
       <slot></slot>

packages/zanui-css/src/radio.css

@@ -1,5 +1,46 @@
+@import "./common/var.css";
+
 @component-namespace z {
   @b radio {
+    margin: 10px 0;
 
+    @when disabled {
+      .zui-icon {
+        color: #d1dbe5;
+      }
+    }
+
+    @e input {
+      position: relative;
+      height: 22px;
+      margin-right: 15px;
+    }
+
+    @e control {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 22px;
+      height: 22px;
+      opacity: 0;
+      margin: 0;
+    }
+
+    @e label {
+      line-height: 22px;
+    }
+
+    .zui-icon {
+      font-size: 22px;
+      line-height: 1;
+    }
+
+    .zui-icon-checked {
+      color: $c-green;
+    }
+
+    .zui-icon-check {
+      color: $c-gray-dark;
+    }
   }
 }