wip

src/components/BasePage.vue

@@ -4,7 +4,7 @@
 
 <template>
   <div class="flex justify-center">
-    <div class="page w-[70vw] 2xl:w-[50vw]">
+    <div class="page 3xl:w-[50vw] 2xl:w-[60vw] xl:w-[70vw] lg:w-[75vw]">
       <slot></slot>
     </div>
   </div>

src/components/base/OptionButton.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="w-full flex box-border cp color-white">
+    <div class="option-wrap">
+      <slot></slot>
+    </div>
+    <div class="relative group">
+      <div
+        class="w-10 rounded-r-lg h-full center bg-[var(--btn-primary)] hover:bg-gray border-solid border-1 border-l-gray/50 border-transparent box-border transition-all duration-300"
+      >
+        <IconFluentChevronDown20Regular />
+      </div>
+      <div
+        class="space-y-2 btn-no-margin pt-2 absolute z-2 right-0 border rounded opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 pointer-events-none group-hover:pointer-events-auto"
+      >
+        <slot name="options"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.option-wrap {
+  width: 100%;
+  display: flex;
+  :deep(.base-button) {
+    width: 100%;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+</style>

src/components/base/radio/Radio.vue

@@ -10,7 +10,7 @@
         :disabled="isDisabled"
     />
     <span class="radio__inner"></span>
-    <span class="radio__label">
+    <span class="text-sm">
       <slot>{{ label }}</slot>
     </span>
   </label>
@@ -83,11 +83,7 @@ function onClick() {
       transition: transform 0.2s ease-in-out;
     }
   }
-
-  .radio__label {
-    font-size: 14px;
-    color: #606266;
-  }
+ 
 
   &.is-checked {
     .radio__inner {

src/components/base/radio/RadioGroup.vue

@@ -23,7 +23,7 @@ provide('radioGroupValue', groupValue)
 provide('radioGroupDisabled', props.disabled)
 provide('updateRadioGroupValue', (val: string | number | boolean) => {
   if (props.disabled) return
-  groupValue.value = val
+  // groupValue.value = val
   emit('update:modelValue', val)
 })