🚸 usability: 优化红包组件样式

src/components/redPackets/index.less

@@ -87,6 +87,10 @@
 
 	}
 
+	.TextBlock {
+		margin-top: 20px;
+	}
+
 	.notice {
 		width: 170px;
 		margin-bottom: 2px;

src/components/redPackets/mobileComponent.jsx

@@ -1,5 +1,10 @@
 import './index.less';
+import { Placeholder } from 'zent';
 import moment from 'moment/moment';
+const widths = [
+  24, 100, 100, 100, 80, 100, 100, 100, 80, 100, 100, 100, 80, 100, 100, 100,
+  100
+];
 export default ({ data }) => {
   return (
     <div id='redPacketsViews' className='mobile'>
@@ -34,11 +39,21 @@ export default ({ data }) => {
                 alt=''
               />
             </p>
+            {data.instruction ? (
               <p>
                 1、在支付宝APP内打开销接，点击 [一键领取]完成领取支付宝立减金;
                 <br />
                 2、支付宝里立减金一日领取不可撤销、不可转让，注意不要将换券泄露给他人。
               </p>
+            ) : (
+              <Placeholder.TextBlock
+                className='TextBlock'
+                animate
+                widths={widths}
+                rows={5}
+                dashed={false}
+              />
+            )}
           </div>
           <div className='instruction-2'>
             <p className='center'>
@@ -48,11 +63,21 @@ export default ({ data }) => {
                 alt=''
               />
             </p>
+            {data.instruction ? (
               <p
                 className='scroll'
                 dangerouslySetInnerHTML={{
                   __html: data.instruction
                 }}></p>
+            ) : (
+              <Placeholder.TextBlock
+                className='TextBlock'
+                animate
+                widths={widths}
+                rows={13}
+                dashed={false}
+              />
+            )}
           </div>
         </div>
       </div>