fixed

public/index.html

@@ -9,7 +9,7 @@
   <script  id="scriptjs" src="//yun.duiba.com.cn/js-libs/px-token/0.0.4/px-token.min.js"></script>
   <script src ="//yun.duiba.com.cn/js-libs/rem/1.1.0/rem.min.js"> </script>
   <script src="//yun.duiba.com.cn/js-libs/vConsole/3.3.4/vconsole.min.js"></script>
-  <title>瑞华集步</title>
+  <title>微众小康</title>
   <script>
     var vConsole = new VConsole();
   </script>

src/app.less

@@ -7,4 +7,5 @@ body {
   font-size: 24px;
   width: 100%;
   height: 100%;
+  user-select: none;
 }

src/components/comrulep/comrulep.jsx

-'use strict';
+"use strict";
 
-import React, { Component } from 'react';
-import resList from '../../resconfig/resList';
+import React, { Component } from "react";
+import resList from "../../resconfig/resList";
 
-import './comrulep.less';
+import "./comrulep.less";
 
 class Comrulep extends Component {
   constructor(props) {
     super(props);
     this.state = this.state || { resList: resList };
   }
-  componentDidMount(){
-    let msg = this.props.rule
-    document.getElementsByClassName("rule")[0].innerHTML = msg
+  componentDidMount() {
+    console.log('rule')
+    // let msg = this.props.rule
+    // document.getElementsByClassName("rule")[0].innerHTML = msg
   }
   render() {
     const { rule, onClose } = this.props;
     return (
       <div className="rulep">
-        <div className="bgModal"/>
-        <img className="rulebg" src={this.state.resList['bf406e35-b4dc-49bb-aaec-1a97a58474d4'].url} />
-        <label className="rule">
-          {/* {rule} */}
-        </label>
-        <img className="ruleclo" onClick={onClose} src={this.state.resList['c9098829-9dc3-4561-887d-e2a9b3a60e43'].url} />
+        <div className="bgModal" />
+        <img
+          className="rulebg"
+          src={this.state.resList["bf406e35-b4dc-49bb-aaec-1a97a58474d4"].url}
+        />
+        <div className="rule" dangerouslySetInnerHTML={{ __html: rule }} />
+        <img
+          className="ruleclo"
+          onClick={onClose}
+          src={this.state.resList["c9098829-9dc3-4561-887d-e2a9b3a60e43"].url}
+        />
       </div>
     );
   }

src/components/comrulep/comrulep.less

 .rulep {
-  top: 0px;
-  left: 0px;
-  width: 750px;
-  height: 1624px;
   display: block;
   position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 630px;
+  height: 775px;
   opacity: 1;
 
   .bgModal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
     background-color: black;
     opacity: 0.8;
-    width: 750px;
-    height: 1624px;
-    top: 0px;
-    left: 0px;
   }
 
   // top: 363px;
@@ -31,13 +35,12 @@
 
   .rule {
     width: 518px;
-    max-height: 540px;
-    opacity: 1;
-    top: 582px;
-    left: 120px;
+    height: 550px;
+    top: 170px;
+    left: 50%;
+    transform: translateX(-50%);
     overflow: scroll;
     position: absolute;
-    transform-origin: 0px 0px 0px;
     font-size: 24px;
     color: rgba(41, 41, 41, 1);
   }
@@ -46,9 +49,8 @@
     width: 62px;
     height: 62px;
     opacity: 0.4;
-    top: 312px;
-    left: 640px;
+    top: -50px;
+    right: 0;
     position: absolute;
-    transform-origin: 0px 0px 0px;
   }
 }
\ No newline at end of file