From 39ca006cd857059cb8711bc921970c554c30c958 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Thu, 15 Aug 2024 21:52:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E7=A4=BA=E4=BE=8B=E5=8F=8A=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/API/compress-image/compress-image.uvue  |  52 ++---
 pages/API/compress-video/compress-video.uvue  |  46 ++---
 .../get-current-pages/get-current-pages.uvue  |  77 ++++----
 ...-page-style-disable-pull-down-refresh.uvue |  54 +++---
 .../CSS/overflow/overflow-visible-event.uvue  |   8 +-
 pages/CSS/transform/rotate.uvue               | 180 ++++++++++--------
 pages/CSS/transform/scale.uvue                | 161 ++++++++--------
 pages/CSS/transform/translate.uvue            | 145 +++++++-------
 pages/pages.test.js                           |   3 +-
 9 files changed, 391 insertions(+), 335 deletions(-)

diff --git a/pages/API/compress-image/compress-image.uvue b/pages/API/compress-image/compress-image.uvue
index 916a1dba..cf1394eb 100644
--- a/pages/API/compress-image/compress-image.uvue
+++ b/pages/API/compress-image/compress-image.uvue
@@ -2,32 +2,34 @@
   <!-- #ifdef APP -->
   <scroll-view style="flex:1">
   <!-- #endif -->
-    <page-head :title="title"></page-head>
-    <view class="uni-padding-wrap">
-      <view class="image-container">
-        <image class="image" :src="beforeCompressPath" mode="aspectFit"></image>
-        <image class="image" :src="afterCompressPath" mode="aspectFit"></image>
-      </view>
-      <view class="uni-title">
-        <text class="uni-subtitle-text">压缩前图片信息</text>
-      </view>
-      <text>{{beforeCompressImageInfo}}</text>
-      <view class="uni-title">
-        <text class="uni-subtitle-text">压缩后图片信息</text>
-      </view>
-      <text>{{afterCompressImageInfo}}</text>
-      <view class="uni-btn-v">
-        <button type="primary" @click="chooseImage">从相册中选取待压缩的图片</button>
-      </view>
-      <view class="uni-btn-v">
-        <button type="primary" @click="compressImage">压缩图片</button>
+    <view>
+      <page-head :title="title"></page-head>
+      <view class="uni-padding-wrap">
+        <view class="image-container">
+          <image class="image" :src="beforeCompressPath" mode="aspectFit"></image>
+          <image class="image" :src="afterCompressPath" mode="aspectFit"></image>
+        </view>
+        <view class="uni-title">
+          <text class="uni-subtitle-text">压缩前图片信息</text>
+        </view>
+        <text>{{beforeCompressImageInfo}}</text>
+        <view class="uni-title">
+          <text class="uni-subtitle-text">压缩后图片信息</text>
+        </view>
+        <text>{{afterCompressImageInfo}}</text>
+        <view class="uni-btn-v">
+          <button type="primary" @click="chooseImage">从相册中选取待压缩的图片</button>
+        </view>
+        <view class="uni-btn-v">
+          <button type="primary" @click="compressImage">压缩图片</button>
+        </view>
       </view>
+      <input-data defaultValue="80" title="压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）" type="number"
+        @confirm="onQualityConfirm"></input-data>
+      <input-data title="压缩后图片的宽度，单位px" type="string" @confirm="onCompressedWidthConfirm"></input-data>
+      <input-data title="压缩后图片的高度，单位px" type="string" @confirm="onCompressedHeightConfirm"></input-data>
+      <input-data defaultValue="0" title="旋转度数，范围0～360" type="number" @confirm="onRotateConfirm"></input-data>
     </view>
-    <input-data defaultValue="80" title="压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）" type="number"
-      @confirm="onQualityConfirm"></input-data>
-    <input-data title="压缩后图片的宽度，单位px" type="string" @confirm="onCompressedWidthConfirm"></input-data>
-    <input-data title="压缩后图片的高度，单位px" type="string" @confirm="onCompressedHeightConfirm"></input-data>
-    <input-data defaultValue="0" title="旋转度数，范围0～360" type="number" @confirm="onRotateConfirm"></input-data>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
@@ -144,7 +146,7 @@
             uni.getImageInfo({
               src: res.tempFilePath,
               success: (_res) => {
-                let beforeCompressSize: number, afterComoressSize: number;
+                let beforeCompressSize : number, afterComoressSize : number;
                 // #ifdef APP-ANDROID
                 beforeCompressSize = new FileInputStream(UTSAndroid.convert2AbsFullPath(this.imageSrcForTest)).available();
                 afterComoressSize = new FileInputStream(res.tempFilePath.substring("file://".length)).available();
diff --git a/pages/API/compress-video/compress-video.uvue b/pages/API/compress-video/compress-video.uvue
index 306ebbc6..b06d526e 100644
--- a/pages/API/compress-video/compress-video.uvue
+++ b/pages/API/compress-video/compress-video.uvue
@@ -3,27 +3,29 @@
   <scroll-view style="flex:1">
   <!-- #endif -->
     <page-head :title="title"></page-head>
-    <view class="uni-padding-wrap">
-      <video class="video" :src="beforeCompressPath" :controls="true"></video>
-      <view class="uni-title">
-        <text class="uni-subtitle-text">压缩前视频信息</text>
-      </view>
-      <text>{{beforeCompressVideoInfo}}</text>
-      <video class="video" :src="afterCompressPath" :controls="true"></video>
-      <view class="uni-title">
-        <text class="uni-subtitle-text">压缩后视频信息</text>
-      </view>
-      <text>{{afterCompressVideoInfo}}</text>
-      <view class="uni-btn-v">
-        <button type="primary" @click="chooseVideo">从相册中选取待压缩的视频</button>
-      </view>
-      <view class="uni-btn-v">
-        <button type="primary" @click="compressVideo">压缩视频</button>
-      </view>
-      <enum-data title="压缩质量" :items="qualityItemTypes" @change="onQualityChange"></enum-data>
-      <view class="uni-common-mt">
-        <text class="uni-title uni-title-text">相对于原视频的分辨率比例，取值范围(0, 1]</text>
-        <slider :min="0.1" :max="1" :step="0.1" :show-value="true" @change="onResolutionChange"></slider>
+    <view>
+      <view class="uni-padding-wrap">
+        <video class="video" :src="beforeCompressPath" :controls="true"></video>
+        <view class="uni-title">
+          <text class="uni-subtitle-text">压缩前视频信息</text>
+        </view>
+        <text>{{beforeCompressVideoInfo}}</text>
+        <video class="video" :src="afterCompressPath" :controls="true"></video>
+        <view class="uni-title">
+          <text class="uni-subtitle-text">压缩后视频信息</text>
+        </view>
+        <text>{{afterCompressVideoInfo}}</text>
+        <view class="uni-btn-v">
+          <button type="primary" @click="chooseVideo">从相册中选取待压缩的视频</button>
+        </view>
+        <view class="uni-btn-v">
+          <button type="primary" @click="compressVideo">压缩视频</button>
+        </view>
+        <enum-data title="压缩质量" :items="qualityItemTypes" @change="onQualityChange"></enum-data>
+        <view class="uni-common-mt">
+          <text class="uni-title uni-title-text">相对于原视频的分辨率比例，取值范围(0, 1]</text>
+          <slider :min="0.1" :max="1" :step="0.1" :show-value="true" @change="onResolutionChange"></slider>
+        </view>
       </view>
     </view>
   <!-- #ifdef APP -->
@@ -116,7 +118,7 @@
         this.resolution = event.detail.value;
       },
       testCompressVideo() {
-        let beforeCompressSize: number, afterComoressSize: number;
+        let beforeCompressSize : number, afterComoressSize : number;
         uni.compressVideo({
           src: this.videoSrcForTest,
           quality: 'medium',
diff --git a/pages/API/get-current-pages/get-current-pages.uvue b/pages/API/get-current-pages/get-current-pages.uvue
index 34f2ab59..82fa34f7 100644
--- a/pages/API/get-current-pages/get-current-pages.uvue
+++ b/pages/API/get-current-pages/get-current-pages.uvue
@@ -2,40 +2,44 @@
   <!-- #ifdef APP -->
   <scroll-view class="page-scroll-view">
   <!-- #endif -->
-    <page-head title="getCurrentPages"></page-head>
-    <view class="uni-padding-wrap">
-      <button @click="_getCurrentPages">getCurrentPages</button>
-      <view v-if="pages.length" style="padding: 15px 0px">
-        <text>当前页面栈中 {{ pages.length }} 个页面，列表如下：</text>
-        <template v-for="(page, index) in pages" :key="page.route">
-          <text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text>
-        </template>
+    <view>
+      <page-head title="getCurrentPages"></page-head>
+      <view class="uni-padding-wrap">
+        <button @click="_getCurrentPages">getCurrentPages</button>
+        <view v-if="pages.length" style="padding: 15px 0px">
+          <text>当前页面栈中 {{ pages.length }} 个页面，列表如下：</text>
+          <template v-for="(page, index) in pages" :key="page.route">
+            <text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text>
+          </template>
+        </view>
       </view>
-    </view>
 
-    <page-head title="currentPageStyle"></page-head>
-    <template v-for="(item, index) in PageStyleArray">
-      <view class="page-style-item" v-if="currentPageStyle[item.key]!=null" :key="index">
-        <view class="item-text">
-          <text class="item-text-key">{{item.key}}:</text>
-          <text class="item-text-value">{{currentPageStyle[item.key]}}</text>
-        </view>
-        <view class="set-value" v-if="item.type == 'boolean'">
-          <switch :checked="currentPageStyle.getBoolean(item.key)"
-            @change="switchChange(item.key, $event as UniSwitchChangeEvent)">
-          </switch>
-        </view>
-        <view class="set-value" v-else-if="item.type == 'number'">
-          <slider :value="currentPageStyle.getNumber(item.key)" :show-value="true"
-            @change="sliderChange(item.key, $event as UniSliderChangeEvent)" />
+      <page-head title="currentPageStyle"></page-head>
+      <template v-for="(item, index) in PageStyleArray">
+        <view class="page-style-item" v-if="currentPageStyle[item.key]!=null" :key="index">
+          <view class="item-text">
+            <text class="item-text-key">{{item.key}}:</text>
+            <text class="item-text-value">{{currentPageStyle[item.key]}}</text>
+          </view>
+          <view class="set-value" v-if="item.type == 'boolean'">
+            <switch :checked="currentPageStyle.getBoolean(item.key)"
+              @change="switchChange(item.key, $event as UniSwitchChangeEvent)">
+            </switch>
+          </view>
+          <view class="set-value" v-else-if="item.type == 'number'">
+            <slider :value="currentPageStyle.getNumber(item.key)" :show-value="true"
+              @change="sliderChange(item.key, $event as UniSliderChangeEvent)" />
+          </view>
+          <view class="set-value" v-else-if="item.type == 'string'">
+            <radio-group class="radio-set-value" @change="radioChange(item.key, $event as RadioGroupChangeEvent)">
+              <radio class="radio-value" v-for="(item2, index2) in item.value" :key="index2" :value="item2">{{item2}}
+              </radio>
+            </radio-group>
+          </view>
         </view>
-        <view class="set-value" v-else-if="item.type == 'string'">
-          <radio-group class="radio-set-value" @change="radioChange(item.key, $event as RadioGroupChangeEvent)">
-            <radio class="radio-value" v-for="(item2, index2) in item.value" :key="index2" :value="item2" >{{item2}}</radio>
-          </radio-group>
-        </view>
-      </view>
-    </template>
+      </template>
+      <button style='margin: 10px;' @click="goSetDisablePullDownRefresh">go set disable pullDownRefresh</button>
+    </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
@@ -117,6 +121,11 @@
         const currentPage = pages[pages.length - 1];
         currentPage.$setPageStyle(style);
       },
+      goSetDisablePullDownRefresh() {
+        uni.navigateTo({
+          url: '/pages/API/get-current-pages/set-page-style-disable-pull-down-refresh'
+        });
+      }
       // getCurrentPage(): Page {
       //   const pages = getCurrentPages();
       //   const currentPage = pages[pages.length - 1];
@@ -163,7 +172,7 @@
     flex-direction: row;
   }
 
-  .radio-value {
-    margin-left: 10px;
+  .radio-value {
+    margin-left: 10px;
   }
-</style>
+</style>
diff --git a/pages/API/get-current-pages/set-page-style-disable-pull-down-refresh.uvue b/pages/API/get-current-pages/set-page-style-disable-pull-down-refresh.uvue
index f9853ea7..f190e74e 100644
--- a/pages/API/get-current-pages/set-page-style-disable-pull-down-refresh.uvue
+++ b/pages/API/get-current-pages/set-page-style-disable-pull-down-refresh.uvue
@@ -3,12 +3,12 @@
   <view class="uni-padding-wrap">
     <button class="btn btn-get-page-style" type="default" @click="getPageStyle">getPageStyle</button>
     <button class="btn btn-set-page-style-1" type="default" @click="setPageStyle(true)">setPageStyle(true)</button>
-    <button class="btn btn-set-page-style-0" type="default" @click="setPageStyle(false)">setPageStyle(false)</button>
+    <button class="btn btn-set-page-style-0" type="default" @click="setPageStyle(false)">setPageStyle(false)</button>
     <text class="page-style">当前 PageStyle</text>
-    <text class="page-style-value">{{pageStyleText}}</text>
-    <text class="status">状态：</text>
-    <view class="status-list">
-      <text>enablePullDownRefresh: {{enablePullDownRefreshStatus}}</text>
+    <text class="page-style-value">{{pageStyleText}}</text>
+    <text class="status">状态：</text>
+    <view class="status-list">
+      <text>enablePullDownRefresh: {{enablePullDownRefreshStatus}}</text>
     </view>
     <text class="tips">当前版本仅支持设置属性 enablePullDownRefresh</text>
   </view>
@@ -25,8 +25,8 @@
       return {
         checked: false,
         pages: [] as Page[],
-        currentPageStyle: {} as UTSJSONObject,
-        // TODO
+        currentPageStyle: {} as UTSJSONObject,
+        // TODO
         enablePullDownRefreshStatus: true
       }
     },
@@ -52,11 +52,11 @@
         const currentPage = pages[pages.length - 1];
         currentPage.$setPageStyle({
           enablePullDownRefresh: enable
-        });
+        });
         this.enablePullDownRefreshStatus = enable
-      },
-      startPullDownRefresh() {
-        uni.startPullDownRefresh()
+      },
+      startPullDownRefresh() {
+        uni.startPullDownRefresh()
       }
     },
   }
@@ -66,28 +66,28 @@
 <style>
   .btn {
     margin-top: 10px;
-  }
-
-  .page-style {
-    margin-top: 15px;
+  }
+
+  .page-style {
+    margin-top: 15px;
   }
 
   .page-style-value {
     margin-top: 5px;
     padding: 5px;
-    background-color: #fff;
-    width: 100%;
-    /* #ifdef WEB */
-    overflow-wrap: break-word;
+    background-color: #fff;
+    width: 100%;
+    /* #ifdef WEB */
+    overflow-wrap: break-word;
     /* #endif */
-  }
-
-  .status {
-    margin-top: 20px;
-  }
-
-  .status-list {
-    margin-top: 5px;
+  }
+
+  .status {
+    margin-top: 20px;
+  }
+
+  .status-list {
+    margin-top: 5px;
   }
 
   .tips {
diff --git a/pages/CSS/overflow/overflow-visible-event.uvue b/pages/CSS/overflow/overflow-visible-event.uvue
index 5ae85d83..14d4d1d9 100644
--- a/pages/CSS/overflow/overflow-visible-event.uvue
+++ b/pages/CSS/overflow/overflow-visible-event.uvue
@@ -1,5 +1,7 @@
 <template>
+  <!-- #ifdef APP -->
   <scroll-view style="flex: 1;">
+  <!-- #endif -->
     <view>
       <text style="font-size: 15px;">overflow=visible 父view（绿色），子view（红色），点击超出父view区域的部分也可触发事件。</text>
       <view class="backgroundview">
@@ -29,7 +31,9 @@
         </view>
       </view>
     </view>
+  <!-- #ifdef APP -->
   </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script>
@@ -131,7 +135,7 @@
     background-color: green;
   }
 
-  .hover-class {
-    background-color: aqua;
+  .hover-class {
+    background-color: aqua;
   }
 </style>
diff --git a/pages/CSS/transform/rotate.uvue b/pages/CSS/transform/rotate.uvue
index c2fe9333..3492b45f 100644
--- a/pages/CSS/transform/rotate.uvue
+++ b/pages/CSS/transform/rotate.uvue
@@ -1,84 +1,98 @@
-<template>
-<scroll-view class="page">
-
-	<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>
-
-	<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>
-
-</scroll-view>
-</template>
-
-<script lang="uts">
-export default {
-	data() {
-		return {
-		}
-	},
-	methods: {
-	},
-}
-</script>
-
-<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);
-}
+<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>
+
+      <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>
+
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="uts">
+  export default {
+    data() {
+      return {
+      }
+    },
+    methods: {
+    },
+  }
+</script>
+
+<style>
+  .page {
+    flex: 1;
+  }
+
+  .rotate-container {
+    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);
+  }
 </style>
diff --git a/pages/CSS/transform/scale.uvue b/pages/CSS/transform/scale.uvue
index 0ed5e5ca..da8fad84 100644
--- a/pages/CSS/transform/scale.uvue
+++ b/pages/CSS/transform/scale.uvue
@@ -1,77 +1,86 @@
-<template>
-  <scroll-view class="page">
-    <view class="trace">
-      <view class="base reserve">
-        <text class="reserve-text">scaleX(0.6)</text>
-        <text class="reserve-text">转变前位置</text>
-      </view>
-      <view class="base reserve">
-        <text class="reserve-text">scaleY(0.8)</text>
-        <text class="reserve-text">转变前位置</text>
-      </view>
-      <view class="base reserve">
-        <text class="reserve-text">scale(0.8,0.8)</text>
-        <text class="reserve-text">转变前位置</text>
-      </view>
-    </view>
-
-    <view class="base transform" style="transform: scaleX(0.6)">
-      <text>scaleX(0.6)</text>
-      <text>转变后位置</text>
-    </view>
-    <view class="base transform" style="transform: scaleY(0.6)">
-      <text>scaleY(0.6)</text>
-      <text>转变后位置</text>
-    </view>
-    <view class="base transform" style="transform: scale(1.2,1.2)">
-      <text>scale(1.2,1.2)</text>
-      <text>转变后位置</text>
-    </view>
-
-    <view class="base">
-      <text>通过scaleY(0.5)实现0.5px的线</text>
-      <view style="width: 150px; height: 1px; background-color: #000; transform: scaleY(0.5)"></view>
-    </view>
-
-  </scroll-view>
-</template>
-
-<script lang="uts">
-</script>
-
-<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);
-  }
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view class="page">
+  <!-- #endif -->
+    <view class="scale-container">
+      <view class="trace">
+        <view class="base reserve">
+          <text class="reserve-text">scaleX(0.6)</text>
+          <text class="reserve-text">转变前位置</text>
+        </view>
+        <view class="base reserve">
+          <text class="reserve-text">scaleY(0.8)</text>
+          <text class="reserve-text">转变前位置</text>
+        </view>
+        <view class="base reserve">
+          <text class="reserve-text">scale(0.8,0.8)</text>
+          <text class="reserve-text">转变前位置</text>
+        </view>
+      </view>
+
+      <view class="base transform" style="transform: scaleX(0.6)">
+        <text>scaleX(0.6)</text>
+        <text>转变后位置</text>
+      </view>
+      <view class="base transform" style="transform: scaleY(0.6)">
+        <text>scaleY(0.6)</text>
+        <text>转变后位置</text>
+      </view>
+      <view class="base transform" style="transform: scale(1.2,1.2)">
+        <text>scale(1.2,1.2)</text>
+        <text>转变后位置</text>
+      </view>
+
+      <view class="base">
+        <text>通过scaleY(0.5)实现0.5px的线</text>
+        <view style="width: 150px; height: 1px; background-color: #000; transform: scaleY(0.5)"></view>
+      </view>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="uts">
+</script>
+
+<style>
+  .page {
+    flex: 1;
+  }
+
+  .scale-container {
+    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);
+  }
 </style>
diff --git a/pages/CSS/transform/translate.uvue b/pages/CSS/transform/translate.uvue
index c9031cd1..5c1cd932 100644
--- a/pages/CSS/transform/translate.uvue
+++ b/pages/CSS/transform/translate.uvue
@@ -1,74 +1,89 @@
 <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>
+  <!-- #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>
-</scroll-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>
 
 <script lang="uts">
-export default {
-	data() {
-		return {
-		}
-	},
-	methods: {
-	},
-}
+  export default {
+    data() {
+      return {
+      }
+    },
+    methods: {
+    },
+  }
 </script>
 
 <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);
-}
+  .page {
+    flex: 1;
+  }
+
+  .translate-container{
+    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);
+  }
 </style>
diff --git a/pages/pages.test.js b/pages/pages.test.js
index 4cab72cd..a87f7c0c 100755
--- a/pages/pages.test.js
+++ b/pages/pages.test.js
@@ -80,7 +80,8 @@ const pages = [
   // '/pages/component/unicloud-db/unicloud-db/contacts/edit',
   // 动态内容
   // '/pages/component/unicloud-db/unicloud-db/contacts/detail',
-  '/pages/component/unicloud-db/unicloud-db/mixin-datacom/mixin-datacom',
+  // 动态内容
+  // '/pages/component/unicloud-db/unicloud-db/mixin-datacom/mixin-datacom',
   // 单独测试例截图
   // '/pages/component/global-properties/global-properties',
   '/pages/component/global-events/global-events',
-- 
GitLab