diff --git a/src/components/market/Dundialog.vue b/src/components/market/Dundialog.vue
index 50310a0..1e2e741 100644
--- a/src/components/market/Dundialog.vue
+++ b/src/components/market/Dundialog.vue
@@ -33,7 +33,7 @@
                   />
                 </div>
               </div>
-              <LeveStars :level="data.detail.gun_lv"> </LeveStars>
+              <LeveStars :quality="data.detail.gun_lv"> </LeveStars>
               <LuckyValue
                 :level="data.detail.gun_lv"
                 :lucky="data.detail.lucky"
diff --git a/src/components/market/Herodialog.vue b/src/components/market/Herodialog.vue
index 723dbcb..ad31f6f 100644
--- a/src/components/market/Herodialog.vue
+++ b/src/components/market/Herodialog.vue
@@ -62,7 +62,7 @@
                   />
                 </div>
               </div>
-              <LeveStars :level="hero.detail.quality"> </LeveStars>
+              <LeveStars :quality="hero.detail.quality"> </LeveStars>
               <LuckyValue
                 :level="hero.detail.hero_lv"
                 :lucky="hero.detail.lucky"
diff --git a/src/components/market/LeveStars.vue b/src/components/market/LeveStars.vue
index 08607ed..4de68c3 100644
--- a/src/components/market/LeveStars.vue
+++ b/src/components/market/LeveStars.vue
@@ -1,77 +1,73 @@
 <template>
   <div>
     <div class="star">
-            <div class="level-img">
-              <div
-                class="level-levelList"
-                v-if="level > 0 && level <= 5"
-              >
-                <div
-                  class="item-Image"
-                  v-for="(item, i) in levelList.firstOrder"
-                  :key="i"
-                >
-                  <div><img width="42px" :src="item.Image" alt="" /></div>
-                </div>
-              </div>
-              <div
-                class="level-levelList"
-                v-else-if="level > 5 && level <= 10"
-              >
-                <div
-                  class="item-Image"
-                  v-for="(item, i) in levelList.secondOrder"
-                  :key="i"
-                >
-                  <div><img width="42px" :src="item.Image" alt="" /></div>
-                </div>
-              </div>
-              <div class="level-levelList" v-else>
-                <div
-                  class="item-Image"
-                  v-for="(item, i) in levelList.thirdOrder"
-                  :key="i"
-                >
-                  <div><img width="42px" :src="item.Image" alt="" /></div>
-                </div>
-              </div>
-            </div>
+      <div class="quality-img">
+        <div class="quality-levelList" v-if="quality > 0 && quality <= 5">
+          <div class="item-Image" v-for="(item, i) in firstList" :key="i">
+            <div><img width="42px" :src="item.Image" alt="" /></div>
           </div>
+        </div>
+        <div class="quality-levelList" v-else-if="quality > 5 && quality <= 10">
+          <div class="item-Image" v-for="(item, i) in secondList" :key="i">
+            <div><img width="42px" :src="item.Image" alt="" /></div>
+          </div>
+        </div>
+        <div class="quality-levelList" v-else>
+          <div class="item-Image" v-for="(item, i) in thirdList" :key="i">
+            <div><img width="42px" :src="item.Image" alt="" /></div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: "LevelStar",
-  props: ["level"],
+  props: ["quality"],
+  created(){
+  console.log(this.quality,'this.level');
+  },
+  computed: {
+    firstList() {
+      console.log(this.firstOrder.splice(0, 5 - this.quality),'this.firstOrder.splice(0, 4 - this.level)');
+      return this.firstOrder.splice(0, 5 - this.quality);
+    },
+    secondList() {
+        console.log(this.secondOrder.splice(0, 4 - (this.quality -5)),'this.firstOrder.splice(0, 4 - this.level)');
+      return this.secondOrder.splice(0, 5 - (this.quality -5));
+    },
+    thirdList() {
+        console.log(this.thirdOrder.splice(0, 4 - (this.quality -10)),'this.firstOrder.splice(0, 4 - this.level)');
+      return this.thirdOrder.splice(0, 5 - (this.quality -10));
+    },
+  },
   data() {
     return {
-      levelList: {
-        firstOrder: [
-          { Image: require("@/assets/market/hero/star01.png") },
-          { Image: require("@/assets/market/hero/star01.png") },
-          { Image: require("@/assets/market/hero/star01.png") },
-          { Image: require("@/assets/market/hero/star01.png") },
-          { Image: require("@/assets/market/hero/star01.png") },
-        ],
-        secondOrder: [
-          { Image: require("@/assets/market/hero/star02.png") },
-          { Image: require("@/assets/market/hero/star02.png") },
-          { Image: require("@/assets/market/hero/star02.png") },
-          { Image: require("@/assets/market/hero/star02.png") },
-          { Image: require("@/assets/market/hero/star02.png") },
-        ],
-        thirdOrder: [
-          { Image: require("@/assets/market/hero/star03.png") },
-          { Image: require("@/assets/market/hero/star03.png") },
-          { Image: require("@/assets/market/hero/star03.png") },
-          { Image: require("@/assets/market/hero/star03.png") },
-          { Image: require("@/assets/market/hero/star03.png") },
-        ],
-      },
+      firstOrder: [
+        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star01.png") },
+      ],
+      secondOrder: [
+        { Image: require("@/assets/market/hero/star02.png") },
+        { Image: require("@/assets/market/hero/star02.png") },
+        { Image: require("@/assets/market/hero/star02.png") },
+        { Image: require("@/assets/market/hero/star02.png") },
+        { Image: require("@/assets/market/hero/star02.png") },
+      ],
+      thirdOrder: [
+        { Image: require("@/assets/market/hero/star03.png") },
+        { Image: require("@/assets/market/hero/star03.png") },
+        { Image: require("@/assets/market/hero/star03.png") },
+        { Image: require("@/assets/market/hero/star03.png") },
+        { Image: require("@/assets/market/hero/star03.png") },
+      ],
     };
   },
-  
 };
 </script>
 
@@ -85,13 +81,13 @@ export default {
   margin-left: 23px;
   margin-top: 19px;
   margin-bottom: 20px;
-  .level-img {
+  .quality-img {
     display: flex;
     height: 100%;
     justify-content: center;
     align-items: center;
   }
-  .level-levelList {
+  .quality-levelList {
     display: flex;
   }
   .item-Image {
diff --git a/src/components/market/nft/HeroNft.vue b/src/components/market/nft/HeroNft.vue
index b3a95f5..36f8449 100644
--- a/src/components/market/nft/HeroNft.vue
+++ b/src/components/market/nft/HeroNft.vue
@@ -58,40 +58,31 @@
       <div class="info">
         <div class="info-level">
           Lv: <span class="level"></span>
-          {{ fillZero(levelNumber) }}
+          <span> {{ fillZero(levelNumber) }}</span>
+          <span>{{ this.data.detail.quality }}</span>
         </div>
 
         <div class="level-img">
           <div
             class="level-levelList"
-            v-if="qualityNumber > 0 && qualityNumber <= 5"
+            v-if="this.data.detail.quality > 0 && this.data.detail.quality <= 5"
           >
-            <div
-              class="item-Image"
-              v-for="(item, i) in levelList.firstOrder"
-              :key="i"
-            >
+            <div class="item-Image" v-for="(item, i) in firstOrder" :key="i">
               <div><img width="28px" :src="item.Image" alt="" /></div>
             </div>
           </div>
           <div
             class="level-levelList"
-            v-else-if="qualityNumber > 5 && qualityNumber <= 10"
+            v-else-if="
+              this.data.detail.quality > 5 && this.data.detail.quality <= 10
+            "
           >
-            <div
-              class="item-Image"
-              v-for="(item, i) in levelList.secondOrder"
-              :key="i"
-            >
+            <div class="item-Image" v-for="(item, i) in secondOrder" :key="i">
               <div><img width="28px" :src="item.Image" alt="" /></div>
             </div>
           </div>
           <div class="level-levelList" v-else>
-            <div
-              class="item-Image"
-              v-for="(item, i) in levelList.thirdOrder"
-              :key="i"
-            >
+            <div class="item-Image" v-for="(item, i) in thirdOrder" :key="i">
               <div><img width="28px" :src="item.Image" alt="" /></div>
             </div>
           </div>
@@ -192,33 +183,39 @@ export default class HeroNft extends Vue {
   isPiecePut: boolean = false;
   isBuy: boolean = false;
   type: string = "hero";
-  created() {
-    console.log(this.data, "nftlist3sdfsadff");
-  }
+  // created() {
+  //   console.log(this.data, "nftlist3sdfsadff");
+  // }
+
+  firstOrder = [
+    { Image: require("@/assets/market/hero/star01.png") },
+    { Image: require("@/assets/market/hero/star01.png") },
+    { Image: require("@/assets/market/hero/star01.png") },
+    { Image: require("@/assets/market/hero/star01.png") },
+    { Image: require("@/assets/market/hero/star01.png") },
+  ];
+  firstOrder2 = [
+    { Image: require("@/assets/market/hero/star01.png") },
+    { Image: require("@/assets/market/hero/star01.png") },
+    { Image: require("@/assets/market/hero/star01.png") },
+    { Image: require("@/assets/market/hero/star01.png") },
+    { Image: require("@/assets/market/hero/star01.png") },
+  ];
+  secondOrder = [
+    { Image: require("@/assets/market/hero/star02.png") },
+    { Image: require("@/assets/market/hero/star02.png") },
+    { Image: require("@/assets/market/hero/star02.png") },
+    { Image: require("@/assets/market/hero/star02.png") },
+    { Image: require("@/assets/market/hero/star02.png") },
+  ];
+  thirdOrder = [
+    { Image: require("@/assets/market/hero/star03.png") },
+    { Image: require("@/assets/market/hero/star03.png") },
+    { Image: require("@/assets/market/hero/star03.png") },
+    { Image: require("@/assets/market/hero/star03.png") },
+    { Image: require("@/assets/market/hero/star03.png") },
+  ];
 
-  levelList = {
-    firstOrder: [
-      { Image: require("@/assets/market/hero/star01.png") },
-      { Image: require("@/assets/market/hero/star01.png") },
-      { Image: require("@/assets/market/hero/star01.png") },
-      { Image: require("@/assets/market/hero/star01.png") },
-      { Image: require("@/assets/market/hero/star01.png") },
-    ],
-    secondOrder: [
-      { Image: require("@/assets/market/hero/star02.png") },
-      { Image: require("@/assets/market/hero/star02.png") },
-      { Image: require("@/assets/market/hero/star02.png") },
-      { Image: require("@/assets/market/hero/star02.png") },
-      { Image: require("@/assets/market/hero/star02.png") },
-    ],
-    thirdOrder: [
-      { Image: require("@/assets/market/hero/star03.png") },
-      { Image: require("@/assets/market/hero/star03.png") },
-      { Image: require("@/assets/market/hero/star03.png") },
-      { Image: require("@/assets/market/hero/star03.png") },
-      { Image: require("@/assets/market/hero/star03.png") },
-    ],
-  };
   fillZero(str: number | string) {
     var realNum;
     if (str < 10) {
@@ -235,6 +232,53 @@ export default class HeroNft extends Vue {
   showTip(hide: boolean) {
     this.isTab = hide;
   }
+  created() {
+    // console.log(this.starList, "starList");
+    if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
+      this.firstOrder.splice(0, 5 - this.data.detail.quality);
+      //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
+    } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
+      console.log("2");
+      this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
+    } else {
+      this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
+    }
+  }
+  beforeUpdate(){
+     if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
+      this.firstOrder2.splice(0, 5 - this.data.detail.quality);
+      //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
+    } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
+      console.log("2");
+      this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
+    } else {
+      this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
+    }
+  }
+  // Update(){
+  //    if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
+  //     this.firstOrder2.splice(0, 5 - this.data.detail.quality);
+  //     //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
+  //   } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
+  //     console.log("2");
+  //     this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
+  //   } else {
+  //     this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
+  //   }
+  // }
+  // get starList() {
+  //   if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
+  //     console.log('11111111111111',this.firstOrder.splice(0, 5 - this.data.detail.quality));
+
+  //     return this.firstOrder.splice(0, 5 - this.data.detail.quality);
+  //   } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
+  //      console.log('2');
+  //     return this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
+  //   } else {
+  //     return this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
+  //   }
+  // }
+
   get levelNumber() {
     return this.data.detail.hero_lv;
   }
@@ -295,7 +339,7 @@ export default class HeroNft extends Vue {
     opacity: 0.8;
     z-index: 11;
     border-radius: 16px;
-    .for-rent-img{
+    .for-rent-img {
       margin-top: 100px;
       margin-bottom: 70px;
     }
diff --git a/src/components/market/nft/WeaponList.vue b/src/components/market/nft/WeaponList.vue
index 3eb8284..45e50c0 100644
--- a/src/components/market/nft/WeaponList.vue
+++ b/src/components/market/nft/WeaponList.vue
@@ -32,7 +32,7 @@
           >
             <div
               class="item-Image"
-              v-for="(item, i) in levelList.firstOrder"
+              v-for="(item, i) in firstOrder"
               :key="i"
             >
               <div><img width="32px" :src="item.Image" alt="" /></div>
@@ -44,7 +44,7 @@
           >
             <div
               class="item-Image"
-              v-for="(item, i) in levelList.secondOrder"
+              v-for="(item, i) in secondOrder"
               :key="i"
             >
               <div><img width="32px" :src="item.Image" alt="" /></div>
@@ -53,7 +53,7 @@
           <div class="level-levelList" v-else>
             <div
               class="item-Image"
-              v-for="(item, i) in levelList.thirdOrder"
+              v-for="(item, i) in thirdOrder"
               :key="i"
             >
               <div><img width="32px" :src="item.Image" alt="" /></div>
@@ -141,31 +141,72 @@ export default {
       type: "weapon",
       isBuy: false,
       isPiecePut: false,
-      levelList: {
-        firstOrder: [
-          { Image: require("@/assets/market/hero/star01.png") },
-          { Image: require("@/assets/market/hero/star01.png") },
-          { Image: require("@/assets/market/hero/star01.png") },
-          { Image: require("@/assets/market/hero/star01.png") },
-          { Image: require("@/assets/market/hero/star01.png") },
-        ],
-        secondOrder: [
-          { Image: require("@/assets/market/hero/star02.png") },
-          { Image: require("@/assets/market/hero/star02.png") },
-          { Image: require("@/assets/market/hero/star02.png") },
-          { Image: require("@/assets/market/hero/star02.png") },
-          { Image: require("@/assets/market/hero/star02.png") },
-        ],
-        thirdOrder: [
-          { Image: require("@/assets/market/hero/star03.png") },
-          { Image: require("@/assets/market/hero/star03.png") },
-          { Image: require("@/assets/market/hero/star03.png") },
-          { Image: require("@/assets/market/hero/star03.png") },
-          { Image: require("@/assets/market/hero/star03.png") },
-        ],
-      },
+
+      firstOrder: [
+        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star01.png") },
+      ],
+       firstOrder2: [
+        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star01.png") },
+      ],
+      secondOrder: [
+        { Image: require("@/assets/market/hero/star02.png") },
+        { Image: require("@/assets/market/hero/star02.png") },
+        { Image: require("@/assets/market/hero/star02.png") },
+        { Image: require("@/assets/market/hero/star02.png") },
+        { Image: require("@/assets/market/hero/star02.png") },
+      ],
+      thirdOrder: [
+        { Image: require("@/assets/market/hero/star03.png") },
+        { Image: require("@/assets/market/hero/star03.png") },
+        { Image: require("@/assets/market/hero/star03.png") },
+        { Image: require("@/assets/market/hero/star03.png") },
+        { Image: require("@/assets/market/hero/star03.png") },
+      ],
     };
   },
+  created() {
+    // console.log(this.starList, "starList");
+    if (this.weapon.detail.quality > 0 && this.weapon.detail.quality <= 5) {
+      console.log(
+        this.weapon.detail.quality,
+        this.firstOrder.splice(0, 5 - this.weapon.detail.quality) ,'opppppppppppppppppppppppp23233'
+      );
+      //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
+    } else if (
+      this.weapon.detail.quality > 5 &&
+      this.weapon.detail.quality <= 10
+    ) {
+      console.log("2");
+      this.secondOrder = this.secondOrder.splice(
+        0,
+        5 - (this.weapon.detail.quality - 5)
+      );
+    } else {
+      this.thirdOrder = this.thirdOrder.splice(
+        0,
+        5 - (this.weapon.detail.quality - 10)
+      );
+    }
+  },
+  beforeUpdate(){
+     if (this.weapon.detail.quality > 0 && this.weapon.detail.quality <= 5) {
+      this.firstOrder2.splice(0, 5 - this.weapon.detail.quality);
+      //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
+    } else if (this.weapon.detail.quality > 5 && this.weapon.detail.quality <= 10) {
+      console.log("2");
+      this.secondOrder.splice(0, 5 - (this.weapon.detail.quality - 5));
+    } else {
+      this.thirdOrder.splice(0, 5 - (this.weapon.detail.quality - 10));
+    }
+  },
   methods: {
     ChipDialoghide() {
       this.dialogVisible = false;
diff --git a/src/views/desktop/Market.vue b/src/views/desktop/Market.vue
index a0a2918..0dcf97b 100644
--- a/src/views/desktop/Market.vue
+++ b/src/views/desktop/Market.vue
@@ -616,13 +616,16 @@ export default class Market extends Vue {
       this.nftList = list.filter((item: any) => {
         return item.details !== null;
       });
+     
+      
       if (res) {
         const page = res;
         this.totalPage = parseInt(page.total) || 1;
         this.pageSize = page.page_size || 10;
         this.starts = page.start;
         this.currentPage = page.start / page.page_size + 1;
-      }
+      } 
+      console.log(this.nftList,'this.nftList');
     }
   }
   @Watch("isLogin")