搜索框部分逻辑

src/layouts/MainLayout.vue

@@ -30,13 +30,14 @@ export default {
 <style lang="stylus" scoped>
 .safe-area {
   padding-top: 60px;
+  height: calc(100vh - 60px);
 }
 
 .app-main {
   position: relative;
-  height: calc(100vh - 64px);
+  height: calc(100vh - 100px);
   // height: 100vh;
-  padding-bottom: 64px;
+  padding-bottom: 100px;
   overflow-y: scroll;
 
   &::-webkit-scrollbar {

src/views/Search/components/Tags.vue

@@ -1,24 +1,54 @@
 <template>
   <div class="tags">
     <div class="top" v-if="tags.length>0">
-      <Tag class="tag" :tag="tags[0]" />
+      <div class="tag" @click.stop="search(tags[0].name)">
+        <img :src="tags[0].pic" alt />
+        <div class="meta">
+          <div class="content">
+            <div
+              class="name"
+              v-if="tags[0].name"
+              :class="{s: tags[0].name.length>=10, m: tags[0].name.length>=6}"
+            >#{{tags[0].name}}</div>
+            <div
+              class="tname"
+              v-if="tags[0].tname"
+              :class="{s: tags[0].tname.length>=10, m: tags[0].tname.length>=6}"
+            >{{tags[0].tname}}</div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="bottom" v-if="tags.length>3">
       <div class="row">
-        <Tag :tag="tag" v-for="(tag,index) in handle(1)" :key="index" />
-      </div>
-      <div class="row">
-        <Tag :tag="tag" v-for="(tag,index) in handle(2)" :key="index" />
-      </div>
-      <div class="row">
-        <Tag :tag="tag" v-for="(tag,index) in handle(0)" :key="index" />
+        <div
+          class="tag"
+          v-for="(tag,index) in tags.slice(1)"
+          :key="index"
+          @click.stop="search(tag.name)"
+        >
+          <img :src="tag.pic" alt />
+          <div class="meta">
+            <div class="content">
+              <div
+                class="name"
+                v-if="tag.name"
+                :class="{s: tag.name.length>=10, m: tag.name.length>=6}"
+              >#{{tag.name}}</div>
+              <div
+                class="tname"
+                v-if="tag.tname"
+                :class="{s: tag.tname.length>=10, m: tag.tname.length>=6}"
+              >{{tag.tname}}</div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import Tag from "./Tag";
 import api from "@/api";
 export default {
   data() {
@@ -27,8 +57,8 @@ export default {
     };
   },
   methods: {
-    handle(n) {
-      return this.tags.slice(1).filter((_, index) => (index + 1) % 3 === n);
+    search(keywords) {
+      this.$emit("search", keywords);
     },
     async getTags() {
       let res = await api.getTags();
@@ -46,9 +76,7 @@ export default {
   mounted() {
     this.getTags();
   },
-  components: {
-    Tag
-  }
+  components: {}
 };
 </script>
 
@@ -57,19 +85,66 @@ export default {
   display: flex;
   flex-direction: column;
 
+  .tag {
+    position: relative;
+    float: left;
+    width: 33.3%;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .meta {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      text-align: center;
+      color: #fff;
+      background: rgba(#000, 0.3);
+
+      .content {
+        position: absolute;
+        bottom: 10%;
+        width: 100%;
+
+        .name {
+          font-size: 36px;
+          margin: 10px 0;
+        }
+
+        .tname {
+          font-size: 28px;
+          margin: 10px 0;
+        }
+
+        .m {
+          font-size: 30px;
+        }
+
+        .s {
+          font-size: 24px;
+        }
+      }
+    }
+  }
+
   .top {
     .tag {
       height: 600px;
+      width: 100%;
     }
   }
 
   .bottom {
     display: flex;
 
     .row {
-      width: 33.33%;
-
       .tag {
+        width: 33.33%;
       }
     }
   }