From 66c48692e4dff2f5ecf3957974f2d40bbbb799fd Mon Sep 17 00:00:00 2001
From: zhl <zhl010101@gmail.com>
Date: Mon, 27 Dec 2021 18:28:21 +0800
Subject: [PATCH] add search result page

---
 src/components/Card.vue         |  4 +--
 src/components/ItemDetail.vue   |  5 +++-
 src/components/ResultNo.vue     | 44 +++++++++++++++++++++++++++++++++
 src/components/SearchResult.vue | 35 +++-----------------------
 4 files changed, 53 insertions(+), 35 deletions(-)
 create mode 100644 src/components/ResultNo.vue

diff --git a/src/components/Card.vue b/src/components/Card.vue
index 5a16130..011f0f2 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="item item-card">
+  <router-link class="item item-card" to="/item">
     <div class="bgCard">
       <div class="shape"></div>
     </div>
@@ -59,7 +59,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </router-link>
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
diff --git a/src/components/ItemDetail.vue b/src/components/ItemDetail.vue
index bfa238e..bae55cf 100644
--- a/src/components/ItemDetail.vue
+++ b/src/components/ItemDetail.vue
@@ -2,7 +2,7 @@
   <div class="root">
     <div class="item-detail">
       <div class="top">
-        <div class="backButton back-btn">
+        <div class="backButton back-btn" @click="back">
           <img class="icon" src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
           <span class="label">Back to Marketplace</span></div>
         <div class="card-header">
@@ -105,6 +105,9 @@ import SkinRarityCard from '@/components/SkinRarityCard.vue'
   components: { SkinRarityCard, RarityCard, HeroTrophy, HeroClass, HeroLevel }
 })
 export default class extends Vue {
+  back() {
+    this.$router.go(-1)
+  }
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/ResultNo.vue b/src/components/ResultNo.vue
new file mode 100644
index 0000000..12136ba
--- /dev/null
+++ b/src/components/ResultNo.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="eysHZq empty">
+    <img
+      width="234"
+      height="234"
+      src="data:image/svg+xml,%3csvg width='218' height='208' viewBox='0 0 218 208' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg clip-path='url(%23clip0)'%3e %3cpath d='M103.944 207.922C161.35 207.922 207.887 161.377 207.887 103.961C207.887 46.545 161.35 0 103.944 0C46.5372 0 0 46.545 0 103.961C0 161.377 46.5372 207.922 103.944 207.922Z' fill='%2327114F' /%3e %3cpath d='M189.285 58.9443V76.7901V174.361C189.285 174.361 73.7242 174.361 65.7858 174.361C61.8241 174.361 58.2347 172.752 55.6283 170.16C53.0368 167.553 51.4282 163.978 51.4282 160.001V50.0959H100.98L108.382 58.9295H189.285V58.9443Z' fill='%234E2A8B' /%3e %3cpath d='M55.5391 115.774C75.955 115.774 92.5054 99.2206 92.5054 78.8012C92.5054 58.3818 75.955 41.8286 55.5391 41.8286C35.1231 41.8286 18.5728 58.3818 18.5728 78.8012C18.5728 99.2206 35.1231 115.774 55.5391 115.774Z' fill='%23B09BD7' /%3e %3cpath d='M28.1191 103.589C28.1191 103.589 43.0427 123.803 66.977 125.948C66.977 125.948 62.5238 124.607 60.379 115.461C58.2195 106.3 31.4107 99.4475 28.1191 103.589Z' fill='%23B09BD7' /%3e %3cpath d='M59.5452 78.8012L70.9389 67.4055C72.0411 66.3032 72.0411 64.5007 70.9389 63.3984C69.8368 62.2961 68.0346 62.2961 66.9325 63.3984L55.5388 74.7941L44.145 63.3984C43.0429 62.2961 41.2408 62.2961 40.1386 63.3984C39.0365 64.5007 39.0365 66.3032 40.1386 67.4055L51.5324 78.8012L40.1386 90.1968C39.0365 91.2991 39.0365 93.1016 40.1386 94.2039C40.6897 94.7551 41.4195 95.0381 42.1344 95.0381C42.8493 95.0381 43.5791 94.7551 44.1301 94.2039L55.5239 82.8083L66.9176 94.2039C67.4687 94.7551 68.1985 95.0381 68.9134 95.0381C69.6432 95.0381 70.3581 94.7551 70.9091 94.2039C72.0113 93.1016 72.0113 91.2991 70.9091 90.1968L59.5452 78.8012Z' fill='%236736BA' /%3e %3cpath d='M218 76.448V159.986C218 167.911 211.566 174.346 203.643 174.346H65.8008C73.7243 174.346 80.1584 167.911 80.1584 159.986V76.448H218Z' fill='%238663C7' /%3e %3cpath d='M131.486 132.237C134.277 129.445 134.277 124.918 131.486 122.125C128.694 119.333 124.167 119.333 121.375 122.125C118.584 124.918 118.584 129.445 121.375 132.237C124.167 135.03 128.694 135.03 131.486 132.237Z' fill='%236736BA' /%3e %3cpath d='M115.099 114.94C114.354 114.94 113.654 114.493 113.386 113.748C113.029 112.795 113.505 111.752 114.459 111.394L132.48 104.631C133.418 104.274 134.476 104.751 134.833 105.704C135.191 106.657 134.714 107.7 133.761 108.058L115.739 114.82C115.531 114.895 115.308 114.94 115.099 114.94Z' fill='%236736BA' /%3e %3cpath d='M172.547 134.242C176.444 133.609 179.091 129.936 178.458 126.038C177.826 122.14 174.153 119.493 170.256 120.126C166.359 120.758 163.712 124.431 164.344 128.329C164.977 132.227 168.649 134.874 172.547 134.242Z' fill='%236736BA' /%3e %3cpath d='M182.732 114.94C182.523 114.94 182.3 114.895 182.091 114.82L164.07 108.058C163.117 107.7 162.64 106.642 162.998 105.704C163.355 104.765 164.412 104.274 165.351 104.631L183.372 111.394C184.325 111.752 184.802 112.809 184.445 113.748C184.177 114.493 183.476 114.94 182.732 114.94Z' fill='%236736BA' /%3e %3cpath d='M153.331 154.087H144.499C143.487 154.087 142.667 153.268 142.667 152.255C142.667 151.242 143.487 150.423 144.499 150.423H153.331C154.344 150.423 155.163 151.242 155.163 152.255C155.163 153.268 154.344 154.087 153.331 154.087Z' fill='%236736BA' /%3e %3c/g%3e %3cdefs%3e %3cclipPath id='clip0'%3e %3crect width='218' height='207.908' fill='white' /%3e %3c/clipPath%3e %3c/defs%3e %3c/svg%3e"
+      class="center"
+    />
+    <p class="hydYaP">Sorry, something went wrong.</p>
+    <p class="kMthTr">Please try again.</p>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+  name: 'ResultNo',
+  components: {
+  }
+})
+export default class extends Vue {}
+</script>
+<style lang="scss" scoped>
+.eysHZq{
+  display: flex;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  flex-direction: column;
+}
+.hydYaP {
+  font-weight: bolder;
+  font-size: 1.125em;
+  text-align: center;
+  color: rgb(134, 98, 199);
+}
+.kMthTr {
+  font-size: 1.125em;
+  text-align: center;
+  color: rgb(255, 255, 255);
+  margin: 0px;
+}
+</style>
diff --git a/src/components/SearchResult.vue b/src/components/SearchResult.vue
index 50b7031..d46ec77 100644
--- a/src/components/SearchResult.vue
+++ b/src/components/SearchResult.vue
@@ -6,29 +6,20 @@
 <!--        <span>FILTERS</span>-->
 <!--      </button>-->
     </div>
-    <div v-if="false" class="eysHZq empty">
-      <img
-        width="234"
-        height="234"
-        src="data:image/svg+xml,%3csvg width='218' height='208' viewBox='0 0 218 208' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg clip-path='url(%23clip0)'%3e %3cpath d='M103.944 207.922C161.35 207.922 207.887 161.377 207.887 103.961C207.887 46.545 161.35 0 103.944 0C46.5372 0 0 46.545 0 103.961C0 161.377 46.5372 207.922 103.944 207.922Z' fill='%2327114F' /%3e %3cpath d='M189.285 58.9443V76.7901V174.361C189.285 174.361 73.7242 174.361 65.7858 174.361C61.8241 174.361 58.2347 172.752 55.6283 170.16C53.0368 167.553 51.4282 163.978 51.4282 160.001V50.0959H100.98L108.382 58.9295H189.285V58.9443Z' fill='%234E2A8B' /%3e %3cpath d='M55.5391 115.774C75.955 115.774 92.5054 99.2206 92.5054 78.8012C92.5054 58.3818 75.955 41.8286 55.5391 41.8286C35.1231 41.8286 18.5728 58.3818 18.5728 78.8012C18.5728 99.2206 35.1231 115.774 55.5391 115.774Z' fill='%23B09BD7' /%3e %3cpath d='M28.1191 103.589C28.1191 103.589 43.0427 123.803 66.977 125.948C66.977 125.948 62.5238 124.607 60.379 115.461C58.2195 106.3 31.4107 99.4475 28.1191 103.589Z' fill='%23B09BD7' /%3e %3cpath d='M59.5452 78.8012L70.9389 67.4055C72.0411 66.3032 72.0411 64.5007 70.9389 63.3984C69.8368 62.2961 68.0346 62.2961 66.9325 63.3984L55.5388 74.7941L44.145 63.3984C43.0429 62.2961 41.2408 62.2961 40.1386 63.3984C39.0365 64.5007 39.0365 66.3032 40.1386 67.4055L51.5324 78.8012L40.1386 90.1968C39.0365 91.2991 39.0365 93.1016 40.1386 94.2039C40.6897 94.7551 41.4195 95.0381 42.1344 95.0381C42.8493 95.0381 43.5791 94.7551 44.1301 94.2039L55.5239 82.8083L66.9176 94.2039C67.4687 94.7551 68.1985 95.0381 68.9134 95.0381C69.6432 95.0381 70.3581 94.7551 70.9091 94.2039C72.0113 93.1016 72.0113 91.2991 70.9091 90.1968L59.5452 78.8012Z' fill='%236736BA' /%3e %3cpath d='M218 76.448V159.986C218 167.911 211.566 174.346 203.643 174.346H65.8008C73.7243 174.346 80.1584 167.911 80.1584 159.986V76.448H218Z' fill='%238663C7' /%3e %3cpath d='M131.486 132.237C134.277 129.445 134.277 124.918 131.486 122.125C128.694 119.333 124.167 119.333 121.375 122.125C118.584 124.918 118.584 129.445 121.375 132.237C124.167 135.03 128.694 135.03 131.486 132.237Z' fill='%236736BA' /%3e %3cpath d='M115.099 114.94C114.354 114.94 113.654 114.493 113.386 113.748C113.029 112.795 113.505 111.752 114.459 111.394L132.48 104.631C133.418 104.274 134.476 104.751 134.833 105.704C135.191 106.657 134.714 107.7 133.761 108.058L115.739 114.82C115.531 114.895 115.308 114.94 115.099 114.94Z' fill='%236736BA' /%3e %3cpath d='M172.547 134.242C176.444 133.609 179.091 129.936 178.458 126.038C177.826 122.14 174.153 119.493 170.256 120.126C166.359 120.758 163.712 124.431 164.344 128.329C164.977 132.227 168.649 134.874 172.547 134.242Z' fill='%236736BA' /%3e %3cpath d='M182.732 114.94C182.523 114.94 182.3 114.895 182.091 114.82L164.07 108.058C163.117 107.7 162.64 106.642 162.998 105.704C163.355 104.765 164.412 104.274 165.351 104.631L183.372 111.394C184.325 111.752 184.802 112.809 184.445 113.748C184.177 114.493 183.476 114.94 182.732 114.94Z' fill='%236736BA' /%3e %3cpath d='M153.331 154.087H144.499C143.487 154.087 142.667 153.268 142.667 152.255C142.667 151.242 143.487 150.423 144.499 150.423H153.331C154.344 150.423 155.163 151.242 155.163 152.255C155.163 153.268 154.344 154.087 153.331 154.087Z' fill='%236736BA' /%3e %3c/g%3e %3cdefs%3e %3cclipPath id='clip0'%3e %3crect width='218' height='207.908' fill='white' /%3e %3c/clipPath%3e %3c/defs%3e %3c/svg%3e"
-        class="sc-pNWdM center"
-      />
-      <p class="sc-gKAaRy hydYaP">Sorry, something went wrong.</p>
-      <p class="sc-iCoGMd kMthTr">Please try again.</p>
-    </div>
-    {# card list #}
+    <result-no v-if="false"></result-no>
     <card-list></card-list>
-    {# end of card list #}
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import SortSelect from '@/components/SortSelect.vue'
 import CardList from '@/components/CardList.vue'
+import ResultNo from '@/components/ResultNo.vue'
 
 @Component({
   name: 'SearchResult',
   components: {
+    ResultNo,
     CardList,
     SortSelect
   }
@@ -76,24 +67,4 @@ export default class extends Vue {}
   line-height: 1.33;
 }
 
-.eysHZq{
-  display: flex;
-  -webkit-box-pack: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  align-items: center;
-  flex-direction: column;
-}
-.hydYaP {
-  font-weight: bolder;
-  font-size: 1.125em;
-  text-align: center;
-  color: rgb(134, 98, 199);
-}
-.kMthTr {
-  font-size: 1.125em;
-  text-align: center;
-  color: rgb(255, 255, 255);
-  margin: 0px;
-}
 </style>