From c508aaa400770d09cc1bbffc68269d3599a4eb87 Mon Sep 17 00:00:00 2001 From: tnt group Date: Sun, 14 May 2023 12:12:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BF=BB=E7=89=8C=E6=95=B0=E5=AD=97?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=86=85=E9=98=B4=E5=BD=B1=E8=BE=B9=E6=A1=86?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E5=8F=8A=E9=85=8D=E7=BD=AE=EF=BC=8C=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E4=B8=BA=200?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Pages/Flipper/index.vue | 17 ++++++++++++++++- .../Decorates/Mores/FlipperNumber/config.ts | 4 +++- .../Decorates/Mores/FlipperNumber/config.vue | 8 ++++++-- .../Decorates/Mores/FlipperNumber/index.vue | 4 +++- 4 files changed, 28 insertions(+), 5 deletions(-) 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 @@ - - + + + + + + ([])