gx

src/views/znyt.vue

@@ -43,12 +43,14 @@
           <div v-for="(data, index) in records.list" :key="data.id">
             <listNoImg v-if="data.display == 0" :newData="data" />
             <listRightImg v-if="data.display == 1" :newData="data" />
+            <div class="container">
               <div class="line"></div>
             </div>
           </div>
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script setup>
 import { ref, reactive } from "vue";
@@ -172,7 +174,7 @@ const records = reactive({
         position: absolute;
         top: 0;
         left: 0;
-        width: 70px;
+        min-width: 70px;
         height: 24px;
         background: #457aff;
         opacity: 1;
@@ -196,9 +198,11 @@ const records = reactive({
         font-weight: 600;
         color: #333333;
         line-height: 24px;
-        //   white-space: nowrap;
         overflow: hidden;
-        //   text-overflow: ellipsis;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
       }
       .time {
         margin-top: 24px;
@@ -228,7 +232,7 @@ const records = reactive({
     padding-top: 0;
     // overflow: hidden;
     background-color: #ffffff;
-    height: 68vh;
+    // height:calc(100vh - 150px);
     .main-t {
       display: flex;
       align-items: center;
@@ -263,7 +267,8 @@ const records = reactive({
     .list {
       //   box-sizing: border-box;
       width: 100vw;
-      height: 59vh;
+      height: calc(100vh - 280px);
+      background-color: #ffffff;
       overflow: auto;
       //   border: 1px solid yellow;
     }
@@ -280,13 +285,18 @@ const records = reactive({
 ::-webkit-scrollbar {
   display: none;
 }
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .line {
-  width: 100vw;
+  width: calc(100vw - 32px);
   height: 0px;
   border-radius: 0px 0px 0px 0px;
   opacity: 1;
   border: 1px solid #f1f1f1;
-  margin-top: 16px;
+  margin-top: 12px;
   margin-bottom: 16px;
   text-align: center;
 }