修改个人资产滚动

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;

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;

src/views/MarketplaceView.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="market" ref="market" :style="{overflow: marketOverflow}">
+  <div class="market" ref="market">
-      <MktHeader />
+      <!-- <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>