Skip to content

W
wangjin-front-end
Commit 7809f04d authored by spc's avatar spc
Browse files
Options

1

parent e069b555
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 109 deletions
src/components/danma/danma.tsx 0 → 100644
View file @ 7809f04d
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
View file @ 7809f04d
......@@ -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
View file @ 7809f04d
......@@ -26,7 +26,7 @@
top: 14px;
position: absolute;
font-size: 20px;
color: #ffffff;
color: red;
}
}
......
src/components/danma/danmaShowView.jsx deleted 100644 → 0
View file @ e069b555
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
View file @ 7809f04d
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment