docs(site): Optimization description block (#1041)

examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js

@@ -212,12 +212,12 @@ export default {
       'demoId': 'upload-events',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN': `<div class="tip custom-block"><p class="custom-block-title"> <code>preview</code> 监听文件点击事件；<br/> <code>remove</code> 监听文件移除事件；<br/> <code>error</code> 监听文件上传失败事件；<br/>
+        'zh-CN': `<div class="tip custom-block"><code>preview</code> 监听文件点击事件；<br/> <code>remove</code> 监听文件移除事件；<br/> <code>error</code> 监听文件上传失败事件；<br/>
           <code>exceed</code> 监听文件超出个数限制事件；<br/> <code>progress</code> 监听文件上传过程事件；<br/> <code>change</code> 监听文件改变事件（文件改变涵盖文件添加、上传成功和上传失败）；<br/>
-          <code>success</code> 监听文件上传成功事件；<br/> <code>hash-progress</code> 监听文件上传生成hash值事件。</p></div>`,
+          <code>success</code> 监听文件上传成功事件；<br/> <code>hash-progress</code> 监听文件上传生成hash值事件。</div>`,
-        'en-US': `<div class="tip custom-block"><p class="custom-block-title"> <code>preview</code> Listen for file click events; <br /> <code>remove</code> Listen for file removal events; <br /> <code>error</code> Listen for file upload failure events;<br />
+        'en-US': `<div class="tip custom-block"><code>preview</code> Listen for file click events; <br /> <code>remove</code> Listen for file removal events; <br /> <code>error</code> Listen for file upload failure events;<br />
         <code>exceeded</code> Listen for events where the number of files exceeds the limit; <br/> <code>progress</code> Listen for file upload process events;<br/> <code>change</code> Listen for file change events (file changes include file addition, successful upload, and failed upload);<br />
-        <code>success</code> Listen for file upload success events;<br/> <code>hash-progress</code> Listen for file upload to generate hash value events.</p></div>`
+        <code>success</code> Listen for file upload success events;<br/> <code>hash-progress</code> Listen for file upload to generate hash value events.</div>`
       },
       'codeFiles': ['upload-events.vue']
     },

examples/sites/demos/pc/app/milestone/webdoc/milestone.js

@@ -62,26 +62,28 @@ export default {
       'demoId': 'data-field-mapping',
       'name': { 'zh-CN': '数据字段映射', 'en-US': 'Data Field Mapping' },
       'desc': {
-        'zh-CN': `自定义 <code>data</code> 属性的键名和键值：<br/>
+        'zh-CN': `
           <div class="tip custom-block"><p class="custom-block-title">
-          通过 <code>completed-field</code> 设置完成状态对应的键值，默认为 <code>completed</code> ；<br/>
+          自定义 <code>data</code> 属性的键名和键值：<br/> </p>
+          <code>completed-field</code> 设置完成状态对应的键值，默认为 <code>completed</code> ；<br/>
           <code>flag-field</code> 设置旗子信息数组对应的键名，默认为 <code>flags</code> ；<br/>
           <code>flag-content-field</code> 设置旗子描述对应的键名，默认为 <code>content</code> ；<br/>
           <code>flag-name-field</code> 设置旗子标题对应的键名，默认为 <code>name</code> ；<br/>
           <code>flag-status-field</code> 设置旗子状态对应的键名，默认为 <code>status</code> ；<br/>
           <code>name-field</code> 设置节点名称对应的键名，默认为 <code>name</code> ；<br/>
           <code>status-field</code> 设置节点状态对应的键名，默认为 <code>status</code> ；<br/>
-          <code>time-field</code> 设置节点时间对应的键名，默认为 <code>time</code> 。</p></div>`,
+          <code>time-field</code> 设置节点时间对应的键名，默认为 <code>time</code> 。</div>`,
-        'en-US': `Customize the key names and values of <code>data</code> attributes:<br/>
+        'en-US': `
           <div class="tip custom-block"><p class="custom-block-title">
-          Set the key value corresponding to the completion status through <code>completed-field</code> , which defaults to <code>completed</code> ;<br/>
+          Customize the key names and values of <code>data</code> attributes:<br/> </p>
+          <code>completed-field</code> Set the key value corresponding to the completion status, which defaults to <code>completed</code> ;<br/>
           <code>flag-field</code> Set the key name corresponding to the flag information array, which defaults to <code>flags</code> ;<br/>
           <code>flag-content-field</code> Set the key name corresponding to the flag description, which defaults to <code>content</code> ;<br/>
           <code>flag-name-field</code> Set the key name corresponding to the flag subtitle, which defaults to <code>name</code> ;<br/>
           <code>flag-status-field</code> Set the key name corresponding to the flag state, which defaults to <code>status</code> ;<br/>
           <code>name-field</code> Set the key name corresponding to the node name, which defaults to <code>name</code> ;<br/>
           <code>status-field</code> Set the key name corresponding to the node state, which defaults to <code>status</code> ;<br/>
-          <code>time-field</code> Set the key name corresponding to the node time, which defaults to <code>time</code> .</p> </div>`
+          <code>time-field</code> Set the key name corresponding to the node time, which defaults to <code>time</code> . </div>`
       },
       'codeFiles': ['data-field-mapping.vue']
     },

examples/sites/demos/pc/app/tabs/webdoc/tabs.js

@@ -155,11 +155,11 @@ export default {
       'demoId': 'tabs-draggable',
       'name': { 'zh-CN': '拖拽', 'en-US': 'Drag' },
       'desc': {
-        'zh-CN': `<div class="tip custom-block"><p class="custom-block-title"> 通过 <code>drop-config</code> 设置 <code>Sortable</code> 排序插件；<br/>
+        'zh-CN': `<div class="tip custom-block"><p><code>drop-config</code> 设置 <code>Sortable</code> 排序插件；<br/>
           <code>tab-drag-start</code> 监听拖拽开始事件；<br/>
           <code>tab-drag-over</code> 监听拖拽中事件；<br/>
           <code>tab-drag-end</code> 监听拖拽结束事件，以此改变页签项顺序。</p></div>`,
-        'en-US': `<div class="tip custom-block"><p class="custom-block-title">Set the <code>Sortable</code> sorting plugin through <code>drop configuration</code> <br />
+        'en-US': `<div class="tip custom-block"><p> <code>drop configuration</code> Set the <code>Sortable</code> sorting plugin<br />
           <code>tab-drag-start</code> Listen for drag start events<br />
           <code>tab-drag-over</code> Listen for dragging events<br />
           <code>tab-drag-end</code> Listen for drag end events to change the order of tags.</p></div>`

examples/sites/src/views/components/components.vue

@@ -547,21 +547,23 @@ table.api-table {
 .custom-block.tip {
   background-color: #f3f5f7;
   border-color: #42b983;
-  border-radius: 0;
+  border-radius: 0.3rem;
-  padding: 1.5rem;
+  padding: 0.5rem 1rem;
-  border-left-width: 0.5rem;
+  border-left-width: 0.3rem;
   border-left-style: solid;
   margin: 1rem 0;
   font-size: 14px;
   color: #5e6d82;
-  line-height: 1.5;
+  line-height: 2;
+
   .custom-block-title {
     font-weight: 600;
+    margin-bottom: 0.5rem;
   }
+
   p {
-    margin: 8px 0;
+    margin: 0;
-    font-size: 16px;
+    font-size: 14px;
-    line-height: 1.5;
   }
   ul {
     li {