From 227de3563f199f9593ee9d59be2e74948cdd5960 Mon Sep 17 00:00:00 2001
From: mengyxu <kekeningxiaobai@sina.com>
Date: Tue, 27 May 2025 00:02:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=A4=AA=E5=8F=A4=E8=A3=85?=
 =?UTF-8?q?=E5=A4=87=E8=9E=8D=E5=90=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/img/effect/gotcha.png                  | Bin 0 -> 1806 bytes
 src/assets/css/base-768.scss                  |  24 ++
 src/assets/css/base.scss                      |  68 ++--
 src/assets/css/index-768.scss                 | 291 ------------------
 src/components/dialog.vue                     |   2 +-
 src/components/equip-icon.vue                 |  18 --
 src/components/equip.vue                      |  19 ++
 src/config/assets.ts                          |   1 +
 src/config/equips/armor.ts                    |   4 +-
 src/config/equips/base.ts                     |   5 +-
 src/config/equips/bean.ts                     |   2 +
 src/config/equips/bracers.ts                  |   4 +-
 src/config/equips/jewelry.ts                  |   4 +-
 src/config/equips/neck.ts                     |   4 +-
 src/config/equips/pants.ts                    |   4 +-
 src/config/equips/ring.ts                     |   4 +-
 src/config/equips/shoes.ts                    |   4 +-
 src/config/equips/weapon.ts                   |   6 +-
 src/config/i18n/zh/euips.ts                   |   2 +-
 src/config/i18n/zh/index.ts                   |  12 +
 src/main.ts                                   |   1 +
 src/tool/caller/attribute.ts                  |   6 +-
 src/tool/formatter.ts                         |   7 +-
 src/views/backpack/backpack.vue               |   4 +-
 .../backpack/{ => equip-menu}/equip-menu.vue  |  39 ++-
 .../equip-menu/fusion/equip-select.vue        |  82 +++++
 .../backpack/equip-menu/fusion/equip.vue      |  52 ++++
 .../backpack/equip-menu/fusion/fusion.vue     | 128 ++++++++
 src/views/backpack/equip-menu/fusion/index.ts |   3 +
 src/views/backpack/equip-menu/index.ts        |   3 +
 .../backpack/{ => equip-menu}/inherited.vue   |  42 +--
 .../backpack/{ => equip-menu}/reforge.vue     | 107 +++----
 .../backpack/{ => equip-menu}/strengthen.vue  |  60 +---
 src/views/backpack/{ => grid}/auto-sell.vue   |   0
 src/views/backpack/{ => grid}/grid.vue        |   0
 src/views/backpack/grid/index.ts              |   3 +
 36 files changed, 472 insertions(+), 543 deletions(-)
 create mode 100644 public/img/effect/gotcha.png
 create mode 100644 src/assets/css/base-768.scss
 delete mode 100644 src/assets/css/index-768.scss
 rename src/views/backpack/{ => equip-menu}/equip-menu.vue (71%)
 create mode 100644 src/views/backpack/equip-menu/fusion/equip-select.vue
 create mode 100644 src/views/backpack/equip-menu/fusion/equip.vue
 create mode 100644 src/views/backpack/equip-menu/fusion/fusion.vue
 create mode 100644 src/views/backpack/equip-menu/fusion/index.ts
 create mode 100644 src/views/backpack/equip-menu/index.ts
 rename src/views/backpack/{ => equip-menu}/inherited.vue (87%)
 rename src/views/backpack/{ => equip-menu}/reforge.vue (78%)
 rename src/views/backpack/{ => equip-menu}/strengthen.vue (82%)
 rename src/views/backpack/{ => grid}/auto-sell.vue (100%)
 rename src/views/backpack/{ => grid}/grid.vue (100%)
 create mode 100644 src/views/backpack/grid/index.ts

diff --git a/public/img/effect/gotcha.png b/public/img/effect/gotcha.png
new file mode 100644
index 0000000000000000000000000000000000000000..dca945c0fcd929a64fe361e9e207ad4f982236b6
GIT binary patch
literal 1806
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

literal 0
HcmV?d00001

diff --git a/src/assets/css/base-768.scss b/src/assets/css/base-768.scss
new file mode 100644
index 0000000..2367f01
--- /dev/null
+++ b/src/assets/css/base-768.scss
@@ -0,0 +1,24 @@
+@media only screen and (max-width: 768px) {
+  button {
+    height: 1.8rem;
+    line-height: 1.6rem;
+    padding: 0 0.5rem;
+    margin-left: 0.2rem;
+    margin-right: 0.2rem;
+    font-size: 0.8rem;
+  }
+  //装备相关功能弹框通用样式
+  .equip-dialog {
+    width: 23rem;
+    .equip .name {
+      height: 2.5rem;
+      line-height: 2.5rem;
+      margin-left: 1rem;
+      font-size: 1rem;
+    }
+    .entry,
+    .extraEntry {
+      font-size: 1rem;
+    }
+  }
+}
diff --git a/src/assets/css/base.scss b/src/assets/css/base.scss
index 551f1bb..b81a1b9 100644
--- a/src/assets/css/base.scss
+++ b/src/assets/css/base.scss
@@ -143,10 +143,6 @@ select {
   border-radius: 4px;
 }
 
-// .unique {
-//   background: linear-gradient(125deg, #c90e0d36, #5656d647, 40%, #867d1033, #2c846f4d) !important;
-// }
-
 .shabby {
   color: #a1a1a1 !important;
 }
@@ -181,32 +177,42 @@ select {
   color: transparent !important;
 }
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: 0.3s;
-}
-
-.fade-enter,
-.fade-leave-to {
-  transform: translateX(100%);
-}
-.icon {
-  display: inline-block;
-  width: 0.25rem;
-  height: 0.25rem;
-  background-repeat: no-repeat;
-  background-size: contain;
-  padding: 2px;
-  background-position: center;
-}
-
-@media only screen and (max-width: 768px) {
-  button {
-    height: 1.8rem;
-    line-height: 1.6rem;
-    padding: 0 0.5rem;
-    margin-left: 0.2rem;
-    margin-right: 0.2rem;
-    font-size: 0.8rem;
+//装备相关功能弹框通用样式
+.equip-dialog {
+  color: #f1f1f1;
+  width: 25rem;
+  height: auto;
+  background: rgba(0, 0, 0, 0.2);
+  border: #393839;
+  border-radius: 0.4rem;
+  padding: 1rem;
+  box-sizing: border-box;
+  .coins {
+    display: flex;
+    align-items: center !important;
+    justify-content: center;
+    font-size: 1.1rem;
+    color: #2fe20f;
+  }
+  .descript {
+    font-family: 'MaShanZheng' !important;
+    display: flex;
+    align-items: center !important;
+    justify-content: center;
+    font-size: 1.6rem;
+    padding: 1.4rem 0.7rem;
+    color: #efb96e;
+  }
+  .equip {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+
+    .name {
+      height: 3.5rem;
+      line-height: 3.5rem;
+      margin-left: 1.6rem;
+      font-size: 1.2rem;
+    }
   }
 }
diff --git a/src/assets/css/index-768.scss b/src/assets/css/index-768.scss
deleted file mode 100644
index ffa3b1b..0000000
--- a/src/assets/css/index-768.scss
+++ /dev/null
@@ -1,291 +0,0 @@
-@media screen and (max-width: 768px) {
-}
-
-@media screen and (max-width: 768px) {
-  .body,
-  html,
-  #app {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-  * {
-    user-select: text !important;
-  }
-  #app {
-    -webkit-tap-highlight-color: transparent;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    .main {
-      .user-status {
-        width: calc(50% - 0.12rem);
-        height: calc(25% - 0.02rem);
-        padding: 0.05rem;
-
-        .hp {
-          padding-left: 0.08rem;
-          border: none;
-          height: 0.25rem;
-          img {
-            width: 0.35rem;
-            height: 0.35rem;
-          }
-
-          .value {
-            font-size: 0.18rem;
-          }
-        }
-        .lv {
-          padding-left: 0.08rem;
-          border: none;
-          height: 0.25rem;
-
-          img {
-            width: 0.35rem;
-            height: 0.35rem;
-          }
-
-          .value {
-            font-size: 0.18rem;
-            justify-content: space-between;
-            padding-right: 0.1rem;
-          }
-        }
-
-        .other {
-          margin-top: 0.02rem;
-          padding: 0.04rem;
-          border: 1px solid #ccc;
-          & > div {
-            padding-top: 0.02rem;
-          }
-
-          img {
-            width: 0.3rem;
-            height: 0.3rem;
-          }
-
-          .value {
-            font-size: 0.18rem;
-            margin-top: 0.04rem;
-            span {
-              font-size: 0.12rem !important;
-              transform: scale(0.8);
-              margin-top: -0.02rem;
-            }
-          }
-        }
-      }
-
-      .user-item {
-        margin-top: 0.12rem;
-        width: calc(50% - 0.12rem);
-        height: calc(25% - 0.02rem);
-        top: 25%;
-        left: 0.1rem;
-        padding: 0;
-
-        & > div {
-          height: 25%;
-          width: 100%;
-
-          .title {
-            padding: 0 0.1rem;
-            display: flex;
-            align-items: center;
-
-            .icon {
-              width: 0.4rem;
-              height: 0.4rem;
-
-              img {
-                width: 0.35rem;
-                height: 0.35rem;
-              }
-            }
-
-            .name {
-              font-size: 0.18rem;
-            }
-          }
-        }
-
-        .uii {
-          display: flex;
-          flex-direction: column;
-
-          .gold {
-            width: 100%;
-            height: 50% !important;
-            height: auto;
-            margin: 0;
-            font-size: 0.12rem;
-            padding-right: 0.12rem;
-
-            span {
-              padding: 0;
-              font-size: 0.16rem !important;
-            }
-          }
-        }
-      }
-
-      .sys-info {
-        width: calc(50% - 0.12rem);
-        height: 50%;
-        bottom: auto;
-        right: 0.1rem;
-        top: 0.1rem;
-        left: auto;
-        padding: 0.05rem;
-        font-size: 0.12rem;
-
-        .info {
-          i {
-            display: none;
-          }
-        }
-
-        .clear {
-          top: auto;
-          bottom: 0.1rem;
-          right: 0.1rem;
-          background: #000;
-          border: 1px solid #ccc;
-          border-radius: 0.06rem;
-          padding: 0.02rem 0.04rem;
-        }
-      }
-
-      .map {
-        height: calc(50% - 0.24rem);
-        right: 0.8rem;
-        left: 0.1rem;
-        top: auto;
-        bottom: 0.1rem;
-
-        .plan {
-          height: 0.6rem;
-        }
-
-        .dungeons {
-          img {
-            width: 0.35rem;
-            height: 0.35rem;
-          }
-        }
-
-        .event-icon {
-          width: 0.35rem;
-          height: 0.35rem;
-          background-size: 100%;
-
-          span {
-            font-size: 0.13rem;
-          }
-        }
-      }
-
-      .menu {
-        display: flex;
-        flex-direction: column;
-        left: auto;
-        right: 0.1rem;
-        top: 52%;
-
-        & > div {
-          margin: 0.03rem;
-
-          img {
-            width: 0.35rem;
-            height: 0.35rem;
-          }
-
-          span {
-            font-size: 0.22rem;
-          }
-        }
-      }
-    }
-
-    .dialog-backpackPanel {
-      transform: translate(-50%, -50%) scale(0.8);
-    }
-
-    .dialog {
-      top: 50% !important;
-      left: 50% !important;
-      transform: translate(-50%, -50%);
-
-      .item-close {
-        display: block;
-      }
-
-      .weapon,
-      .armor,
-      .ring,
-      .neck {
-        & > div {
-          width: 2.2rem;
-          font-size: 0.13rem;
-
-          .icon {
-            width: 0.45rem;
-            height: 0.45rem;
-
-            img {
-              width: 0.4rem;
-              height: 0.4rem;
-            }
-          }
-        }
-
-        padding: 0.06rem;
-      }
-    }
-  }
-
-  .drawer-update {
-    width: 100% !important;
-  }
-  .qa {
-    left: 1.5rem;
-    width: 0.45rem;
-    height: 0.5rem;
-    span {
-      font-size: 0.12rem !important;
-    }
-    img {
-      width: 0.25rem;
-      height: 0.25rem;
-    }
-  }
-  .extras {
-    left: 0.8rem;
-    width: 0.45rem;
-    height: 0.5rem;
-    span {
-      font-size: 0.12rem !important;
-    }
-    img {
-      width: 0.25rem;
-      height: 0.25rem;
-    }
-  }
-  .setting {
-    left: 0.1rem;
-    width: 0.45rem;
-    height: 0.5rem;
-    span {
-      font-size: 0.12rem !important;
-    }
-    img {
-      width: 0.25rem;
-      height: 0.25rem;
-    }
-  }
-}
diff --git a/src/components/dialog.vue b/src/components/dialog.vue
index d6a3bd4..45e24b7 100644
--- a/src/components/dialog.vue
+++ b/src/components/dialog.vue
@@ -170,7 +170,7 @@ onBeforeUnmount(() => {
     width: 100%;
     color: white;
     border-bottom: 1px solid #fff;
-
+    cursor: pointer;
 }
 
 .close {
diff --git a/src/components/equip-icon.vue b/src/components/equip-icon.vue
index 7866a3f..370210f 100644
--- a/src/components/equip-icon.vue
+++ b/src/components/equip-icon.vue
@@ -24,17 +24,6 @@ const src = computed(() => {
     const quality = prop.equip.quality;
     const key = quality.extraQuality || quality.quality;
     return equip_effect_gif[key];
-    if (quality.extraQuality) {
-        return taigu_gif;
-    }
-    switch (quality.quality) {
-        case qualitys[4]:
-            return red_gif;
-        case qualitys[5]:
-            return colorful_gif;
-        default:
-            return null;
-    }
 })
 
 const prop = defineProps({
@@ -44,13 +33,6 @@ const prop = defineProps({
     }
 })
 
-const iconClass = computed(() => {
-    if (prop.equip && prop.equip.isUnique()) {
-        return
-    }
-    return "";
-})
-
 onMounted(() => { });
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/equip.vue b/src/components/equip.vue
index 9aa574b..2790e69 100644
--- a/src/components/equip.vue
+++ b/src/components/equip.vue
@@ -6,6 +6,7 @@
                 {{ t(equip.type + '.' + equip.base.name + '.0') }}
                 {{ equip.strengthenLv ? '(+' + equip.strengthenLv + ')' : '' }}
             </div>
+            <img v-for="i in equip.fusion" :key="i" class="gotcha" :src="equip_effect_gif.gotcha">
         </div>
         <div class='type'>
             <div :class="equip.quality.quality">
@@ -44,6 +45,9 @@
                 <div class="des">{{ t('reRoll.1') }}</div>
             </div>
         </div>
+        <div v-if="equip.fusionEntry" class="extraEntry fusionEntry">
+            {{ t(equip.fusionEntry.type + '.0') }} : {{ equip.fusionEntry.showVal }}({{ equip.fusionEntry.percent }}%)
+        </div>
         <div class="des">
             <div>
                 {{ t(equip.type + '.' + equip.base.name + '.1') }}
@@ -58,6 +62,7 @@ import { reactive, onMounted, ref, computed } from "vue";
 import { useI18n } from "vue3-i18n";
 import EquipIcon from "./equip-icon.vue";
 import { strengthenValue, createEquipSkill } from "@/tool"
+import { equip_effect_gif } from "@/config";
 
 const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
@@ -125,6 +130,11 @@ onMounted(() => { });
             line-height: 3.5rem;
             margin-left: 1.2rem;
         }
+
+        .gotcha {
+            margin-top: 1.15rem;
+            height: 1.2rem;
+        }
     }
 
     .type {
@@ -179,6 +189,10 @@ onMounted(() => { });
             text-align: left;
         }
     }
+
+    .fusionEntry {
+        color: #ffaa11;
+    }
 }
 
 .des {
@@ -201,6 +215,11 @@ onMounted(() => { });
                 line-height: 2.5rem;
                 margin-left: 0;
             }
+
+            .gotcha {
+                margin-top: 0.75rem;
+                height: 1rem;
+            }
         }
 
         .type {
diff --git a/src/config/assets.ts b/src/config/assets.ts
index befdc8e..246431a 100644
--- a/src/config/assets.ts
+++ b/src/config/assets.ts
@@ -50,6 +50,7 @@ export const equip_effect_gif = {
   colorful: root + '/img/effect/colorful.gif',
   yuangu: root + '/img/effect/yuangu.gif',
   taigu: root + '/img/effect/taigu.gif',
+  gotcha: root + '/img/effect/gotcha.png',
 };
 export const red_gif = root + '/img/red.gif';
 export const colorful_gif = root + '/img/colorful.gif';
diff --git a/src/config/equips/armor.ts b/src/config/equips/armor.ts
index 73f1036..2613d84 100644
--- a/src/config/equips/armor.ts
+++ b/src/config/equips/armor.ts
@@ -142,8 +142,8 @@ export const createarmor = (quality, lv, category, extraQuality) => {
   return new Equip(type, lv, qualityBean, base, extraEntry);
 };
 
-export const armorExtraEntry = (quality, lv, extraQuality) => {
-  return createExtraEntry(quality, lv, armorExtraEntrys, coefficient, extraQuality);
+export const armorExtraEntry = (quality, lv, extraQuality, type?) => {
+  return createExtraEntry(coefficient[quality], lv, type ? [type] : armorExtraEntrys, extraQuality);
 };
 
 export const armorSamples = createSamples(armorCategorys, armorUniqueCategorys, armorColorfulCategorys, 'armor', coefficient);
diff --git a/src/config/equips/base.ts b/src/config/equips/base.ts
index 7442ca0..61e05be 100644
--- a/src/config/equips/base.ts
+++ b/src/config/equips/base.ts
@@ -11,11 +11,10 @@ export const createBase = (quality, lv, category, coefficient, extraQuality) =>
   return new EquipBase(category.name, category.icon, entry, category.skill);
 };
 
-export const createExtraEntry = (quality, lv, extraEntrys, coefficient, extraQuality) => {
+export const createExtraEntry = (coefficient, lv, extraEntrys, extraQuality) => {
   const type = extraEntrys[Math.floor(Math.random() * extraEntrys.length)];
   const initor: EntryInitor = entry_initor[type];
-  const qualityCoefficient = coefficient[quality];
-  return initor.init(lv, qualityCoefficient, 1, extraQuality);
+  return initor.init(lv, coefficient, 1, extraQuality);
 };
 
 export const createSamples = (categorys: Categorys[], uniqueCategorys: Categorys[], colorfulCategorys: Categorys[], type, coefficient) => {
diff --git a/src/config/equips/bean.ts b/src/config/equips/bean.ts
index 4171310..85fde13 100644
--- a/src/config/equips/bean.ts
+++ b/src/config/equips/bean.ts
@@ -54,6 +54,8 @@ export class Equip {
   base: EquipBase;
   extraEntry: Entry[];
   reRoll?: number;
+  fusion:number = 0;
+  fusionEntry?:Entry;
   constructor(type: string, lv, quality: Quality, base: EquipBase, extraEntry: Entry[]) {
     this.type = type;
     this.lv = lv;
diff --git a/src/config/equips/bracers.ts b/src/config/equips/bracers.ts
index ff7c4f8..a6867d4 100644
--- a/src/config/equips/bracers.ts
+++ b/src/config/equips/bracers.ts
@@ -130,8 +130,8 @@ export const createbracers = (quality, lv, category, extraQuality): Equip => {
   return new Equip(type, lv, qualityBean, base, extraEntry);
 };
 
-export const bracersExtraEntry = (quality, lv, extraQuality) => {
-  return createExtraEntry(quality, lv, bracersExtraEntrys, coefficient, extraQuality);
+export const bracersExtraEntry = (quality, lv, extraQuality, type?) => {
+  return createExtraEntry(coefficient[quality], lv, type ? [type] : bracersExtraEntrys, extraQuality);
 };
 
 export const bracersSamples = createSamples(bracersCategorys, bracersUniqueCategorys, bracersColorfulCategorys, 'bracers', coefficient);
diff --git a/src/config/equips/jewelry.ts b/src/config/equips/jewelry.ts
index e66be31..a96ebb4 100644
--- a/src/config/equips/jewelry.ts
+++ b/src/config/equips/jewelry.ts
@@ -143,8 +143,8 @@ export const createjewelry = (quality, lv, category, extraQuality): Equip => {
   return new Equip(type, lv, qualityBean, base, extraEntry);
 };
 
-export const jewelryExtraEntry = (quality, lv, extraQuality) => {
-  return createExtraEntry(quality, lv, jewelryExtraEntrys, coefficient, extraQuality);
+export const jewelryExtraEntry = (quality, lv, extraQuality, type?) => {
+  return createExtraEntry(coefficient[quality], lv, type ? [type] : jewelryExtraEntrys, extraQuality);
 };
 
 export const jewelrySamples = createSamples(jewelryCategorys, jewelryUniqueCategorys, jewelryColorfulCategorys, 'jewelry', coefficient);
diff --git a/src/config/equips/neck.ts b/src/config/equips/neck.ts
index 097bf1c..67557c8 100644
--- a/src/config/equips/neck.ts
+++ b/src/config/equips/neck.ts
@@ -127,8 +127,8 @@ export const createneck = (quality, lv, category, extraQuality) => {
   return new Equip(type, lv, qualityBean, base, extraEntry);
 };
 
-export const neckExtraEntry = (quality, lv, extraQuality) => {
-  return createExtraEntry(quality, lv, neckExtraEntrys, coefficient, extraQuality);
+export const neckExtraEntry = (quality, lv, extraQuality, type?) => {
+  return createExtraEntry(coefficient[quality], lv, type ? [type] : neckExtraEntrys, extraQuality);
 };
 
 export const neckSamples = createSamples(neckCategorys, neckUniqueCategorys, neckColorfulCategorys, 'neck', coefficient);
diff --git a/src/config/equips/pants.ts b/src/config/equips/pants.ts
index 7d2516f..99fec44 100644
--- a/src/config/equips/pants.ts
+++ b/src/config/equips/pants.ts
@@ -124,8 +124,8 @@ export const createpants = (quality, lv, category, extraQuality) => {
   return new Equip(type, lv, qualityBean, base, extraEntry);
 };
 
-export const pantsExtraEntry = (quality, lv, extraQuality) => {
-  return createExtraEntry(quality, lv, pantsExtraEntrys, coefficient, extraQuality);
+export const pantsExtraEntry = (quality, lv, extraQuality, type?) => {
+  return createExtraEntry(coefficient[quality], lv, type ? [type] : pantsExtraEntrys, extraQuality);
 };
 
 export const pantsSamples = createSamples(pantsCategorys, pantsUniqueCategorys, pantsColorfulCategorys, 'pants', coefficient);
diff --git a/src/config/equips/ring.ts b/src/config/equips/ring.ts
index ac84d98..5a0f30f 100644
--- a/src/config/equips/ring.ts
+++ b/src/config/equips/ring.ts
@@ -133,8 +133,8 @@ export const createring = (quality, lv, category, extraQuality) => {
   return new Equip(type, lv, qualityBean, base, extraEntry);
 };
 
-export const ringExtraEntry = (quality, lv, extraQuality) => {
-  return createExtraEntry(quality, lv, ringExtraEntrys, coefficient, extraQuality);
+export const ringExtraEntry = (quality, lv, extraQuality, type?) => {
+  return createExtraEntry(coefficient[quality], lv, type ? [type] : ringExtraEntrys, extraQuality);
 };
 
 export const ringSamples = createSamples(ringCategorys, ringUniqueCategorys, ringColorfulCategorys, 'ring', coefficient);
diff --git a/src/config/equips/shoes.ts b/src/config/equips/shoes.ts
index 7ba2576..4771eb8 100644
--- a/src/config/equips/shoes.ts
+++ b/src/config/equips/shoes.ts
@@ -89,8 +89,8 @@ export const createshoes = (quality, lv, category, extraQuality) => {
   return new Equip(type, lv, qualityBean, base, extraEntry);
 };
 
-export const shoesExtraEntry = (quality, lv, extraQuality) => {
-  return createExtraEntry(quality, lv, shoesExtraEntrys, coefficient, extraQuality);
+export const shoesExtraEntry = (quality, lv, extraQuality, type?) => {
+  return createExtraEntry(coefficient[quality], lv, type ? [type] : shoesExtraEntrys, extraQuality);
 };
 
 export const shoesSamples = createSamples(shoesCategorys, shoesUniqueCategorys, shoesColorfulCategorys, 'shoes', coefficient);
diff --git a/src/config/equips/weapon.ts b/src/config/equips/weapon.ts
index b3c08d6..78df9cc 100644
--- a/src/config/equips/weapon.ts
+++ b/src/config/equips/weapon.ts
@@ -138,7 +138,7 @@ export const weaponColorfulCategorys: Categorys[] = [
       { type: 'critDmg', valCoefficient: 1.3 },
     ],
     'HunYuan,LieYinHe',
-    0.90
+    0.9
   ),
   new WeaponCategory(
     'chulian',
@@ -242,8 +242,8 @@ export const createweapon = (quality, lv, category, extraQuality) => {
   return new Equip(type, lv, qualityBean, base, extraEntry);
 };
 
-export const weaponExtraEntry = (quality, lv, extraQuality) => {
-  return createExtraEntry(quality, lv, weaponExtraEntrys, coefficient, extraQuality);
+export const weaponExtraEntry = (quality, lv, extraQuality, type?) => {
+  return createExtraEntry(coefficient[quality], lv, type ? [type] : weaponExtraEntrys, extraQuality);
 };
 
 export const weaponSamples = createSamples(weaponCategorys, weaponUniqueCategorys, weaponColorfulCategorys, 'weapon', coefficient);
diff --git a/src/config/i18n/zh/euips.ts b/src/config/i18n/zh/euips.ts
index 1e8cb07..54085ec 100644
--- a/src/config/i18n/zh/euips.ts
+++ b/src/config/i18n/zh/euips.ts
@@ -166,7 +166,7 @@ export const jewelry = {
   shuzhuang: ['梳妆镜', '都上来，一个个仔细看打!    ----琵琶精'],
   liulipan: ['琉璃盘', '盘底书:凌虚子制。'],
   ghdp: ['勾魂夺魂', '神鬼游舍，摄魂夺魄。'],
-  youerhuan: ['白骨夫人的右耳环', '你一定以为还有左耳环，这个真没有。    ----白骨夫人'],
+  youerhuan: ['右耳环', '你一定以为还有左耳环，这个真没有。    ----白骨夫人'],
   jingboyu: ['金钵盂', '大众休言，妖精未走，见在我这钵盂之下。    ----如来'],
   zijingboyu: ['紫金钵盂', '金饭碗'],
   hanjing: ['寒晶佩', '蜡烛红的珊瑚枝，其色芬然如火。'],
diff --git a/src/config/i18n/zh/index.ts b/src/config/i18n/zh/index.ts
index b667149..a46fa90 100644
--- a/src/config/i18n/zh/index.ts
+++ b/src/config/i18n/zh/index.ts
@@ -86,6 +86,18 @@ export default class Zh {
     action: ['点击花费${0}金币重铸', '恢复原词条', '保留新词条'],
     atuo: ['重铸目标', '自动重铸', '自动重铸中', '中断自动重铸'],
   };
+  fusion = {
+    title: '融合',
+    need: '花费金币',
+    desc: [
+      '融合说明',
+      '消耗同名太古装备可进行装备融合',
+      '未融合的太古作为材料可以添加或重置一星融合属性',
+      '一星或二星太古做材料可以给同星且融合属性类型相同的太古升星',
+    ],
+    confirm: ['融合后作为材料的装备将会消失，确认要融合吗？', '确定', '算了'],
+    empty: '无融合属性',
+  };
   lock = '锁定';
   unlock = '解锁';
   sell = '出售';
diff --git a/src/main.ts b/src/main.ts
index 1504a2b..6a6ee4f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import App from './App.vue';
 import { router, i18n } from './config';
 import store from './store';
 import './assets/css/base.scss';
+import './assets/css/base-768.scss';
 
 const app = createApp(App);
 
diff --git a/src/tool/caller/attribute.ts b/src/tool/caller/attribute.ts
index 7863f4c..5362d06 100644
--- a/src/tool/caller/attribute.ts
+++ b/src/tool/caller/attribute.ts
@@ -15,8 +15,10 @@ export const callPlayerAttribute = (player: Player, base: any) => {
   const attribute: Attribute = new Attribute(base);
   const entry = new Array();
   equips.forEach((equip) => {
-    equip && Array.prototype.push.apply(entry, equip.extraEntry);
-    equip && Array.prototype.push.apply(entry, strengthenEntry(equip));
+    if (!equip) return;
+    Array.prototype.push.apply(entry, equip.extraEntry);
+    Array.prototype.push.apply(entry, strengthenEntry(equip));
+    equip.fusionEntry && entry.push(equip.fusionEntry);
   });
 
   entry.forEach((item) => {
diff --git a/src/tool/formatter.ts b/src/tool/formatter.ts
index 791be89..4018996 100644
--- a/src/tool/formatter.ts
+++ b/src/tool/formatter.ts
@@ -1,8 +1,11 @@
 export const formartNum = (num) => {
-  if (num > 100000000) {
+  if (num >= 100000000000) {
+    return (num / 1000000000).toFixed(1) + 'b';
+  }
+  if (num >= 100000000) {
     return (num / 1000000).toFixed(1) + 'm';
   }
-  if (num > 100000) {
+  if (num >= 100000) {
     return (num / 1000).toFixed(1) + 'k';
   }
   return num;
diff --git a/src/views/backpack/backpack.vue b/src/views/backpack/backpack.vue
index 2c78106..cb84428 100644
--- a/src/views/backpack/backpack.vue
+++ b/src/views/backpack/backpack.vue
@@ -18,9 +18,9 @@ import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { useI18n } from "vue3-i18n";
 import { Tooltip, Dialog } from "@/components"
 import { menu_icons } from "@/config";
-import Grid from './grid.vue';
-import EquipMenu from './equip-menu.vue';
 import Player from './player.vue';
+import Grid from './grid';
+import EquipMenu from './equip-menu';
 
 
 const { t } = useI18n();
diff --git a/src/views/backpack/equip-menu.vue b/src/views/backpack/equip-menu/equip-menu.vue
similarity index 71%
rename from src/views/backpack/equip-menu.vue
rename to src/views/backpack/equip-menu/equip-menu.vue
index 3d9e3a3..4b472bb 100644
--- a/src/views/backpack/equip-menu.vue
+++ b/src/views/backpack/equip-menu/equip-menu.vue
@@ -1,13 +1,6 @@
 <template>
     <Dialog :show-header="false" v-model="show" :left="left" :top="top" padding="0" :z="10">
-        <PopoverMenu :items="[
-            { label: t('use'), onClick: useEquip },
-            { label: t('strengthen'), onClick: strengthenEquip },
-            { label: t('reforge.title'), onClick: reforgeEquip },
-            { label: t('inherited.0'), onClick: inheritedEquip },
-            { label: state.grid[index]?.locked ? t('unlock') : t('lock'), onClick: lockEquip },
-            { label: t('sell'), onClick: sellEquip },
-        ]" />
+        <PopoverMenu :items="items" />
     </Dialog>
 
     <Dialog :title="t('strengthen') + t('equip')" v-model="showStrengthen" top="5rem" left="2rem" padding="0" :z="11"
@@ -20,6 +13,11 @@
         <Reforge ref="reforge" :equip="state.grid[index]" />
     </Dialog>
 
+    <Dialog :title="t('fusion.title') + t('equip')" v-model="showFusion" top="5rem" left="2rem" padding="0" :z="11"
+        :obscured="true">
+        <Fusion :equip="state.grid[index]" />
+    </Dialog>
+
     <Dialog :title="t('equip') + t('inherited.0')" v-model="showInherited" :top="state.mobile ? '5rem' : '10rem'"
         left="2rem" padding="0" :z="11" :obscured="true">
         <Inherited :target="equip" :source="curEquip" />
@@ -36,12 +34,30 @@ import Strengthen from "./strengthen.vue";
 import { usePopoverMenu } from "@/tool";
 import Inherited from "./inherited.vue";
 import Reforge from "./reforge.vue";
-
+import Fusion from "./fusion";
+import { extra_quality } from "@/config";
 
 const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
+const items = computed(() => {
+    const items = [
+        { label: t('use'), onClick: useEquip },
+        { label: t('strengthen'), onClick: strengthenEquip },
+        { label: t('reforge.title'), onClick: reforgeEquip },
+        { label: t('inherited.0'), onClick: inheritedEquip },
+        { label: state.grid[index.value]?.locked ? t('unlock') : t('lock'), onClick: lockEquip },
+        { label: t('sell'), onClick: sellEquip },
+    ];
+    const e = equip.value;
+    if (e && e.quality.extraQuality == extra_quality[1]) {
+        e.fusion || (e.fusion = 0);
+        e.fusion < 3 && items.splice(4, 0, { label: t('fusion.title'), onClick: fusionEquip })
+    }
+    return items;
+});
 const showStrengthen = ref(false);
 const showReforge = ref(false);
+const showFusion = ref(false);
 const showInherited = ref(false);
 const { show, top, left, index, open, close } = usePopoverMenu();
 const emit = defineEmits(['closePack'])
@@ -73,6 +89,11 @@ const reforgeEquip = () => {
     showReforge.value = true;
     close();
 }
+const fusionEquip = () => {
+    emit('closePack');
+    showFusion.value = true;
+    close();
+}
 const lockEquip = () => {
     state.grid[index.value].locked = !state.grid[index.value].locked;
     close();
diff --git a/src/views/backpack/equip-menu/fusion/equip-select.vue b/src/views/backpack/equip-menu/fusion/equip-select.vue
new file mode 100644
index 0000000..086e48a
--- /dev/null
+++ b/src/views/backpack/equip-menu/fusion/equip-select.vue
@@ -0,0 +1,82 @@
+<template>
+    <div class="equip-select">
+        <Equip v-if="equip" :equip="equip" @click="showSlect = true" />
+        <span v-if="!equip" class="icon" @click="showSlect = true">
+            <span> + </span>
+        </span>
+        <div v-if="showSlect" class="select">
+            <div class="option" v-for="item in equips" @click="choseEquip(item)">
+                <EquipIcon :equip="item" @mouseleave="commit('close_equip_tip')"
+                    @mouseover="commit('show_equip_tip', { equip: item, compare: false, e: $event })" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue3-i18n";
+import Equip from "./equip.vue";
+import { EquipIcon } from "@/components";
+
+const { t } = useI18n();
+const { state, commit, dispatch } = useStore();
+const equip = ref<Object>();
+const showSlect = ref(false);
+const emit = defineEmits(['update:modelValue'])
+const prop = defineProps({
+    modelValue: {
+        type: Object,
+        default: null
+    },
+    equips: {
+        type: Array as () => Object[],
+        default: []
+    }
+});
+watch(equip, (n, o) => {
+    emit('update:modelValue', n);
+    if (!n) {
+        commit('close_equip_tip');
+    }
+})
+watch(() => prop.modelValue, (n, o) => {
+    equip.value = n;
+})
+
+const choseEquip = item => {
+    equip.value = item;
+    showSlect.value = false;
+    commit('close_equip_tip');
+}
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+.equip-select {
+    cursor: pointer;
+    position: relative;
+
+    .select {
+        position: absolute;
+        top: 3.5rem;
+        left: 0;
+        width: 5rem;
+        height: 15rem;
+        z-index: 99;
+    }
+}
+
+.icon {
+    width: 3.5rem;
+    height: 3.5rem;
+    background: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.3rem;
+    box-shadow: inset 0 0 7px 2px #a1a1a1b8;
+    font-size: 2rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/backpack/equip-menu/fusion/equip.vue b/src/views/backpack/equip-menu/fusion/equip.vue
new file mode 100644
index 0000000..ab7fed9
--- /dev/null
+++ b/src/views/backpack/equip-menu/fusion/equip.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="fusion-equip">
+        <EquipIcon :equip="equip" @mouseleave="commit('close_equip_tip')" @click="emit('click')"
+            @mouseover="commit('show_equip_tip', { equip: equip, compare: false, e: $event })">
+        </EquipIcon>
+        <div class="entry">
+            <span v-if="entry">{{ t(entry.type + '.0') }} : {{ entry.showVal }}({{ entry.percent }}%)</span>
+            <span v-if="!entry">{{ ft('empty') }}</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref, computed } from "vue";
+import { useI18n } from "vue3-i18n";
+import { createt } from "@/config/i18n";
+import { EquipIcon } from "@/components";
+
+const { t } = useI18n();
+const ft = createt('fusion.');
+const { state, commit, dispatch } = useStore();
+const emit = defineEmits(['click'])
+const entry = computed(() => {
+    if (prop.equip) {
+        return prop.equip.fusionEntry;
+    }
+    return null;
+})
+
+const prop = defineProps({
+    equip: {
+        type: Object,
+        default: null
+    }
+});
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+.fusion-equip {
+    display: flex;
+}
+
+.entry {
+    padding-left: 1rem;
+    font-size: 1.2rem;
+    line-height: 3.5rem;
+    text-align: left;
+    color: white;
+}
+</style>
diff --git a/src/views/backpack/equip-menu/fusion/fusion.vue b/src/views/backpack/equip-menu/fusion/fusion.vue
new file mode 100644
index 0000000..fb3ff10
--- /dev/null
+++ b/src/views/backpack/equip-menu/fusion/fusion.vue
@@ -0,0 +1,128 @@
+<template>
+    <div class="equip-dialog" v-if="equip">
+        <div class="coins">
+            {{ t('coins.0') }}:{{ userCoins }}
+        </div>
+        <Tooltip :infos="[ft('desc.1'), ft('desc.2'), ft('desc.3')]" width="8rem">
+            <div class="descript">- {{ ft('desc.0') }} -</div>
+        </Tooltip>
+        <Equip :equip="equip" />
+        <EquipSelect v-model="material" :equips="materials" />
+        <div class='btn-div'>
+            <button class="button" @click="confirm.open(0, $event)" :disabled="!material">
+                {{ ft('need') }}{{ needCoins }} {{ ft('title') }}
+            </button>
+        </div>
+    </div>
+    <Confirm ref="confirm" width="8rem" :tip="ft('confirm.0')" :confirm="ft('confirm.1')" :cancel="ft('confirm.2')"
+        @confirm="confirmFusion" />
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref, computed, watch } from "vue";
+import { useI18n } from "vue3-i18n";
+import { createt } from "@/config/i18n";
+import { Tooltip, Confirm } from "@/components";
+import Equip from "./equip.vue";
+import EquipSelect from "./equip-select.vue";
+import * as config from "@/config";
+
+
+const { t } = useI18n();
+const ft = createt('fusion.');
+const { state, commit, dispatch } = useStore();
+const userCoins = computed(() => {
+    return state.playerAttribute.coins;
+})
+const material = ref();
+const materials = ref<any>([])
+const confirm = ref();
+const rase = computed(() => {
+    if (!prop.equip || !material.value) {
+        return false;
+    }
+    const f1 = prop.equip.fusion;
+    const f2 = material.value.fusion;
+    const e1 = prop.equip.fusionEntry;
+    const e2 = material.value.fusionEntry;
+    if (f1 == 0 || !e1) {
+        return true;
+    }
+    if (f2 == 0 || !e2) {
+        return false;
+    }
+    return f1 == f2 && e1.type == e2.type;
+});
+
+const level = computed(() => {
+    let fusion = prop.equip.fusion;
+    return rase.value ? fusion + 1 : fusion;
+})
+const needCoins = computed(() => {
+    return (level.value + 1) * 100000000;
+})
+
+const prop = defineProps({
+    equip: {
+        type: Object,
+        default: null
+    }
+});
+
+const setMaterils = () => {
+    if (level.value >= 3) {
+        materials.value = [];
+        return;
+    }
+    materials.value = state.grid.filter(equip => {
+        if (!equip) return false;
+        if (equip.base.name != prop.equip.base.name) return false;
+        if (equip == prop.equip) return false;
+        if (prop.equip.fusion > 1 && (equip.fusion <= 1 || equip.fusionEntry.type != prop.equip.fusionEntry.type)) return false;
+        return true;
+    });
+}
+
+watch(() => prop.equip, (n) => {
+    if (n) {
+        setMaterils();
+        material.value = null;
+    }
+})
+
+const confirmFusion = () => {
+    if (userCoins.value < needCoins.value) {
+        commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", });
+        return
+    }
+    const equip = prop.equip;
+    const creator = config[equip.type + 'ExtraEntry'];
+    const fusion = level.value;
+    const extraQuality = config.extra_quality[fusion - 2];
+    let lv = 100;
+    extraQuality && (lv += config.extra_quality_lv);
+    const type = fusion > 1 && rase.value ? equip.fusionEntry.type : null;
+    const entry = creator(config.qualitys[5], lv, extraQuality, type);
+    commit("add_player_coins", -1 * needCoins.value);
+    for (let i = 0; i < state.grid.length; i++) {
+        const tmp = state.grid[i];
+        if (tmp == material.value) {
+            state.grid[i] = null;
+        }
+    }
+    material.value = null;
+    equip.fusion = fusion;
+    equip.fusionEntry = entry;
+    dispatch('saveGame');
+    setMaterils();
+}
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+.btn-div {
+    width: 100%;
+    padding: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/backpack/equip-menu/fusion/index.ts b/src/views/backpack/equip-menu/fusion/index.ts
new file mode 100644
index 0000000..18d3cfd
--- /dev/null
+++ b/src/views/backpack/equip-menu/fusion/index.ts
@@ -0,0 +1,3 @@
+import Fusion from "./fusion.vue";
+
+export default Fusion;
\ No newline at end of file
diff --git a/src/views/backpack/equip-menu/index.ts b/src/views/backpack/equip-menu/index.ts
new file mode 100644
index 0000000..6595611
--- /dev/null
+++ b/src/views/backpack/equip-menu/index.ts
@@ -0,0 +1,3 @@
+import EquipMenu from './equip-menu.vue';
+
+export default EquipMenu;
diff --git a/src/views/backpack/inherited.vue b/src/views/backpack/equip-menu/inherited.vue
similarity index 87%
rename from src/views/backpack/inherited.vue
rename to src/views/backpack/equip-menu/inherited.vue
index 46c0888..e0ed45f 100644
--- a/src/views/backpack/inherited.vue
+++ b/src/views/backpack/equip-menu/inherited.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="inherited" v-if="target && source">
+    <div class="equip-dialog" v-if="target && source">
         <div class="coins">
             {{ t('coins.0') }}:{{ userCoins }}
         </div>
@@ -123,17 +123,6 @@ const confirmInherited = () => {
 onMounted(() => { });
 </script>
 <style lang="scss" scoped>
-.inherited {
-    color: #f1f1f1;
-    width: 25rem;
-    height: auto;
-    background: rgba(0, 0, 0, 0.2);
-    border: #393839;
-    border-radius: 0.4rem;
-    padding: 0 1rem;
-    box-sizing: border-box;
-}
-
 .coins {
     display: flex;
     align-items: center !important;
@@ -170,19 +159,6 @@ onMounted(() => { });
     }
 }
 
-.equip {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-    margin-top: 1rem;
-
-    .name {
-        height: 3.5rem;
-        line-height: 3.5rem;
-        margin-left: 1.6rem;
-        font-size: 1.2rem;
-    }
-}
 
 .entry {
     width: 100%;
@@ -211,20 +187,4 @@ onMounted(() => { });
     }
 }
 
-@media only screen and (max-width: 768px) {
-    .inherited {
-        width: 23rem;
-    }
-
-    .equip .name {
-        height: 2.5rem;
-        line-height: 2.5rem;
-        margin-left: 1rem;
-        font-size: 1rem;
-    }
-
-    .entry {
-        font-size: 1rem;
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/backpack/reforge.vue b/src/views/backpack/equip-menu/reforge.vue
similarity index 78%
rename from src/views/backpack/reforge.vue
rename to src/views/backpack/equip-menu/reforge.vue
index 5513557..042a319 100644
--- a/src/views/backpack/reforge.vue
+++ b/src/views/backpack/equip-menu/reforge.vue
@@ -1,8 +1,15 @@
 <template>
-    <div class="reforge" v-if="equip">
+    <div class="equip-dialog" v-if="equip">
         <Tooltip :infos="[rt('desc.1'), rt('desc.2'), rt('desc.3'), rt('desc.4')]" width="8rem">
             <div class="descript">- {{ rt('desc.0') }} -</div>
         </Tooltip>
+        <div class="equip">
+            <EquipIcon :equip="equip" />
+            <div class='name' :class="equip.quality.quality">
+                {{ t(equip.type + '.' + equip.base.name + '.0') }}
+                {{ equip.strengthenLv ? '(+' + equip.strengthenLv + ')' : '' }}
+            </div>
+        </div>
         <div @mouseover="reforgeFlag = true" @mouseleave="reforgeFlag = false; reforgeing = false;" @click="reforge">
             <div class="extraEntry" v-if="!reforgeFlag || reforgeing">
                 <div v-if="tempEntry" class="extraEntry-item" v-for="(v, k) in tempEntry" :key="k">
@@ -50,7 +57,7 @@
 <script lang="ts" setup>
 import { useStore } from "vuex";
 import { reactive, onMounted, ref, computed, watch } from "vue";
-import { Tooltip } from "@/components"
+import { Tooltip, EquipIcon } from "@/components"
 import { createt } from "@/config/i18n";
 import { Entry, extra_entry_num } from "@/config";
 import * as config from "@/config";
@@ -161,82 +168,50 @@ const stopAuto = () => {
 onMounted(() => { });
 </script>
 <style lang="scss" scoped>
-.reforge {
-    color: #f1f1f1;
-    width: 25rem;
-    height: auto;
-    background: rgba(0, 0, 0, 0.2);
-    border: #393839;
-    border-radius: 0.4rem;
-    padding: 1rem;
-    box-sizing: border-box;
-
-    .descript {
-        font-family: 'MaShanZheng' !important;
-        display: flex;
-        align-items: center !important;
-        justify-content: center;
-        font-size: 1.6rem;
-        padding: 1.4rem 0.7rem;
-        color: #efb96e;
-    }
-
-    .extraEntry {
+.extraEntry {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    padding-left: 1.2rem;
+    padding-bottom: 0.6rem;
+    height: v-bind('height');
+    cursor: pointer;
+
+    div {
         display: flex;
-        flex-direction: column;
         justify-content: center;
-        width: 100%;
-        padding-left: 1.2rem;
-        padding-bottom: 0.6rem;
-        height: v-bind('height');
-        cursor: pointer;
 
-        div {
+        &>div {
             display: flex;
             justify-content: center;
-
-            &>div {
-                display: flex;
-                justify-content: center;
-            }
-        }
-
-        .button {
-            border: 0;
-            width: 80%;
         }
-
-
     }
 
-    .reforge-tip {
-        width: 100%;
-        flex-direction: column;
-        display: flex;
-        justify-content: center;
-        height: v-bind('height');
-        color: #68d5ed;
-    }
-
-    .red {
-        color: red !important;
+    .button {
+        border: 0;
+        width: 80%;
     }
+}
 
-    .btn-group {
-        margin-bottom: 0.5rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
+.reforge-tip {
+    width: 100%;
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+    height: v-bind('height');
+    color: #68d5ed;
 }
 
-@media only screen and (max-width: 768px) {
-    .reforge {
-        width: 23rem;
-    }
+.red {
+    color: red !important;
+}
 
-    .extraEntry {
-        font-size: 1rem;
-    }
+.btn-group {
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
+
 </style>
\ No newline at end of file
diff --git a/src/views/backpack/strengthen.vue b/src/views/backpack/equip-menu/strengthen.vue
similarity index 82%
rename from src/views/backpack/strengthen.vue
rename to src/views/backpack/equip-menu/strengthen.vue
index 1d24243..34da932 100644
--- a/src/views/backpack/strengthen.vue
+++ b/src/views/backpack/equip-menu/strengthen.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="strengthen" v-if="equip">
+    <div class="equip-dialog" v-if="equip">
         <div class="coins">
             {{ t('coins.0') }}:{{ useCoins }}
         </div>
@@ -125,48 +125,6 @@ defineExpose({ stopAuto })
 onMounted(() => { });
 </script>
 <style lang="scss" scoped>
-.strengthen {
-    color: #f1f1f1;
-    width: 25rem;
-    height: auto;
-    background: rgba(0, 0, 0, 0.2);
-    border: #393839;
-    border-radius: 0.4rem;
-    padding: 1rem;
-    box-sizing: border-box;
-}
-
-.coins {
-    display: flex;
-    align-items: center !important;
-    justify-content: center;
-    font-size: 1.1rem;
-    color: #2fe20f;
-}
-
-.descript {
-    font-family: 'MaShanZheng' !important;
-    display: flex;
-    align-items: center !important;
-    justify-content: center;
-    font-size: 1.6rem;
-    padding: 1.4rem 0.7rem;
-    color: #efb96e;
-}
-
-.equip {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-
-    .name {
-        height: 3.5rem;
-        line-height: 3.5rem;
-        margin-left: 1.6rem;
-        font-size: 1.2rem;
-    }
-}
-
 .entry {
     width: 100%;
     padding: 1rem;
@@ -201,20 +159,4 @@ onMounted(() => { });
     }
 }
 
-@media only screen and (max-width: 768px) {
-    .strengthen {
-        width: 23rem;
-    }
-
-    .equip .name {
-        height: 2.5rem;
-        line-height: 2.5rem;
-        margin-left: 1rem;
-        font-size: 1rem;
-    }
-
-    .entry {
-        font-size: 1rem;
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/backpack/auto-sell.vue b/src/views/backpack/grid/auto-sell.vue
similarity index 100%
rename from src/views/backpack/auto-sell.vue
rename to src/views/backpack/grid/auto-sell.vue
diff --git a/src/views/backpack/grid.vue b/src/views/backpack/grid/grid.vue
similarity index 100%
rename from src/views/backpack/grid.vue
rename to src/views/backpack/grid/grid.vue
diff --git a/src/views/backpack/grid/index.ts b/src/views/backpack/grid/index.ts
new file mode 100644
index 0000000..0c5d736
--- /dev/null
+++ b/src/views/backpack/grid/index.ts
@@ -0,0 +1,3 @@
+import Grid from './grid.vue';
+
+export default Grid;