修改ft官网

css/new/index.css

@@ -4,14 +4,12 @@ body {
 }
 
 #pro {
-    position: fixed;
+    position: relative;
     width: 10rem;
     height: 100%;
     overflow: hidden;
-    left: 50%;
-    top: 0;
     background: #bb2677;
-    transform: translateX(-50%);
+    margin: 0 auto;
 
 }
 
@@ -55,15 +53,17 @@ body {
 }
 
 .mPhone {
-    width: 5.347rem;
-    height: 10.68rem;
+    width: 30vh;
+    height: 60vh;
     position: absolute;
-    top: 3.8rem;
+    top: 16.2vh;
     left: 50%;
-    transform: translateX( -50%) scale(1.2);
+    transform: translateX( -50%);
     z-index: 10;
 }
 
+
+
 .phoneBorder {
     width: 100%;
     height: 100%;
@@ -81,7 +81,8 @@ body {
     -webkit-border-radius: 1rem;
     overflow: hidden;
     height: 100%;
-    margin: 0rem 0.2rem;
+    padding: 0.36rem 0.36rem;
+    box-sizing: border-box;
     position: absolute;
     top: 0;
     left: 0;
@@ -90,15 +91,7 @@ body {
     z-index: 1;
 }
 
-#video {
-    height: 100%;
-    padding-top: 0.35rem;
-    margin-right: 0.1rem;
-}
 
-.btnPage2{
-    top: 16rem;
-}
 
 .mTitle {
     width: 8rem;
@@ -141,8 +134,8 @@ body {
     background: url(../../img/new3/bubble2.png) no-repeat;
     background-size: contain;
     position: absolute;
-    top: 1.6rem;
-    left: 7rem;
+    top: 1.2rem;
+    left: 8rem;
     animation: mBreath 6s linear infinite;
 }
 
@@ -153,7 +146,7 @@ body {
     background-size: contain;
     position: absolute;
     top: 8rem;
-    right: -0.4rem;
+    right: -0.8rem;
     animation: mBreath 10s linear infinite;
 }
 
@@ -163,9 +156,14 @@ body {
     background: url(../../img/new3/bubble4.png) no-repeat;
     background-size: contain;
     position: absolute;
-    top: 14rem;
+    top: 13.2rem;
     left: -0.3rem;
     animation: mBreath 7s linear infinite;
+    z-index: 99;
+}
+
+.btnPage2{
+    bottom: 1.8vh;
 }
 
 @keyframes mBreath {
@@ -181,14 +179,10 @@ body {
 }
 
 .recommendBox {
-    /* width: 10rem;
-    height: 15rem; */
     width: 100%;
     position: absolute;
-    /* top: 5rem; */
-    top: 0rem;
+    top: 3.2rem;
     left: 0rem;
-    margin-top: 4rem;
     overflow-y: scroll;
 }
 
@@ -198,6 +192,7 @@ body {
 
 .rRow {
     width: 100%;
+    margin-bottom: 0.1rem;
 }
 
 .youtubeVideos {
@@ -209,6 +204,9 @@ body {
     -webkit-border-radius: 0.267rem;
     -moz-border-radius: 0.267rem;
     overflow: hidden;
+    
+    background: url(../../img/new3/videoBg.png) no-repeat;
+    background-size: 100% 100%;
 }
 
 .elementor-video-iframe {
@@ -257,8 +255,8 @@ body {
     background: url("../../img/new3/imageSprites.png") no-repeat;
     background-size: 100% 100%;
     position: fixed;
-    bottom: 0.6rem;
-    left: 90%;
+    bottom: 1rem;
+    left: 92%;
     animation: upWard 1s linear 0s infinite alternate;
     -webkit-transform: translateX(-50%);
     -webkit-animation: upWard 1s linear 0s infinite alternate;
@@ -266,11 +264,11 @@ body {
 
 @-webkit-keyframes upWard {
     from {
-        bottom: 0.6rem;
+        bottom: 1rem;
     }
 
     to {
-        bottom: 0.2rem;
+        bottom: 0.8rem;
     }
 }