Skip to content

P
PingAnBank-demo
Commit 241c4592 authored by 吴志俊's avatar 吴志俊
Browse files
Options

add svga

parent 599a3d32
Show whitespace changes
Inline Side-by-side
Showing with 336 additions and 225 deletions
sparkrc.js
View file @ 241c4592
...@@ -4,5 +4,5 @@ module.exports = { ...@@ -4,5 +4,5 @@ module.exports = {
TEMP_DIR: "./.temp", TEMP_DIR: "./.temp",
ENTRY: "src/app.jsx", ENTRY: "src/app.jsx",
TEMPLATE: "./public/index.html", TEMPLATE: "./public/index.html",
MOCK_STATUS: true MOCK_STATUS: false
}; };
src/SVGA/index.js
View file @ 241c4592
...@@ -16,14 +16,8 @@ const svgaMap = new Map() ...@@ -16,14 +16,8 @@ const svgaMap = new Map()
export const loadSVGA = (name) => { export const loadSVGA = (name) => {
if (!svgaMap[name]) { if (!svgaMap[name]) {
svgaMap[name] = new Promise((resolve, reject) => { svgaMap[name] = new Promise((resolve, reject) => {
console.log(svga[name]); // console.log(svga[name]);
// svgaParser.load(svga[name], (videoItem) => { svgaParser.load(svga[name], (videoItem) => {
// svgaMap[name] = videoItem
// resolve(videoItem)
// }, (err) => {
// reject(err)
// })
svgaParser.load('./svga/panda1.svga', (videoItem) => {
svgaMap[name] = videoItem svgaMap[name] = videoItem
resolve(videoItem) resolve(videoItem)
}, (err) => { }, (err) => {
......
src/SVGA/source.js
View file @ 241c4592
const path='http://localhost:8088/'
export const svga = { export const svga = {
// "panda1":`${path}svga/panda1.svga`,
"panda1":`./svga/panda1.svga`, "panda1":`./svga/panda1.svga`,
// "panda2":'panda2.svga', "panda2":'./svga/panda2.svga',
// "faguang":'https://yun.duiba.com.cn/spark/assets/1c66c49ab93a93c74e243a2e9b39c0f0b707db20.svga', "faguang":'./svga/shine.svga',
// "jindou":'https://yun.duiba.com.cn/spark/assets/6922315371e552ebc17c984f76a5a842184ef64f.svga', "light":'./svga/light.svga',
// "kuangche":'https://yun.duiba.com.cn/spark/assets/4f86cf37d5db980895726bc01cdb0f74214479c3.svga', "jindou":'./svga/bubble.svga',
"car":'./svga/car.svga',
// "panda1":'https://yun.duiba.com.cn/spark/assets/21886b0b9cf419b75ae24602d8b14af7e0053a0e.svga', // "panda1":'https://yun.duiba.com.cn/spark/assets/21886b0b9cf419b75ae24602d8b14af7e0053a0e.svga',
// "panda2":'https://yun.duiba.com.cn/spark/assets/20c1a5c1ff25bb82fb071947f8a8e3564c6e6df7.svga', // "panda2":'https://yun.duiba.com.cn/spark/assets/20c1a5c1ff25bb82fb071947f8a8e3564c6e6df7.svga',
......
src/app.jsx
View file @ 241c4592
...@@ -104,24 +104,12 @@ class App extends Component { ...@@ -104,24 +104,12 @@ class App extends Component {
render () { render () {
return ( return (
<div> <div>
{/* <Profile srcs={[
this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,
this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,
this.state.resList['0b0d3caa-d1ff-409d-a409-08bff66418a0'].url,
this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,
this.state.resList['0b0d3caa-d1ff-409d-a409-08bff66418a0'].url,
]}
></Profile>
<Profile srcs={[this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url]} hasText='true'></Profile>
<Profile srcs={[this.state.resList['dafd85f3-e303-4fd6-aa34-067c09c3f72e'].url]} hasText='true'></Profile> */}
{ this.switcher(this.state.current)} { this.switcher(this.state.current)}
{ {this.state.modalState && (
this.state.modalState && (
<section className="modal-bg"> <section className="modal-bg">
{this.getModal(this.state.modalState)} {this.getModal(this.state.modalState)}
</section> </section>
) )}
}
</div > </div >
); );
} }
......
src/components/profile/profile.jsx
View file @ 241c4592
...@@ -19,22 +19,21 @@ class Profile extends Component { ...@@ -19,22 +19,21 @@ class Profile extends Component {
); );
} }
getRes=()=>{ getRes = () => {
let array = [] let array = []
for (let i = 1; i < Math.min(this.props.srcs.length,4); i++) { for (let i = 1; i < Math.min(this.props.srcs.length, 4); i++) {
const e = this.props.srcs[i] const e = this.props.srcs[i]
array.push(this.pic(e,1,(i-1)*25+50)) array.push(this.pic(e, 1, (i - 1) * 25 + 50))
} }
return array return array
} }
pic = (src, width = 2, left) => { pic = (src, width = 2, left) => {
return (<div className={width == 1 ? 'sub' : 'main'} key={src.substr(0, 5)} style={{ return (<div className={width == 1 ? 'sub' : 'main'} key={src.substr(0, 8) + left} style={{
border: `${width}px solid white`, border: `${width}px solid white`,
backgroundImage: `url(${src})`, backgroundImage: `url(${src})`,
left:`${left}%`, left: `${left}%`,
}} > }} ></div>)
</div>)
} }
} }
export default Profile; export default Profile;
\ No newline at end of file
src/components/profile/profile.less
View file @ 241c4592
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
.main { .main {
width: 88px; width: 88px;
height: 88px; height: 88px;
border-radius: 44px; // border-radius: 44px;
border-radius: 50%;
background-size: 100% 100%; background-size: 100% 100%;
} }
.sub { .sub {
......
src/pages/dig/dig.jsx
View file @ 241c4592
...@@ -8,6 +8,7 @@ import { getModalHoc } from "spark-design"; ...@@ -8,6 +8,7 @@ import { getModalHoc } from "spark-design";
import gain from "../../components/Comwa_dou_jie_suan_ye/Comwa_dou_jie_suan_ye.jsx"; import gain from "../../components/Comwa_dou_jie_suan_ye/Comwa_dou_jie_suan_ye.jsx";
const GainModal = getModalHoc(gain); const GainModal = getModalHoc(gain);
import { getSVGA } from '../../SVGA/index.js'; import { getSVGA } from '../../SVGA/index.js';
import Profile from '../../components/profile/profile.jsx'
import './dig.less'; import './dig.less';
...@@ -17,19 +18,12 @@ class Dig extends Component { ...@@ -17,19 +18,12 @@ class Dig extends Component {
this.state = { this.state = {
resList: resList, resList: resList,
modal: false, modal: false,
// pandaAni1 :'',
// pandaAni2 : '',
// pandaAni3 : '',
// kuangcheAni : '',
// faguangAni :'',
// jindouAni : '',
}; };
this.time = '99:99' this.time = '99:99'
this.data = [123,213,312] this.data = [123, 213, 312]
} }
componentDidMount(){ componentDidMount () {
this.playSvga() this.playSvga()
} }
...@@ -40,14 +34,14 @@ class Dig extends Component { ...@@ -40,14 +34,14 @@ class Dig extends Component {
<img className="bg " src={this.state.resList['fdb33f6c-95dd-4319-a8b4-92681b6d5a98'].url} /> <img className="bg " src={this.state.resList['fdb33f6c-95dd-4319-a8b4-92681b6d5a98'].url} />
<img className="fw " src={this.state.resList['56976260-fcc4-49c4-b4d2-ed9833b8b128'].url} /> <img className="fw " src={this.state.resList['56976260-fcc4-49c4-b4d2-ed9833b8b128'].url} />
<img className="earth " src={this.state.resList['536c1bda-87f3-4559-a649-1198e1cf4978'].url} /> <img className="earth " src={this.state.resList['536c1bda-87f3-4559-a649-1198e1cf4978'].url} />
<img className="car" src={this.state.resList['4999062e-817a-493d-bcf3-0e63a31f5c3a'].url} /> {/* <img className="car" src={this.state.resList['4999062e-817a-493d-bcf3-0e63a31f5c3a'].url} />
<img className="light" src={this.state.resList['6cd37293-1eca-47c6-8e98-45fdeca4dacf'].url} /> <img className="light" src={this.state.resList['6cd37293-1eca-47c6-8e98-45fdeca4dacf'].url} /> */}
<div className="kuangche"></div>
<img className="carMark" src={this.state.resList['8616d3e7-89cc-47c6-96f7-67aa75e04c93'].url} /> <img className="carMark" src={this.state.resList['8616d3e7-89cc-47c6-96f7-67aa75e04c93'].url} />
<img className="carMark" src={this.state.resList['f09b9a4d-17f7-457e-839e-f2dc5ce46198'].url} /> <img className="carMark" src={this.state.resList['f09b9a4d-17f7-457e-839e-f2dc5ce46198'].url} />
<img className="timer" src={this.state.resList['95cd1f99-4ed2-4b57-9c31-f061018afa7e'].url} onClick={this.gain} /> <img className="timer" src={this.state.resList['95cd1f99-4ed2-4b57-9c31-f061018afa7e'].url} onClick={this.gain} />
<span className="time">{this.time}</span> <span className="time">{this.time}</span>
<img className="stone " src={this.state.resList['1142ca7b-6920-47f1-b4a4-30ae85db147c'].url} /> <img className="stone " src={this.state.resList['1142ca7b-6920-47f1-b4a4-30ae85db147c'].url} />
<img className="cactus " src={this.state.resList['17b6ba20-9de4-44a5-a642-01bb306b279d'].url} />
<img className="cloud " src={this.state.resList['ba1d0dcd-a87e-4cc4-8bed-43b330f913cf'].url} /> <img className="cloud " src={this.state.resList['ba1d0dcd-a87e-4cc4-8bed-43b330f913cf'].url} />
<div className="btnShell" onClick={() => { console.log(1); }}> <div className="btnShell" onClick={() => { console.log(1); }}>
<img className="btn " src={this.state.resList['11b74972-220a-4d70-a46d-12ce437cdb4e'].url} /> <img className="btn " src={this.state.resList['11b74972-220a-4d70-a46d-12ce437cdb4e'].url} />
...@@ -62,47 +56,55 @@ class Dig extends Component { ...@@ -62,47 +56,55 @@ class Dig extends Component {
</div> </div>
<div className="speed" onClick={() => { console.log(1); }}> <div className="speed" onClick={() => { console.log(1); }}>
<img className="speedUp" src={this.state.resList['05686032-6679-4978-aeda-af5583cc83c9'].url} /> <img className="speedUp" src={this.state.resList['05686032-6679-4978-aeda-af5583cc83c9'].url} />
<div className="light_ speedUp"></div>
</div> </div>
<img className="draftTime" src={this.state.resList['f0fd2033-9859-4488-8604-c54969cba789'].url} /> <img className="draftTime" src={this.state.resList['f0fd2033-9859-4488-8604-c54969cba789'].url} />
<div className="per" dangerouslySetInnerHTML={{__html:`每分钟<br/>挖${this.time.substr(0,2)}颗豆`}}></div> <div className="per" dangerouslySetInnerHTML={{ __html: `每分钟<br/>挖${this.time.substr(0, 2)}颗豆` }}></div>
<img className="circle" src={this.state.resList['99c10125-0d70-4eed-8004-5432a53b78bd'].url} /> {/* <img className="circle" src={this.state.resList['99c10125-0d70-4eed-8004-5432a53b78bd'].url} /> */}
<div className="draft"> {/* <div className="draft">
<img className="draft_" src={this.state.resList['decaa54b-b5c1-4ce7-9f42-07587f7cf04e'].url} /> <img className="draft_" src={this.state.resList['decaa54b-b5c1-4ce7-9f42-07587f7cf04e'].url} />
</div> */}
<img className="treasure" src={this.state.resList['c88aabd5-b68e-4456-b85b-5792db0eaadf'].url} />
<div className="panda0"></div>
<div className="panda1"></div>
<div className="panda2"></div>
<div className="faguang"></div>
<div className="jindou"></div>
<img className="cactus " src={this.state.resList['17b6ba20-9de4-44a5-a642-01bb306b279d'].url} />
<div className="profile">
<Profile className="main" srcs={[
this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,
this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,
this.state.resList['0b0d3caa-d1ff-409d-a409-08bff66418a0'].url,
this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,
this.state.resList['0b0d3caa-d1ff-409d-a409-08bff66418a0'].url,
]} hasText='true'
></Profile>
<Profile className="sub" srcs={[this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url]} hasText='true'></Profile>
<Profile className="thirdy" srcs={[this.state.resList['dafd85f3-e303-4fd6-aa34-067c09c3f72e'].url]} hasText='true'></Profile>
</div> </div>
<div>
{this.state.modal ? <GainModal closeModal={this.closeModal} data={this.data} go={() => this.props.go('main')} {this.state.modal ? <GainModal closeModal={this.closeModal} data={this.data} go={() => this.props.go('main')}
srcs={[ srcs={[
this.state.resList['fd5e81a5-e880-4b17-b3d2-0f342d2c1e9e'].url, this.state.resList['fd5e81a5-e880-4b17-b3d2-0f342d2c1e9e'].url,
this.state.resList['0b0d3caa-d1ff-409d-a409-08bff66418a0'].url, this.state.resList['0b0d3caa-d1ff-409d-a409-08bff66418a0'].url,
this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url, this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,
]}></GainModal> : <></>} ]}></GainModal> : ''}
<div className="panda0"></div> </div>
<div className="panda1"></div>
<div className="panda2"></div>
<div className="kuangche"></div>
<div className="faguang"></div>
<div className="jindou"></div>
</div> </div>
); );
} }
async playSvga() { async playSvga () {
/**
* 快速装载一个svga动画
* @param name 资源name
* @param className 挂载元素的class name
* @param frame 从第几帧开始。默认0帧
* @param callback 回调
* @param loops 播放次数。默认为空，循环播放。
* @param clearsAfterStop
*/
this.pandaAni1 = await getSVGA("panda1", ".panda0", 0, null) this.pandaAni1 = await getSVGA("panda1", ".panda0", 0, null)
this.pandaAni2 = await getSVGA("panda1", ".panda1", 0, null) this.pandaAni2 = await getSVGA("panda1", ".panda1", 0, null)
// this.pandaAni3 = await getSVGA("panda2", ".panda2", 0, null) this.pandaAni3 = await getSVGA("panda2", ".panda2", 0, null)
// this.kuangcheAni = await getSVGA("kuangche", ".kuangche", 0, null) this.kuangcheAni = await getSVGA("car", ".kuangche", 0, null)
// this.faguangAni = await getSVGA("faguang", ".faguang", 0, null) this.faguangAni = await getSVGA("faguang", ".faguang", 0, null)
// this.jindouAni = await getSVGA("jindou", ".jindou", 0, null) this.jindouAni = await getSVGA("jindou", ".jindou", 0, null)
this.light = await getSVGA("light", ".light_", 0, null)
} }
gain = async () => { gain = async () => {
......
src/pages/dig/dig.less
View file @ 241c4592
...@@ -6,48 +6,81 @@ ...@@ -6,48 +6,81 @@
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
left: 0px; left: 0px;
top: 0px; top: 0px;
overflow: hidden;
.panda0 { .panda0 {
width: 250px; width: 250px;
height: 295px; height: 295px;
position: absolute; position: absolute;
top: 780px; top: 950px;
left: 55px; left: 30px;
} }
.panda1 { .panda1 {
width: 250px; width: 250px;
height: 295px; height: 295px;
position: absolute; position: absolute;
top: 800px; top: 980px;
left: 155px; left: 170px;
} }
.panda2 { .panda2 {
width: 250px; width: 250px;
height: 295px; height: 295px;
position: absolute; position: absolute;
top: 766px; top: 950px;
left: 465px; left: 470px;
}
.kuangche {
width: 750px;
height: 1624px;
position: absolute;
top: 0;
left: 0;
}
.jindou {
width: 203px;
height: 251px;
left: 2px;
top: 597px;
position: absolute;
}
.faguang {
width: 170px;
height: 152px;
position: absolute;
top: 1000px;
left: 330px;
}
.treasure {
width: 280px;
height: 254px;
position: absolute;
top: 990px;
left: 300px;
}
.profile {
width: 100%;
position: absolute;
top: 850px;
left: 0;
right: 0;
}
.profile > .main {
position: relative;
width: 150px;
top: 0;
left: 60px;
}
.profile > .sub {
position: relative;
width: 150px;
top: -90px;
left: 215px;
}
.profile > .thirdy {
position: relative;
width: 150px;
top: -250px;
left: 530px;
} }
// .kuangche {
// width: 750px;
// height: 1624px;
// position: absolute;
// top: 0;
// left: 0;
// }
// .jindou {
// width: 203px;
// height: 251px;
// left: -28px;
// bottom: -26px;
// position: absolute;
// }
// .faguang {
// width: 170px;
// height: 152px;
// position: absolute;
// top: 10px;
// left: 40px;
// }
.sky { .sky {
width: 750px; width: 750px;
height: 1118px; height: 1118px;
...@@ -166,27 +199,32 @@ ...@@ -166,27 +199,32 @@
} }
} }
.light_ {
width: 155px;
height: 155px;
left: 0px;
top: 0px;
position: absolute;
}
.speed { .speed {
width: 165px; width: 165px;
height: 165px; height: 165px;
opacity: 1; opacity: 1;
top: 745px; top: 670px;
right: -45px; right: 20px;
position: absolute; position: absolute;
} }
.speedUp { .speedUp {
transform-origin: 0px 0px 0px; width: 155px;
transform: translate(-50%, -50%); height: 155px;
animation: 0.5s linear 0s infinite alternate bigger; animation: 0.5s linear 0s infinite alternate bigger;
} }
@keyframes bigger { @keyframes bigger {
from { from {
width: 155px; transform: scale(1);
height: 155px;
} }
to { to {
width: 185px; transform: scale(1.2);
height: 185px;
} }
} }
......
src/pages/pagezu_dui_ye_cheng_wei_dui_chang/pagezu_dui_ye_cheng_wei_dui_chang.jsx
View file @ 241c4592
...@@ -6,29 +6,35 @@ import resList from '../../resconfig/resList'; ...@@ -6,29 +6,35 @@ import resList from '../../resconfig/resList';
import './pagezu_dui_ye_cheng_wei_dui_chang.less'; import './pagezu_dui_ye_cheng_wei_dui_chang.less';
import Profile from "../../components/profile/profile.jsx"; import Profile from "../../components/profile/profile.jsx";
import { getSVGA } from '../../SVGA/index.js';
class Pagezu_dui_ye_cheng_wei_dui_chang extends Component { class Pagezu_dui_ye_cheng_wei_dui_chang extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { resList: resList }; this.state = { resList: resList };
} }
componentDidMount () {
this.playSvga()
}
render () { render () {
return ( return (
<div className="zu_dui_ye_cheng_wei_dui_chang "> <div className="zu_dui_ye_cheng_wei_dui_chang ">
<img className="yuan_su " src={this.state.resList['b2b271ba-acf1-44c9-9f83-5ca199752088'].url} /> <div className="background">
<div className="ren_wu_tou_xiang "> <img className="sky " src={this.state.resList['fa6e1de5-578a-4947-8eb8-6577eeed2436'].url} />
<img className="tuo_yuan_89 " src={this.state.resList['9e849edf-d4c5-4a78-98cf-694b88084376'].url} /> <img className="bg " src={this.state.resList['fdb33f6c-95dd-4319-a8b4-92681b6d5a98'].url} />
{/* <img className="tu_ceng_1194kao " src={this.state.resList['facfc90d-6bcb-4456-9dd4-b4904bca9c92'].url} /> */} <img className="fw " src={this.state.resList['56976260-fcc4-49c4-b4d2-ed9833b8b128'].url} />
<img className="tuo_yuan_88 " src={this.state.resList['849e7812-d74d-46b0-a2d5-0e98d42501ec'].url} /> <img className="earth " src={this.state.resList['536c1bda-87f3-4559-a649-1198e1cf4978'].url} />
{/* <img className="jie_ping_20201 " src={this.state.resList['fd5e81a5-e880-4b17-b3d2-0f342d2c1e9e'].url} /> */} <div className="kuangche"></div>
<img className="tou_xiang " src={this.state.resList['dafd85f3-e303-4fd6-aa34-067c09c3f72e'].url} /> <img className="carMark" src={this.state.resList['8616d3e7-89cc-47c6-96f7-67aa75e04c93'].url} />
<img className="carMark" src={this.state.resList['f09b9a4d-17f7-457e-839e-f2dc5ce46198'].url} />
<img className="stone " src={this.state.resList['1142ca7b-6920-47f1-b4a4-30ae85db147c'].url} />
<img className="cloud " src={this.state.resList['ba1d0dcd-a87e-4cc4-8bed-43b330f913cf'].url} />
<img className="title " src={this.state.resList['f00e7c09-13f3-45af-814e-b8687aa421f6'].url} />
<img className="rule " src={this.state.resList['f12ea74f-0281-4045-9c3f-74a1a75c3a2e'].url} onClick={() => { this.props.modal('rule') }} />
<img className="record " src={this.state.resList['0023f7d8-5251-4ee9-9157-e97bac2f12b7'].url} onClick={() => { this.props.modal('prize') }} />
<img className="logo " src={this.state.resList['f695edaf-f06c-4c1b-a503-cbfe02a8e5c2'].url} />
<img className="treasure" src={this.state.resList['c88aabd5-b68e-4456-b85b-5792db0eaadf'].url} />
</div> </div>
<img className="guang_87 " src={this.state.resList['e905bee2-cf7c-4a59-9358-0421e5c83684'].url} />
<img className="an_niu_86 " src={this.state.resList['fa3027da-2312-4269-8988-d41296992a87'].url} onClick={() => this.props.go('sub')} />
{/* <img
className="an_niu_zai_yao_qing_1ren "
src={this.state.resList['3a9712d5-96d6-4b2d-a229-487578a16a8c'].url}
/> */}
<span className="dui_chang_ke_huo_de_geng_duo ">队长可获得更多金豆</span> <span className="dui_chang_ke_huo_de_geng_duo ">队长可获得更多金豆</span>
<img className="biao_ti_85 " src={this.state.resList['37296b29-94c7-4500-a929-69e7a105bca1'].url} /> <img className="biao_ti_85 " src={this.state.resList['37296b29-94c7-4500-a929-69e7a105bca1'].url} />
<img <img
...@@ -37,10 +43,14 @@ class Pagezu_dui_ye_cheng_wei_dui_chang extends Component { ...@@ -37,10 +43,14 @@ class Pagezu_dui_ye_cheng_wei_dui_chang extends Component {
/> />
<img className="huo_dong_gui_ze_tp83 " src={this.state.resList['02e80b50-c8dd-4f53-827f-44ae97f02784'].url} onClick={() => this.props.modal('rule')} /> <img className="huo_dong_gui_ze_tp83 " src={this.state.resList['02e80b50-c8dd-4f53-827f-44ae97f02784'].url} onClick={() => this.props.modal('rule')} />
<img className="wo_de_jiang_pin_tp82 " src={this.state.resList['8b3e303d-bc52-43fc-ad13-d010c9e4aee2'].url} onClick={() => this.props.modal('prize')} /> <img className="wo_de_jiang_pin_tp82 " src={this.state.resList['8b3e303d-bc52-43fc-ad13-d010c9e4aee2'].url} onClick={() => this.props.modal('prize')} />
<img className="tuo_yuan_81 " src={this.state.resList['d8aac164-01e4-4e25-b013-a672363a0857'].url} />
<img className="logo80 " src={this.state.resList['b527619d-6923-4f9a-ab5a-23e3672c691c'].url} /> <img className="logo80 " src={this.state.resList['b527619d-6923-4f9a-ab5a-23e3672c691c'].url} />
{/* <span className="ben_chang_zui_duo_ke_wa_179 ">本场最多可挖1000金豆</span> */} <div className="panda0"></div>
<Profile className="profile" hasText='true' srcs={[ <div className="panda1"></div>
<div className="panda2"></div>
<div className="faguang"></div>
<img className="cactus " src={this.state.resList['17b6ba20-9de4-44a5-a642-01bb306b279d'].url} />
<div className="profile">
<Profile className="main" hasText='true' srcs={[
this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url, this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,
this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url, this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,
this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url, this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,
...@@ -48,10 +58,20 @@ class Pagezu_dui_ye_cheng_wei_dui_chang extends Component { ...@@ -48,10 +58,20 @@ class Pagezu_dui_ye_cheng_wei_dui_chang extends Component {
this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url, this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,
this.state.resList['0b0d3caa-d1ff-409d-a409-08bff66418a0'].url, this.state.resList['0b0d3caa-d1ff-409d-a409-08bff66418a0'].url,
]}></Profile> ]}></Profile>
<Profile className="profile_" srcs={[this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,]} hasText='true'></Profile> <Profile className="sub" srcs={[this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,]} hasText='true'></Profile>
<Profile className="profile__" srcs={[this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,]} hasText='true'></Profile> <Profile className="thirdy" srcs={[this.state.resList['f0deb9c5-04a1-4311-bdad-93060e1ddad3'].url,]} hasText='true'></Profile>
</div>
<img className="an_niu_86 " src={this.state.resList['fa3027da-2312-4269-8988-d41296992a87'].url} onClick={() => this.props.go('sub')} />
</div> </div>
); );
} }
async playSvga () {
this.pandaAni1 = await getSVGA("panda1", ".panda0", 0, null)
this.pandaAni2 = await getSVGA("panda1", ".panda1", 0, null)
this.pandaAni3 = await getSVGA("panda2", ".panda2", 0, null)
this.kuangcheAni = await getSVGA("car", ".kuangche", 0, null)
this.faguangAni = await getSVGA("faguang", ".faguang", 0, null)
}
} }
export default Pagezu_dui_ye_cheng_wei_dui_chang; export default Pagezu_dui_ye_cheng_wei_dui_chang;
src/pages/pagezu_dui_ye_cheng_wei_dui_chang/pagezu_dui_ye_cheng_wei_dui_chang.less
View file @ 241c4592
...@@ -4,86 +4,185 @@ ...@@ -4,86 +4,185 @@
opacity: 1; opacity: 1;
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
.yuan_su { overflow: hidden;
.panda0 {
width: 250px;
height: 295px;
position: absolute;
top: 950px;
left: 30px;
}
.panda1 {
width: 250px;
height: 295px;
position: absolute;
top: 980px;
left: 170px;
}
.panda2 {
width: 250px;
height: 295px;
position: absolute;
top: 950px;
left: 470px;
}
.kuangche {
width: 750px; width: 750px;
height: 1624px; height: 1624px;
opacity: 1;
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; top: 0;
left: 0;
}
.jindou {
width: 203px;
height: 251px;
left: 2px;
top: 597px;
position: absolute;
} }
.ren_wu_tou_xiang { .faguang {
width: 563px; width: 170px;
height: 182px; height: 152px;
position: absolute;
top: 1000px;
left: 330px;
}
.treasure {
width: 280px;
height: 254px;
position: absolute;
top: 990px;
left: 300px;
}
.profile {
width: 100%;
position: absolute;
top: 850px;
left: 0;
right: 0;
}
.profile > .main {
position: relative;
width: 150px;
top: 0;
left: 60px;
}
.profile > .sub {
position: relative;
width: 150px;
top: -90px;
left: 215px;
}
.profile > .thirdy {
position: relative;
width: 150px;
top: -250px;
left: 530px;
}
.cactus {
width: 750px;
height: 565px;
opacity: 1; opacity: 1;
left: 91px; top: 815px;
top: 868px;
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
.tuo_yuan_89 { }
width: 83px; .background {
height: 82px; .sky {
width: 750px;
height: 1118px;
opacity: 1; opacity: 1;
left: 3px;
top: 3px;
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
.tu_ceng_1194kao { .bg {
width: 89px; width: 750px;
height: 89px; height: 397px;
opacity: 1; opacity: 1;
top: 550px;
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
.tuo_yuan_88 { .earth {
width: 83px; width: 750px;
height: 81px; height: 1624px;
opacity: 1; opacity: 1;
left: 112px; // top: 688px;
top: 58px;
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
.jie_ping_20201 { .carMark {
width: 129px; width: 750px;
height: 128px; height: 1624px;
opacity: 1; opacity: 1;
left: 79px;
top: 54px;
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
.tou_xiang { .stone {
width: 88px; width: 750px;
height: 88px; height: 385px;
opacity: 1; opacity: 1;
left: 475px; top: 723px;
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
.cloud {
width: 750px;
height: 319px;
opacity: 0.9490196078431372;
top: 252px;
position: absolute;
transform-origin: 0px 0px 0px;
} }
.guang_87 { .fw {
width: 750px; width: 750px;
height: 1624px; height: 1624px;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
.an_niu_86 { .title {
width: 441px; width: 495px;
height: 150px; height: 320px;
opacity: 1; opacity: 1;
left: 155px; left: 131px;
top: 1272px; top: 280px;
position: absolute;
transform-origin: 0px 0px 0px;
}
.rule {
width: 138px;
height: 64px;
opacity: 1;
top: 275px;
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
.an_niu_zai_yao_qing_1ren { .record {
width: 550px; width: 143px;
height: 64px;
opacity: 1;
left: 607px;
top: 275px;
position: absolute;
transform-origin: 0px 0px 0px;
}
.logo {
width: 671px;
height: 41px;
opacity: 1;
left: 43px;
top: 219px;
position: absolute;
transform-origin: 0px 0px 0px;
}
}
.an_niu_86 {
width: 441px;
height: 150px; height: 150px;
opacity: 1; opacity: 1;
left: 104px; left: 155px;
top: 1266px; top: 1272px;
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
...@@ -112,7 +211,7 @@ ...@@ -112,7 +211,7 @@
height: 42px; height: 42px;
opacity: 1; opacity: 1;
left: 165px; left: 165px;
top: 573px; top: 610px;
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
...@@ -133,15 +232,6 @@ ...@@ -133,15 +232,6 @@
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
.tuo_yuan_81 {
width: 88px;
height: 88px;
opacity: 1;
left: 200px;
top: 922px;
position: absolute;
transform-origin: 0px 0px 0px;
}
.logo80 { .logo80 {
width: 671px; width: 671px;
height: 41px; height: 41px;
...@@ -151,30 +241,4 @@ ...@@ -151,30 +241,4 @@
position: absolute; position: absolute;
transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px;
} }
.ben_chang_zui_duo_ke_wa_179 {
width: 266px;
height: 23px;
opacity: 1;
left: 241px;
top: 647px;
position: absolute;
transform-origin: 0px 0px 0px;
font-size: 24px;
color: rgba(231, 62, 38, 1);
}
.profile {
position: absolute;
top: 860px;
left: 90px;
}
.profile_ {
position: absolute;
top: 920px;
left: 190px;
}
.profile__ {
position: absolute;
top: 865px;
left: 555px;
}
} }
src/resconfig/resList.js
View file @ 241c4592
...@@ -581,5 +581,11 @@ const resList = { ...@@ -581,5 +581,11 @@ const resList = {
url: '//yun.duiba.com.cn/spark/assets/9b37711630c4f953dd30532e01272985017ea021.png', url: '//yun.duiba.com.cn/spark/assets/9b37711630c4f953dd30532e01272985017ea021.png',
uuid: 'f0fd2033-9859-4488-8604-c54969cba789' uuid: 'f0fd2033-9859-4488-8604-c54969cba789'
}, },
'c88aabd5-b68e-4456-b85b-5792db0eaadf': {
name: 'treasure',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/ef025518434404853f3906609998d2f796ad6eb3.png',
uuid: 'c88aabd5-b68e-4456-b85b-5792db0eaadf'
},
}; };
export default resList; export default resList;
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