element-draw: 提取重复 style 为 class

pages/API/element-draw/element-draw.uvue

 <template>
   <!-- #ifdef APP -->
-  <scroll-view style="flex: 1">
+  <scroll-view class="page-scroll-view">
   <!-- #endif -->
     <view>
-      <view id="draw-text-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view id="draw-line-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view id="draw-circle-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view id="draw-dash-line" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view id="draw-house" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view id="draw-style" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view id="draw-odd" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view id="draw-arcto" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view class="drawing" id="draw-text-view"></view>
+      <view class="drawing" id="draw-line-view"></view>
+      <view class="drawing" id="draw-circle-view"></view>
+      <view class="drawing" id="draw-dash-line"></view>
+      <view class="drawing" id="draw-house"></view>
+      <view class="drawing" id="draw-style"></view>
+      <view class="drawing" id="draw-odd"></view>
+      <view class="drawing" id="draw-arcto"></view>
     </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 
-<script lang="uts">
+<script>
   var y = 160
   export default {
     data() {
@@ -308,5 +308,9 @@
 </script>
 
 <style>
-
+  .drawing {
+    height: 275px;
+    background-color: lightgray;
+    margin-bottom: 15px;
+  }
 </style>