自适应

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@traptitech/markdown-it-katex": "^3.6.0",
+    "amfe-flexible": "^2.2.1",
     "axios": "^1.4.0",
     "echarts": "^5.4.3",
     "highlight.js": "^11.8.0",
@@ -32,13 +33,14 @@
     "@vue/eslint-config-prettier": "^7.1.0",
     "eslint": "^8.39.0",
     "eslint-plugin-vue": "^9.11.0",
+    "postcss-pxtorem": "^6.0.0",
     "prettier": "^2.8.8",
     "sass": "^1.63.6",
     "sass-loader": "^13.3.2",
     "unplugin-vue-components": "^0.25.1",
     "vite": "^4.3.9",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-windicss": "^1.9.0",
+    "vite-plugin-windicss": "^1.9.1",
     "windicss": "^3.5.6"
   }
 }

src/main.js

@@ -1,7 +1,7 @@
 import "./assets/css/main.css";
 import 'virtual:svg-icons-register';
 import 'virtual:windi.css'
-import './assets/js/rem';
+// import './assets/js/rem';
 
 import { createApp } from "vue";
 import { createPinia } from "pinia";
@@ -12,6 +12,8 @@ import { registerSvgIcon } from './icons/index.js'
 import httpConfig from "./io/httpConfig";
 import 'vant/es/toast/style';
 
+import 'amfe-flexible'
+
 
 
 const app = createApp(App);

src/views/home/index.vue

@@ -1,23 +1,21 @@
 <template>
-  <div class="page">
-    移动端首页
+  <div class="page px-52px">
+    <div class="text-45px">移动端首页</div>
+    <div class="text-22px">在AI助理板块，用户可以上传文件给AI翻阅并帮助您解决问题，您可以自己输入关键字或者使用自带的prompt模板</div>
   </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
-import { showToast } from 'vant';
+import { onMounted } from 'vue'
+import { showToast } from 'vant'
 
-onMounted(()=>{
+onMounted(() => {
   // showToast('页面初始化');
-});
-
+})
 </script>
 
 <style lang="scss" scoped>
-.page{
-  width: 7.5rem;
-  height: 1rem;
-  font-size: .22rem;
+.page {
+
 }
-</style>
+</style>

vite.config.js

@@ -12,6 +12,8 @@ const path = require('path')
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 import hostAPI from './src/config/host.config'
 
+import postcssPxtoRem from 'postcss-pxtorem'
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -39,6 +41,19 @@ export default defineConfig({
       scss: {
         additionalData: `@import "@/assets/css/mixin.scss";`
       }
+    },
+    postcss: {
+      plugins: [
+        postcssPxtoRem({
+          rootValue: 75, 
+          unitPrecision: 5,
+          selectorBlackList: [],  // 忽略转换正则匹配项
+          propList: ['*'],
+          replace: true,
+          mediaQuery: false,
+          minPixelValue: 0
+        })  
+      ]
     }
   },
   server: {