fix: 作者面板溢出问题

IdeaLeap · Feb 13, 2023 · 26b4b7e · 26b4b7e
1 parent 2e0d623
commit 26b4b7e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 13 deletions.
diff --git a/frontend/components/ArticlesList/Item/AuthorCard/index.vue b/frontend/components/ArticlesList/Item/AuthorCard/index.vue
@@ -8,15 +8,15 @@ defineProps<{
 </script>
 
 <template>
-  <div class="author_card">
+  <div class="author_card truncate">
     <div class="about">
       <ArticlesListUiImg :src="avatar" :alt="name" avatar />
-      <div class="info">
+      <div class="ml-[0.5rem]">
         <div class="name">
           <span>{{ name }}</span>
-          <img class="w-[3rem] ml-[1rem]" :src="`https://pan.marlene.top/d/share/jj/${rank}.png`" :alt="`lv${rank}`">
+          <img class="w-[3rem] ml-[0.75rem]" :src="`https://pan.marlene.top/d/share/jj/${rank}.png`" :alt="`lv${rank}`">
         </div>
-        <div class="text-[#8f969c] text-[0.1rem]">
+        <div class="text-[#8f969c] text-[12px]">
           {{ motto }}
         </div>
       </div>
@@ -28,17 +28,14 @@ defineProps<{
 <style scoped>
 .author_card {
   box-shadow: 0 8px 24px rgb(81 87 103 / 16%);
-  @apply bg-white absolute top-[-9rem] left-0 mlg:left-[-1.67rem]
+  @apply px-[1rem] bg-white absolute top-[-9rem] left-0 mlg:left-[-1.67rem]
   @apply dark:(bg-jj-article text-white)
 }
 .about {
-  @apply flex items-center m-[1rem] mb-0
-}
-.info {
-  @apply flex flex-col justify-center
+  @apply flex items-center my-[0.75rem] mb-0 min-w-[250px]
 }
 .name {
-  @apply flex-auto flex items-center pr-[1rem]
+  @apply flex items-center pr-[1rem]
 }
 .author_card::after {
   border: 10px solid transparent;

diff --git a/frontend/components/ArticlesList/Ui/Btns.vue b/frontend/components/ArticlesList/Ui/Btns.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="f-c-c">
+  <div class="flex justify-between">
     <div class="primary">
       关注
     </div>
@@ -12,7 +12,7 @@
 <style scoped>
 .primary {
   transition: background-color .1s linear .05s;
-  @apply px-[3.5rem] py-[0.4rem] m-[0.75rem] text-[1.167rem] text-white h-full bg-jj-brand-normal rounded-[2px]
+  @apply px-[3.5rem] py-[0.4rem] my-[0.75rem] text-[1.167rem] text-white h-full bg-jj-brand-normal rounded-[2px]
   @apply border border-solid border-jj-stroke-normal
   @apply hover:bg-jj-button-primary-normal
 }

diff --git a/frontend/components/ArticlesList/Ui/Img.vue b/frontend/components/ArticlesList/Ui/Img.vue
@@ -26,6 +26,6 @@ defineProps<{
   @apply object-cover w-[120px] h-[80px]
 }
 .avatar {
-  @apply w-16 h-16 rounded-full
+  @apply w-[50px] h-[50px] rounded-full
 }
 </style>