fix: 修复在Safari中logo和签到样式问题

IdeaLeap · Feb 9, 2023 · 81c9dca · 81c9dca
1 parent 8f14f80
commit 81c9dca
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 35 deletions.
diff --git a/frontend/components/Aside/Sign.vue b/frontend/components/Aside/Sign.vue
@@ -5,35 +5,28 @@ if (process.server)
 const is_sign = ref(false)
 const sign = () => {
   is_sign.value = true
-  document.querySelector('.sign_btn')?.classList.add('sign_btn_signed')
-  document.querySelector('.sign_btn_signed')?.classList.remove('sign_btn')
+  document.querySelector('.sign_btn')?.classList.remove('unSigned')
 }
 </script>
 
 <template>
-  <div>
-    <div class="sign_container">
-      <div class="sign_container_container">
-        <div class="sign_text_container">
-          <span v-if="is_sign" class="sign_dayparts">
-            连续签到
-            <span>1天</span>
-          </span>
-          <span v-else class="sign_dayparts">{{ day_parts }}</span>
-          <div class="sign_txt">
-            点亮在社区的每一天
-          </div>
-        </div>
-        <div>
-          <button
-            class="sign_btn"
-            @click="sign()"
-          >
-            <span v-if="is_sign" class="sign_btn_txt_signed">已签到</span>
-            <span v-else class="sign_btn_txt">去签到</span>
-          </button>
+  <div class="sign_container">
+    <div class="sign_container_container">
+      <div class="sign_text_container">
+        <span v-if="is_sign" class="sign_dayparts">
+          连续签到
+          <span>1天</span>
+        </span>
+        <span v-else class="sign_dayparts">{{ day_parts }}</span>
+        <div class="sign_txt" style="font-size: 12px;">
+          <!-- fontSize写在class中在Safari上有明显抖动 -->
+          点亮在社区的每一天
         </div>
       </div>
+      <button class="sign_btn unSigned" @click="sign">
+        <span v-if="is_sign" class="sign_btn_txt_signed">已签到</span>
+        <span v-else class="sign_btn_txt">去签到</span>
+      </button>
     </div>
   </div>
 </template>
@@ -52,32 +45,34 @@ const sign = () => {
   @apply flex flex-col gap-1
 }
 
-.sign_dayparts{
+.sign_dayparts {
   @apply text-black font-bold text-2xl
   @apply dark:text-jj_font_white
 }
 
 .sign_txt {
-  @apply text-jj-font-entry-normal text-lg
+  @apply text-jj-font-entry-normal;
 }
 
 .sign_btn {
-  @apply bg-jj-button-sign-normal border-jj-border-sign-normal hover:bg-jj-border-hover-normal border-solid border-1 rounded-2 h-13 select-none
+  @apply bg-jj-button-sign-normal border-jj-border-sign-normal h-36px w-74px box-border
+  @apply flex items-center justify-center flex-row border-solid border-1 rounded-2  select-none
 }
-
-.sign_btn_txt {
-  @apply text-lg text-jj-button-text-normal px-5 py-1
+.unSigned{
+  @apply hover:bg-jj-border-hover-normal;
 }
 
-.sign_btn_txt_signed{
-  @apply text-lg text-jj-signed-normal px-5 py-1
+.sign_btn_txt {
+  @apply text-size-14px text-jj-button-text-normal;
+  white-space: nowrap;
 }
 
-.sign_btn_signed{
-  @apply bg-jj-signed-background-normal border-jj-signed-border-normal border-solid border-1 rounded-2 h-13
+.sign_btn_txt_signed {
+  @apply text-size-14px text-jj-signed-normal;
+  white-space: nowrap;
 }
 
 .sign_dayparts > span {
-  @apply text-jj-signed-dayparts-normal
+  @apply text-jj-signed-dayparts-normal;
 }
 </style>
diff --git a/frontend/components/Logo.vue b/frontend/components/Logo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="!flex h-[2rem]">
+  <div class="!flex h-[2rem] w-118px">
     <svg
       viewBox="0 0 36 28"
       xmlns="http://www.w3.org/2000/svg"