finish btn

src/views/spirit/index.vue

@@ -1,6 +1,19 @@
 <template>
   <div class="dy-con">
     <div class="dynamic">
+      <div class="search-area">
+        <div class="search-cls">
+          <input
+            type="text"
+            placeholder="在此搜索"
+            @keyup.enter="getCollection"
+            v-model="keyword"
+          />
+          <div @click="getCollection" class="search-btn primary">
+            <img :src="require('@/assets/images/search.png')" alt />
+          </div>
+        </div>
+      </div>
       <ul class="spirit-list">
         <li class="item" v-for="(item, i) in list" :key="i">
           <a
@@ -43,6 +56,7 @@ export default {
       keyword: "",
       currentPage: 0,
       pageCount: 0,
+      searchKey: "",
     };
   },
   mounted() {
@@ -92,51 +106,45 @@ export default {
   .dynamic {
     position: relative;
     padding: 3.33rem 0;
-    max-width: 55rem;
+   width: @containerW;
     margin: 3.25rem auto 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    .aside {
+
+    
+    }
+}
+.search-area {
+  width: 80%;
+  margin: 15px auto;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  .search-cls {
+    background: #fff;
+    width: 400px;
+    position: relative;
+    .search-btn{
+      height: 48px;
+      position:absolute;
+      right: 0;
+      top:0;
       display: flex;
-      flex-direction: column;
+      justify-content: center;
       align-items: center;
-      margin-top: 1.67rem;
-      width: 14.17rem;
-      flex-shrink: 0;
-      .m-sidebar {
-      }
-
-      .search-cls {
-        width: 10.42rem;
-        background: #fff;
-        margin: 0.83rem auto;
-        input {
-          width: 80%;
-        }
-      }
-      .paging {
-        margin-top: 0.83rem;
+      img{
+        width: 22px;
+        height: 22px;
       }
     }
-    .d-body {
-      flex: 4;
-      margin-left: 3.33rem;
-      text-align: center;
-      .info {
-        color: #df3b2f;
-        margin: 1.25rem 0;
-        > span {
-          margin-right: 1.25rem;
-        }
-      }
+    input {
+      width: 80%;
+      font-size: 16px;
+      padding: 15px 10px;
     }
   }
 }
 .spirit-list {
   display: block;
-  // width: 100%;
-  width: @containerW;
+  width: 80%;
   margin: 0 auto;
   li {
     width: 100%;
@@ -152,8 +160,8 @@ export default {
     color: black;
     .item-title {
       display: block;
-      width: calc(100% - 10.58rem );
-      &:hover{
+      width: calc(100% - 10.58rem);
+      &:hover {
         text-decoration: underline;
       }
     }