feat: add responsive feature

IdeaLeap · Jan 24, 2023 · 5cdfc53 · 5cdfc53
1 parent 338327a
commit 5cdfc53
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/frontend/components/Articles/Item.vue b/frontend/components/Articles/Item.vue
@@ -34,7 +34,7 @@ const enteredtopicHeat: (string | number)[] = props.topicHeat.map((item) => {
         </div>
       </div>
       <div class="py-4">
-        <div class="title font-semibold tracking-wide" style="font-size: 16px;">
+        <div class="truncate title font-semibold tracking-wide" style="font-size: 16px;">
           {{ title }}
         </div>
         <div class="truncate pt-4 text-slate-500" style="font-size: 13px;">

diff --git a/frontend/components/Articles/Skeleton.vue b/frontend/components/Articles/Skeleton.vue
@@ -5,7 +5,7 @@ export default {
   props: {
     bg: {
       type: String,
-      default: '#efefef',
+      default: '#E5E7EC',
     },
     width: {
       type: String,
@@ -57,7 +57,7 @@ export default {
 .shan::after {
   content: "";
   position: absolute;
-  animation: shan 1.5s ease 0s infinite;
+  animation: shan .75s ease 0s infinite;
   top: 0;
   width: 50%;
   height: 100%;

diff --git a/frontend/components/Articles/index.vue b/frontend/components/Articles/index.vue
@@ -70,7 +70,7 @@ onUnmounted(() => {
         </option>
       </select>
     </div>
-    <ul v-if="!isLoading && initialItem" class="w-full overflow-hidden">
+    <ul v-if="!isLoading && initialItem">
       <ArticlesItem
         v-for="items in artlistData" :key="items.uname" :uname="items.uname" :duration="items.duration"
         :title="items.title" :desc="items.desc" :tags="items.tags" :topic-heat="items.topicHeat"

diff --git a/frontend/components/Main/index.vue b/frontend/components/Main/index.vue
@@ -7,8 +7,8 @@
     <div class="mt-5.17rem ">
       <Types class="left-0" />
       <div class="timeline-container mt-0 relative 0.33rem">
-        <Articles class="mr-21.667rem border-r-2 w-700px bg-white" />
-        <Aside class="absolute top-0 right-0" />
+        <Articles class="mr-21.667rem border-r-2 w-full bg-white lg:w-700px" />
+        <Aside class="absolute display-none top-0 right-0 lg:display-block" />
       </div>
     </div>
   </div>