Repository: Tencent/tdesign-mobile-vue (ts)

Issue:
[Grid]上下间距及字号问题
### tdesign-mobile-vue 版本

最新版

### 重现链接

_No response_

### 重现步骤

1、图文竖排宫格的padding-bottom应为12px
2、图文横排宫格的padding上下应均为16px，视觉上剧中
3、可滑动宫格字号有误，应为@font-size-bodySmall:12px
<img width="436" alt="image" src="https://github.com/Tencent/tdesign-mobile-vue/assets/94840745/852a8ed2-8a9b-4896-aed0-4b8d7e254fcb">


### 期望结果

_No response_

### 实际结果

_No response_

### 框架版本

_No response_

### 浏览器版本

_No response_

### 系统版本

_No response_

### Node版本

_No response_

### 补充说明

_No response_

Pull request:
fix(Grid): resolved style error
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [x] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue
fix #791 

### 相关 PR
common: https://github.com/Tencent/tdesign-common/pull/1403
<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- fix(Grid): 修复组件上下边距及水平滚动时字号错误

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


Patch:
diff --git a/src/date-time-picker/date-time-picker.vue b/src/date-time-picker/date-time-picker.vue
index e8f2bb45..42959239 100644
--- a/src/date-time-picker/date-time-picker.vue
+++ b/src/date-time-picker/date-time-picker.vue
@@ -1,12 +1,11 @@
 <template>
   <t-picker
     :class="className"
-    :value="pickerValue"
+    :value="valueOfPicker"
     :title="title"
     :confirm-btn="confirmButtonText"
     :cancel-btn="cancelButtonText"
     :columns="columns"
-    @change="onChange"
     @confirm="onConfirm"
     @cancel="onCancel"
     @pick="onPick"
@@ -52,71 +51,20 @@ export default defineComponent({
     const emitEvent = useEmitEvent(props, context.emit);
     const className = computed(() => [`${name}`]);
     const { value, modelValue } = toRefs(props);
-    const [dateTimePickerValue, setDateTimePickerValue] = useVModel(
-      value,
-      modelValue,
-      props.defaultValue,
-      props.onChange,
-    );
-    const innerValue = ref(dateTimePickerValue.value);
+    const [innerValue, setDateTimePickerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
     const title = computed(() => {
       return props.title || '选择时间';
     });
     const confirmButtonText = computed(() => props.confirmBtn || '确定');
     const cancelButtonText = computed(() => props.cancelBtn || '取消');
-
-    const start = computed(() => {
-      return props.start && dayjs(props.start).isValid() ? dayjs(props.start) : dayjs().subtract(10, 'year');
-    });
-
-    const end = computed(() => {
-      return props.end && dayjs(props.end).isValid() ? dayjs(props.end) : dayjs().add(10, 'year');
-    });
+    const normalize = (val: string | number, defaultDay: Dayjs) =>
+      val && dayjs(val).isValid() ? dayjs(val) : defaultDay;
+    const start = computed(() => normalize(props.start, dayjs().subtract(10, 'year')));
+    const end = computed(() => normalize(props.end, dayjs().add(10, 'year')));
 
     const meaningColumn = computed(() => getMeaningColumn(props.mode));
     const isTimeMode = computed(
-      () => ['hour', 'minute', 'second'].includes(props.mode) || (isArray(props.mode) && props.mode[0] == null),
-    );
-
-    // 根据mode，判断是否需要渲染'year','month','date','hour','minute','second'对应的列
-    const isPrecision = (type: string) => {
-      if (!props.mode) {
-        return false;
-      }
-
-      const arrayIndex = ['year', 'month', 'date'].includes(type) ? 0 : 1;
-
-      if (type in precisionRankRecord) {
-        return (
-          (isString(props.mode) && precisionRankRecord[props.mode] >= precisionRankRecord[type]) ||
-          (isArray(props.mode) && precisionRankRecord[props.mode[arrayIndex]] >= precisionRankRecord[type])
-        );
-      }
-
-      return true;
-    };
-
-    // 将dateTimeValue格式的值转为pickerValue，赋值给picker组件的value
-    const getPickerValueByDateTimePickerValue = (currentDate: Dayjs) => {
-      const ret: PickerValue[] = [];
-      Object.keys(precisionRankRecord).forEach((item) => {
-        if (isPrecision(item)) {
-          ret.push(`${currentDate[item]()}`);
-        }
-      });
-      return ret;
-    };
-
-    const curDate = ref(
-      (() => {
-        let currentValue = innerValue.value;
-        if (isTimeMode.value) {
-          const dateStr = dayjs(start.value).format('YYYY-MM-DD');
-          currentValue = `${dateStr} ${currentValue}`;
-        }
-
-        return currentValue && dayjs(currentValue).isValid() ? dayjs(currentValue) : start.value;
-      })(),
+      () => isArray(props.mode) && props.mode[0] == null && ['hour', 'minute', 'second'].includes(props.mode[1]),
     );
 
     const rationalize = (val: Dayjs) => {
@@ -126,12 +74,29 @@ export default defineComponent({
       return val;
     };
 
-    const pickerValue = computed(() => getPickerValueByDateTimePickerValue(curDate.value));
+    const calcDate = (currentValue: string | number) => {
+      if (isTimeMode.value) {
+        const dateStr = dayjs(start.value).format('YYYY-MM-DD');
+        currentValue = `${dateStr} ${currentValue}`;
+      }
+
+      return currentValue && dayjs(currentValue).isValid() ? rationalize(dayjs(currentValue)) : start.value;
+    };
+    const curDate = ref(calcDate(innerValue.value));
+
+    const valueOfPicker = computed(() => meaningColumn.value.map((item) => curDate.value[item]().toString()));
 
     // 每次pick后，根据start,end生成最新的columns
     const columns = computed(() => {
       const ret: PickerColumn[] = [];
-      const getDate = (date: Dayjs) => [date.year(), date.month() + 1, date.date(), date.minute(), date.second()];
+      const getDate = (date: Dayjs) => [
+        date.year(),
+        date.month() + 1,
+        date.date(),
+        date.hour(),
+        date.minute(),
+        date.second(),
+      ];
       const [curYear, curMonth, curDay, curHour, curMinute] = getDate(curDate.value);
       const [minYear, minMonth, minDay, minHour, minMinute, minSecond] = getDate(start.value);
       const [maxYear, maxMonth, maxDay, maxHour, maxMinute, maxSecond] = getDate(end.value);
@@ -168,35 +133,35 @@ export default defineComponent({
         ret.push(arr);
       };
 
-      if (isPrecision('year')) {
+      if (meaningColumn.value.includes('year')) {
         generateColumn(minYear, maxYear, 'year');
       }
 
-      if (isPrecision('month')) {
+      if (meaningColumn.value.includes('month')) {
         const lower = isInMinYear ? minMonth : 1;
         const upper = isInMaxYear ? maxMonth : 12;
         generateColumn(lower, upper, 'month');
       }
 
-      if (isPrecision('date')) {
+      if (meaningColumn.value.includes('date')) {
         const lower = isInMinMonth ? minDay : 1;
         const upper = isInMaxMonth ? maxDay : dayjs(`${curYear}-${curMonth}`).daysInMonth();
         generateColumn(lower, upper, 'date');
       }
 
-      if (isPrecision('hour')) {
+      if (meaningColumn.value.includes('hour')) {
         const lower = isInMinDay && !isTimeMode.value ? minHour : 0;
         const upper = isInMaxDay && !isTimeMode.value ? maxHour : 23;
         generateColumn(lower, upper, 'hour');
       }
 
-      if (isPrecision('minute')) {
+      if (meaningColumn.value.includes('minute')) {
         const lower = isInMinHour && !isTimeMode.value ? minMinute : 0;
         const upper = isInMaxHour && !isTimeMode.value ? maxMinute : 59;
         generateColumn(lower, upper, 'minute');
       }
 
-      if (isPrecision('second')) {
+      if (meaningColumn.value.includes('second')) {
         const lower = isInMinMinute && !isTimeMode.value ? minSecond : 0;
         const upper = isInMaxMinute && !isTimeMode.value ? maxSecond : 59;
         generateColumn(lower, upper, 'second');
@@ -204,27 +169,28 @@ export default defineComponent({
       return ret;
     });
 
-    const onConfirm = (value: Array<PickerValue>, context: { index: number[] }) => {
+    const onConfirm = () => {
       emitEvent('confirm', dayjs(curDate.value).format(props.format));
+      setDateTimePickerValue(dayjs(curDate.value).format(props.format));
     };
 
     const onCancel = (context: { e: MouseEvent }) => {
       emitEvent('cancel', { e: context.e });
     };
 
-    const onChange = (value: Array<PickerValue>, context: { columns: Array<PickerContext>; e: MouseEvent }) => {
-      emitEvent('change', dayjs(curDate.value).format(props.format));
-    };
-
     const onPick = (value: Array<PickerValue>, context: PickerContext) => {
       const { column, index } = context;
       const type = meaningColumn.value[column];
       const val = curDate.value.set(type as UnitType, parseInt(columns.value[column][index]?.value, 10));
 
       curDate.value = rationalize(val);
-      emitEvent('pick', curDate.value.format(props.format));
+      emitEvent('pick', rationalize(val).format(props.format));
     };
 
+    watch(innerValue, (val) => {
+      curDate.value = calcDate(val);
+    });
+
     return {
       className,
       confirmButtonText,
@@ -232,12 +198,11 @@ export default defineComponent({
       title,
       start,
       end,
-      pickerValue,
+      valueOfPicker,
       columns,
       onConfirm,
       onCancel,
       onPick,
-      onChange,
     };
   },
 });
diff --git a/src/date-time-picker/demos/base.vue b/src/date-time-picker/demos/base.vue
index ce6f2389..a3983938 100644
--- a/src/date-time-picker/demos/base.vue
+++ b/src/date-time-picker/demos/base.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 const visible = ref(false);
 const pickerValue = ref('2021-12-23');
diff --git a/src/date-time-picker/shared.ts b/src/date-time-picker/shared.ts
index 421199af..e0d8b96f 100644
--- a/src/date-time-picker/shared.ts
+++ b/src/date-time-picker/shared.ts
@@ -1,13 +1,8 @@
-import isString from 'lodash/isString';
 import isArray from 'lodash/isArray';
 
 export const getMeaningColumn = (mode: string | string[]) => {
   const arr = ['year', 'month', 'date', 'hour', 'minute', 'second'];
 
-  if (isString(mode)) {
-    const cutIndex = arr.indexOf(mode);
-    return arr.slice(0, cutIndex + 1);
-  }
   if (isArray(mode)) {
     const ans = [];
     const [dateMode, timeMode] = mode;
@@ -25,5 +20,8 @@ export const getMeaningColumn = (mode: string | string[]) => {
     }
     return ans;
   }
-  return [];
+
+  const cutIndex = arr.indexOf(mode);
+
+  return arr.slice(0, cutIndex + 1);
 };
diff --git a/src/grid/grid-item.vue b/src/grid/grid-item.vue
index 554a8359..77af7146 100644
--- a/src/grid/grid-item.vue
+++ b/src/grid/grid-item.vue
@@ -61,7 +61,7 @@ export default defineComponent({
     });
 
     const size = computed(() => {
-      if (column.value > 4) return 'small';
+      if (column.value > 4 || !column.value) return 'small';
       return column.value < 4 ? 'large' : 'middle';
     });
 
diff --git a/src/picker/picker-item.vue b/src/picker/picker-item.vue
index 9087b649..053babe8 100644
--- a/src/picker/picker-item.vue
+++ b/src/picker/picker-item.vue
@@ -82,8 +82,6 @@ export default defineComponent({
         el: root.value,
         defaultIndex: getIndexByValue(props.value) || 0,
         onChange: (index: number) => {
-          console.log('onchange');
-
           const curItem = props.options[index];
           const changeValue = { value: curItem.value, index };
           emitEvent('pick', changeValue);


Test patch:
diff --git a/src/date-time-picker/__test__/index.test.jsx b/src/date-time-picker/__test__/index.test.jsx
index 9f8a461c..b5b883a8 100644
--- a/src/date-time-picker/__test__/index.test.jsx
+++ b/src/date-time-picker/__test__/index.test.jsx
@@ -1,6 +1,8 @@
 import { nextTick, ref } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
+import dayjs from 'dayjs';
+
 import DateTimePicker from '../date-time-picker.vue';
 import PickerItem from '../../picker/picker-item.vue';
 import { DEFAULT_ITEM_HEIGHT, ANIMATION_TIME_LIMIT } from '../../picker/picker.class';
@@ -106,13 +108,13 @@ describe('DateTimePicker', () => {
     });
 
     it(': mode', async () => {
-      const defaultValue = defaultDateTime;
-      const modeArray = ['date', 'second'];
+      const onPick = vi.mock();
       const wrapper = mount(DateTimePicker, {
         props: {
-          defaultValue,
+          defaultValue: defaultDateTime,
           title: 'mode 测试',
-          mode: modeArray,
+          mode: ['date', 'second'],
+          onPick
         },
       });
       // mode = ['date', 'second'], 渲染年月日时分秒，6列
@@ -120,26 +122,38 @@ describe('DateTimePicker', () => {
       expect(pickerItem.exists()).toBeTruthy();
       const $pickerItems = wrapper.findAllComponents(PickerItem);
       expect($pickerItems).toHaveLength(6);
-      await wrapper.setProps({
-        mode: false,
-      });
-      // mode = false, 不渲染列
-      expect(pickerItem.exists()).toBeFalsy();
+
+      // pick
+      const el = wrapper.findAll(`.${prefix}-picker-item`);
+      const touchItemIndex = 0;
+      const touchIndex = 2;
+      simulateMoveOption(el[touchItemIndex].element, touchIndex);
     });
 
-    it(': start && end ', async () => {
-      const defaultValue = defaultDateTime;
-      const start = '2020-6-30';
-      const end = '2025-6-30';
+    it(': time mode', async () => {
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          value: '10:00:00',
+          mode: [null, 'second'],
+          format: 'HH:mm:ss',
+          start: '2023-06-13'
+        },
+      });
+      expect(wrapper.vm.valueOfPicker).toStrictEqual(['10', '0', '0'])
+    })
 
+    it(': start && end ', async () => {
+      const start = '2020-6-30 10:00:00';
+      const end = '2025-10-10 10:10:10';
       const startYear = start.split('-')[0];
       const endYear = end.split('-')[0];
 
       const wrapper = mount(DateTimePicker, {
         props: {
-          defaultValue,
+          value: start,
           start,
           end,
+          mode: 'second'
         },
       });
       const $pickerItems = wrapper.findAllComponents(PickerItem);
@@ -148,6 +162,15 @@ describe('DateTimePicker', () => {
         res[precisionRankRecord[index]] = item.findAll(`.${prefix}-picker-item__item`);
       });
       expect(res[precisionRankRecord[0]].length).toEqual(endYear - startYear + 1);
+
+      // 设置到最后一天
+      await wrapper.setProps({ value: end })
+
+      $pickerItems.forEach((item, index) => {
+        const { length } = item.findAll(`.${prefix}-picker-item__item`);
+        const counter = [6, 10, 10, 11, 11, 11]
+        expect(length).toBe(counter[index])
+      });
     });
 
     it(': renderLabel', async () => {
diff --git a/src/grid/__test__/__snapshots__/demo.test.jsx.snap b/src/grid/__test__/__snapshots__/demo.test.jsx.snap
index 2e5b6e38..f34cfbec 100644
--- a/src/grid/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/grid/__test__/__snapshots__/demo.test.jsx.snap
@@ -4938,7 +4938,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           style="text-align: center;"
         >
           <div
-            class="t-grid-item__image t-grid-item__image--large"
+            class="t-grid-item__image t-grid-item__image--small"
           >
             <div
               class="t-image t-image--round"
@@ -4988,7 +4988,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
             class="t-grid-item__content t-grid-item__content--vertical"
           >
             <div
-              class="t-grid-item__title t-grid-item__title--large"
+              class="t-grid-item__title t-grid-item__title--small"
             >
               标题文字
             </div>
@@ -5005,7 +5005,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           style="text-align: center;"
         >
           <div
-            class="t-grid-item__image t-grid-item__image--large"
+            class="t-grid-item__image t-grid-item__image--small"
           >
             <div
               class="t-image t-image--round"
@@ -5055,7 +5055,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
             class="t-grid-item__content t-grid-item__content--vertical"
           >
             <div
-              class="t-grid-item__title t-grid-item__title--large"
+              class="t-grid-item__title t-grid-item__title--small"
             >
               标题文字
             </div>
@@ -5072,7 +5072,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           style="text-align: center;"
         >
           <div
-            class="t-grid-item__image t-grid-item__image--large"
+            class="t-grid-item__image t-grid-item__image--small"
           >
             <div
               class="t-image t-image--round"
@@ -5122,7 +5122,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
             class="t-grid-item__content t-grid-item__content--vertical"
           >
             <div
-              class="t-grid-item__title t-grid-item__title--large"
+              class="t-grid-item__title t-grid-item__title--small"
             >
               标题文字
             </div>
@@ -5139,7 +5139,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           style="text-align: center;"
         >
           <div
-            class="t-grid-item__image t-grid-item__image--large"
+            class="t-grid-item__image t-grid-item__image--small"
           >
             <div
               class="t-image t-image--round"
@@ -5189,7 +5189,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
             class="t-grid-item__content t-grid-item__content--vertical"
           >
             <div
-              class="t-grid-item__title t-grid-item__title--large"
+              class="t-grid-item__title t-grid-item__title--small"
             >
               标题文字
             </div>
@@ -5206,7 +5206,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           style="text-align: center;"
         >
           <div
-            class="t-grid-item__image t-grid-item__image--large"
+            class="t-grid-item__image t-grid-item__image--small"
           >
             <div
               class="t-image t-image--round"
@@ -5256,7 +5256,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
             class="t-grid-item__content t-grid-item__content--vertical"
           >
             <div
-              class="t-grid-item__title t-grid-item__title--large"
+              class="t-grid-item__title t-grid-item__title--small"
             >
               标题文字
             </div>
@@ -5273,7 +5273,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           style="text-align: center;"
         >
           <div
-            class="t-grid-item__image t-grid-item__image--large"
+            class="t-grid-item__image t-grid-item__image--small"
           >
             <div
               class="t-image t-image--round"
@@ -5323,7 +5323,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
             class="t-grid-item__content t-grid-item__content--vertical"
           >
             <div
-              class="t-grid-item__title t-grid-item__title--large"
+              class="t-grid-item__title t-grid-item__title--small"
             >
               标题文字
             </div>
@@ -5340,7 +5340,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           style="text-align: center;"
         >
           <div
-            class="t-grid-item__image t-grid-item__image--large"
+            class="t-grid-item__image t-grid-item__image--small"
           >
             <div
               class="t-image t-image--round"
@@ -5390,7 +5390,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
             class="t-grid-item__content t-grid-item__content--vertical"
           >
             <div
-              class="t-grid-item__title t-grid-item__title--large"
+              class="t-grid-item__title t-grid-item__title--small"
             >
               标题文字
             </div>
@@ -5407,7 +5407,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           style="text-align: center;"
         >
           <div
-            class="t-grid-item__image t-grid-item__image--large"
+            class="t-grid-item__image t-grid-item__image--small"
           >
             <div
               class="t-image t-image--round"
@@ -5457,7 +5457,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
             class="t-grid-item__content t-grid-item__content--vertical"
           >
             <div
-              class="t-grid-item__title t-grid-item__title--large"
+              class="t-grid-item__title t-grid-item__title--small"
             >
               标题文字
             </div>
@@ -5474,7 +5474,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           style="text-align: center;"
         >
           <div
-            class="t-grid-item__image t-grid-item__image--large"
+            class="t-grid-item__image t-grid-item__image--small"
           >
             <div
               class="t-image t-image--round"
@@ -5524,7 +5524,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
             class="t-grid-item__content t-grid-item__content--vertical"
           >
             <div
-              class="t-grid-item__title t-grid-item__title--large"
+              class="t-grid-item__title t-grid-item__title--small"
             >
               标题文字
             </div>
@@ -5541,7 +5541,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           style="text-align: center;"
         >
           <div
-            class="t-grid-item__image t-grid-item__image--large"
+            class="t-grid-item__image t-grid-item__image--small"
           >
             <div
               class="t-image t-image--round"
@@ -5591,7 +5591,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
             class="t-grid-item__content t-grid-item__content--vertical"
           >
             <div
-              class="t-grid-item__title t-grid-item__title--large"
+              class="t-grid-item__title t-grid-item__title--small"
             >
               标题文字
             </div>
@@ -6285,7 +6285,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
     style="text-align: center;"
   >
     <div
-      class="t-grid-item__image t-grid-item__image--large"
+      class="t-grid-item__image t-grid-item__image--small"
     >
       <div
         class="t-image t-image--round"
@@ -6335,7 +6335,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
       class="t-grid-item__content t-grid-item__content--vertical"
     >
       <div
-        class="t-grid-item__title t-grid-item__title--large"
+        class="t-grid-item__title t-grid-item__title--small"
       >
         标题文字
       </div>
@@ -6352,7 +6352,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
     style="text-align: center;"
   >
     <div
-      class="t-grid-item__image t-grid-item__image--large"
+      class="t-grid-item__image t-grid-item__image--small"
     >
       <div
         class="t-image t-image--round"
@@ -6402,7 +6402,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
       class="t-grid-item__content t-grid-item__content--vertical"
     >
       <div
-        class="t-grid-item__title t-grid-item__title--large"
+        class="t-grid-item__title t-grid-item__title--small"
       >
         标题文字
       </div>
@@ -6419,7 +6419,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
     style="text-align: center;"
   >
     <div
-      class="t-grid-item__image t-grid-item__image--large"
+      class="t-grid-item__image t-grid-item__image--small"
     >
       <div
         class="t-image t-image--round"
@@ -6469,7 +6469,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
       class="t-grid-item__content t-grid-item__content--vertical"
     >
       <div
-        class="t-grid-item__title t-grid-item__title--large"
+        class="t-grid-item__title t-grid-item__title--small"
       >
         标题文字
       </div>
@@ -6486,7 +6486,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
     style="text-align: center;"
   >
     <div
-      class="t-grid-item__image t-grid-item__image--large"
+      class="t-grid-item__image t-grid-item__image--small"
     >
       <div
         class="t-image t-image--round"
@@ -6536,7 +6536,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
       class="t-grid-item__content t-grid-item__content--vertical"
     >
       <div
-        class="t-grid-item__title t-grid-item__title--large"
+        class="t-grid-item__title t-grid-item__title--small"
       >
         标题文字
       </div>
@@ -6553,7 +6553,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
     style="text-align: center;"
   >
     <div
-      class="t-grid-item__image t-grid-item__image--large"
+      class="t-grid-item__image t-grid-item__image--small"
     >
       <div
         class="t-image t-image--round"
@@ -6603,7 +6603,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
       class="t-grid-item__content t-grid-item__content--vertical"
     >
       <div
-        class="t-grid-item__title t-grid-item__title--large"
+        class="t-grid-item__title t-grid-item__title--small"
       >
         标题文字
       </div>
@@ -6620,7 +6620,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
     style="text-align: center;"
   >
     <div
-      class="t-grid-item__image t-grid-item__image--large"
+      class="t-grid-item__image t-grid-item__image--small"
     >
       <div
         class="t-image t-image--round"
@@ -6670,7 +6670,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
       class="t-grid-item__content t-grid-item__content--vertical"
     >
       <div
-        class="t-grid-item__title t-grid-item__title--large"
+        class="t-grid-item__title t-grid-item__title--small"
       >
         标题文字
       </div>
@@ -6687,7 +6687,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
     style="text-align: center;"
   >
     <div
-      class="t-grid-item__image t-grid-item__image--large"
+      class="t-grid-item__image t-grid-item__image--small"
     >
       <div
         class="t-image t-image--round"
@@ -6737,7 +6737,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
       class="t-grid-item__content t-grid-item__content--vertical"
     >
       <div
-        class="t-grid-item__title t-grid-item__title--large"
+        class="t-grid-item__title t-grid-item__title--small"
       >
         标题文字
       </div>
@@ -6754,7 +6754,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
     style="text-align: center;"
   >
     <div
-      class="t-grid-item__image t-grid-item__image--large"
+      class="t-grid-item__image t-grid-item__image--small"
     >
       <div
         class="t-image t-image--round"
@@ -6804,7 +6804,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
       class="t-grid-item__content t-grid-item__content--vertical"
     >
       <div
-        class="t-grid-item__title t-grid-item__title--large"
+        class="t-grid-item__title t-grid-item__title--small"
       >
         标题文字
       </div>
@@ -6821,7 +6821,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
     style="text-align: center;"
   >
     <div
-      class="t-grid-item__image t-grid-item__image--large"
+      class="t-grid-item__image t-grid-item__image--small"
     >
       <div
         class="t-image t-image--round"
@@ -6871,7 +6871,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
       class="t-grid-item__content t-grid-item__content--vertical"
     >
       <div
-        class="t-grid-item__title t-grid-item__title--large"
+        class="t-grid-item__title t-grid-item__title--small"
       >
         标题文字
       </div>
@@ -6888,7 +6888,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
     style="text-align: center;"
   >
     <div
-      class="t-grid-item__image t-grid-item__image--large"
+      class="t-grid-item__image t-grid-item__image--small"
     >
       <div
         class="t-image t-image--round"
@@ -6938,7 +6938,7 @@ exports[`Grid > Grid scrollVue demo works fine 1`] = `
       class="t-grid-item__content t-grid-item__content--vertical"
     >
       <div
-        class="t-grid-item__title t-grid-item__title--large"
+        class="t-grid-item__title t-grid-item__title--small"
       >
         标题文字
       </div>