website/src/App.vue

<template>
  <router-view/>

</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { throttle } from './utils/throttle'

const route = useRoute()
const router = useRouter()

onMounted(() => {
  setRem()
  // 计算屏幕宽度决定pc还是移动端
  throttle(resizeChange(), 200)
  // window.addEventListener('resize', resizeChange, false)
  window.addEventListener('resize', setRem, false)
})

const resizeChange = () => {
  // 移动端页面
  if (document.body.clientWidth <= 750) {
    if (route.path.indexOf('/p_') !== -1) {
      router.replace({ path: route.path.replace('/p_', '/m_') })
    }
  } else {
    // pc端页面
    if (route.path.indexOf('/m_') !== -1) {
      router.replace({ path: route.path.replace('/m_', '/p_') })
    }
  }
}
const setRem = () => {
  const pWidth = 750
  const pre = 100
  const windowWidth = document.documentElement.clientWidth
  document.documentElement.style.fontSize = (windowWidth / pWidth) * pre + 'px'
  // console.log('rem适配：', windowWidth, (windowWidth / pWidth) * pre + 'px');
}

onUnmounted(() => {
  window.removeEventListener('resize', resizeChange, false)
  window.removeEventListener('resize', setRem, false)
})
</script>

<style scoped lang="scss">

</style>
<style lang="scss">
.van-button.van-button--normal {
  padding: 5px 15px;
  width: auto;
  height: auto;
}
/*谷歌*/
input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
    -webkit-appearance: none;
   }
   /*火狐*/
   input[type="number"] {
    -moz-appearance: textfield;
   }
</style>
<style>
.mob-wrap{
  max-width: 750px;
  margin: 0 auto;
  background-color: #fff;
  min-height: 90vh;
  /* height: 100%; */
  box-sizing: border-box;
  /* padding: 15px; */
}
.wrap-outer{
  background-image: linear-gradient(to bottom left, #ED8C0F, #EF6158, #C85384, #875892, #49557F, #2F4858 );
  /* height: 100%; */
  max-height: 100vh;
  overflow: auto;
  box-sizing: border-box;
}
</style>