style(switch): 调整lg尺寸的相关样式

Author: kagol

packages/devui-vue/devui/switch/src/switch.scss

@@ -75,10 +75,11 @@
 
  &.#{$devui-prefix}-switch--lg {
  width: 58px;
- height: 30px;
+ height: 28px;
 
  .#{$devui-prefix}-switch__inner-wrapper {
  padding-left: 28px;
+ padding-top: 2px;
  font-size: $devui-font-size-modal-title;
  }
 
@@ -88,21 +89,21 @@
  }
 
  & small {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
  top: 1px;
  left: 1px;
  }
 
  &.#{$devui-prefix}-switch--checked small {
  background: $devui-light-text;
- left: 29px;
+ left: 30px;
  }
  }
 
  &.#{$devui-prefix}-switch--sm {
  width: 30px;
- height: 14px;
+ height: 15px;
 
  .#{$devui-prefix}-switch__inner-wrapper {
  padding-left: 12px;

packages/devui-vue/docs/components/switch/index.md

@@ -76,23 +76,27 @@ export default defineComponent({
 ```vue
 <template>
  <div style="display: flex;">
- <d-switch v-model="checkedSmContent" size="sm">
- <template #checkedContent>开</template>
- <template #uncheckedContent>关</template>
- </d-switch>
  <d-switch class="mr-1" v-model="checkedColor" color="#FECC55"></d-switch>
- <d-switch class="mr-1" v-model="checkedContent">
- <template #checkedContent>开</template>
- <template #uncheckedContent>关</template>
- </d-switch>
  <d-switch class="mr-1" color="#50D4AB" v-model="checkedIcon">
  <template #checkedContent>
  <i class="icon-right"></i>
  </template>
  <template #uncheckedContent>
  <i class="icon-error"></i>
  </template>
- </d-switch> 
+ </d-switch>
+ <d-switch v-model="checkedSmContent" size="sm">
+ <template #checkedContent>开</template>
+ <template #uncheckedContent>关</template>
+ </d-switch>
+ <d-switch v-model="checkedContent">
+ <template #checkedContent>开</template>
+ <template #uncheckedContent>关</template>
+ </d-switch>
+ <d-switch v-model="checkedLgContent" size="lg">
+ <template #checkedContent>开</template>
+ <template #uncheckedContent>关</template>
+ </d-switch>
  </div>
 
 </template>
@@ -104,11 +108,13 @@ export default defineComponent({
  const checkedColor = ref(true);
  const checkedContent = ref(false);
  const checkedSmContent = ref(false);
+ const checkedLgContent = ref(false);
  const checkedIcon = ref(true);
  return {
  checkedColor,
  checkedContent,
  checkedSmContent,
+ checkedLgContent,
  checkedIcon,
  };
  },