Merge branch 'dev_1.1.0' of https://git.yishihui.com/DeNet/de-net into dev_1.1.0

src/view/iframe/nft/card.vue

@@ -15,6 +15,7 @@
                 <img :src="saleData.windowImagePath" />
             </div>
             <div class="buy" @click="buy">
+                <img class="guide" v-if="isShowGuide" :src=" require('@/assets/img/icon-arrow.png') " />
                 <button>Buy NFT</button>
             </div>
         </template>
@@ -25,10 +26,11 @@
 import { onBeforeMount, ref } from 'vue'
 import { getTwitterSaleNftProjectInfo, getNftProjectInfo } from '@/http/nft'
 import { pageUrl } from "@/http/configAPI.js"
-import { getChromeStorage } from '@/uilts/chromeExtension.js'
+import { getChromeStorage, setChromeStorage } from '@/uilts/chromeExtension.js'
 const saleData = ref({});
 const isShare = ref(false);
 const isLoading = ref(true);
+const isShowGuide = ref(false);
 
 const getSaleInfo = () => {
     chrome.tabs.getCurrent((tab) => {
@@ -75,6 +77,14 @@ const getSaleProjectInfo = (account) => {
             chrome.tabs.getCurrent((tab) => {
                 chrome.tabs.sendMessage(tab.id, { actionType: "IFRAME_NFT_SHOW_SALE" });
             })
+            getChromeStorage('nft_guide', (info) => {
+                if (!info) {
+                    isShowGuide.value = true
+                    setTimeout(() => {
+                        setChromeStorage({ nft_guide: Date.now() })
+                    }, 2000)
+                }
+            })
         }
     })
 }
@@ -199,11 +209,18 @@ body {
     }
 
     .buy {
+        position: relative;
         height: 61px;
         display: flex;
         justify-content: center;
         align-items: center;
-
+        .guide {
+            position: absolute;
+            top: 20px;
+            right: 30%;
+            width: 26px;
+            animation: fade 1s infinite;
+        }
         button {
             width: 310px;
             height: 34px;
@@ -217,4 +234,15 @@ body {
         }
     }
 }
+
+@keyframes fade {
+    0%, 100% {
+        opacity: .5;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.4);
+    }
+}
 </style>