11

dsl.json

-{"view":{"name":"01加载页-合并","nodeType":"Div","uuid":"28459a0d-a2b8-472c-8546-dd461a39083e","children":[{"name":"index","properties":{"attrs":{},"style":{"width":"750","height":"1624","position":"absolute"},"className":"index"},"uuid":"8a4a4e6e-9823-43ee-ae40-a6308642d137","nodeType":"Div","viewType":"Page","children":[{"name":"bg","properties":{"attrs":{"source":"asset://2783ab9d-90bb-4804-ac52-c5213ad4da62"},"style":{"width":"750","height":"1624","position":"absolute"},"className":"bg"},"uuid":"9ea84b11-ff9b-41b0-9a7e-20dff056c88a","nodeType":"Image","viewType":"Page","children":[]},{"name":"title","properties":{"attrs":{"source":"asset://b4c78dea-8157-435d-8b1d-ee66bcee1869"},"style":{"width":"633","height":"244","left":"76","top":"292","position":"absolute","transformOrigin":"0 0 0"},"className":"title"},"uuid":"a88e67de-813b-47ac-882c-487d15d869eb","nodeType":"Image","viewType":"Page","children":[]},{"name":"loading","properties":{"attrs":{"source":"asset://25098902-3acd-4fc7-a501-9e0b9913ba44"},"style":{"width":"163","height":"31","left":"309","top":"916","position":"absolute","transformOrigin":"0 0 0"},"className":"loading"},"uuid":"55652bd1-69e8-4f1e-9cfe-8ba463f97235","nodeType":"Image","viewType":"Page","children":[]},{"name":"progress","properties":{"attrs":{},"style":{"width":"578","height":"31","left":"91","top":"1028","position":"absolute"},"className":"progress"},"uuid":"ae3d7307-68d0-40f8-8b89-138dfdbcf8f0","nodeType":"Div","viewType":"Page","children":[{"name":"progressbg","properties":{"attrs":{"source":"asset://3b371680-825c-40ff-9828-28f78f4c4e32"},"style":{"width":"578","height":"31","position":"absolute"},"className":"progressbg"},"uuid":"bd2f8d07-babc-4b0a-a961-d5d16d69202d","nodeType":"Image","viewType":"Page","children":[]},{"name":"progressfront","properties":{"attrs":{"source":"asset://57c1fb2b-f495-43ff-a215-61cf5f06cc53"},"style":{"width":"63","height":"23","left":"8","top":"4","position":"absolute"},"className":"progressfront"},"uuid":"775c5ac9-6269-49aa-8db3-758d7f9d57a8","nodeType":"Image","viewType":"Page","children":[]}]}]}]},"assets":[{"name":"bg","ext":".png","uuid":"2783ab9d-90bb-4804-ac52-c5213ad4da62","url":"https://yun.duiba.com.cn/spark/assets/181fcd4df380863f25fcefdebde02c295f8fe91c.png"},{"name":"title","ext":".png","uuid":"b4c78dea-8157-435d-8b1d-ee66bcee1869","url":"https://yun.duiba.com.cn/spark/assets/76aaa5008d71d29005917333743ea2dc40bcad33.png"},{"name":"loading","ext":".png","uuid":"25098902-3acd-4fc7-a501-9e0b9913ba44","url":"https://yun.duiba.com.cn/spark/assets/0b7075739df1d877539d5676dfeb83b1bb88b741.png"},{"name":"progressbg","ext":".png","uuid":"3b371680-825c-40ff-9828-28f78f4c4e32","url":"https://yun.duiba.com.cn/spark/assets/4d4bce2039c5a4236775e8ba591feb2de04e872c.png"},{"name":"progressfront","ext":".png","uuid":"57c1fb2b-f495-43ff-a215-61cf5f06cc53","url":"https://yun.duiba.com.cn/spark/assets/6665927cf63732ef536300a90a6af2eddfca4135.png"}],"animations":[],"dependencies":{},"customModules":{},"type":"save dsljson"}
+{"view":{"name":"01加载页-合并","nodeType":"Div","uuid":"28459a0d-a2b8-472c-8546-dd461a39083e","children":[{"name":"index","properties":{"attrs":{},"style":{"width":"750","height":"1624","position":"absolute"},"className":"index"},"uuid":"8a4a4e6e-9823-43ee-ae40-a6308642d137","nodeType":"Div","viewType":"Page","children":[{"name":"bg","properties":{"attrs":{"source":"asset://2783ab9d-90bb-4804-ac52-c5213ad4da62"},"style":{"width":"750","height":"1624","position":"absolute"},"className":"bg"},"uuid":"9ea84b11-ff9b-41b0-9a7e-20dff056c88a","nodeType":"Image","viewType":"Page","children":[]},{"name":"noclassname","properties":{"attrs":{},"style":{},"className":"noclassname"},"uuid":"09a9e8b4-4c1c-41a4-be53-5710aa8207b1","nodeType":"Image","viewType":"Page","children":[]},{"name":"title","properties":{"attrs":{"source":"asset://b4c78dea-8157-435d-8b1d-ee66bcee1869"},"style":{"width":"633","height":"244","left":"76","top":"292","position":"absolute","transformOrigin":"0 0 0"},"className":"title"},"uuid":"a88e67de-813b-47ac-882c-487d15d869eb","nodeType":"Image","viewType":"Page","children":[]},{"name":"loading","properties":{"attrs":{"source":"asset://25098902-3acd-4fc7-a501-9e0b9913ba44"},"style":{"width":"163","height":"31","left":"309","top":"916","position":"absolute","transformOrigin":"0 0 0"},"className":"loading"},"uuid":"55652bd1-69e8-4f1e-9cfe-8ba463f97235","nodeType":"Image","viewType":"Page","children":[]},{"name":"progress","properties":{"attrs":{},"style":{"width":"578","height":"31","left":"91","top":"1028","position":"absolute"},"className":"progress"},"uuid":"ae3d7307-68d0-40f8-8b89-138dfdbcf8f0","nodeType":"Div","viewType":"Page","children":[{"name":"progressbg","properties":{"attrs":{"source":"asset://3b371680-825c-40ff-9828-28f78f4c4e32"},"style":{"width":"578","height":"31","position":"absolute"},"className":"progressbg"},"uuid":"bd2f8d07-babc-4b0a-a961-d5d16d69202d","nodeType":"Image","viewType":"Page","children":[]},{"name":"progressfront","properties":{"attrs":{"source":"asset://57c1fb2b-f495-43ff-a215-61cf5f06cc53"},"style":{"width":"163","height":"23","left":"8","top":"4","position":"absolute"},"className":"progressfront"},"uuid":"775c5ac9-6269-49aa-8db3-758d7f9d57a8","nodeType":"Image","viewType":"Page","children":[]}]}]}]},"assets":[{"name":"bg","ext":".png","uuid":"2783ab9d-90bb-4804-ac52-c5213ad4da62","url":"https://yun.duiba.com.cn/spark/assets/181fcd4df380863f25fcefdebde02c295f8fe91c.png"},{"name":"title","ext":".png","uuid":"b4c78dea-8157-435d-8b1d-ee66bcee1869","url":"https://yun.duiba.com.cn/spark/assets/76aaa5008d71d29005917333743ea2dc40bcad33.png"},{"name":"loading","ext":".png","uuid":"25098902-3acd-4fc7-a501-9e0b9913ba44","url":"https://yun.duiba.com.cn/spark/assets/0b7075739df1d877539d5676dfeb83b1bb88b741.png"},{"name":"progressbg","ext":".png","uuid":"3b371680-825c-40ff-9828-28f78f4c4e32","url":"https://yun.duiba.com.cn/spark/assets/4d4bce2039c5a4236775e8ba591feb2de04e872c.png"},{"name":"progressfront","ext":".png","uuid":"57c1fb2b-f495-43ff-a215-61cf5f06cc53","url":"https://yun.duiba.com.cn/spark/assets/6665927cf63732ef536300a90a6af2eddfca4135.png"}],"animations":[],"dependencies":{},"customModules":{},"type":"save dsljson"}

project/src/pages/index/index.jsx

@@ -10,10 +10,18 @@ class Index extends Component {
     super(props);
     this.state = {
       resList: resList,
+      progressStyle: {
+        width: '0rem',
+      },
     };
   }
 
+  componentDidMount() {
+    setInterval(() => {}, 1000);
+  }
+
   render() {
+    const { progressStyle } = this.state;
     return (
       <div className="index " uuid="8a4a4e6e-9823-43ee-ae40-a6308642d137">
         <img
@@ -21,6 +29,7 @@ class Index extends Component {
           uuid="9ea84b11-ff9b-41b0-9a7e-20dff056c88a"
           src={this.state.resList['2783ab9d-90bb-4804-ac52-c5213ad4da62'].url}
         />
+        <img uuid="09a9e8b4-4c1c-41a4-be53-5710aa8207b1" />
         <img
           className="title "
           uuid="a88e67de-813b-47ac-882c-487d15d869eb"
@@ -38,6 +47,7 @@ class Index extends Component {
             src={this.state.resList['3b371680-825c-40ff-9828-28f78f4c4e32'].url}
           />
           <img
+            style={progressStyle}
             className="progressfront"
             uuid="775c5ac9-6269-49aa-8db3-758d7f9d57a8"
             src={this.state.resList['57c1fb2b-f495-43ff-a215-61cf5f06cc53'].url}

project/src/pages/index/index.less

@@ -35,7 +35,7 @@
       position: absolute;
     }
     .progressfront {
-      width: 63px;
+      width: 163px;
       height: 23px;
       left: 8px;
       top: 4px;