From 2419afae652c13c63ddc16323817548912ca5849 Mon Sep 17 00:00:00 2001 From: wyn <wyn1234@stud.tjut.edu.cn> Date: Sun, 11 Aug 2024 10:16:46 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E6=8B=89=E5=8F=96=E6=BA=90=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E7=9A=84=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 6 + src/api/interview.ts | 9 + src/router/index.ts | 14 + src/styles/Interview.scss | 24 ++ src/views/Interview/InterviewShow.vue | 265 ++++++++++++++++++ .../components/InterviewHomepage.vue | 7 + .../Interview/components/InterviewNewone.vue | 7 + src/views/Login/components/UserLoginEnrol.vue | 2 +- 8 files changed, 333 insertions(+), 1 deletion(-) create mode 100644 src/api/interview.ts create mode 100644 src/styles/Interview.scss create mode 100644 src/views/Interview/InterviewShow.vue create mode 100644 src/views/Interview/components/InterviewHomepage.vue create mode 100644 src/views/Interview/components/InterviewNewone.vue diff --git a/components.d.ts b/components.d.ts index 21181b2..265a107 100644 --- a/components.d.ts +++ b/components.d.ts @@ -17,6 +17,8 @@ declare module 'vue' { ElCol: typeof import('element-plus/es')['ElCol'] ElContainer: typeof import('element-plus/es')['ElContainer'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] + ElForm: typeof import('element-plus/es')['ElForm'] + ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElHeader: typeof import('element-plus/es')['ElHeader'] ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] @@ -25,11 +27,15 @@ declare module 'vue' { ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElOption: typeof import('element-plus/es')['ElOption'] ElPagination: typeof import('element-plus/es')['ElPagination'] + ElProgress: typeof import('element-plus/es')['ElProgress'] ElRow: typeof import('element-plus/es')['ElRow'] ElSelect: typeof import('element-plus/es')['ElSelect'] ElTable: typeof import('element-plus/es')['ElTable'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ExampleComponent: typeof import('./src/components/ExampleComponent.vue')['default'] + InterviewHomepage: typeof import('./src/views/Interview/components/InterviewHomepage.vue')['default'] + InterviewNewone: typeof import('./src/views/Interview/components/InterviewNewone.vue')['default'] + InterviewShow: typeof import('./src/views/Interview/InterviewShow.vue')['default'] NotFound: typeof import('./src/components/NotFound.vue')['default'] NoticeDetailAndEdit: typeof import('./src/views/Notice/NoticeDetailAndEdit.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/api/interview.ts b/src/api/interview.ts new file mode 100644 index 0000000..56d843f --- /dev/null +++ b/src/api/interview.ts @@ -0,0 +1,9 @@ +export interface FormItem { + id: string; + title: string; + time: string; + location: string; + number: string; + coclusion: boolean; + movement: string; +} diff --git a/src/router/index.ts b/src/router/index.ts index 16a56ff..b3fb276 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -22,6 +22,20 @@ export const constantRoutes: RouteRecordRaw[] = [ { path: 'Notice/Edit', component: () => import('@/views/Notice/NoticeDetailAndEdit.vue') + }, + { + path: 'Interview', + component: () => import('@/views/Interview/InterviewShow.vue'), + children: [ + { + path: 'homepage', + component: () => import('@/views/Interview/components/InterviewHomepage.vue') + }, + { + path: 'newone', + component: () => import('@/views/Interview/components/InterviewNewone.vue') + } + ] } ] }, diff --git a/src/styles/Interview.scss b/src/styles/Interview.scss new file mode 100644 index 0000000..6813a52 --- /dev/null +++ b/src/styles/Interview.scss @@ -0,0 +1,24 @@ +@mixin white-box { + position: absolute; + background-color: white; + border: 0px solid transparent; + border-radius: 10px; +} +@mixin thead { + background-color: rgba(239, 239, 239, 1); + border: 2px solid rgba(239, 239, 239, 1); + font-size: 18px; + font-weight: bold; + display: flex; + justify-content: center; + align-items: center; +} +@mixin tbody { + background-color: white; + border: 2px solid rgba(239, 239, 239, 1); + font-size: 18px; + font-weight: bold; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/views/Interview/InterviewShow.vue b/src/views/Interview/InterviewShow.vue new file mode 100644 index 0000000..e6d10e6 --- /dev/null +++ b/src/views/Interview/InterviewShow.vue @@ -0,0 +1,265 @@ +<template> + <div class="search-box"> + <div class="input-name"> + <span>å§“å</span> + <el-input class="input" placeholder="请输入é¢è¯•者姓å"></el-input> + </div> + <div> + <el-button type="primary" class="button-search">æœç´¢</el-button> + <el-button class="button-renew">é‡ç½®</el-button> + </div> + </div> + <div class="percent-box"> + <div class="inner-box"> + <div class="column-comp"> + <div class="complete-percent">é¢è¯•完æˆçއ</div> + <el-progress type="circle" :percentage="80"> + <template #default="{ percentage }"> + <span class="percentage-value">{{ percentage }}%</span> + <span class="percentage-label">Progressing</span> + </template> + </el-progress> + </div> + <div class="column-pass"> + <div class="pass-percent">通过率</div> + </div> + </div> + </div> + <div class="main-box"> + <el-form :model="form" label-width="auto"> + <el-form-item> + <div class="thead-title">é¢è¯•æ ‡é¢˜</div> + <div class="thead-time">é¢è¯•æ—¶é—´</div> + <div class="thead-location">é¢è¯•地点</div> + <div class="thead-number">é¢è¯•桌å·</div> + <div class="thead-conclusion">结论</div> + <div class="thead-movement">æ“作</div> + </el-form-item> + <el-form-item v-for="p in form" :key="p.id"> + <div class="tbody-title">{{ p.title }}</div> + <div class="tbody-time">{{ p.time }}</div> + <div class="tbody-location">{{ p.location }}</div> + <div class="tbody-number">{{ p.number }}</div> + <div class="tbody-conclusion"> + <div v-show="p.coclusion" class="button-true">通过</div> + <div v-show="!p.coclusion" class="button-false">未通过</div> + </div> + <div class="tbody-movement">æ“作</div> + </el-form-item> + </el-form> + </div> +</template> +<script setup lang="ts"> +import { FormItem } from '../../api/interview'; +const form = reactive<FormItem[]>([ + { + id: 'xxxx', + title: 'xxxx', + time: 'xxxx', + location: 'xxxx', + number: 'xxxx', + coclusion: true, + movement: 'xxxx' + }, + { + id: 'xxxx', + title: 'xxxx', + time: 'xxxx', + location: 'xxxx', + number: 'xxxx', + coclusion: false, + movement: 'xxxx' + }, + { + id: 'xxxx', + title: 'xxxx', + time: 'xxxx', + location: 'xxxx', + number: 'xxxx', + coclusion: false, + movement: 'xxxx' + } +]); +</script> + +<style lang="scss" scoped> +@import '../../styles/Interview.scss'; +.search-box { + @include white-box; + top: 12%; + left: 16%; + width: 34%; + height: 20%; + .input-name { + display: flex; + align-items: center; + margin-top: 10%; + span { + font-size: 20px; + font-weight: bold; + width: 20%; + } + .input { + height: 50px; + width: 60%; + font-size: 16px; + } + } + .button-search { + margin-top: 5%; + width: 20%; + height: 40px; + margin-left: 40%; + } + .button-renew { + margin-top: 5%; + width: 20%; + height: 40px; + } +} +.percent-box { + @include white-box; + top: 12%; + left: 52%; + width: 46%; + height: 20%; + .inner-box { + display: flex; + .column-comp { + flex-direction: column; + .complete-percent { + font-size: 25px; + font-weight: bold; + margin-top: 3vh; + margin-left: 3vw; + } + } + .column-pass { + flex-direction: column; + .pass-percent { + font-size: 25px; + font-weight: bold; + margin-left: 10vw; + margin-top: 3vh; + } + } + } +} +.main-box { + @include white-box; + width: 83%; + height: 58%; + left: 15%; + top: 39%; + .el-form-item { + margin-bottom: 0; + } + .el-form { + margin-top: 5vh; + } + .thead-title { + @include thead(); + width: 12.95vw; + height: 12vh; + margin-left: 1vw; + margin-bottom: -2px; + } + .thead-time { + @include thead(); + width: 15.55vw; + height: 12vh; + margin-left: -2px; + margin-bottom: -2px; + } + .thead-location { + @include thead(); + width: 13.5vw; + height: 12vh; + margin-left: -2px; + margin-bottom: -2px; + } + .thead-number { + @include thead(); + width: 9.85vw; + height: 12vh; + margin-left: -2px; + margin-bottom: -2px; + } + .thead-conclusion { + @include thead(); + width: 14.35vw; + height: 12vh; + margin-left: -2px; + margin-bottom: -2px; + } + .thead-movement { + @include thead(); + width: 13.25vw; + height: 12vh; + margin-left: -2px; + margin-bottom: -2px; + } + .tbody-title { + @include tbody(); + width: 12.95vw; + height: 12vh; + margin-left: 1vw; + margin-bottom: -2px; + } + .tbody-time { + @include tbody(); + width: 15.55vw; + height: 12vh; + margin-left: -2px; + margin-bottom: -2px; + } + .tbody-location { + @include tbody(); + width: 13.5vw; + height: 12vh; + margin-left: -2px; + margin-bottom: -2px; + } + .tbody-number { + @include tbody(); + width: 9.85vw; + height: 12vh; + margin-left: -2px; + margin-bottom: -2px; + } + .tbody-conclusion { + @include tbody(); + width: 14.35vw; + height: 12vh; + margin-left: -2px; + margin-bottom: -2px; + } + .tbody-movement { + @include tbody(); + width: 13.25vw; + height: 12vh; + margin-left: -2px; + margin-bottom: -2px; + } + .button-true { + background-color: rgba(162, 211, 209, 1); + color: white; + width: 60%; + height: 40%; + display: flex; + justify-content: center; + align-items: center; + border-radius: 5px; + } + .button-false { + background-color: gray; + color: white; + width: 60%; + height: 40%; + display: flex; + justify-content: center; + align-items: center; + border-radius: 5px; + } +} +</style> diff --git a/src/views/Interview/components/InterviewHomepage.vue b/src/views/Interview/components/InterviewHomepage.vue new file mode 100644 index 0000000..5925059 --- /dev/null +++ b/src/views/Interview/components/InterviewHomepage.vue @@ -0,0 +1,7 @@ +<template> + <div>111</div> +</template> + +<script setup lang="ts"></script> + +<style scoped></style> diff --git a/src/views/Interview/components/InterviewNewone.vue b/src/views/Interview/components/InterviewNewone.vue new file mode 100644 index 0000000..c597030 --- /dev/null +++ b/src/views/Interview/components/InterviewNewone.vue @@ -0,0 +1,7 @@ +<template> + <div>1111</div> +</template> + +<script setup lang="ts"></script> + +<style scoped></style> diff --git a/src/views/Login/components/UserLoginEnrol.vue b/src/views/Login/components/UserLoginEnrol.vue index 170564e..7612322 100644 --- a/src/views/Login/components/UserLoginEnrol.vue +++ b/src/views/Login/components/UserLoginEnrol.vue @@ -7,7 +7,7 @@ placeholder="请输入å¦å·" :prefix-icon="Avatar" /> - <div class="error error1">*æ ¼å¼é”™è¯¯</div> + <div class="error error1">*å¦å·æ³¨å†ŒåŽä¸å¯æ›´æ”¹</div> <!-- 注æ„记得去è¦ç›¸åº”çš„å›¾æ ‡åº“ --> <el-input -- GitLab From 8c780394d7e19c33ab41874b220264b52c2e1768 Mon Sep 17 00:00:00 2001 From: wyn <wyn1234@stud.tjut.edu.cn> Date: Sun, 11 Aug 2024 20:12:23 +0800 Subject: [PATCH 2/7] =?UTF-8?q?=E4=B8=BA=E4=BA=86=E5=90=88=E5=B9=B6?= =?UTF-8?q?=E7=9A=84=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 8 - package-lock.json | 214 ++++++++++++++++++++++++++ package.json | 1 + src/components/CenterTask.vue | 2 +- src/router/index.ts | 19 +-- src/style.css | 10 +- src/styles/CenterTask.css | 6 +- src/styles/CenterTask.scss | 2 +- src/styles/Interview.scss | 1 - src/views/Interview/InterviewShow.vue | 160 +++++++++++++++---- src/views/StuHomework/StuHomework.vue | 2 +- 11 files changed, 354 insertions(+), 71 deletions(-) diff --git a/components.d.ts b/components.d.ts index 19e173f..1d1a68b 100644 --- a/components.d.ts +++ b/components.d.ts @@ -16,7 +16,6 @@ declare module 'vue' { ElButton: typeof import('element-plus/es')['ElButton'] ElCol: typeof import('element-plus/es')['ElCol'] ElContainer: typeof import('element-plus/es')['ElContainer'] - ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElForm: typeof import('element-plus/es')['ElForm'] ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElHeader: typeof import('element-plus/es')['ElHeader'] @@ -25,15 +24,8 @@ declare module 'vue' { ElMain: typeof import('element-plus/es')['ElMain'] ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] - ElOption: typeof import('element-plus/es')['ElOption'] - ElPagination: typeof import('element-plus/es')['ElPagination'] - ElProgress: typeof import('element-plus/es')['ElProgress'] ElRow: typeof import('element-plus/es')['ElRow'] - ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] - ElSelect: typeof import('element-plus/es')['ElSelect'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] - ElTable: typeof import('element-plus/es')['ElTable'] - ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ExampleComponent: typeof import('./src/components/ExampleComponent.vue')['default'] InterviewHomepage: typeof import('./src/views/Interview/components/InterviewHomepage.vue')['default'] InterviewNewone: typeof import('./src/views/Interview/components/InterviewNewone.vue')['default'] diff --git a/package-lock.json b/package-lock.json index cf08b45..346d63f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "eslint": "^9.8.0", "eslint-plugin-vue": "^9.27.0", "globals": "^15.9.0", + "naive-ui": "^2.39.0", "typescript": "^5.2.2", "typescript-eslint": "^8.0.0", "unplugin-auto-import": "^0.18.2", @@ -83,6 +84,19 @@ "node": ">=6.0.0" } }, + "node_modules/@babel/runtime": { + "version": "7.25.0", + "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.25.0.tgz", + "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==", + "dev": true, + "license": "MIT", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/types": { "version": "7.25.2", "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.25.2.tgz", @@ -96,6 +110,26 @@ "node": ">=6.9.0" } }, + "node_modules/@css-render/plugin-bem": { + "version": "0.15.14", + "resolved": "https://registry.npmmirror.com/@css-render/plugin-bem/-/plugin-bem-0.15.14.tgz", + "integrity": "sha512-QK513CJ7yEQxm/P3EwsI+d+ha8kSOcjGvD6SevM41neEMxdULE+18iuQK6tEChAWMOQNQPLG/Rw3Khb69r5neg==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "css-render": "~0.15.14" + } + }, + "node_modules/@css-render/vue3-ssr": { + "version": "0.15.14", + "resolved": "https://registry.npmmirror.com/@css-render/vue3-ssr/-/vue3-ssr-0.15.14.tgz", + "integrity": "sha512-//8027GSbxE9n3QlD73xFY6z4ZbHbvrOVB7AO6hsmrEzGbg+h2A09HboUyDgu+xsmj7JnvJD39Irt+2D0+iV8g==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "vue": "^3.0.11" + } + }, "node_modules/@ctrl/tinycolor": { "version": "3.6.1", "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz", @@ -113,6 +147,13 @@ "vue": "^3.2.0" } }, + "node_modules/@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", + "dev": true, + "license": "MIT" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -731,6 +772,13 @@ "node": ">=10" } }, + "node_modules/@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmmirror.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==", + "dev": true, + "license": "Apache-2.0" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1003,6 +1051,13 @@ "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz", "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==" }, + "node_modules/@types/katex": { + "version": "0.16.7", + "resolved": "https://registry.npmmirror.com/@types/katex/-/katex-0.16.7.tgz", + "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/lodash": { "version": "4.17.7", "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.7.tgz", @@ -1735,6 +1790,24 @@ "node": ">= 8" } }, + "node_modules/css-render": { + "version": "0.15.14", + "resolved": "https://registry.npmmirror.com/css-render/-/css-render-0.15.14.tgz", + "integrity": "sha512-9nF4PdUle+5ta4W5SyZdLCCmFd37uVimSjg1evcTqKJCyvCEEj12WKzOSBNak6r4im4J4iYXKH1OWpUV5LBYFg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@emotion/hash": "~0.8.0", + "csstype": "~3.0.5" + } + }, + "node_modules/css-render/node_modules/csstype": { + "version": "3.0.11", + "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.0.11.tgz", + "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==", + "dev": true, + "license": "MIT" + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz", @@ -1752,6 +1825,33 @@ "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, + "node_modules/date-fns-tz": { + "version": "2.0.1", + "resolved": "https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-2.0.1.tgz", + "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "date-fns": "2.x" + } + }, "node_modules/dayjs": { "version": "1.11.12", "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.12.tgz", @@ -2110,6 +2210,13 @@ "node": ">=0.10.0" } }, + "node_modules/evtd": { + "version": "0.2.4", + "resolved": "https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz", + "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==", + "dev": true, + "license": "MIT" + }, "node_modules/execa": { "version": "5.1.1", "resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz", @@ -2353,6 +2460,16 @@ "he": "bin/he" } }, + "node_modules/highlight.js": { + "version": "11.10.0", + "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.10.0.tgz", + "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/human-signals": { "version": "2.1.0", "resolved": "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz", @@ -2682,6 +2799,37 @@ "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==", "dev": true }, + "node_modules/naive-ui": { + "version": "2.39.0", + "resolved": "https://registry.npmmirror.com/naive-ui/-/naive-ui-2.39.0.tgz", + "integrity": "sha512-5oUJzRG+rtLSH8eRU+fJvVYiQids2BxF9jp+fwGoAqHOptEINrBlgBu9uy+95RHE5FLJ7Q/z41o+qkoGnUrKxQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@css-render/plugin-bem": "^0.15.12", + "@css-render/vue3-ssr": "^0.15.12", + "@types/katex": "^0.16.2", + "@types/lodash": "^4.14.198", + "@types/lodash-es": "^4.17.9", + "async-validator": "^4.2.5", + "css-render": "^0.15.12", + "csstype": "^3.1.3", + "date-fns": "^2.30.0", + "date-fns-tz": "^2.0.0", + "evtd": "^0.2.4", + "highlight.js": "^11.8.0", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "seemly": "^0.3.8", + "treemate": "^0.3.11", + "vdirs": "^0.1.8", + "vooks": "^0.2.12", + "vueuc": "^0.4.58" + }, + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz", @@ -3031,6 +3179,13 @@ "node": ">=8.10.0" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", + "dev": true, + "license": "MIT" + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz", @@ -3129,6 +3284,13 @@ "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==", "dev": true }, + "node_modules/seemly": { + "version": "0.3.8", + "resolved": "https://registry.npmmirror.com/seemly/-/seemly-0.3.8.tgz", + "integrity": "sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==", + "dev": true, + "license": "MIT" + }, "node_modules/semver": { "version": "7.6.3", "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.3.tgz", @@ -3271,6 +3433,13 @@ "node": ">=8.0" } }, + "node_modules/treemate": { + "version": "0.3.11", + "resolved": "https://registry.npmmirror.com/treemate/-/treemate-0.3.11.tgz", + "integrity": "sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==", + "dev": true, + "license": "MIT" + }, "node_modules/ts-api-utils": { "version": "1.3.0", "resolved": "https://registry.npmmirror.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz", @@ -3543,6 +3712,19 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, + "node_modules/vdirs": { + "version": "0.1.8", + "resolved": "https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz", + "integrity": "sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==", + "dev": true, + "license": "MIT", + "dependencies": { + "evtd": "^0.2.2" + }, + "peerDependencies": { + "vue": "^3.0.11" + } + }, "node_modules/vite": { "version": "5.3.5", "resolved": "https://registry.npmmirror.com/vite/-/vite-5.3.5.tgz", @@ -3598,6 +3780,19 @@ } } }, + "node_modules/vooks": { + "version": "0.2.12", + "resolved": "https://registry.npmmirror.com/vooks/-/vooks-0.2.12.tgz", + "integrity": "sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "evtd": "^0.2.2" + }, + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/vscode-uri": { "version": "3.0.8", "resolved": "https://registry.npmmirror.com/vscode-uri/-/vscode-uri-3.0.8.tgz", @@ -3725,6 +3920,25 @@ "typescript": ">=5.0.0" } }, + "node_modules/vueuc": { + "version": "0.4.58", + "resolved": "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.58.tgz", + "integrity": "sha512-Wnj/N8WbPRSxSt+9ji1jtDHPzda5h2OH/0sFBhvdxDRuyCZbjGg3/cKMaKqEoe+dErTexG2R+i6Q8S/Toq1MYg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@css-render/vue3-ssr": "^0.15.10", + "@juggle/resize-observer": "^3.3.1", + "css-render": "^0.15.10", + "evtd": "^0.2.4", + "seemly": "^0.3.6", + "vdirs": "^0.1.4", + "vooks": "^0.2.4" + }, + "peerDependencies": { + "vue": "^3.0.11" + } + }, "node_modules/webpack-sources": { "version": "3.2.3", "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz", diff --git a/package.json b/package.json index 80f5bdc..51773a4 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "eslint": "^9.8.0", "eslint-plugin-vue": "^9.27.0", "globals": "^15.9.0", + "naive-ui": "^2.39.0", "typescript": "^5.2.2", "typescript-eslint": "^8.0.0", "unplugin-auto-import": "^0.18.2", diff --git a/src/components/CenterTask.vue b/src/components/CenterTask.vue index a2b1a37..00a8300 100644 --- a/src/components/CenterTask.vue +++ b/src/components/CenterTask.vue @@ -6,7 +6,7 @@ <el-row class="tac"> <el-col :span="12"> <div class="logo"> - <img src="../assets/logo.png" style="width: 220px; height: 200px" /> + <img src="../assets/logo.png" style="width: 200px; height: 200px" /> </div> <el-menu router diff --git a/src/router/index.ts b/src/router/index.ts index c736dea..9e6bd2e 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -6,18 +6,6 @@ export const constantRoutes: RouteRecordRaw[] = [ component: () => import('@/views/Login/UserLogin.vue') }, - { - path: '/', - component: () => import('@/components/CenterTask.vue'), - children: [ - { - path: '/Homework', - component: () => import('@/views/StuHomework/StuHomework.vue') - }, - { path: '/Homework/HomeInfo', component: () => import('@/views/StuHomework/WorkInfo.vue') } - ] - }, - { path: '/', component: () => import('@/components/CenterTask.vue'), @@ -48,7 +36,12 @@ export const constantRoutes: RouteRecordRaw[] = [ component: () => import('@/views/Interview/components/InterviewNewone.vue') } ] - } + }, + { + path: '/Homework', + component: () => import('@/views/StuHomework/StuHomework.vue') + }, + { path: '/Homework/HomeInfo', component: () => import('@/views/StuHomework/WorkInfo.vue') } ] }, { diff --git a/src/style.css b/src/style.css index 2e29fa8..e772866 100644 --- a/src/style.css +++ b/src/style.css @@ -18,14 +18,6 @@ a:hover { color: #535bf2; } -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - h1 { font-size: 3.2em; line-height: 1.1; @@ -55,7 +47,7 @@ button:focus-visible { } #app { - max-width: 1280px; + min-width: 1440px; margin: 0; padding: 0; text-align: center; diff --git a/src/styles/CenterTask.css b/src/styles/CenterTask.css index af609a1..af2b1a5 100644 --- a/src/styles/CenterTask.css +++ b/src/styles/CenterTask.css @@ -29,7 +29,7 @@ } li.el-menu-item { - width: 250px; + width: 200px; padding: 50px 10px; } @@ -79,7 +79,7 @@ li.el-menu-item { position: absolute; width: 100vw; height: 100vh; /* ç¡®ä¿èƒŒæ™¯é«˜åº¦è¦†ç›–æ•´ä¸ªè§†å£ */ - background: url("../assets/background.jpg") no-repeat center center; /* 居䏿˜¾ç¤ºèƒŒæ™¯å›¾ç‰‡ */ + background: url('../assets/background.jpg') no-repeat center center; /* 居䏿˜¾ç¤ºèƒŒæ™¯å›¾ç‰‡ */ background-size: cover; /* ç¡®ä¿èƒŒæ™¯å›¾ç‰‡è¦†ç›–整个容器 */ z-index: -1; -}/*# sourceMappingURL=CenterTask.css.map */ \ No newline at end of file +} /*# sourceMappingURL=CenterTask.css.map */ diff --git a/src/styles/CenterTask.scss b/src/styles/CenterTask.scss index 4dd9943..156318a 100644 --- a/src/styles/CenterTask.scss +++ b/src/styles/CenterTask.scss @@ -7,7 +7,7 @@ width: 200px; } .el-col-12 { - max-width: 100%; + width: 100%; height: 100vh; } .el-menu { diff --git a/src/styles/Interview.scss b/src/styles/Interview.scss index 6813a52..94ec913 100644 --- a/src/styles/Interview.scss +++ b/src/styles/Interview.scss @@ -1,5 +1,4 @@ @mixin white-box { - position: absolute; background-color: white; border: 0px solid transparent; border-radius: 10px; diff --git a/src/views/Interview/InterviewShow.vue b/src/views/Interview/InterviewShow.vue index e6d10e6..bd43549 100644 --- a/src/views/Interview/InterviewShow.vue +++ b/src/views/Interview/InterviewShow.vue @@ -1,27 +1,54 @@ <template> - <div class="search-box"> - <div class="input-name"> - <span>å§“å</span> - <el-input class="input" placeholder="请输入é¢è¯•者姓å"></el-input> - </div> - <div> - <el-button type="primary" class="button-search">æœç´¢</el-button> - <el-button class="button-renew">é‡ç½®</el-button> - </div> - </div> - <div class="percent-box"> - <div class="inner-box"> - <div class="column-comp"> - <div class="complete-percent">é¢è¯•完æˆçއ</div> - <el-progress type="circle" :percentage="80"> - <template #default="{ percentage }"> - <span class="percentage-value">{{ percentage }}%</span> - <span class="percentage-label">Progressing</span> - </template> - </el-progress> + <div class="big-box"> + <div class="search-box"> + <div class="input-name"> + <span>å§“å</span> + <el-input class="input" placeholder="请输入é¢è¯•者姓å"></el-input> + </div> + <div> + <el-button type="primary" class="button-search">æœç´¢</el-button> + <el-button class="button-renew">é‡ç½®</el-button> </div> - <div class="column-pass"> - <div class="pass-percent">通过率</div> + </div> + <div class="percent-box"> + <div class="inner-box"> + <div class="column-comp"> + <div class="complete-percent">é¢è¯•完æˆçއ</div> + <div> + <n-progress + type="dashboard" + :gap-offset-degree="0" + :gap-degree="170" + :percentage="46" + :stroke-width="15" + class="percent-border-complete" + > + <div class="percent-content">46%</div> + </n-progress> + <div class="time-show-complete-body">最近一次é¢è¯•于 2024/11/4</div> + </div> + </div> + <div class="column-pass"> + <div class="pass-percent">通过率</div> + <div> + <div class="time-show-pass"> + <div class="time-show-pass-body">最近一次é¢è¯•</div> + <div>2021/11/4</div> + <div class="time-show-pass-body">下一次é¢è¯•</div> + <div>2024/11/20</div> + </div> + <n-progress + type="dashboard" + :gap-offset-degree="0" + :gap-degree="0" + :percentage="46" + :stroke-width="15" + class="percent-border-pass" + > + <div class="percent-content">46%</div> + </n-progress> + </div> + </div> </div> </div> </div> @@ -51,6 +78,7 @@ </template> <script setup lang="ts"> import { FormItem } from '../../api/interview'; +import { NProgress } from 'naive-ui'; const form = reactive<FormItem[]>([ { id: 'xxxx', @@ -84,12 +112,17 @@ const form = reactive<FormItem[]>([ <style lang="scss" scoped> @import '../../styles/Interview.scss'; +.big-box { + width: 100%; + height: 20%; + display: flex; + justify-content: space-between; + margin-top: 0; +} .search-box { @include white-box; - top: 12%; - left: 16%; - width: 34%; - height: 20%; + width: 34vw; + height: 20vh; .input-name { display: flex; align-items: center; @@ -100,21 +133,21 @@ const form = reactive<FormItem[]>([ width: 20%; } .input { - height: 50px; + height: 15%; width: 60%; font-size: 16px; } } .button-search { - margin-top: 5%; width: 20%; height: 40px; margin-left: 40%; + margin-top: 5%; } .button-renew { - margin-top: 5%; width: 20%; height: 40px; + margin-top: 5%; } } .percent-box { @@ -126,20 +159,59 @@ const form = reactive<FormItem[]>([ .inner-box { display: flex; .column-comp { - flex-direction: column; + margin-left: 5%; + .percent-border-complete { + margin-right: -170%; + width: 100%; + } + .percent-content { + margin-bottom: 70%; + font-size: 20px; + } .complete-percent { font-size: 25px; font-weight: bold; - margin-top: 3vh; - margin-left: 3vw; + margin-top: 15%; + } + .time-show-complete-body { + font-size: 10px; + margin-top: -40%; + color: rgba(154, 154, 154, 1); + margin-right: -170%; + } + .time-show-complete-body::before { + display: inline-block; + width: 10px; + content: ''; + height: 10px; + background-color: gray; } } .column-pass { - flex-direction: column; + margin-left: 25%; + .percent-border-pass { + margin-left: 100%; + margin-top: -100%; + } + .time-show-pass { + width: 100%; + font-size: 10px; + color: rgba(154, 154, 154, 1); + .time-show-pass-body { + margin-top: 10%; + } + .time-show-pass-body::before { + display: inline-block; + width: 10px; + content: ''; + height: 10px; + background-color: gray; + } + } + .pass-percent { font-size: 25px; font-weight: bold; - margin-left: 10vw; margin-top: 3vh; } } @@ -262,4 +334,24 @@ const form = reactive<FormItem[]>([ border-radius: 5px; } } +.semi-circle-progress { + --el-progress-circle-path-color: transparent; + --el-progress-circle-path-stroke-linecap: round; + --el-progress-circle-path-stroke-width: 20px; + transform: rotate(-90deg); + display: inline-block; +} + +.semi-circle-progress .el-progress-circle { + width: 120px !important; + height: 60px !important; + overflow: hidden; +} + +.semi-circle-progress .el-progress-circle svg { + width: 120px; + height: 120px; + transform-origin: center; + transform: translateY(50%); +} </style> diff --git a/src/views/StuHomework/StuHomework.vue b/src/views/StuHomework/StuHomework.vue index e646343..163a27e 100644 --- a/src/views/StuHomework/StuHomework.vue +++ b/src/views/StuHomework/StuHomework.vue @@ -15,7 +15,7 @@ style="width: 250px; height: 40px" ></el-date-picker> <el-button type="primary" @click="search"><span class="el-text">Search</span></el-button> - <el-button type="Basic White" @click="search"><span class="el-text">é‡ç½®</span></el-button> + <el-button type="default" @click="search"><span class="el-text">é‡ç½®</span></el-button> </div> <div class="homework-box"> <div class="form-box"> -- GitLab From af7aff93563df61d749e653e9b8d1426b0b0af7e Mon Sep 17 00:00:00 2001 From: wyn <wyn1234@stud.tjut.edu.cn> Date: Sun, 11 Aug 2024 22:29:17 +0800 Subject: [PATCH 3/7] =?UTF-8?q?=E4=B8=BA=E5=90=88=E5=B9=B6=E7=9A=84?= =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 15 +- src/router/index.ts | 17 +- src/styles/Interview.scss | 235 ++++++++++ src/views/Interview/InterviewNewone.vue | 18 + src/views/Interview/InterviewShow.vue | 407 ++++-------------- .../components/InterviewHomepage.vue | 7 - .../Interview/components/InterviewNewone.vue | 7 - src/views/Login/UserLogin.vue | 6 +- .../Login/components/UserLoginChange.vue | 5 +- src/views/Login/components/UserLoginEnrol.vue | 6 +- .../Login/components/UserLoginHomepage.vue | 8 +- 11 files changed, 380 insertions(+), 351 deletions(-) create mode 100644 src/views/Interview/InterviewNewone.vue delete mode 100644 src/views/Interview/components/InterviewHomepage.vue delete mode 100644 src/views/Interview/components/InterviewNewone.vue diff --git a/components.d.ts b/components.d.ts index 48d4030..75b83a3 100644 --- a/components.d.ts +++ b/components.d.ts @@ -2,14 +2,13 @@ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 -export {}; +export {} /* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { App: typeof import('./src/App.vue')['default'] CenterTask: typeof import('./src/components/CenterTask.vue')['default'] - CenterTaskAdmin: typeof import('./src/views/CenterTaskAdmin.vue')['default'] ElAside: typeof import('element-plus/es')['ElAside'] ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] @@ -24,14 +23,20 @@ declare module 'vue' { ElMain: typeof import('element-plus/es')['ElMain'] ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] - ElRadio: typeof import('element-plus/es')['ElRadio'] - ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRow: typeof import('element-plus/es')['ElRow'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ExampleComponent: typeof import('./src/components/ExampleComponent.vue')['default'] + IEpChatDotRound: typeof import('~icons/ep/chat-dot-round')['default'] + IEpDocument: typeof import('~icons/ep/document')['default'] + IEpHouse: typeof import('~icons/ep/house')['default'] + IEpMessage: typeof import('~icons/ep/message')['default'] + IEpSetting: typeof import('~icons/ep/setting')['default'] + IEpUser: typeof import('~icons/ep/user')['default'] + InterviewHomepage: typeof import('./src/views/Interview/components/InterviewHomepage.vue')['default'] + InterviewNewone: typeof import('./src/views/Interview/InterviewNewone.vue')['default'] + InterviewShow: typeof import('./src/views/Interview/InterviewShow.vue')['default'] NotFound: typeof import('./src/components/NotFound.vue')['default'] NoticeDetail: typeof import('./src/views/Notice/NoticeDetail.vue')['default'] - NoticeDetailAndEdit: typeof import('./src/views/Notice/NoticeDetail.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ShowNotice: typeof import('./src/views/Notice/ShowNotice.vue')['default'] diff --git a/src/router/index.ts b/src/router/index.ts index 7687675..15766cf 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -25,18 +25,9 @@ export const constantRoutes: RouteRecordRaw[] = [ }, { path: 'Interview', - component: () => import('@/views/Interview/InterviewShow.vue'), - children: [ - { - path: 'homepage', - component: () => import('@/views/Interview/components/InterviewHomepage.vue') - }, - { - path: 'newone', - component: () => import('@/views/Interview/components/InterviewNewone.vue') - } - ] + component: () => import('@/views/Interview/InterviewShow.vue') }, + { path: '/Homework', component: () => import('@/views/StuHomework/StuHomework.vue') @@ -44,6 +35,10 @@ export const constantRoutes: RouteRecordRaw[] = [ { path: '/Homework/HomeInfo', component: () => import('@/views/StuHomework/WorkInfo.vue') } ] }, + { + path: '/Interview/newone', + component: () => import('@/views/Interview/InterviewNewone.vue') + }, { path: '/login', component: () => import('@/views/Login/UserLogin.vue') diff --git a/src/styles/Interview.scss b/src/styles/Interview.scss index 94ec913..88b845a 100644 --- a/src/styles/Interview.scss +++ b/src/styles/Interview.scss @@ -21,3 +21,238 @@ justify-content: center; align-items: center; } +.big-box { + width: 100%; + height: 30%; + display: flex; + justify-content: space-between; + margin-top: 3%; +} +.search-box { + @include white-box; + width: 40%; + height: 80%; + margin-left: 5%; + .input-name { + display: flex; + align-items: center; + margin-top: 10%; + span { + font-size: 20px; + font-weight: bold; + width: 20%; + margin-left: 5%; + margin-right: -5%; + } + .input { + height: 15%; + width: 60%; + font-size: 16px; + } + } + .button-search { + width: 20%; + height: 40px; + margin-top: 5%; + } + .button-renew { + width: 20%; + height: 40px; + margin-top: 5%; + } +} +.percent-box { + @include white-box; + width: 50%; + height: 80%; + margin-right: 5%; + margin-left: 5%; + .inner-box { + display: flex; + height: 100%; + .column-comp { + margin-left: 5%; + .percent-border-complete { + margin-left: 70%; + width: 100%; + } + .percent-content { + margin-bottom: 70%; + font-size: 20px; + } + .complete-percent { + font-size: 20px; + font-weight: bold; + margin-top: 15%; + } + .time-show-complete-body { + font-size: 10px; + margin-top: -40%; + color: rgba(154, 154, 154, 1); + margin-right: -70%; + margin-left: 70%; + } + .time-show-complete-body::before { + display: inline-block; + width: 10px; + content: ''; + height: 10px; + background-color: gray; + } + } + .column-pass { + margin-left: 25%; + .percent-border-pass { + margin-left: 80%; + margin-top: -100%; + .percent-content-pass { + font-size: 20px; + } + } + .time-show-pass { + width: 100%; + font-size: 10px; + color: rgba(154, 154, 154, 1); + .time-show-pass-body { + margin-top: 10%; + } + .time-show-pass-body::before { + display: inline-block; + width: 10px; + content: ''; + height: 10px; + background-color: gray; + } + } + .pass-percent { + font-size: 20px; + font-weight: bold; + margin-top: 15%; + } + } + } +} +.main-box { + @include white-box; + width: 90%; + height: 60%; + margin-left: 5%; + .el-form-item { + margin-bottom: 0; + } + .el-form { + margin-top: 5%; + } + .thead-title { + @include thead(); + width: 16.95%; + height: 100%; + margin-left: 1%; + margin-bottom: -2px; + } + .thead-time { + @include thead(); + width: 18.55%; + height: 100%; + margin-left: -2px; + margin-bottom: -2px; + } + .thead-location { + @include thead(); + width: 16.5%; + height: 100%; + margin-left: -2px; + margin-bottom: -2px; + } + .thead-number { + @include thead(); + width: 12.85%; + height: 100%; + margin-left: -2px; + margin-bottom: -2px; + } + .thead-conclusion { + @include thead(); + width: 14.35%; + height: 100%; + margin-left: -2px; + margin-bottom: -2px; + } + .thead-movement { + @include thead(); + width: 13.25%; + height: 100%; + margin-left: -2px; + margin-bottom: -2px; + } + .tbody-title { + @include tbody(); + width: 16.95%; + height: 100%; + margin-left: 1%; + margin-bottom: -2px; + } + .tbody-time { + @include tbody(); + width: 18.55%; + height: 100%; + margin-left: -2px; + margin-bottom: -2px; + } + .tbody-location { + @include tbody(); + width: 16.5%; + height: 100%; + margin-left: -2px; + margin-bottom: -2px; + } + .tbody-number { + @include tbody(); + width: 12.85%; + height: 100%; + margin-left: -2px; + margin-bottom: -2px; + } + .tbody-conclusion { + @include tbody(); + width: 14.35%; + height: 100%; + margin-left: -2px; + margin-bottom: -2px; + } + .tbody-movement { + @include tbody(); + width: 13.25%; + height: 100%; + margin-left: -2px; + margin-bottom: -2px; + } + .button-true { + background-color: rgba(162, 211, 209, 1); + color: white; + width: 60%; + height: 40%; + display: flex; + justify-content: center; + align-items: center; + border-radius: 5px; + } + .button-false { + background-color: gray; + color: white; + width: 60%; + height: 40%; + display: flex; + justify-content: center; + align-items: center; + border-radius: 5px; + } +} +:deep(.my_progress) { + .n-progress-graph-circle-rail { + stroke: #ebf4f7 !important; + } + .n-progress-graph-circle-fill { + stroke: url(#gradient1) !important; + } +} diff --git a/src/views/Interview/InterviewNewone.vue b/src/views/Interview/InterviewNewone.vue new file mode 100644 index 0000000..1a44fe4 --- /dev/null +++ b/src/views/Interview/InterviewNewone.vue @@ -0,0 +1,18 @@ +<template> + <div class="bac"> + <div class="message-box"></div> + <div class="conclusion-box"></div> + <div class=""></div> + </div> +</template> + +<script setup lang="ts"></script> + +<style scoped lang="scss"> +.bac { + width: 100vw; + height: 100vh; + background-image: url(@/assets/LoginBack.png); + background-size: cover; +} +</style> diff --git a/src/views/Interview/InterviewShow.vue b/src/views/Interview/InterviewShow.vue index bd43549..29b91cc 100644 --- a/src/views/Interview/InterviewShow.vue +++ b/src/views/Interview/InterviewShow.vue @@ -1,84 +1,106 @@ <template> - <div class="big-box"> - <div class="search-box"> - <div class="input-name"> - <span>å§“å</span> - <el-input class="input" placeholder="请输入é¢è¯•者姓å"></el-input> - </div> - <div> - <el-button type="primary" class="button-search">æœç´¢</el-button> - <el-button class="button-renew">é‡ç½®</el-button> + <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" style="stop-color: #2883ff; stop-opacity: 1" /> + <stop offset="30%" style="stop-color: #8365ff; stop-opacity: 1" /> + <stop offset="100%" style="stop-color: #8365ff; stop-opacity: 1" /> + </linearGradient> + </defs> + </svg> + <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%"> + <stop offset="0%" style="stop-color: #8066ff; stop-opacity: 1" /> + <stop offset="50%" stop-color="#4e77ff" /> + <stop offset="100%" style="stop-color: #2883ff; stop-opacity: 1" /> + </linearGradient> + </defs> + </svg> + <div style="display: flex; flex-direction: column; height: 100%; width: 100%"> + <div class="big-box"> + <div class="search-box"> + <div class="input-name"> + <span>å§“å</span> + <el-input class="input" placeholder="请输入é¢è¯•者姓å"></el-input> + </div> + <div style="display: flex; justify-content: end; margin-right: 5%"> + <el-button type="primary" class="button-search">æœç´¢</el-button> + <el-button class="button-renew">é‡ç½®</el-button> + </div> </div> - </div> - <div class="percent-box"> - <div class="inner-box"> - <div class="column-comp"> - <div class="complete-percent">é¢è¯•完æˆçއ</div> - <div> - <n-progress - type="dashboard" - :gap-offset-degree="0" - :gap-degree="170" - :percentage="46" - :stroke-width="15" - class="percent-border-complete" - > - <div class="percent-content">46%</div> - </n-progress> - <div class="time-show-complete-body">最近一次é¢è¯•于 2024/11/4</div> + <div class="percent-box"> + <div class="inner-box"> + <div class="column-comp"> + <div class="complete-percent">é¢è¯•完æˆçއ</div> + <div> + <n-progress + type="dashboard" + :gap-offset-degree="0" + :gap-degree="170" + :percentage="46" + :stroke-width="15" + class="percent-border-complete my_progress" + > + <div class="percent-content">46%</div> + </n-progress> + <div class="time-show-complete-body">最近一次é¢è¯•于 2024/11/4</div> + </div> </div> - </div> - <div class="column-pass"> - <div class="pass-percent">通过率</div> - <div> - <div class="time-show-pass"> - <div class="time-show-pass-body">最近一次é¢è¯•</div> - <div>2021/11/4</div> - <div class="time-show-pass-body">下一次é¢è¯•</div> - <div>2024/11/20</div> + <div class="column-pass"> + <div class="pass-percent">通过率</div> + <div> + <div class="time-show-pass"> + <div class="time-show-pass-body">最近一次é¢è¯•</div> + <div>2021/11/4</div> + <div class="time-show-pass-body">下一次é¢è¯•</div> + <div>2024/11/20</div> + </div> + <n-progress + type="dashboard" + :gap-offset-degree="180" + :gap-degree="0" + :percentage="46" + :stroke-width="15" + class="percent-border-pass my_progress" + > + <div class="percent-content-pass">46%</div> + </n-progress> </div> - <n-progress - type="dashboard" - :gap-offset-degree="0" - :gap-degree="0" - :percentage="46" - :stroke-width="15" - class="percent-border-pass" - > - <div class="percent-content">46%</div> - </n-progress> </div> </div> </div> </div> - </div> - <div class="main-box"> - <el-form :model="form" label-width="auto"> - <el-form-item> - <div class="thead-title">é¢è¯•æ ‡é¢˜</div> - <div class="thead-time">é¢è¯•æ—¶é—´</div> - <div class="thead-location">é¢è¯•地点</div> - <div class="thead-number">é¢è¯•桌å·</div> - <div class="thead-conclusion">结论</div> - <div class="thead-movement">æ“作</div> - </el-form-item> - <el-form-item v-for="p in form" :key="p.id"> - <div class="tbody-title">{{ p.title }}</div> - <div class="tbody-time">{{ p.time }}</div> - <div class="tbody-location">{{ p.location }}</div> - <div class="tbody-number">{{ p.number }}</div> - <div class="tbody-conclusion"> - <div v-show="p.coclusion" class="button-true">通过</div> - <div v-show="!p.coclusion" class="button-false">未通过</div> - </div> - <div class="tbody-movement">æ“作</div> - </el-form-item> - </el-form> + <div class="main-box"> + <el-form :model="form" label-width="auto" style="height: 80%"> + <el-form-item style="height: 25%"> + <div class="thead-title">é¢è¯•æ ‡é¢˜</div> + <div class="thead-time">é¢è¯•æ—¶é—´</div> + <div class="thead-location">é¢è¯•地点</div> + <div class="thead-number">é¢è¯•桌å·</div> + <div class="thead-conclusion">结论</div> + <div class="thead-movement">æ“作</div> + </el-form-item> + <el-form-item v-for="p in form" :key="p.id" style="height: 25%"> + <div class="tbody-title">{{ p.title }}</div> + <div class="tbody-time">{{ p.time }}</div> + <div class="tbody-location">{{ p.location }}</div> + <div class="tbody-number">{{ p.number }}</div> + <div class="tbody-conclusion"> + <div v-show="p.coclusion" class="button-true">通过</div> + <div v-show="!p.coclusion" class="button-false">未通过</div> + </div> + <div class="tbody-movement" style="font-size: 15px" @click="change">编辑é¢è¯•记录</div> + </el-form-item> + </el-form> + </div> </div> </template> <script setup lang="ts"> -import { FormItem } from '../../api/interview'; +import { FormItem } from '@/api/interview'; import { NProgress } from 'naive-ui'; +import { useRouter } from 'vue-router'; +const router = useRouter(); const form = reactive<FormItem[]>([ { id: 'xxxx', @@ -108,250 +130,11 @@ const form = reactive<FormItem[]>([ movement: 'xxxx' } ]); +function change() { + router.push('/Interview/newone'); +} </script> <style lang="scss" scoped> -@import '../../styles/Interview.scss'; -.big-box { - width: 100%; - height: 20%; - display: flex; - justify-content: space-between; - margin-top: 0; -} -.search-box { - @include white-box; - width: 34vw; - height: 20vh; - .input-name { - display: flex; - align-items: center; - margin-top: 10%; - span { - font-size: 20px; - font-weight: bold; - width: 20%; - } - .input { - height: 15%; - width: 60%; - font-size: 16px; - } - } - .button-search { - width: 20%; - height: 40px; - margin-left: 40%; - margin-top: 5%; - } - .button-renew { - width: 20%; - height: 40px; - margin-top: 5%; - } -} -.percent-box { - @include white-box; - top: 12%; - left: 52%; - width: 46%; - height: 20%; - .inner-box { - display: flex; - .column-comp { - margin-left: 5%; - .percent-border-complete { - margin-right: -170%; - width: 100%; - } - .percent-content { - margin-bottom: 70%; - font-size: 20px; - } - .complete-percent { - font-size: 25px; - font-weight: bold; - margin-top: 15%; - } - .time-show-complete-body { - font-size: 10px; - margin-top: -40%; - color: rgba(154, 154, 154, 1); - margin-right: -170%; - } - .time-show-complete-body::before { - display: inline-block; - width: 10px; - content: ''; - height: 10px; - background-color: gray; - } - } - .column-pass { - margin-left: 25%; - .percent-border-pass { - margin-left: 100%; - margin-top: -100%; - } - .time-show-pass { - width: 100%; - font-size: 10px; - color: rgba(154, 154, 154, 1); - .time-show-pass-body { - margin-top: 10%; - } - .time-show-pass-body::before { - display: inline-block; - width: 10px; - content: ''; - height: 10px; - background-color: gray; - } - } - - .pass-percent { - font-size: 25px; - font-weight: bold; - margin-top: 3vh; - } - } - } -} -.main-box { - @include white-box; - width: 83%; - height: 58%; - left: 15%; - top: 39%; - .el-form-item { - margin-bottom: 0; - } - .el-form { - margin-top: 5vh; - } - .thead-title { - @include thead(); - width: 12.95vw; - height: 12vh; - margin-left: 1vw; - margin-bottom: -2px; - } - .thead-time { - @include thead(); - width: 15.55vw; - height: 12vh; - margin-left: -2px; - margin-bottom: -2px; - } - .thead-location { - @include thead(); - width: 13.5vw; - height: 12vh; - margin-left: -2px; - margin-bottom: -2px; - } - .thead-number { - @include thead(); - width: 9.85vw; - height: 12vh; - margin-left: -2px; - margin-bottom: -2px; - } - .thead-conclusion { - @include thead(); - width: 14.35vw; - height: 12vh; - margin-left: -2px; - margin-bottom: -2px; - } - .thead-movement { - @include thead(); - width: 13.25vw; - height: 12vh; - margin-left: -2px; - margin-bottom: -2px; - } - .tbody-title { - @include tbody(); - width: 12.95vw; - height: 12vh; - margin-left: 1vw; - margin-bottom: -2px; - } - .tbody-time { - @include tbody(); - width: 15.55vw; - height: 12vh; - margin-left: -2px; - margin-bottom: -2px; - } - .tbody-location { - @include tbody(); - width: 13.5vw; - height: 12vh; - margin-left: -2px; - margin-bottom: -2px; - } - .tbody-number { - @include tbody(); - width: 9.85vw; - height: 12vh; - margin-left: -2px; - margin-bottom: -2px; - } - .tbody-conclusion { - @include tbody(); - width: 14.35vw; - height: 12vh; - margin-left: -2px; - margin-bottom: -2px; - } - .tbody-movement { - @include tbody(); - width: 13.25vw; - height: 12vh; - margin-left: -2px; - margin-bottom: -2px; - } - .button-true { - background-color: rgba(162, 211, 209, 1); - color: white; - width: 60%; - height: 40%; - display: flex; - justify-content: center; - align-items: center; - border-radius: 5px; - } - .button-false { - background-color: gray; - color: white; - width: 60%; - height: 40%; - display: flex; - justify-content: center; - align-items: center; - border-radius: 5px; - } -} -.semi-circle-progress { - --el-progress-circle-path-color: transparent; - --el-progress-circle-path-stroke-linecap: round; - --el-progress-circle-path-stroke-width: 20px; - transform: rotate(-90deg); - display: inline-block; -} - -.semi-circle-progress .el-progress-circle { - width: 120px !important; - height: 60px !important; - overflow: hidden; -} - -.semi-circle-progress .el-progress-circle svg { - width: 120px; - height: 120px; - transform-origin: center; - transform: translateY(50%); -} +@import '@/styles/Interview.scss'; </style> diff --git a/src/views/Interview/components/InterviewHomepage.vue b/src/views/Interview/components/InterviewHomepage.vue deleted file mode 100644 index 5925059..0000000 --- a/src/views/Interview/components/InterviewHomepage.vue +++ /dev/null @@ -1,7 +0,0 @@ -<template> - <div>111</div> -</template> - -<script setup lang="ts"></script> - -<style scoped></style> diff --git a/src/views/Interview/components/InterviewNewone.vue b/src/views/Interview/components/InterviewNewone.vue deleted file mode 100644 index c597030..0000000 --- a/src/views/Interview/components/InterviewNewone.vue +++ /dev/null @@ -1,7 +0,0 @@ -<template> - <div>1111</div> -</template> - -<script setup lang="ts"></script> - -<style scoped></style> diff --git a/src/views/Login/UserLogin.vue b/src/views/Login/UserLogin.vue index 72c4ea5..62906c7 100644 --- a/src/views/Login/UserLogin.vue +++ b/src/views/Login/UserLogin.vue @@ -1,7 +1,7 @@ <template> <div class="bac"> - <img src="../../assets/LoginFront.png" class="photo" /> - <img src="../../assets/logo.png" class="logo" /> + <img src="@/assets/LoginFront.png" class="photo" /> + <img src="@/assets/logo.png" class="logo" /> <div class="bottom">Copyright © 2024 SIPC.All rights reserved</div> <UserLoginHomepage v-show="mainStore.UserLoginHomepage"></UserLoginHomepage> <UserLoginChange v-show="mainStore.UserLoginChange"></UserLoginChange> @@ -16,7 +16,7 @@ const mainStore = useLoginStore(); .bac { width: 100vw; height: 100vh; - background-image: url(../../assets/LoginBack.png); + background-image: url(@/assets/LoginBack.png); background-size: cover; .photo { width: 55%; diff --git a/src/views/Login/components/UserLoginChange.vue b/src/views/Login/components/UserLoginChange.vue index 14e2a20..2bb5d83 100644 --- a/src/views/Login/components/UserLoginChange.vue +++ b/src/views/Login/components/UserLoginChange.vue @@ -40,7 +40,10 @@ :prefix-icon="Lock" /> <div class="error">*两次密ç 输入ä¸ä¸€è‡´</div> - <el-button type="primary" class="button" @click="change">é‡ç½®å¯†ç </el-button> + <div style="display: flex; justify-content: center"> + <el-button type="primary" class="button" @click="change">é‡ç½®å¯†ç </el-button> + </div> + <div class="file"> <div class="remember"> <input type="checkbox" v-model="changeRem" /> diff --git a/src/views/Login/components/UserLoginEnrol.vue b/src/views/Login/components/UserLoginEnrol.vue index 7612322..86e7e6d 100644 --- a/src/views/Login/components/UserLoginEnrol.vue +++ b/src/views/Login/components/UserLoginEnrol.vue @@ -39,7 +39,9 @@ :prefix-icon="Lock" /> <div class="error">*两次密ç 输入ä¸ä¸€è‡´</div> - <el-button type="primary" class="button" @click="enrol">注册</el-button> + <div style="display: flex; justify-content: center"> + <el-button type="primary" class="button" @click="enrol">注册</el-button> + </div> <div class="file"> <div class="remember"> <input type="checkbox" v-model="enrolRem" /> @@ -107,7 +109,7 @@ function emailIt(): void { </script> <style lang="scss" scoped> -@import '../../../styles/UserLogin.scss'; +@import '@/styles/UserLogin.scss'; .enrol-password { @include white-one; .title { diff --git a/src/views/Login/components/UserLoginHomepage.vue b/src/views/Login/components/UserLoginHomepage.vue index 09dcf93..987b0d0 100644 --- a/src/views/Login/components/UserLoginHomepage.vue +++ b/src/views/Login/components/UserLoginHomepage.vue @@ -19,7 +19,9 @@ <input type="checkbox" v-model="logRem" /> <span>è®°ä½æˆ‘(60天内å…登录)</span> </div> - <el-button type="primary" class="button" @click="login">登录</el-button> + <div style="display: flex; justify-content: center"> + <el-button type="primary" class="button" @click="login">登录</el-button> + </div> <div class="file"> <div class="point" @click="toChange">忘记密ç ?</div> <div class="point" @click="toEnrol">去注册</div> @@ -37,7 +39,7 @@ const logInputCredit = ref<string>(''); const logInputPassword = ref<string>(''); const logRem = ref<string>(''); -// 路由页的简å•跳转 +// 页é¢çš„简å•跳转 function toChange() { mainStore.UserLoginEnrol = true; mainStore.UserLoginHomepage = false; @@ -62,7 +64,7 @@ function login() { </script> <style lang="scss" scoped> -@import '../../../styles/UserLogin.scss'; +@import '@/styles/UserLogin.scss'; .log-box { @include white-one; .title { -- GitLab From 8193ea7914407a08d606087d8965b8120405a2a2 Mon Sep 17 00:00:00 2001 From: wyn <wyn1234@stud.tjut.edu.cn> Date: Mon, 12 Aug 2024 12:02:47 +0800 Subject: [PATCH 4/7] =?UTF-8?q?=E9=9D=A2=E8=AF=95=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E7=AC=AC=E4=B8=80=E7=89=88=EF=BC=88=E6=97=A0=E5=90=8E=E7=AB=AF?= =?UTF-8?q?=E7=89=88=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 15 +- src/api/interviewNewone.ts | 6 + .../assets/blueLine.svg | 0 src/router/index.ts | 1 - src/styles/InterviewNewone.scss | 140 ++++++++++++++++++ src/views/Interview/InterviewNewone.vue | 107 +++++++++++-- src/views/Interview/InterviewShow.vue | 4 +- 7 files changed, 254 insertions(+), 19 deletions(-) create mode 100644 src/api/interviewNewone.ts rename "src/assets/\350\223\235-\347\253\226\347\272\277.svg" => src/assets/blueLine.svg (100%) create mode 100644 src/styles/InterviewNewone.scss diff --git a/components.d.ts b/components.d.ts index 28f81b0..9dba99f 100644 --- a/components.d.ts +++ b/components.d.ts @@ -2,7 +2,7 @@ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 -export {}; +export {} /* prettier-ignore */ declare module 'vue' { @@ -20,6 +20,7 @@ declare module 'vue' { ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCol: typeof import('element-plus/es')['ElCol'] ElContainer: typeof import('element-plus/es')['ElContainer'] + ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElForm: typeof import('element-plus/es')['ElForm'] ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElHeader: typeof import('element-plus/es')['ElHeader'] @@ -28,18 +29,19 @@ declare module 'vue' { ElMain: typeof import('element-plus/es')['ElMain'] ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] - ElOption: typeof import('element-plus/es')['ElOption'] ElPagination: typeof import('element-plus/es')['ElPagination'] - ElRadio: typeof import('element-plus/es')['ElRadio'] - ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRow: typeof import('element-plus/es')['ElRow'] - ElSelect: typeof import('element-plus/es')['ElSelect'] + ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] + ElTable: typeof import('element-plus/es')['ElTable'] + ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] + ElTimePicker: typeof import('element-plus/es')['ElTimePicker'] ExampleComponent: typeof import('./src/components/ExampleComponent.vue')['default'] HomePage: typeof import('./src/views/HomePage/HomePage.vue')['default'] IEpArrowLeft: typeof import('~icons/ep/arrow-left')['default'] IEpArrowRight: typeof import('~icons/ep/arrow-right')['default'] IEpChatDotRound: typeof import('~icons/ep/chat-dot-round')['default'] + IEpCheck: typeof import('~icons/ep/check')['default'] IEpClose: typeof import('~icons/ep/close')['default'] IEpDocument: typeof import('~icons/ep/document')['default'] IEpHouse: typeof import('~icons/ep/house')['default'] @@ -52,7 +54,8 @@ declare module 'vue' { MyStudents: typeof import('./src/views/HomePage/components/MyStudents.vue')['default'] NotFound: typeof import('./src/components/NotFound.vue')['default'] NoticeDetail: typeof import('./src/views/Notice/NoticeDetail.vue')['default'] - NoticeDetailAndEdit: typeof import('./src/views/Notice/NoticeDetail.vue')['default'] + OrganizeStudents: typeof import('./src/views/HomePage/components/OrganizeStudents.vue')['default'] + RateBoard: typeof import('./src/views/HomePage/components/RateBoard.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ShowNotice: typeof import('./src/views/Notice/ShowNotice.vue')['default'] diff --git a/src/api/interviewNewone.ts b/src/api/interviewNewone.ts new file mode 100644 index 0000000..cecd638 --- /dev/null +++ b/src/api/interviewNewone.ts @@ -0,0 +1,6 @@ +export interface Form { + date: string; + location: string; + credit: string; + note: string; +} diff --git "a/src/assets/\350\223\235-\347\253\226\347\272\277.svg" b/src/assets/blueLine.svg similarity index 100% rename from "src/assets/\350\223\235-\347\253\226\347\272\277.svg" rename to src/assets/blueLine.svg diff --git a/src/router/index.ts b/src/router/index.ts index dc9868b..a349b44 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -33,7 +33,6 @@ export const constantRoutes: RouteRecordRaw[] = [ path: 'Interview', component: () => import('@/views/Interview/InterviewShow.vue') }, - { path: '/Homework', component: () => import('@/views/StuHomework/StuHomework.vue') diff --git a/src/styles/InterviewNewone.scss b/src/styles/InterviewNewone.scss new file mode 100644 index 0000000..d8e3d77 --- /dev/null +++ b/src/styles/InterviewNewone.scss @@ -0,0 +1,140 @@ +@mixin white-box { + background-color: white; + border: 0px solid transparent; + border-radius: 10px; +} +.bac { + width: 100vw; + height: 100vh; + background-image: url('@/assets/background.jpg'); + background-size: cover; + display: flex; + .left-box { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 44%; + height: 89%; + margin-left: 3%; + padding-top: 4%; + .message-box { + @include white-box; + width: 100%; + height: 66.2%; + :deep(.el-form-item__label) { + margin-left: 10%; + font-size: 20px; + font-weight: bold; + color: black; + } + img { + height: 30px; + margin-left: 2.5%; + } + .message-title { + font-size: 20px; + color: rgba(0, 0, 0, 0.6); + margin-left: -2%; + font-weight: bold; + } + .message-front { + height: 10%; + align-items: center; + margin-left: 10%; + } + .message-back { + margin-left: 3%; + font-size: 20px; + font-weight: bold; + } + } + .conclusion-box { + @include white-box; + margin-top: 3%; + width: 100%; + height: 27.6%; + img { + height: 30px; + margin-left: 2.5%; + } + .conclusion-title { + font-size: 20px; + color: rgba(0, 0, 0, 0.6); + margin-left: -2%; + font-weight: bold; + } + .button-box { + margin-top: 10%; + :deep(.el-form-item__content) { + justify-content: space-between; + } + } + .pass-button { + display: flex; + justify-content: center; + width: 20%; + border: 0; + border-radius: 20px; + font-size: 20px; + color: white; + background-color: rgb(162, 211, 209); + margin-left: 25%; + } + .nopass-button { + display: flex; + justify-content: center; + width: 20%; + border: 0; + border-radius: 20px; + font-size: 20px; + color: white; + background-color: rgb(208, 158, 166); + margin-right: 25%; + } + .nopass-button:active { + background-color: rgb(67, 135, 135); + } + } + } + .content-box { + @include white-box; + width: 46%; + height: 86%; + margin-left: 5%; + margin-top: 5%; + :deep(.el-form-item__label) { + width: 130px !important; + font-size: 18px; + font-weight: bold; + } + .content-box-title { + font-size: 30px; + font-weight: bold; + margin-left: 6%; + margin-top: 5%; + } + .content-box-location { + width: 40%; + height: 100%; + } + .content-box-credit { + width: 40%; + height: 100%; + } + .content-box-note { + width: 80%; + height: 100%; + } + .content-box-button-submit { + width: 15%; + height: 700%; + margin-left: 20%; + } + .content-box-button-no { + width: 15%; + height: 700%; + margin-right: 20%; + } + } +} diff --git a/src/views/Interview/InterviewNewone.vue b/src/views/Interview/InterviewNewone.vue index 1a44fe4..423408c 100644 --- a/src/views/Interview/InterviewNewone.vue +++ b/src/views/Interview/InterviewNewone.vue @@ -1,18 +1,103 @@ <template> <div class="bac"> - <div class="message-box"></div> - <div class="conclusion-box"></div> - <div class=""></div> + <div class="left-box"> + <div class="message-box"> + <el-form label-width="auto" style="height: 100%; margin-top: 5%"> + <el-form-item style="height: 10%"> + <img src="@/assets/blueLine.svg" /> + <div class="message-title">é¢è¯•者信æ¯</div> + </el-form-item> + <el-form-item class="message-front" label="å§“å"> + <div class="message-back">xxx</div> + </el-form-item> + <el-form-item class="message-front" label="å¦å·"> + <div class="message-back">2023xxx</div> + </el-form-item> + <el-form-item class="message-front" label="专业"> + <div class="message-back">计算机科å¦ä¸ŽæŠ€æœ¯</div> + </el-form-item> + <el-form-item class="message-front" label="ç级"> + <div class="message-back">xx</div> + </el-form-item> + <el-form-item class="message-front" label="简介"> + <div class="message-back">xxxxxxxxxx</div> + </el-form-item> + </el-form> + </div> + <div class="conclusion-box"> + <el-form label-width="auto" style="height: 100%; margin-top: 3%"> + <el-form-item style="height: 10%"> + <img src="@/assets/blueLine.svg" /> + <div class="conclusion-title">é¢è¯•者结论</div> + </el-form-item> + <el-form-item class="button-box"> + <button class="pass-button" ref="passButton" @click="passIt"> + <i-ep-Check></i-ep-Check> + 通过 + </button> + <button class="nopass-button" ref="noPassButton" @click="noPassIt"> + <i-ep-Close></i-ep-Close> + ä¸é€šè¿‡ + </button> + </el-form-item> + </el-form> + </div> + </div> + <div class="content-box"> + <el-form :v-model="form" label-width="auto" style="height: 100%; margin-top: 3%"> + <el-form-item> + <div class="content-box-title">é¢è¯•æ ‡é¢˜></div> + </el-form-item> + <el-form-item label="é¢è¯•æ—¶é—´" style="margin-top: 5%"> + <!-- æ‰“ä¸ªæ ‡è¿˜æœ‰éƒ¨åˆ†ä¿®æ”¹å†…å®¹ --> + <el-date-picker v-model="form.date" type="date" placeholder="yyyy/mm/æ—¥" clearable /> + </el-form-item> + <el-form-item label="é¢è¯•地点" style="margin-top: 5%"> + <el-input + v-model="form.location" + class="content-box-location" + placeholder="请输入é¢è¯•地点" + ></el-input> + </el-form-item> + <el-form-item label="é¢è¯•桌å·" style="margin-top: 5%"> + <el-input + v-model="form.credit" + class="content-box-credit" + placeholder="请输入é¢è¯•桌å·" + ></el-input> + </el-form-item> + <el-form-item label="é¢è¯•记录" style="margin-top: 5%"> + <el-input v-model="form.note" type="textarea" class="content-box-note" :rows="11" /> + </el-form-item> + <el-form-item> + <div style="display: flex; justify-content: space-around; width: 100%; height: 20%"> + <el-button type="primary" class="content-box-button-submit">æäº¤</el-button> + <el-button class="content-box-button-no">å–æ¶ˆ</el-button> + </div> + </el-form-item> + </el-form> + </div> </div> </template> -<script setup lang="ts"></script> - -<style scoped lang="scss"> -.bac { - width: 100vw; - height: 100vh; - background-image: url(@/assets/LoginBack.png); - background-size: cover; +<script setup lang="ts"> +import { Form } from '@/api/interviewNewone'; +const passButton = ref<HTMLElement>(); +const noPassButton = ref<HTMLElement>(); +const form = reactive<Form>({ + date: '', + location: '', + note: '', + credit: '' +}); +function passIt() { + passButton.value!.style.backgroundColor = 'rgb(67, 135, 135)'; +} +function noPassIt() { + noPassButton.value!.style.backgroundColor = 'rgb(196, 73, 62)'; } +</script> + +<style lang="scss" scoped> +@import '@/styles/InterviewNewone.scss'; </style> diff --git a/src/views/Interview/InterviewShow.vue b/src/views/Interview/InterviewShow.vue index 29b91cc..1963bf0 100644 --- a/src/views/Interview/InterviewShow.vue +++ b/src/views/Interview/InterviewShow.vue @@ -90,7 +90,9 @@ <div v-show="p.coclusion" class="button-true">通过</div> <div v-show="!p.coclusion" class="button-false">未通过</div> </div> - <div class="tbody-movement" style="font-size: 15px" @click="change">编辑é¢è¯•记录</div> + <el-button type="text" class="tbody-movement" style="font-size: 15px" @click="change"> + 编辑é¢è¯•记录 + </el-button> </el-form-item> </el-form> </div> -- GitLab From 5272f292b5451fea35477050bcdf8e18b2584a24 Mon Sep 17 00:00:00 2001 From: wyn <wyn1234@stud.tjut.edu.cn> Date: Mon, 12 Aug 2024 12:38:50 +0800 Subject: [PATCH 5/7] =?UTF-8?q?=E5=B0=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 6 +++-- src/components/CenterTask.vue | 2 +- src/router/index.ts | 22 +++++++++---------- src/styles/{ => Interview}/Interview.scss | 0 .../{ => Interview}/InterviewNewone.scss | 0 src/views/Interview/InterviewNewone.vue | 2 +- src/views/Interview/InterviewShow.vue | 2 +- 7 files changed, 18 insertions(+), 16 deletions(-) rename src/styles/{ => Interview}/Interview.scss (100%) rename src/styles/{ => Interview}/InterviewNewone.scss (100%) diff --git a/components.d.ts b/components.d.ts index 6df236b..4b88f49 100644 --- a/components.d.ts +++ b/components.d.ts @@ -2,7 +2,7 @@ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 -export {}; +export {} /* prettier-ignore */ declare module 'vue' { @@ -21,20 +21,22 @@ declare module 'vue' { ElCol: typeof import('element-plus/es')['ElCol'] ElContainer: typeof import('element-plus/es')['ElContainer'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] + ElDialog: typeof import('element-plus/es')['ElDialog'] ElForm: typeof import('element-plus/es')['ElForm'] ElFormItem: typeof import('element-plus/es')['ElFormItem'] - ElDialog: typeof import('element-plus/es')['ElDialog'] ElHeader: typeof import('element-plus/es')['ElHeader'] ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] ElMain: typeof import('element-plus/es')['ElMain'] ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] + ElOption: typeof import('element-plus/es')['ElOption'] ElPagination: typeof import('element-plus/es')['ElPagination'] ElRadio: typeof import('element-plus/es')['ElRadio'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRow: typeof import('element-plus/es')['ElRow'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] + ElSelect: typeof import('element-plus/es')['ElSelect'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ElTable: typeof import('element-plus/es')['ElTable'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] diff --git a/src/components/CenterTask.vue b/src/components/CenterTask.vue index 3a01862..8e2b064 100644 --- a/src/components/CenterTask.vue +++ b/src/components/CenterTask.vue @@ -37,7 +37,7 @@ <span class="menu-text">作业</span> </el-menu-item> <br /> - <el-menu-item index="4"> + <el-menu-item index="/Interview"> <el-icon> <i-ep-ChatDotRound /> </el-icon> diff --git a/src/router/index.ts b/src/router/index.ts index 2256932..207b65e 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -6,17 +6,17 @@ export const constantRoutes: RouteRecordRaw[] = [ component: () => import('@/views/Login/UserLogin.vue') }, - { - path: '/', - component: () => import('@/components/CenterTask.vue'), - children: [ - { - path: '/Homework', - component: () => import('@/views/StuHomework/StuHomework.vue') - }, - { path: '/Homework/HomeInfo', component: () => import('@/views/StuHomework/WorkInfo.vue') } - ] - }, + // { + // path: '/', + // component: () => import('@/components/CenterTask.vue'), + // children: [ + // { + // path: '/Homework', + // component: () => import('@/views/StuHomework/StuHomework.vue') + // }, + // { path: '/Homework/HomeInfo', component: () => import('@/views/StuHomework/WorkInfo.vue') } + // ] + // }, { path: '/', diff --git a/src/styles/Interview.scss b/src/styles/Interview/Interview.scss similarity index 100% rename from src/styles/Interview.scss rename to src/styles/Interview/Interview.scss diff --git a/src/styles/InterviewNewone.scss b/src/styles/Interview/InterviewNewone.scss similarity index 100% rename from src/styles/InterviewNewone.scss rename to src/styles/Interview/InterviewNewone.scss diff --git a/src/views/Interview/InterviewNewone.vue b/src/views/Interview/InterviewNewone.vue index 423408c..56e3aef 100644 --- a/src/views/Interview/InterviewNewone.vue +++ b/src/views/Interview/InterviewNewone.vue @@ -99,5 +99,5 @@ function noPassIt() { </script> <style lang="scss" scoped> -@import '@/styles/InterviewNewone.scss'; +@import '@/styles/Interview/InterviewNewone.scss'; </style> diff --git a/src/views/Interview/InterviewShow.vue b/src/views/Interview/InterviewShow.vue index 1963bf0..816f1d8 100644 --- a/src/views/Interview/InterviewShow.vue +++ b/src/views/Interview/InterviewShow.vue @@ -138,5 +138,5 @@ function change() { </script> <style lang="scss" scoped> -@import '@/styles/Interview.scss'; +@import '@/styles/Interview/Interview.scss'; </style> -- GitLab From c8c6bbc092e944923584cdd3336dad89d4c49b10 Mon Sep 17 00:00:00 2001 From: wyn <wyn1234@stud.tjut.edu.cn> Date: Mon, 12 Aug 2024 13:57:31 +0800 Subject: [PATCH 6/7] =?UTF-8?q?=E5=85=B3=E4=BA=8Eapi=E7=9A=84=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/interview.ts | 6 ++++++ src/api/interviewNewone.ts | 6 ------ src/views/Interview/InterviewNewone.vue | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) delete mode 100644 src/api/interviewNewone.ts diff --git a/src/api/interview.ts b/src/api/interview.ts index 56d843f..ea78aff 100644 --- a/src/api/interview.ts +++ b/src/api/interview.ts @@ -7,3 +7,9 @@ export interface FormItem { coclusion: boolean; movement: string; } +export interface Form { + date: string; + location: string; + credit: string; + note: string; +} diff --git a/src/api/interviewNewone.ts b/src/api/interviewNewone.ts deleted file mode 100644 index cecd638..0000000 --- a/src/api/interviewNewone.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface Form { - date: string; - location: string; - credit: string; - note: string; -} diff --git a/src/views/Interview/InterviewNewone.vue b/src/views/Interview/InterviewNewone.vue index 56e3aef..25541d5 100644 --- a/src/views/Interview/InterviewNewone.vue +++ b/src/views/Interview/InterviewNewone.vue @@ -81,7 +81,7 @@ </template> <script setup lang="ts"> -import { Form } from '@/api/interviewNewone'; +import { Form } from '@/api/interview'; const passButton = ref<HTMLElement>(); const noPassButton = ref<HTMLElement>(); const form = reactive<Form>({ -- GitLab From dbd3acc8370da369423c99581bf2399c829a974f Mon Sep 17 00:00:00 2001 From: wyn <wyn1234@stud.tjut.edu.cn> Date: Mon, 12 Aug 2024 14:02:08 +0800 Subject: [PATCH 7/7] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/router/index.ts b/src/router/index.ts index 207b65e..0746b0f 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -46,10 +46,10 @@ export const constantRoutes: RouteRecordRaw[] = [ component: () => import('@/views/Interview/InterviewShow.vue') }, { - path: '/Homework', + path: 'Homework', component: () => import('@/views/StuHomework/StuHomework.vue') }, - { path: '/Homework/HomeInfo', component: () => import('@/views/StuHomework/WorkInfo.vue') } + { path: 'Homework/HomeInfo', component: () => import('@/views/StuHomework/WorkInfo.vue') } ] }, { -- GitLab