fix:修改材料列表显示

sample-form-client-ui/admin/src/components/MateralsList.vue

 <template>
   <div>
-    <el-drawer size="70%" :visible.sync="drawer" direction="rtl">
+    <el-drawer size="1200px" :visible.sync="drawer" direction="rtl">
       <div slot="title" class="title flex">
         <span
           >材料列表（共{{
@@ -29,7 +29,7 @@
           </div>
           <div class="for-short">{{ v.materialName }}</div>
           <div class="matterDatumList-name">
-            {{ v.materiaFullName }}
+            材料全称：{{ v.materiaFullName }}
           </div>
           <!-- <div class="check-btn" @click.stop>点击查看二维码</div> -->
         </div>
@@ -67,7 +67,7 @@ export default {
       api: local.getLocal("baseUrl")
         ? local.getLocal("baseUrl") + "/"
         : "http://192.168.0.98:11078/",
-      row: 5,
+      row: 4,
     };
   },
   computed: {
@@ -102,6 +102,20 @@ export default {
   border-top: 1px solid #e0e0e0;
   padding: 40px;
   padding-top: 0px;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 12px;
+    overflow-y: auto;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background-color: rgba(144, 147, 153, 0.5);
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 6px;
+    background: #fff;
+  }
 }
 .title {
   font-size: 28px;
@@ -124,35 +138,22 @@ export default {
   width: 100%;
   height: 100%;
   align-content: flex-start;
-  overflow-y: auto;
-  &::-webkit-scrollbar {
-    width: 12px;
-    overflow-y: auto;
-  }
 
-  &::-webkit-scrollbar-thumb {
-    border-radius: 6px;
-    background-color: rgba(144, 147, 153, 0.5);
-  }
-  &::-webkit-scrollbar-track {
-    border-radius: 6px;
-    background: #fff;
-  }
   .list {
     content: "";
-    width: 19%;
+    width: 236px;
     border: 1px solid transparent;
     padding: 5px;
     overflow: hidden;
   }
 }
 .matterDatumList-item {
-  width: 19%;
+  width: 236px;
   margin-top: 40px;
   // height: 430px;
   .pic-box {
-    width: 207px;
-    height: 256px;
+    width: 236px;
+    height: 300px;
     padding: 16px 24px;
     background: #f4f6fc;
     border-radius: 16px;
@@ -169,22 +170,26 @@ export default {
     }
   }
   .for-short {
+    width: 100%;
     margin-top: 18px;
     margin-bottom: 8px;
     font-size: 24px;
     font-family: Source Han Sans CN;
     color: #333333;
+    letter-spacing: 1px;
     overflow: hidden;
     text-align: center;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .matterDatumList-name {
+    width: 100%;
     font-size: 18px;
     font-family: Source Han Sans CN;
     color: #777777;
     line-height: 30px;
-    text-align: center;
+    letter-spacing: 1px;
+    text-align: left;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;

sample-form-client-ui/admin/src/pages/home/Home.vue

@@ -187,7 +187,7 @@ export default {
   computed: {
     optionLeft() {
       return {
-        direction: 2, // 向左滚动
+        direction: 2, // 滚动方向
         step: 0.5, // 数值越大速度滚动越快
         limitMoveNum: 5, // 开启无缝滚动的数据量 设置(数值<=页面展示数据条数不滚)(超过页面展示条数滚动)
         openWatch: true, // 开启数据实时监控刷新dom
@@ -196,7 +196,7 @@ export default {
     },
     optionTop() {
       return {
-        direction: 1, // 向左滚动
+        direction: 1, // 滚动方向
         step: 0.5, // 数值越大速度滚动越快
         limitMoveNum: 4, // 开启无缝滚动的数据量 设置(数值<=页面展示数据条数不滚)(超过页面展示条数滚动)
         openWatch: true, // 开启数据实时监控刷新dom
@@ -442,6 +442,7 @@ export default {
         border-radius: 8px;
         font-size: 22px;
         color: var(--main-theme-color1);
+        letter-spacing: 2px;
         &:nth-child(2n-1) {
           background-color: #fff;
         }
@@ -484,18 +485,18 @@ export default {
         animation: shadow 6s infinite;
       }
 
-      .fill-btn-text1 {
-        animation: ring 6s 20ms infinite;
-      }
-      .fill-btn-text2 {
-        animation: ring 6s 60ms infinite;
-      }
-      .fill-btn-text3 {
-        animation: ring 6s 105ms infinite;
-      }
-      .fill-btn-text4 {
-        animation: ring 6s 145ms infinite;
-      }
+      // .fill-btn-text1 {
+      //   animation: ring 6s 20ms infinite;
+      // }
+      // .fill-btn-text2 {
+      //   animation: ring 6s 60ms infinite;
+      // }
+      // .fill-btn-text3 {
+      //   animation: ring 6s 105ms infinite;
+      // }
+      // .fill-btn-text4 {
+      //   animation: ring 6s 145ms infinite;
+      // }
     }
     .empty-btn {
       width: 284px;
@@ -524,8 +525,9 @@ export default {
           margin-bottom: 4px;
           line-height: 45px;
           border-radius: 8px;
-          font-size: 22px;
+          font-size: 20px;
           color: var(--main-theme-color1);
+          letter-spacing: 2px;
           &:nth-child(2n) {
             background-color: #f6f9fe;
           }

sample-form-client-ui/admin/src/pages/showpage/MatterList.vue

@@ -221,6 +221,7 @@ export default {
         font-weight: 500;
         line-height: 36px;
         color: #333333;
+        letter-spacing: 1px;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
@@ -235,6 +236,7 @@ export default {
         font-family: Source Han Sans CN;
         color: #888888;
         line-height: 24px;
+        letter-spacing: 1px;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
@@ -246,7 +248,6 @@ export default {
         font-family: Source Han Sans CN;
         color: #333333;
         line-height: 28px;
-
         .count {
           color: #2878ff;
         }