fix:修改搜索和事项显示

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

 <template>
   <div class="search-box" :style="{ width }">
-    <el-input
-      placeholder="输入关键词查询"
-      :value="value"
-      @input="changeInput"
-    ></el-input>
+    <el-input placeholder="输入关键词查询" :value="value" @input="changeInput">
+      <i
+        v-show="value"
+        slot="suffix"
+        class="el-icon-circle-close"
+        @click="handleClose"
+      ></i>
+    </el-input>
     <el-button class="search-btn" @click="handleSearch">
       <span class="flex aic jcc">
         <img class="mr10" src="../assets/img/sousuo.png" /> 搜索
@@ -40,6 +43,9 @@ export default {
     handleSearch() {
       this.$emit("click");
     },
+    handleClose() {
+      this.$emit("clear");
+    },
   },
 };
 </script>
@@ -65,10 +71,19 @@ export default {
   right: 5px;
   top: 5px;
 }
-
-/deep/.el-input__inner {
+:deep(.el-input__suffix) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 200px;
+}
+.el-icon-circle-close {
+  font-size: 20px;
+}
+:deep(.el-input__inner) {
   height: 72px;
-  padding-right: 200px;
+  padding-right: 240px;
   font-size: 24px;
   border-radius: 8px;
   color: #333;

sample-form-client-ui/admin/src/pages/searchpage/SearchPage.vue

@@ -6,7 +6,7 @@
     <div class="main flex1 flex flexc">
       <PageTop>
         <div slot="count" class="count">
-          共计<span class="data-count">{{ matterTotal }}</span
+          共计<span class="data-count">{{ total }}</span
           >件事项
           <!-- ，<span class="data-count">{{ matterDatumTotal }}</span
           >份表单 -->
@@ -15,6 +15,7 @@
           slot="search"
           width="834px"
           @click="handleSearch"
+          @clear="handleClear"
           v-model="searchVal"
         ></SearchBox>
       </PageTop>
@@ -140,7 +141,7 @@ export default {
       });
       let { total, matterDatumTotal, data } = res.data.data;
       this.matterList = data;
-      this.matterTotal = total;
+      this.total = total;
       this.matterDatumTotal = matterDatumTotal;
       console.log(data);
     },
@@ -159,6 +160,10 @@ export default {
       this.matterInfo = row;
       this.visible = true;
     },
+    // 重置搜索
+    handleClear() {
+      this.searchVal = "";
+    },
   },
 };
 </script>
@@ -196,7 +201,7 @@ export default {
   .matter-item {
     width: 426px;
     height: 200px;
-    padding: 10px;
+    padding: 20px;
     margin-bottom: 34px;
     background: #edf6fe;
     border-radius: 16px;
@@ -228,7 +233,7 @@ export default {
       color: #333333;
       line-height: 28px;
       .isMore {
-        max-width: 320px;
+        max-width: 310px;
       }
       .count {
         color: #2878ff;

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

@@ -22,6 +22,7 @@
             width="834px"
             v-model="searchVal"
             @click="handleSearch"
+            @clear="handleClear"
           ></SearchBox>
         </PageTop>
         <!-- 事项列表 -->
@@ -145,6 +146,10 @@ export default {
       this.matterInfo = row;
       this.visible = true;
     },
+    // 重置搜索
+    handleClear() {
+      this.searchVal = "";
+    },
   },
 };
 </script>
@@ -193,7 +198,7 @@ export default {
       width: 460px;
       height: 150px;
       margin-bottom: 30px;
-      padding: 10px;
+      padding: 20px;
       background: #edf6fe;
       border-radius: 16px;
       cursor: pointer;
@@ -224,7 +229,7 @@ export default {
         letter-spacing: 1px;
         display: -webkit-box;
         -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
+        -webkit-line-clamp: 1;
         overflow: hidden;
       }
       .isRecommend {

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

@@ -58,16 +58,16 @@ export default {
   padding: 15px 0px;
   overflow-y: auto;
   &::-webkit-scrollbar {
-    width: 6px;
+    width: 4px;
     overflow-y: auto;
   }
 
   &::-webkit-scrollbar-thumb {
-    border-radius: 6px;
+    border-radius: 4px;
     background-color: rgba(144, 147, 153, 0.5);
   }
   &::-webkit-scrollbar-track {
-    border-radius: 6px;
+    border-radius: 4px;
     background: #fff;
   }
 }