From 48d17f924413f5b7a654240f38e1013f93fcb5fd Mon Sep 17 00:00:00 2001 From: tnt group Date: Fri, 30 Sep 2022 22:25:08 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E7=BF=BB=E7=89=8C?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=A4=A7=E5=B0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Decorates/Mores/CountDown/config.ts | 16 +++++++--------- .../Decorates/Mores/CountDown/config.vue | 6 +++--- .../Decorates/Mores/CountDown/index.vue | 7 ++++--- .../Decorates/Mores/FlipperNumber/config.ts | 8 ++++---- .../Decorates/Mores/FlipperNumber/index.vue | 7 ++++--- 5 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/packages/components/Decorates/Mores/CountDown/config.ts b/src/packages/components/Decorates/Mores/CountDown/config.ts index 7131bcaf..daa32918 100644 --- a/src/packages/components/Decorates/Mores/CountDown/config.ts +++ b/src/packages/components/Decorates/Mores/CountDown/config.ts @@ -9,11 +9,10 @@ type STYLE = '时分秒' | '冒号' export interface OptionType { dataset: number - fixedDate: boolean + useEndDate: boolean endDate: number style: STYLE showDay: boolean - flipperLength: number flipperBgColor: string flipperTextColor: string flipperWidth: number @@ -26,16 +25,15 @@ export interface OptionType { export const option: OptionType = { dataset: 10 * 60, // 10分钟 - fixedDate: false, + useEndDate: false, endDate: new Date().getTime(), // 当前时间 style: '时分秒', - showDay: true, - flipperLength: 6, + showDay: false, flipperBgColor: '#253E4E', flipperTextColor: '#7CFFB2FF', - flipperWidth: 60, - flipperHeight: 100, - flipperRadius: 10, + flipperWidth: 30, + flipperHeight: 50, + flipperRadius: 5, flipperGap: 10, flipperType: 'down', flipperSpeed: 450 @@ -43,7 +41,7 @@ export const option: OptionType = { export default class Config extends PublicConfigClass implements CreateComponentType { public key = CountDownConfig.key - public attr = { ...chartInitConfig, w: 950, h: 160, zIndex: -1 } + public attr = { ...chartInitConfig, w: 500, h: 100, zIndex: -1 } public chartConfig = cloneDeep(CountDownConfig) public option = cloneDeep(option) } diff --git a/src/packages/components/Decorates/Mores/CountDown/config.vue b/src/packages/components/Decorates/Mores/CountDown/config.vue index 43827977..0b92d80e 100644 --- a/src/packages/components/Decorates/Mores/CountDown/config.vue +++ b/src/packages/components/Decorates/Mores/CountDown/config.vue @@ -6,14 +6,14 @@ v-model:value="optionData.dataset" size="small" :min="0" - :disabled="optionData.fixedDate" + :disabled="optionData.useEndDate" > - + - 使用固定日期 + 使用固定结束日期 diff --git a/src/packages/components/Decorates/Mores/CountDown/index.vue b/src/packages/components/Decorates/Mores/CountDown/index.vue index ad24c6b3..8dde8706 100644 --- a/src/packages/components/Decorates/Mores/CountDown/index.vue +++ b/src/packages/components/Decorates/Mores/CountDown/index.vue @@ -89,7 +89,7 @@ const { w, h } = toRefs(props.chartConfig.attr) const { dataset, - fixedDate, + useEndDate, endDate, style, showDay, @@ -132,7 +132,7 @@ const renderCountdown: CountdownProps['render'] = ({ hours, minutes, seconds }) const updateTotalDuration = () => { countdownActive.value = false - totalDuration.value = fixedDate.value ? endDate.value - new Date().getTime() : dataset.value * 1000 + totalDuration.value = useEndDate.value ? endDate.value - new Date().getTime() : dataset.value * 1000 countdownRef.value?.reset && countdownRef.value?.reset() countdownActive.value = true } @@ -156,7 +156,7 @@ watch( } ) watch( - () => props.chartConfig.option.fixedDate, + () => props.chartConfig.option.useEndDate, () => { updateTotalDuration() }, @@ -177,5 +177,6 @@ onMounted(() => { font-size: v-bind('`${flipperWidth}px`'); line-height: v-bind('`${flipperHeight}px`'); color: v-bind('flipperTextColor'); + user-select: none; } diff --git a/src/packages/components/Decorates/Mores/FlipperNumber/config.ts b/src/packages/components/Decorates/Mores/FlipperNumber/config.ts index ef074f7c..d7410da5 100644 --- a/src/packages/components/Decorates/Mores/FlipperNumber/config.ts +++ b/src/packages/components/Decorates/Mores/FlipperNumber/config.ts @@ -23,9 +23,9 @@ export const option: OptionType = { flipperLength: 6, flipperBgColor: '#253E4E', flipperTextColor: '#7CFFB2FF', - flipperWidth: 60, - flipperHeight: 100, - flipperRadius: 10, + flipperWidth: 30, + flipperHeight: 50, + flipperRadius: 5, flipperGap: 10, flipperType: 'down', flipperSpeed: 450 @@ -33,7 +33,7 @@ export const option: OptionType = { export default class Config extends PublicConfigClass implements CreateComponentType { public key = FlipperNumberConfig.key - public attr = { ...chartInitConfig, w: 500, h: 160, zIndex: -1 } + public attr = { ...chartInitConfig, w: 300, h: 100, zIndex: -1 } public chartConfig = cloneDeep(FlipperNumberConfig) public option = cloneDeep(option) } diff --git a/src/packages/components/Decorates/Mores/FlipperNumber/index.vue b/src/packages/components/Decorates/Mores/FlipperNumber/index.vue index 34a6defa..d831c4ed 100644 --- a/src/packages/components/Decorates/Mores/FlipperNumber/index.vue +++ b/src/packages/components/Decorates/Mores/FlipperNumber/index.vue @@ -1,6 +1,6 @@ @@ -51,7 +52,7 @@ const getFlipperData = (val: string | number) => { .toString() .padStart(flipperLength.value, '0') // 左侧填充|右对齐 .split('') // 转数组 - .slice(flipperLength.value * -1) // 从右向左取 + .slice(flipperLength.value * -1) // 从后面取指定长度 } const updateDatasetHandler = (newVal: string | number) => { flipperData.value = getFlipperData(newVal) @@ -74,7 +75,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: string | number