From d3d481fb538f955ebe6a880e20116f6202220a9e Mon Sep 17 00:00:00 2001
From: yuyongdong <yuyongdong@kingsome.cn>
Date: Tue, 2 Jul 2024 15:08:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=AA=E4=BA=BA=E8=B5=84?=
 =?UTF-8?q?=E4=BA=A7=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/assets/assetsContent.vue   | 10 ++++++++
 src/components/marketplace/mktContent.vue | 30 +++++++++++++++--------
 src/views/MarketplaceView.vue             | 20 ++++++++++++---
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/components/assets/assetsContent.vue b/src/components/assets/assetsContent.vue
index 66cafa3..e0665bc 100644
--- a/src/components/assets/assetsContent.vue
+++ b/src/components/assets/assetsContent.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="assets-content">
+    <div class="assets-user">
+      <div class="assets-user-img">
+        <img src="" alt="">
+      </div>
+      <div class="assets-user-name">adderss</div>
+    </div>
     <div class="assets-content-nav">
       <li :class="{ active: navIndex == index}" v-for="(item, index) in navList" :key="index" @click="navTable(index)">
         {{ item.name }}
@@ -60,6 +66,10 @@ const clearHeroAll = () => {
   position: relative;
   top: -600px;
   left: 0;
+  .assets-user {
+    .assets-user-img {}
+    .assets-user-name {}
+  }
   .assets-content-nav {
     display: flex;
     align-items: center;
diff --git a/src/components/marketplace/mktContent.vue b/src/components/marketplace/mktContent.vue
index a11b7aa..76bc229 100644
--- a/src/components/marketplace/mktContent.vue
+++ b/src/components/marketplace/mktContent.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="mkt-content">
-    <div class="content"></div>
     <div class="mkt-content-left">
       <OverView :overviewValue="marketplaceList.overview" @clickOverviewChild="overviewChild" />
       <Sort @clickSortChild="sortChild" />
@@ -61,7 +60,7 @@
           <li v-if="isClearAll" class="clear-all" @click="clearAll">Clear All</li>
         </div>
       </div>
-      <div class="mkt-content-right-content">
+      <div class="mkt-content-right-content" ref="contentScroll">
         <div class="pages" v-if="nftList != undefined && nftList.length > 0">
           <li v-for="(item, index) in nftList" :key="index">
             <Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
@@ -102,8 +101,8 @@ const marketplaceList = useMarketplaceStore()
 
 const loadingDialogVisible = ref(false)
 const nftList = ref([])
-
 const isClearAll = ref(false)
+const contentScroll = ref() 
 
 const clearOverviewAll = () => {
   marketplaceList.overview = ''
@@ -244,6 +243,9 @@ watch(() => [marketplaceList.overview,marketplaceList.sort,marketplaceList.minPr
   }
 })
 
+// 滚动条变化修改游标
+
+
 onMounted(() => {
   getHeroData()
 })
@@ -252,15 +254,21 @@ onMounted(() => {
 <style lang="scss" scoped>
 .mkt-content {
   width: 100%;
-  height: 100%;
-  position: relative;
-  top: -600px;
-  left: 0;
   display: flex;
   justify-content: space-between;
+  background: #16141b;
+  box-shadow: 0 -30px 30px #16141b;
   .mkt-content-left {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
     width: 300px;
+    height: 100vh;
     padding: 0 35px;
+    padding-top: 100px;
+    padding-bottom: 40px;
+    overflow-y: auto;
+    overflow-x: hidden;
     h2 {
       font-family: "Poppins";
       font-weight: bold;
@@ -271,11 +279,15 @@ onMounted(() => {
   }
   .mkt-content-right {
     width: calc(100% - 300px);
-    // box-sizing: border-box;
     padding-right: 40px;
+    margin-left: 40px;
     .mkt-content-right-header {
       width: calc(100% - 10px);
       height: 60px;
+    //   position: -webkit-sticky;
+    // position: sticky;
+    // top: 0;
+    // padding-top: 120px;
       display: flex;
       align-items: center;
       border-bottom: 2px solid #3a3b57;
@@ -314,12 +326,10 @@ onMounted(() => {
       margin-top: 30px;
       .pages {
         display: flex;
-        // justify-content: space-between;
         flex-wrap: wrap;
         clear: both;
         li {
           width: calc(25% - 10px);
-          // height: 360px;
           margin-right: 10px;
           margin-bottom: 10px;
           cursor: pointer;
diff --git a/src/views/MarketplaceView.vue b/src/views/MarketplaceView.vue
index 53cea41..64c605d 100644
--- a/src/views/MarketplaceView.vue
+++ b/src/views/MarketplaceView.vue
@@ -1,8 +1,11 @@
 <template>
-  <div class="market" ref="market" :style="{overflow: marketOverflow}">
-      <MktHeader />
+  <div class="market" ref="market">
+      <!-- <MktHeader /> -->
+      <div class="header"></div>
       <!-- <MktContent  @wheel="handleScroll" :style="{ position: isFixed, top: 90+ 'px', }" ref="marketplaceContent" /> -->
-      <MktContent />
+      <div class="content">
+        <MktContent />
+      </div>
   </div>
 </template>
 
@@ -45,6 +48,15 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .market {
   width: 100%;
-  // height: 100vh;
+  // background:#16141b;
+  .header {
+    height: 480px;
+    background: url('@/assets/img/marketplace/rolesbg.png') no-repeat;
+    background-size: 100% 100
+  }
+  .content {
+    // position: relative;
+    // top: -100px;
+  }
 }
 </style>