diff --git a/src/App.vue b/src/App.vue
index b761fb6..9b2f735 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,7 @@
     color: #FFF;
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    overflow: auto;
 }
+
 </style>
diff --git a/src/assets/css/base.scss b/src/assets/css/base.scss
index fe9200e..f2f11ab 100644
--- a/src/assets/css/base.scss
+++ b/src/assets/css/base.scss
@@ -160,3 +160,14 @@ button {
   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;
+  }
+}
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
deleted file mode 100644
index ca88f05..0000000
--- a/src/assets/css/index.scss
+++ /dev/null
@@ -1,318 +0,0 @@
-* {
-  box-sizing: border-box;
-  user-select: none;
-}
-a {
-  cursor: pointer;
-}
-.main {
-  background: #111;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  color: #eee;
-  height: 100%;
-  .user-status {
-    position: absolute;
-    top: 0.1rem;
-    left: 0.1rem;
-    border: 2px solid #ccc;
-    height: 4rem;
-    width: 4rem;
-    padding: 0.1rem;
-    display: flex;
-    flex-direction: column;
-    .hp {
-      cursor: pointer;
-      height: 0.7rem;
-      width: 100%;
-      display: flex;
-      border: 2px solid #ccc;
-      align-items: center;
-      padding-left: 0.2rem;
-      margin-bottom: 0.1rem;
-      img {
-        width: 0.5rem;
-        height: 0.5rem;
-      }
-      .value {
-        font-size: 0.26rem;
-        font-weight: bold;
-        text-align: center;
-        flex: 1;
-      }
-    }
-    .lv {
-      cursor: pointer;
-      height: 0.7rem;
-      width: 100%;
-      display: flex;
-      border: 2px solid #ccc;
-      align-items: center;
-      padding-left: 0.2rem;
-      margin-bottom: 0.1rem;
-      img {
-        width: 0.5rem;
-        height: 0.5rem;
-      }
-      .value {
-        display: flex;
-        justify-content: space-around;
-        font-size: 0.26rem;
-        font-weight: bold;
-        text-align: center;
-        flex: 1;
-        align-items: center;
-      }
-    }
-    .other {
-      img {
-        width: 0.35rem !important;
-        height: 0.35rem !important;
-      }
-      display: flex;
-      flex: 1;
-      padding: 0.1rem;
-      border: 2px solid #ccc;
-      flex-wrap: wrap;
-      & > div,
-      .item {
-        cursor: pointer;
-        width: 33.3%;
-        height: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        padding-top: 0.05rem;
-        flex-direction: column;
-        .value {
-          margin-top: 0.06rem;
-          font-size: 0.23rem;
-          font-weight: normal;
-          flex: 1;
-          display: flex;
-          align-items: center;
-          flex-direction: column;
-        }
-      }
-      .item {
-        width: 100%;
-      }
-    }
-  }
-  .user-item {
-    position: absolute;
-    top: 0.1rem;
-    left: 4.2rem;
-    border: 2px solid #ccc;
-    height: 4rem;
-    width: 4rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    padding: 0.2rem 0;
-    padding-top: 0.1rem;
-    cursor: pointer;
-    & > div {
-      background: rgba(0, 0, 0, 0.7);
-      width: calc(100% - 0.4rem);
-      margin: 0 20rem;
-    }
-    .uii {
-      display: flex;
-      width: calc(100% -0.4rem);
-    }
-    .gold {
-      cursor: pointer;
-      height: 0.7rem;
-      margin: 0.1rem;
-      margin-top: 0.08rem;
-      width: calc(100%);
-      display: flex;
-      align-items: center;
-      padding-left: 0.1rem;
-      font-size: 0.22rem;
-      span {
-        font-size: 0.2rem;
-        font-weight: bold;
-        text-align: right;
-        flex: 1;
-        padding: 0.1rem 0.08rem;
-        display: flex;
-        align-items: flex-end;
-        justify-content: flex-end;
-      }
-    }
-    .title {
-      display: flex;
-      padding: 0.05rem;
-      width: 100%;
-      .icon {
-        width: 0.56rem;
-        height: 0.56rem;
-        background-color: #000;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 0.04rem;
-      }
-      .name {
-        font-size: 0.2rem;
-        height: 0.46rem;
-        margin-left: 0.2rem;
-        line-height: 0.46rem;
-      }
-    }
-  }
-  .sys-info {
-    position: absolute;
-    border: 2px solid #ccc;
-    height: calc(100% - 4.4rem);
-    width: 8.1rem;
-    bottom: 0.1rem;
-    left: 0.1rem;
-
-    transition: 0.2s;
-    padding: 0.2rem;
-    .clear {
-      position: absolute;
-      top: 0.2rem;
-      right: 0.2rem;
-      cursor: pointer;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-    #sysInfo {
-      overflow-y: auto;
-      transition: 0.2s;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: flex-start;
-    }
-    .info {
-      margin: 0.03rem 0;
-    }
-    a {
-      cursor: pointer;
-      text-decoration: underline;
-      margin-left: 0.05rem;
-    }
-    .warning > span {
-      color: #f90202;
-    }
-    .battle > span {
-      color: #de8618;
-    }
-    .win > span {
-      color: #24c4de;
-    }
-    .trophy > span {
-      color: #2fe20f;
-    }
-  }
-  .map {
-    position: absolute;
-    right: 0.1rem;
-    left: 8.3rem;
-    top: 0.1rem;
-    bottom: 0.1rem;
-    border: 2px solid #ccc;
-    background-image: url(../img/map.jpg);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    .plan {
-      position: absolute;
-      top: 0.1rem;
-      width: calc(100% - 0.3rem);
-      left: 0.15rem;
-      height: 1rem;
-      background: rgba(54, 121, 176, 0.68);
-      text-align: center;
-      font-size: 0.4rem;
-      line-height: 1rem;
-    }
-    .eventEnd {
-      position: absolute;
-      top: 1.1rem;
-      right: 0rem;
-      height: 0.4rem;
-      font-size: 0.16rem;
-      line-height: initial;
-    }
-    .event-icon {
-      position: absolute;
-      cursor: pointer;
-      width: 0.55rem;
-      height: 0.75rem;
-      border: 1px solid #111;
-      background: rgba(0, 0, 0, 0.5);
-      border-radius: 4px;
-      box-shadow: 0 0 4px 4px rgba(100, 255, 36, 0.5);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      .icon-image {
-        width: 0.45rem;
-        height: 0.45rem;
-        border-radius: 50%;
-        background-image: url(../icons/menu/d1.png);
-        background-color: rgba(100, 255, 36, 0.6);
-        background-repeat: no-repeat;
-        background-position: center center;
-        background-size: 30px 29px;
-      }
-      span {
-        text-shadow: 1px 1px 3px rgb(0, 0, 0);
-        white-space: nowrap;
-        width: 100%;
-        text-align: center;
-        border-top: 1px solid rgba(100, 255, 36, 0.6);
-        margin-top: 0.03rem;
-        font-size: 0.14rem;
-      }
-    }
-    .low-level {
-    }
-    .h-level {
-      box-shadow: 0 0 4px 4px rgba(245, 241, 0, 0.5);
-      .icon-image {
-        background-image: url(../icons/menu/d2.png);
-        background-color: rgba(245, 241, 0, 0.6);
-      }
-      span {
-        border-top: 1px solid rgba(245, 241, 0, 0.6);
-      }
-    }
-    .boss {
-      box-shadow: 0 0 4px 4px rgba(245, 54, 54, 0.5);
-      .icon-image {
-        background-image: url(../icons/menu/d3.png);
-        background-color: rgba(245, 54, 54, 0.6);
-      }
-      span {
-        border-top: 1px solid rgba(245, 54, 54, 0.6);
-      }
-    }
-    .endless {
-      box-shadow: 0 0 4px 4px rgba(245, 69, 0, 0.5);
-      .icon-image {
-        background-image: url(../icons/endless.png);
-        background-color: rgba(245, 69, 0, 0.6);
-      }
-      span {
-        border-top: 1px solid rgba(245, 69, 0, 0.6);
-      }
-    }
-  }
-}
diff --git a/src/components/equip-icon.vue b/src/components/equip-icon.vue
index 3cec504..31a3f8c 100644
--- a/src/components/equip-icon.vue
+++ b/src/components/equip-icon.vue
@@ -12,7 +12,7 @@
 import { useStore } from "vuex";
 import { reactive, onMounted, ref, computed } from "vue";
 import { useI18n } from "vue3-i18n";
-import { qualitys,equips_icon_path } from "@/config";
+import { qualitys, equips_icon_path } from "@/config";
 
 const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
@@ -67,4 +67,11 @@ onMounted(() => { });
     background-position: center !important;
     background-size: contain !important;
 }
+
+@media only screen and (max-width: 768px) {
+    .icon {
+        width: 2.5rem;
+        height: 2.5rem;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/equip-tip.vue b/src/components/equip-tip.vue
deleted file mode 100644
index a7806d1..0000000
--- a/src/components/equip-tip.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <span class="equip-tip">
-        <span class="content" @mouseover="showTips" @mouseleave="close">
-            <slot></slot>
-        </span>
-    </span>
-</template>
-
-<script lang="ts" setup>
-import { useStore } from "vuex";
-import { computed, onMounted, ref } from "vue";
-import { useI18n } from "vue3-i18n";
-import Equip from "./equip.vue"
-
-const { t } = useI18n();
-const { state, commit, dispatch } = useStore();
-
-const prop = defineProps({
-    equip: {
-        type: Object,
-        default: ''
-    },
-    compare: {
-        type: Boolean,
-        default: false
-    }
-})
-
-const showTips = (e) => {
-    commit('show_equip_tip', { equip: prop.equip, compare: prop.compare, e: e })
-}
-const close = () => {
-    commit('close_equip_tip')
-}
-defineExpose({ close })
-
-onMounted(() => { });
-</script>
-<style lang="scss" scoped>
-.equip-tip,
-.content {
-    width: 100%;
-    cursor: pointer;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/equip-tips.vue b/src/components/equip-tips.vue
index aee3737..99a9a29 100644
--- a/src/components/equip-tips.vue
+++ b/src/components/equip-tips.vue
@@ -66,4 +66,5 @@ onMounted(() => { });
     }
 
 }
+
 </style>
\ No newline at end of file
diff --git a/src/components/equip.vue b/src/components/equip.vue
index 86b4143..737ebe6 100644
--- a/src/components/equip.vue
+++ b/src/components/equip.vue
@@ -131,4 +131,48 @@ onMounted(() => { });
     text-align: left;
     text-indent: 1.7rem;
 }
+
+@media only screen and (max-width: 768px) {
+    .equipPanel {
+        width: 13rem;
+        font-size: 0.9rem;
+
+        .title {
+
+            .name {
+                height: 2.5rem;
+                line-height: 2.5rem;
+                margin-left: 0;
+            }
+        }
+
+        .type {
+            padding: 0rem;
+        }
+
+        .lv {
+            padding-right: 0.3rem;
+        }
+
+        .entry {
+            padding-left: 0rem;
+            padding-bottom: 0.7rem;
+        }
+
+        .extraEntry {
+            padding-left: 0rem;
+            margin-top: 0.7rem;
+            padding-bottom: 0.7rem;
+        }
+    }
+
+    .des {
+        color: #777;
+        font-size: 0.65rem;
+        margin-top: 0.7rem;
+        text-align: left;
+        text-indent: 0.8rem;
+    }
+
+}
 </style>
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index 58a1c70..435d765 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,12 +1,11 @@
 import Tooltip from './tooltip.vue';
 import Equip from './equip.vue';
-import EquipTip from './equip-tip.vue';
 import EquipTips from './equip-tips.vue';
 import EquipIcon from './equip-icon.vue';
 import Dialog from './dialog.vue';
 import Drawer from './drawer.vue';
 import PopoverMenu from './popover-menu.vue';
 import Confirm from './confirm.vue';
-export { Tooltip, Equip, EquipTip, EquipTips, EquipIcon, Dialog, Drawer, PopoverMenu, Confirm };
+export { Tooltip, Equip, EquipTips, EquipIcon, Dialog, Drawer, PopoverMenu, Confirm };
 
 export * from './tabs';
diff --git a/src/components/tooltip.vue b/src/components/tooltip.vue
index f143d9a..a81d019 100644
--- a/src/components/tooltip.vue
+++ b/src/components/tooltip.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="c-tooltip">
-        <div class="c-tooltip-content" @mouseover="showTips" @mouseleave="closeTips">
+        <div class="c-tooltip-content" @mouseover="mouseover" @mouseleave="mouseleave" @touchstart="touchstart"
+            @touchend="touchend">
             <slot></slot>
         </div>
         <div class="c-tooltip-tip" :class="placement" v-if="tipsShow" :style='tipsStyle'>
@@ -46,6 +47,23 @@ const prop = defineProps({
         default: null
     }
 })
+const touchstart = (e) => {
+    if (!state.mobile) return;
+    showTips(e.touches[0]);
+
+}
+const touchend = () => {
+    if (!state.mobile) return;
+    closeTips();
+}
+const mouseover = (e) => {
+    if (state.mobile) return;
+    showTips(e);
+}
+const mouseleave = () => {
+    if (state.mobile) return;
+    closeTips();
+}
 
 const showTips = (e) => {
     const x = e.pageX, y = e.pageY, maxH = window.innerHeight, maxW = window.innerWidth;
diff --git a/src/config/i18n/zh.ts b/src/config/i18n/zh.ts
index 3a7553a..a334518 100644
--- a/src/config/i18n/zh.ts
+++ b/src/config/i18n/zh.ts
@@ -119,7 +119,7 @@ export default class Zh {
     '强化概率：6级80%，7级65%，8级45%，9级30%，10级以后20%',
   ];
   reforge = '重铸';
-  reforgeDesc = ['重铸说明', '花费金币重铸装备所有词条', '重铸时词条颜色与百分比值显示了该词条的等级'];
+  reforgeDesc = ['重铸说明', '点击任意词条花费金币重铸装备所有词条', '重铸时词条颜色与百分比值显示了该词条的等级'];
   lock = '锁定';
   unlock = '解锁';
   sell = '出售';
diff --git a/src/store/action.ts b/src/store/action.ts
index b6115d8..36ef716 100644
--- a/src/store/action.ts
+++ b/src/store/action.ts
@@ -1,11 +1,11 @@
-import { initialWeapon, initialArmor, initialNeck, initialRing, i18n, archive_name, audio_mp3 } from '@/config';
+import { initialWeapon, initialArmor, initialNeck, initialRing, i18n, archive_name } from '@/config';
 import { conisOfsell, getAssets } from '@/tool';
 import { Base64 } from 'js-base64';
 
-const backgound = new Audio(audio_mp3.background);
+const backgound = new Audio('/audio/backgound.mp3');
 backgound.loop = true;
 backgound.volume = 0.2;
-const battle = new Audio(audio_mp3.battle);
+const battle = new Audio('/audio/battle.mp3');
 battle.loop = true;
 battle.volume = 0.2;
 const music = {
@@ -26,6 +26,12 @@ export const play_music = (store, type) => {
   });
 };
 
+export const set_music_muted = (store, muted) => {
+  Object.keys(music).forEach((key) => {
+    music[key].muted = muted;
+  });
+};
+
 export const set_music_volume = (store, volume) => {
   Object.keys(music).forEach((key) => {
     music[key].volume = volume;
diff --git a/src/store/mutation.ts b/src/store/mutation.ts
index 0c25d2e..82eeb85 100644
--- a/src/store/mutation.ts
+++ b/src/store/mutation.ts
@@ -1,4 +1,4 @@
-import { callPlayerAttribute, conisOfsell, getArrayEmptyIdx } from '@/tool';
+import { callPlayerAttribute, conisOfsell, getArrayEmptyIdx, callEuqipTipsLocation } from '@/tool';
 import { reborn_point_coefficients, reborn_arrts, i18n } from '@/config';
 const { t } = i18n;
 
@@ -37,38 +37,15 @@ export const set_sys_info = (state, data) => {
 export const show_equip_tip = (state, data) => {
   state.equipTip.equip = data.equip;
   state.equipTip.compare = data.compare || false;
-  const x = data.e.pageX,
-    y = data.e.pageY,
-    maxH = window.innerHeight,
-    maxW = window.innerWidth;
-  const tipsStyle = state.equipTip.tipsStyle;
-  const tipsStyle2 = state.equipTip.tipsStyle2;
-  if (x < maxW / 2) {
-    delete tipsStyle.right;
-    tipsStyle.left = x + 'px';
-    delete tipsStyle2.right;
-    tipsStyle2.left = 'calc(' + x + 'px + 21rem)';
-  } else {
-    delete tipsStyle.left;
-    tipsStyle.right = maxW - x + 'px';
-    delete tipsStyle2.left;
-    tipsStyle.right2 = 'calc(' + tipsStyle.righ + ' - 21rem)';
-  }
-  if (y < maxH / 2) {
-    delete tipsStyle.bottom;
-    tipsStyle.top = y + 'px';
-    delete tipsStyle2.bottom;
-    tipsStyle2.top = y + 'px';
-  } else {
-    delete tipsStyle.top;
-    tipsStyle.bottom = maxH - y + 'px';
-    delete tipsStyle2.top;
-    tipsStyle2.bottom = maxH - y + 'px';
-  }
+  const styles = callEuqipTipsLocation(data.e, state.mobile);
+  state.equipTip.tipsStyle = styles[0];
+  state.equipTip.tipsStyle2 = styles[1];
   state.equipTip.tipsShow = true;
+  console.log('show');
 };
 export const close_equip_tip = (state) => {
   state.equipTip.tipsShow = false;
+  console.log('close');
 };
 export const clear_sys_info = (state, data) => {
   state.sysInfo.splice(1, state.sysInfo.length);
@@ -97,7 +74,7 @@ export const add_bootys = (state, bootys) => {
       add_player_coins(state, coins);
       set_sys_info(state, { msg: t('autoSell.2') + t('getCoins') + coins, type: 'booty' });
       return;
-    }else {
+    } else {
       state.grid[idx] = equip;
     }
   });
diff --git a/src/store/state.ts b/src/store/state.ts
index 8a925d2..41a1fb6 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -12,10 +12,11 @@ export default {
     { type: 'win', msg: t('welcome.0') },
     { type: 'win', msg: t('welcome.1') },
   ],
+  mobile: window.innerWidth < 768,
   curMenu: null,
   equipTip: {
     equip: null,
-    tipShow: false,
+    tipsShow: false,
     compare: false,
     tipsStyle: {},
     tipsStyle2: {},
diff --git a/src/tool/caller.ts b/src/tool/caller.ts
index 91fabb7..c28c05a 100644
--- a/src/tool/caller.ts
+++ b/src/tool/caller.ts
@@ -155,3 +155,40 @@ export const callBattleResult = (player, monster) => {
   }
   return { win: curHp > 0, bouts: bouts, takeDmg: tmp - curHp };
 };
+
+export const callEuqipTipsLocation = (e, mobile) => {
+  const x = e.pageX,
+    y = e.pageY,
+    maxH = window.innerHeight,
+    maxW = window.innerWidth,
+    tipsStyle: any = {},
+    tipsStyle2: any = {};
+  if (mobile) {
+    tipsStyle.left = '0.3rem';
+    tipsStyle2.left = '13.9rem';
+    const num = 10;
+    if (y < maxH / 2) {
+      tipsStyle.top = y + num + 'px';
+      tipsStyle2.top = y + num + 'px';
+    } else {
+      tipsStyle.bottom = maxH - y - num + 'px';
+      tipsStyle2.bottom = maxH - y - num + 'px';
+    }
+  } else {
+    if (x < maxW / 2) {
+      tipsStyle.left = x + 'px';
+      tipsStyle2.left = 'calc(' + x + 'px + 21rem)';
+    } else {
+      tipsStyle.right = maxW - x + 'px';
+      tipsStyle.right2 = 'calc(' + tipsStyle.righ + ' - 21rem)';
+    }
+    if (y < maxH / 2) {
+      tipsStyle.top = y + 'px';
+      tipsStyle2.top = y + 'px';
+    } else {
+      tipsStyle.bottom = maxH - y + 'px';
+      tipsStyle2.bottom = maxH - y + 'px';
+    }
+  }
+  return [tipsStyle, tipsStyle2];
+};
diff --git a/src/views/archive.vue b/src/views/archive.vue
index 0b2038e..d3b9a69 100644
--- a/src/views/archive.vue
+++ b/src/views/archive.vue
@@ -114,4 +114,22 @@ onMounted(() => { });
     align-items: center;
     justify-content: center;
 }
+
+@media only screen and (max-width: 768px) {
+    .archive {
+        padding: 0.3rem;
+
+        .tip {
+            color: white;
+            font-size: 0.8rem;
+            margin: 0.25rem 0;
+        }
+    }
+
+    .textarea {
+        width: 22rem;
+        height: 20rem;
+    }
+
+}
 </style>
\ No newline at end of file
diff --git a/src/views/backpack/auto-sell.vue b/src/views/backpack/auto-sell.vue
index 5e77926..8cbcba3 100644
--- a/src/views/backpack/auto-sell.vue
+++ b/src/views/backpack/auto-sell.vue
@@ -89,4 +89,29 @@ watch(() => autoSell.value.length, (n, o) => {
         justify-content: space-around;
     }
 }
+
+
+@media only screen and (max-width: 768px) {
+    .sell-show {
+        height: 3rem;
+        line-height: 3rem;
+
+        .icon-setting {
+            height: 1.5rem;
+            width: 1.5rem;
+            margin-top: 0.7rem;
+        }
+
+    }
+
+    .sell-setting {
+        width: 7rem;
+        line-height: 1.5rem;
+
+        div {
+            line-height: 1.5rem;
+            font-size: 0.8rem;
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/backpack/equip-menu.vue b/src/views/backpack/equip-menu.vue
index 724fc29..93a08e7 100644
--- a/src/views/backpack/equip-menu.vue
+++ b/src/views/backpack/equip-menu.vue
@@ -9,7 +9,8 @@
         ]" />
     </Dialog>
 
-    <Dialog :title="t('strengthen') + t('equip')" v-model="showStrengthen" top="10rem" left="2rem" padding="0" :z="11">
+    <Dialog :title="t('strengthen') + t('equip')" v-model="showStrengthen" :top="state.mobile ? '5rem' : '10rem'"
+        left="2rem" padding="0" :z="11">
         <Strengthen :equip="state.grid[index]" />
     </Dialog>
 
diff --git a/src/views/backpack/grid.vue b/src/views/backpack/grid.vue
index 5bc289d..c4c1bad 100644
--- a/src/views/backpack/grid.vue
+++ b/src/views/backpack/grid.vue
@@ -137,4 +137,44 @@ onMounted(() => { });
         margin-top: 0.9rem;
     }
 }
+
+@media only screen and (max-width: 768px) {
+    .body {
+        width: 22rem;
+        height: 10rem;
+    }
+
+    .grid {
+        width: 2.5rem;
+        height: 2.5rem;
+
+
+        .equip-lock {
+            top: -0.2rem;
+            right: -0.7rem;
+            border-left: 1.2rem solid transparent;
+            border-right: 1.2rem solid transparent;
+            border-bottom: 1.2rem solid rgba(255, 0, 0, 0.658);
+
+            img {
+                width: 0.7rem;
+                height: 0.7rem;
+            }
+        }
+    }
+
+    .footer {
+        height: 3rem;
+
+        .capacity {
+            font-size: 1.2rem;
+            line-height: 3rem;
+        }
+
+        .button {
+            margin-top: 0.5rem;
+        }
+    }
+
+}
 </style>
\ No newline at end of file
diff --git a/src/views/backpack/player.vue b/src/views/backpack/player.vue
index 89df71c..3b66480 100644
--- a/src/views/backpack/player.vue
+++ b/src/views/backpack/player.vue
@@ -156,6 +156,99 @@ onMounted(() => { });
         bottom: 12rem;
     }
 
+}
+
+@media only screen and (max-width: 768px) {
+    .player {
+        width: 22rem;
+        padding: 0.2rem;
+        height: 11rem;
+        color: white;
+    }
+
+    .attributes {
+        padding-top: 0.5rem;
+        width: 10rem;
+        height: 100%;
+        float: left;
+        font-size: 0.8rem;
+
+        .label {
+            float: left;
+            width: 4rem;
+            height: 100%;
+            color: #f87d02;
+            text-align: start;
+        }
+
+        .value {
+            float: left;
+            height: 100%;
+            color: #f3bb82;
+            text-align: start;
+        }
+
+    }
+
+    .equips {
+        width: 11rem;
+        position: relative;
+        height: 100%;
+        float: right;
+
+        .player-img {
+            width: 10rem;
+            height: 10rem;
+            position: absolute;
+            right: 0.2rem;
+            top: 0.2rem;
+        }
+
+        .equip {
+            position: absolute;
+        }
+
+        .equip-0 {
+            left: 0.2rem;
+            bottom: 0rem;
+        }
+
+        .equip-1 {
+            left: 0.2rem;
+            bottom: 2.7rem;
+        }
+
+        .equip-2 {
+            left: 0.2rem;
+            bottom: 5.4rem;
+        }
+
+        .equip-3 {
+            left: 0.2rem;
+            bottom: 8.1rem;
+        }
+
+        .equip-4 {
+            right: 0.2rem;
+            bottom: 0rem;
+        }
+
+        .equip-5 {
+            right: 0.2rem;
+            bottom: 2.7rem;
+        }
+
+        .equip-6 {
+            right: 0.2rem;
+            bottom: 5.4rem;
+        }
+
+        .equip-7 {
+            right: 0.2rem;
+            bottom: 8.1rem;
+        }
+
+    }
 
 }
 </style>
\ No newline at end of file
diff --git a/src/views/backpack/strengthen.vue b/src/views/backpack/strengthen.vue
index ef1539f..3c294ec 100644
--- a/src/views/backpack/strengthen.vue
+++ b/src/views/backpack/strengthen.vue
@@ -38,7 +38,7 @@
         <div class="btn-group" v-if='!auto'>
             <p>{{ t('stren.0') }}：<span :class="{ 'red': useCoins < needCoins }">{{ needCoins }}</span></p>
             <button class="button" @click="strengthen(true)">{{ t('stren.2') }}</button>
-            <span v-if="testFlag">{{equip.strengthenLv}}<span class="arror">➡</span>{{ testResult }}</span>
+            <span v-if="testFlag">{{ equip.strengthenLv }}<span class="arror">➡</span>{{ testResult }}</span>
         </div>
         <div class="btn-group" v-if='!auto'>
             <p>{{ t('stren.3') }}：</p>
@@ -298,4 +298,10 @@ onMounted(() => { });
         color: red;
     }
 }
+
+@media only screen and (max-width: 768px) {
+    .strengthen {
+        width: 23rem;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/dungeon/dungeon.vue b/src/views/dungeon/dungeon.vue
index 481624c..50b00e4 100644
--- a/src/views/dungeon/dungeon.vue
+++ b/src/views/dungeon/dungeon.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts" setup>
 import { useStore } from "vuex";
-import { nextTick, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue3-i18n";
 
 const { t } = useI18n();
@@ -25,7 +25,6 @@ const left = ref('0rem');
 const top = ref('0rem');
 const emit = defineEmits(['battle'])
 
-
 const props = defineProps({
     dungeon: {
         type: Object,
@@ -42,12 +41,12 @@ watch(() => props.dungeon, () => {
 })
 
 const ramdonPosition = () => {
-    if (window.innerWidth > 1360) {
+    if (state.mobile) {
+        left.value = Math.random() * 80 + 5 + 'vw';
+        top.value = Math.random() * 80 + 10 + 'vh';
+    } else {
         left.value = Math.random() * 64 + 2.5 + 'rem';
         top.value = Math.random() * 50 + 2.5 + 'rem';
-    } else {
-        left.value = Math.random() * 38.5 + 2.5 + 'rem';
-        top.value = Math.random() * 47 + 2.5 + 'rem';
     }
 }
 
@@ -55,10 +54,10 @@ const showTips = (e) => {
     const x = e.pageX, y = e.pageY, maxH = window.innerHeight, maxW = window.innerWidth;
     // const xt = x < 200 ? '15%' :  < maxH - 200 ? '0%' : '-40%';
     const xt = '-33%';
-    const yt = y < maxH / 2 ? '100%' : '-80%';
+    const yt = y < maxH / 2 ? '100%' : '-100%';
     tipsStyle.value = {
-        top: x < 200 ? '-0.8rem' : y > maxH / 2 ? '-6rem' : '5rem',
-        left: x < 200 ? '3.5rem' : '-6rem'
+        top: y > maxH / 2 ? '-6rem' : '5rem',
+        left: x < maxW / 2 ? '-2rem' : '-10rem'
     }
     tipsShow.value = true
 }
@@ -103,7 +102,7 @@ onMounted(() => {
     .tip {
         position: absolute;
         // transform: translate(0%, 100%);
-        min-width: 15rem;
+        min-width: 13rem;
         border: 1px solid #fff;
         border-radius: 4px;
         padding: 1.2rem;
diff --git a/src/views/dungeon/dungeonMap.vue b/src/views/dungeon/dungeonMap.vue
index 5dbed8b..37b325e 100644
--- a/src/views/dungeon/dungeonMap.vue
+++ b/src/views/dungeon/dungeonMap.vue
@@ -4,12 +4,13 @@
     </Tooltip>
 
     <teleport to="#main" v-if="showMap">
-        <div id="map" class="map" :style="mapStyle">
+        <div id="map" class="map">
             <span v-if="!state.battle.battleShow">
                 <DungeonView v-for="item in dungeons" :dungeon="item" :key="item.lv" @battle="startBattle(item)" />
                 <img :src="refresh_icon" class="refresh" @click="refreshDungeons"></img>
             </span>
             <BattleView :dungeon="curDungeon" v-if="state.battle.battleShow" ref="battle" />
+            <img v-if="state.mobile" :src="close_icon" class="close" @click="showMenu"></img>
         </div>
     </teleport>
 
@@ -18,10 +19,10 @@
 
 <script lang="ts" setup>
 import { useStore } from "vuex";
-import { onBeforeUnmount, onMounted, computed, ref, nextTick } from "vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import { useI18n } from "vue3-i18n";
 import { Tooltip, Dialog } from "@/components"
-import { menu_icons, Dungeon, refresh_icon } from "@/config";
+import { menu_icons, Dungeon, refresh_icon, close_icon } from "@/config";
 import { randomDungeonDifficulty } from "@/tool";
 import DungeonView from "./dungeon.vue"
 import BattleView from "./battle.vue"
@@ -30,11 +31,6 @@ const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
 const showMap = ref(false);
 const dungeons = ref<Dungeon[]>()
-const mapStyle = ref<any>({
-    height: 'calc(100 % - 0.5rem)',
-    width: 'calc(100 % - 53.5rem)',
-    left: '53rem',
-});
 const battle = ref();
 const curDungeon = ref();
 
@@ -71,21 +67,6 @@ const setStype = () => {
             showMap.value = true;
         }, 100);
     }
-    if (window.innerWidth > 1360) {
-        mapStyle.value = {
-            height: 'calc(100 % - 1vh)',
-            width: '58.5vw',
-            left: '40.5vw',
-        }
-    } else {
-        mapStyle.value = {
-            height: '60rem',
-            width: '48.5rem',
-            left: '2rem',
-            top: '2rem',
-        }
-    }
-
 }
 
 const keydown = (e) => {
@@ -110,9 +91,9 @@ onBeforeUnmount(() => {
 </script>
 <style lang="scss" scoped>
 .map {
-    height: calc(100% - 0.5rem);
-    width: calc(100% - 53.5rem);
-    left: 53rem;
+    height: 98vh;
+    width: 58.5vw;
+    left: 40.5vw;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: 100% 100%;
@@ -133,5 +114,26 @@ onBeforeUnmount(() => {
         height: 2rem;
         background-size: cover;
     }
+
+    .close {
+        cursor: pointer;
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        display: block;
+        width: 2rem;
+        height: 2rem;
+        background-size: cover;
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .map {
+        height: calc(100% - 1vh);
+        width: calc(100% - 1vw);
+        top: 0.5vh;
+        left: 0.5vw;
+    }
+
 }
 </style>
\ No newline at end of file
diff --git a/src/views/illustrated/equips.vue b/src/views/illustrated/equips.vue
index 1f9f51f..8db8cdd 100644
--- a/src/views/illustrated/equips.vue
+++ b/src/views/illustrated/equips.vue
@@ -73,4 +73,27 @@ onMounted(() => {
         }
     }
 }
+
+@media only screen and (max-width: 768px) {
+    .title {
+        height: 2rem;
+        font-size: 1.2rem;
+    }
+
+    .equips {
+        width: 100%;
+
+        .equip {
+            width: 8rem;
+
+            .name {
+                font-size: 0.8rem;
+            }
+
+            .entry {
+                font-size: 0.8rem;
+            }
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index b441e76..8ac11d5 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -40,7 +40,7 @@ onMounted(() => {
     background: #111;
     box-sizing: border-box;
     margin: 0;
-    padding: 0.5rem;
+    padding: 0.5vh 0.5vw;
     position: absolute;
     top: 0;
     left: 0;
@@ -52,8 +52,17 @@ onMounted(() => {
 }
 
 .infomation {
-    height: calc(100% - 1rem);
-    width: 52.5rem;
+    height: calc(100% - 1vh);
+    width: 40vw;
     position: absolute;
 }
+
+@media only screen and (max-width: 768px) {
+
+    .infomation {
+        height: calc(100% - 1vh);
+        width: calc(100% - 1vw);
+        position: absolute;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/menu.vue b/src/views/menu.vue
index f02e0b8..ef11cb9 100644
--- a/src/views/menu.vue
+++ b/src/views/menu.vue
@@ -8,7 +8,7 @@
         <Dungeon />
         <Music />
         <Illustrated />
-        <Version/>
+        <Version />
     </div>
 </template>
 
@@ -34,13 +34,11 @@ onMounted(() => { });
 <style lang="scss">
 .menu {
     position: absolute;
-    top: 1rem;
+    top: 0.5rem;
     background: rgba($color: #000000, $alpha: 0.1);
     left: 0.5rem;
-    bottom: 0.5rem;
     padding: 0.1rem;
     border-top-right-radius: 0.1rem;
-    // width:2.5rem;
     height: 2.5rem;
     display: flex;
 
@@ -50,4 +48,17 @@ onMounted(() => { });
         margin-left: 0.6rem;
     }
 }
+
+@media only screen and (max-width: 768px) {
+    .menu {
+        height: 2.1rem;
+
+        .menu-img {
+            width: 2rem;
+            height: 2rem;
+            margin-left: 0.2rem;
+        }
+
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/message/attribute.vue b/src/views/message/attribute.vue
index e9047e2..b1d95bc 100644
--- a/src/views/message/attribute.vue
+++ b/src/views/message/attribute.vue
@@ -37,9 +37,7 @@
             </div>
         </Tooltip>
 
-        <Tooltip placement="bottom"
-            :infos="[t('def.1'), t('def.2'), t('def.3')]"
-            width="20rem">
+        <Tooltip placement="bottom" :infos="[t('def.1'), t('def.2'), t('def.3')]" width="20rem">
             <div class="item">
                 <img :src="attr_icon_urls.def">
                 <span class="value">
@@ -89,7 +87,7 @@ onBeforeUnmount(() => {
     display: flex;
     flex-wrap: wrap;
     position: absolute;
-    top: 3rem;
+    top: 2.5rem;
     width: 100%;
 
     &>div,
@@ -99,8 +97,8 @@ onBeforeUnmount(() => {
         margin-top: 0.2rem;
 
         img {
-            width: 2.2rem !important;
-            height: 2.2rem !important;
+            width: 2.2rem;
+            height: 2.2rem;
             float: left;
             margin-left: 0.5rem;
         }
@@ -119,4 +117,33 @@ onBeforeUnmount(() => {
         width: 100%;
     }
 }
+
+@media only screen and (max-width: 768px) {
+    .attribute {
+        top: 2rem;
+
+        &>div,
+        .item {
+            width: 50%;
+            margin-top: 0.1rem;
+
+            img {
+                width: 2rem;
+                height: 2rem;
+                margin-left: 0.1rem;
+            }
+
+            .value {
+                font-size: 1rem;
+                line-height: 2rem;
+                height: 2rem;
+                margin-left: 0.1rem;
+            }
+        }
+
+        .item {
+            width: 100%;
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/message/message.vue b/src/views/message/message.vue
index bd386d2..b957e09 100644
--- a/src/views/message/message.vue
+++ b/src/views/message/message.vue
@@ -23,7 +23,7 @@ onMounted(() => { });
     position: relative;
     border: 2px solid #ccc;
     height: 100%;
-    width: 52.5rem;
+    width: 100%;
     transition: 0.2s;
     padding: 0.2rem;
     padding-top: 8.5rem;
@@ -38,6 +38,12 @@ onMounted(() => { });
             text-decoration: underline;
         }
     }
+}
 
+@media only screen and (max-width: 768px) {
+    .message .clear {
+        top: 8.5rem;
+        right: 0;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/message/sys-info.vue b/src/views/message/sys-info.vue
index 8a32818..77225dd 100644
--- a/src/views/message/sys-info.vue
+++ b/src/views/message/sys-info.vue
@@ -91,4 +91,14 @@ a {
     color: aqua;
     padding-left: 0.3rem;
 }
+
+@media only screen and (max-width: 768px) {
+    .sysInfo{
+        font-size: 0.8rem;
+    }
+    .time{
+        font-size: 0.6rem;
+    }
+
+}
 </style>
\ No newline at end of file
diff --git a/src/views/music.vue b/src/views/music.vue
index ed4eb72..14ebcf5 100644
--- a/src/views/music.vue
+++ b/src/views/music.vue
@@ -1,5 +1,5 @@
 <template>
-    <Tooltip :infos="[t('music.0')]" width="12rem">
+    <Tooltip :infos="[t('music.0')]" width="10rem">
         <img v-if="!music" class="menu-img" :src="menu_icons.musicPause" @click="playMusic(true)">
         <img v-if="music" class="menu-img" :src="menu_icons.musicPlay" @click="playMusic(false)">
     </Tooltip>
diff --git a/src/views/reborn/reborn.vue b/src/views/reborn/reborn.vue
index 9d265a7..df670e7 100644
--- a/src/views/reborn/reborn.vue
+++ b/src/views/reborn/reborn.vue
@@ -3,7 +3,8 @@
         <img class="menu-img" :src="menu_icons.reborn" @click="showMenu">
     </Tooltip>
 
-    <Dialog :title="t('rebornMenu.0')" v-model="showReborn" top="4rem" left='8%' padding="0.7rem">
+    <Dialog :title="t('rebornMenu.0')" v-model="showReborn" top="4rem" :left="state.mobile ? '4%' : '8%'"
+        padding="0.7rem">
         <div class="message">
             <p>{{ t('canGetPoint') + getPoints }}</p>
             <div class="tips">
@@ -31,11 +32,13 @@
                     </p>
                     <div class="group">
                         <Tooltip :infos="[t('subtractPoints')]" width="10rem">
-                            <button class="button" @mousedown="mousedown(-1, attr, $event)">-</button>
+                            <button class="button" @mousedown="mousedown(-1, attr, $event)"
+                                @touchstart="touchstart(-1, attr)" @touchend="touchend(-1)">-</button>
                         </Tooltip>
                         <input type="number" min="0" disabled v-model="rebornPoints[attr]">
                         <Tooltip :infos="[t('addPoints')]" width="10rem">
-                            <button class="button" @mousedown="mousedown(1, attr, $event)">+</button>
+                            <button class="button" @mousedown="mousedown(1, attr, $event)"
+                                @touchstart="touchstart(1, attr)" @touchend="touchend(1)">+</button>
                         </Tooltip>
                     </div>
                 </div>
@@ -93,7 +96,26 @@ let flag = false;
 let curAttr = '';
 let curNum = 0;
 
+const touchstart = (num, attr) => {
+    if (!state.mobile) return;
+    flag = true;
+    if (curNum == 0) {
+        curNum = num;
+        flag = true;
+        curAttr = attr;
+        changeAttribute();
+    }
+}
+const touchend = (num) => {
+    if (!state.mobile) return;
+    if (curNum == num || curNum == num * -1) {
+        curNum = 0;
+        flag = false;
+    }
+}
+
 const mousedown = (num, attr, e) => {
+    if (state.mobile) return;
     flag = true;
     num *= 4.5 * e.button + 1;
     if (curNum == 0) {
@@ -104,6 +126,7 @@ const mousedown = (num, attr, e) => {
     }
 }
 const mouseup = (e) => {
+    if (state.mobile) return;
     const num = 4.5 * e.button + 1
     if (curNum == num || curNum == num * -1) {
         curNum = 0;
@@ -142,6 +165,7 @@ const keydown = (e) => {
 onMounted(() => {
     document.addEventListener('keydown', keydown)
     document.addEventListener('mouseup', mouseup)
+    state.rebornPoints.points = 100;
 });
 onBeforeUnmount(() => {
     document.removeEventListener('keydown', keydown)
@@ -159,6 +183,10 @@ onBeforeUnmount(() => {
     border-bottom: 1px solid #ccc;
     padding-bottom: 0.8rem;
 
+    p {
+        margin: 0.7rem;
+    }
+
     .tips {
         padding-left: 1.3rem;
 
@@ -169,9 +197,6 @@ onBeforeUnmount(() => {
         }
     }
 
-    p {
-        margin: 0.7rem;
-    }
 
     .btn-div {
         padding: 0.1rem;
@@ -229,4 +254,61 @@ onBeforeUnmount(() => {
 
     }
 }
+
+@media only screen and (max-width: 768px) {
+
+    .message {
+        padding-bottom: 0.5rem;
+
+        p {
+            margin: 0.5rem;
+        }
+
+        .tips {
+            padding-left: 0.8rem;
+        }
+
+        .btn-div {
+            padding: 0rem;
+            padding-right: 1rem;
+        }
+    }
+
+    .reborn {
+        padding: 0.1rem;
+        width: 23.5rem;
+
+        .info {
+            padding: 0.2rem;
+        }
+
+    }
+
+    .attributes {
+        padding: 0.05rem 0;
+    }
+
+    .attribute {
+        padding: 0.5rem 0rem;
+
+        p {
+
+            span {
+                margin-left: 0.2rem;
+            }
+        }
+
+        .group {
+
+            input {
+                width: 4rem;
+                color: black;
+                height: 1.8rem;
+                font-size: 0.8rem;
+            }
+
+        }
+    }
+
+}
 </style>
\ No newline at end of file
diff --git a/src/views/shop/shop.vue b/src/views/shop/shop.vue
index 0f621de..debac40 100644
--- a/src/views/shop/shop.vue
+++ b/src/views/shop/shop.vue
@@ -145,7 +145,7 @@ const buyEquip = (idx) => {
         commit("set_backpack", grid);
         shopItems.value[idx] = null;
         close();
-        if(equip.quality.quality == qualitys[4]){
+        if (equip.quality.quality == qualitys[4]) {
             confirmFlag.value = false;
         }
         return;
@@ -187,13 +187,14 @@ onBeforeUnmount(() => {
 })
 </script>
 <style lang="scss" scoped>
-.coins{
+.coins {
     display: flex;
     align-items: center !important;
     justify-content: center;
     font-size: 1.1rem;
     color: #2fe20f;
 }
+
 .items {
     height: 14rem;
     padding: 4rem 2rem;
@@ -228,4 +229,31 @@ onBeforeUnmount(() => {
     margin-top: 0.5rem;
     float: right;
 }
+
+@media only screen and (max-width: 768px) {
+    .coins {
+        font-size: 1rem;
+    }
+
+    .items {
+        height: 10rem;
+        padding: 2rem 0.5rem;
+    }
+
+    .item {
+        margin: 0.9rem;
+    }
+
+    .footer {
+        height: 3rem;
+        margin-bottom: 1rem;
+        padding: 0 1rem;
+        font-size: 0.8rem;
+    }
+
+
+    .button {
+        margin-top: 0.5rem;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/version/version.vue b/src/views/version/version.vue
index e9d677b..368027d 100644
--- a/src/views/version/version.vue
+++ b/src/views/version/version.vue
@@ -4,11 +4,11 @@
         <img class="menu-img" :src="menu_icons.extras" @click="showMenu">
     </Tooltip>
 
-    <Drawer v-model="showVersion" width="35%">
+    <Drawer v-model="showVersion" :width="state.mobile ? '100%' : '35%'">
         <UpdateLog />
     </Drawer>
 
-    <Dialog :title="t('update.0')" v-model="showUpdate" top="5rem" left="5rem">
+    <Dialog :title="t('update.0')" v-model="showUpdate" top="5rem" :left="state.mobile ? '2rem' : '5rem'">
         <div class="nitofy">
             <div class="confirm">{{ t('update.1') }}</div>
             <div class="msg" v-if="message">{{ message }}</div>
@@ -94,4 +94,10 @@ onBeforeUnmount(() => {
     overflow: hidden;
     padding: 1rem;
 }
+
+@media only screen and (max-width: 768px) {
+    .nitofy {
+        width: 23rem;
+    }
+}
 </style>
\ No newline at end of file