feat(lifecycle): 优化生命周期示例

components/CompositionAPILifecycle.uvue

 <template>
   title: {{ title }}
+  <view class="uni-common-mt item-container">
+    <text>onLoad 触发：</text>
+    <text>{{ isOnloadTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onPageShow 触发：</text>
+    <text>{{ isOnShowTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onReady 触发：</text>
+    <text>{{ isOnReadyTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onBeforeMount 触发：</text>
+    <text>{{ isOnBeforeMountTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onMounted 触发：</text>
+    <text>{{ isOnMountedTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onBeforeUpdate 触发：</text>
+    <text>{{ isOnBeforeUpdateTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onUpdated 触发：</text>
+    <text>{{ isOnUpdatedTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onBeforeUnmount 触发：</text>
+    <text>{{ isOnBeforeUnmountTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onUnmounted 触发：</text>
+    <text>{{ isOnUnmountedTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onPullDownRefresh 触发：</text>
+    <text>{{ isOnPullDownRefreshTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onReachBottom 触发：</text>
+    <text>{{ isOnReachBottomTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onBackPress 触发：</text>
+    <text>{{ isOnBackPressTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onPageHide 触发：</text>
+    <text>{{ isOnHideTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>onResize 触发：</text>
+    <text>{{ isOnResizeTriggered }}</text>
+  </view>
   <button class="component-lifecycle-btn uni-common-mt" @click="updateTitle">
     updateTitle
   </button>
 </template>
 
-<script setup>
-  import { state, setLifeCycleNum } from '../store/index.uts'
-
-  const title = ref('component for composition API lifecycle test')
-  
-  const emit = defineEmits<{
-    (e : 'updateIsScroll', val : boolean) : void
-  }>()
-
-  onLoad((_ : OnLoadOptions) => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 100)
-  })
-  onPageShow(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 10)
-  })
-  onReady(() => {
-    // 自动化测试
-    // TODO: onReady 未触发
-    setLifeCycleNum(state.lifeCycleNum + 10)
-  })
-  
-  onPullDownRefresh(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 10)
-  })
-  onPageScroll((_) => {
-    // 自动化测试
-    emit('updateIsScroll', true)
-  })
-  onReachBottom(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 10)
-  })
-  onBackPress((_ : OnBackPressOptions) : boolean | null => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum - 10)
-    return null
-  })
-  onPageHide(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum - 10)
-  })
-  onUnload(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum - 100)
-  })
-
-  onBeforeMount(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 1)
-    console.log('component for lifecycle test mounted')
-  })
-
-  onMounted(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 1)
-    console.log('component for lifecycle test mounted')
-  })
-
-  onBeforeUpdate(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 1)
-    console.log('component for lifecycle test beforeUpdate')
-  })
-
-  onUpdated(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 1)
-    console.log('component for lifecycle test updated')
-  })
-
-  onBeforeUnmount(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum - 1)
-    console.log('component for lifecycle test beforeUnmount')
-  })
-
-  onUnmounted(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum - 1)
-    console.log('component for lifecycle test unmounted')
-  })
-
-  // TODO: app-android 不触发
-  onActivated(() => { })
-  // TODO: app-android 不触发
-  onDeactivated(() => { })
-
-  const updateTitle = () => {
-    title.value = 'component for lifecycle test updated'
-  }
-</script>
+<script setup lang="uts">
+import { state, setLifeCycleNum } from '../store/index.uts'
+
+const title = ref('component for composition API lifecycle test')
+
+const isOnloadTriggered = ref(false)
+const isOnShowTriggered = ref(false)
+const isOnReadyTriggered = ref(false)
+const isOnPullDownRefreshTriggered = ref(false)
+const isOnPageScrollTriggered = ref(false)
+const isOnReachBottomTriggered = ref(false)
+const isOnBackPressTriggered = ref(false)
+const isOnHideTriggered = ref(false)
+const isOnResizeTriggered = ref(false)
+
+const isOnBeforeMountTriggered = ref(false)
+const isOnMountedTriggered = ref(false)
+const isOnBeforeUpdateTriggered = ref(false)
+const isOnUpdatedTriggered = ref(false)
+const isOnBeforeUnmountTriggered = ref(false)
+const isOnUnmountedTriggered = ref(false)
+
+const emit = defineEmits<{
+  (e : 'updateIsScroll', val : boolean) : void
+}>()
+
+onLoad((_ : OnLoadOptions) => {
+  isOnloadTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 100)
+})
+onPageShow(() => {
+  isOnShowTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 10)
+})
+onReady(() => {
+  isOnReadyTriggered.value = true
+  // 自动化测试
+  // TODO: onReady 未触发
+  setLifeCycleNum(state.lifeCycleNum + 10)
+})
+
+onPullDownRefresh(() => {
+  isOnPullDownRefreshTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 10)
+})
+onPageScroll((_) => {
+  isOnPageScrollTriggered.value = true
+  // 自动化测试
+  emit('updateIsScroll', true)
+})
+onReachBottom(() => {
+  isOnReachBottomTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 10)
+})
+onBackPress((_ : OnBackPressOptions) : boolean | null => {
+  isOnBackPressTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum - 10)
+  return null
+})
+onPageHide(() => {
+  isOnHideTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum - 10)
+})
+onUnload(() => {
+  isOnHideTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum - 100)
+})
+
+onBeforeMount(() => {
+  isOnBeforeMountTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 1)
+  console.log('component for lifecycle test mounted')
+})
+
+onMounted(() => {
+  isOnMountedTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 1)
+  console.log('component for lifecycle test mounted')
+})
+
+onBeforeUpdate(() => {
+  isOnBeforeUpdateTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 1)
+  console.log('component for lifecycle test beforeUpdate')
\ No newline at end of file
+})
+
+onUpdated(() => {
+  isOnUpdatedTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 1)
+  console.log('component for lifecycle test updated')
+})
+
+onBeforeUnmount(() => {
+  isOnBeforeUnmountTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum - 1)
+  console.log('component for lifecycle test beforeUnmount')
+})
+
+onUnmounted(() => {
+  isOnUnmountedTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum - 1)
+  console.log('component for lifecycle test unmounted')
+})
+
+// TODO: app-android 不触发
+onActivated(() => { })
+// TODO: app-android 不触发
+onDeactivated(() => { })
+
+const updateTitle = () => {
+  title.value = 'component for lifecycle test updated'
+}
+</script>
+
+<style>
+.item-container {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+</style>

components/OptionsAPILifecycle.uvue

 <template>
   title: {{ title }}
+  <view class="uni-common-mt item-container">
+    <text>beforeCreate 触发：</text>
+    <text>{{ isBeforeCreateTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>created 触发：</text>
+    <text>{{ isCreatedTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>beforeMount 触发：</text>
+    <text>{{ isBeforeMountTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>mounted 触发：</text>
+    <text>{{ isMountedTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>beforeUpdate 触发：</text>
+    <text>{{ isBeforeUpdateTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>updated 触发：</text>
+    <text>{{ isUpdatedTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>beforeUnmount 触发：</text>
+    <text>{{ isBeforeUnmountTriggered }}</text>
+  </view>
+  <view class="item-container">
+    <text>unmounted 触发：</text>
+    <text>{{ isUnmountedTriggered }}</text>
+  </view>
   <button class="component-lifecycle-btn uni-common-mt" @click="updateTitle">
     updateTitle
   </button>
 </template>
 
-<script>
-  import { state, setLifeCycleNum } from '../store/index.uts';
-  export default {
-    name: 'OptionsAPIComponentLifecycle',
-    data() {
-      return {
-        title: 'component for options API lifecycle test',
-      };
+<script lang="uts">
+import { state, setLifeCycleNum } from '../store/index.uts';
+export default {
+  name: 'OptionsAPIComponentLifecycle',
+  data() {
+    return {
+      title: 'component for options API lifecycle test',
+      isBeforeCreateTriggered: false,
+      isCreatedTriggered: false,
+      isBeforeMountTriggered: false,
+      isMountedTriggered: false,
+      isBeforeUpdateTriggered: false,
+      isUpdatedTriggered: false,
+      isBeforeUnmountTriggered: false,
+      isUnmountedTriggered: false,
+    };
+  },
+  beforeCreate() {
+    setTimeout(() => {
+      this.isBeforeCreateTriggered = true
+    }, 0);
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum + 1);
+    console.log('component for lifecycle test beforeCreate');
+  },
+  created() {
+    this.isCreatedTriggered = true
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum + 1);
+    console.log('component for lifecycle test created');
+  },
+  beforeMount() {
+    this.isBeforeMountTriggered = true
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum + 1);
+    console.log('component for lifecycle test beforeMount');
+  },
+  mounted() {
+    this.isMountedTriggered = true
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum + 1);
+    console.log('component for lifecycle test mounted');
+  },
+  beforeUpdate() {
+    this.isBeforeUpdateTriggered = true
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum + 1);
+    console.log('component for lifecycle test beforeUpdate');
+  },
+  updated() {
+    this.isUpdatedTriggered = true
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum + 1);
+    console.log('component for lifecycle test updated');
+  },
+  beforeUnmount() {
+    this.isBeforeUnmountTriggered = true
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum - 1);
+    console.log('component for lifecycle test beforeUnmount');
+  },
+  unmounted() {
+    this.isUnmountedTriggered = true
+    // 自动化测试
+    setLifeCycleNum(state.lifeCycleNum - 1);
+    console.log('component for lifecycle test unmounted');
+  },
+  methods: {
+    updateTitle() {
+      this.title = 'component for lifecycle test updated';
     },
-    beforeCreate() {
-      // 自动化测试
-      setLifeCycleNum(state.lifeCycleNum + 1);
-      console.log('component for lifecycle test beforeCreate');
-    },
-    created() {
-      // 自动化测试
-      setLifeCycleNum(state.lifeCycleNum + 1);
-      console.log('component for lifecycle test created');
-    },
-    beforeMount() {
-      // 自动化测试
-      setLifeCycleNum(state.lifeCycleNum + 1);
-      console.log('component for lifecycle test beforeMount');
-    },
-    mounted() {
-      // 自动化测试
-      setLifeCycleNum(state.lifeCycleNum + 1);
-      console.log('component for lifecycle test mounted');
-    },
-    beforeUpdate() {
-      // 自动化测试
-      setLifeCycleNum(state.lifeCycleNum + 1);
-      console.log('component for lifecycle test beforeUpdate');
-    },
-    updated() {
-      // 自动化测试
-      setLifeCycleNum(state.lifeCycleNum + 1);
-      console.log('component for lifecycle test updated');
-    },
-    beforeUnmount() {
-      // 自动化测试
-      setLifeCycleNum(state.lifeCycleNum - 1);
-      console.log('component for lifecycle test beforeUnmount');
-    },
-    unmounted() {
-      // 自动化测试
-      setLifeCycleNum(state.lifeCycleNum - 1);
-      console.log('component for lifecycle test unmounted');
-    },
-    methods: {
-      updateTitle() {
-        this.title = 'component for lifecycle test updated';
-      },
-    },
-  };
-</script>
+  },
+};
+</script>
+
+<style>
+.item-container {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+</style>
\ No newline at end of file

pages/composition-api/lifecycle/component-lifecycle/component-lifecycle.uvue

@@ -2,17 +2,17 @@
   <!-- #ifdef APP -->
   <scroll-view style="flex:1">
   <!-- #endif -->
-    <view class="pag container">
-      <text class="uni-common-mb">component lifecycle</text>
+    <view class="page container">
       <component-lifecycle class="component-lifecycle" @updateIsScroll="updateIsScroll" />
       <button class="uni-common-mt" @click="scrollToBottom">scrollToBottom</button>
+      <button class="uni-common-mt" @click="pullDownRefresh">trigger pullDownRefresh</button>
     </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 
-<script setup>
+<script setup lang='uts'>
   import ComponentLifecycle from '@/components/CompositionAPILifecycle.uvue'
   import { state, setLifeCycleNum } from '@/store/index.uts'
 

pages/composition-api/lifecycle/page-lifecycle/page-lifecycle.uvue

@@ -3,49 +3,100 @@
   <scroll-view style="flex:1" :bounces="false">
   <!-- #endif -->
     <view class="page container">
-      <text>page lifecycle</text>
+      <view class="item-container">
+        <text>onLoad 触发：</text>
+        <text>{{ isOnloadTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onShow 触发：</text>
+        <text>{{ isOnShowTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onReady 触发：</text>
+        <text>{{ isOnReadyTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onPullDownRefresh 触发：</text>
+        <text>{{ isOnPullDownRefreshTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onReachBottom 触发：</text>
+        <text>{{ isOnReachBottomTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onBackPress 触发：</text>
+        <text>{{ isOnBackPressTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onHide 触发：</text>
+        <text>{{ isOnHideTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onResize 触发：</text>
+        <text>{{ isOnResizeTriggered }}</text>
+      </view>
       <button class="uni-common-mt" @click="scrollToBottom">scrollToBottom</button>
+      <button class="uni-common-mt" @click="pullDownRefresh">
+        trigger pullDownRefresh
+      </button>
     </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 
-<script setup>
+<script setup lang='uts'>
   import { state, setLifeCycleNum } from '@/store/index.uts'
   
   const isScrolled = ref(false)
+  const isOnloadTriggered = ref(false)
+  const isOnShowTriggered = ref(false)
+  const isOnReadyTriggered = ref(false)
+  const isOnPullDownRefreshTriggered = ref(false)
+  const isOnPageScrollTriggered = ref(false)
+  const isOnReachBottomTriggered = ref(false)
+  const isOnBackPressTriggered = ref(false)
+  const isOnHideTriggered = ref(false)
+  const isOnResizeTriggered = ref(false)
   
   onLoad((_: OnLoadOptions) => {
+    isOnloadTriggered.value = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 100)
   })
   onPageShow(() => {
+    isOnShowTriggered.value = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 10)
   })
   onReady(() => {
+    isOnReadyTriggered.value = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 10)
   })
   onPullDownRefresh(() => {
+    isOnPullDownRefreshTriggered.value = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 10)
   })
   onPageScroll((_) => {
+    isOnPageScrollTriggered.value = true
     // 自动化测试
     isScrolled.value = true
   })
   onReachBottom(() => {
+    isOnReachBottomTriggered.value = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 10)
   })
   onBackPress((_: OnBackPressOptions): boolean | null => {
+    isOnBackPressTriggered.value = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum - 10)
     return null
   })
   onPageHide(() => {
+    isOnPageHideTriggered.value = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum - 10)
   })
@@ -54,6 +105,7 @@
     setLifeCycleNum(state.lifeCycleNum - 100)
   })
   onResize((_) => {
+    isOnResizeTriggered.value = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 10)
   })
@@ -102,4 +154,10 @@
   .container {
     height: 1200px;
   }
+  .item-container {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+  }
 </style>
\ No newline at end of file

pages/lifecycle/component/component.uvue

 <template>
   <view class="page">
-    <text class="uni-common-mb">component lifecycle</text>
     <component-lifecycle class="component-lifecycle" />
   </view>
 </template>
 
-<script>
+<script lang="uts">
 import ComponentLifecycle from '@/components/OptionsAPILifecycle.uvue'
 import { state } from '@/store/index.uts'
 export default {

pages/lifecycle/page/page.uvue

@@ -3,8 +3,44 @@
   <scroll-view style="flex: 1" :bounces="false">
     <!-- #endif -->
     <view class="page container">
-      <text>page lifecycle</text>
-      <button class="uni-common-mt" @click="scrollToBottom">scrollToBottom</button>
+      <view class="item-container">
+        <text>onLoad 触发：</text>
+        <text>{{ isOnloadTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onShow 触发：</text>
+        <text>{{ isOnShowTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onReady 触发：</text>
+        <text>{{ isOnReadyTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onPullDownRefresh 触发：</text>
+        <text>{{ isOnPullDownRefreshTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onReachBottom 触发：</text>
+        <text>{{ isOnReachBottomTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onBackPress 触发：</text>
+        <text>{{ isOnBackPressTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onHide 触发：</text>
+        <text>{{ isOnHideTriggered }}</text>
+      </view>
+      <view class="item-container">
+        <text>onResize 触发：</text>
+        <text>{{ isOnResizeTriggered }}</text>
+      </view>
+      <button class="uni-common-mt" @click="scrollToBottom">
+        scrollToBottom
+      </button>
+      <button class="uni-common-mt" @click="pullDownRefresh">
+        trigger pullDownRefresh
+      </button>
     </view>
     <!-- #ifdef APP -->
   </scroll-view>
@@ -18,38 +54,55 @@ export default {
   data() {
     return {
       isScrolled: false,
+      isOnloadTriggered: false,
+      isOnShowTriggered: false,
+      isOnReadyTriggered: false,
+      isOnPullDownRefreshTriggered: false,
+      isOnPageScrollTriggered: false,
+      isOnReachBottomTriggered: false,
+      isOnBackPressTriggered: false,
+      isOnHideTriggered: false,
+      isOnResizeTriggered: false,
     }
   },
   onLoad(_ : OnLoadOptions) {
+    this.isOnloadTriggered = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 100)
   },
   onShow() {
+    this.isOnShowTriggered = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 10)
   },
   onReady() {
+    this.isOnReadyTriggered = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 10)
   },
   onPullDownRefresh() {
+    this.isOnPullDownRefreshTriggered = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 10)
   },
   onPageScroll(_) {
+    this.isOnPageScrollTriggered = true
     // 自动化测试
     this.isScrolled = true
   },
   onReachBottom() {
+    this.isOnReachBottomTriggered = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 10)
   },
   onBackPress(_ : OnBackPressOptions) : boolean | null {
+    this.isOnBackPressTriggered = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum - 10)
     return null
   },
   onHide() {
+    this.isOnHideTriggered = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum - 10)
   },
@@ -58,6 +111,7 @@ export default {
     setLifeCycleNum(state.lifeCycleNum - 100)
   },
   onResize(_){
+    this.isOnResizeTriggered = true
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 10)
   },
@@ -94,4 +148,10 @@ export default {
 .container {
   height: 1200px;
 }
+.item-container {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
 </style>