浏览代码

🎨 修改细节问题

快乐的梦鱼 1 月之前
父节点
当前提交
66274c2f8e
共有 2 个文件被更改,包括 17 次插入5 次删除
  1. 1 1
      src/components/content/ContentNode.vue
  2. 16 4
      src/views/HomeView.vue

+ 1 - 1
src/components/content/ContentNode.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex flex-row justify-content-center align-items-center pt-3 pt-md-4 pt-lg-5">
+  <div class="d-none d-flex flex-row justify-content-center align-items-center pt-3 pt-md-4 pt-lg-5">
     <img class="small-info img" src="@/assets/images/IconInfo.svg" />
     <span class="small-info ms-2">此平台为公益平台,部分信息来源于网络,如涉侵权,请联系我们删除,联系邮箱:153168270@qq.com</span>
   </div>

+ 16 - 4
src/views/HomeView.vue

@@ -470,14 +470,15 @@ const recordData = useSimpleDataLoader<GetContentListItem[]>(async () => {
 
 .main-time-line {
 
-  $height: 300px;
+  $height: 500px;
 
+  position: relative;
   height: $height;
 
   &::before {
     content: '';
     position: absolute;
-    top: 50%;
+    top: calc(50% + 30px);
     left: 0;
     width: 100%;
     height: 1px;
@@ -499,7 +500,7 @@ const recordData = useSimpleDataLoader<GetContentListItem[]>(async () => {
     display: flex;
     flex-direction: column-reverse;
     align-items: center;
-    min-width: 300px;
+    width: 25%;
     height: $height; 
     flex-shrink: 0;
 
@@ -551,6 +552,12 @@ const recordData = useSimpleDataLoader<GetContentListItem[]>(async () => {
         font-size: 1.1rem;
         color: $text-content-color;
         margin-bottom: 8px;
+        display: -webkit-box;
+        line-clamp: 2;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
       .content {
         font-size: 0.8rem;
@@ -566,6 +573,11 @@ const recordData = useSimpleDataLoader<GetContentListItem[]>(async () => {
       flex-basis: calc(50% - 10px);
     }
   }
+  .main-time-line {
+    .item {
+      width: 50%;
+    }
+  }
 }
 @media (max-width: 425px) {
   .main-grid9 {
@@ -575,7 +587,7 @@ const recordData = useSimpleDataLoader<GetContentListItem[]>(async () => {
   }
   .main-time-line {
     .item {
-      min-width: 200px;
+      width: 100%;
     }
   }
   .main-card-box {