bug

src/app.js

@@ -1,3 +1,24 @@
+(function (doc, win) {
+  var docEl = doc.documentElement,
+    resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
+    recalc = function () {
+      var clientWidth = docEl.clientWidth;
+      if (!clientWidth) return;
+      if (clientWidth < 1700) {
+        docEl.style.fontSize = '150px';
+      } else if ( 1700>=clientWidth>2000 ){
+        docEl.style.fontSize = '170px';
+      }else{
+        docEl.style.fontSize = '170px';
+        // docEl.style.fontSize = 100 * (clientWidth / 1400) + 'px';
+      }
+    };
+
+  if (!doc.addEventListener) return;
+  win.addEventListener(resizeEvt, recalc, false);
+  doc.addEventListener('DOMContentLoaded', recalc, false);
+})(document, window);
+
 export const dva = {
   config: {
     onError(e) {

src/pages/sample/h5/components/H5Card.jsx

@@ -12,7 +12,7 @@ const { Meta } = Card
 const H5Card = props => {
   const { h5Data } = props
 
-  const colerArr = ["#2db7f5","#87d068","#108ee9","magenta","red","volcano","orange","green","geekblue","purple"]
+  const colerArr = ["#2db7f5", "#87d068", "#108ee9", "magenta", "red", "volcano", "orange", "green", "geekblue", "purple"]
   const toEdit = () => {
     router.push({
       pathname: '/sample/h5/edit',
@@ -29,7 +29,7 @@ const H5Card = props => {
       okText: '确认',
       cancelText: '取消',
       onOk() {
-        request({ ...apis.sample.puth5, urlData: { id: h5Data.sampleId }}).then((data) => {
+        request({ ...apis.sample.puth5, urlData: { id: h5Data.sampleId } }).then((data) => {
           message.info('操作成功！')
           props.onChange()
         }).catch((err) => {
@@ -40,24 +40,35 @@ const H5Card = props => {
     });
   }
 
-    return (
-      <>
+  return (
+    <>
       <Card
         hoverable
-        style={{ width: 480,height: 450,marginTop: 50,position: "relative" }}
-        cover={<img height="335px" alt="example" onClick={toEdit} src={h5Data.coverImg} />}
+        style={{
+          minWidth: '240px',
+          marginRight: '0.1rem',
+          height: '2.1rem',
+          background: 'rgba(255, 255, 255, 1)',
+          boxShadow: '0px 0px 16px 2px rgba(0, 0, 0, 0.12)',
+          borderRadius: '12px',
+          marginBottom: '0.1rem',
+          position: 'relative',
+          padding: '0.1rem'
+        }}
+        // style={{ width: 480,height: 450,marginTop: 50,position: "relative" }}
+        cover={<img  width="100%" style={{height:'1.3rem'}} alt="example" onClick={toEdit} src={h5Data.coverImg} />}
         extra={<a onClick={deleteSample}>删除</a>}
         title={h5Data.status == 1 ? '已发布' : h5Data.status == 0 ? '未发布' : ''}
       >
         <Meta onClick={toEdit} title={h5Data.sampleName} />
-        <div style={{position: "absolute", bottom: "50px", right: "20px", margin: '20px 0'}}>
-          {(h5Data.tags || []).map((x,i) => {
+        <div style={{ position: "absolute", bottom: "50px", right: "20px", margin: '20px 0' }}>
+          {(h5Data.tags || []).map((x, i) => {
             return <Tag color={colerArr[i]}>{x}</Tag>
           })}
         </div>
       </Card>
     </>
-    )
-  }
- 
-  export default H5Card
+  )
+}
+
+export default H5Card

src/pages/sample/h5/edit.jsx

@@ -12,12 +12,12 @@ import moment from 'moment';
 
 const formItemLayout = {
   labelCol: {
-    xs: { span: 24 },
-    sm: { span: 2 },
+    xs: { span: 6 },
+    sm: { span: 6 },
   },
   wrapperCol: {
-    xs: { span: 24 },
-    sm: { span: 16 },
+    xs: { span: 18 },
+    sm: { span: 18 },
   },
 };