更新返回按钮150%适配

src/components/BtnBack.vue

@@ -18,10 +18,11 @@
 </template>
 
 <script setup>
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import { ref, computed, watch, onMounted, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import { useWindowSize } from "@vueuse/core"
+
 
 const route = useRoute()
 const router = useRouter()
@@ -29,10 +30,8 @@ const store = useStore()
 
 const $env = inject('$env')
 
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 const props = defineProps({
   color: {
@@ -59,17 +58,17 @@ const textColor = computed(() => {
 <style lang="less" scoped>
 .btn-back{
   position: fixed;
-  left: 35px;
-  top: 37px;
-  width: 48px;
-  height: 48px;
+  left: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+  top: calc(37px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+  width: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+  height: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
   display: flex;
   align-items: center;
   >button{
     flex: 0 0 auto;
     width: 100%;
     height: 100%;
-    margin-right: 9px;
+    margin-right: calc(9px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     >img{
       width: 100%;
       height: 100%;
@@ -80,9 +79,9 @@ const textColor = computed(() => {
     flex: 0 0 auto;
     font-family: KaiTi, KaiTi;
     font-weight: 400;
-    font-size: 24px;
+    font-size: calc(24px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     color: v-bind("textColor");
-    line-height: 28px;
+    line-height: calc(28px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
   }
   >.text.needShadow{
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);