1405/04/09-fix bug iphone show

src/views/base/rules/components/RulesContentPanel.vue

@@ -1,31 +1,35 @@
 <template>
   <div
-    :class="variant === 'desktop' ? 'drules-content' : 'rules-panel mt-5 border-solid border-2 border-primary text-primary rounded-[12px] p-4'"
+    :class="variant === 'desktop'
+      ? 'drules-content'
+      : 'rules-panel border-solid border-2 border-primary text-primary rounded-[12px] p-4 mobile-content-box'"
   >
-    <div :class="variant === 'desktop' ? 'drules-content__title' : 'font-bold text-sm text-primary'">
-      {{ rulesTitle }}
-    </div>
-    <div
-      :class="variant === 'desktop' ? 'drules-content__divider' : 'w-full h-1px my-3 bg-secondary'"
-    ></div>
-    <div
-      v-for="(block, blockIndex) in rulesBlocks"
-      :key="`block-${blockIndex}`"
-      :class="variant === 'desktop' ? 'drules-content__block' : 'rules-block'"
-    >
-      <div
-        v-if="block.title"
-        :class="variant === 'desktop' ? 'drules-content__block-title' : 'font-bold text-sm text-primary mt-4 mb-2'"
-      >
-        {{ block.title }}
+    <div :class="variant !== 'desktop' ? 'mobile-content-box__scroll' : undefined">
+      <div :class="variant === 'desktop' ? 'drules-content__title' : 'font-bold text-sm text-primary'">
+        {{ rulesTitle }}
       </div>
-      <p
-        v-for="(rule, index) in block.items"
-        :key="`rule-${blockIndex}-${index}`"
-        :class="variant === 'desktop' ? 'drules-content__paragraph' : 'rules-paragraph'"
+      <div
+        :class="variant === 'desktop' ? 'drules-content__divider' : 'w-full h-1px my-3 bg-secondary'"
+      ></div>
+      <div
+        v-for="(block, blockIndex) in rulesBlocks"
+        :key="`block-${blockIndex}`"
+        :class="variant === 'desktop' ? 'drules-content__block' : 'rules-block'"
       >
-        {{ rule }}
-      </p>
+        <div
+          v-if="block.title"
+          :class="variant === 'desktop' ? 'drules-content__block-title' : 'font-bold text-sm text-primary mt-4 mb-2'"
+        >
+          {{ block.title }}
+        </div>
+        <p
+          v-for="(rule, index) in block.items"
+          :key="`rule-${blockIndex}-${index}`"
+          :class="variant === 'desktop' ? 'drules-content__paragraph' : 'rules-paragraph'"
+        >
+          {{ rule }}
+        </p>
+      </div>
     </div>
   </div>
 </template>

src/views/base/rules/components/RulesSupportActions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="variant === 'desktop' ? 'drules-support' : 'wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white'">
+  <div :class="variant === 'desktop' ? 'drules-support' : 'wrap-fix mobile-info-page__support flex gap-2'">
     <a
       class="w-full"
       :href="supportHref"

src/views/base/rules/index.vue

@@ -20,5 +20,14 @@ useRulesPage()
 .rules-page-root {
   min-height: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+</style>
+
+<style lang="less">
+.rules-page-root.main-with-bottom-chrome-inner {
+  overflow: hidden;
 }
 </style>

src/views/base/rules/mobile/MobileRulesView.vue

@@ -1,31 +1,19 @@
 <template>
-  <div>
-    <div class="wrap-fix z-1 bg-white py-3 px-3 text-primary font-bold drop-shadow flex">
-      <div class="cursor-pointer" @click="router.back()">
-        <BasicIcon icon="vuesax-linear:arrow-right-1" />
-      </div>
-      <div class="mr-2">قوانین و مقررات</div>
+  <div class="mobile-info-page">
+    <div class="mobile-info-page__bg" aria-hidden="true">
+      <img :src="img" alt="" />
     </div>
-    <div class="pt-20">
-      <div>
-        <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
-      </div>
-      <div class="text-base z-200000 relative">
-        <div class="px-10">
-          <div class="overflow-y-auto h-60vh pb-20 border-primary">
-            <RulesContentPanel variant="mobile" />
-          </div>
-        </div>
-        <RulesSupportActions variant="mobile" />
-      </div>
+    <MobilePageHeader title="قوانین و مقررات" show-back />
+    <div class="mobile-info-page__main">
+      <RulesContentPanel variant="mobile" />
     </div>
+    <RulesSupportActions variant="mobile" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import img from '@/assets/img/user_ly1.svg'
-import router from '@/router'
+import MobilePageHeader from '@/layouts/components/MobilePageHeader.vue'
 import RulesContentPanel from '../components/RulesContentPanel.vue'
 import RulesSupportActions from '../components/RulesSupportActions.vue'
 </script>