feat：签到

src/app.jsx

@@ -13,7 +13,7 @@ MD();
 
 // 此处为spark-cli动态生成
 import LoadingDemo from "@src/pages/LoadingDemo/LoadingDemo";
-import HomeDemo from "@src/pages/HomeDemo/HomeDemo";
+import ActualHome from "@src/pages/ActualHome/index";
 import { PAGE_MAP } from "./utils/constants";
 
 /**
@@ -21,7 +21,7 @@ import { PAGE_MAP } from "./utils/constants";
  */
 const pageMap = {
   [PAGE_MAP.LOADING_PAGE]: <LoadingDemo />,
-  [PAGE_MAP.HOME_PAGE]: <HomeDemo />,
+  [PAGE_MAP.ACTUAL_HOME_PAGE]: <ActualHome />,
 };
 
 @observer

src/contants.js

+export const weekList = ['一', '二', '三', '四', '五', '六', '日' ]
\ No newline at end of file

src/pages/ActualHome/index.jsx

+import React from 'react';
+import {observer} from 'mobx-react';
+import {Button} from '@src/components/Button';
+import SignModule from "@src/pages/components/SignModule/index"
+import RankModule from "@src/pages/components/RankModule/index"
+import BannerModule from "@src/pages/components/BannerModule/index"
+import './index.less';
+
+@observer
+class ActualHome extends React.Component {
+
+  render() {
+    return (
+      <div className="actual-home-page">
+        {/* 规格&奖品 */}
+        <Button className='rule-icon'></Button>
+        <Button className='prize-icon'></Button>
+
+        {/* 其他icon */}
+        <Button className='new-user-gift-icon'></Button>
+        <Button className='finance-achievement-icon'></Button>
+
+        {/* 排行榜 */}
+        <RankModule/>
+
+        {/* 真实持仓 */}
+
+        {/* banner区 */}
+        <BannerModule/>
+
+        {/* 签到 */}
+        <SignModule/>
+      </div>
+    );
+  }
+}
+
+export default ActualHome;

src/pages/ActualHome/index.less

+@import "../../res.less";
+.actual-home-page {
+  width: 100%;
+  padding-top: 595px;
+  min-height: 100vh;
+  .webpBg("ActualHome/bg.png");
+  background-size: 750px 779px;
+  background-color: #e86a3c;
+  box-sizing: border-box;
+}
+
+.rule-icon {
+  .w-h-pos-r-t(45px, 85px, 0, 130px);
+  .webpBg("ActualHome/rule.png");
+}
+
+.prize-icon { 
+  .w-h-pos-r-t(45px, 85px, 0, 229px);
+  .webpBg("ActualHome/prize.png");
+}
+
+.new-user-gift-icon {
+  .w-h-pos-l-t(118px, 111px, 611px, 417px);
+  .webpBg("ActualHome/newUserGift.png");
+}
+
+.finance-achievement-icon {
+  .w-h-pos-l-t(119px, 111px, 611px, 557px);
+  .webpBg("ActualHome/financeAchievement.png");
+}
\ No newline at end of file

src/pages/HomeDemo/HomeDemo.jsx

-import React from 'react';
-import {observer} from 'mobx-react';
-import './HomeDemo.less';
-
-@observer
-class HomeDemo extends React.Component {
-
-  render() {
-    return <div className="homeDemo">
-      当前为活动首页
-    </div>;
-  }
-}
-
-export default HomeDemo;

src/pages/HomeDemo/HomeDemo.less

-@import "../../res.less";
-.homeDemo {}

src/pages/VirtualHome/index.jsx

+import React from 'react';
+import {observer} from 'mobx-react';
+import './index.less';
+
+@observer
+class ActualHome extends React.Component {
+
+  render() {
+    return (
+      <div className="actual-home-page">
+        {/* 规格&奖品 */}
+        <div className='rule-icon'></div>
+        <div className='prize-icon'></div>
+
+        {/* 其他icon */}
+        <div className='new-user-gift-icon'></div>
+        {/* 新手教程 */}
+        <div className='new-user-tutorial-icon'></div>
+      </div>
+    );
+  }
+}
+
+export default ActualHome;

src/pages/VirtualHome/index.less

+@import "../../res.less";
+.actual-home-page {
+  width: 100%;
+  padding-top: 595px;
+  min-height: 100vh;
+  background: #d12b2d url("https://yun.duiba.com.cn/polaris/%E8%83%8C%E6%99%AF.39a6836f0df229d2e1de7c66a018c9f701b4c5e9.png") no-repeat left top / 750px 779px;
+  box-sizing: border-box;
+}

src/pages/components/BannerModule/index.jsx

+import React from "react"
+import './index.less';
+
+class BannerModule extends React.Component {
+
+  render() {
+    return (
+      <div className="banner-module">
+        <div className="scroll-box">
+          {
+            [1, 2, 3, 4].map((item, index) => (
+              <img key={index} className="banner-img" src="http://xqtpl.com/450x196/?text=demo&color=fff"/>
+            ))
+          }
+        </div>
+      </div>
+    )
+  }
+}
+
+export default BannerModule
\ No newline at end of file

src/pages/components/BannerModule/index.less

+@import "../../../res.less";
+.banner-module {
+  height: 196px;
+  margin-bottom: 30px;
+  padding-left: 28px;
+}
+
+.scroll-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  overflow-x: scroll;
+  .banner-img {
+    width: 450px;
+    height: 196px;
+    margin-right: 20px;
+    border-radius: 30px;
+  }
+}
\ No newline at end of file

src/pages/components/RankModule/index.jsx

+import React from "react"
+import './index.less';
+
+class RankModule extends React.Component {
+  render() {
+    return (
+      <div>
+      </div>
+    )
+  }
+}
+
+export default RankModule
\ No newline at end of file

src/pages/components/RankModule/index.less

+@import "../../../res.less";
\ No newline at end of file

src/pages/components/SignModule/index.jsx

+import React from "react"
+import { weekList } from "@src/contants"
+import { Button } from "@src/components/Button"
+import './index.less';
+
+const SignModule = () => {
+  return (
+    <div className="no-center-qes">
+      <div className="sign-module">
+        <div className="week-list-box">
+          {
+            weekList.map((item, index) => (
+              <Button className="week-item">
+                <div className="week-item-text">周{item}</div>
+                <div className="task-title"></div>
+              </Button>
+            ))
+          }
+        </div>
+        <Button className="sign_btn"></Button>
+      </div>
+    </div>
+  )
+}
+
+export default SignModule
\ No newline at end of file

src/pages/components/SignModule/index.less

+@import "../../../res.less";
+.no-center-qes {
+  padding-left: 18px;
+}
+
+.sign-module {
+  position: relative;
+  width: 732px;
+  height: 407px;
+  .webpBg("ActualHome/sign_bg.png");
+  margin: 0 auto;
+}
+
+.week-list-box {
+  width: 654px;
+  height: 165px;
+  position: absolute;
+  left: 36px;
+  top: 120px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  .week-item {
+    position: relative;
+    width: 82px;
+    height: 107px;
+    .webpBg("ActualHome/sign_task.png")
+  }
+
+  .week-item-text {
+    width: 100%;
+    height: 30px;
+    text-align: center;
+    color: #a34b09;
+    line-height: 30px;
+    font-size: 22px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+
+  .task-title {
+    width: 84px;
+    height: 28px;
+    position: absolute;
+    top: -26px;
+    left: -1px;
+    .webpBg("ActualHome/sign_task_title.png")
+  }
+}
+
+.sign_btn {
+  width: 500px;
+  height: 81px;
+  position: absolute;
+  left: 149px;
+  top: 280px;
+  .webpBg("ActualHome/sign_btn.png")
+}

src/res.less

@@ -16,6 +16,22 @@
   .sparkBg("@{value}");
 }
 
+.w-h-pos-l-t(@width, @height, @left, @top) {
+  width: @width;
+  height: @height;
+  position: absolute;
+  left: @left;
+  top: @top;
+}
+
+.w-h-pos-r-t(@width, @height, @right, @top) {
+  width: @width;
+  height: @height;
+  position: absolute;
+  right: @right;
+  top: @top;
+}
+
 
 .mask(@value) {
   mask-image: url("@{RES_PATH}@{value}");

src/store/index.js

@@ -16,8 +16,8 @@ const store = makeAutoObservable({
       Did1NDA0NDc: 'sharePage',
       myPrize: 'myPrize',
       // TODO 举例子 新宿台奖品页
-      index: PAGE_MAP.LOADING_PAGE,
-    }[skinId] || PAGE_MAP.LOADING_PAGE,
+      index: PAGE_MAP.ACTUAL_HOME_PAGE,
+    }[skinId] || PAGE_MAP.ACTUAL_HOME_PAGE,
   pageData: {},
   /** 场景切换 */
   changePage(page, data = {}) {

src/utils/constants.js

@@ -15,7 +15,8 @@ export const MODAL_INDEX = {
 export const DEFAULT_NET_ERROR = '网络异常，请稍后再试';
 
 export const PAGE_MAP = {
-  HOME_PAGE: "homePage",
+  /** 实盘首页 */
+  ACTUAL_HOME_PAGE: "actualHomePage",
   LOADING_PAGE: "loadingPage",
 };