chore

package.json

@@ -24,6 +24,7 @@
     "axios": "^1.2.2",
     "element-plus": "^2.2.28",
     "tinymce": "^6.3.1",
+    "vant": "^4.1.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },

src/App.vue

@@ -12,18 +12,12 @@ if (UserRole === 'other') {
 <template>
   <el-config-provider :message="{ max: 3 }" :z-index="100" :locale="zhCn" namespace="ep">
     <suspense>
-      <div class="bg w-full h-672px flex justify-center items-center">
-        <!-- try to fix auto complete -->
-        <div class="hidden">
-          <input type="text">
-          <input type="text">
-          <input type="text">
-        </div>
+      <div class="bg-hex-f2f2f295  w-full h-100vh flex flex-col justify-start items-center">
         <router-view></router-view>
       </div>
 
       <template #fallback>
-        <div v-loading="true" class="w-full h-672px" />
+        <div v-loading="true" class="w-full h-full" />
       </template>
     </suspense>
   </el-config-provider>

src/components/teacher-card/index.vue

@@ -10,7 +10,7 @@ function handleClickConsult() {
 </script>
 
 <template>
-  <div class="bg-white w-370px h-160px rounded-md box_shadow flex flex-col justify-between p-4">
+  <div class="bg-white w-370px h-130px rounded-md box_shadow flex flex-col justify-between p-3">
     <div class="flex items-center justify-between">
       <div class="flex space-x-4 items-center">
         <el-avatar :size="48" :src="d.dxp_user_avatar"></el-avatar>

src/pages/admin/home.vue

@@ -12,18 +12,23 @@ const teacherList = (await request({
   }
 })).data?.page_data
 
+
+function onClickLeft() {
+
+}
 </script>
 
 <template>
-  <div class="h-640px bg-hex-f2f2f295 flex justify-center">
-    <div class="w-1000px h-full overflow-hidden">
-      <img v-show="imgSrc" :src="imgSrc" class="w-full h-full max-h-640px object-contain">
+  <div class=" flex flex-col justify-start ">
+    <van-nav-bar title="心理健康" left-text="" left-arrow @click-left="onClickLeft" style="--van-nav-bar-background:#397FF6;--van-nav-bar-icon-color:#fff;--van-nav-bar-title-text-color:#fff;--van-nav-bar-title-font-size:18px;" />
+    <div class="w-full">
+      <img v-show="imgSrc" :src="imgSrc" class="w-full object-contain">
     </div>
     <div
-      class="w-400px h-full overflow-y-auto flex flex-col items-center space-y-4 py-4 scrollbar scrollbar-thin scrollbar-thumb-rounded-md scrollbar-thumb-gray-200 scrollbar-track-transparent">
+      class="w-full h-full overflow-y-auto flex flex-col items-center space-y-4 py-4 scrollbar scrollbar-thin scrollbar-thumb-rounded-md scrollbar-thumb-gray-200 scrollbar-track-transparent">
       <el-empty v-if="!teacherList?.length" description="今天暂无排班老师"></el-empty>
       <teacher-card v-for="item in teacherList" class="flex-none" :d="item">
-        <el-tag :type="item.online ? 'success' : 'danger'" >
+        <el-tag :type="item.online ? 'success' : 'danger'">
           {{ item.online ? '在 线' : '离 线' }}
         </el-tag>
       </teacher-card>

src/pages/student/home.vue

@@ -12,17 +12,22 @@ const teacherList = (await request({
   }
 })).data?.page_data
 
+function onClickLeft() {
+
+}
 </script>
 
 <template>
-  <div class="h-640px bg-hex-f2f2f295 flex justify-center">
-    <div class="w-1000px h-full overflow-hidden">
-      <img v-show="imgSrc" :src="imgSrc" class="w-full h-full max-h-640px object-contain">
+  <div class=" flex flex-col justify-start ">
+    <van-nav-bar title="心理健康" left-text="" left-arrow @click-left="onClickLeft" style="--van-nav-bar-background:#397FF6;--van-nav-bar-icon-color:#fff;--van-nav-bar-title-text-color:#fff;--van-nav-bar-title-font-size:18px;" />
+    <div class="w-full">
+      <img v-show="imgSrc" :src="imgSrc" class="w-full object-contain">
     </div>
     <div
-      class="w-400px h-full overflow-y-auto flex flex-col items-center space-y-4 py-4 scrollbar scrollbar-thin scrollbar-thumb-rounded-md scrollbar-thumb-gray-200 scrollbar-track-transparent">
+      class="w-full h-full overflow-y-auto flex flex-col items-center space-y-4 py-4 scrollbar scrollbar-thin scrollbar-thumb-rounded-md scrollbar-thumb-gray-200 scrollbar-track-transparent">
       <el-empty v-if="!teacherList?.length" description="今天暂无排班老师"></el-empty>
-      <teacher-card v-for="item in teacherList" class="flex-none" :d="item"></teacher-card>
+      <teacher-card v-for="item in teacherList" class="flex-none" :d="item">
+      </teacher-card>
     </div>
   </div>
 </template>

vite.config.ts

@@ -4,7 +4,7 @@ import vue from '@vitejs/plugin-vue'
 import WindiCss from 'vite-plugin-windicss'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { ElementPlusResolver, VantResolver } from 'unplugin-vue-components/resolvers'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import ConditionalCompile from './plugins/vite-plugin-conditional-compile'
@@ -51,7 +51,7 @@ export default defineConfig({
         // 'src/store',
         'src/utils',
       ],
-      resolvers: [ElementPlusResolver()],
+      resolvers: [ElementPlusResolver(),VantResolver()],
       vueTemplate: true,
       eslintrc: {
         enabled: true,
@@ -67,7 +67,7 @@ export default defineConfig({
       extensions: ['vue', 'md'],
       // allow auto import and register components used in markdown
       include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-      resolvers: [ElementPlusResolver({ importStyle: 'sass' }), IconsResolver()],
+      resolvers: [ElementPlusResolver({ importStyle: 'sass' }), IconsResolver(),VantResolver()],
     }),
     Icons({
       compiler: 'vue3',