fix:修改页面

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

@@ -26,7 +26,14 @@
     <div class="flex flexc aic">
       <img class="mb32" width="700" src="../../assets/img/png_title@2x.png" />
       <div class="search-box">
-        <el-input v-model="search" placeholder="输入关键词查询"></el-input>
+        <el-input v-model="search" placeholder="输入关键词查询">
+          <i
+            v-show="search"
+            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" /> 搜索
@@ -251,6 +258,9 @@ export default {
         });
       }
     },
+    handleClose() {
+      this.search = "";
+    },
   },
 };
 </script>
@@ -380,6 +390,16 @@ export default {
     background-color: #fff;
   }
 }
+:deep(.el-input__suffix) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 200px;
+}
+.el-icon-circle-close {
+  font-size: 20px;
+}
 .search-btn {
   width: 167px;
   height: 62px;
@@ -399,7 +419,7 @@ export default {
 :deep(.el-input__inner) {
   width: 895px;
   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

@@ -28,7 +28,15 @@
             :key="matter.id"
             @click="handleCheck(matter)"
           >
-            <div class="for-short" v-html="matter.matterName"></div>
+            <div v-if="matter.isRecommend" class="hot-icon flex jcc aic">
+              <i class="iconfont icon-hot"></i>
+              <span>热门</span>
+            </div>
+            <div
+              class="for-short"
+              :class="{ isRecommend: matter.isRecommend }"
+              v-html="matter.matterName"
+            ></div>
             <div class="name">
               {{ matter.matterFullName }}
             </div>
@@ -143,7 +151,6 @@ export default {
       this.matterList = data;
       this.total = total;
       this.matterDatumTotal = matterDatumTotal;
-      console.log(data);
     },
     // 搜索
     handleSearch() {
@@ -201,12 +208,29 @@ export default {
   .matter-item {
     width: 426px;
     height: 200px;
-    padding: 20px;
+    padding: 10px 20px;
     margin-bottom: 34px;
     background: #edf6fe;
     border-radius: 16px;
+    position: relative;
     cursor: pointer;
-
+    .hot-icon {
+      width: 87px;
+      height: 36px;
+      background: linear-gradient(87deg, #fdba6b, #f15800);
+      border-radius: 0px 16px 0px 9px;
+      font-size: 20px;
+      font-family: Source Han Sans CN;
+      color: #ffffff;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      .icon-hot {
+        margin-right: 4px;
+        font-size: 20px;
+        color: #ffe96d;
+      }
+    }
     .for-short {
       margin-bottom: 10px;
       font-size: 24px;
@@ -216,6 +240,9 @@ export default {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    .isRecommend {
+      max-width: 320px;
+    }
     .name {
       margin-bottom: 10px;
       font-size: 18px;
@@ -233,7 +260,7 @@ export default {
       color: #333333;
       line-height: 28px;
       .isMore {
-        max-width: 310px;
+        max-width: 290px;
       }
       .count {
         color: #2878ff;

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

@@ -43,7 +43,10 @@
                 :class="{ isRecommend: v.isRecommend }"
                 v-html="v.matterName"
               ></div>
-              <div class="name">事项全称：{{ v.matterFullName }}</div>
+              <div class="name">
+                <span class="matter-fullName">事项全称</span
+                >{{ v.matterFullName }}
+              </div>
             </div>
           </div>
           <el-empty :image-size="200" v-else></el-empty>
@@ -169,7 +172,7 @@ export default {
   .right {
     height: 100%;
     padding: 0px 40px;
-    padding-bottom: 40px;
+    padding-bottom: 20px;
 
     .data-count {
       color: var(--main-assist-color3);
@@ -178,28 +181,26 @@ export default {
 
   .matter-box {
     height: 100%;
-    padding: 20px;
+    padding: 30px;
     background: #ffffff;
     border-radius: 16px;
-
     .matter-list {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
-
       &::after {
         content: "";
-        width: 460px;
+        width: 474px;
         border: 1px solid transparent;
       }
     }
 
     .matter-item {
-      width: 460px;
+      width: 474px;
       height: 150px;
       margin-bottom: 30px;
       padding: 20px;
-      background: #edf6fe;
+      background: #f7fafd;
       border-radius: 16px;
       cursor: pointer;
       position: relative;
@@ -233,7 +234,7 @@ export default {
         overflow: hidden;
       }
       .isRecommend {
-        max-width: 350px;
+        max-width: 340px;
       }
       .name {
         margin-bottom: 10px;
@@ -246,13 +247,24 @@ export default {
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
         overflow: hidden;
+        .matter-fullName {
+          display: inline-block;
+          width: 86px;
+          height: 30px;
+          text-align: center;
+          line-height: 30px;
+          margin-right: 6px;
+          background: #dfe9fb;
+          border-radius: 4px;
+          color: var(--main-theme-color1);
+        }
       }
 
       .materials {
         font-size: 18px;
         font-family: Source Han Sans CN;
         color: #333333;
-        line-height: 28px;
+        line-height: 30px;
         .count {
           color: #2878ff;
         }