diff --git a/examples/sites/demos/pc/app/date-picker/align-composition-api.vue b/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
index 76b3ee515e..2cec3c8af5 100644
--- a/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
@@ -31,6 +31,6 @@ const value = ref('')
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/align.vue b/examples/sites/demos/pc/app/date-picker/align.vue
index b031f52c2d..72f1c98d1e 100644
--- a/examples/sites/demos/pc/app/date-picker/align.vue
+++ b/examples/sites/demos/pc/app/date-picker/align.vue
@@ -39,6 +39,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
index 8d27563881..79ae7d8110 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
@@ -19,6 +19,6 @@ const IconMinus = iconMinus()
 }
 
 .my-date-picker {
-  background: #ddd;
+  background: #f0f0f0;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
index f222428905..3e66b38905 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
@@ -27,6 +27,6 @@ export default {
 }
 
 .my-date-picker {
-  background-color: #ddd;
+  background-color: #f0f0f0;
 }
 </style>