1

project/config/dev.js

+module.exports = {
+  env: {
+    NODE_ENV: '"development"',
+  },
+  defineConstants: {},
+  mini: {},
+  h5: {},
+};

project/config/index.js

+const config = {
+  projectName: "taro-myapp",
+  date: "2020-6-7",
+  designWidth: 750,
+  deviceRatio: {
+    "640": 2.34 / 2,
+    "750": 1,
+    "828": 1.81 / 2,
+  },
+  sourceRoot: "src",
+  outputRoot: "dist",
+  babel: {
+    sourceMap: true,
+    presets: [
+      [
+        "env",
+        {
+          modules: false,
+        },
+      ],
+    ],
+    plugins: [
+      "transform-decorators-legacy",
+      "transform-class-properties",
+      "transform-object-rest-spread",
+      [
+        "transform-runtime",
+        {
+          helpers: false,
+          polyfill: false,
+          regenerator: true,
+          moduleName: "babel-runtime",
+        },
+      ],
+    ],
+  },
+  plugins: [],
+  defineConstants: {},
+  mini: {
+    postcss: {
+      pxtransform: {
+        enable: true,
+        config: {},
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 10240, // 设定转换尺寸上限
+        },
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: "module", // 转换模式，取值为 global/module
+          generateScopedName: "[name]__[local]___[hash:base64:5]",
+        },
+      },
+    },
+  },
+  h5: {
+    publicPath: "/",
+    staticDirectory: "static",
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {
+          browsers: ["last 3 versions", "Android >= 4.1", "ios >= 8"],
+        },
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: "module", // 转换模式，取值为 global/module
+          generateScopedName: "[name]__[local]___[hash:base64:5]",
+        },
+      },
+    },
+  },
+};
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === "development") {
+    return merge({}, config, require("./dev"));
+  }
+  return merge({}, config, require("./prod"));
+};

project/config/prod.js

+module.exports = {
+  env: {
+    NODE_ENV: '"production"',
+  },
+  defineConstants: {},
+  mini: {},
+  h5: {
+    /**
+     * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
+     * 参考代码如下：
+     * webpackChain (chain) {
+     *   chain.plugin('analyzer')
+     *     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+     * }
+     */
+  },
+};

project/mock/collect_0722/index.js

+export const join = {
+  "success": true,
+  "data": {
+    message: "参与成功"
+  }
+};

project/mock/common/index.js

+export * from './rule';

project/mock/common/rule.js

+import { Random } from 'mockjs';
+
+export const rule = {
+  "success": true,
+  "data": `活动规则: ${Random.cparagraph(20, 40)}`
+};

project/mock/index.js

+import Mock from 'mockjs';
+import proxy from './proxy';
+
+Object.keys(proxy).map(method => {
+  Object.keys(proxy[method]).map(URI => {
+    let data = proxy[method][URI];
+    Mock.mock(new RegExp(URI), method, opt => {
+      console.log(`%c[mock] 链接：${opt.url} 类型：${method} 参数：${method === 'post' && JSON.stringify(opt.body) || ''}`, "color: rgb(63, 172, 203)", data);
+      return data
+    });
+  })
+})
\ No newline at end of file

project/mock/proxy.js

+import * as common from './common';
+import * as collect_0722 from './collect_0722';
+let projectId = window.CFG.projectId || '';
+
+export default {
+  get: {
+    [`/projectx/${projectId}/projectRule.query`]: common.rule
+  },
+  post: {
+    [`/projectx/${projectId}/join.do`]: collect_0722.join
+  }
+};
\ No newline at end of file

project/package.json

+{
+  "name": "spark-project-create",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "css-loader": "^3.6.0",
+    "fyge-tbmini": "^1.3.1",
+    "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"
+  }
+}

project/public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <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">
+    
+    <title>React App</title>
+    <script>
+      !(function(e, i) {
+        var t = e.documentElement,
+          n = navigator.userAgent.match(/iphone|ipod|ipad/gi),
+          a = n ? Math.min(i.devicePixelRatio, 3) : 1,
+          m = 'orientationchange' in window ? 'orientationchange' : 'resize';
+        t.dataset.dpr = a;
+        for (
+          var d, l, c = !1, o = e.getElementsByTagName('meta'), r = 0;
+          r < o.length;
+          r++
+        )
+          (l = o[r]), 'viewport' == l.name && ((c = !0), (d = l));
+        if (c)
+          d.content =
+            'width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no';
+        else {
+          var o = e.createElement('meta');
+          (o.name = 'viewport'),
+            (o.content =
+              'width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no'),
+            t.firstElementChild.appendChild(o);
+        }
+        var s = function() {
+          var e = t.clientWidth;
+          e / a > 750 && (e = 750 * a),
+            (window.remScale = e / 750),
+            (t.style.fontSize = 200 * (e / 750) + 'px');
+        };
+        s(), e.addEventListener && i.addEventListener(m, s, !1);
+      })(document, window);
+    </script>
+     <script>
+      function getApp(){
+        return {
+          cloud:{},
+          cloudName:"clientTemplate2C",
+          requestType:"mock"
+        }
+      }
+
+      var CFG = CFG || {};
+      CFG.projectId = location.pathname.split('/')[2] || '1';
+    </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>

project/sparkrc.js

+module.exports = {
+  OUTPUT_DIR: "dist",
+  SOURCE_DIR: "src",
+  TEMP_DIR: "./.temp",
+  ENTRY: "src/app.jsx",
+  TEMPLATE: "./public/index.html",
+  MOCK_STATUS: true
+};

project/src/api/apicfg.js

+let projectId = window.CFG.projectId || '';
+
+const apiCfg = {
+    getRule:`/projectx/${projectId}/projectRule.query`,
+    doJoin: {
+      uri: `/projectx/${projectId}/join.do`,
+      method: "post"
+    }
+}
+
+export default apiCfg;
\ No newline at end of file

project/src/api/index.js

+
+
+import apiCfg from './apicfg';
+import request from './request';
+
+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 = 'post' } = value;
+    return {
+      uri,
+      method
+    }
+  } else {
+    console.error('getRequestParams: 传参有误');
+  }
+};
+
+
+function generateAPI(apiList) {
+  const api = {};
+  Object.entries(apiList).forEach(([key, value]) => {
+    const { method, uri } = getRequestParams(value);
+    api[key] = params => request[method](uri, method === 'post' ? params : { params });
+  });
+  return api;
+
+}
+

project/src/api/request.js

+import Qs from "qs";
+import axios from "axios";
+
+const TIMEOUT = 10000;
+
+const instance = axios.create({
+  timeout: TIMEOUT, // 请求超时时间
+});
+
+instance.interceptors.request.use(
+  (config) => {
+    if (config.method === "get") {
+      config.data = true;
+    }
+    config.method === "post"
+      ? (config.data = Qs.stringify({ ...config.data }))
+      : (config.params = { ...config.params });
+    config.headers["Content-Type"] = "application/x-www-form-urlencoded";
+
+    return config;
+  },
+  (error) => {
+    //请求错误处理
+    Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+instance.interceptors.response.use(
+  // 请求成功
+  (res) => {
+    const { status } = res || -1000;
+    return (status >= 200 && status <= 400) ? res.data : res
+  }
+);
+
+export default instance;

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 Page0 from "./pages/page0/page0.jsx";
+class App extends Component {
+ 
+  render() {
+    return (
+      <Page0></Page0>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));

project/src/app.less

+* {
+  margin: 0;
+  padding: 0;
+}
+html,
+body {
+  font-size: 24px;
+  width: 100%;
+  height: 100%;
+}

project/src/canvas/game/resCanvasList.js

+const resCanvasList = {};
+export default resCanvasList;

project/src/pages/pagehao_you_zhu_li_cheng_gong_dan_chuang/pagehao_you_zhu_li_cheng_gong_dan_chuang.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagehao_you_zhu_li_cheng_gong_dan_chuang.less';
+
+class Pagehao_you_zhu_li_cheng_gong_dan_chuang extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="hao_you_zhu_li_cheng_gong_dan_chuang">
+        <img className="bei_jing_kuang12" src={this.state.resList['bbb41639-0ae0-4561-a65d-df43007783b3'].url} />
+        <label className="hao_you_zhu_li_cheng_gong">好友助力成功</label>
+        <label className="nin_huo_de_chou_qu_ji_hui1">您获得抽取机会+1</label>
+        <img className="kai_xin_shou_xia11" src={this.state.resList['b3c73996-4ecc-4d1d-b092-4ed2fd60b5e3'].url} />
+      </div>
+    );
+  }
+}
+export default Pagehao_you_zhu_li_cheng_gong_dan_chuang;

project/src/pages/pagehao_you_zhu_li_cheng_gong_dan_chuang/pagehao_you_zhu_li_cheng_gong_dan_chuang.less

+.hao_you_zhu_li_cheng_gong_dan_chuang {
+  width: 642px;
+  height: 517px;
+  opacity: 1;
+  left: 57px;
+  top: 342px;
+  position: absolute;
+  .bei_jing_kuang12 {
+    width: 642px;
+    height: 517px;
+    opacity: 1;
+    position: absolute;
+  }
+  .hao_you_zhu_li_cheng_gong {
+    width: 249px;
+    height: 40px;
+    opacity: 1;
+    left: 194px;
+    top: 119px;
+    position: absolute;
+    font-size: 42px;
+    color: rgba(170, 86, 104, 1);
+  }
+  .nin_huo_de_chou_qu_ji_hui1 {
+    width: 225px;
+    height: 27px;
+    opacity: 1;
+    left: 205px;
+    top: 214px;
+    position: absolute;
+    font-size: 28px;
+    color: rgba(69, 34, 13, 1);
+  }
+  .kai_xin_shou_xia11 {
+    width: 225px;
+    height: 73px;
+    opacity: 1;
+    left: 206px;
+    top: 327px;
+    position: absolute;
+  }
+}

project/src/pages/pagehen_yi_han2/pagehen_yi_han2.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagehen_yi_han2.less';
+
+class Pagehen_yi_han2 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="hen_yi_han2">
+        <img className="bei_jing_kuang4" src={this.state.resList['084650d2-d0a5-4091-9bfb-7f327158d15b'].url} />
+        <label className="hen_yi_han3">很遗憾</label>
+        <label className="sui_pian_qiao_qiao_liu_zou_liao_zai_chou_yi_ci_shi_shi_kan">
+          碎片悄悄溜走了 再抽一次试试看
+        </label>
+        <img className="an_niu2" src={this.state.resList['389807fe-8dda-4cb6-9f63-e9a5b9458c37'].url} />
+      </div>
+    );
+  }
+}
+export default Pagehen_yi_han2;

project/src/pages/pagehen_yi_han2/pagehen_yi_han2.less

+.hen_yi_han2 {
+  width: 642px;
+  height: 517px;
+  opacity: 1;
+  left: 57px;
+  top: 342px;
+  position: absolute;
+  .bei_jing_kuang4 {
+    width: 642px;
+    height: 517px;
+    opacity: 1;
+    position: absolute;
+  }
+  .hen_yi_han3 {
+    width: 124px;
+    height: 40px;
+    opacity: 1;
+    left: 256px;
+    top: 119px;
+    position: absolute;
+    font-size: 42px;
+    color: rgba(170, 86, 104, 1);
+  }
+  .sui_pian_qiao_qiao_liu_zou_liao_zai_chou_yi_ci_shi_shi_kan {
+    width: 195px;
+    height: 61px;
+    opacity: 1;
+    left: 220px;
+    top: 208px;
+    position: absolute;
+    font-size: 28px;
+    color: rgba(69, 34, 13, 1);
+  }
+  .an_niu2 {
+    width: 258px;
+    height: 73px;
+    opacity: 1;
+    left: 189px;
+    top: 327px;
+    position: absolute;
+  }
+}

project/src/pages/pagehen_yi_han5/pagehen_yi_han5.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagehen_yi_han5.less';
+
+class Pagehen_yi_han5 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="hen_yi_han5">
+        <img className="bei_jing_kuang8" src={this.state.resList['a1ec84bf-dae5-47f3-b44b-b3f8e613f128'].url} />
+        <label className="chou_qu_ji_hui_yong_wan_liao_yao_qing_hao_you_zhu_li_ke_huo_de_geng_duo_ji_hui_ba">
+          抽取机会用完了 邀请好友助力可获得更多机会吧
+        </label>
+        <label className="hen_yi_han7">很遗憾</label>
+        <img className="an_niu6" src={this.state.resList['c52756fe-92de-4441-883c-2d41c67c7271'].url} />
+      </div>
+    );
+  }
+}
+export default Pagehen_yi_han5;

project/src/pages/pagehen_yi_han5/pagehen_yi_han5.less

+.hen_yi_han5 {
+  width: 642px;
+  height: 517px;
+  opacity: 1;
+  left: 57px;
+  top: 342px;
+  position: absolute;
+  .bei_jing_kuang8 {
+    width: 642px;
+    height: 517px;
+    opacity: 1;
+    position: absolute;
+  }
+  .chou_qu_ji_hui_yong_wan_liao_yao_qing_hao_you_zhu_li_ke_huo_de_geng_duo_ji_hui_ba {
+    width: 390px;
+    height: 61px;
+    opacity: 1;
+    left: 123px;
+    top: 208px;
+    position: absolute;
+    font-size: 28px;
+    color: rgba(69, 34, 13, 1);
+  }
+  .hen_yi_han7 {
+    width: 124px;
+    height: 40px;
+    opacity: 1;
+    left: 256px;
+    top: 119px;
+    position: absolute;
+    font-size: 42px;
+    color: rgba(170, 86, 104, 1);
+  }
+  .an_niu6 {
+    width: 258px;
+    height: 73px;
+    opacity: 1;
+    left: 189px;
+    top: 327px;
+    position: absolute;
+  }
+}

project/src/pages/pagehuo_de_sui_pian/pagehuo_de_sui_pian.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagehuo_de_sui_pian.less';
+
+class Pagehuo_de_sui_pian extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="huo_de_sui_pian">
+        <img className="bei_jing_kuang84" src={this.state.resList['4fd639b4-4dbe-4d0f-947a-b0260ddb6d64'].url} />
+        <label className="huo_de_tou_ming_sui_pian">获得[透明]碎片</label>
+        <img className="ju_xing75083" src={this.state.resList['c4bbb522-b916-4f55-8e65-94d3c5ff5d00'].url} />
+        <img className="kai_xin_shou_xia82" src={this.state.resList['e36d07fb-942f-4463-92c6-37fbf3bd8ac8'].url} />
+      </div>
+    );
+  }
+}
+export default Pagehuo_de_sui_pian;

project/src/pages/pagehuo_de_sui_pian/pagehuo_de_sui_pian.less

+.huo_de_sui_pian {
+  width: 565px;
+  height: 831px;
+  opacity: 1;
+  left: 89px;
+  top: 336px;
+  position: absolute;
+  .bei_jing_kuang84 {
+    width: 565px;
+    height: 831px;
+    opacity: 1;
+    position: absolute;
+  }
+  .huo_de_tou_ming_sui_pian {
+    width: 277px;
+    height: 44px;
+    opacity: 1;
+    left: 147px;
+    top: 187px;
+    position: absolute;
+    font-size: 42px;
+    color: rgba(168, 86, 102, 1);
+  }
+  .ju_xing75083 {
+    width: 213px;
+    height: 213px;
+    opacity: 1;
+    left: 180px;
+    top: 308px;
+    position: absolute;
+  }
+  .kai_xin_shou_xia82 {
+    width: 225px;
+    height: 73px;
+    opacity: 1;
+    left: 174px;
+    top: 598px;
+    position: absolute;
+  }
+}

project/src/pages/pagehuo_dong_gui_ze_dan_chuang/pagehuo_dong_gui_ze_dan_chuang.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagehuo_dong_gui_ze_dan_chuang.less';
+
+class Pagehuo_dong_gui_ze_dan_chuang extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="huo_dong_gui_ze_dan_chuang">
+        <img className="bei_jing_kuang15" src={this.state.resList['0148917c-5f67-43b5-83be-761b1991a335'].url} />
+        <label className="you_xi_xiao_tie_shi">游戏小贴士</label>
+        <label className="mei_ri_chou_qu_jiang_li_chu_liao_neng_huo_de_pin_tu_sui_pian_huan_neng_huo_de_xian_jin_hong_bao_xiang_yi_hui_chao_zhi_you_hui_quan_e_mei_ri_chou_qu_ci_shu_tong_guo_wan_cheng_mei_ri_ren_wu_zui_duo_ke_huo_de8_ci_chou_qu_sui">
+          每日抽取奖励 除了能获得拼图碎片，还能获得现金红包、 相宜荟超值优惠券哦 每日抽取次数
+          通过完成每日任务，最多可获得8次抽取碎片、 好礼的机会哦！ 拼图碎片 1，好友间可互相索取和互相赠送哦
+          2，通过万能卡可兑换任意缺失的碎片哦 3，完成每档拼图，即可获得对应产品的奖励哦 邀请好友
+          通过邀请好友参与游戏，可获得对应人数的对应 奖励哦，奖品有限，欲领从速哦 锦鲤大奖
+          四档拼图全部完成，还能抽取锦鲤大奖资格哦， 华为P30、红景天淡纹焕白大魔盒、颐和园书
+        </label>
+      </div>
+    );
+  }
+}
+export default Pagehuo_dong_gui_ze_dan_chuang;

project/src/pages/pagehuo_dong_gui_ze_dan_chuang/pagehuo_dong_gui_ze_dan_chuang.less

+.huo_dong_gui_ze_dan_chuang {
+  width: 649px;
+  height: 773px;
+  opacity: 1;
+  left: 46px;
+  top: 342px;
+  position: absolute;
+  .bei_jing_kuang15 {
+    width: 649px;
+    height: 773px;
+    opacity: 1;
+    position: absolute;
+  }
+  .you_xi_xiao_tie_shi {
+    width: 178px;
+    height: 34px;
+    opacity: 1;
+    left: 240px;
+    top: 97px;
+    position: absolute;
+    font-size: 36px;
+    color: rgba(252, 251, 248, 1);
+  }
+  .mei_ri_chou_qu_jiang_li_chu_liao_neng_huo_de_pin_tu_sui_pian_huan_neng_huo_de_xian_jin_hong_bao_xiang_yi_hui_chao_zhi_you_hui_quan_e_mei_ri_chou_qu_ci_shu_tong_guo_wan_cheng_mei_ri_ren_wu_zui_duo_ke_huo_de8_ci_chou_qu_sui {
+    width: 503px;
+    height: 455px;
+    opacity: 1;
+    left: 89px;
+    top: 175px;
+    position: absolute;
+    font-size: 24px;
+    color: rgba(69, 34, 13, 1);
+  }
+}

project/src/pages/pagehuo_dong_suo_yao_que_ren/pagehuo_dong_suo_yao_que_ren.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagehuo_dong_suo_yao_que_ren.less';
+
+class Pagehuo_dong_suo_yao_que_ren extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="huo_dong_suo_yao_que_ren">
+        <img className="bei_jing_kuang72" src={this.state.resList['d71f43f8-e07e-4b47-9477-8e54f8fadce7'].url} />
+        <label className="que_ren_zeng_song_hao_you_tou_liang_sui_pian">确认赠送好友【透亮】碎片</label>
+        <img className="ju_xing75071" src={this.state.resList['c4bbb522-b916-4f55-8e65-94d3c5ff5d00'].url} />
+        <img className="kai_xin_shou_xia70" src={this.state.resList['9d9b3f99-68ee-4bf9-bee1-0a6e8816aeee'].url} />
+      </div>
+    );
+  }
+}
+export default Pagehuo_dong_suo_yao_que_ren;

project/src/pages/pagehuo_dong_suo_yao_que_ren/pagehuo_dong_suo_yao_que_ren.less

+.huo_dong_suo_yao_que_ren {
+  width: 565px;
+  height: 831px;
+  opacity: 1;
+  left: 89px;
+  top: 336px;
+  position: absolute;
+  .bei_jing_kuang72 {
+    width: 565px;
+    height: 831px;
+    opacity: 1;
+    position: absolute;
+  }
+  .que_ren_zeng_song_hao_you_tou_liang_sui_pian {
+    width: 428px;
+    height: 35px;
+    opacity: 1;
+    left: 71px;
+    top: 192px;
+    position: absolute;
+    font-size: 36px;
+    color: rgba(168, 86, 102, 1);
+  }
+  .ju_xing75071 {
+    width: 213px;
+    height: 213px;
+    opacity: 1;
+    left: 180px;
+    top: 308px;
+    position: absolute;
+  }
+  .kai_xin_shou_xia70 {
+    width: 225px;
+    height: 73px;
+    opacity: 1;
+    left: 174px;
+    top: 598px;
+    position: absolute;
+  }
+}

project/src/pages/pagemei_gu_mei_ri_fang_wen/pagemei_gu_mei_ri_fang_wen.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagemei_gu_mei_ri_fang_wen.less';
+
+class Pagemei_gu_mei_ri_fang_wen extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="mei_gu_mei_ri_fang_wen">
+        <img className="bei_jing_kuang69" src={this.state.resList['11c9d4c6-ebe8-4bd4-9795-e9f2deaf3346'].url} />
+        <label className="zun_jing_de_mei_gu_ke_hu_zeng_song_nin_wan_neng_sui_pianx10">
+          尊敬的美顾客户 赠送您【万能】碎片x10
+        </label>
+        <img className="ju_xing75068" src={this.state.resList['c4bbb522-b916-4f55-8e65-94d3c5ff5d00'].url} />
+        <img className="kai_xin_shou_xia67" src={this.state.resList['e36d07fb-942f-4463-92c6-37fbf3bd8ac8'].url} />
+      </div>
+    );
+  }
+}
+export default Pagemei_gu_mei_ri_fang_wen;

project/src/pages/pagemei_gu_mei_ri_fang_wen/pagemei_gu_mei_ri_fang_wen.less

+.mei_gu_mei_ri_fang_wen {
+  width: 565px;
+  height: 831px;
+  opacity: 1;
+  left: 89px;
+  top: 336px;
+  position: absolute;
+  .bei_jing_kuang69 {
+    width: 565px;
+    height: 831px;
+    opacity: 1;
+    position: absolute;
+  }
+  .zun_jing_de_mei_gu_ke_hu_zeng_song_nin_wan_neng_sui_pianx10 {
+    width: 384px;
+    height: 78px;
+    opacity: 1;
+    left: 94px;
+    top: 192px;
+    position: absolute;
+    font-size: 36px;
+    color: rgba(168, 86, 102, 1);
+  }
+  .ju_xing75068 {
+    width: 213px;
+    height: 213px;
+    opacity: 1;
+    left: 180px;
+    top: 308px;
+    position: absolute;
+  }
+  .kai_xin_shou_xia67 {
+    width: 225px;
+    height: 73px;
+    opacity: 1;
+    left: 174px;
+    top: 598px;
+    position: absolute;
+  }
+}

project/src/pages/pageni_huan_bu_shi_hui_yuan_dan_chuang/pageni_huan_bu_shi_hui_yuan_dan_chuang.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pageni_huan_bu_shi_hui_yuan_dan_chuang.less';
+
+class Pageni_huan_bu_shi_hui_yuan_dan_chuang extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="ni_huan_bu_shi_hui_yuan_dan_chuang">
+        <img className="bei_jing_kuang10" src={this.state.resList['abf36cb3-72de-432a-99ba-d89ec4b5ed5a'].url} />
+        <label className="zhi_you_hui_yuan_cai_neng_wei_hao_you_zhu_li">只有会员才能为好友助力</label>
+        <label className="nin_huan_bu_shi_hui_yuan">您还不是会员</label>
+        <img className="kai_xin_shou_xia9" src={this.state.resList['63597f2d-c192-4f1c-9a3d-9d14d1994295'].url} />
+      </div>
+    );
+  }
+}
+export default Pageni_huan_bu_shi_hui_yuan_dan_chuang;

project/src/pages/pageni_huan_bu_shi_hui_yuan_dan_chuang/pageni_huan_bu_shi_hui_yuan_dan_chuang.less

+.ni_huan_bu_shi_hui_yuan_dan_chuang {
+  width: 642px;
+  height: 517px;
+  opacity: 1;
+  left: 57px;
+  top: 342px;
+  position: absolute;
+  .bei_jing_kuang10 {
+    width: 642px;
+    height: 517px;
+    opacity: 1;
+    position: absolute;
+  }
+  .zhi_you_hui_yuan_cai_neng_wei_hao_you_zhu_li {
+    width: 305px;
+    height: 27px;
+    opacity: 1;
+    left: 165px;
+    top: 208px;
+    position: absolute;
+    font-size: 28px;
+    color: rgba(69, 34, 13, 1);
+  }
+  .nin_huan_bu_shi_hui_yuan {
+    width: 249px;
+    height: 40px;
+    opacity: 1;
+    left: 194px;
+    top: 119px;
+    position: absolute;
+    font-size: 42px;
+    color: rgba(170, 86, 104, 1);
+  }
+  .kai_xin_shou_xia9 {
+    width: 225px;
+    height: 73px;
+    opacity: 1;
+    left: 206px;
+    top: 327px;
+    position: absolute;
+  }
+}

project/src/pages/pagepin_tu_cheng_gong_jiang_li/pagepin_tu_cheng_gong_jiang_li.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagepin_tu_cheng_gong_jiang_li.less';
+
+class Pagepin_tu_cheng_gong_jiang_li extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="pin_tu_cheng_gong_jiang_li">
+        <img className="bei_jing_kuang81" src={this.state.resList['c6f8e3d2-5c48-4f93-8297-2d9d620d1de4'].url} />
+        <label className="song_nin_yi_kuai_xia_qi_he_tao_sui_pian">送您一块下期【核桃】碎片</label>
+        <label className="dai_xia_qi_pin_tu_huo_dong_kai_shi_hou_ke_zhi_jie_jie_suo">
+          待下期拼图活动开始后可直接解锁
+        </label>
+        <img className="ju_xing75080" src={this.state.resList['c4bbb522-b916-4f55-8e65-94d3c5ff5d00'].url} />
+        <img className="kai_xin_shou_xia79" src={this.state.resList['e36d07fb-942f-4463-92c6-37fbf3bd8ac8'].url} />
+      </div>
+    );
+  }
+}
+export default Pagepin_tu_cheng_gong_jiang_li;

project/src/pages/pagepin_tu_cheng_gong_jiang_li/pagepin_tu_cheng_gong_jiang_li.less

+.pin_tu_cheng_gong_jiang_li {
+  width: 565px;
+  height: 831px;
+  opacity: 1;
+  left: 89px;
+  top: 336px;
+  position: absolute;
+  .bei_jing_kuang81 {
+    width: 565px;
+    height: 831px;
+    opacity: 1;
+    position: absolute;
+  }
+  .song_nin_yi_kuai_xia_qi_he_tao_sui_pian {
+    width: 429px;
+    height: 35px;
+    opacity: 1;
+    left: 71px;
+    top: 192px;
+    position: absolute;
+    font-size: 36px;
+    color: rgba(168, 86, 102, 1);
+  }
+  .dai_xia_qi_pin_tu_huo_dong_kai_shi_hou_ke_zhi_jie_jie_suo {
+    width: 359px;
+    height: 23px;
+    opacity: 1;
+    left: 106px;
+    top: 254px;
+    position: absolute;
+    font-size: 24px;
+    color: rgba(54, 54, 54, 1);
+  }
+  .ju_xing75080 {
+    width: 213px;
+    height: 213px;
+    opacity: 1;
+    left: 180px;
+    top: 308px;
+    position: absolute;
+  }
+  .kai_xin_shou_xia79 {
+    width: 225px;
+    height: 73px;
+    opacity: 1;
+    left: 174px;
+    top: 598px;
+    position: absolute;
+  }
+}

project/src/pages/pagequan_bu_he_cheng1/pagequan_bu_he_cheng1.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagequan_bu_he_cheng1.less';
+
+class Pagequan_bu_he_cheng1 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="quan_bu_he_cheng1">
+        <img className="jin_li_he" src={this.state.resList['48cff907-405f-4290-b328-98283398de3e'].url} />
+        <img className="dian_ji_chou_qu" src={this.state.resList['d1aaba7d-3bf0-49cf-968c-66504029f6f1'].url} />
+        <label className="gong_xi_ni_he_cheng_quan_bu_pin_tu">恭喜你合成全部拼图</label>
+      </div>
+    );
+  }
+}
+export default Pagequan_bu_he_cheng1;

project/src/pages/pagequan_bu_he_cheng1/pagequan_bu_he_cheng1.less

+.quan_bu_he_cheng1 {
+  width: 653px;
+  height: 662px;
+  opacity: 1;
+  left: 43px;
+  top: 405px;
+  position: absolute;
+  .jin_li_he {
+    width: 653px;
+    height: 620px;
+    opacity: 1;
+    position: absolute;
+  }
+  .dian_ji_chou_qu {
+    width: 271px;
+    height: 82px;
+    opacity: 1;
+    left: 197px;
+    top: 580px;
+    position: absolute;
+  }
+  .gong_xi_ni_he_cheng_quan_bu_pin_tu {
+    width: 428px;
+    height: 47px;
+    opacity: 1;
+    left: 118px;
+    top: 27px;
+    position: absolute;
+    font-size: 48px;
+    color: rgba(149, 44, 43, 1);
+  }
+}

project/src/pages/pagesui_pian_ji_lu_dan_chuang/pagesui_pian_ji_lu_dan_chuang.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagesui_pian_ji_lu_dan_chuang.less';
+
+class Pagesui_pian_ji_lu_dan_chuang extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="sui_pian_ji_lu_dan_chuang">
+        <img className="bei_jing_kuang63" src={this.state.resList['caffb2b3-0a1c-4c74-b8c5-760ceeb86c38'].url} />
+        <div className="wen_an">
+          <div className="zu5058">
+            <label className="wan_neng_sui_pian62">【万能】碎片</label>
+            <label className="chou_jiang61">抽奖</label>
+            <label className="tu_ceng2020071260">2020-07-12</label>
+            <label className="tu_ceng15432359">15:43:23</label>
+          </div>
+          <div className="zu5053">
+            <label className="wan_neng_sui_pian57">【万能】碎片</label>
+            <label className="chou_jiang56">抽奖</label>
+            <label className="tu_ceng2020071255">2020-07-12</label>
+            <label className="tu_ceng15432354">15:43:23</label>
+          </div>
+          <div className="zu5048">
+            <label className="tou_liang_sui_pian52">【透亮】碎片</label>
+            <label className="chou_jiang51">抽奖</label>
+            <label className="tu_ceng2020071250">2020-07-12</label>
+            <label className="tu_ceng15432349">15:43:23</label>
+          </div>
+          <div className="zu5043">
+            <label className="wan_neng_sui_pian47">【万能】碎片</label>
+            <label className="chou_jiang46">抽奖</label>
+            <label className="tu_ceng2020071245">2020-07-12</label>
+            <label className="tu_ceng15432344">15:43:23</label>
+          </div>
+          <div className="zu50_kao_bei638">
+            <label className="wan_neng_sui_pian42">【万能】碎片</label>
+            <label className="yao_qing_jiang_li41">邀请奖励</label>
+            <label className="tu_ceng2020071240">2020-07-12</label>
+            <label className="tu_ceng15432339">15:43:23</label>
+          </div>
+          <div className="zu50_kao_bei633">
+            <label className="wan_neng_sui_pian37">【万能】碎片</label>
+            <label className="yao_qing_jiang_li36">邀请奖励</label>
+            <label className="tu_ceng2020071235">2020-07-12</label>
+            <label className="tu_ceng15432334">15:43:23</label>
+          </div>
+          <div className="zu50_kao_bei628">
+            <label className="wan_neng_sui_pian32">【万能】碎片</label>
+            <label className="ren_wu_jiang_li31">任务奖励</label>
+            <label className="tu_ceng2020071230">2020-07-12</label>
+            <label className="tu_ceng15432329">15:43:23</label>
+          </div>
+          <div className="zu50_kao_bei7">
+            <label className="tou_liang_sui_pian27">【透亮】碎片</label>
+            <label className="yao_qing_jiang_li26">邀请奖励</label>
+            <label className="tu_ceng2020071225">2020-07-12</label>
+            <label className="tu_ceng15432324">15:43:23</label>
+          </div>
+          <div className="zu50_kao_bei9">
+            <label className="wan_neng_sui_pian23">【万能】碎片</label>
+            <label className="yao_qing_jiang_li22">邀请奖励</label>
+            <label className="tu_ceng2020071221">2020-07-12</label>
+            <label className="tu_ceng15432320">15:43:23</label>
+          </div>
+          <div className="zu50_kao_bei10">
+            <label className="wan_neng_sui_pian19">【万能】碎片</label>
+            <label className="ren_wu_jiang_li18">任务奖励</label>
+            <label className="tu_ceng2020071217">2020-07-12</label>
+            <label className="tu_ceng15432316">15:43:23</label>
+          </div>
+        </div>
+        <label className="sui_pian_ji_lu">碎片记录</label>
+      </div>
+    );
+  }
+}
+export default Pagesui_pian_ji_lu_dan_chuang;

project/src/pages/pagexiang_nin_zeng_song/pagexiang_nin_zeng_song.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagexiang_nin_zeng_song.less';
+
+class Pagexiang_nin_zeng_song extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="xiang_nin_zeng_song">
+        <img className="bei_jing_kuang75" src={this.state.resList['5738e373-f9ea-4c1f-8f4e-1eb5a030fbae'].url} />
+        <label className="xiang_nin_zeng_song_tou_liang_sui_pian">向您赠送【透亮】碎片</label>
+        <img className="ju_xing75074" src={this.state.resList['c4bbb522-b916-4f55-8e65-94d3c5ff5d00'].url} />
+        <img className="kai_xin_shou_xia73" src={this.state.resList['e36d07fb-942f-4463-92c6-37fbf3bd8ac8'].url} />
+      </div>
+    );
+  }
+}
+export default Pagexiang_nin_zeng_song;

project/src/pages/pagezeng_song_duo_yu_pin_tu/pagezeng_song_duo_yu_pin_tu.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './pagezeng_song_duo_yu_pin_tu.less';
+
+class Pagezeng_song_duo_yu_pin_tu extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.state || { resList: resList };
+  }
+  render() {
+    return (
+      <div className="zeng_song_duo_yu_pin_tu">
+        <img className="bei_jing_kuang78" src={this.state.resList['19d375a0-c5b5-4eb0-bdb3-1c5e01b4d175'].url} />
+        <label className="que_ren_zeng_song_hao_you_tou_liang_sui_pian_ma">确认赠送好友 【透亮】碎片吗？</label>
+        <img className="ju_xing75077" src={this.state.resList['c4bbb522-b916-4f55-8e65-94d3c5ff5d00'].url} />
+        <img className="kai_xin_shou_xia76" src={this.state.resList['9d9b3f99-68ee-4bf9-bee1-0a6e8816aeee'].url} />
+      </div>
+    );
+  }
+}
+export default Pagezeng_song_duo_yu_pin_tu;