移动端图表展示页面

config/router.config.js

@@ -9,13 +9,12 @@ export default [
       },
       {
         path: '/bom',
-        redirect: '/home'
+        redirect: '/home',
       },
       {
         path: '/home',
         component: './Index',
         routes: [
-         
           {
             path: '/home',
             component: './List/List',
@@ -42,7 +41,11 @@ export default [
           },
         ],
       },
-   
+      {
+        path: '/mobile/detail/:projectId/:templateId/:versionId',
+        component: './Detail/Mobile',
+      },
+
       // {
       //   path: '/dd-login/:dingUserId',
       //   component: './DDLogin/index',

src/pages/Detail/Index.less

@@ -5,6 +5,7 @@
   font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
   vertical-align: middle;
 }
+.mobileSheetBox,
 .sheetBox {
   display: flex;
   .sheetItem {
@@ -22,6 +23,11 @@
     border: none;
   }
 }
+.mobileSheetBox {
+  iframe {
+    height: 100vh;
+  }
+}
 .top {
   display: flex;
   justify-content: space-between;
@@ -47,14 +53,14 @@
 .historyList {
   padding: 0 10px;
 }
-.curTitle  {
+.curTitle {
   margin-left: 20px;
- span {
-  color: #1890FF;
-  margin-right: 10px;
- }
+  span {
+    color: #1890ff;
+    margin-right: 10px;
+  }
 }
-.topF{
+.topF {
   margin: 20px;
 }
 .content {
@@ -62,4 +68,4 @@
   flex-direction: column;
   // justify-content: center;
   // align-items: center;
-}
+}

src/pages/Detail/Mobile.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './Index.less';
+import LuckySheet from './LuckySheet';
+
+function Mobile(props) {
+  const {
+    match: { params },
+  } = props;
+
+  const projectId = parseInt(params.projectId);
+  const templateId = parseInt(params.templateId);
+  const version = { id: parseInt(params.versionId), flow_id: true };
+
+  return (
+    <div className={styles.mobileSheetBox}>
+      <LuckySheet className={styles.sheet} version={version} templateId={templateId} />
+    </div>
+  );
+}
+
+export default Mobile;