style: 修复web端页面无法滚动问题

pages/CSS/transform/rotate.uvue

 <template>
-  <!-- #ifdef APP -->
   <scroll-view class="page">
-  <!-- #endif -->
-    <view class="rotate-container">
-      <view class="trace">
-        <view class="base reserve">
-          <text class="reserve-text">rotate(20deg)</text>
-          <text class="reserve-text">转变前位置</text>
-        </view>
-        <view class="base reserve">
-          <text class="reserve-text">rotateX(50deg)</text>
-          <text class="reserve-text">转变前位置</text>
-        </view>
-        <view class="base reserve">
-          <text class="reserve-text">rotateY(50deg)</text>
-          <text class="reserve-text">转变前位置</text>
-        </view>
-        <view class="base reserve">
-          <text class="reserve-text">rotateZ(50deg)</text>
-          <text class="reserve-text">转变前位置</text>
-        </view>
+    <view class="trace">
+      <view class="base reserve">
+        <text class="reserve-text">rotate(20deg)</text>
+        <text class="reserve-text">转变前位置</text>
       </view>
-
-      <view class="base transform" style="transform: rotate(20deg)">
-        <text>rotate(20deg)</text>
-        <text>转变后位置</text>
-      </view>
-      <view class="base transform" style="transform: rotateX(50deg)">
-        <text>rotateX(50deg)</text>
-        <text>转变后位置</text>
+      <view class="base reserve">
+        <text class="reserve-text">rotateX(50deg)</text>
+        <text class="reserve-text">转变前位置</text>
       </view>
-      <view class="base transform" style="transform: rotateY(50deg)">
-        <text>rotateY(50deg)</text>
-        <text>转变后位置</text>
+      <view class="base reserve">
+        <text class="reserve-text">rotateY(50deg)</text>
+        <text class="reserve-text">转变前位置</text>
       </view>
-      <view class="base transform" style="transform: rotateZ(50deg)">
-        <text>rotateZ(50deg)</text>
-        <text>转变后位置</text>
+      <view class="base reserve">
+        <text class="reserve-text">rotateZ(50deg)</text>
+        <text class="reserve-text">转变前位置</text>
       </view>
+    </view>
 
+    <view class="base transform" style="transform: rotate(20deg)">
+      <text>rotate(20deg)</text>
+      <text>转变后位置</text>
+    </view>
+    <view class="base transform" style="transform: rotateX(50deg)">
+      <text>rotateX(50deg)</text>
+      <text>转变后位置</text>
+    </view>
+    <view class="base transform" style="transform: rotateY(50deg)">
+      <text>rotateY(50deg)</text>
+      <text>转变后位置</text>
+    </view>
+    <view class="base transform" style="transform: rotateZ(50deg)">
+      <text>rotateZ(50deg)</text>
+      <text>转变后位置</text>
     </view>
-  <!-- #ifdef APP -->
   </scroll-view>
-  <!-- #endif -->
 </template>
 
 <style>
   .page {
     flex: 1;
-  }
-
-  .rotate-container {
-    height: 100%;
-    display: flex;
     align-items: center;
   }
 
@@ -74,15 +62,15 @@
 
   .reserve {
     border: 1px dotted #588;
-    background-color: #DDD;
+    background-color: #ddd;
   }
 
   .reserve-text {
-    color: #CCC;
+    color: #ccc;
   }
 
   .transform {
-    border: 1px solid #00F;
+    border: 1px solid #00f;
     background-color: rgba(0, 255, 255, 0.5);
   }
 </style>

pages/CSS/transform/translate.uvue

-<template>
-  <!-- #ifdef APP -->
-  <scroll-view class="page">
-  <!-- #endif -->
-    <view class="translate-container">
-      <view class="trace">
-        <view class="base reserve">
-          <text class="reserve-text">translateX(80%)</text>
-          <text class="reserve-text">转变前位置</text>
-        </view>
-        <view class="base reserve">
-          <text class="reserve-text">translateY(50px)</text>
-          <text class="reserve-text">转变前位置</text>
-        </view>
-        <view class="base reserve">
-          <text class="reserve-text">translate(-50%,50%)</text>
-          <text class="reserve-text">转变前位置</text>
-        </view>
-      </view>
-
-      <view class="base transform" style="transform: translateX(80%)">
-        <text>translateX(80%)</text>
-        <text>转变后位置</text>
-      </view>
-      <view class="base transform" style="transform: translateY(50px)">
-        <text>translateY(50px)</text>
-        <text>转变后位置</text>
-      </view>
-      <view class="base transform" style="transform: translate(-50%, 50%)">
-        <text>translate(-50%,50%)</text>
-        <text>转变后位置</text>
-      </view>
-    </view>
-  <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
-</template>
-
-<style>
-  .page {
-    flex: 1;
-  }
-
-  .translate-container{
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  .trace {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    align-items: center;
-  }
-
-  .base {
-    margin: 10px;
-    width: 150px;
-    height: 150px;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .reserve {
-    border: 1px dotted #588;
-    background-color: #DDD;
-  }
-
-  .reserve-text {
-    color: #CCC;
-  }
-
-  .transform {
-    border: 1px solid #00F;
-    background-color: rgba(0, 255, 255, 0.5);
-  }
+<template>
+  <scroll-view class="page">
+    <view class="trace">
+      <view class="base reserve">
+        <text class="reserve-text">translateX(80%)</text>
+        <text class="reserve-text">转变前位置</text>
+      </view>
+      <view class="base reserve">
+        <text class="reserve-text">translateY(50px)</text>
+        <text class="reserve-text">转变前位置</text>
+      </view>
+      <view class="base reserve">
+        <text class="reserve-text">translate(-50%,50%)</text>
+        <text class="reserve-text">转变前位置</text>
+      </view>
+    </view>
+
+    <view class="base transform" style="transform: translateX(80%)">
+      <text>translateX(80%)</text>
+      <text>转变后位置</text>
+    </view>
+    <view class="base transform" style="transform: translateY(50px)">
+      <text>translateY(50px)</text>
+      <text>转变后位置</text>
+    </view>
+    <view class="base transform" style="transform: translate(-50%, 50%)">
+      <text>translate(-50%,50%)</text>
+      <text>转变后位置</text>
+    </view>
+  </scroll-view>
+</template>
+
+<style>
+  .page {
+    flex: 1;
+    align-items: center;
+  }
+
+  .trace {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    align-items: center;
+  }
+
+  .base {
+    margin: 10px;
+    width: 150px;
+    height: 150px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .reserve {
+    border: 1px dotted #588;
+    background-color: #DDD;
+  }
+
+  .reserve-text {
+    color: #CCC;
+  }
+
+  .transform {
+    border: 1px solid #00F;
+    background-color: rgba(0, 255, 255, 0.5);
+  }
 </style>