+
+
+
+
+
\ No newline at end of file
diff --git a/src/directives/index.js b/src/directives/index.js
new file mode 100644
index 0000000..b93c016
--- /dev/null
+++ b/src/directives/index.js
@@ -0,0 +1,20 @@
+import { useIntersectionObserver } from '@vueuse/core'
+
+// 定义懒加载插件
+export const lazyPlugin = {
+ install(app) {
+ app.directive('img-lazy', {
+ mounted(el, binding) {
+ // el:指令绑定的那个元素 img
+ // bingding:binding.value 指令等于号后面绑定的表达式的值 图片url
+ const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
+ if (isIntersecting) {
+ // 进入视口区域
+ el.src = binding.value
+ stop()
+ }
+ })
+ }
+ })
+ }
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..c70e0ee
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,27 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import * as Elicons from '@element-plus/icons-vue'
+//引入Elmessage和Elloading的css样式文件
+import 'element-plus/theme-chalk/el-loading.css'
+import 'element-plus/theme-chalk/el-message.css'
+
+import '@/styles/common.scss'
+
+import App from './App.vue'
+import router from './router'
+
+// 引入悟加载指令插件并且注册
+import { lazyPlugin } from '@/directives'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+app.use(lazyPlugin)
+
+//全局注册elementplus icon
+Object.keys(Elicons).forEach((key) => {
+ app.component(key, Elicons[key])
+})
+
+app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..20e3855
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,26 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import Login from '@/views/Login/index.vue'
+import Exam from '@/views/Exam/index.vue'
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes: [
+ {
+ path: '/login',
+ component: Login
+ },
+ {
+ path: '/',
+ component: Exam
+ }
+ ],
+ // 路由滚动行为定制
+ scrollBehavior() {
+ return {
+ top: 0
+ }
+ }
+})
+
+export default router
diff --git a/src/stores/userStore.js b/src/stores/userStore.js
new file mode 100644
index 0000000..b48e035
--- /dev/null
+++ b/src/stores/userStore.js
@@ -0,0 +1,31 @@
+// 管理用户数据相关
+
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { loginAPI } from '@/apis/user'
+export const useUserStore = defineStore(
+ 'user',
+ () => {
+ // 1. 定义管理用户数据的state
+ const userInfo = ref({})
+ // 2. 定义获取接口数据的action函数
+ const getUserInfo = async ({ account, password }) => {
+ const res = await loginAPI({ account, password })
+ userInfo.value = res.result
+ }
+
+ // 退出时清除用户信息
+ const clearUserInfo = () => {
+ userInfo.value = {}
+ }
+ // 3. 以对象的格式把state和action return
+ return {
+ userInfo,
+ getUserInfo,
+ clearUserInfo
+ }
+ },
+ {
+ persist: true
+ }
+)
diff --git a/src/styles/common.scss b/src/styles/common.scss
new file mode 100644
index 0000000..3f888a7
--- /dev/null
+++ b/src/styles/common.scss
@@ -0,0 +1,104 @@
+// 重置样式
+* {
+ box-sizing: border-box;
+}
+
+html {
+ height: 100%;
+ font-size: 14px;
+}
+body {
+ height: 100%;
+ color: #333;
+ min-width: 1240px;
+ font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI',
+ 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
+ sans-serif;
+}
+body,
+ul,
+h1,
+h3,
+h4,
+p,
+dl,
+dd {
+ padding: 0;
+ margin: 0;
+}
+a {
+ text-decoration: none;
+ color: #333;
+ outline: none;
+}
+i {
+ font-style: normal;
+}
+input[type='text'],
+input[type='search'],
+input[type='password'],
+input[type='checkbox'] {
+ padding: 0;
+ outline: none;
+ border: none;
+ -webkit-appearance: none;
+ &::placeholder {
+ color: #ccc;
+ }
+}
+img {
+ max-width: 100%;
+ max-height: 100%;
+ vertical-align: middle;
+ background: #ebebeb url('@/assets/images/200.png') no-repeat center / contain;
+}
+ul {
+ list-style: none;
+}
+
+#app {
+ background: #f5f5f5;
+ user-select: none;
+}
+
+.container {
+ width: 1240px;
+ margin: 0 auto;
+ position: relative;
+}
+.ellipsis {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.ellipsis-2 {
+ word-break: break-all;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+}
+
+.fl {
+ float: left;
+}
+
+.fr {
+ float: right;
+}
+
+.clearfix:after {
+ content: '.';
+ display: block;
+ visibility: hidden;
+ height: 0;
+ line-height: 0;
+ clear: both;
+}
+
+// reset element
+.el-breadcrumb__inner.is-link {
+ font-weight: 400 !important;
+}
diff --git a/src/styles/element/index.scss b/src/styles/element/index.scss
new file mode 100644
index 0000000..fe904ff
--- /dev/null
+++ b/src/styles/element/index.scss
@@ -0,0 +1,17 @@
+/* 只需要重写你需要的即可 */
+@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ( // 主色
+ 'base': #129AFE,
+ ),
+ 'success': ( // 成功色
+ 'base': #1dc779,
+ ),
+ 'warning': ( // 警告色
+ 'base': #ffb302,
+ ),
+ 'danger': ( // 危险色
+ 'base': #e26237,
+ ),
+ 'error': ( // 错误色
+ 'base': #cf4444,
+ ),
+ ))
\ No newline at end of file
diff --git a/src/styles/var.scss b/src/styles/var.scss
new file mode 100644
index 0000000..95a2e33
--- /dev/null
+++ b/src/styles/var.scss
@@ -0,0 +1,5 @@
+$xtxColor: #129AFE;
+$helpColor: #e26237;
+$sucColor: #1dc779;
+$warnColor: #ffb302;
+$priceColor: #cf4444;
\ No newline at end of file
diff --git a/src/utils/http.js b/src/utils/http.js
new file mode 100644
index 0000000..ed874fd
--- /dev/null
+++ b/src/utils/http.js
@@ -0,0 +1,18 @@
+import axios from 'axios'
+
+const http = axios.create({
+ baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
+ timeout: 5000
+})
+
+// axios请求拦截器
+http.interceptors.request.use(config => {
+ return config
+}, e => Promise.reject(e))
+
+// axios响应式拦截器
+http.interceptors.response.use(res => res.data, e => {
+ return Promise.reject(e)
+})
+
+export default http
\ No newline at end of file
diff --git a/src/views/Exam/index.vue b/src/views/Exam/index.vue
new file mode 100644
index 0000000..efb97ea
--- /dev/null
+++ b/src/views/Exam/index.vue
@@ -0,0 +1,191 @@
+
+
+ ![]()
+
+
+
+
+ -
+
-
+
+
+
+
+
+
+ 症状自评量表-SCL90是世界上最著名的心理健康测试量表之一，是当前使用最为广泛的精神障碍和心理疾病门诊检查量表。SCL90协助我们从十个方面来了解自己的心理健康程度。
+症状自评量表（Self-reporting + Inventory)，又名90项症状清单（SCL-90），时也叫做Hopkin's症状清单（HSCL，编制年代早于SCL-90，作者为同一人，HCSL最早版编于1954年）。于1975年编制，其作者是德若伽提斯（L.R.Derogatis)。该量表共有90个项目，包含有较广泛的精神病症状学内容，从感觉、情感、思维、意识、行为直至生活习惯、人际关系、饮食睡眠等，均有涉及，并采用10个因子分别反映10个方面的心理症状情况。 +
+
+
+
+
+ 上一题
+
+
+ 下一题
+
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+
+
+
+ {{ questionNum + 1 + '、' + currentQuestion.question }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..74b79f8
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,60 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueSetupExtend from 'vite-plugin-vue-setup-extend'
+
+// element-plus按需要导入
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [
+ vue(),
+ vueSetupExtend(),
+ AutoImport({
+ //自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
+ imports: ['vue', 'vue-router', 'pinia'],
+ resolvers: [
+ IconsResolver({
+ prefix: 'Icon'
+ }),
+ ElementPlusResolver()
+ ]
+ }),
+ Components({
+ // 配置element-plus采用sass样式配置系统
+ resolvers: [
+ IconsResolver({
+ enabledCollections: ['ep']
+ }),
+ ElementPlusResolver({ importStyle: 'sass' })
+ ]
+ }),
+ Icons({
+ autoInstall: true
+ })
+ ],
+ resolve: {
+ // 实际路径转换 @ -> src
+ alias: {
+ '@': fileURLToPath(new URL('./src', import.meta.url))
+ }
+ },
+ css: {
+ preprocessorOptions: {
+ scss: {
+ // 自动导入定制化样式文件进行样式覆盖
+ additionalData: `
+ @use "@/styles/element/index.scss" as *;
+ @use "@/styles/var.scss" as *;
+ `
+ }
+ }
+ }
+})
+
+
+
+
+
+
+
+
+
+
+ 点击登录
+
+
+