diff --git a/src/components/Pages/Flipper/index.vue b/src/components/Pages/Flipper/index.vue index 122f6d59..0ba14435 100644 --- a/src/components/Pages/Flipper/index.vue +++ b/src/components/Pages/Flipper/index.vue @@ -43,6 +43,10 @@ const props = defineProps({ backColor: { type: String, default: '#000000' + }, + borderWidth: { + type: Number, + default: 2 } }) @@ -93,6 +97,7 @@ $radius: v-bind('`${props.radius}px`'); $width: v-bind('`${props.width}px`'); $height: v-bind('`${props.height}px`'); $perspective: v-bind('`${props.height * 2}px`'); +$borderWidth: v-bind('`${props.borderWidth * 2}px`'); $speed: v-bind('`${props.duration / 1000}s`'); $shadowColor: #000000; $lineColor: #4a9ef8; @@ -138,7 +143,6 @@ $lineColor: #4a9ef8; width: $width; height: $height; line-height: $height; - border: solid 1px $backColor; border-radius: $radius; background: $frontColor; font-size: $width; @@ -146,6 +150,17 @@ $lineColor: #4a9ef8; box-shadow: 0 0 6px rgba($color: $shadowColor, $alpha: 0.5); // 阴影部分 text-align: center; // font-family: 'Helvetica Neue'; + &::after { + content: ''; + position: absolute; + z-index: 10; + left: 0; + top: 0; + right: 0; + bottom: 0; + box-shadow: inset 0 0 $borderWidth 0 $frontColor; // 内测阴影部分 + border-radius: $radius; + } .digital:before, .digital:after { diff --git a/src/packages/components/Decorates/Mores/FlipperNumber/config.ts b/src/packages/components/Decorates/Mores/FlipperNumber/config.ts index 36a04377..44856128 100644 --- a/src/packages/components/Decorates/Mores/FlipperNumber/config.ts +++ b/src/packages/components/Decorates/Mores/FlipperNumber/config.ts @@ -16,6 +16,7 @@ export interface OptionType { flipperGap: number flipperType: FlipType flipperSpeed: number + flipperBorderWidth: number } export const option: OptionType = { @@ -28,7 +29,8 @@ export const option: OptionType = { flipperRadius: 5, flipperGap: 10, flipperType: 'down', - flipperSpeed: 450 + flipperSpeed: 450, + flipperBorderWidth: 0, } export default class Config extends PublicConfigClass implements CreateComponentType { diff --git a/src/packages/components/Decorates/Mores/FlipperNumber/config.vue b/src/packages/components/Decorates/Mores/FlipperNumber/config.vue index f2c65a96..91d4450a 100644 --- a/src/packages/components/Decorates/Mores/FlipperNumber/config.vue +++ b/src/packages/components/Decorates/Mores/FlipperNumber/config.vue @@ -16,12 +16,16 @@ - - + + + + + + ([])