From 02c1bd30e38bf1ad0ceb7d20001fdaeb992b3f27 Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
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 @@
<setting-item name="高度">
<n-input-number v-model:value="optionData.flipperHeight" size="small" :min="1"></n-input-number>
</setting-item>
- <setting-item name="间隔">
- <n-input-number v-model:value="optionData.flipperGap" size="small" :min="0"></n-input-number>
+ <setting-item name="边框">
+ <n-input-number v-model:value="optionData.flipperBorderWidth" size="small" :min="0" :max="10"></n-input-number>
</setting-item>
<setting-item name="圆角">
<n-input-number v-model:value="optionData.flipperRadius" size="small" :min="0"></n-input-number>
</setting-item>
+ <setting-item name="翻牌间隔">
+ <n-input-number v-model:value="optionData.flipperGap" size="small" :min="0"></n-input-number>
+ </setting-item>
+ <setting-item />
<setting-item name="背景色">
<n-color-picker
size="small"
diff --git a/src/packages/components/Decorates/Mores/FlipperNumber/index.vue b/src/packages/components/Decorates/Mores/FlipperNumber/index.vue
index 8743fdbd..9e5c0ca2 100644
--- a/src/packages/components/Decorates/Mores/FlipperNumber/index.vue
+++ b/src/packages/components/Decorates/Mores/FlipperNumber/index.vue
@@ -9,6 +9,7 @@
:radius="flipperRadius"
:flip-type="flipperType"
:duration="flipperSpeed"
+ :border-width="flipperBorderWidth"
v-for="(item, index) in flipperData"
:key="index"
class="go-d-block"
@@ -42,7 +43,8 @@ const {
flipperRadius,
flipperGap,
flipperType,
- flipperSpeed
+ flipperSpeed,
+ flipperBorderWidth
} = toRefs(props.chartConfig.option as OptionType)
const flipperData = ref<string[] | number[]>([])