text: rpx to px

pages/component/text/text.uvue

@@ -9,12 +9,7 @@
         <button class="uni-btn" type="primary" :disabled="!canAdd" @click="add">
           add line
         </button>
-        <button
-          class="uni-btn"
-          type="warn"
-          :disabled="!canRemove"
-          @click="remove"
-        >
+        <button class="uni-btn" type="warn" :disabled="!canRemove" @click="remove">
           remove line
         </button>
         <button class="uni-btn" type="primary" @click="textProps">
@@ -23,72 +18,73 @@
       </view>
     </view>
   </view>
-</template>
-<script lang="uts">
-export default {
+</template>
+
+<script>
+  export default {
     data() {
-        return {
-            title: 'text',
-            texts: [
-                'HBuilderX，轻巧、极速，极客编辑器',
-                'uni-app x，终极跨平台方案',
-                'uniCloud，js serverless云服务',
-                'uts，大一统语言',
-                'uniMPSdk，让你的App具备小程序能力',
-                'uni-admin，开源、现成的全端管理后台',
-                'uni-id，开源、全端的账户中心',
-                'uni-pay，开源、云端一体、全平台的支付',
-                'uni-ai，聚合ai能力',
-                'uni-cms，开源、云端一体、全平台的内容管理平台',
-                'uni-im，开源、云端一体、全平台的im即时消息',
-                'uni统计，开源、完善、全平台的统计报表',
-                '......'
-            ] as string[],
-            text: '',
-            canAdd: true,
-            canRemove: false,
-            extraLine: [] as string[]
-        }
+      return {
+        title: 'text',
+        texts: [
+          'HBuilderX，轻巧、极速，极客编辑器',
+          'uni-app x，终极跨平台方案',
+          'uniCloud，js serverless云服务',
+          'uts，大一统语言',
+          'uniMPSdk，让你的App具备小程序能力',
+          'uni-admin，开源、现成的全端管理后台',
+          'uni-id，开源、全端的账户中心',
+          'uni-pay，开源、云端一体、全平台的支付',
+          'uni-ai，聚合ai能力',
+          'uni-cms，开源、云端一体、全平台的内容管理平台',
+          'uni-im，开源、云端一体、全平台的im即时消息',
+          'uni统计，开源、完善、全平台的统计报表',
+          '......'
+        ] as string[],
+        text: '',
+        canAdd: true,
+        canRemove: false,
+        extraLine: [] as string[]
+      }
     },
     methods: {
-        add: function () {
-            this.extraLine.push(this.texts[this.extraLine.length % 12]);
-            this.text = this.extraLine.join('\n');
-            this.canAdd = this.extraLine.length < 12;
-            this.canRemove = this.extraLine.length > 0;
-        },
-        remove: function () {
-            if (this.extraLine.length > 0) {
-                this.extraLine.pop();
-                this.text = this.extraLine.join('\n');
-                this.canAdd = this.extraLine.length < 12;
-                this.canRemove = this.extraLine.length > 0;
-            }
-        },
-  textProps: function () {
-      uni.navigateTo({
-        url: '/pages/component/text/text-props'
-      })
-  }
+      add: function () {
+        this.extraLine.push(this.texts[this.extraLine.length % 12]);
+        this.text = this.extraLine.join('\n');
+        this.canAdd = this.extraLine.length < 12;
+        this.canRemove = this.extraLine.length > 0;
+      },
+      remove: function () {
+        if (this.extraLine.length > 0) {
+          this.extraLine.pop();
+          this.text = this.extraLine.join('\n');
+          this.canAdd = this.extraLine.length < 12;
+          this.canRemove = this.extraLine.length > 0;
+        }
+      },
+      textProps: function () {
+        uni.navigateTo({
+          url: '/pages/component/text/text-props'
+        })
+      }
     }
-}
+  }
 </script>
 
 <style>
-.text-box {
-  margin-bottom: 40rpx;
-  padding: 40rpx 0;
-  display: flex;
-  min-height: 300rpx;
-  background-color: #ffffff;
-  justify-content: center;
-  align-items: center;
-}
+  .text-box {
+    margin-bottom: 20px;
+    padding: 20px 0;
+    display: flex;
+    min-height: 150px;
+    background-color: #ffffff;
+    justify-content: center;
+    align-items: center;
+  }
 
-.text {
-  font-size: 30rpx;
-  color: #353535;
-  line-height: 54rpx;
-  text-align: center;
-}
-</style>
+  .text {
+    font-size: 15px;
+    color: #353535;
+    line-height: 27px;
+    text-align: center;
+  }
+</style>