初始化代码
This commit is contained in:
commit
d23b8af9cd
|
|
@ -0,0 +1,17 @@
|
|||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-prettier/skip-formatting'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest'
|
||||
},
|
||||
rules: {
|
||||
'vue/multi-word-component-names': 0 //不强制要求组件命名
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"Vue.vscode-typescript-vue-plugin",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
# mental-health-student
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>云舒-心理健康平台-学生端</title>
|
||||
<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"name": "mental-health-student",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@vueuse/core": "^10.7.1",
|
||||
"axios": "^1.6.3",
|
||||
"dayjs": "^1.11.10",
|
||||
"element-plus": "^2.6.2",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.3.11",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.3.3",
|
||||
"@vitejs/plugin-vue": "^4.5.2",
|
||||
"@vue/eslint-config-prettier": "^8.0.0",
|
||||
"eslint": "^8.49.0",
|
||||
"eslint-plugin-vue": "^9.17.0",
|
||||
"prettier": "^3.0.3",
|
||||
"sass": "^1.69.6",
|
||||
"unplugin-auto-import": "^0.17.3",
|
||||
"unplugin-icons": "^0.18.5",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^5.0.10",
|
||||
"vite-plugin-vue-setup-extend": "^0.4.0"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 一级路由出口组件 -->
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.test {
|
||||
color: $priceColor
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
// 封装所有和用户相关的接口函数
|
||||
import request from '@/utils/http'
|
||||
|
||||
export const loginAPI = ({ account, password }) => {
|
||||
return request({
|
||||
url: '/login',
|
||||
method: 'POST',
|
||||
data: {
|
||||
account,
|
||||
password
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export const getLikeListAPI = ({ limit = 4 }) => {
|
||||
return request({
|
||||
url: '/goods/relevant',
|
||||
params: {
|
||||
limit
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
|
|
@ -0,0 +1,35 @@
|
|||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { useMouseInElement } from '@vueuse/core'
|
||||
|
||||
// 图片列表
|
||||
const imageList = [
|
||||
"https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
|
||||
"https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
|
||||
"https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
|
||||
"https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
|
||||
"https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg"
|
||||
]
|
||||
|
||||
// 小图切换大图显示
|
||||
const activeIndex = ref(0)
|
||||
const enterHandler = (i) => {
|
||||
activeIndex.value = i
|
||||
}
|
||||
|
||||
// 获取鼠标相对位置
|
||||
const target = ref(null)
|
||||
const { elementX, elementY, isOutside } = useMouseInElement(target)
|
||||
|
||||
const left = ref(0)
|
||||
const top = ref(0)
|
||||
watch([elementX, elementY], () => {
|
||||
// 有效范围内控制滑块距离
|
||||
// 横向
|
||||
if (elementX.value > 100 && elementX.value < 300) {
|
||||
left.value = elementX.value - 100
|
||||
}
|
||||
// 纵向
|
||||
if (elementY.value > 100 && elementY.value < 300) {
|
||||
top.value = elementY.value - 100
|
||||
}
|
||||
// 边界处理
|
||||
if (elementX.value > 300) {
|
||||
left.value = 200
|
||||
}
|
||||
if (elementX.value < 100) {
|
||||
left.value = 0
|
||||
}
|
||||
if (elementY.value > 300) {
|
||||
top.value = 200
|
||||
}
|
||||
if (elementY.value < 100) {
|
||||
top.value = 0
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="goods-image">
|
||||
<!-- 左侧大图-->
|
||||
<div class="middle" ref="target">
|
||||
<img :src="imageList[activeIndex]" alt="" />
|
||||
<!-- 蒙层小滑块 -->
|
||||
<div class="layer" :style="{ left: `${left}px`, top: `${top}px` }"></div>
|
||||
</div>
|
||||
<!-- 小图列表 -->
|
||||
<ul class="small">
|
||||
<li v-for="(img, i) in imageList" :key="i" @mouseenter="enterHandler(i)" :class="{ active: i === activeIndex }">
|
||||
<img :src="img" alt="" />
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 放大镜大图 -->
|
||||
<div class="large" :style="[
|
||||
{
|
||||
backgroundImage: `url(${imageList[0]})`,
|
||||
backgroundPositionX: `0px`,
|
||||
backgroundPositionY: `0px`,
|
||||
},
|
||||
]" v-show="false"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goods-image {
|
||||
width: 480px;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
.middle {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.large {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 412px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
z-index: 500;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
background-repeat: no-repeat;
|
||||
// 背景图:盒子的大小 = 2:1 将来控制背景图的移动来实现放大的效果查看 background-position
|
||||
background-size: 800px 800px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.layer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
// 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.small {
|
||||
width: 80px;
|
||||
|
||||
li {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
margin-left: 12px;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
border: 2px solid $xtxColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -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')
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
}
|
||||
)
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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,
|
||||
),
|
||||
))
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
$xtxColor: #129AFE;
|
||||
$helpColor: #e26237;
|
||||
$sucColor: #1dc779;
|
||||
$warnColor: #ffb302;
|
||||
$priceColor: #cf4444;
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<template>
|
||||
<el-container class="container-exam">
|
||||
<el-header class="header">
|
||||
SCL-90症状自评量表_专业焦虑与抑郁测试
|
||||
</el-header>
|
||||
<el-main class="main">
|
||||
<el-card class="card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p>症状自评量表-SCL90是世界上最著名的心理健康测试量表之一，是当前使用最为广泛的精神障碍和心理疾病门诊检查量表。SCL90协助我们从十个方面来了解自己的心理健康程度。</p>
|
||||
<p>症状自评量表（Self-reporting
|
||||
Inventory)，又名90项症状清单（SCL-90），时也叫做Hopkin's症状清单（HSCL，编制年代早于SCL-90，作者为同一人，HCSL最早版编于1954年）。于1975年编制，其作者是德若伽提斯（L.R.Derogatis)。该量表共有90个项目，包含有较广泛的精神病症状学内容，从感觉、情感、思维、意识、行为直至生活习惯、人际关系、饮食睡眠等，均有涉及，并采用10个因子分别反映10个方面的心理症状情况。
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="subject-btn">
|
||||
<el-button-group>
|
||||
<el-button type="primary" size="large" @click="previous" :disabled="preDisable">
|
||||
<el-icon class="el-icon--left">
|
||||
<ArrowLeft />
|
||||
</el-icon>上一题
|
||||
</el-button>
|
||||
<el-button type="primary" size="large" @click="next" :disabled="nextDisable">
|
||||
下一题<el-icon class="el-icon--right">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<div class="subject-content">
|
||||
<div class="subject-title">{{ questionNum + 1 + '、' + currentQuestion.question }}</div>
|
||||
<el-radio-group v-model="currentQuestion.answer">
|
||||
<el-radio :value="item.value" v-for="item in currentQuestion.options" :key="item.id">
|
||||
{{ item.name }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<template #footer v-if="nextDisable">
|
||||
<div class="submit-footer">
|
||||
<el-button class="submit-btn" type="primary" size="large">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const questionList = ref([
|
||||
{
|
||||
id: 1,
|
||||
question: '是否头疼',
|
||||
options: [
|
||||
{ id: 1, name: '没有', value: 1 },
|
||||
{ id: 2, name: '很轻', value: 2 },
|
||||
{ id: 3, name: '中等', value: 3 },
|
||||
{ id: 4, name: '偏重', value: 4 },
|
||||
{ id: 5, name: '严重', value: 5 },
|
||||
{ id: 6, name: '一般般', value: 6 },
|
||||
],
|
||||
answer: null
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
question: '经常感到神经过敏、心中不踏实',
|
||||
options: [
|
||||
{ id: 1, name: '没有', value: 1 },
|
||||
{ id: 2, name: '很轻', value: 2 },
|
||||
{ id: 3, name: '中等', value: 3 },
|
||||
{ id: 4, name: '偏重', value: 4 },
|
||||
{ id: 5, name: '严重', value: 5 },
|
||||
],
|
||||
answer: null
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
question: '测试',
|
||||
options: [
|
||||
{ id: 1, name: '没有', value: 1 },
|
||||
{ id: 2, name: '很轻', value: 2 }
|
||||
],
|
||||
answer: null
|
||||
}
|
||||
])
|
||||
const currentQuestion = ref(questionList.value[0])
|
||||
|
||||
const questionNum = ref(0)
|
||||
|
||||
const preDisable = computed(() => {
|
||||
return questionNum.value === 0
|
||||
})
|
||||
|
||||
function previous() {
|
||||
questionNum.value--
|
||||
if (questionNum.value <= 0) {
|
||||
questionNum.value = 0
|
||||
}
|
||||
|
||||
currentQuestion.value = questionList.value[questionNum.value]
|
||||
}
|
||||
|
||||
const nextDisable = computed(() => {
|
||||
return questionNum.value === questionList.value.length - 1
|
||||
})
|
||||
|
||||
function next() {
|
||||
questionNum.value++
|
||||
|
||||
if (questionNum.value >= questionList.value.length) {
|
||||
questionNum.value = questionList.value.length
|
||||
}
|
||||
|
||||
currentQuestion.value = questionList.value[questionNum.value]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container-exam {
|
||||
height: 100vh;
|
||||
|
||||
.header {
|
||||
height: 60px;
|
||||
color: #CDCDCD;
|
||||
background-color: #333333;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 60%;
|
||||
height: calc(100vh - 60px);
|
||||
margin: 0 auto;
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
|
||||
.card-header {
|
||||
text-indent: 2em;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.subject-btn {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.submit-footer {
|
||||
text-align: center;
|
||||
|
||||
.submit-btn {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.subject-content {
|
||||
margin-left: 50px;
|
||||
margin-top: 10px;
|
||||
height: 400px;
|
||||
|
||||
::v-deep .el-radio-group {
|
||||
display: block;
|
||||
}
|
||||
|
||||
::v-deep .el-radio {
|
||||
display: block;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.subject-title {
|
||||
color: #0F9AE0;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
<script setup>
|
||||
// 表单校验（账号名+密码）
|
||||
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { ElMessage } from 'element-plus'
|
||||
import 'element-plus/theme-chalk/el-message.css'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { useUserStore } from '@/stores/userStore'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 1. 准备表单对象
|
||||
const form = ref({
|
||||
account: '18610848230',
|
||||
password: '123456',
|
||||
})
|
||||
|
||||
// 2. 准备规则对象
|
||||
const rules = {
|
||||
account: [
|
||||
{ required: true, message: '用户名不能为空', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' },
|
||||
{ min: 6, max: 14, message: '密码长度为6-14个字符', trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
|
||||
// 3. 获取form实例做统一校验
|
||||
const formRef = ref(null)
|
||||
const router = useRouter()
|
||||
const doLogin = () => {
|
||||
const { account, password } = form.value
|
||||
// 调用实例方法
|
||||
formRef.value.validate(async (valid) => {
|
||||
// valid: 所有表单都通过校验 才为true
|
||||
console.log(valid)
|
||||
// 以valid做为判断条件 如果通过校验才执行登录逻辑
|
||||
if (valid) {
|
||||
// TODO LOGIN
|
||||
await userStore.getUserInfo({ account, password })
|
||||
// 1. 提示用户
|
||||
ElMessage({ type: 'success', message: '登录成功' })
|
||||
// 2. 跳转首页
|
||||
router.replace({ path: '/' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 1. 用户名和密码 只需要通过简单的配置（看文档的方式 - 复杂功能通过多个不同组件拆解）
|
||||
// 2. 同意协议 自定义规则 validator:(rule,value,callback)=>{}
|
||||
// 3. 统一校验 通过调用form实例的方法 validate -> true
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<section class="login-section">
|
||||
<div class="wrapper">
|
||||
<nav>
|
||||
<a href="javascript:;">账户登录</a>
|
||||
</nav>
|
||||
<div class="account-box">
|
||||
<div class="form">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="60px" status-icon>
|
||||
<el-form-item prop="account" label="学号">
|
||||
<el-input v-model="form.account" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" label="密码">
|
||||
<el-input v-model="form.password" />
|
||||
</el-form-item>
|
||||
<el-button size="large" class="subBtn" @click="doLogin">点击登录</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.login-section {
|
||||
background: url('@/assets/images/login-bg.jpg') no-repeat center / cover;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.wrapper {
|
||||
width: 450px;
|
||||
height: 250px;
|
||||
background: #fff;
|
||||
transform: translate3d(100px, 0, 0);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 30px 30px 30px 30px;
|
||||
|
||||
nav {
|
||||
font-size: 14px;
|
||||
height: 55px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
display: flex;
|
||||
padding: 0 40px;
|
||||
text-align: right;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-box {
|
||||
.toggle {
|
||||
padding: 15px 40px;
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
color: $xtxColor;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
padding: 0 20px 20px 20px;
|
||||
|
||||
&-item {
|
||||
margin-bottom: 28px;
|
||||
|
||||
.input {
|
||||
position: relative;
|
||||
height: 36px;
|
||||
|
||||
>i {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background: #cfcdcd;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
input {
|
||||
padding-left: 44px;
|
||||
border: 1px solid #cfcdcd;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
width: 100%;
|
||||
|
||||
&.error {
|
||||
border-color: $priceColor;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:focus {
|
||||
border-color: $xtxColor;
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
font-size: 14px;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
width: 90px;
|
||||
height: 34px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
>.error {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
color: $priceColor;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.agree {
|
||||
a {
|
||||
color: #069;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
background: $xtxColor;
|
||||
|
||||
&.disabled {
|
||||
background: #cfcdcd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
padding: 20px 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.url {
|
||||
a {
|
||||
color: #999;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subBtn {
|
||||
background: $xtxColor;
|
||||
margin-left: 40px;
|
||||
width: 90%;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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 *;
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue