11

project/src/app.jsx

@@ -11,6 +11,7 @@ import Mainpage from "./pages/mainpage/mainpage.jsx";
 import Sign from "./components/sign/sign.jsx";
 import Select from "./components/select/select.jsx";
 import Rule from "./components/rule/rule.jsx";
+import Userinfo from "./components/userinfo/userinfo.jsx";
 class App extends Component {
   constructor(props) {
     super(props);
@@ -30,7 +31,8 @@ class App extends Component {
         {page == 'loading' && <Loading data={pagedata} navigateTo={this.navigateTo}></Loading>}
         {page == 'mainpage' && <Mainpage data={pagedata} navigateTo={this.navigateTo}></Mainpage>}
         {/* <Select></Select> */}
-        <Sign></Sign>
+        <Userinfo></Userinfo>
+        {/* <Sign></Sign> */}
         {/* <Rule></Rule> */}
       </div>
     );

project/src/components/sign/sign.less

@@ -130,7 +130,7 @@
       top: 122px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
     .sgin_1_num {
       width: 52px;
@@ -139,7 +139,7 @@
       top: 83px;
       position: absolute;
       font-size: 20.14451px;
-      color: rgba(246, 61, 31, 1);
+      color: #f63d1f;
     }
   }
   .sgin_2 {
@@ -160,7 +160,7 @@
       top: 122px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
     .sgin_2_num {
       width: 52px;
@@ -169,7 +169,7 @@
       top: 83px;
       position: absolute;
       font-size: 20.14451px;
-      color: rgba(246, 61, 31, 1);
+      color: #f63d1f;
     }
   }
   .sgin_5 {
@@ -190,7 +190,7 @@
       top: 122px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
     .sgin_5_num {
       width: 52px;
@@ -199,7 +199,7 @@
       top: 83px;
       position: absolute;
       font-size: 20.14451px;
-      color: rgba(246, 61, 31, 1);
+      color: #f63d1f;
     }
   }
   .sgin_6 {
@@ -220,7 +220,7 @@
       top: 122px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
     .sgin_6_num {
       width: 52px;
@@ -229,7 +229,7 @@
       top: 83px;
       position: absolute;
       font-size: 20.14451px;
-      color: rgba(246, 61, 31, 1);
+      color: #f63d1f;
     }
   }
   .sgin_7 {
@@ -250,7 +250,7 @@
       top: 122px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
   }
   .sgin_3 {
@@ -271,7 +271,7 @@
       top: 122px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
     .sgin_3_num {
       width: 52px;
@@ -280,7 +280,7 @@
       top: 83px;
       position: absolute;
       font-size: 20.14451px;
-      color: rgba(246, 61, 31, 1);
+      color: #f63d1f;
     }
   }
   .sgin_4 {
@@ -301,7 +301,7 @@
       top: 122px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
     .sgin_4_num {
       width: 52px;
@@ -310,7 +310,7 @@
       top: 83px;
       position: absolute;
       font-size: 20.14451px;
-      color: rgba(246, 61, 31, 1);
+      color: #f63d1f;
     }
   }
   .signed_1 {
@@ -331,7 +331,7 @@
       top: 122px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
     .signed_1_num {
       width: 52px;
@@ -340,7 +340,7 @@
       top: 83px;
       position: absolute;
       font-size: 20.14451px;
-      color: rgba(56, 56, 56, 1);
+      color: #383838;
     }
   }
   .signed_2 {
@@ -361,7 +361,7 @@
       top: 123px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
     .signed_2_num {
       width: 52px;
@@ -370,7 +370,7 @@
       top: 83px;
       position: absolute;
       font-size: 20.14451px;
-      color: rgba(56, 56, 56, 1);
+      color: #383838;
     }
   }
   .signed_3 {
@@ -391,7 +391,7 @@
       top: 123px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
     .signed_3_num {
       width: 52px;
@@ -400,7 +400,7 @@
       top: 83px;
       position: absolute;
       font-size: 20.14451px;
-      color: rgba(56, 56, 56, 1);
+      color: #383838;
     }
   }
   .signed_4 {
@@ -421,7 +421,7 @@
       top: 123px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
     .signed_4_num {
       width: 52px;
@@ -430,7 +430,7 @@
       top: 83px;
       position: absolute;
       font-size: 20.14451px;
-      color: rgba(56, 56, 56, 1);
+      color: #383838;
     }
   }
   .signed_5 {
@@ -451,7 +451,7 @@
       top: 123px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
     .signed_5_num {
       width: 52px;
@@ -460,7 +460,7 @@
       top: 83px;
       position: absolute;
       font-size: 20.14451px;
-      color: rgba(56, 56, 56, 1);
+      color: #383838;
     }
   }
   .signed_6 {
@@ -481,7 +481,7 @@
       top: 123px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
     .signed_6_num {
       width: 52px;
@@ -490,7 +490,7 @@
       top: 83px;
       position: absolute;
       font-size: 20.14451px;
-      color: rgba(56, 56, 56, 1);
+      color: #383838;
     }
   }
   .sign_signed_btn {
@@ -525,7 +525,7 @@
       top: 122px;
       position: absolute;
       font-size: 21.02941px;
-      color: rgba(255, 255, 255, 1);
+      color: #ffffff;
     }
   }
 }

project/src/components/userinfo/userinfo.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './userinfo.less';
+class Userinfo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { resList: resList };
+  }
+  render() {
+    return (
+      <div className="userinfo " uuid="a9143822-c421-48d3-92c3-de9eafe5c234">
+        <img
+          className="userinfo_bg "
+          uuid="cf852278-516f-48f3-bad2-0e38a1431c4e"
+          src={this.state.resList['868f4d36-e5ff-4bf9-9d7e-3c01ce4bb380'].url}
+        />
+        <img
+          className="userinfo_avatar "
+          uuid="1addc1b2-f339-4f8b-81c8-21153b03653a"
+          src={this.state.resList['5406c697-b889-4062-8910-343038c4dc93'].url}
+        />
+        <img
+          className="userinfo_close "
+          uuid="4f217b43-8438-451e-b28f-0e9d611fce2b"
+          src={this.state.resList['c7826e1a-8b74-44da-922f-0fe078587999'].url}
+        />
+        <img
+          className="userinfo_btn "
+          uuid="dbbad0c1-ead1-4515-ae55-144e26640415"
+          src={this.state.resList['2208dc94-a012-4a45-8f4e-64468993e652'].url}
+        />
+      </div>
+    );
+  }
+}
+export default Userinfo;

project/src/components/userinfo/userinfo.less

+.userinfo {
+  width: 514px;
+  height: 555px;
+  left: 121px;
+  top: 486px;
+  position: absolute;
+  .userinfo_bg {
+    width: 509px;
+    height: 459px;
+    top: 96px;
+    position: absolute;
+  }
+  .userinfo_avatar {
+    width: 212px;
+    height: 211px;
+    left: 148px;
+    top: 10px;
+    position: absolute;
+  }
+  .userinfo_close {
+    width: 48px;
+    height: 48px;
+    left: 466px;
+    position: absolute;
+  }
+  .userinfo_btn {
+    width: 401px;
+    height: 99px;
+    left: 53px;
+    top: 389px;
+    position: absolute;
+  }
+}