活动海报分享样式

src/components/Cards/PosterCard.jsx

 import React, { useState, useEffect } from 'react';
-import { Card, Checkbox, Button,Upload } from 'antd';
+import { Card, Checkbox, Button, Upload } from 'antd';
 import apis from '../../services/apis';
 import request from '../../utils/request'
 import { uploaderProps } from '../../utils/upload';
+import head1 from '../../assets/head1.png';
+import head2 from '../../assets/head2.png';
+import head3 from '../../assets/head3.png';
+import link from '../../assets/link.png';
 
 const { Meta } = Card;
 
  * @returns
  */
 const PosterCard = (props) => {
-  const [ data, setData ] = useState([])
+  const [data, setData] = useState([])
   const [indexOneUrl, setIndexOneUrl] = useState('')
   const [indexTwoUrl, setIndexTwoUrl] = useState('')
   const [indexThreeUrl, setIndexThreeUrl] = useState('')
   let resultData = []
 
-  useEffect(() => {  
-  },[])
+  useEffect(() => {
+  }, [])
 
   const handleUploadIndexOneSucess = url => {
-    console.log(url,"第一张图上传回调");
+    console.log(url, "第一张图上传回调");
     setIndexOneUrl(url)
     resultData[0] = url
     resultData[1] = indexTwoUrl
   }
 
   const handleUploadIndexTwoSucess = url => {
-    console.log(url,"第二张图上传回调");
+    console.log(url, "第二张图上传回调");
     setIndexTwoUrl(url)
     resultData[0] = indexOneUrl
     resultData[1] = url
   }
 
   const handleUploadIndexThreeSucess = url => {
-    console.log(url,"第三张图上传回调");
+    console.log(url, "第三张图上传回调");
     setIndexThreeUrl(url)
     resultData[0] = indexOneUrl
     resultData[1] = indexTwoUrl
   }
 
   return (
-    <div>
 
     <div style={{ display: 'flex' }}>
-      <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
-        <div style={{ width: '375px', height: '700px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
-          <img style={{ width: '100%', height: '300px' }} src={indexOneUrl} alt="" />
-           
-          <div style={{ backgroundColor: '#f1f1f1', padding: '22px 30px', boxShadow: '0px 6px 12px -4px #dcdcdc', position: 'relative' }}>
-            <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>长按识别小程序码</p>
-            <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>进入<span style={{ margin: '0 5px', fontSize: '18px', color: '#333', fontWeight: '600' }}>置业V顾问</span>报名活动</p>
-            <img style={{ width: '80px', position: 'absolute', right: '30px', top: '10px' }} alt="" />
-          </div>
+
+      <div style={{ width: '420px', height: '940px', display: 'inline-block', marginTop: '30px' }}>
+        <div style={{ width: '375px', height: '780px', backgroundColor: '#CFCFCF', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
+          <img style={{ width: '100%', height: '100%' }} src={indexOneUrl} alt="" />
+          <img src={head1} style={{ width: '66px', height: '66px', position: 'absolute', left: '20px', bottom: '38px' }} alt="" />
+          <p style={{ margin: '0', fontSize: '18px', position: 'absolute', left: '96px', bottom: '79px', color: '#333' }}>小五子</p>
+          <p style={{ margin: '0', fontSize: '15px', position: 'absolute', left: '96px', bottom: '58px', color: '#333' }}>175 1256 0225</p>
+          <p style={{ margin: '0', fontSize: '14px', position: 'absolute', left: '96px', bottom: '39px', color: '#666' }}>邀请您参与活动</p>
+          <img src={link} style={{ margin: '0', width: '80px', height: '80px', backgroundColor: '#fff', padding: '4px', borderRadius: '6px', position: 'absolute', right: '30px', bottom: '45px' }} alt="" />
+          <p style={{ margin: '0', fontSize: '13px', position: 'absolute', right: '30px', bottom: '20px', color: '#666' }}>长按识别更多</p>
+
         </div>
         <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>生成海报分享给朋友</p>
-        <Upload showUploadList={false}
-        {...uploaderProps}
-        onSuccess={handleUploadIndexOneSucess}>
-          <Button>
-            上传图片
+        <p style={{ textAlign: 'center' }}>
+          <Upload showUploadList={false}
+            {...uploaderProps}
+            onSuccess={handleUploadIndexOneSucess}>
+            <Button>
+              上传图片
           </Button>
-        </Upload>
+          </Upload>
+        </p>
       </div>
-    </div>
 
-    <div style={{ display: 'flex' }}>
-      <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
-        <div style={{ width: '375px', height: '700px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
-          <img style={{ width: '100%', height: '300px' }} src={indexTwoUrl} alt="" />
-           
-          <div style={{ backgroundColor: '#f1f1f1', padding: '22px 30px', boxShadow: '0px 6px 12px -4px #dcdcdc', position: 'relative' }}>
-            <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>长按识别小程序码</p>
-            <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>进入<span style={{ margin: '0 5px', fontSize: '18px', color: '#333', fontWeight: '600' }}>置业V顾问</span>报名活动</p>
-            <img style={{ width: '80px', position: 'absolute', right: '30px', top: '10px' }} alt="" />
+      <div style={{ width: '420px', height: '940px', display: 'inline-block', marginTop: '30px' }}>
+        <div style={{ width: '375px', height: '780px', backgroundColor: '#CFCFCF', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
+          <img style={{ width: '100%', height: '100%' }} src={indexTwoUrl} alt="" />
+          <img src={head1} style={{ width: '66px', height: '66px', position: 'absolute', left: '20px', bottom: '122px' }} alt="" />
+          <p style={{ margin: '0', fontSize: '18px', position: 'absolute', left: '96px', bottom: '163px', color: '#333' }}>小五子</p>
+          <p style={{ margin: '0', fontSize: '15px', position: 'absolute', left: '96px', bottom: '142px', color: '#333' }}>175 1256 0225</p>
+          <p style={{ margin: '0', fontSize: '14px', position: 'absolute', left: '96px', bottom: '121px', color: '#666' }}>邀请您参与活动</p>
+          <div style={{ margin: '0', width: '100%', height: '112px', backgroundColor: '#fff', position: 'absolute', left: '0px', bottom: '0.5px', }}>
+            <p style={{ margin: '0', fontSize: '16px', position: 'absolute', left: '30px', bottom: '58px', color: '#666' }}>长按识别小程序码</p>
+            <p style={{ margin: '0', fontSize: '16px', position: 'absolute', left: '30px', bottom: '31px', color: '#666' }}>进入<span style={{ margin: '0 10px', fontSize: '17px', color: '#000' }}>橙蕉</span>查看详情</p>
+            <img src={link} style={{ margin: '0', width: '100px', height: '100px', position: 'absolute', right: '20px', bottom: '6px' }} alt="" />
           </div>
         </div>
         <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>生成海报分享给朋友</p>
-        <Upload showUploadList={false}
-        {...uploaderProps}
-        onSuccess={handleUploadIndexTwoSucess}>
-          <Button>
-            上传图片
+        <p style={{ textAlign: 'center' }}>
+          <Upload showUploadList={false}
+            {...uploaderProps}
+            onSuccess={handleUploadIndexTwoSucess}>
+            <Button>
+              上传图片
           </Button>
-        </Upload>
+          </Upload></p>
       </div>
-    </div>
-    
-    <div style={{ display: 'flex' }}>
-      <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
-        <div style={{ width: '375px', height: '700px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
-          <img style={{ width: '100%', height: '300px' }} src={indexThreeUrl} alt="" />
-           
-          <div style={{ backgroundColor: '#f1f1f1', padding: '22px 30px', boxShadow: '0px 6px 12px -4px #dcdcdc', position: 'relative' }}>
-            <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>长按识别小程序码</p>
-            <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>进入<span style={{ margin: '0 5px', fontSize: '18px', color: '#333', fontWeight: '600' }}>置业V顾问</span>报名活动</p>
-            <img style={{ width: '80px', position: 'absolute', right: '30px', top: '10px' }} alt="" />
-          </div>
+
+      <div style={{ width: '420px', height: '940px', display: 'inline-block', marginTop: '30px' }}>
+        <div style={{ width: '375px', height: '780px', backgroundColor: '#CFCFCF', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
+          <img style={{ width: '100%', height: '100%' }} src={indexThreeUrl} alt="" />
+          <img src={head1} style={{ width: '66px', height: '66px', position: 'absolute', left: '20px', bottom: '142px' }} alt="" />
+          <p style={{ margin: '0', fontSize: '18px', position: 'absolute', left: '96px', bottom: '183px', color: '#333' }}>小五子</p>
+          <p style={{ margin: '0', fontSize: '15px', position: 'absolute', left: '96px', bottom: '162px', color: '#333' }}>175 1256 0225</p>
+          <p style={{ margin: '0', fontSize: '14px', position: 'absolute', left: '96px', bottom: '141px', color: '#666' }}>邀请您参与活动</p>
+          <div style={{ margin: '0', width: '335px', borderRadius: '6px', height: '112px', backgroundColor: '#fff', position: 'absolute', left: '20px', bottom: '20px', }}></div>
+          <p style={{ margin: '0', fontSize: '16px', position: 'absolute', left: '50px', bottom: '78px', color: '#666' }}>长按识别小程序码</p>
+          <p style={{ margin: '0', fontSize: '16px', position: 'absolute', left: '50px', bottom: '51px', color: '#666' }}>进入<span style={{ margin: '0 10px', fontSize: '17px', color: '#000' }}>橙蕉</span>查看详情</p>
+          <img src={link} style={{ margin: '0', width: '100px', height: '100px', position: 'absolute', right: '50px', bottom: '26px' }} alt="" />
         </div>
         <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>生成海报分享给朋友</p>
-        <Upload showUploadList={false}
-        {...uploaderProps}
-        onSuccess={handleUploadIndexThreeSucess}>
-          <Button>
-            上传图片
+        <p style={{ textAlign: 'center' }}>
+          <Upload showUploadList={false}
+            {...uploaderProps}
+            onSuccess={handleUploadIndexThreeSucess}>
+            <Button>
+              上传图片
           </Button>
-        </Upload>
+          </Upload>
+        </p>
       </div>
     </div>
-  </div>
   )
 }
 export default PosterCard