1

src/components/danma/danma.tsx

+import React from 'react';
+import "./danma.less";
+import DanmaCtrl from './danmaCtrl'
+export const Danma = (data) => {
+  const Danma = DanmaCtrl(data.DanmaItem, data.danmaData, data.speed, data.width, data.height)
+  return (
+    <>
+      <Danma />
+    </>
+  )
+}
\ No newline at end of file

src/components/danma/danmaItem.jsx

@@ -18,11 +18,11 @@ class DanmaItem extends Component {
         return (
             <div className="dan_mu_2 " style={style}>
                 <div className="gun_dong_xin_xi ">
-                    <img className="yuan_jiao_ju_xing_2389 " src={RES_PATH + '引导1/圆角矩形 2389.png'} />
+                    <img className="yuan_jiao_ju_xing_2389 " src={"//yun.duiba.com.cn/spark/assets/c471a10228088d7db7ac6ecc4cbf513cf5f4ac92.png"} />
                     <span className="danmaText ">{danmaText}</span>
                 </div>
                 <div className="hao_you_tou_xiang ">
-                    <img className="tuo_yuan_2076_kao_bei " src={RES_PATH + '引导1/椭圆 2076 拷贝.png'} />
+                    <img className="tuo_yuan_2076_kao_bei " src={"//yun.duiba.com.cn/spark/assets/dae05e04aaa462ff72dd9c143823e1df68c08e65.png"} />
                     <img
                         className="danmaAvatar "
                         src={danmaAvatar}

src/components/danma/danmaItem.less

@@ -26,7 +26,7 @@
             top: 14px;
             position: absolute;
             font-size: 20px;
-            color: #ffffff;
+            color: red;
         }
     }
 

src/components/danma/danmaShowView.jsx

-import React, { useEffect, useState } from 'react'
-import DanmaCtrl from './danmaCtrl'
-import DanmaItem from './danmaItem'
-import './danmaShowView.less'
-
-
-const DanmaShowView = () => {
-
-    let text = `
-
-    let danmaAvatars = ["//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
-    , "//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/1020.dc6994ddeb5726f99a5ab9692f1a339ecd46a99b.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/1009.3307be2f8053aad97259c34062934185a200eac4.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/226.24bc5cff2e5ce9786f3f91822073a8e07d8e72a2.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/167.86ddf7a8a38a1f3d65b1eaea8b366ea865455d5f.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/160.4e523285ae71ca3102ebf5abcec94c768a03dee3.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/152.ad66124d7a5bb408aab23dc4df6b3a48d5cc3e3d.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/151.c780044a45f4bb54886abc0c6ced752c646c9258.jpg"
-    , "//yun.duiba.com.cn/polaris/93.e03b23d831096c181f5a216e851890fe9720a529.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/74.583f9804214c592abbdb20d9bc22699016a14111.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/13.74093d5f56cfd4407cb1364a0b39420c1cf6cd49.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/32.886b712236952e68b52bb8c9ed489aa71e4696eb.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/35.556e40e6e2c1f47e0907b35faef3470990565778.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/46.acb5c7e7abd8b8f476bd3e495b253412e537578a.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/51.21cf0c7f2784616b92470559a2b259668bb35465.jpg"
-    , "//yun.duiba.com.cn/polaris/91.e7db79153cab5dfeb0ed05c5ac0efad7ed2c0f62.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/110.6f9d23a83f44b22bce4b580380c65e65e5e69d88.jpg"
-    ,
-    "//yun.duiba.com.cn/polaris/296.cbff50bfde5f4d61461f486f2a37ae8aa495eed9.jpg"
-    , "//yun.duiba.com.cn/polaris/248.d535ab0bb6ed1bad5f863c161ffe7e53adcf129c.jpg"
-    , "//yun.duiba.com.cn/polaris/389.81c5dc97d4f5f7c409a7463cc1d64c15395e9ccf.jpg"
-    , "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
-    , "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
-  ]
-  
-  let getPhoneNum = () => {
-    let phoneHead = [181, 156, 131, 176, 138, 135]
-    let head = phoneHead[Math.floor(Math.random() * phoneHead.length)]
-    let bottomNum = "" + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10))
-  
-    return head + "****" + bottomNum
-  }
-  let getPrize = () => {
-    let prizes = ["100元立减金", "电影票X4", "爱国者耳机", "5元立减金", "100元立减金"]
-    return prizes[(Math.floor(Math.random() * prizes.length))]
-  }
-  
-  
-  let danmaData = [{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
-  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
-  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
-  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
-  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
-  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
-  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
-  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] }]
-  
-   return DanmaCtrl(DanmaItem, danmaData, [1, 3, 2, 2, 4], 200, 26)
-  `
-
-    let Danma
-
-      Danma = new Function(text)
-      console.log("Danma",Danma())
-
-    return (
-        <>
-            <textarea className="codeText" name="code" >{text}</textarea>
-            <div className="view">
-                {console.log(Danma)}
-                {Danma && <Danma></Danma>}
-            </div>
-        </>
-    )
-}
-export default DanmaShowView
\ No newline at end of file

src/stories/danma..stories.tsx

 import React from 'react';
-import { TestSpan } from "../components/testSpan/testSpan";
+import { Danma } from "../components/danma/danma";
+import DanmaItem from '../components/danma/danmaItem';
+
 export default {
-  component: TestSpan,
-  title: 'Components/TestSpan',
+  component: Danma,
+  title: 'Components/Danma',
 };
+let danmaAvatars = ["//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
+  , "//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/1020.dc6994ddeb5726f99a5ab9692f1a339ecd46a99b.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/1009.3307be2f8053aad97259c34062934185a200eac4.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/226.24bc5cff2e5ce9786f3f91822073a8e07d8e72a2.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/167.86ddf7a8a38a1f3d65b1eaea8b366ea865455d5f.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/160.4e523285ae71ca3102ebf5abcec94c768a03dee3.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/152.ad66124d7a5bb408aab23dc4df6b3a48d5cc3e3d.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/151.c780044a45f4bb54886abc0c6ced752c646c9258.jpg"
+  , "//yun.duiba.com.cn/polaris/93.e03b23d831096c181f5a216e851890fe9720a529.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/74.583f9804214c592abbdb20d9bc22699016a14111.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/13.74093d5f56cfd4407cb1364a0b39420c1cf6cd49.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/32.886b712236952e68b52bb8c9ed489aa71e4696eb.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/35.556e40e6e2c1f47e0907b35faef3470990565778.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/46.acb5c7e7abd8b8f476bd3e495b253412e537578a.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/51.21cf0c7f2784616b92470559a2b259668bb35465.jpg"
+  , "//yun.duiba.com.cn/polaris/91.e7db79153cab5dfeb0ed05c5ac0efad7ed2c0f62.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/110.6f9d23a83f44b22bce4b580380c65e65e5e69d88.jpg"
+  ,
+  "//yun.duiba.com.cn/polaris/296.cbff50bfde5f4d61461f486f2a37ae8aa495eed9.jpg"
+  , "//yun.duiba.com.cn/polaris/248.d535ab0bb6ed1bad5f863c161ffe7e53adcf129c.jpg"
+  , "//yun.duiba.com.cn/polaris/389.81c5dc97d4f5f7c409a7463cc1d64c15395e9ccf.jpg"
+  , "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
+  , "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
+]
+
+let getPhoneNum = () => {
+  let phoneHead = [181, 156, 131, 176, 138, 135]
+  let head = phoneHead[Math.floor(Math.random() * phoneHead.length)]
+  let bottomNum = "" + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10))
+
+  return head + "****" + bottomNum
+}
+let getPrize = () => {
+  let prizes = ["100元立减金", "电影票X4", "爱国者耳机", "5元立减金", "100元立减金"]
+  return prizes[(Math.floor(Math.random() * prizes.length))]
+}
+
 
-//👇 We create a “template” of how args map to rendering
-const Template = (args) => <TestSpan {...args} />;
+let danmaData = [{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] }]
+
+let speed = [1, 3, 2, 1, 4]
+let width = 400
+let height = 60
+
+//@ts-ignore
+const Template = () => <Danma DanmaItem={DanmaItem} danmaData={danmaData} speed={speed} width={width} height={height} />;
 
-//👇 Each story then reuses that template
 export const Primary = Template.bind({});
 
 Primary.args = {
   primary: false,
-  label: 'TestSpan31',
+  label: 'Danma',
 };
-export const Default = Template.bind({});
-
-Default.args = {
-  primary: false,
-  label: 'TestSpan-Default2',
-};
\ No newline at end of file