1

project/src/app.jsx

 import React, { Component } from "react";
 import ReactDOM from "react-dom";
-import "./app.less";
-import { MOCK_STATUS } from '../sparkrc';
-MOCK_STATUS && (require('../mock/index'));
 import MD from '../MD';
-MD();
+import { MOCK_STATUS } from '../sparkrc';
+import "./app.less";
 //此处为spark-cli动态生成
 import Index from "./pages/index/index.jsx";
+import Start from "./pages/start/start.jsx";
+MOCK_STATUS && (require('../mock/index'));
+MD();
+
 class App extends Component {
- 
+
   render() {
     return (
-      <Index></Index>
+      <div>
+        {/* <Index></Index> */}
+        <Start></Start>
+      </div>
+
     );
   }
 }

project/src/pages/start/start.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './start.less';
+class Start extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  render() {
+    return (
+      <div className="start " uuid="9422ab04-f55f-4bf7-9c69-da98089a55ed">
+        <img
+          className="bg "
+          uuid="9dd08872-7ee3-4c25-8cc2-b03476bc92d8"
+          src={this.state.resList['bd583448-8fa9-4216-9d8b-c19529d561e7'].url}
+        />
+        <img
+          className="biao_ti "
+          uuid="fda5fd55-9ae7-4353-9a07-f8c97d04f39a"
+          src={this.state.resList['9ac14513-12de-403e-bdf8-3e4c6ed766b1'].url}
+        />
+        <img
+          className="an_niu "
+          uuid="88102a53-ebbe-4b6e-829a-08e8197d0e9e"
+          src={this.state.resList['f75f4352-9308-4793-84d3-c3a9df280733'].url}
+        />
+        <span className="mian_fei_you_xi_ci_shu_2 " uuid="67da4724-710f-4542-b1d9-eb17af07164e">
+          免费游戏次数：2
+        </span>
+        <img
+          className="huo_qu_ji_fen "
+          uuid="031ee7d2-3a4f-4837-922d-f78e0f350d22"
+          src={this.state.resList['3ac49dc6-1b98-4ecb-8950-6e29461dc88d'].url}
+        />
+        <img
+          className="you_xi_pai_xing "
+          uuid="5796b849-3427-4f15-84ca-a36ff7e40747"
+          src={this.state.resList['401fe85e-18ed-4631-ba53-33f2341ae2b3'].url}
+        />
+        <img
+          className="wo_de_jiang_pin "
+          uuid="936d88cd-40a6-4bd8-ad8a-1a256f8100de"
+          src={this.state.resList['331bcba2-f184-42a8-a73b-1ab7238c93ed'].url}
+        />
+        <img
+          className="huo_dong_gui_ze "
+          uuid="6716a8e8-98fa-418c-8b1d-9918a8f9da81"
+          src={this.state.resList['62fb4bbe-1c78-48c7-bc5f-0c33e128f7dc'].url}
+        />
+        <span className="wo_de_ji_fen_1000 " uuid="0b5fcd03-c6e7-4985-bf1e-dcbeede69813">
+          我的积分：1000
+        </span>
+        <span className="ben_zhou_li_shi_zui_gao_fen " uuid="72b7073c-428e-4485-bc53-1b5b8b64a1ca">
+          本周历史最高分:
+        </span>
+        <span className="dang_qian_pai_xing_231 " uuid="f07f21b1-4397-4778-95a7-5014f87e2737">
+          当前排行: 231
+        </span>
+        <span className="523 " uuid="4b77a7aa-11d7-4691-b7e5-552fe6ad98c6">
+          523
+        </span>
+        <img
+          className="sheng_yin "
+          uuid="fe49cf3e-4a22-4356-8ea3-14b01e2bbc23"
+          src={this.state.resList['02700f84-4a47-48c5-86ac-20259f6f6505'].url}
+        />
+      </div>
+    );
+  }
+}
+export default Start;

project/src/pages/start/start.less

+.start {
+  width: 750px;
+  height: 1624px;
+  position: absolute;
+  .bg {
+    width: 750px;
+    height: 1624px;
+    position: absolute;
+  }
+  .biao_ti {
+    width: 633px;
+    height: 244px;
+    top: 14%;
+    left: 64px;
+    position: absolute;
+  }
+  .an_niu {
+    width: 408px;
+    height: 137px;
+    left: 171px;
+    top: 1310px;
+    position: absolute;
+  }
+  .mian_fei_you_xi_ci_shu_2 {
+    width: 151px;
+    height: 19px;
+    left: 300px;
+    top: 1400px;
+    position: absolute;
+    font-size: 65.93135px;
+    color: rgba(255, 254, 254, 1);
+  }
+  .huo_qu_ji_fen {
+    width: 87px;
+    height: 87px;
+    right: 8%;
+    left: 600px;
+    top: 1344px;
+    position: absolute;
+  }
+  .you_xi_pai_xing {
+    width: 84px;
+    height: 92px;
+    top: 7%;
+    left: 425px;
+    position: absolute;
+  }
+  .wo_de_jiang_pin {
+    width: 84px;
+    height: 93px;
+    top: 7%;
+    left: 527px;
+    position: absolute;
+  }
+  .huo_dong_gui_ze {
+    width: 84px;
+    height: 93px;
+    top: 7%;
+    left: 627px;
+    position: absolute;
+  }
+  .wo_de_ji_fen_1000 {
+    width: 214px;
+    height: 29px;
+    left: 268px;
+    top: 1482px;
+    position: absolute;
+    font-size: 60.68574px;
+    color: rgba(40, 83, 159, 1);
+  }
+  .ben_zhou_li_shi_zui_gao_fen {
+    width: 186px;
+    height: 25px;
+    left: 241px;
+    top: 517px;
+    position: absolute;
+    font-size: 30px;
+    color: rgba(57, 99, 173, 1);
+  }
+  .dang_qian_pai_xing_231 {
+    width: 164px;
+    height: 25px;
+    left: 298px;
+    top: 568px;
+    position: absolute;
+    font-size: 30px;
+    color: rgba(57, 99, 173, 1);
+  }
+  .523 {
+    width: 66px;
+    height: 29px;
+    left: 437px;
+    top: 513px;
+    position: absolute;
+    font-size: 44px;
+    color: rgba(200, 51, 44, 1);
+  }
+  .sheng_yin {
+    width: 50px;
+    height: 46px;
+    left: 39px;
+    top: 149px;
+    position: absolute;
+  }
+}

project/src/resconfig/resList.js

-const resList = { 
-"2783ab9d-90bb-4804-ac52-c5213ad4da62":{"name":"bg","ext":".png","uuid":"2783ab9d-90bb-4804-ac52-c5213ad4da62","url":"https://yun.duiba.com.cn/spark/assets/181fcd4df380863f25fcefdebde02c295f8fe91c.png"},"b4c78dea-8157-435d-8b1d-ee66bcee1869":{"name":"title","ext":".png","uuid":"b4c78dea-8157-435d-8b1d-ee66bcee1869","url":"https://yun.duiba.com.cn/spark/assets/76aaa5008d71d29005917333743ea2dc40bcad33.png"},"25098902-3acd-4fc7-a501-9e0b9913ba44":{"name":"loading","ext":".png","uuid":"25098902-3acd-4fc7-a501-9e0b9913ba44","url":"https://yun.duiba.com.cn/spark/assets/0b7075739df1d877539d5676dfeb83b1bb88b741.png"},"3b371680-825c-40ff-9828-28f78f4c4e32":{"name":"progressbg","ext":".png","uuid":"3b371680-825c-40ff-9828-28f78f4c4e32","url":"https://yun.duiba.com.cn/spark/assets/4d4bce2039c5a4236775e8ba591feb2de04e872c.png"},"57c1fb2b-f495-43ff-a215-61cf5f06cc53":{"name":"progressfront","ext":".png","uuid":"57c1fb2b-f495-43ff-a215-61cf5f06cc53","url":"https://yun.duiba.com.cn/spark/assets/6665927cf63732ef536300a90a6af2eddfca4135.png"},
- }
-export default resList;
+const resList = {
+  '2783ab9d-90bb-4804-ac52-c5213ad4da62': {
+    name: 'bg',
+    ext: '.png',
\ No newline at end of file
+    uuid: '2783ab9d-90bb-4804-ac52-c5213ad4da62',
+    url: 'https://yun.duiba.com.cn/spark/assets/181fcd4df380863f25fcefdebde02c295f8fe91c.png',
+  },
+  'b4c78dea-8157-435d-8b1d-ee66bcee1869': {
+    name: 'title',
+    ext: '.png',
+    uuid: 'b4c78dea-8157-435d-8b1d-ee66bcee1869',
+    url: 'https://yun.duiba.com.cn/spark/assets/76aaa5008d71d29005917333743ea2dc40bcad33.png',
+  },
+  '25098902-3acd-4fc7-a501-9e0b9913ba44': {
+    name: 'loading',
+    ext: '.png',
+    uuid: '25098902-3acd-4fc7-a501-9e0b9913ba44',
+    url: 'https://yun.duiba.com.cn/spark/assets/0b7075739df1d877539d5676dfeb83b1bb88b741.png',
+  },
+  '3b371680-825c-40ff-9828-28f78f4c4e32': {
+    name: 'progressbg',
+    ext: '.png',
+    uuid: '3b371680-825c-40ff-9828-28f78f4c4e32',
+    url: 'https://yun.duiba.com.cn/spark/assets/4d4bce2039c5a4236775e8ba591feb2de04e872c.png',
+  },
+  '57c1fb2b-f495-43ff-a215-61cf5f06cc53': {
+    name: 'progressfront',
+    ext: '.png',
+    uuid: '57c1fb2b-f495-43ff-a215-61cf5f06cc53',
+    url: 'https://yun.duiba.com.cn/spark/assets/6665927cf63732ef536300a90a6af2eddfca4135.png',
+  },
+  'bd583448-8fa9-4216-9d8b-c19529d561e7': {
+    name: 'bg',
+    ext: '.png',
+    uuid: 'bd583448-8fa9-4216-9d8b-c19529d561e7',
+    url: 'https://yun.duiba.com.cn/spark/assets/91c61d1bbf47d3ddbd4dedb39198c1e8e6817974.png',
+  },
+  '9ac14513-12de-403e-bdf8-3e4c6ed766b1': {
+    name: '标题',
+    ext: '.png',
+    uuid: '9ac14513-12de-403e-bdf8-3e4c6ed766b1',
+    url: 'https://yun.duiba.com.cn/spark/assets/76aaa5008d71d29005917333743ea2dc40bcad33.png',
+  },
+  'f75f4352-9308-4793-84d3-c3a9df280733': {
+    name: '按钮',
+    ext: '.png',
+    uuid: 'f75f4352-9308-4793-84d3-c3a9df280733',
+    url: 'https://yun.duiba.com.cn/spark/assets/ad78ef8cc4ef6080701b2de3329251463d44d194.png',
+  },
+  '3ac49dc6-1b98-4ecb-8950-6e29461dc88d': {
+    name: '获取积分',
+    ext: '.png',
+    uuid: '3ac49dc6-1b98-4ecb-8950-6e29461dc88d',
+    url: 'https://yun.duiba.com.cn/spark/assets/89669d866ef7c442172b9c0be1cffc891324630e.png',
+  },
+  '401fe85e-18ed-4631-ba53-33f2341ae2b3': {
+    name: '游戏排行',
+    ext: '.png',
+    uuid: '401fe85e-18ed-4631-ba53-33f2341ae2b3',
+    url: 'https://yun.duiba.com.cn/spark/assets/ed12e8774992ce324d57935aa7edc43af378eb8d.png',
+  },
+  '331bcba2-f184-42a8-a73b-1ab7238c93ed': {
+    name: '我的奖品',
+    ext: '.png',
+    uuid: '331bcba2-f184-42a8-a73b-1ab7238c93ed',
+    url: 'https://yun.duiba.com.cn/spark/assets/a5bf154a5646d6f526c7a003e35735a1c2971db3.png',
+  },
+  '62fb4bbe-1c78-48c7-bc5f-0c33e128f7dc': {
+    name: '活动规则',
+    ext: '.png',
+    uuid: '62fb4bbe-1c78-48c7-bc5f-0c33e128f7dc',
+    url: 'https://yun.duiba.com.cn/spark/assets/63278ab52ba41725016c1fd6fc813a5afc8f661c.png',
+  },
+  '02700f84-4a47-48c5-86ac-20259f6f6505': {
+    name: '声音',
+    ext: '.png',
+    uuid: '02700f84-4a47-48c5-86ac-20259f6f6505',
+    url: 'https://yun.duiba.com.cn/spark/assets/3798fd66655714e797c2c318579da6c3fca84ec0.png',
+  },
+};
+export default resList;