fix: 类名重复导致的宽度不一样

IdeaLeap · Feb 2, 2023 · 5dd00bd · 5dd00bd
1 parent 49aea3b
commit 5dd00bd
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 9 deletions.
diff --git a/frontend/components/ArticlesList/Items/Mainbar.vue b/frontend/components/ArticlesList/Items/Mainbar.vue
@@ -18,7 +18,8 @@ defineProps({
 
 <style scoped>
 .title {
-  @apply truncate text-jj_sec-app text-[16px] title font-semibold tracking-wide
+  color: text_jj_font_black;
+  @apply truncate dark:text-jj_font_white text-[16px] title font-semibold tracking-wide
 }
 .summary {
   @apply truncate pt-4 text-jj_thirdly text-[13px]

diff --git a/frontend/components/ArticlesList/Items/Topbar.vue b/frontend/components/ArticlesList/Items/Topbar.vue
@@ -25,7 +25,8 @@ defineProps({
 
 <style scoped>
 .name {
-  @apply text-jj_sec-app px-3 border-r-1 pl-0
+  color: text-jj_font_black;
+  @apply dark:text-jj_font_white px-3 border-r-1 pl-0
 }
 .duration {
   @apply text-jj_thirdly px-3 border-r-1

diff --git a/frontend/components/ArticlesList/Items/index.vue b/frontend/components/ArticlesList/Items/index.vue
@@ -11,7 +11,7 @@ defineProps({
   <li
     v-for="artItem in artlistItem"
     :key="artItem.id"
-    class="container"
+    class="artlist_container"
   >
     <ArticlesListItemsLink :id="artItem.id">
       <ArticlesListItemsTopbar
@@ -37,7 +37,8 @@ defineProps({
 </template>
 
 <style scoped>
-.container {
+.artlist_container {
+  position: relative;
   @apply dark:bg-jj_bg_gray dark:b-[#333] dark:hover:bg-[#111] f-c-c py-4 transition-all hover:bg-[#FAFAFA] b-b b-grey all-cursor-pointer
 }
 </style>
diff --git a/frontend/components/ArticlesList/Skeleton.vue b/frontend/components/ArticlesList/Skeleton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="skeleton_container">
     <div class="skeleton w-2/5">
       <div />
     </div>
@@ -16,7 +16,7 @@
 </template>
 
 <style scoped>
-.container {
+.skeleton_container {
   @apply p-5 dark:bg-jj_bg_gray
 }
 .skeleton {

diff --git a/frontend/components/Main/index.vue b/frontend/components/Main/index.vue
@@ -4,11 +4,11 @@
 
 <template>
   <div class="container main_container">
-    <div class="mt-5.17rem ">
+    <div class="pt-10.53rem">
       <Types class="left-0" />
       <div class="timeline-container mt-0 relative 0.33rem">
-        <ArticlesList class="mr-21.667rem w-full lg:w-700px" />
-        <Aside class="absolute display-none top-0 right-0 lg:display-block" />
+        <ArticlesList class="mr-21.667rem w-full mlg:w-700px" />
+        <Aside class="absolute display-none top-0 right-0 mlg:display-block" />
       </div>
     </div>
   </div>

diff --git a/frontend/unocss.config.ts b/frontend/unocss.config.ts
@@ -52,6 +52,7 @@ export default defineConfig({
       xs: '320px',
       sm: '640px',
       md: '768px',
+      mlg: '960px',
       lg: '1024px',
       xl: '1280px',
       xxl: '1536px',