[edit]style

src/iframe/tab-group.js

@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import App from '@/view/iframe/tab-group/tab-group.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
 const app = createApp(App);
 app.mount('#app');

src/view/iframe/tab-group/tab-group.vue

@@ -4,28 +4,39 @@
             <div class="list-item" 
                 v-for="(item, index) in listData" 
                 :key="index"
-                @click="clickItem(item, index)">
+                @click.stop="clickItem(item, index)">
                 <div class="left">
                     <img :src="item.avatarUrl" class="icon-avatar">
                 </div>
                 <div class="right">
                     <div class="top">
                         <div class="icon-nft-wrapper">
-                            <img :src="item.nftItem.imagePath" class="icon-nft">
-                            <div class="preview-nft">
-                                <img :src="item.nftItem.imagePath" class="icon-nft-big">
-                                <div class="content">
-                                    <div class="nft-name">
-                                        {{item.nftItem.nftItemName}} 
+                            <el-popover
+                                :width="340"
+                                placement="right"
+                                trigger="hover"
+                                popper-style="background: #FFFFFF;
+                                    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+                                    border-radius: 20px;
+                                    padding: 20px;
+                                    box-sizing: border-box;">
+                                <template #reference>
+                                    <img :src="item.nftItem.imagePath" class="icon-nft">
+                                </template>
+                                <template #default>
+                                    <div class="preview-nft">
+                                        <img :src="item.nftItem.imagePath" class="icon-nft-big">
+                                        <div class="content">
+                                            <div class="nft-name">
+                                                {{item.nftItem.nftItemName}} 
+                                            </div>
+                                            <div class="nft-desc">
+                                                <div v-html="item.nftItem.metadata.description"></div>
+                                            </div>
+                                        </div>
                                     </div>
-                                    <div class="nft-desc">
-                                        <div v-html="item.nftItem.metadata.description"></div>
-                                    </div>
-                                    <!-- <div class="nft-date">
-                                        {{item.nftItem.dateOfPossession}}
-                                    </div> -->
-                                </div>
-                            </div>
+                                </template>
+                            </el-popover>
                         </div>
                         <div class="nick-name">
                             {{item.nickName}}{{index}}
@@ -45,6 +56,8 @@
 import { onMounted, ref } from "vue";
 import { getGroupPostList, getTwitterNftGroupInfo } from '@/http/nft'
 import { getQueryString } from '@/uilts/help.js'
+import { ElPopover } from "element-plus";
+
 
 let twitterAccount = '';
 let groupInfo = {};
@@ -219,6 +232,10 @@ html, body, #app {
     padding: 0;
 }
 
+.el-popper__arrow {
+    display: none !important;
+}
+
 @media (prefers-color-scheme: light) {
     body {
         background: #fff;
@@ -256,6 +273,41 @@ html, body, #app {
     }
 }
 
+.preview-nft {
+    box-sizing: border-box;
+    // position: absolute;
+    // left: 26px;
+    // top: 0px;
+    // z-index: 1999;
+    // display: none;
+
+    .icon-nft-big {
+        width: 300px;
+        height: 300px;
+        object-fit: cover;
+    }
+
+    .content {
+        margin-top: 19px;
+        .nft-name {
+            margin-bottom: 6px;
+            font-weight: 500;
+            font-size: 14px;
+        }
+        .nft-desc {
+            font-weight: 400;
+            font-size: 14px;
+            color: #787878;
+            // margin-bottom: 18px;
+        }
+        .nft-date {
+            font-weight: 500;
+            font-size: 12px;
+            color: #ACACAC;
+        }
+    }
+}
+
 .tab-group-page {
     height: 100%;
     overflow-y: auto;
@@ -314,7 +366,7 @@ html, body, #app {
 
                     .icon-nft-wrapper:hover {
                         .preview-nft  {
-                            display: block;
+                            // display: block;
                         }
                     }
 
@@ -331,41 +383,6 @@ html, body, #app {
                     .screen-name {
                         color: #566370;
                     }
-
-                    .preview-nft {
-                        width: 340px;
-                        background: #FFFFFF;
-                        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
-                        border-radius: 20px;
-                        padding: 20px;
-                        box-sizing: border-box;
-                        position: absolute;
-                        left: 28px;
-                        top: 0px;
-                        z-index: 1999;
-                        display: none;
-
-                        .icon-nft-big {
-                            width: 300px;
-                            height: 300px;
-                            object-fit: cover;
-                        }
-
-                        .content {
-                            margin-top: 19px;
-                            .nft-name {
-                                margin-bottom: 6px;
-                            }
-                            .nft-desc {
-                                // margin-bottom: 18px;
-                            }
-                            .nft-date {
-                                font-weight: 500;
-                                font-size: 12px;
-                                color: #ACACAC;
-                            }
-                        }
-                    }
                 }
 
                 .post-content {