我的

project/package.json

@@ -27,8 +27,7 @@
     "redux-thunk": "^2.3.0",
     "spark-utils": "^0.0.12",
     "style-loader": "^1.2.1",
-    "svgaplayerweb": "^2.3.1",
-    "teddi": "file:../../work/teddi"
+    "svgaplayerweb": "^2.3.1"
   },
   "devDependencies": {
     "mockjs": "^1.1.0"

project/src/app.jsx

@@ -16,7 +16,7 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      page: 'detail',
+      page: 'loading',
     };
   }
 

project/src/components/select/select.jsx

@@ -14,7 +14,6 @@ class Select extends Component {
   }
 
   componentDidMount() {
-    
     // setTimeout(() => {
     //   console.log('关闭这个弹窗');
     //   this.props.onClose();
@@ -24,21 +23,42 @@ class Select extends Component {
   render() {
     return (
       <div className="select " uuid="298ea3b7-efbb-42ac-adea-ee68aa1db627">
-        <img
-          className="select_role1 "
-          uuid="76f06526-a55d-4f2a-b817-d450126bdf54"
-          src={this.state.resList['8872d3a6-1d19-4a83-a07d-ae084b8a1392'].url}
-        />
-        <img
-          className="select_role2 "
-          uuid="cb643df1-dd96-4249-ac24-04136f106467"
-          src={this.state.resList['61eeafb1-d01e-4f8c-b7a8-5ee9432efb9b'].url}
-        />
-        <img
-          className="select_role3 "
-          uuid="f26ff0c9-78dc-47b8-970b-dfe5a6938464"
-          src={this.state.resList['9da0a542-17dc-4c4c-bcc3-2ee8fba66ffa'].url}
-        />
+        <div className="cardone" uuid="36334c7a-26df-4f9e-83d3-6ac81e49d6db">
+          <img
+            className="select_role1 "
+            uuid="76f06526-a55d-4f2a-b817-d450126bdf54"
+            src={this.state.resList['8872d3a6-1d19-4a83-a07d-ae084b8a1392'].url}
+          />
+          <img
+            className="onemask opacitylat"
+            src={this.state.resList['5608e852-913b-47e0-a286-0c33a86aed10'].url}
+            uuid="912dc687-6727-4bb1-9e87-936ea77074ce"
+          />
+        </div>
+        <div className="cardtwo" uuid="a24b6660-832b-4fd0-94e6-b627f4aefb68">
+          <img
+            className="select_role2 "
+            uuid="cb643df1-dd96-4249-ac24-04136f106467"
+            src={this.state.resList['61eeafb1-d01e-4f8c-b7a8-5ee9432efb9b'].url}
+          />
+          <img
+            className="twomask opacitylat"
+            src={this.state.resList['5608e852-913b-47e0-a286-0c33a86aed10'].url}
+            uuid="d54f2e03-e401-42a3-8132-8e8138e5c4f9"
+          />
+        </div>
+        <div className="cardthr" uuid="68b6c97e-82f0-412b-8950-2665aba842fa">
+          <img
+            className="select_role3 "
+            uuid="f26ff0c9-78dc-47b8-970b-dfe5a6938464"
+            src={this.state.resList['9da0a542-17dc-4c4c-bcc3-2ee8fba66ffa'].url}
+          />
+          <img
+            className="thrmask opacitylat"
+            src={this.state.resList['5608e852-913b-47e0-a286-0c33a86aed10'].url}
+            uuid="28141b28-0c40-4810-8233-cc392753d698"
+          />
+        </div>
         <img
           className="select_bg "
           uuid="b7fef7c6-cc6d-4147-baa2-1b836b23f5cf"

project/src/components/select/select.less

@@ -4,26 +4,85 @@
   left: 47px;
   top: 228px;
   position: absolute;
-  .select_role1 {
+  .cardone {
+    transform-origin: 50% 50%;
     width: 535px;
     height: 614px;
-    left: 68px;
-    top: 229px;
     position: absolute;
+    left: 0px;
+    right: 0px;
+    .select_role1 {
+      width: 535px;
+      height: 614px;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+    }
+    .onemask {
+      width: 523px;
+      height: 614px;
+      display: block;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+      transform-origin: 0px 0px 0px;
+    }
   }
-  .select_role2 {
+  .cardtwo {
     width: 535px;
     height: 614px;
-    left: 68px;
-    top: 229px;
+    transform-origin: 50% 50%;
     position: absolute;
+    left: 146px;
+    right: 0px;
+    top: 410px;
+    .select_role2 {
+      width: 535px;
+      height: 614px;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+    }
+    .twomask {
+      width: 523px;
+      height: 614px;
+      display: block;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+      transform-origin: 0px 0px 0px;
+    }
   }
-  .select_role3 {
+  .cardthr {
     width: 535px;
     height: 614px;
-    left: 68px;
-    top: 229px;
+    transform-origin: 50% 50%;
     position: absolute;
+    left: -228px;
+    right: 0px;
+    top: 360px;
+    .select_role3 {
+      width: 535px;
+      height: 614px;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+    }
+    .thrmask {
+      width: 523px;
+      height: 614px;
+      display: block;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+      transform-origin: 0px 0px 0px;
+    }
+  }
+  .opacitycur{
+    opacity: 0;
+  }
+  .opacitylat{
+    opacity: 0.6;
   }
   .select_bg {
     width: 502px;

project/src/pages/detail2/detail2.jsx

@@ -16,7 +16,6 @@ class Detail2 extends Component {
   render() {
     return (
       <div className="detail2 " uuid="c5abc304-1a0b-4804-956a-d61c1d5b75ed">
-        <div className=""></div>
         <img
           className="detail2_bg "
           uuid="2b6c5d97-e458-42a0-b49b-49e9efc6abbc"

project/src/pages/detail2/detail2.less

 .detail2 {
-  width: 100vw;
-  height: 100vh;
-  opacity: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: hidden;
+  width: 750px;
+  height: 1624px;
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  transform-origin: 0 0 0;
   .detail2_bg {
     width: 750px;
     height: 1624px;
     position: absolute;
+    left: -2px;
     top: 0px;
-    transform-origin: 0px 0px 0px;
+    transform-origin: 0 0 0;
   }
   .detail2_item {
     width: 618px;

project/src/pages/loading/loading.jsx

 'use strict';
 
 import { appID } from 'duiba-utils';
-import React, { Component } from 'react'; 
-import { Timer } from 'teddi';
+import React, { Component } from 'react'; // import { Timer } from 'teddi';
 
 import resList from '../../resconfig/resList'; //import API from '../../api';
 
 import API from '../../api';
 import './loading.less';
+import { Aup } from '../../pop';
 
 class Loading extends Component {
   constructor(props) {
@@ -25,12 +25,12 @@ class Loading extends Component {
 
   getCountdown() {
     return new Promise((r) => {
-      const delta = 30;
-      const timer = new Timer(1 * 30, 1000 / 30);
-      timer.on('timer', this.onupdate, this);
-      timer.on('complete', r, this);
-      timer.start();
-      // r();
+      const delta = 30; // const timer = new Timer(1 * 30, 1000 / 30);
+      // timer.on('timer', this.onupdate, this);
+      // timer.on('complete', r, this);
+      // timer.start();
+
+      r();
     });
   }
 
@@ -42,6 +42,7 @@ class Loading extends Component {
     this.props.navigateTo('mainpage', {
       info: res.data,
     });
+    Aup.show('Select', {}, this);
   }
 
   render() {