完成适配移动端

pages/user/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="xl:w-screen-xl m-auto py-4 my-20">
+  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
     <el-page-header :icon="ArrowLeft" @back="goBack">
       <template #content>
         <span class="text-large font-600"> 用户中心</span>
@@ -8,10 +8,10 @@
         <nuxt-link to="/user/modify" class="text-gray-400 text-sm">修改资料</nuxt-link>
       </template>
       <div class="login-layout mt-10 sm:w-screen-xl w-full">
-        <div class="m-auto flex sm:flex-row flex-col sm:px-0 px-3">
+        <div class="m-auto flex sm:flex-row flex-col sm:px-0">
           <div class="flash bg-white rounded-lg w-full">
             <div class="lg:w-screen-lg w-full sm:px-4 sm:py-4 mb-10 mt-5">
-              <el-descriptions title="用户资料" :column="2" class="px-4" border>
+              <el-descriptions :column="columnClasses" border class="px-4" title="用户资料">
                 <el-descriptions-item
                     label="头像"
                 >
@@ -42,6 +42,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { computed } from 'vue';
 import {ArrowLeft, View, Search} from '@element-plus/icons-vue'
 import useFormData from '@/utils/use-form-data';
 import type {User} from '@/api/system/user/model';
@@ -100,6 +101,15 @@ const onSubmit = () => {
   });
 }
 
+const columnClasses = computed(() => {
+  const width = window.innerWidth;
+  if (width < 640) { // 小于 640px 时为 1 列
+    return 1;
+  } else { // 大于等于 1024px 时为 4 列
+    return 2;
+  }
+});
+
 watch(
     () => route.path,
     (path) => {