diff --git a/auto-imports.d.ts b/auto-imports.d.ts index 2542993df1784c82508ba86717b82c7112245604..21436d88dbaccc6cc70c73bac275e9ae3eab2b2b 100644 --- a/auto-imports.d.ts +++ b/auto-imports.d.ts @@ -8,6 +8,7 @@ declare global { const CenterTask: (typeof import('./src/views/CenterTask.vue'))['default'] const EffectScope: typeof import('vue')['EffectScope'] const ElMessage: typeof import('element-plus/es')['ElMessage'] + const WorkInfo: typeof import('./src/views/StuHomework/WorkInfo.vue')['default'] const computed: typeof import('vue')['computed'] const constantRoutes: typeof import('./src/router/index')['constantRoutes'] const createApp: typeof import('vue')['createApp'] diff --git a/components.d.ts b/components.d.ts index 21181b287f5316f2a091aa52c11d7573c0c4d4be..048696db7b49c98893198b22fb1c3b7d406607bd 100644 --- a/components.d.ts +++ b/components.d.ts @@ -26,7 +26,9 @@ declare module 'vue' { ElOption: typeof import('element-plus/es')['ElOption'] ElPagination: typeof import('element-plus/es')['ElPagination'] 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'] @@ -35,9 +37,11 @@ declare module 'vue' { RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] ShowNotice: typeof import('./src/views/Notice/ShowNotice.vue')['default'] + StuHomework: typeof import('./src/views/StuHomework/StuHomework.vue')['default'] UserLogin: typeof import('./src/views/Login/UserLogin.vue')['default'] UserLoginChange: typeof import('./src/views/Login/components/UserLoginChange.vue')['default'] UserLoginEnrol: typeof import('./src/views/Login/components/UserLoginEnrol.vue')['default'] UserLoginHomepage: typeof import('./src/views/Login/components/UserLoginHomepage.vue')['default'] + WorkInfo: typeof import('./src/views/StuHomework/WorkInfo.vue')['default'] } } diff --git a/src/components/CenterTask.vue b/src/components/CenterTask.vue index cfc75f838f0e966dcf3ac046326431c6b8ec1cad..a2b1a371ddc78e3bf4f21c2938b6a4021ad7f593 100644 --- a/src/components/CenterTask.vue +++ b/src/components/CenterTask.vue @@ -6,30 +6,43 @@ <el-row class="tac"> <el-col :span="12"> <div class="logo"> - <img src="../assets/logo.png" style="width: 150px; height: 140px" /> + <img src="../assets/logo.png" style="width: 220px; height: 200px" /> </div> <el-menu - default-active="2" + router + :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" > <el-menu-item index="1"> <el-icon><House /></el-icon> - <span>首页</span> + <span class="menu-text">首页</span> </el-menu-item> - <el-menu-item index="2"> + <el-menu-item index="/Notice"> <el-icon><Message /></el-icon> - <span><RouterLink to="/CenterTask/Notice">通知</RouterLink></span> + <span class="menu-text">通知</span> </el-menu-item> - <el-menu-item index="3"> + <el-menu-item index="/Homework"> <el-icon><document /></el-icon> - <span>作业</span> + <span class="menu-text">作业</span> </el-menu-item> <el-menu-item index="4"> <el-icon><ChatDotRound /></el-icon> - <span>é¢è¯•</span> + <span class="menu-text">é¢è¯•</span> </el-menu-item> + <el-sub-menu index="5"> + <template #title> + <div class="special"> + <el-icon><setting /></el-icon> + <span class="menu-text">设置</span> + </div> + </template> + <el-menu-item index="5-1" class="Item"> + <el-icon><User /></el-icon> + <span class="menu-text">用户管ç†</span> + </el-menu-item> + </el-sub-menu> </el-menu> </el-col> </el-row> @@ -37,8 +50,8 @@ <el-container> <el-header> <el-breadcrumb :separator-icon="ArrowRight"> - <el-breadcrumb-item>首页</el-breadcrumb-item> - <el-breadcrumb-item>通知</el-breadcrumb-item> + <el-breadcrumb-item class="menu-text">首页</el-breadcrumb-item> + <el-breadcrumb-item class="menu-text">通知</el-breadcrumb-item> </el-breadcrumb> </el-header> <el-main> diff --git a/src/router/index.ts b/src/router/index.ts index 16a56ff98561979880cd29e5734c4b053507dc9c..4aeb37bae052ca400c4ad5eaa7c3280003302754 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,10 +1,22 @@ import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs'; import { RouteRecordRaw, createRouter, createWebHashHistory } from 'vue-router'; export const constantRoutes: RouteRecordRaw[] = [ - // { - // path: '/', - // component: () => import('@/views/Login.vue') - // }, + { + path: '/Login', + 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: '/', diff --git a/src/styles/CenterTask.css b/src/styles/CenterTask.css index 9c5d65b94073cff3c842f764e211828406e32db4..af609a1d71204b2ab7f4ad87bab6e2c4b009c8cb 100644 --- a/src/styles/CenterTask.css +++ b/src/styles/CenterTask.css @@ -6,7 +6,7 @@ .el-aside { min-height: 100vh; - max-width: 20vw; + width: 200px; } .el-col-12 { @@ -18,11 +18,31 @@ border: none; } +.el-icon { + padding-left: 20px; +} + +.menu-text { + font-size: 25px; + letter-spacing: 2px; + font-weight: 600; +} + +li.el-menu-item { + width: 250px; + padding: 50px 10px; +} + .el-main { display: flex; justify-content: center; align-items: center; - width: 80vw; + flex: 1; + overflow-y: auto; +} + +.el-container { + min-width: auto; } .el-header { @@ -30,11 +50,14 @@ justify-content: center; align-items: center; justify-content: flex-start; + height: 150px; + width: 1240px; + padding-left: 40px; } .logo { position: relative; - top: -4%; + top: -2%; } .el-menu-vertical-demo { diff --git a/src/styles/CenterTask.css.map b/src/styles/CenterTask.css.map index 0e27e54e862316b1c22a1e34231ce05df2a1ebd3..aa85bfa454d7b83f546671115e18d821789b0f04 100644 --- a/src/styles/CenterTask.css.map +++ b/src/styles/CenterTask.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["CenterTask.scss"],"names":[],"mappings":";AAAA;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAOF;EAJE;EACA;EACA;EAIA;;;AAEF;EARE;EACA;EACA;EAQA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;AACA;EACE;;;AAGJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA","file":"CenterTask.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["CenterTask.scss"],"names":[],"mappings":";AAAA;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAQF;EAJE;EACA;EACA;EAIA;EACA;;;AAEF;EACE;;;AAEF;EAZE;EACA;EACA;EAYA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;AACA;EACE;;;AAGJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA","file":"CenterTask.css"} \ No newline at end of file diff --git a/src/styles/CenterTask.scss b/src/styles/CenterTask.scss index bbae5111e2d2824f651bae6e4dd5f7ee81a5ca07..4dd9943d53aec6bfc9cee5a17d240944f5d37a1c 100644 --- a/src/styles/CenterTask.scss +++ b/src/styles/CenterTask.scss @@ -4,7 +4,7 @@ } .el-aside { min-height: 100vh; - max-width: 20vw; + width: 200px; } .el-col-12 { max-width: 100%; @@ -13,6 +13,19 @@ .el-menu { border: none; } +.el-icon { + padding-left: 20px; +} +.menu-text { + font-size: 25px; + letter-spacing: 2px; + font-weight: 600; +} +li.el-menu-item { + width: 250px; + padding: 50px 10px; +} + @mixin box { display: flex; justify-content: center; @@ -20,15 +33,22 @@ } .el-main { @include box; - width: 80vw; + flex: 1; + overflow-y: auto; +} +.el-container { + min-width: auto; } .el-header { @include box; justify-content: flex-start; + height: 150px; + width: 1240px; + padding-left: 40px; } .logo { position: relative; - top: -4%; + top: -2%; } .el-menu-vertical-demo { background-color: rgba(255, 255, 255, 0); @@ -50,3 +70,6 @@ background-size: cover; /* ç¡®ä¿èƒŒæ™¯å›¾ç‰‡è¦†ç›–整个容器 */ z-index: -1; } +// .el-sub-menu__title { +// height: 100px !important; +// } diff --git a/src/styles/StuHomework.css b/src/styles/StuHomework.css new file mode 100644 index 0000000000000000000000000000000000000000..fe340a153a06742aae8ff2eea9e2c7b0a257960b --- /dev/null +++ b/src/styles/StuHomework.css @@ -0,0 +1,69 @@ +.conten-box { + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + flex-direction: column; + width: 100%; + height: 100%; + justify-content: space-around; +} + +.search-box { + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + min-width: 1000px; + height: 100px; + background-color: white; + justify-content: space-around; +} + +button.el-button.el-button--Basic.White, +.el-button--primary { + height: 50px; + width: 120px; +} + +.el-text { + font-size: 18px; + font-weight: 600; +} + +.homework-box { + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + flex-direction: column; + min-width: 1000px; + min-height: 900px; + background-color: white; +} + +.form-box { + box-sizing: border-box; + padding: 20px; + min-height: 800px; +} + +.stu-form { + height: 80%; +} + +.foot-box { + min-width: 900px; + display: flex; + justify-content: space-between; +} + +.stu-form .el-table__header th { + background-color: #f5f7fa !important; +} + +button.el-button.el-button--small { + border: none; + color: rgb(101, 153, 191); +}/*# sourceMappingURL=StuHomework.css.map */ \ No newline at end of file diff --git a/src/styles/StuHomework.css.map b/src/styles/StuHomework.css.map new file mode 100644 index 0000000000000000000000000000000000000000..5c3e304b7350b21729175ff2aae81923e7bc16fc --- /dev/null +++ b/src/styles/StuHomework.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["StuHomework.scss"],"names":[],"mappings":"AAMA;EACE;EANA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;;;AAEF;EAbE;EACA;EACA;EACA;EAYA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAEF;EACE;EACA;;;AAEF;EA9BE;EACA;EACA;EACA;EA6BA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA","file":"StuHomework.css"} \ No newline at end of file diff --git a/src/styles/StuHomework.scss b/src/styles/StuHomework.scss new file mode 100644 index 0000000000000000000000000000000000000000..3d9ed2a7174244ffa2280155edaa1bcebab11195 --- /dev/null +++ b/src/styles/StuHomework.scss @@ -0,0 +1,59 @@ +@mixin box { + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; +} +.conten-box { + box-sizing: border-box; + @include box; + flex-direction: column; + width: 100%; + height: 100%; + justify-content: space-around; +} +.search-box { + @include box; + min-width: 1000px; + height: 100px; + background-color: white; + justify-content: space-around; +} + +button.el-button.el-button--Basic.White, +.el-button--primary { + height: 50px; + width: 120px; +} +.el-text { + font-size: 18px; + font-weight: 600; +} +.homework-box { + @include box; + flex-direction: column; + min-width: 1000px; + min-height: 900px; + background-color: white; +} +.form-box { + box-sizing: border-box; + padding: 20px; + min-height: 800px; +} +.stu-form { + height: 80%; +} +.foot-box { + min-width: 900px; + display: flex; + justify-content: space-between; +} + +.stu-form .el-table__header th { + background-color: #f5f7fa !important; +} +button.el-button.el-button--small { + border: none; + color: rgb(101, 153, 191); +} diff --git a/src/styles/WorkInfo.css b/src/styles/WorkInfo.css new file mode 100644 index 0000000000000000000000000000000000000000..ba5ea0cfcbf985e5d50dedfdae9d603325bdd547 --- /dev/null +++ b/src/styles/WorkInfo.css @@ -0,0 +1,44 @@ +.big-box { + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + justify-content: space-around; +} + +.form-box { + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + min-height: 500px; +} + +.commit-text { + font-size: 23px; + color: #646465; + font-weight: 600; + text-align: left; +} + +.commit-box { + width: 700px; + height: 700px; + background-color: white; +} + +.scrollbar-demo-item { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + margin: 10px; + text-align: center; + border-radius: 4px; + background: var(--el-color-primary-light-9); + color: var(--el-color-primary); +} + +.el-scrollbar { + width: 100px; +}/*# sourceMappingURL=WorkInfo.css.map */ \ No newline at end of file diff --git a/src/styles/WorkInfo.css.map b/src/styles/WorkInfo.css.map new file mode 100644 index 0000000000000000000000000000000000000000..71c9641ef0acd22a21802a072d38e38557ada342 --- /dev/null +++ b/src/styles/WorkInfo.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["WorkInfo.scss"],"names":[],"mappings":"AAMA;EALE;EACA;EACA;EACA;EAIA;;;AAEF;EATE;EACA;EACA;EACA;EAQA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAEF;EACE","file":"WorkInfo.css"} \ No newline at end of file diff --git a/src/styles/WorkInfo.scss b/src/styles/WorkInfo.scss new file mode 100644 index 0000000000000000000000000000000000000000..a01a67f78e78ca26c9bce86bfedd842106762999 --- /dev/null +++ b/src/styles/WorkInfo.scss @@ -0,0 +1,40 @@ +@mixin box { + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; +} +.big-box { + @include box; + justify-content: space-around; +} +.form-box { + @include box; + min-height: 500px; +} +.commit-text { + font-size: 23px; + color: #646465; + font-weight: 600; + text-align: left; +} +.commit-box { + width: 700px; + height: 700px; + background-color: white; +} +.scrollbar-demo-item { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + + margin: 10px; + text-align: center; + border-radius: 4px; + background: var(--el-color-primary-light-9); + color: var(--el-color-primary); +} +.el-scrollbar { + width: 100px; +} diff --git a/src/views/StuHomework/StuHomework.vue b/src/views/StuHomework/StuHomework.vue new file mode 100644 index 0000000000000000000000000000000000000000..e646343149c0624edfaa509eaadf71166eb5530d --- /dev/null +++ b/src/views/StuHomework/StuHomework.vue @@ -0,0 +1,86 @@ +<template> + <div class="conten-box"> + <div class="search-box"> + <span>æ ‡é¢˜å†…å®¹</span> + <el-input + v-model="searchText" + placeholder="Enter search text" + style="width: 250px; height: 40px" + ></el-input> + <span>å‘布时间</span> + <el-date-picker + v-model="selectedDate" + type="date" + placeholder="å¹´/月/æ—¥" + 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> + </div> + <div class="homework-box"> + <div class="form-box"> + <el-table :data="tableData" border class="stu-form"> + <el-table-column prop="date" label="ä½œä¸šæ ‡é¢˜" width="370px" align="center" /> + <el-table-column prop="name" label="å‘布时间" width="370px" align="center" /> + <el-table-column align="center" label="详细æ“作" width="150px"> + <template #default="scope"> + <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> + 点击查看详情 > + </el-button> + </template> + </el-table-column> + </el-table> + </div> + <div class="foot-box"> + <div class="demonstration">总计100人</div> + <el-pagination + background + layout="prev, pager, next" + :total="1000" + @current-change="handleCurrentChange" + /> + </div> + </div> + </div> +</template> + +<script lang="ts" setup> +import { useRouter } from 'vue-router'; +const selectedDate = ref(''); +const searchText = ref(''); +const router = useRouter(); +interface TableItem { + date: string; + name: string; +} +const originalTableData = ref<TableItem[]>([ + { date: '2024/8/1', name: 'John Doe' }, + { date: '2024/8/2', name: 'Jane Smith' }, + { date: '2024/8/3', name: 'Tom Brown' } +]); +const tableData = ref<TableItem[]>(originalTableData.value); + +const search = () => { + const text = searchText.value.toLowerCase(); + const date = selectedDate.value; + console.log(date); + + const filteredData = originalTableData.value.filter( + row => row.date == date || row.name.toLowerCase().includes(text) + ); + console.log(filteredData); + tableData.value = filteredData; +}; + +const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`); +}; +const handleEdit = (index: number, row: TableItem) => { + console.log(index, row); + router.push('/Homework/HomeInfo'); +}; +</script> + +<style scoped> +@import '../../styles/StuHomework.css'; +</style> diff --git a/src/views/StuHomework/WorkInfo.vue b/src/views/StuHomework/WorkInfo.vue new file mode 100644 index 0000000000000000000000000000000000000000..40d109ae3874365beb3cb1a68ea7d648ab0e2e3f --- /dev/null +++ b/src/views/StuHomework/WorkInfo.vue @@ -0,0 +1,83 @@ +<template> + <div class="big-box"> + <div class="commit-box"> + <div class="commit-text">未æäº¤</div> + <div class="big-form-box"> + <div class="form-box"> + <el-table :data="filterTableData" border> + <el-table-column prop="date" label="ä½œä¸šæ ‡é¢˜" width="200px" align="center" /> + <el-table-column prop="name" label="å‘布时间" width="200px" align="center" /> + <el-table-column align="center" prop="address" label="详细æ“作" width="200px" /> + <el-table-column align="center" label="adress" width="200px"> + <template #default="scope"> + <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> + Edit + </el-button> + <el-button + size="small" + type="danger" + @click="handleDelete(scope.$index, scope.row)" + > + Delete + </el-button> + </template> + </el-table-column> + </el-table> + </div> + </div> + </div> + <div class="uncommit-box"> + <el-scrollbar height="400px"> + <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p> + </el-scrollbar> + </div> + </div> +</template> + +<script setup lang="ts"> +interface User { + date: string; + name: string; + address: string; +} + +const search = ref(''); +const filterTableData = computed(() => + tableData.filter( + data => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase()) + ) +); +const handleEdit = (index: number, row: User) => { + console.log(index, row); +}; +const handleDelete = (index: number, row: User) => { + console.log(index, row); +}; + +const tableData: User[] = [ + { + date: '2016-05-03', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles' + }, + { + date: '2016-05-02', + name: 'John', + address: 'No. 189, Grove St, Los Angeles' + }, + { + date: '2016-05-04', + name: 'Morgan', + address: 'No. 189, Grove St, Los Angeles' + }, + { + date: '2016-05-01', + name: 'Jessy', + address: 'No. 189, Grove St, Los Angeles' + } +]; +</script> + +<style scoped> +@import '../../styles/WorkInfo.css'; +</style>