[fix]cloud 手机端bug

openwharf-group · Jan 5, 2024 · 885b64e · 885b64e
1 parent d8b8e16
commit 885b64e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/src/components/cloud/CompaniesFeedback.astro b/src/components/cloud/CompaniesFeedback.astro
@@ -77,12 +77,12 @@ const t = useTranslations(Astro);
 ---
 
 <companies-feedback class="companies-feedback flex flex-col justify-center items-center bg-gary-02 py-10">
-  <div class="top-title w-[85.125rem] flex flex-col items-center mb-20 mt-16">
+  <div class="top-title flex flex-col items-center mb-20 mt-16">
     <span class="text-gray-10 text-xs mb-6">{t('cloud.feedback.about')}</span>
     <div class="title text-gray-14 text-4xl font-medium text-center whitespace-normal max-w-[60%]">{t('cloud.feedback.title')}</div>
   </div>
 
-  <div class="bottom-feedback w-[85.125rem] relative flex overflow-hidden rounded-2xl">
+  <div class="bottom-feedback relative flex overflow-hidden rounded-2xl">
     <ul class="slider p-0 list-none inline-block uppercase cursor-pointer flex flex-nowrap">
       {
         companyCustomers.map((company) => {
@@ -168,6 +168,9 @@ customElements.define("companies-feedback", CompaniesFeedback);
 companies-feedback {
   --time: 100s
 }
+.top-title, .bottom-feedback {
+  width: 85.125rem;
+}
 .companies-feedback {
   /* 最后一个元素 距离底部footer 52px */
   padding-bottom: 3.25rem;
@@ -224,6 +227,7 @@ a {
     padding: 1.5rem;
   }
   .top-title {
+    width: 100%;
     margin-top: 2.5rem;
     margin-bottom: 2.5rem;
   }
@@ -233,6 +237,7 @@ a {
     line-height: 1.75rem; /* 28px */
   }
   .bottom-feedback {
+    width: 100%;
     display: none;
   }
   .mobile-bottom-feedback {
@@ -253,12 +258,8 @@ a {
   .companies-feedback {
     padding: 2.5rem;
   }
-  .top-title {
-    width: 100%;
-  }
-  .bottom-feedback {
+  .top-title, .bottom-feedback {
     width: 100%;
   }
-
 }
 </style>
diff --git a/src/components/common/BaseContainer.astro b/src/components/common/BaseContainer.astro
@@ -6,6 +6,26 @@ interface Props {
 const { class:className } = Astro.props;
 ---
 
-<div class={'w-[85.125rem] flex ' + className}>
+<div class={'base-layout flex ' + className}>
     <slot/>
-</div>
+</div>
+
+<style>
+  .base-layout {
+    width: 85.125rem;
+  }
+
+  /* 小于50rem  小于 800px */
+  @media (max-width: 50rem) {
+    .base-layout {
+      width: 100%;
+    }
+  }
+
+  /* 大于50rem 小于 72rem  800px < width < 1440 */
+  @media (min-width: 50rem) and (max-width: 86rem) {
+    .base-layout {
+      width: 100%;
+    }
+  }
+</style>