fix(drawer): [drawer] modify drawer demo of design (#2385)

Author: James-9696

examples/sites/demos/pc/app/drawer/confirm-event.vue

@@ -8,7 +8,7 @@
       @update:visible="visible = $event"
       @confirm="confirm"
     >
-      <div style="padding: 32px">内容区域</div>
+      <div>内容区域</div>
     </tiny-drawer>
   </div>
 </template>

examples/sites/demos/pc/app/drawer/dragable-composition-api.vue

@@ -39,6 +39,5 @@ const drag = ({ width, height }) => {
 <style scoped>
 .content {
   height: 300px;
-  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/drawer/dragable.vue

@@ -48,6 +48,5 @@ export default {
 <style scoped>
 .content {
   height: 300px;
-  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/drawer/events-composition-api.vue

@@ -10,7 +10,7 @@
       @close="onClose"
       @confirm="onConfirm"
     >
-      <div class="content">
+      <div>
         <span>内容区域</span>
       </div>
     </tiny-drawer>
@@ -37,9 +37,3 @@ const onConfirm = () => {
   Modal.message({ message: '确定事件', status: 'info' })
 }
 </script>
-
-<style scoped>
-.content {
-  padding: 20px 0;
-}
-</style>

examples/sites/demos/pc/app/drawer/events.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="demo-drawer">
     <tiny-button type="primary" @click="showDrawer"> 点击打开抽屉 </tiny-button>
-    <p>{{ visible }}</p>
     <tiny-drawer
       title="事件示例"
       :show-footer="true"
@@ -11,7 +10,7 @@
       @close="onClose"
       @confirm="onConfirm"
     >
-      <div class="content">
+      <div>
         <span>内容区域</span>
       </div>
     </tiny-drawer>
@@ -47,9 +46,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.content {
-  padding: 20px 0;
-}
-</style>

examples/sites/demos/pc/app/drawer/header-right-slot-composition-api.vue

@@ -7,7 +7,7 @@
           <span>自定义头部右侧</span>
         </div>
       </template>
-      <div style="padding: 32px">内容区域</div>
+      <div>内容区域</div>
     </tiny-drawer>
   </div>
 </template>

examples/sites/demos/pc/app/drawer/header-right-slot.vue

@@ -7,7 +7,7 @@
           <span>自定义头部右侧</span>
         </div>
       </template>
-      <div style="padding: 32px">内容区域</div>
+      <div>内容区域</div>
     </tiny-drawer>
   </div>
 </template>

examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue

@@ -26,7 +26,17 @@ function openDrawer() {
 
 <style scoped>
 .my-header {
-  padding: 0 32px;
-  border-bottom: 1px solid #ccc;
+  padding: 32px 32px 24px;
+}
+
+.my-header h3 {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1.7;
+}
+
+.my-header p {
+  font-size: 12px;
+  line-height: 1.5;
 }
 </style>

examples/sites/demos/pc/app/drawer/header-slot.vue

@@ -36,8 +36,7 @@ export default {
 
 <style scoped>
 .my-header {
-  padding: 0 32px;
-  border-bottom: 1px solid #ccc;
+  padding: 32px 32px 24px;
 }
 
 .my-header h3 {

examples/sites/demos/pc/app/drawer/mask-closable-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="openDrawer" type="primary" style="max-width: 200px">单击遮罩层不关闭抽屉</tiny-button>
     <tiny-drawer title="标题" :mask-closable="false" :visible="visible" @update:visible="visible = $event">
-      <div style="padding: 32px">单击遮罩层, 不关闭抽屉</div>
+      <div>单击遮罩层, 不关闭抽屉</div>
     </tiny-drawer>
   </div>
 </template>