日常开发

src/views/train/test.vue

@@ -71,6 +71,7 @@
         </div>
       </div>
       <div class="main-right">
+        <div class="title">测试记录</div>
         <ul>
           <li v-for="(item, index) in  reportList " :key="index">
             <el-avatar :src="item.face_pic || item.logo_url" />
@@ -749,24 +750,28 @@ $waiPadding: 6.51rem;
 
 .main {
   width: calc(100% - ($waiPadding * 2));
-  height: 72vh;
+  height: 78vh;
   padding-top: 10rem;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
+  overflow: hidden;
 
   .main-left {
     width: 71.5%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 
     .main-left-top {
       display: flex;
       justify-content: space-between;
-      height: 43.5vh;
-      margin-bottom: 3vh;
+      height: 55.8%;
+      overflow: hidden;
       position: relative;
 
       .top-left {
-        width: 37.5%;
+        width: 37.4%;
         height: 100%;
         border-radius: 29px;
         opacity: 1;
@@ -858,26 +863,30 @@ $waiPadding: 6.51rem;
     .main-left-bottom {
       display: flex;
       justify-content: space-between;
-      height: 29.5vh;
+      height: calc(100% - 55.8% - 3vh);
+      overflow: hidden;
 
       .bottom-left {
         width: 60%;
         padding-right: 1rem;
         display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
 
         .tips {
+          height: 2.8vh;
+
           img {
-            height: 2.8vh;
+            height: 100%;
           }
         }
 
         .pic {
           text-align: center;
           width: 100%;
-          height: calc(100% - 2.8vh);
+          height: 100%;
           display: flex;
           justify-content: center;
+          overflow: hidden;
 
           img {
             max-width: 100%;
@@ -918,10 +927,63 @@ $waiPadding: 6.51rem;
 
   .main-right {
     width: 27%;
-    border-radius: 29px;
-    opacity: 1;
+    border-radius: 1.6rem;
     background: linear-gradient(29deg, #092941 -82%, #2A484B 94%);
-    box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
+    box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.4);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .title {
+      height: 5vh;
+      line-height: 5vh;
+      width: 100%;
+      text-align: center;
+      color: #1A293A;
+      font-size: 1.65rem;
+      background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
+    }
+
+    ul {
+      height: 100%;
+      overflow-y: scroll;
+
+      &::-webkit-scrollbar {
+        width: 10px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-width: 2px;
+        border-radius: 4px;
+        border-style: dashed;
+        border-color: transparent;
+        background-color: rgba(26, 62, 78, 0.9);
+        background-clip: padding-box;
+      }
+
+      &::-webkit-scrollbar-button:hover {
+        border-radius: 6px;
+        background: rgba(26, 62, 78, 1);
+      }
+    }
+
+    .erweima {
+      text-align: center;
+      padding: 1vh 0;
+
+      img {
+        width: 7rem;
+      }
+
+      span {
+        display: block;
+        color: #FFFFFF;
+        font-size: 1.1rem;
+        padding-top: 3px;
+      }
+    }
   }
+
+
 }
 </style>