docs: improve demo background (#5529)

src/button/demo/index.vue

@@ -143,6 +143,8 @@ export default {
 @import '../../style/var';
 
 .demo-button {
+  background: @white;
+
   .van-button {
     &--large {
       margin-bottom: @padding-md;

src/checkbox/demo/index.vue

@@ -170,6 +170,8 @@ export default {
 @import "../../style/var";
 
 .demo-checkbox {
+  background: @white;
+
   .van-checkbox {
     margin: 10px 0 0 20px;
   }

src/col/demo/index.vue

@@ -103,6 +103,8 @@ export default {
 @import '../../style/var';
 
 .demo-col {
+  background: @white;
+
   .van-doc-demo-block {
     padding: 0 @padding-md;
   }

src/icon/demo/index.vue

@@ -222,6 +222,7 @@ export default {
     width: auto;
     margin: 20px;
     background-color: #fff;
+    border-radius: 12px;
   }
 }
 </style>

src/lazyload/demo/index.vue

@@ -66,9 +66,9 @@ export default {
     padding: @padding-md;
     background-color: white;
     background-repeat: no-repeat;
-    background-position: @padding-md;
+    background-size: 100% 100%;
-    background-size: 315px 250px;
+    border-radius: 12px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 8px 12px #ebedf0;
   }
 
   .van-doc-demo-block__title,

src/loading/demo/index.vue

@@ -50,7 +50,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-loading {
+  background: @white;
+
   .van-loading {
     display: inline-block;
     margin: 5px 0 5px 20px;

src/notice-bar/demo/index.vue

@@ -66,13 +66,17 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-notice-bar {
+  background: @white;
+
   .van-notice-bar:not(:first-of-type) {
-    margin-top: 5px;
+    margin-top: 4px;
   }
 
   .van-doc-demo-block__title {
-    padding-top: 25px;
+    padding-top: 24px;
   }
 }
 </style>

src/overlay/demo/index.vue

@@ -51,7 +51,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-overlay {
+  background: @white;
+
   .wrapper {
     display: flex;
     align-items: center;
@@ -62,7 +66,7 @@ export default {
   .block {
     width: 120px;
     height: 120px;
-    background-color: #fff;
+    background-color: @white;
   }
 }
 </style>

src/progress/demo/index.vue

@@ -43,7 +43,11 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-progress {
+  background: @white;
+
   .van-progress {
     margin: 20px;
 

src/radio/demo/index.vue

@@ -121,7 +121,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-radio {
+  background: @white;
+
   &-group {
     padding: 0 17px;
 

src/slider/demo/index.vue

@@ -112,6 +112,7 @@ export default {
 @import '../../style/var';
 
 .demo-slider {
+  background: @white;
   user-select: none;
 
   .van-slider {

src/switch/demo/index.vue

@@ -73,6 +73,8 @@ export default {
 @import '../../style/var';
 
 .demo-switch {
+  background: @white;
+
   .van-switch {
     margin: 0 @padding-md;
   }