From 932ac035b9888cd71111828897a6fd0624a737db Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Fri, 16 Aug 2024 17:01:33 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E5=A4=8Dweb=E7=AB=AF?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=97=A0=E6=B3=95=E6=BB=9A=E5=8A=A8=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/CSS/transform/rotate.uvue    |  76 +++++++--------
 pages/CSS/transform/translate.uvue | 145 +++++++++++++----------------
 2 files changed, 99 insertions(+), 122 deletions(-)

diff --git a/pages/CSS/transform/rotate.uvue b/pages/CSS/transform/rotate.uvue
index 3eaf0eb9..95159f98 100644
--- a/pages/CSS/transform/rotate.uvue
+++ b/pages/CSS/transform/rotate.uvue
@@ -1,58 +1,46 @@
 <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>
diff --git a/pages/CSS/transform/translate.uvue b/pages/CSS/transform/translate.uvue
index fefbaa7c..de761325 100644
--- a/pages/CSS/transform/translate.uvue
+++ b/pages/CSS/transform/translate.uvue
@@ -1,79 +1,68 @@
-<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>
-- 
GitLab