Skip to content

P
project-online-old
提交 955ab804 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

feat: 新增成绩查询

上级 f5ec3beb
隐藏空白字符变更
内嵌 并排
正在显示 包含 420 行增加 和 145 行删除
src/components/layout/header.vue
浏览文件 @ 955ab804
......@@ -28,9 +28,16 @@
<div class="head-nav-content max-width-content">
<ul :class="{ 'nav-item-box': true }">
<li v-for="(item, index) in navData" :key="index">
<div :class="getNameActive(item)">
<router-link :to="item.path"> <div v-html="item.name"></div></router-link>
<div class="nav-item" :class="getNameActive(item)">
<router-link :to="item.path">{{ item.name }}</router-link>
</div>
<ul v-if="item.children">
<li v-for="child in item.children" :key="child.path">
<div class="nav-item" :class="getNameActive(child)">
<router-link :to="child.path">{{ child.name }}</router-link>
</div>
</li>
</ul>
</li>
</ul>
</div>
......@@ -48,10 +55,15 @@ export default {
{ name: '智能数据分析与实战应用', path: '/product' },
{ name: '技能培训', path: '/train' },
// { name: '教科研服务', path: '/service' },
{ name: '认证中心', path: '/attestation' },
{
name: '认证中心',
path: '/attestation',
children: [
{ name: '我是学生', path: '/attestation/student' },
{ name: '我是老师', path: '/attestation/teacher' },
],
},
],
time: null,
isEn: false,
user: {},
isLogin: false,
options: {
......@@ -69,15 +81,11 @@ export default {
},
}
},
mounted() {},
methods: {
reg() {
this.isLogin = false
this.$router.push({ path: '/register' })
},
closeMask(blo) {
this.isLogin = blo
},
handleLogin() {
this.passport.login()
},
......@@ -102,7 +110,7 @@ export default {
this.user = user
window.sessionStorage.userInfo = JSON.stringify(user)
},
loginSuccess(data) {
loginSuccess() {
this.passport.checkLoginStatus((isLogin, user = {}) => {
window.sessionStorage.userInfo = JSON.stringify(user)
this.isLogin = isLogin
......@@ -111,21 +119,6 @@ export default {
window.location.reload()
})
},
goPage(path, goType) {
if (parseInt(goType) === 3) {
this.$message('暂未开通，敬请期待')
} else {
if (path) {
if (goType === 1) {
window.open(path)
} else if (goType === 2) {
window.location.href = path
} else {
this.$router.push({ path: path })
}
}
}
},
},
computed: {
passport() {
......@@ -135,12 +128,12 @@ export default {
return (item) => {
const currentPath = this.$route.path
if (currentPath.includes(item.path)) {
return 'name active'
return 'active'
} else {
let className = 'name'
if (item.childern) {
item.childern.map((cData) => {
cData.path === currentPath && (className = 'name active')
let className = ''
if (item.children) {
item.children.map((cData) => {
cData.path === currentPath && (className = 'active')
})
}
return className
......@@ -242,135 +235,51 @@ li {
width: 100%;
display: flex;
justify-content: space-between;
li {
a {
color: inherit;
}
> li {
position: relative;
// margin-right: 50px;
.name1 {
line-height: 1.5;
}
.name {
> .nav-item {
line-height: 72px;
font-size: 22px;
color: #333333;
cursor: pointer;
a {
color: #333333;
font-size: 22px;
text-decoration: none;
}
&.active {
font-weight: 500;
color: #aa1941;
a {
color: #aa1941;
}
}
}
&:hover {
.name {
color: #aa1941;
font-weight: 500;
a {
// font-weight: 500;
color: #aa1941;
}
}
.child-item {
.one-level {
display: block;
}
ul {
display: block;
}
}
.child-item {
ul {
display: none;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
position: absolute;
top: 72px;
left: -10px;
display: flex;
background: #fff;
z-index: 999;
.one-level {
padding: 36px 24px 0;
border-top: 4px solid rgba(170, 25, 65, 1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
display: none;
.li {
margin-bottom: 36px;
display: flex;
justify-content: space-between;
&.active {
.name {
color: rgba(170, 25, 65, 1);
}
}
.name {
font-weight: 400;
line-height: 100%;
color: #333333;
font-size: 16px;
white-space: nowrap;
a {
color: #333333;
font-size: 16px;
}
}
.el-icon-arrow-right {
color: rgba(51, 51, 51, 1);
margin-left: 15px;
}
&:hover {
.name {
color: rgba(170, 25, 65, 1);
a {
color: rgba(170, 25, 65, 1);
}
}
.el-icon-arrow-right {
color: rgba(170, 25, 65, 1);
}
}
}
}
.two-level {
pointer-events: auto;
padding: 34px 41px 0 24px;
.name1 {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
white-space: nowrap;
&:hover {
padding: 20px 24px;
border-top: 4px solid rgba(170, 25, 65, 1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
li {
&:hover,
&.active {
.nav-item {
color: rgba(170, 25, 65, 1);
}
a {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
}
}
.name {
.nav-item {
color: #333;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
letter-spacing: 1px;
line-height: 3;
white-space: nowrap;
&:hover {
color: rgba(170, 25, 65, 1);
}
a {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
white-space: nowrap;
}
}
}
}
......
src/pages/attestation/index.vue
浏览文件 @ 955ab804
......@@ -30,7 +30,9 @@
<div class="box-item">
<img src="/images/cx.png" />
<p>成绩查询</p>
<el-button type="primary">立即查询</el-button>
<router-link to="/attestation/query">
<el-button type="primary">立即查询</el-button>
</router-link>
</div>
<div class="box-item">
<img src="/images/qr.png" />
......
src/pages/attestation/student.vue 0 → 100644
浏览文件 @ 955ab804
<template>
<div>
<img src="/images/student_banner.png" class="banner" />
<section class="section">
<h1 class="pt-100">认证报名</h1>
<h2>报考流程</h2>
<p class="describe">
1、报名条件审核<br />
2、提交报名材料并缴费<br />
3、参加培训课程<br />
4、参加考试<br />
5、成绩公布与证书发放<br />
6、查询及验证证书
</p>
<h2>报名条件</h2>
<p class="describe">企业职工、职业院校学生、退伍军人</p>
<h2>培训费用</h2>
<img src="/images/pxfy.png" />
<h2>开班计划</h2>
<img src="/images/kbjh.png" />
<p class="tips">* 具体开班日期随招生计划可能会有调整，以最终邮件通知为准。</p>
<h2>考试计划</h2>
<img src="/images/ksjh.png" />
<h2>证书样本</h2>
<div class="zs-box">
<img src="/images/zs_1.png" />
<img src="/images/zs_2.png" />
</div>
<div class="box-group">
<div class="box-item">
<img src="/images/cx.png" />
<p>成绩查询</p>
<router-link to="/attestation/student/query">
<el-button type="primary">立即查询</el-button>
</router-link>
</div>
<div class="box-item">
<img src="/images/qr.png" />
<p>联系人：景老师</p>
<p>电话：13436826026（微信同号）</p>
</div>
</div>
</section>
</div>
</template>
<style lang="scss" scoped>
.section {
width: 1200px;
margin: 0 auto;
}
.banner {
width: 100%;
display: block;
}
.pt-80 {
padding-top: 80px;
}
.pt-100 {
padding-top: 100px;
}
h1 {
font-size: 32px;
font-weight: bold;
color: #333333;
line-height: 34px;
text-align: center;
margin-bottom: 50px;
}
.describe {
font-size: 18px;
color: #666666;
line-height: 36px;
}
h2 {
padding: 50px 0 20px;
font-size: 24px;
color: #333;
}
.tips {
margin-top: 10px;
color: #666666;
}
.zs-box {
padding: 50px 80px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.box-group {
padding: 80px 40px;
display: flex;
align-items: center;
gap: 70px;
.box-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
flex: 1;
height: 310px;
border-top: 8px solid #aa1941;
background-color: #fff;
border-radius: 8px;
}
}
</style>
src/pages/attestation/studentQuery.vue 0 → 100644
浏览文件 @ 955ab804
<template>
<div>
<img src="/images/student_banner.png" style="width: 100%" />
<div class="student-query" v-if="detail.id">
<el-card shadow="hover">
<template #header>个人信息</template>
<div class="student-query-info">
<img :src="detail.avatar || '/images/default.jpg'" class="avatar" />
<el-descriptions :column="1">
<el-descriptions-item label="学生姓名">{{ detail.username }}</el-descriptions-item>
<el-descriptions-item label="证件类型">居民身份证</el-descriptions-item>
<el-descriptions-item label="证件号码">{{ detail.id_num }}</el-descriptions-item>
<el-descriptions-item label="准考证号">{{ detail.admission_num }}</el-descriptions-item>
<el-descriptions-item label="所属院校">{{ detail.school_name }}</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
<el-card shadow="hover">
<template #header>我的成绩</template>
<h2>考核证书：商务数据分析技术-智能数据分析与实战应用（初级）</h2>
<dl>
<dt>考核单位：</dt>
<dd>清控紫荆（北京）教育科技股份有限公司</dd>
</dl>
<dl>
<dt>考核通过条件：</dt>
<dd>各科成绩合格</dd>
</dl>
<el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }">
<el-table-column prop="title" label="科目名称"></el-table-column>
<el-table-column prop="exam_method" label="考试方式" align="center"></el-table-column>
<el-table-column prop="pass_score" label="合格分数" align="center"> </el-table-column>
<el-table-column prop="score" label="考试成绩" align="center">
<template #default="{ row }">
<template v-if="row.score">
<p>考试成绩：{{ row.score }}分</p>
<p>考试结果：{{ row.result }}</p>
</template>
<template v-else>--</template>
</template>
</el-table-column>
<el-table-column prop="address" label="证书邮寄地址"></el-table-column>
</el-table>
<p class="tips" v-if="!isPass">
您的此次考试未能通过。如有意向参加补考，点击下方按钮缴纳相应补考费用，缴费成功后请留意补考时间和相关要求。
</p>
</el-card>
</div>
<el-result title="暂无信息" icon="info" v-else></el-result>
</div>
</template>
<script>
import datalist from '@/assets/data.js'
import * as api from '@/api/article'
export default {
data() {
return {
detail: {},
tableData: [],
}
},
computed: {
id() {
return this.$route.query.id
},
train() {
return datalist.find((item) => item.id == this.id) || datalist[0]
},
isPass() {
return this.detail.score >= 60
},
},
created() {
this.getDetail()
},
methods: {
// 获取报名信息
async getDetail() {
if (!this.train) return
const res = await api.getFormDetail({ periods: this.train.id })
const detail = res.data.detail
this.detail = detail
this.tableData = [
{
title: '商务数据分析技术-智能数据分析与实战应用（初级）',
exam_method: '机考',
pass_score: 60,
score: detail.score,
address: detail.address,
result: detail.score >= 60 ? '合格' : '未通过',
},
]
},
},
}
</script>
<style lang="scss">
.student-query {
max-width: 1200px;
margin: 0 auto;
.el-card {
margin: 20px 0;
}
h2 {
padding-left: 10px;
font-size: 18px;
line-height: 1;
font-weight: bold;
margin-bottom: 20px;
border-left: 4px solid var(--main-color);
}
dl {
line-height: 30px;
+ dl {
margin-top: 20px;
}
display: flex;
dt {
color: #999;
}
dd {
flex: 1;
color: #000;
}
}
.tips {
display: none;
margin: 10px 0;
color: #f00;
}
}
.student-query-info {
display: flex;
gap: 30px;
.avatar {
width: 160px;
}
.el-descriptions {
flex: 1;
margin-top: 10px;
}
}
</style>
src/pages/attestation/teacher.vue 0 → 100644
浏览文件 @ 955ab804
<template>
<div>
<img src="/images/student_banner.png" class="banner" />
<section class="section">
<h1 class="pt-100">认证报名</h1>
<h2>报考流程</h2>
<p class="describe">
1、报名条件审核<br />
2、提交报名材料并缴费<br />
3、参加培训课程<br />
4、参加考试<br />
5、成绩公布与证书发放<br />
6、查询及验证证书
</p>
<h2>报名条件</h2>
<p class="describe">企业职工、职业院校学生、退伍军人</p>
<h2>培训费用</h2>
<img src="/images/pxfy.png" />
<h2>开班计划</h2>
<img src="/images/kbjh.png" />
<p class="tips">* 具体开班日期随招生计划可能会有调整，以最终邮件通知为准。</p>
<h2>考试计划</h2>
<img src="/images/ksjh.png" />
<h2>证书样本</h2>
<div class="zs-box">
<img src="/images/zs_1.png" />
<img src="/images/zs_2.png" />
</div>
<div class="box-group">
<div class="box-item">
<img src="/images/cx.png" />
<p>证书查询</p>
<router-link to="/attestation/teacher/query">
<el-button type="primary">立即查询</el-button>
</router-link>
</div>
<div class="box-item">
<img src="/images/qr.png" />
<p>联系人：景老师</p>
<p>电话：13436826026（微信同号）</p>
</div>
</div>
</section>
</div>
</template>
<style lang="scss" scoped>
.section {
width: 1200px;
margin: 0 auto;
}
.banner {
width: 100%;
display: block;
}
.pt-80 {
padding-top: 80px;
}
.pt-100 {
padding-top: 100px;
}
h1 {
font-size: 32px;
font-weight: bold;
color: #333333;
line-height: 34px;
text-align: center;
margin-bottom: 50px;
}
.describe {
font-size: 18px;
color: #666666;
line-height: 36px;
}
h2 {
padding: 50px 0 20px;
font-size: 24px;
color: #333;
}
.tips {
margin-top: 10px;
color: #666666;
}
.zs-box {
padding: 50px 80px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.box-group {
padding: 80px 40px;
display: flex;
align-items: center;
gap: 70px;
.box-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
flex: 1;
height: 310px;
border-top: 8px solid #aa1941;
background-color: #fff;
border-radius: 8px;
}
}
</style>
src/pages/home/queryCard.vue → src/pages/attestation/teacherQuery.vue
浏览文件 @ 955ab804
......@@ -18,7 +18,7 @@
</div>
<div class="home-box-else" v-else>
<!-- 暂无信息 -->
<el-result title="暂无信息" icon="info" class="el-result"> </el-result>
<el-result title="暂无信息" icon="info"> </el-result>
</div>
</div>
</template>
......@@ -42,7 +42,7 @@ export default {
},
methods: {
// 获取证书列表
handlegetCertCard() {
getCertCard() {
const params = { project_prefix: 'x1' }
api.getCertCard(params).then((res) => {
this.cardList = res.data?.list
......@@ -59,7 +59,7 @@ export default {
},
mounted() {
// 获取证书
this.handlegetCertCard()
this.getCertCard()
},
}
</script>
......
src/pages/train/detail.vue
浏览文件 @ 955ab804
......@@ -65,7 +65,7 @@
</template>
<script>
import breadcrumb from '@/components/breadcrumb.vue'
import datalist from './data.js'
import datalist from '@/assets/data.js'
export default {
components: { breadcrumb },
......
src/pages/train/form.vue
浏览文件 @ 955ab804
......@@ -144,7 +144,7 @@ import payPop from './components/pay.vue'
import countdown from '@/components/countdown.vue'
import { upload } from '@/utils/upload'
import { saveAs } from 'file-saver'
import datalist from './data.js'
import datalist from '@/assets/data.js'
import { IDCARD_REG, MOBILE_REG } from '@/utils/validate'
......
src/pages/train/list.vue
浏览文件 @ 955ab804
......@@ -22,7 +22,7 @@
import screenTabs from '@/components/tabs/screenTabs.vue'
import noData from '@/components/noData.vue'
import listItem from './components/listItem.vue'
import datalist from './data.js'
import datalist from '@/assets/data.js'
export default {
components: { screenTabs, listItem, noData },
data() {
......
src/router/index.js
浏览文件 @ 955ab804
......@@ -5,12 +5,12 @@ import Layout from '@/components/layout/index.vue'
Vue.use(VueRouter)
const routes = [
{ path: '*', redirect: '/' },
{ path: '*', redirect: '/index' },
{
path: '/',
component: Layout,
children: [
{ path: '', component: () => import('@/pages/home/index.vue') },
{ path: '/index', component: () => import('@/pages/home/index.vue') },
// 工作动态
{ path: '/news', component: () => import('@/pages/news/index.vue') },
{ path: '/news/detail', component: () => import('@/pages/news/detail.vue') },
......@@ -18,14 +18,16 @@ const routes = [
{ path: '/product', component: () => import('@/pages/product/index.vue') },
// 证书成绩查询
{ path: '/attestation', component: () => import('@/pages/attestation/index.vue') },
{ path: '/attestation/teacher', component: () => import('@/pages/attestation/teacher.vue') },
{ path: '/attestation/teacher/query', component: () => import('@/pages/attestation/teacherQuery.vue') },
{ path: '/attestation/student', component: () => import('@/pages/attestation/student.vue') },
{ path: '/attestation/student/query', component: () => import('@/pages/attestation/studentQuery.vue') },
// 技能培训
{ path: '/train', component: () => import('@/pages/train/index.vue') },
// 技能培训详情
{ path: '/train/list', component: () => import('@/pages/train/list.vue') },
{ path: '/train/detail', component: () => import('@/pages/train/detail.vue') },
{ path: '/train/form', component: () => import('@/pages/train/form.vue') },
// 证书成绩查询
{ path: '/queryCard', component: () => import('@/pages/home/queryCard.vue') },
],
},
]
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论