init

ef26df64 · Edwise · ef26df64 · ef26df64 · ef26df64 · ef26df64
Commit ef26df64 authored May 17, 2021 by Edwise 🍷
54 changed files
--- a/.gitignore
+++ b/.gitignore
+.DS_Store
+node_modules/
+coverage/
+dist/
+npm-debug.log
+selenium-debug.log
+.idea
+.builds
+.project
+.vscode
+yarn-error.log
+.yarn
+.package-lock
+yarn.lock
+.cache
+packages/**/package-lock.json
--- a/MD.js
+++ b/MD.js
+import {MD} from '@spark/utils';
+
+let appId = CFG.appID;
+const dcm = '202.' + CFG.projectId + '.0.0';
+const domain = '//embedlog.duiba.com.cn';
+
+let MDList = [
+  {
+    ele: `.test-md1`,
+    data: {
+      dpm: `${appId}.110.5.1`,
+      dcm,
+      domain,
+      appId
+    },
+    once: false
+  }
+];
+
+export default () =>
+  MD({
+    show: MDList, // 曝光
+    click: MDList // 点击
+  });
--- a/mock/common.js
+++ b/mock/common.js
--- a/mock/index.js
+++ b/mock/index.js
+/**
+ * Created by rockyl on 2021/1/13.
+ */
+
+module.exports = Object.assign({},
+	require('./main'),  //业务mock
+	require('./common'),  //通用接口mock
+);
--- a/mock/main.js
+++ b/mock/main.js
+/**
+ * Created by rockyl on 2021/1/13.
+ */
+
+module.exports = {
+	'POST /join.do': {
+		success: true,
+		data: {
+			imgUrl: '//yun.duiba.com.cn/spark/assets/3f8175325f76e92087d64cb60936d23967656de6.png',
+		}
+	},
+}
--- a/package.json
+++ b/package.json
+{
+  "name": "sparkproject-1614598676975",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "spark dev --type h5 --port 3567",
+    "prod": "spark build --type h5 --env prod",
+    "tb": "spark build --type taobao"
+  },
+  "dependencies": {
+    "@spark/api-base": "^2.0.7",
+    "@spark/projectx": "^2.0.2",
+    "@spark/red_pack_rain": "^0.0.11",
+    "@spark/share": "^2.0.44",
+    "@spark/ui": "^2.0.28",
+    "@spark/utils": "^2.0.17",
+    "css-loader": "^3.6.0",
+    "duiba-utils": "^1.0.2",
+    "postcss-loader": "^3.0.0",
+    "prettier": "^2.0.5",
+    "qs": "^6.9.4",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-redux": "^5.0.7",
+    "redux": "^4.0.0",
+    "redux-thunk": "^2.3.0",
+    "style-loader": "^1.2.1"
+  },
+  "devDependencies": {
+    "mockjs": "^1.1.0"
+  }
+}
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <link rel="shortcut icon" type="image/x-icon" href="//yun.duiba.com.cn/editor/spark/favicon.ico">
+  <title>活动标题</title>
+  <script id="scriptjs" src="//yun.duiba.com.cn/js-libs/px-token/1.0.3/px-token.min.js"></script>
+  <script src="//yun.duiba.com.cn/js-libs/rem/1.1.3/rem.min.js"></script>
+  <script src="//yun.duiba.com.cn/h5/lib/zepto.min.js"></script>
+  <script>
+    function getApp() {
+      return {
+        cloud: {},
+        cloudName: "clientTemplate2C",
+        requestType: "mock"
+      }
+    }
+
+    var CFG = CFG || {};
+    CFG.projectId = location.pathname.split('/')[2] || '1';
+    function getUrlParam(name) {
+      const search = window.location.search;
+      const matched = search
+        .slice(1)
+        .match(new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'));
+      return search.length ? matched && matched[2] : null;
+    }
+
+    CFG.appID = '${APPID}';
+    // if (!getUrlParam("appID")) {
+    //   alert("【警告】检测到活动url中没有appID参数\n缺少该参数会导致埋点、分享、app信息获取错误。")
+    // }
+  </script>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+
+</html>
--- a/sparkrc.js
+++ b/sparkrc.js
+module.exports = {
+  OUTPUT_DIR: "dist",
+  SOURCE_DIR: "src",
+  TEMP_DIR: "./.temp",
+  ENTRY: "src/app.jsx",
+  TEMPLATE: "./public/index.html",
+  API_MOCK: true
+};
--- a/src/EdPop/ED_POP.js
+++ b/src/EdPop/ED_POP.js
+// import { useRef } from "react"
+// import { useEffect } from "react"
+// import { useState } from "react"
+
+// export function ED_POP() {
+//     const [popArr, setPopArr] = useState([]);
+//     const mainPopContainer = useRef();
+    
+
+//     useEffect(() => {
+
+//     }, popArr)
+
+//     function renderChildren() {
+//         return popArr && popArr.length > 0 && popArr.map((itm, idx) => {
+//             return React.createElement('div',{className=})
+//         })
+//     }
+//     return (
+//         React.createElement('div', { className="mainPopContainer", ref=mainPopContainer }, renderChildren())
+//     )
+// }
\ No newline at end of file
--- a/src/EdPop/EdPop.js
+++ b/src/EdPop/EdPop.js
--- a/src/EdPop/EdPopAnimType.js
+++ b/src/EdPop/EdPopAnimType.js
+// const EdPopAnimType = {
+//     zoom:'Ed_zoom',
+//     push:'Ed_push'
+// }
+// export default EdPopAnimType
\ No newline at end of file
--- a/src/EdPop/EdPopBgType.js
+++ b/src/EdPop/EdPopBgType.js
+// const EdPopBgType = {
+//     center:'Ed_PopBgCenter',    //剧中
+//     noCenter:'Ed_PopBgNoCenter',    //不剧中
+// }
+// export default EdPopBgType
\ No newline at end of file
--- a/src/EdPop/EdPopRedux/EdPop.js
+++ b/src/EdPop/EdPopRedux/EdPop.js
+import { useState } from "react";
+import { createStore } from "redux";
+import ReactDOM from "react-dom";
+import React from "react";
+import { EdPopStore } from "./EdPopStore";
+import './style/EdPop.less'
+import { CLOSE_POP, SHOW_POP } from "./EdPopAction";
+import EdPopBgType from "./style/EdPopBgType";
+import EdPopAnimType from "./style/EdPopAnimType";
+import EdPopFun from "./EdpopFun";
+class EDPOP {
+    constructor() {
+        EdPopStore.subscribe(this.renderPop);
+        this.createMainPopContainer();
+    }
+    /**创建弹窗主容器 */
+    createMainPopContainer() {
+        this.mainPopContainer = document.createElement('div');
+        this.mainPopContainer.className = 'mainPopContainer'
+        document.body.appendChild(this.mainPopContainer);
+    }
+
+    /**弹出一个弹窗
+     * @T 弹窗组件，直接传组件名即可
+     * @proprty 弹窗参数
+     * @example
+     * EdPop.showPop(rule,{prop:{ruleText:''}})
+     * prop:{},       //传入的属性，会直接传给弹窗的props
+     * animType:EdPopAnimType.zoom,    //弹窗动画类型，默认为缩放
+     * maskValue:0.7,  //背景蒙层的透明度,默认为0.7
+     * maskColor:'#000000', //背景蒙层的颜色,默认为黑色
+     * clickThrough:false,     //是否可以点击穿透蒙层，默认为否
+     * clickMaskClose:false,   //是否可以点击蒙层关闭
+     * closeCall:null,  //关闭弹窗时的回调函数
+     * isCenter:true,   //是否剧中
+     */
+    showPop(T, propty) {
+        EdPopStore.dispatch(SHOW_POP({ com: T, propty }));
+    }
+
+    /**关闭弹窗 */
+    closePop(closeAll = false) {
+        EdPopStore.dispatch(CLOSE_POP({ closeAll }))
+    }
+
+    /**注册一个弹窗
+     * @T 弹窗组件，直接传组件名即可
+     * @proprty 弹窗参数
+     * @level 注册的弹窗优先级，越高越优先弹出，如果不填则默认放到最低优先度
+     * @example
+     * EdPop.registerPop(rule,{prop:{a:1}},2)
+     * proprty:
+     * prop:{},       //传入的属性，会直接传给弹窗的props
+     * animType:EdPopAnimType.zoom,    //弹窗动画类型，默认为缩放
+     * maskValue:0.7,  //背景蒙层的透明度,默认为0.7
+     * maskColor:'#000000', //背景蒙层的颜色,默认为黑色
+     * clickThrough:false,     //是否可以点击穿透蒙层，默认为否
+     * clickMaskClose:false,   //是否可以点击蒙层关闭
+     * closeCall:null,  //关闭弹窗时的回调函数
+     * isCenter:true,   //是否剧中
+     */
+    registerPop(T,proprty,level) {
+
+    }
+
+    /**取消弹窗 */
+    cancelPop() {
+
+    }
+
+    /**禁止滚动 */
+    disScroll() {
+        document.body.style.overflow = 'hidden';
+        document.body.style.position = 'fixed';
+    }
+
+    /**开启滚动 */
+    enScroll() {
+        document.body.style.overflow = '';
+        document.body.style.position = '';
+    }
+
+    /**从store内获取state中的popArr,经过处理生成心的popDataArr */
+    getPopArr() {
+        const { changePop } = EdPopStore.getState() || {};
+        const { popArr } = changePop || {};
+        let proptyArr = [];
+        popArr?.map((itm, idx) => {
+            proptyArr.push({ com: itm.com, propty: EdPop.getPropty(itm.propty) });
+        })
+        console.log('yef-->', EdPopStore.getState(), proptyArr);
+        if(proptyArr.length>0) this.disScroll();
+        else this.enScroll();
+        return proptyArr;
+    }
+
+    /**获取属性值 */
+    getPropty(originPropty) {
+        let _popData = {}
+        let _posCls = '';
+        let _animCls = ''
+        let _propty = Object.assign({}, defaultPropty, originPropty);
+        const { animType, animCls, isCenter, ...props } = _propty;
+        if (isCenter) _posCls = EdPopBgType.center;
+        else _posCls = EdPopBgType.noCenter;
+        if (animCls) _animCls = `${animCls} ${_posCls}`;
+        else _animCls = `${animType || ''} ${_posCls}`;
+        _popData = { _posCls, _animCls, props };
+        return _popData;
+    }
+
+    /**渲染弹窗 */
+    renderPop() {
+        const popDataArr = EdPop.getPopArr();
+        return ReactDOM.render(
+            popDataArr?.map((itm, idx) => {
+                const { _posCls, _animCls, props } = itm.propty;
+                const { maskValue, maskColor, prop } = props;
+                const RGBColor = EdPopFun.colorToRgb(maskColor);
+                return (
+                    <div key={idx} className={_posCls} style={{ backgroundColor: `RGBA(${RGBColor},${maskValue})` }}>
+                        <div className={_animCls}>
+                            <itm.com {...prop} ></itm.com>
+                        </div>
+                    </div>
+                )
+            })
+            , EdPop.mainPopContainer)
+    }
+}
+const EdPop = new EDPOP();
+const defaultPropty = {
+    prop: {},       //传入的属性，会直接传给弹窗的props
+    animType: EdPopAnimType.zoom,    //弹窗动画类型，默认为缩放
+    animCls: null,   //自定义弹窗动画类
+    maskValue: 0.7,  //背景蒙层的透明度,默认为0.7
+    maskColor: '#000', //背景蒙层的颜色,默认为黑色
+    clickThrough: false,     //是否可以点击穿透蒙层，默认为否
+    clickMaskClose: false,   //是否可以点击蒙层关闭
+    closeCall: () => { },  //关闭弹窗时的回调函数
+    isCenter: true, //是否弹窗是否剧中
+}
+export default EdPop;
+
--- a/src/EdPop/EdPopRedux/EdPopAction.js
+++ b/src/EdPop/EdPopRedux/EdPopAction.js
+const POP = {
+    SHOW_POP: 'SHOW_POP',
+    CLOSE_POP: 'CLOSE_POP'
+}
+
+const SHOW_POP = data => ({
+    type: 'SHOW_POP',
+    data
+});
+
+const CLOSE_POP = data => ({
+    type: 'CLOSE_POP',
+    data
+});
+
+const REGISTER_POP = data => ({
+    type: "REGISTER_POP",
+    data
+})
+export {
+    POP,
+    SHOW_POP,
+    CLOSE_POP,
+    REGISTER_POP
+}
\ No newline at end of file
--- a/src/EdPop/EdPopRedux/EdPopReducer.js
+++ b/src/EdPop/EdPopRedux/EdPopReducer.js
+import { combineReducers } from "redux"
+import {changePop} from './reducer/EdPopChangeReducer.js'
+import {registerReducer} from './reducer/EdPopRegisterReducer.js'
+
+export const EdPopReducer = combineReducers({
+    changePop,
+    registerReducer
+})
\ No newline at end of file
--- a/src/EdPop/EdPopRedux/EdPopStore.js
+++ b/src/EdPop/EdPopRedux/EdPopStore.js
+import { createStore } from "redux";
+
+import { EdPopReducer } from "./EdPopReducer";
+export const EdPopStore = createStore(EdPopReducer);
--- a/src/EdPop/EdPopRedux/EdpopFun.js
+++ b/src/EdPop/EdPopRedux/EdpopFun.js
+const EdPopFun = {
+    /**将16进制颜色变为RGB
+     * @example
+     * #000
+     * 0,0,0
+     */
+    colorToRgb(color) {
+        if (!color || typeof (color) != "string") return color;
+        // 16进制颜色值的正则
+        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+        // 把颜色值变成小写
+        var color = color.toLowerCase();
+        if (reg.test(color)) {
+            // 如果只有三位的值，需变成六位，如：#fff => #ffffff
+            if (color.length === 4) {
+                var colorNew = "#";
+                for (var i = 1; i < 4; i += 1) {
+                    colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
+                }
+                color = colorNew;
+            }
+            // 处理六位的颜色值，转为RGB
+            var colorChange = [];
+            for (var i = 1; i < 7; i += 2) {
+                colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
+            }
+            return colorChange.join(",");
+        } else {
+            return color;
+        }
+    }
+}
+export default EdPopFun;
\ No newline at end of file
--- a/src/EdPop/EdPopRedux/reducer/EdPopChangeReducer.js
+++ b/src/EdPop/EdPopRedux/reducer/EdPopChangeReducer.js
+const { POP } = require("../EdPopAction");
+
+var popArr = [];
+var popId = 0;
+function showPop(state, action) {
+    const { data } = action;
+    let a = popArr.slice(0)
+    console.log("show个pop之前，先让我看看属性-----》",a)
+    if (data) popArr.push(data)
+    let b = popArr.slice(0)
+    console.log("show个pop，我看看属性--->",b)
+    popId++;
+    var popState = Object.assign({}, state, { popArr, popId });
+    return popState
+}
+
+function closePop(state, action) {
+    const { data } = action;
+    const { closeAll, popId } = data;
+    if (closeAll) popArr.splice(0);
+    else {
+        if (popId) popArr.splice(data, 1);
+        else popArr.splice(popArr.length - 1, 1);
+    }
+    var popState = Object.assign({}, state, { popArr });
+    return popState
+}
+
+export function changePop(state = {}, action) {
+    console.log('changePopReducer--->', state, action)
+    var popState = {};
+    switch (action.type) {
+        case POP.SHOW_POP:
+            popState = showPop(state, action)
+            return popState;
+        case POP.CLOSE_POP:
+            popState = closePop(state, action)
+            return popState;
+        default:
+            return state;
+    }
+}
--- a/src/EdPop/EdPopRedux/reducer/EdPopRegisterReducer.js
+++ b/src/EdPop/EdPopRedux/reducer/EdPopRegisterReducer.js
+
+var prePop = [];
+
+function registerPop() {
+
+}
+
+function cancelPop() {
+
+}
+
+export function registerReducer(state = {}, action) {
+    return state;
+}
\ No newline at end of file
--- a/src/EdPop/EdPopRedux/style/EdPop.less
+++ b/src/EdPop/EdPopRedux/style/EdPop.less
+.Ed_PopBgCenter {
+    position: fixed;
+    width: 750px;
+    height: 1624px;
+    left: calc(50% - 375px);
+    top: calc(50% - 812px);
+}
+
+.Ed_PopBgNoCenter {
+    position: fixed;
+    width: 750px;
+    height: 1624px;
+    left: 0;
+    top: 0;
+}
+
+.Ed_zoom {
+    transform-origin: center !important;
+    animation: Ed_zoom 0.5s linear 0s 1;
+    -webkit-animation: Ed_zoom 0.5s linear 0s 1;
+}
+
+@keyframes Ed_zoom {
+    0% {
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+    }
+
+    50% {
+        -webkit-transform: scale(1.1);
+        transform: scale(1.1)
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        transform: scale(1)
+    }
+}
+
+.Ed_push {
+    bottom: 0px !important;
+    animation: Ed_push 0.4s linear ;
+    -webkit-animation: Ed_push 0.4s linear ;
+}
+
+@keyframes Ed_push {
+    0% {
+        transform: translate(0, 100%);
+    }
+
+    100% {
+        transform: translate(0, 0);
+    }
+}
\ No newline at end of file
--- a/src/EdPop/EdPopRedux/style/EdPopAnimType.js
+++ b/src/EdPop/EdPopRedux/style/EdPopAnimType.js
+const EdPopAnimType = {
+    zoom:'Ed_zoom',
+    push:'Ed_push'
+}
+export default EdPopAnimType
\ No newline at end of file
--- a/src/EdPop/EdPopRedux/style/EdPopBgType.js
+++ b/src/EdPop/EdPopRedux/style/EdPopBgType.js
+const EdPopBgType = {
+    center:'Ed_PopBgCenter',    //剧中
+    noCenter:'Ed_PopBgNoCenter',    //不剧中
+}
+export default EdPopBgType
\ No newline at end of file
--- a/src/EdPop/EdPopWrapperCom.jsx
+++ b/src/EdPop/EdPopWrapperCom.jsx
+import React, { Component } from 'react'
+
+const EdPopHOC = WrappedComponent => {
+    return class extends Component {
+        constructor(props) {
+            super(props)
+        }
+        render() {
+            return <WrappedComponent  {...this.props} />
+        }
+    }
+}
+
+export default EdPopHOC
\ No newline at end of file
--- a/src/EdPop/test.js
+++ b/src/EdPop/test.js
+function n(n, r) {
+    if (n && "undefined" != typeof document) {
+        var a, s = !0 === r.prepend ? "prepend" : "append", d = !0 === r.singleTag,
+            i = "string" == typeof r.container ? document.querySelector(r.container) : document.getElementsByTagName("head")[0];
+        if (d) {
+            var u = e.indexOf(i);
+            -1 === u && (u = e.push(i) - 1, t[u] = {}), a = t[u] && t[u][s] ? t[u][s] : t[u][s] = c();
+        } else a = c(); 65279 === n.charCodeAt(0) && (n = n.substring(1)), a.styleSheet ? a.styleSheet.cssText += n : a.appendChild(document.createTextNode(n));
+    } function c() { var e = document.createElement("style"); if (e.setAttribute("type", "text/css"), r.attributes) for (var t = Object.keys(r.attributes), n = 0; n < t.length; n++)e.setAttribute(t[n], r.attributes[t[n]]); var a = "prepend" === s ? "afterbegin" : "beforeend"; return i.insertAdjacentElement(a, e), e }
+}
\ No newline at end of file
--- a/src/api/apicfg.js
+++ b/src/api/apicfg.js
+
+const apiCfg = {
+    getRule:`projectRule.query`,
+    doJoin: {
+      uri: `join.do`,
+      method: "post",
+      withToken: true,  //携带星速台token
+      secret: true, //开启接口加密
+      secretKey: 'duibaduiba123', //接口加密key
+    },
+}
+
+export default apiCfg;
--- a/src/api/index.js
+++ b/src/api/index.js
+import apiCfg from './apicfg';
+import {getPxToken} from "@spark/projectx";
+import {callApi} from '@spark/api-base'
+
+import {isFromShare, newUser} from 'duiba-utils';
+
+let mergeData = {
+  user_type: newUser ? '0' : '1',
+  is_from_share: isFromShare ? '0' : '1',
+}
+
+const apiList = {
+  ...apiCfg
+}
+
+
+const API = generateAPI(apiList);
+export default API;
+
+function getRequestParams(value) {
+  if (typeof value === 'string') {
+    return {
+      uri: value,
+      method: 'get'
+    }
+  } else if (typeof value === 'object') {
+    const {uri, method = 'get', headers, withToken, secret, secretKey} = value;
+    return {
+      uri,
+      method,
+      headers,
+      withToken,
+      secret,
+      secretKey,
+    }
+  } else {
+    console.error('getRequestParams: 传参有误');
+  }
+}
+
+
+function generateAPI(apiList) {
+  const api = {};
+  for (let key in apiList) {
+    let value = apiList[key];
+
+    const {method, uri, headers: mHeaders, withToken, secret, secretKey} = getRequestParams(value);
+    api[key] = async (params = {}, headers) => {
+      let token;
+      if (withToken) {
+        try{
+          token = await getPxToken();
+        }catch (e){
+          //todo 星速台token获取失败，默认刷新页面
+          location.reload();
+        }
+      }
+
+      let mergedHeaders = {...mHeaders, ...headers}
+      if (withToken && token) {
+        params.token = token;
+      }
+
+      params = {...params, ...mergeData};
+
+      return callApi(uri, params, method, mergedHeaders, true, secret, secretKey);
+    }
+  }
+
+  return api;
+}
--- a/src/app.jsx
+++ b/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();
+//此处为spark-cli动态生成
+import Pageindex from "./pages/pageindex/pageindex.jsx";
+import Pageloading from "./pages/pageloading/pageloading.jsx";
+// import EDPOP from "./EdPop/EdPop";
+import Comolduserpop from "./components/comolduserpop/comolduserpop.jsx";
+import Comrulepop from "./components/comrulepop/comrulepop.jsx";
+import Comselectpandapop from "./components/comselectpandapop/comselectpandapop.jsx";
+import Comcoindetailpop from "./components/comcoindetailpop/comcoindetailpop";
+// import EdPopAnimType from "./EdPop/EdPopAnimType";
+import Comwordcenterpop from "./components/comwordcenterpop/comwordcenterpop";
+import EdPop from "./EdPop/EdPopRedux/EdPop";
+import { EdPopStore } from "./EdPop/EdPopRedux/EdPopStore";
+import { SHOW_POP } from "./EdPop/EdPopRedux/EdPopAction";
+// import {EdPopStore } from "./EdPop/EdPopRedux/EdPopRedux";
+const test = {
+  a: 1,
+  b: '2'
+}
+class App extends Component {
+
+  componentDidMount() {
+    // EDPOP.showPop(Comolduserpop, { props: 20, })
+    // EDPOP.registerPop(Comrulepop)
+    // EDPOP.registerPop(Comselectpandapop)
+    // EDPOP.registerPop(Comcoindetailpop,89)
+    // EDPOP.registerPop(Comwordcenterpop,70,{animType:EdPopAnimType.push})
+    // setTimeout(()=>{
+    //   EDPOP.cancelPop(Comselectpandapop)
+    //   EDPOP.cancelPop(null,89)
+    // },1000)
+    // console.log(typeof(Comwordcenterpop))
+    // this.dh({ a: 1 })
+    // EdPopRedux();
+    //   setInterval(()=>{
+    //     EdPopStore.dispatch({type:'INCREMENT'})
+    // },1000)
+
+    setTimeout(()=>{
+      EdPop.showPop(Comolduserpop);
+      setTimeout(()=>{
+        EdPop.showPop(Comrulepop)
+      },2000)
+    },1000)
+  }
+
+
+  render() {
+    return (
+      // <Pageloading></Pageloading>
+      <div></div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
--- a/src/app.less
+++ b/src/app.less
+* {
+  margin: 0;
+  padding: 0;
+}
+html,
+body {
+  font-size: 24px;
+  width: 100%;
+  height: 100%;
+}
--- a/src/components/comchangeworkpop/comchangeworkpop.jsx
+++ b/src/components/comchangeworkpop/comchangeworkpop.jsx
+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comchangeworkpop.less';
+class Comchangeworkpop extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  render() {
+    return (
+      <div className="changeworkpop ">
+        <img className="changeworkbg " src={this.state.resList['eb352ad0-b873-4b9d-971f-22c83d1c0cb1'].url} />
+        <img className="changeworkclose " src={this.state.resList['eec6ec93-1486-4877-9d65-005e5ead3157'].url} />
+        <span className="changeworktitle ">咦，你想让我换个工作嘛？</span>
+        <span className="changeworktips ">未完成打工赚不到金币哦</span>
+        <img className="changeworksure " src={this.state.resList['40731c5d-234b-4814-b14d-3c2e43d9971a'].url} />
+        <img className="changeworkno " src={this.state.resList['5ab17078-2b9e-4812-8a59-582721ffde81'].url} />
+      </div>
+    );
+  }
+}
+export default Comchangeworkpop;
--- a/src/components/comchangeworkpop/comchangeworkpop.less
+++ b/src/components/comchangeworkpop/comchangeworkpop.less
+.changeworkpop {
+  width: 654px;
+  height: 492px;
+  opacity: 1;
+  left: 72px;
+  top: 431px;
+  position: absolute;
+  
+  .changeworkbg {
+    width: 606px;
+    height: 445px;
+    opacity: 1;
+    top: 47px;
+    position: absolute;
+    
+  }
+  .changeworkclose {
+    width: 118px;
+    height: 118px;
+    opacity: 1;
+    left: 536px;
+    position: absolute;
+    
+  }
+  .changeworktitle {
+    width: 388px;
+    height: 34px;
+    opacity: 1;
+    left: 103px;
+    top: 168px;
+    position: absolute;
+    
+    font-size: 24px;
+    color: rgba(181, 79, 39, 1);
+  }
+  .changeworktips {
+    width: 313px;
+    height: 27px;
+    opacity: 1;
+    left: 147px;
+    top: 233px;
+    position: absolute;
+    
+    font-size: 24px;
+    color: rgba(181, 79, 39, 1);
+  }
+  .changeworksure {
+    width: 254px;
+    height: 113px;
+    opacity: 1;
+    left: 42px;
+    top: 317px;
+    position: absolute;
+    
+  }
+  .changeworkno {
+    width: 254px;
+    height: 113px;
+    opacity: 1;
+    left: 311px;
+    top: 317px;
+    position: absolute;
+    
+  }
+}
--- a/src/components/comcoindetailpop/comcoindetailpop.jsx
+++ b/src/components/comcoindetailpop/comcoindetailpop.jsx
+'use strict';
+
+import React, { Component } from 'react';
+import EDPOP from '../../EdPop/EdPop';
+import resList from '../../resconfig/resList';
+
+import './comcoindetailpop.less';
+class Comcoindetailpop extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  componentDidMount(){
+    console.log('弹窗属性--->olduserpop',EDPOP.getPopData())
+  }
+  render() {
+    return (
+      <div className="coindetailpop ">
+        <img className="coindetailbg " src={this.state.resList['8959ccc1-5c59-4dce-96e2-42538e15f9be'].url} />
+        <img className="coindetailclose " onClick={()=>{EDPOP.closeCurPop()}} src={this.state.resList['99d0cffb-8947-413b-9046-aa2119574d3e'].url} />
+        <div className="coindetaillist ">
+          <div className="coindetailitem ">
+            <span className="coindetailitemname ">打工完成 卖萌唱歌</span>
+            <span className="coindetailitemcnt ">+20金币</span>
+            <span className="coindetailitemdate ">2021.01.08 13:20</span>
+            <img className="coindetailitemline " src={this.state.resList['c81604dc-669a-4ea0-b668-1410560d8d3a'].url} />
+          </div>
+        </div>
+        <span className="coindetailcurcoin ">当前金币数：200</span>
+      </div>
+    );
+  }
+}
+export default Comcoindetailpop;
--- a/src/components/comcoindetailpop/comcoindetailpop.less
+++ b/src/components/comcoindetailpop/comcoindetailpop.less
+.coindetailpop {
+  width: 655px;
+  height: 848px;
+  opacity: 1;
+  left: 72px;
+  top: 311px;
+  position: absolute;
+  
+  .coindetailbg {
+    width: 606px;
+    height: 848px;
+    opacity: 1;
+    position: absolute;
+    
+  }
+  .coindetailclose {
+    width: 119px;
+    height: 119px;
+    opacity: 1;
+    left: 536px;
+    top: 18px;
+    position: absolute;
+    
+  }
+  .coindetaillist {
+    width: 575px;
+    height: 92px;
+    opacity: 1;
+    left: 16px;
+    top: 234px;
+    position: absolute;
+    
+    .coindetailitem {
+      width: 575px;
+      height: 92px;
+      opacity: 1;
+      position: absolute;
+      
+      .coindetailitemname {
+        width: 231px;
+        height: 28px;
+        opacity: 1;
+        left: 39px;
+        position: absolute;
+        
+        font-size: 24.32072px;
+        color: rgba(255, 91, 0, 1);
+      }
+      .coindetailitemcnt {
+        width: 97px;
+        height: 26px;
+        opacity: 1;
+        left: 450px;
+        top: 2px;
+        position: absolute;
+        
+        font-size: 24.32072px;
+        color: rgba(190, 102, 24, 1);
+      }
+      .coindetailitemdate {
+        width: 177px;
+        height: 18px;
+        opacity: 1;
+        left: 38px;
+        top: 42px;
+        position: absolute;
+        
+        font-size: 21.61842px;
+        color: rgba(197, 125, 77, 1);
+      }
+      .coindetailitemline {
+        width: 575px;
+        height: 1px;
+        opacity: 0.45098039215686275;
+        top: 91px;
+        position: absolute;
+        
+      }
+    }
+  }
+  .coindetailcurcoin {
+    width: 184px;
+    height: 25px;
+    opacity: 1;
+    left: 212px;
+    top: 157px;
+    position: absolute;
+    
+    font-size: 26.16693px;
+    color: rgba(197, 125, 77, 1);
+  }
+}
--- a/src/components/comnewuserpop/comnewuserpop.jsx
+++ b/src/components/comnewuserpop/comnewuserpop.jsx
+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comnewuserpop.less';
+class Comnewuserpop extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  render() {
+    return (
+      <div className="newuserpop ">
+        <img className="newuserlight " src={this.state.resList['ca3ea540-2494-438f-b0f9-c48bb704a288'].url} />
+        <img className="newuserbamboo " src={this.state.resList['746b6019-76ee-490c-989c-1b21da2e7830'].url} />
+        <img className="newusertitle " src={this.state.resList['a17fac84-eb32-4fa6-8f9d-8be7650ffa58'].url} />
+        <span className="newusertips ">5g 竹子</span>
+        <img className="newuserbtn " src={this.state.resList['cf16e96a-ce27-43fd-80e8-a75c739b37fc'].url} />
+      </div>
+    );
+  }
+}
+export default Comnewuserpop;
--- a/src/components/comnewuserpop/comnewuserpop.less
+++ b/src/components/comnewuserpop/comnewuserpop.less
+.newuserpop {
+  width: 729px;
+  height: 843px;
+  opacity: 1;
+  left: 21px;
+  top: 220px;
+  position: absolute;
+  
+  .newuserlight {
+    width: 729px;
+    height: 745px;
+    opacity: 0.7607843137254902;
+    position: absolute;
+    
+  }
+  .newuserbamboo {
+    width: 373px;
+    height: 227px;
+    opacity: 1;
+    left: 184px;
+    top: 331px;
+    position: absolute;
+    
+  }
+  .newusertitle {
+    width: 331px;
+    height: 85px;
+    opacity: 1;
+    left: 190px;
+    top: 183px;
+    position: absolute;
+    
+  }
+  .newusertips {
+    width: 96px;
+    height: 31px;
+    opacity: 1;
+    left: 307px;
+    top: 599px;
+    position: absolute;
+    
+    font-size: 26.68238px;
+    color: rgba(255, 247, 188, 1);
+  }
+  .newuserbtn {
+    width: 428px;
+    height: 140px;
+    opacity: 1;
+    left: 137px;
+    top: 703px;
+    position: absolute;
+    
+  }
+}
--- a/src/components/comolduserpop/comolduserpop.jsx
+++ b/src/components/comolduserpop/comolduserpop.jsx
+'use strict';
+
+import React, { Component } from 'react';
+import EDPOP from '../../EdPop/EdPop';
+import EdPop from '../../EdPop/EdPopRedux/EdPop';
+import resList from '../../resconfig/resList';
+
+import './comolduserpop.less';
+class Comolduserpop extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  componentDidMount(){
+    console.log('弹窗属性--->olduserpop',this.props)
+  }
+  componentWillUnmount(){
+    console.log('olduserpopixezaile----------->>>>>')
+  }
+  render() {
+    return (
+      <div className="olduserpop ">
+        <img className="olduserlight " src={this.state.resList['ca3ea540-2494-438f-b0f9-c48bb704a288'].url} />
+        <img className="olduserbamboo " src={this.state.resList['b04cf277-5588-49d7-8872-aded42ef17aa'].url} />
+        <img className="oldusertitle " src={this.state.resList['3e8155f6-5fda-4657-8166-fecb794e176f'].url} />
+        <span className="oldusertips ">5g 竹子</span>
+        <img className="olduserbtn " onClick={()=>{EdPop.closePop()}}  src={this.state.resList['3efc781b-e73b-4cf7-bdd6-cf8cfdf50fd2'].url} />
+      </div>
+    );
+  }
+}
+export default Comolduserpop;
--- a/src/components/comolduserpop/comolduserpop.less
+++ b/src/components/comolduserpop/comolduserpop.less
+.olduserpop {
+  width: 729px;
+  height: 843px;
+  opacity: 1;
+  left: 21px;
+  top: 220px;
+  position: absolute;
+  
+  .olduserlight {
+    width: 729px;
+    height: 745px;
+    opacity: 0.7607843137254902;
+    position: absolute;
+    
+  }
+  .olduserbamboo {
+    width: 373px;
+    height: 227px;
+    opacity: 1;
+    left: 184px;
+    top: 331px;
+    position: absolute;
+    
+  }
+  .oldusertitle {
+    width: 348px;
+    height: 84px;
+    opacity: 1;
+    left: 181px;
+    top: 184px;
+    position: absolute;
+    
+  }
+  .oldusertips {
+    width: 96px;
+    height: 31px;
+    opacity: 1;
+    left: 307px;
+    top: 599px;
+    position: absolute;
+    
+    font-size: 26.68238px;
+    color: rgba(255, 247, 188, 1);
+  }
+  .olduserbtn {
+    width: 428px;
+    height: 140px;
+    opacity: 1;
+    left: 137px;
+    top: 703px;
+    position: absolute;
+    
+  }
+}
--- a/src/components/comrulepop/comrulepop.jsx
+++ b/src/components/comrulepop/comrulepop.jsx
+'use strict';
+
+import React, { Component } from 'react';
+import EDPOP from '../../EdPop/EdPop';
+import EdPop from '../../EdPop/EdPopRedux/EdPop';
+import resList from '../../resconfig/resList';
+
+import './comrulepop.less';
+class Comrulepop extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  render() {
+    return (
+      <div className="rulepop ">
+        <img className="rulebg " src={this.state.resList['822a7384-d0ca-4c50-be5c-6ce31e430b4b'].url} />
+        <img className="ruleclose " onClick={()=>{EdPop.closePop(true)}} src={this.state.resList['99d0cffb-8947-413b-9046-aa2119574d3e'].url} />
+        <span className="ruletext ">1. 活动规则内容活动规则内容活动规则内容 活动规则内容活动规则内容活动规</span>
+        <img className="rulepopscroll " src={this.state.resList['a2e2bf23-bc53-4d8f-8518-fb6bbb4e7cb4'].url} />
+      </div>
+    );
+  }
+}
+export default Comrulepop;
--- a/src/components/comrulepop/comrulepop.less
+++ b/src/components/comrulepop/comrulepop.less
+.rulepop {
+  width: 655px;
+  height: 761px;
+  opacity: 1;
+  left: 72px;
+  top: 406px;
+  position: absolute;
+  
+  .rulebg {
+    width: 606px;
+    height: 761px;
+    opacity: 1;
+    position: absolute;
+    
+  }
+  .ruleclose {
+    width: 119px;
+    height: 119px;
+    opacity: 1;
+    left: 536px;
+    top: 25px;
+    position: absolute;
+    
+  }
+  .ruletext {
+    width: 480px;
+    height: 65px;
+    opacity: 1;
+    left: 63px;
+    top: 186px;
+    position: absolute;
+    
+    font-size: 24.99852px;
+    color: rgba(190, 69, 2, 1);
+  }
+  .rulepopscroll {
+    width: 12px;
+    height: 192px;
+    opacity: 1;
+    left: 568px;
+    top: 226px;
+    position: absolute;
+    
+  }
+}
--- a/src/components/comselectpandapop/comselectpandapop.jsx
+++ b/src/components/comselectpandapop/comselectpandapop.jsx
+'use strict';
+
+import React, { Component } from 'react';
+import EDPOP from '../../EdPop/EdPop';
+import resList from '../../resconfig/resList';
+
+import './comselectpandapop.less';
+class Comselectpandapop extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  render() {
+    return (
+      <div className="selectpandapop ">
+        <img className="selectpandabg " src={this.state.resList['21b1ee51-be1b-4d18-99a6-294d55599f95'].url} />
+        <img className="selectpandaclose " onClick={()=>{EDPOP.closeCurPop()}} src={this.state.resList['99d0cffb-8947-413b-9046-aa2119574d3e'].url} />
+        <img className="selectpandatitle " src={this.state.resList['cfb47d0f-11a2-4475-8773-1a6145bef210'].url} />
+        <div className="selectpandainput ">
+          <img className="selectpandainputbg " src={this.state.resList['c33140fd-4050-433a-9f9c-3558369dfb5a'].url} />
+          <span className="selectpandainputlabel ">请输入昵称</span>
+        </div>
+        <img className="selectpandabtn " src={this.state.resList['4f483f66-cfd3-4f9e-9e44-019550bc0781'].url} />
+        <div className="selectpandaavatargroup ">
+          <div className="selecpandaavatargroupl ">
+            <img className="selecavatarlselect " src={this.state.resList['f42426f2-be18-42f5-98ea-91a6bfe48e7a'].url} />
+            <img className="selecavatarlsmall " src={this.state.resList['99c24df0-8c5d-43f1-abd1-27226dae91aa'].url} />
+            <img className="selecavatarlbig " src={this.state.resList['11cc2bd4-2192-4c5e-a181-7b3f6efe9199'].url} />
+          </div>
+          <div className="selecpandaavatargroupr ">
+            <img className="selecavatarrselect " src={this.state.resList['f42426f2-be18-42f5-98ea-91a6bfe48e7a'].url} />
+            <img className="selecavatarrsmall " src={this.state.resList['ba09f353-4c59-4f25-9aaa-206eac8199c3'].url} />
+            <img className="selecavatarrbig " src={this.state.resList['51558f7f-426d-45aa-8608-e4f97083c3cb'].url} />
+          </div>
+          <div className="selecpandaavatargroupm ">
+            <img className="selecavatarmselect " src={this.state.resList['f42426f2-be18-42f5-98ea-91a6bfe48e7a'].url} />
+            <img className="selecavatarmsmall " src={this.state.resList['e2808f4a-5282-405e-9b4f-aa71f76cada6'].url} />
+            <img className="selecavatarmbig " src={this.state.resList['989e13ab-c8da-4490-b363-4355e149b22f'].url} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+export default Comselectpandapop;
--- a/src/components/comselectpandapop/comselectpandapop.less
+++ b/src/components/comselectpandapop/comselectpandapop.less
+.selectpandapop {
+  width: 655px;
+  height: 736px;
+  opacity: 1;
+  left: 72px;
+  top: 431px;
+  position: absolute;
+  
+  .selectpandabg {
+    width: 606px;
+    height: 689px;
+    opacity: 1;
+    top: 47px;
+    position: absolute;
+    
+  }
+  .selectpandaclose {
+    width: 119px;
+    height: 119px;
+    opacity: 1;
+    left: 536px;
+    position: absolute;
+    
+  }
+  .selectpandatitle {
+    width: 397px;
+    height: 85px;
+    opacity: 1;
+    left: 96px;
+    top: 123px;
+    position: absolute;
+    
+  }
+  .selectpandainput {
+    width: 411px;
+    height: 79px;
+    opacity: 1;
+    left: 97px;
+    top: 430px;
+    position: absolute;
+    
+    .selectpandainputbg {
+      width: 411px;
+      height: 79px;
+      opacity: 1;
+      position: absolute;
+      
+    }
+    .selectpandainputlabel {
+      width: 118px;
+      height: 24px;
+      opacity: 1;
+      left: 147px;
+      top: 27px;
+      position: absolute;
+      
+      font-size: 24px;
+      color: rgba(197, 125, 77, 1);
+    }
+  }
+  .selectpandabtn {
+    width: 428px;
+    height: 140px;
+    opacity: 1;
+    left: 82px;
+    top: 544px;
+    position: absolute;
+    
+  }
+  .selectpandaavatargroup {
+    width: 496px;
+    height: 171px;
+    opacity: 1;
+    left: 54px;
+    top: 230px;
+    position: absolute;
+    
+    .selecpandaavatargroupl {
+      width: 165px;
+      height: 165px;
+      opacity: 1;
+      top: 3px;
+      position: absolute;
+      
+      .selecavatarlselect {
+        width: 165px;
+        height: 165px;
+        opacity: 1;
+        position: absolute;
+        
+      }
+      .selecavatarlsmall {
+        width: 132px;
+        height: 132px;
+        opacity: 1;
+        left: 18px;
+        top: 22px;
+        position: absolute;
+        
+      }
+      .selecavatarlbig {
+        width: 142px;
+        height: 142px;
+        opacity: 1;
+        left: 16px;
+        top: 16px;
+        position: absolute;
+        
+      }
+    }
+    .selecpandaavatargroupr {
+      width: 165px;
+      height: 165px;
+      opacity: 1;
+      left: 331px;
+      position: absolute;
+      
+      .selecavatarrselect {
+        width: 165px;
+        height: 165px;
+        opacity: 1;
+        position: absolute;
+        
+      }
+      .selecavatarrsmall {
+        width: 131px;
+        height: 132px;
+        opacity: 1;
+        left: 17px;
+        top: 25px;
+        position: absolute;
+        
+      }
+      .selecavatarrbig {
+        width: 141px;
+        height: 142px;
+        opacity: 1;
+        left: 16px;
+        top: 19px;
+        position: absolute;
+        
+      }
+    }
+    .selecpandaavatargroupm {
+      width: 165px;
+      height: 165px;
+      opacity: 1;
+      left: 166px;
+      top: 6px;
+      position: absolute;
+      
+      .selecavatarmselect {
+        width: 165px;
+        height: 165px;
+        opacity: 1;
+        position: absolute;
+        
+      }
+      .selecavatarmsmall {
+        width: 131px;
+        height: 132px;
+        opacity: 1;
+        left: 16px;
+        top: 19px;
+        position: absolute;
+        
+      }
+      .selecavatarmbig {
+        width: 142px;
+        height: 142px;
+        opacity: 1;
+        left: 12px;
+        top: 19px;
+        position: absolute;
+        
+      }
+    }
+  }
+}
--- a/src/components/comtaskcenterpop/comtaskcenterpop.jsx
+++ b/src/components/comtaskcenterpop/comtaskcenterpop.jsx
+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comtaskcenterpop.less';
+class Comtaskcenterpop extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  render() {
+    return (
+      <div className="taskcenterpop ">
+        <img className="taskbg " src={this.state.resList['3b1fa373-c9e7-43f8-9c9c-36972088438b'].url} />
+        <img className="taskclose " src={this.state.resList['128610f9-027f-4989-8c04-9d444e1790fd'].url} />
+        <div className="tasklistgroup ">
+          <div className="tasklist ">
+            <div className="taskitem ">
+              <img className="taskitembg " src={this.state.resList['80bc2f88-b9c2-4958-be91-f665c219f1bc'].url} />
+              <img className="taskitemicon " src={this.state.resList['803d4a5a-d665-4472-b5de-a5941eef604a'].url} />
+              <img className="taskitemdonebtn " src={this.state.resList['b6637d66-d14d-4380-92ec-775c1f182338'].url} />
+              <img className="taskitemsharebtn " src={this.state.resList['b73069a5-4843-47d2-bb1a-a4b2c1d2ae64'].url} />
+              <span className="taskitemname ">分享好友（0/3）</span>
+              <span className="taskitemrecord ">奖励竹子+10g，每日3次</span>
+              <span className="taskitemtips ">每成功分享给1位好友</span>
+              <div className="taskitemprogressgroup ">
+                <img
+                  className="taskitemprogressbg "
+                  src={this.state.resList['045ad3d3-cf02-40a1-a035-22d8b87dca43'].url}
+                />
+                <img
+                  className="taskitemprogressfront "
+                  src={this.state.resList['82ec79a8-96ad-4eb1-9e74-5c0617cf8075'].url}
+                />
+              </div>
+            </div>
+          </div>
+          <img className="taskscrollbar " src={this.state.resList['a2e2bf23-bc53-4d8f-8518-fb6bbb4e7cb4'].url} />
+        </div>
+        <img className="tasksignbg " src={this.state.resList['bb795927-834d-4198-a944-cc0fe68f35be'].url} />
+        <img className="tasksignsignedbtn " src={this.state.resList['cee79f5c-779e-4d3d-b3e0-48a8fc294f38'].url} />
+        <img className="tasksigndosignbtn " src={this.state.resList['e79dd83c-c8f3-4e56-82e0-40405f7f12ca'].url} />
+        <img className="tasksignresignbtn " src={this.state.resList['b2e6a86c-02a4-4465-8d54-345ea4580012'].url} />
+        <div className="tasksignitem ">
+          <img
+            className="tasksignitemsignedicon "
+            src={this.state.resList['610bfd58-bee4-424d-9982-18caa6100ed0'].url}
+          />
+          <div className="tasksignitemsmalbam ">
+            <img
+              className="tasksignitemsmalbamicon "
+              src={this.state.resList['c55153c1-fc8b-4abd-9652-e01777980dc0'].url}
+            />
+            <span className="tasksignitemsmalbamcnt ">10g</span>
+          </div>
+          <div className="tasksignitemmidbam ">
+            <img
+              className="tasksignitemmidbamicon "
+              src={this.state.resList['b6864083-786d-4c32-8770-e76a0858a89f'].url}
+            />
+            <span className="tasksignitemmidbamcnt ">20g</span>
+          </div>
+          <div className="tasksignitembigbam ">
+            <img
+              className="tasksignitembigbamicon "
+              src={this.state.resList['8560a8e5-9511-4fa0-a63f-e3044ddb8159'].url}
+            />
+            <span className="tasksignitembigbamcnt ">50g</span>
+          </div>
+          <span className="tasksignitemday ">第1天</span>
+        </div>
+      </div>
+    );
+  }
+}
+export default Comtaskcenterpop;
--- a/src/components/comtaskcenterpop/comtaskcenterpop.less
+++ b/src/components/comtaskcenterpop/comtaskcenterpop.less
+.taskcenterpop {
+  width: 750px;
+  height: 1094px;
+  opacity: 1;
+  top: 530px;
+  position: absolute;
+  
+  .taskbg {
+    width: 750px;
+    height: 1046px;
+    opacity: 1;
+    top: 48px;
+    position: absolute;
+    
+  }
+  .taskclose {
+    width: 121px;
+    height: 122px;
+    opacity: 1;
+    left: 628px;
+    position: absolute;
+    
+  }
+  .tasklistgroup {
+    width: 642px;
+    height: 274px;
+    opacity: 1;
+    left: 62px;
+    top: 307px;
+    position: absolute;
+    
+    .tasklist {
+      width: 627px;
+      height: 170px;
+      opacity: 1;
+      position: absolute;
+      
+      .taskitem {
+        width: 627px;
+        height: 170px;
+        opacity: 1;
+        position: absolute;
+        
+        .taskitembg {
+          width: 627px;
+          height: 169px;
+          opacity: 1;
+          top: 1px;
+          position: absolute;
+          
+        }
+        .taskitemicon {
+          width: 155px;
+          height: 156px;
+          opacity: 1;
+          left: 2px;
+          position: absolute;
+          
+        }
+        .taskitemdonebtn {
+          width: 161px;
+          height: 75px;
+          opacity: 1;
+          left: 437px;
+          top: 48px;
+          position: absolute;
+          
+        }
+        .taskitemsharebtn {
+          width: 161px;
+          height: 75px;
+          opacity: 1;
+          left: 437px;
+          top: 48px;
+          position: absolute;
+          
+        }
+        .taskitemname {
+          width: 173px;
+          height: 28px;
+          opacity: 1;
+          left: 154px;
+          top: 33px;
+          position: absolute;
+          
+          font-size: 26px;
+          color: rgba(197, 125, 77, 1);
+        }
+        .taskitemrecord {
+          width: 252px;
+          height: 26px;
+          opacity: 1;
+          left: 156px;
+          top: 74px;
+          position: absolute;
+          
+          font-size: 24px;
+          color: rgba(255, 91, 0, 1);
+        }
+        .taskitemtips {
+          width: 224px;
+          height: 24px;
+          opacity: 1;
+          left: 155px;
+          top: 112px;
+          position: absolute;
+          
+          font-size: 24px;
+          color: rgba(255, 91, 0, 1);
+        }
+        .taskitemprogressgroup {
+          width: 97px;
+          height: 14px;
+          opacity: 1;
+          left: 340px;
+          top: 40px;
+          position: absolute;
+          
+          .taskitemprogressbg {
+            width: 97px;
+            height: 14px;
+            opacity: 1;
+            position: absolute;
+            
+          }
+          .taskitemprogressfront {
+            width: 97px;
+            height: 14px;
+            opacity: 1;
+            position: absolute;
+            
+          }
+        }
+      }
+    }
+    .taskscrollbar {
+      width: 12px;
+      height: 192px;
+      opacity: 1;
+      left: 630px;
+      top: 82px;
+      position: absolute;
+      
+    }
+  }
+  .tasksignbg {
+    width: 461px;
+    height: 10px;
+    opacity: 1;
+    left: 76px;
+    top: 208px;
+    position: absolute;
+    
+  }
+  .tasksignsignedbtn {
+    width: 131px;
+    height: 62px;
+    opacity: 1;
+    left: 581px;
+    top: 174px;
+    position: absolute;
+    
+  }
+  .tasksigndosignbtn {
+    width: 131px;
+    height: 62px;
+    opacity: 1;
+    left: 581px;
+    top: 174px;
+    position: absolute;
+    
+  }
+  .tasksignresignbtn {
+    width: 131px;
+    height: 62px;
+    opacity: 1;
+    left: 581px;
+    top: 174px;
+    position: absolute;
+    
+  }
+  .tasksignitem {
+    width: 522px;
+    height: 95px;
+    opacity: 1;
+    left: 43px;
+    top: 169px;
+    position: absolute;
+    
+    .tasksignitemsignedicon {
+      width: 54px;
+      height: 53px;
+      opacity: 1;
+      top: 17px;
+      position: absolute;
+      
+    }
+    .tasksignitemsmalbam {
+      width: 53px;
+      height: 52px;
+      opacity: 1;
+      left: 68px;
+      top: 10px;
+      position: absolute;
+      
+      .tasksignitemsmalbamicon {
+        width: 53px;
+        height: 52px;
+        opacity: 1;
+        position: absolute;
+        
+      }
+      .tasksignitemsmalbamcnt {
+        width: 26px;
+        height: 15px;
+        opacity: 1;
+        left: 17px;
+        top: 35px;
+        position: absolute;
+        
+        font-size: 17.28px;
+        color: rgba(255, 247, 229, 1);
+      }
+    }
+    .tasksignitemmidbam {
+      width: 70px;
+      height: 52px;
+      opacity: 1;
+      left: 138px;
+      top: 9px;
+      position: absolute;
+      
+      .tasksignitemmidbamicon {
+        width: 70px;
+        height: 52px;
+        opacity: 1;
+        position: absolute;
+        
+      }
+      .tasksignitemmidbamcnt {
+        width: 26px;
+        height: 15px;
+        opacity: 1;
+        left: 22px;
+        top: 35px;
+        position: absolute;
+        
+        font-size: 17.28px;
+        color: rgba(255, 247, 229, 1);
+      }
+    }
+    .tasksignitembigbam {
+      width: 70px;
+      height: 62px;
+      opacity: 1;
+      left: 452px;
+      position: absolute;
+      
+      .tasksignitembigbamicon {
+        width: 70px;
+        height: 62px;
+        opacity: 1;
+        position: absolute;
+        
+      }
+      .tasksignitembigbamcnt {
+        width: 26px;
+        height: 15px;
+        opacity: 1;
+        left: 23px;
+        top: 45px;
+        position: absolute;
+        
+        font-size: 17.28px;
+        color: rgba(255, 247, 229, 1);
+      }
+    }
+    .tasksignitemday {
+      width: 55px;
+      height: 21px;
+      opacity: 1;
+      top: 74px;
+      position: absolute;
+      
+      font-size: 27.90252px;
+      color: rgba(209, 166, 108, 1);
+    }
+  }
+}
--- a/src/components/comwordcenterpop/comwordcenterpop.jsx
+++ b/src/components/comwordcenterpop/comwordcenterpop.jsx
+'use strict';
+
+import React, { Component } from 'react';
+import EDPOP from '../../EdPop/EdPop';
+import { useEdDebounce } from '../../hooksTest/EdDebounce';
+import resList from '../../resconfig/resList';
+
+import './comwordcenterpop.less';
+class Comwordcenterpop extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+
+  render() {
+    return (
+      <div className="wordcenterpop ">
+        <img className="wordcenterbg " src={this.state.resList['843978f3-f3f2-4ded-8dc9-b2cf82fbdbb8'].url} />
+        <span className="wordcenterusercoin ">当前金币数：200</span>
+        <div className="wordcenteritem ">
+          <img className="wordcenteritembg " src={this.state.resList['f8cbfed2-0ba1-4679-8fe3-bf5982353d36'].url} />
+          <img className="wordcenteritemimg " src={this.state.resList['a9e730dd-d407-4714-88f2-c60f573dd290'].url} />
+          <span className="wordcenteritemtime ">工作时长：5h</span>
+          <span className="wordcenteritemrecord ">薪酬：200金币</span>
+          <span className="wordcentername ">卖萌唱歌</span>
+          <img
+            className="wordcenteritemworking "
+            src={this.state.resList['67f5552a-7f12-4846-a953-0886b5bb77f9'].url}
+          />
+        </div>
+        <img className="wordcenterclose " onClick={()=>{useEdDebounce(()=>{console.log('aaaa')})}} src={this.state.resList['5ed48e98-4aff-48b3-94ce-b1cc99426c02'].url} />
+        <img className="wordcenterscrollbar " src={this.state.resList['a2e2bf23-bc53-4d8f-8518-fb6bbb4e7cb4'].url} />
+      </div>
+    );
+  }
+}
+export default Comwordcenterpop;
--- a/src/components/comwordcenterpop/comwordcenterpop.less
+++ b/src/components/comwordcenterpop/comwordcenterpop.less
+.wordcenterpop {
+  width: 750px;
+  height: 1164px;
+  opacity: 1;
+  top: 460px;
+  position: absolute;
+  
+  .wordcenterbg {
+    width: 750px;
+    height: 1164px;
+    opacity: 1;
+    position: absolute;
+    
+  }
+  .wordcenterusercoin {
+    width: 258px;
+    height: 34px;
+    opacity: 1;
+    left: 81px;
+    top: 287px;
+    position: absolute;
+    
+    font-size: 36px;
+    color: rgba(197, 125, 77, 1);
+  }
+  .wordcenteritem {
+    width: 270px;
+    height: 358px;
+    opacity: 1;
+    left: 80px;
+    top: 354px;
+    position: absolute;
+    
+    .wordcenteritembg {
+      width: 270px;
+      height: 356px;
+      opacity: 1;
+      position: absolute;
+      
+    }
+    .wordcenteritemimg {
+      width: 217px;
+      height: 170px;
+      opacity: 1;
+      left: 26px;
+      top: 62px;
+      position: absolute;
+      
+    }
+    .wordcenteritemtime {
+      width: 149px;
+      height: 25px;
+      opacity: 1;
+      left: 35px;
+      top: 259px;
+      position: absolute;
+      
+      font-size: 25.25242px;
+      color: rgba(197, 125, 77, 1);
+    }
+    .wordcenteritemrecord {
+      width: 158px;
+      height: 24px;
+      opacity: 1;
+      left: 38px;
+      top: 300px;
+      position: absolute;
+      
+      font-size: 25.25242px;
+      color: rgba(197, 125, 77, 1);
+    }
+    .wordcentername {
+      width: 98px;
+      height: 24px;
+      opacity: 1;
+      left: 87px;
+      top: 10px;
+      position: absolute;
+      
+      font-size: 25.25242px;
+      color: rgba(255, 255, 255, 1);
+    }
+    .wordcenteritemworking {
+      width: 270px;
+      height: 358px;
+      opacity: 1;
+      position: absolute;
+      
+    }
+  }
+  .wordcenterclose {
+    width: 113px;
+    height: 121px;
+    opacity: 1;
+    left: 637px;
+    top: 19px;
+    position: absolute;
+    
+  }
+  .wordcenterscrollbar {
+    width: 12px;
+    height: 192px;
+    opacity: 1;
+    left: 704px;
+    top: 400px;
+    position: absolute;
+    
+  }
+}
--- a/src/components/comworksurepop/comworksurepop.jsx
+++ b/src/components/comworksurepop/comworksurepop.jsx
+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comworksurepop.less';
+class Comworksurepop extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  render() {
+    return (
+      <div className="worksurepop ">
+        <img className="worksurebg " src={this.state.resList['fa069fd7-5a8c-4bd2-af42-7da39f692d6d'].url} />
+        <img className="worksureclose " src={this.state.resList['eec6ec93-1486-4877-9d65-005e5ead3157'].url} />
+        <span className="worksurename ">开始卖萌唱歌了哦</span>
+        <span className="worksurerecord ">工作5h可赚取200金币</span>
+        <img className="worksureno " src={this.state.resList['57a12e6a-a051-40bc-a689-af7eee1a21f7'].url} />
+        <img className="worksurestart " src={this.state.resList['1176e8bc-fb74-4910-98c5-55a06d67b546'].url} />
+      </div>
+    );
+  }
+}
+export default Comworksurepop;
--- a/src/components/comworksurepop/comworksurepop.less
+++ b/src/components/comworksurepop/comworksurepop.less
+.worksurepop {
+  width: 654px;
+  height: 492px;
+  opacity: 1;
+  left: 72px;
+  top: 431px;
+  position: absolute;
+  
+  .worksurebg {
+    width: 606px;
+    height: 445px;
+    opacity: 1;
+    top: 47px;
+    position: absolute;
+    
+  }
+  .worksureclose {
+    width: 118px;
+    height: 118px;
+    opacity: 1;
+    left: 536px;
+    position: absolute;
+    
+  }
+  .worksurename {
+    width: 332px;
+    height: 38px;
+    opacity: 1;
+    left: 130px;
+    top: 170px;
+    position: absolute;
+    
+    font-size: 24px;
+    color: rgba(181, 79, 39, 1);
+  }
+  .worksurerecord {
+    width: 279px;
+    height: 27px;
+    opacity: 1;
+    left: 156px;
+    top: 233px;
+    position: absolute;
+    
+    font-size: 24px;
+    color: rgba(181, 79, 39, 1);
+  }
+  .worksureno {
+    width: 254px;
+    height: 113px;
+    opacity: 1;
+    left: 42px;
+    top: 317px;
+    position: absolute;
+    
+  }
+  .worksurestart {
+    width: 254px;
+    height: 113px;
+    opacity: 1;
+    left: 311px;
+    top: 317px;
+    position: absolute;
+    
+  }
+}
--- a/src/hooksTest/EdBarrage.js
+++ b/src/hooksTest/EdBarrage.js
+import React from 'react';
+import { useState } from 'react';
+export default function EdBarrage() {
+    const [textArr,setTextArr] = useState();
+    const [] = useState();
+    return (
+        React.createElement('div')
+    )
+
+}
\ No newline at end of file
--- a/src/hooksTest/EdDebounce.js
+++ b/src/hooksTest/EdDebounce.js
+import react, { useRef } from "react";
+
+export function useEdDebounce(fn, delay = 2000) {
+    const { current } = useRef({});
+
+    return function call(...args) {
+        if (!current.timer) {
+            current.timer = setTimeout(() => {
+                delete current.timer;
+            }, delay)
+            fn && fn(...args)
+        }
+    };
+}
\ No newline at end of file
--- a/src/pages/pageindex/pageindex.jsx
+++ b/src/pages/pageindex/pageindex.jsx
+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pageindex.less';
+class Pageindex extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  render() {
+    return (
+      <div className="index ">
+        <img className="indexbg " src={this.state.resList['0d2db694-79a4-438e-a99f-b1d1e9d8c31a'].url} />
+        <img className="indexpandaimg " src={this.state.resList['4dd2a061-5659-4db8-a2ad-f26dea30a6fe'].url} />
+        <div className="indexpowergroup ">
+          <img className="indexpowerbg " src={this.state.resList['998821a6-26df-420b-8e2b-93c47c742c8a'].url} />
+          <img className="indexpowerprogress " src={this.state.resList['8cc6a7c8-f16f-4370-bc48-e8fa5ed82dce'].url} />
+          <div className="indexpowertips ">
+            <img
+              className="da_gong_wan_cheng_la "
+              src={this.state.resList['06e976c5-4f80-469d-a07e-8a17001d3358'].url}
+            />
+            <img
+              className="xiong_mao_ji_e_yi_zan_ting "
+              src={this.state.resList['88f964e6-3311-4a27-9415-2aa8f3a78376'].url}
+            />
+            <img
+              className="ji_e_zhuang_tai_hui_ting_zhi "
+              src={this.state.resList['b7d6df33-d628-45a5-bc64-b512abd95033'].url}
+            />
+            <img className="ti_li_zhi_di_yu_10 " src={this.state.resList['afe9b5c4-3272-497b-80ae-f4cacbad0276'].url} />
+          </div>
+          <span className="indexpowercnt ">50/100</span>
+        </div>
+        <div className="indexdialoggroup ">
+          <img className="indexdialogbg " src={this.state.resList['1153c61a-9d2b-4874-a3b0-c0d5b729b92a'].url} />
+          <span className="indexdialoglabel ">要努力打工才能赚更多的金币哦</span>
+        </div>
+        <div className="indexworkinggroup ">
+          <img className="indexworkingbg " src={this.state.resList['09f6860a-3469-4efd-82f2-214e36e4872a'].url} />
+          <span className="indexworkingtips ">打工中 24:59:59</span>
+        </div>
+        <div className="indexworkpausegroup ">
+          <img className="indexworkpasuebg " src={this.state.resList['d1f91f6c-a71b-4544-b45e-bbf47f7c7edb'].url} />
+          <span className="indexworkpausetips ">暂停工作 24:59:59</span>
+        </div>
+        <div className="indextopelegroup ">
+          <div className="indexpandainfogroup ">
+            <div className="indexavatargroup ">
+              <img
+                className="indexavatargroupbg "
+                src={this.state.resList['3fdc391a-ca9c-4d2c-8be2-ef6c25ea1de1'].url}
+              />
+              <div className="indexavatar ">
+                <img
+                  className="indexavatarbgicon "
+                  src={this.state.resList['62b63d48-8e5b-4026-a9f9-df065752c6bc'].url}
+                />
+                <img
+                  className="indexavataricon "
+                  src={this.state.resList['41696ced-26ad-405c-a05c-92bd8aa41ef0'].url}
+                />
+              </div>
+            </div>
+            <span className="indexpandaname ">小熊猫波波</span>
+          </div>
+          <div className="indexcoingroup ">
+            <img className="indexcoiniconbg " src={this.state.resList['d6ff1dd3-45aa-4412-bdbb-aa504756b9c5'].url} />
+            <span className="indexcoincnt ">金币：2000</span>
+          </div>
+          <img className="indexmyprize " src={this.state.resList['d2734d9d-2562-4199-bcd7-bed85c6d6aae'].url} />
+          <img className="indexrulebtn " src={this.state.resList['154c842b-b113-4419-a780-278fe8d48fcd'].url} />
+        </div>
+        <div className="indexbottombtngroup ">
+          <img className="indexwordbtn " src={this.state.resList['1077874b-dedd-4ed0-a11f-5c9835d60e57'].url} />
+          <img className="indextaskbtn " src={this.state.resList['b8657587-9008-4e87-9679-da15808d5b8b'].url} />
+          <img className="indexexchangebtn " src={this.state.resList['41d10827-45e5-4d22-98b3-998ad15b16f1'].url} />
+          <div className="indexbamboogroup ">
+            <img className="indexbanbooicon " src={this.state.resList['c8f642c7-717c-4c7d-a1a8-37618777de30'].url} />
+            <span className="indexbamboocnt ">20g</span>
+          </div>
+        </div>
+        <div className="indexcoinbaggroup ">
+          <img className="indexcoinbgicon " src={this.state.resList['52483e84-90b2-4509-8830-e30b55f5f31d'].url} />
+          <img className="indexcoinbgtips " src={this.state.resList['420cdc56-d8b9-41fd-8512-41168d642a73'].url} />
+        </div>
+      </div>
+    );
+  }
+}
+export default Pageindex;
--- a/src/pages/pageindex/pageindex.less
+++ b/src/pages/pageindex/pageindex.less
+.index {
+  width: 750px;
+  height: 1624px;
+  opacity: 1;
+  position: absolute;
+  .indexbg {
+    width: 750px;
+    height: 1624px;
+    opacity: 1;
+    position: absolute;
+    
+  }
+  .indexpandaimg {
+    width: 290px;
+    height: 388px;
+    opacity: 1;
+    left: 236px;
+    top: 707px;
+    position: absolute;
+    
+  }
+  .indexpowergroup {
+    width: 341px;
+    height: 88px;
+    opacity: 1;
+    left: 204px;
+    top: 1123px;
+    position: absolute;
+    
+    .indexpowerbg {
+      width: 278px;
+      height: 44px;
+      opacity: 1;
+      left: 32px;
+      position: absolute;
+      
+    }
+    .indexpowerprogress {
+      width: 175px;
+      height: 39px;
+      opacity: 1;
+      left: 131px;
+      top: 3px;
+      position: absolute;
+      
+    }
+    .indexpowertips {
+      width: 341px;
+      height: 33px;
+      opacity: 1;
+      top: 55px;
+      position: absolute;
+      
+      .da_gong_wan_cheng_la {
+        width: 161px;
+        height: 29px;
+        opacity: 1;
+        left: 90px;
+        top: 3px;
+        position: absolute;
+        
+      }
+      .xiong_mao_ji_e_yi_zan_ting {
+        width: 268px;
+        height: 29px;
+        opacity: 1;
+        left: 37px;
+        top: 4px;
+        position: absolute;
+        
+      }
+      .ji_e_zhuang_tai_hui_ting_zhi {
+        width: 268px;
+        height: 29px;
+        opacity: 1;
+        left: 37px;
+        top: 3px;
+        position: absolute;
+        
+      }
+      .ti_li_zhi_di_yu_10 {
+        width: 341px;
+        height: 26px;
+        opacity: 1;
+        position: absolute;
+        
+      }
+    }
+    .indexpowercnt {
+      width: 77px;
+      height: 24px;
+      opacity: 1;
+      left: 222px;
+      top: 11px;
+      position: absolute;
+      
+      font-size: 64.55268px;
+      color: rgba(253, 76, 15, 1);
+    }
+  }
+  .indexdialoggroup {
+    width: 441px;
+    height: 97px;
+    opacity: 1;
+    left: 156px;
+    top: 590px;
+    position: absolute;
+    
+    .indexdialogbg {
+      width: 441px;
+      height: 97px;
+      opacity: 1;
+      position: absolute;
+      
+    }
+    .indexdialoglabel {
+      width: 382px;
+      height: 27px;
+      opacity: 1;
+      left: 34px;
+      top: 23px;
+      position: absolute;
+      
+      font-size: 48.2262px;
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+  .indexworkinggroup {
+    width: 224px;
+    height: 39px;
+    opacity: 1;
+    left: 263px;
+    top: 539px;
+    position: absolute;
+    
+    .indexworkingbg {
+      width: 224px;
+      height: 39px;
+      opacity: 0.7294117647058823;
+      position: absolute;
+      
+    }
+    .indexworkingtips {
+      width: 175px;
+      height: 23px;
+      opacity: 1;
+      left: 24px;
+      top: 8px;
+      position: absolute;
+      
+      font-size: 72.33444px;
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+  .indexworkpausegroup {
+    width: 247px;
+    height: 39px;
+    opacity: 1;
+    left: 250px;
+    top: 539px;
+    position: absolute;
+    
+    .indexworkpasuebg {
+      width: 247px;
+      height: 39px;
+      opacity: 0.7294117647058823;
+      position: absolute;
+      
+    }
+    .indexworkpausetips {
+      width: 198px;
+      height: 23px;
+      opacity: 1;
+      left: 25px;
+      top: 8px;
+      position: absolute;
+      
+      font-size: 72.33444px;
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+  .indextopelegroup {
+    width: 716px;
+    height: 353px;
+    opacity: 1;
+    left: 34px;
+    top: 233px;
+    position: absolute;
+    
+    .indexpandainfogroup {
+      width: 327px;
+      height: 105px;
+      opacity: 1;
+      top: 7px;
+      position: absolute;
+      
+      .indexavatargroup {
+        width: 327px;
+        height: 105px;
+        opacity: 1;
+        position: absolute;
+        
+        .indexavatargroupbg {
+          width: 295px;
+          height: 89px;
+          opacity: 1;
+          left: 32px;
+          top: 9px;
+          position: absolute;
+          
+        }
+        .indexavatar {
+          width: 105px;
+          height: 105px;
+          opacity: 1;
+          position: absolute;
+          
+          .indexavatarbgicon {
+            width: 105px;
+            height: 105px;
+            opacity: 1;
+            position: absolute;
+            
+          }
+          .indexavataricon {
+            width: 90px;
+            height: 90px;
+            opacity: 1;
+            left: 7px;
+            top: 7px;
+            position: absolute;
+            
+          }
+        }
+      }
+      .indexpandaname {
+        width: 158px;
+        height: 30px;
+        opacity: 1;
+        left: 124px;
+        top: 37px;
+        position: absolute;
+        
+        font-size: 71.71085px;
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+    .indexcoingroup {
+      width: 288px;
+      height: 87px;
+      opacity: 1;
+      left: 12px;
+      top: 137px;
+      position: absolute;
+      
+      .indexcoiniconbg {
+        width: 288px;
+        height: 87px;
+        opacity: 1;
+        position: absolute;
+        
+      }
+      .indexcoincnt {
+        width: 149px;
+        height: 27px;
+        opacity: 1;
+        left: 96px;
+        top: 31px;
+        position: absolute;
+        
+        font-size: 71.71085px;
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+    .indexmyprize {
+      width: 183px;
+      height: 179px;
+      opacity: 1;
+      left: 533px;
+      top: 174px;
+      position: absolute;
+      
+    }
+    .indexrulebtn {
+      width: 167px;
+      height: 179px;
+      opacity: 1;
+      left: 549px;
+      position: absolute;
+      
+    }
+  }
+  .indexbottombtngroup {
+    width: 690px;
+    height: 222px;
+    opacity: 1;
+    left: 48px;
+    top: 1196px;
+    position: absolute;
+    
+    .indexwordbtn {
+      width: 182px;
+      height: 166px;
+      opacity: 1;
+      top: 47px;
+      position: absolute;
+      
+    }
+    .indextaskbtn {
+      width: 173px;
+      height: 164px;
+      opacity: 1;
+      left: 160px;
+      top: 49px;
+      position: absolute;
+      
+    }
+    .indexexchangebtn {
+      width: 173px;
+      height: 164px;
+      opacity: 1;
+      left: 310px;
+      top: 49px;
+      position: absolute;
+      
+    }
+    .indexbamboogroup {
+      width: 225px;
+      height: 222px;
+      opacity: 1;
+      left: 465px;
+      position: absolute;
+      
+      .indexbanbooicon {
+        width: 225px;
+        height: 222px;
+        opacity: 1;
+        position: absolute;
+        
+      }
+      .indexbamboocnt {
+        width: 72px;
+        height: 41px;
+        opacity: 1;
+        left: 59px;
+        top: 133px;
+        position: absolute;
+        
+        font-size: 17.28px;
+        color: rgba(255, 247, 229, 1);
+      }
+    }
+  }
+  .indexcoinbaggroup {
+    width: 129px;
+    height: 158px;
+    opacity: 1;
+    left: 162px;
+    top: 948px;
+    position: absolute;
+    
+    .indexcoinbgicon {
+      width: 129px;
+      height: 124px;
+      opacity: 1;
+      top: 34px;
+      position: absolute;
+      
+    }
+    .indexcoinbgtips {
+      width: 72px;
+      height: 28px;
+      opacity: 1;
+      left: 30px;
+      position: absolute;
+      
+    }
+  }
+}
--- a/src/pages/pageloading/pageloading.jsx
+++ b/src/pages/pageloading/pageloading.jsx
+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pageloading.less';
+class Pageloading extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  render() {
+    return (
+      <div className="loading ">
+        <img className="loadingbg " src={this.state.resList['d58365a9-c9cf-4119-9b52-0d624710a014'].url} />
+        <div className="loadingprogressgroup ">
+          <img className="loadingprogressbg " src={this.state.resList['ce5b6bec-106e-4e8c-b9f7-1e603ddec307'].url} />
+          <img className="loadingprogressfront " src={this.state.resList['cf20951b-f22c-490d-a668-fb85b8f36086'].url} />
+        </div>
+        <span className="loadingtips ">72%</span>
+        <img className="loadingpandaimg " src={this.state.resList['2e1b6984-9042-4e5a-8f3c-e67a92be2532'].url} />
+      </div>
+    );
+  }
+}
+export default Pageloading;
--- a/src/pages/pageloading/pageloading.less
+++ b/src/pages/pageloading/pageloading.less
+.loading {
+  width: 750px;
+  height: 1624px;
+  opacity: 1;
+  position: absolute;
+  
+  .loadingbg {
+    width: 750px;
+    height: 1624px;
+    opacity: 1;
+    position: absolute;
+    
+  }
+  .loadingprogressgroup {
+    width: 615px;
+    height: 76px;
+    opacity: 1;
+    left: 69px;
+    top: 695px;
+    position: absolute;
+    
+    .loadingprogressbg {
+      width: 615px;
+      height: 76px;
+      opacity: 1;
+      position: absolute;
+      
+    }
+    .loadingprogressfront {
+      width: 571px;
+      height: 36px;
+      opacity: 1;
+      left: 22px;
+      top: 18px;
+      position: absolute;
+      
+    }
+  }
+  .loadingtips {
+    width: 61px;
+    height: 23px;
+    opacity: 1;
+    left: 349px;
+    top: 776px;
+    position: absolute;
+    
+    font-size: 9.1515px;
+    color: rgba(255, 255, 255, 1);
+  }
+  .loadingpandaimg {
+    width: 86px;
+    height: 115px;
+    opacity: 1;
+    left: 376px;
+    top: 594px;
+    position: absolute;
+    
+  }
+}
--- a/src/resconfig/res.js
+++ b/src/resconfig/res.js
+
+/**
+ * 目前没有用到
+ * @param {*} resList 
+ * @param {*} uuid 
+ */
+const getSrcByUuid = (resList, uuid) => {
+    resList = resList || [];
+    for (let i = 0; i < resList.length; i++) {
+        if (resList[i].uuid == uuid) {
+            return resList[i].url
+        }
+    }
+}
+module.exports = {
+    getSrcByUuid
+}
\ No newline at end of file
--- a/src/resconfig/resList.js
+++ b/src/resconfig/resList.js