style: 调整翻牌默认大小

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)
 }

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"
         ></n-input-number>
       </setting-item>
       <setting-item name="结束日期">
-        <n-date-picker v-model:value="optionData.endDate" type="datetime" :disabled="!optionData.fixedDate" />
+        <n-date-picker v-model:value="optionData.endDate" type="datetime" :disabled="!optionData.useEndDate" />
       </setting-item>
       <setting-item>
-        <n-checkbox v-model:checked="optionData.fixedDate" size="small">使用固定日期</n-checkbox>
+        <n-checkbox v-model:checked="optionData.useEndDate" size="small">使用固定结束日期</n-checkbox>
       </setting-item>
     </setting-item-box>
 

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;
 }
 </style>

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)
 }

src/packages/components/Decorates/Mores/FlipperNumber/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- <n-countdown :duration="50000" :active="true" /> -->
-  <n-space class="go-decorates-more-countdown" :size="flipperGap" align="center" justify="center">
+  <n-space class="go-decorates-flipper-number" :size="flipperGap" align="center" justify="center">
     <flipper
       :count="item"
       :width="flipperWidth"
@@ -12,6 +12,7 @@
       :duration="flipperSpeed"
       v-for="(item, index) in flipperData"
       :key="index"
+      class="go-d-block"
     />
   </n-space>
 </template>
@@ -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
 </script>
 
 <style lang="scss" scoped>
-@include go('decorates-more-countdown') {
+@include go('decorates-flipper-number') {
   width: v-bind('`${w}px`');
   height: v-bind('`${h}px`');
 }