diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
index ab23262e5c..0593e49af6 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
@@ -21,7 +21,7 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage.vue b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
index 08a9bfe471..36a958282c 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage.vue
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
@@ -29,7 +29,7 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue b/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue
index eedce4a44e..1a4855af5c 100644
--- a/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue
@@ -26,7 +26,7 @@ const IconError = iconError()
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/clearable.vue b/examples/sites/demos/pc/app/time-picker/clearable.vue
index 7debc82e2c..f755b7f18e 100644
--- a/examples/sites/demos/pc/app/time-picker/clearable.vue
+++ b/examples/sites/demos/pc/app/time-picker/clearable.vue
@@ -34,7 +34,7 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue b/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue
index 82577a673d..ea90ab9200 100644
--- a/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue
@@ -25,7 +25,7 @@ const rangeValue = ref('')
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/default-value.vue b/examples/sites/demos/pc/app/time-picker/default-value.vue
index 185a7956cf..43805d6a21 100644
--- a/examples/sites/demos/pc/app/time-picker/default-value.vue
+++ b/examples/sites/demos/pc/app/time-picker/default-value.vue
@@ -31,7 +31,7 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue b/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue
index 34a65da677..cb3c10705e 100644
--- a/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue
@@ -24,7 +24,7 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/disabled.vue b/examples/sites/demos/pc/app/time-picker/disabled.vue
index 83bb3786b5..6bb7b1cd30 100644
--- a/examples/sites/demos/pc/app/time-picker/disabled.vue
+++ b/examples/sites/demos/pc/app/time-picker/disabled.vue
@@ -32,7 +32,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/editable-composition-api.vue b/examples/sites/demos/pc/app/time-picker/editable-composition-api.vue
index cdf8e023fe..2990cd0456 100644
--- a/examples/sites/demos/pc/app/time-picker/editable-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/editable-composition-api.vue
@@ -13,6 +13,6 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/editable.vue b/examples/sites/demos/pc/app/time-picker/editable.vue
index b1b40deef1..addb22adfc 100644
--- a/examples/sites/demos/pc/app/time-picker/editable.vue
+++ b/examples/sites/demos/pc/app/time-picker/editable.vue
@@ -21,6 +21,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/event-composition-api.vue b/examples/sites/demos/pc/app/time-picker/event-composition-api.vue
index c19c5e8161..b3de62701f 100644
--- a/examples/sites/demos/pc/app/time-picker/event-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/event-composition-api.vue
@@ -25,7 +25,7 @@ function focus() {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/time-picker/event.vue b/examples/sites/demos/pc/app/time-picker/event.vue
index 6aa85a0202..f5b7ee3b1b 100644
--- a/examples/sites/demos/pc/app/time-picker/event.vue
+++ b/examples/sites/demos/pc/app/time-picker/event.vue
@@ -32,7 +32,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/time-picker/format-composition-api.vue b/examples/sites/demos/pc/app/time-picker/format-composition-api.vue
index f2d1c0c803..34b8acd617 100644
--- a/examples/sites/demos/pc/app/time-picker/format-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/format-composition-api.vue
@@ -38,7 +38,7 @@ const pickerValue = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/time-picker/format.vue b/examples/sites/demos/pc/app/time-picker/format.vue
index 0a429f58e5..0c24352f0c 100644
--- a/examples/sites/demos/pc/app/time-picker/format.vue
+++ b/examples/sites/demos/pc/app/time-picker/format.vue
@@ -50,7 +50,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue b/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
index f06508a4e7..17d2fdfb6d 100644
--- a/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-time-picker-wrap">
     <tiny-time-picker v-model="value1" is-range></tiny-time-picker>
   </div>
 </template>
@@ -13,3 +13,9 @@ const endTime = new Date(2016, 9, 10, 18, 50)
 
 const value1 = ref([startTime, endTime])
 </script>
+
+<style scoped lang="less">
+.demo-time-picker-wrap {
+  width: 360px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/time-picker/is-range.vue b/examples/sites/demos/pc/app/time-picker/is-range.vue
index 38983aafd8..c88c0c18b8 100644
--- a/examples/sites/demos/pc/app/time-picker/is-range.vue
+++ b/examples/sites/demos/pc/app/time-picker/is-range.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-time-picker-wrap">
     <tiny-time-picker v-model="value1" is-range></tiny-time-picker>
   </div>
 </template>
@@ -21,3 +21,9 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="less">
+.demo-time-picker-wrap {
+  width: 360px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/time-picker/name-composition-api.vue b/examples/sites/demos/pc/app/time-picker/name-composition-api.vue
index c8541feb8e..347cf95f5f 100644
--- a/examples/sites/demos/pc/app/time-picker/name-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/name-composition-api.vue
@@ -13,6 +13,6 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/name.vue b/examples/sites/demos/pc/app/time-picker/name.vue
index d06a4afebb..e5a01dbff6 100644
--- a/examples/sites/demos/pc/app/time-picker/name.vue
+++ b/examples/sites/demos/pc/app/time-picker/name.vue
@@ -21,6 +21,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/picker-options-composition-api.vue b/examples/sites/demos/pc/app/time-picker/picker-options-composition-api.vue
index 978f98be01..6da63f9698 100644
--- a/examples/sites/demos/pc/app/time-picker/picker-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/picker-options-composition-api.vue
@@ -17,6 +17,6 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped>
 .demo-date-picker-options {
-  width: 240px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/picker-options.vue b/examples/sites/demos/pc/app/time-picker/picker-options.vue
index d9b20eecac..294b4392f8 100644
--- a/examples/sites/demos/pc/app/time-picker/picker-options.vue
+++ b/examples/sites/demos/pc/app/time-picker/picker-options.vue
@@ -25,6 +25,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-options {
-  width: 240px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue b/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue
index 9669cf8f76..7e5ab0edfc 100644
--- a/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue
@@ -27,7 +27,7 @@ const rangeValue = ref(['', ''])
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/placeholder.vue b/examples/sites/demos/pc/app/time-picker/placeholder.vue
index 93a26c7f73..e2d1ca34f0 100644
--- a/examples/sites/demos/pc/app/time-picker/placeholder.vue
+++ b/examples/sites/demos/pc/app/time-picker/placeholder.vue
@@ -35,7 +35,7 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/popper-class-composition-api.vue b/examples/sites/demos/pc/app/time-picker/popper-class-composition-api.vue
index 9612c794cc..b4de1fe6d8 100644
--- a/examples/sites/demos/pc/app/time-picker/popper-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/popper-class-composition-api.vue
@@ -13,7 +13,7 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 
 .picker-class {
diff --git a/examples/sites/demos/pc/app/time-picker/popper-class.vue b/examples/sites/demos/pc/app/time-picker/popper-class.vue
index 08a57b928c..fefa720d75 100644
--- a/examples/sites/demos/pc/app/time-picker/popper-class.vue
+++ b/examples/sites/demos/pc/app/time-picker/popper-class.vue
@@ -21,7 +21,7 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 
 .picker-class {
diff --git a/examples/sites/demos/pc/app/time-picker/size-composition-api.vue b/examples/sites/demos/pc/app/time-picker/size-composition-api.vue
index 9e5a22e3c3..d6ddbbcbce 100644
--- a/examples/sites/demos/pc/app/time-picker/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/size-composition-api.vue
@@ -35,7 +35,7 @@ const radioValue = ref('default')
 }
 
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/time-picker/size.vue b/examples/sites/demos/pc/app/time-picker/size.vue
index 78f994a32f..b9233ce13e 100644
--- a/examples/sites/demos/pc/app/time-picker/size.vue
+++ b/examples/sites/demos/pc/app/time-picker/size.vue
@@ -41,7 +41,7 @@ export default {
 }
 
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/time-picker/step-composition-api.vue b/examples/sites/demos/pc/app/time-picker/step-composition-api.vue
index 1f5382ecad..c10a7e888c 100644
--- a/examples/sites/demos/pc/app/time-picker/step-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/step-composition-api.vue
@@ -19,6 +19,6 @@ const value = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/step.vue b/examples/sites/demos/pc/app/time-picker/step.vue
index a9b813cd71..d53b3cec3e 100644
--- a/examples/sites/demos/pc/app/time-picker/step.vue
+++ b/examples/sites/demos/pc/app/time-picker/step.vue
@@ -27,6 +27,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/suffix-icon-composition-api.vue b/examples/sites/demos/pc/app/time-picker/suffix-icon-composition-api.vue
index bdbb914d6e..bbba2eb5e0 100644
--- a/examples/sites/demos/pc/app/time-picker/suffix-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/suffix-icon-composition-api.vue
@@ -15,6 +15,6 @@ const IconMinus = iconMinus()
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/suffix-icon.vue b/examples/sites/demos/pc/app/time-picker/suffix-icon.vue
index 4e8269231e..514857fce7 100644
--- a/examples/sites/demos/pc/app/time-picker/suffix-icon.vue
+++ b/examples/sites/demos/pc/app/time-picker/suffix-icon.vue
@@ -23,6 +23,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 200px;
+  width: 280px;
 }
 </style>