1

project/src/app.jsx

@@ -6,6 +6,8 @@ import "./app.less";
 //此处为spark-cli动态生成
 import Loading from "./pages/loading/loading.jsx";
 import Mainpage from "./pages/mainpage/mainpage.jsx";
+import Main3 from "./pages/main3/main3.jsx";
+import Detail2 from "./pages/detail2/detail2.jsx";
 import { Aup, AUPOP, AUP_MBX_STATE } from './pop';
 MOCK_STATUS && (require('../mock/index'));
 MD();
@@ -33,7 +35,8 @@ class App extends Component {
     return (
       <>
         {page == 'loading' && <Loading data={pagedata} navigateTo={this.navigateTo}></Loading>}
-        {page == 'mainpage' && <Mainpage data={pagedata} navigateTo={this.navigateTo}></Mainpage>}
+        {page == 'mainpage' && <Main3 data={pagedata} navigateTo={this.navigateTo}></Main3>}
+        {page == 'detail' && <Detail2 data={pagedata} navigateTo={this.navigateTo}></Detail2>}
         <AUPOP AUPopState={AUP_MBX_STATE} ></AUPOP>
       </>
     );

project/src/pages/detail2/detail2.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+//import API from '../../api';
+
+import './detail2.less';
+class Detail2 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  render() {
+    return (
+      <div className="detail2 " uuid="c5abc304-1a0b-4804-956a-d61c1d5b75ed">
+        <img
+          className="detail2_bg "
+          uuid="2b6c5d97-e458-42a0-b49b-49e9efc6abbc"
+          src={this.state.resList['9d6135a5-469f-4293-b931-17786c977974'].url}
+        />
+        <div className="detail2_item " uuid="4d8289ea-9464-4a92-a81c-3e24c364e707">
+          <span className="detail2_item_title " uuid="48b63d65-a3d8-4b94-b979-3fcb19c9d89c">
+            每日签到
+          </span>
+          <span className="detail2_item_day " uuid="5e6c50df-f25c-4b91-acc7-95d4829ff7db">
+            2020-12-25 09:54:30
+          </span>
+          <span className="detail2_item_num " uuid="e576e938-d57d-4101-82bc-c0b0782033c9">
+            +418
+          </span>
+          <img
+            className="detail2_item_bg "
+            uuid="46e8b6fd-f561-445c-85eb-be7136ea5183"
+            src={this.state.resList['eed0f2f8-74ef-4680-a29c-d5db6818738f'].url}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+export default Detail2;

project/src/pages/detail2/detail2.less

+.detail2 {
+  width: 750px;
+  height: 1624px;
+  position: absolute;
+  .detail2_bg {
+    width: 750px;
+    height: 1624px;
+    position: absolute;
+  }
+  .detail2_item {
+    width: 618px;
+    height: 91px;
+    left: 65px;
+    top: 235px;
+    position: absolute;
+    .detail2_item_title {
+      width: 93px;
+      height: 23px;
+      left: 53px;
+      position: absolute;
+      font-size: 24px;
+      color: rgba(71, 71, 71, 1);
+    }
+    .detail2_item_day {
+      width: 184px;
+      height: 16px;
+      left: 52px;
+      top: 42px;
+      position: absolute;
+      font-size: 20px;
+      color: rgba(148, 148, 148, 1);
+    }
+    .detail2_item_num {
+      width: 88px;
+      height: 31px;
+      left: 455px;
+      top: 8px;
+      position: absolute;
+      font-size: 40px;
+      color: rgba(71, 71, 71, 1);
+    }
+    .detail2_item_bg {
+      width: 618px;
+      height: 1px;
+      top: 90px;
+      position: absolute;
+    }
+  }
+}

project/src/pages/main3/main3.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList'; //import API from '../../api';
+
+import './main3.less';
+
+class Main3 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      resList: resList,
+    };
+  }
+
+  render() {
+    return (
+      <div className="main3 " uuid="8754a9d1-7453-474b-b722-7cb71483ae85">
+        <img
+          className="main3_bg "
+          uuid="25a6c3f8-3f78-4758-b2ab-5bcbfaa0d8bc"
+          src={this.state.resList['caebeec6-fe80-4c78-a132-d911f97a81b6'].url}
+        />
+        <div className="main3_top " uuid="257105ac-5616-4e29-a4dc-302ed2604193">
+          <div className="main3_userinfo " uuid="25d45126-3476-4d8e-9756-34e2ccf96163">
+            <img
+              className="main3_userinfo_bg "
+              uuid="5316b02a-5b8e-4355-b556-cd801852df7e"
+              src={this.state.resList['31522099-3ea6-4d2b-ae84-99e2877bd2d0'].url}
+            />
+            <img
+              className="main3_avatar1 "
+              uuid="f2277018-36fd-4f47-9124-d73324505dff"
+              src={this.state.resList['6dda365e-565e-4e15-9fc9-89b5e173dcd9'].url}
+            />
+            <img
+              className="main3_avatar2 "
+              uuid="07d1620b-d31e-4ef7-a63a-9b0ef49497da"
+              src={this.state.resList['6ff31046-e036-4218-8cc9-5d715dfa64a1'].url}
+            />
+            <img
+              className="main3_avatar3 "
+              uuid="dc2306b9-90e0-4e98-a967-e0f263a3217a"
+              src={this.state.resList['b4aa3a56-6a4f-4984-9aa2-1932c35de3b4'].url}
+            />
+            <span className="main3_num " uuid="018875e0-9592-4854-ba0b-2cd58464a6a2">
+              欢趣豆：12352
+            </span>
+            <span className="main3_nick " uuid="a7518930-17cc-427a-a6e5-27a593b309c4">
+              用户昵称
+            </span>
+            <img
+              onClick={() => {
+                this.props.navigateTo('detail');
+              }}
+              className="main3_btn_detail "
+              uuid="2021e306-1521-4373-a890-5a4feb45c7cb"
+              src={this.state.resList['25098e28-9948-4954-9bf3-c884fdcd230a'].url}
+            />
+          </div>
+          <img
+            className="main3_sign "
+            uuid="fdb364dd-23db-46fe-8ab4-df733ce0596b"
+            src={this.state.resList['e4ba9074-781a-4dc1-a696-34753b57f924'].url}
+          />
+          <img
+            className="main3_rule "
+            uuid="46338849-e102-41a8-9298-43639f634bcf"
+            src={this.state.resList['98666530-5e40-49d7-8b86-8397e3ee0889'].url}
+          />
+          <img
+            className="main3_share "
+            uuid="def4d721-bfe0-4c42-970c-40d99e1c2944"
+            src={this.state.resList['82a28387-28f0-4e49-856a-dbe5e981bbb1'].url}
+          />
+          <img
+            className="main3_btn_jingcai "
+            uuid="de6b0150-9221-439d-adf7-ec3e3ad5466e"
+            src={this.state.resList['8d1cc843-b298-42e1-a092-954edfcf93e2'].url}
+          />
+        </div>
+        <img
+          className="main3_btn5 "
+          uuid="72de3087-a678-4c8e-90f0-98174bb08c70"
+          src={this.state.resList['bd2d0b8b-f567-4146-be92-dc1704f06b4a'].url}
+        />
+        <img
+          className="main3_btn4 "
+          uuid="031a922c-6690-49a4-9659-2055ef8c174f"
+          src={this.state.resList['197b83b3-3d8a-47ed-bede-dd07bf533edc'].url}
+        />
+        <img
+          className="main3_btn3 "
+          uuid="06d08e49-d168-4d83-93cb-422e8053ffa1"
+          src={this.state.resList['febc6038-d4f1-48ad-a855-b45656bdc9f9'].url}
+        />
+        <img
+          className="main3_btn2 "
+          uuid="7bd21565-f46e-4c72-ad2c-d978d90ff4b3"
+          src={this.state.resList['b1c1b1ea-7d5e-40b5-b95f-e66ed468ac18'].url}
+        />
+        <img
+          className="main3_btn1 "
+          uuid="cbdb75d5-b009-403b-98b2-056b8bdfaa71"
+          src={this.state.resList['3e030f90-a5de-4c99-b717-9b9e89b7eaa1'].url}
+        />
+        <img
+          className="main3_cursor "
+          uuid="58323460-dc19-4377-b25c-fb1cabf8a29b"
+          src={this.state.resList['d86e633a-b211-4d24-b56b-90da3da4a4e5'].url}
+        />
+        <img
+          className="main3_role "
+          uuid="9aec4461-b6d4-47fb-a08d-99453aff3567"
+          src={this.state.resList['6a414fa5-00f2-4c42-b444-f95dc9d774f2'].url}
+        />
+        <img
+          className="main3_rolepop "
+          uuid="c27fef65-4506-42f8-85df-207999e11de1"
+          src={this.state.resList['56b64b91-4e9a-49bd-bfd0-20d10b6e6556'].url}
+        />
+      </div>
+    );
+  }
+}
+
+export default Main3;

project/src/pages/main3/main3.less

+.main3 {
+  width: 750px;
+  height: 1624px;
+  position: absolute;
+  .main3_bg {
+    width: 750px;
+    height: 1624px;
+    position: absolute;
+  }
+  .main3_top {
+    width: 709px;
+    height: 401px;
+    left: 22px;
+    top: 38px;
+    position: absolute;
+    .main3_userinfo {
+      width: 375px;
+      height: 97px;
+      position: absolute;
+      .main3_userinfo_bg {
+        width: 375px;
+        height: 97px;
+        position: absolute;
+      }
+      .main3_avatar1 {
+        width: 76px;
+        height: 76px;
+        left: 17px;
+        top: 10px;
+        position: absolute;
+      }
+      .main3_avatar2 {
+        width: 76px;
+        height: 76px;
+        left: 17px;
+        top: 10px;
+        position: absolute;
+      }
+      .main3_avatar3 {
+        width: 76px;
+        height: 76px;
+        left: 17px;
+        top: 10px;
+        position: absolute;
+      }
+      .main3_num {
+        width: 164px;
+        height: 22px;
+        left: 105px;
+        top: 57px;
+        position: absolute;
+        font-size: 24px;
+        color: rgba(255, 255, 255, 1);
+      }
+      .main3_nick {
+        width: 96px;
+        height: 24px;
+        left: 105px;
+        top: 20px;
+        position: absolute;
+        font-size: 24px;
+        color: rgba(255, 255, 255, 1);
+      }
+      .main3_btn_detail {
+        width: 50px;
+        height: 19px;
+        left: 295px;
+        top: 59px;
+        position: absolute;
+      }
+    }
+    .main3_sign {
+      width: 126px;
+      height: 118px;
+      left: 583px;
+      top: 283px;
+      position: absolute;
+    }
+    .main3_rule {
+      width: 126px;
+      height: 120px;
+      left: 583px;
+      position: absolute;
+    }
+    .main3_share {
+      width: 126px;
+      height: 119px;
+      left: 583px;
+      top: 143px;
+      position: absolute;
+    }
+    .main3_btn_jingcai {
+      width: 140px;
+      height: 88px;
+      left: 11px;
+      top: 130px;
+      position: absolute;
+    }
+  }
+  .main3_btn5 {
+    width: 477px;
+    height: 405px;
+    top: 1073px;
+    position: absolute;
+  }
+  .main3_btn4 {
+    width: 279px;
+    height: 338px;
+    left: 440px;
+    top: 925px;
+    position: absolute;
+  }
+  .main3_btn3 {
+    width: 320px;
+    height: 315px;
+    top: 680px;
+    position: absolute;
+  }
+  .main3_btn2 {
+    width: 383px;
+    height: 332px;
+    left: 351px;
+    top: 419px;
+    position: absolute;
+  }
+  .main3_btn1 {
+    width: 283px;
+    height: 303px;
+    top: 308px;
+    position: absolute;
+  }
+  .main3_cursor {
+    width: 88px;
+    height: 104px;
+    left: 540px;
+    top: 610px;
+    position: absolute;
+  }
+  .main3_role {
+    width: 124px;
+    height: 165px;
+    left: 417px;
+    top: 1337px;
+    position: absolute;
+  }
+  .main3_rolepop {
+    width: 402px;
+    height: 131px;
+    left: 287px;
+    top: 1212px;
+    position: absolute;
+  }
+}