chenyuan1
/
dianshang-qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: widen student exam panel

Browse Source
fix/exam-question-access-material-excel-delete-draft
chenyuan 4 weeks ago
parent 5b7c6f318e
commit e5a7183285
1 changed files with 52 additions and 4 deletions
Show Stats Download Patch File Download Diff File

56
src/views/exam/index.vue
Unescape Escape View File

@ -26,8 +26,56 @@ function deviceToken(id){const key=`exam-device-${id}`;let value=localStorage.ge
function count(value){return value==="ALL"?exams.value.length:exams.value.filter(e=>e.status===value).length}function day(v){return String(new Date(v).getDate()).padStart(2,"0")}function month(v){return `${new Date(v).getMonth()+1}月`}function formatTime(v){return new Date(v).toLocaleString("zh-CN",{hour12:false}).replaceAll("/","-")}function countdown(v){const minutes=Math.max(0,Math.ceil((new Date(v)-Date.now())/60000));return minutes<60?`${minutes} 分钟后开始`:`${Math.ceil(minutes/60)} 小时后开始`} function count(value){return value==="ALL"?exams.value.length:exams.value.filter(e=>e.status===value).length}function day(v){return String(new Date(v).getDate()).padStart(2,"0")}function month(v){return `${new Date(v).getMonth()+1}月`}function formatTime(v){return new Date(v).toLocaleString("zh-CN",{hour12:false}).replaceAll("/","-")}function countdown(v){const minutes=Math.max(0,Math.ceil((new Date(v)-Date.now())/60000));return minutes<60?`${minutes} 分钟后开始`:`${Math.ceil(minutes/60)} 小时后开始`}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.student-exams{color:#20282d;max-width:1180px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:center;h1{font-size:26px;margin:0;letter-spacing:0}p{color:#6b7280;margin:6px 0 0}} .student-exams {
.status-filter{display:flex;gap:28px;border-bottom:1px solid #dfe5e7;margin-top:24px;button{border:0;background:none;padding:12px 2px;color:#68747a;cursor:pointer;position:relative;b{margin-left:7px;font-weight:500}&.active{color:#12637a;font-weight:600;&:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#16839c}}}} --exam-text: #e8f5ff;
.exam-row{display:grid;grid-template-columns:78px 1fr 150px;gap:22px;align-items:center;padding:22px 8px;border-bottom:1px solid #e6eaec}.date-block{border-right:1px solid #dfe5e7;display:grid;text-align:center;strong{font-size:28px;color:#185e70}span{color:#6b7280;font-size:13px}}.exam-info{h2{font-size:18px;margin:9px 0}.submitted{margin-left:8px;color:#43856e;font-size:13px}p{display:flex;align-items:center;gap:5px;margin:0;color:#6b7280}}.exam-action{text-align:right;color:#7b858a} --exam-muted: #8eafc2;
@media(max-width:650px){.exam-row{grid-template-columns:58px 1fr}.exam-action{grid-column:2;text-align:left}.status-filter{gap:14px;overflow-x:auto}} --exam-line: rgba(127, 186, 215, 0.22);
box-sizing: border-box;
width: calc(100% - 24px);
max-width: 1560px;
min-height: calc(100vh - 104px);
margin: 10px auto;
padding: 28px 32px 34px;
color: var(--exam-text);
border: 1px solid rgba(49, 151, 221, 0.34);
border-radius: 14px;
background: linear-gradient(145deg, rgba(6, 34, 58, 0.9), rgba(3, 15, 27, 0.94));
box-shadow: 0 14px 36px rgba(0, 12, 30, 0.38), inset 0 1px 0 rgba(173, 225, 255, 0.08), 0 0 18px rgba(16, 109, 189, 0.25);
}
.page-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0 4px 20px;
border-bottom: 1px solid var(--exam-line);
h1 { color: #f1f8ff; font-size: 28px; line-height: 1.2; margin: 0; letter-spacing: .02em; }
p { color: var(--exam-muted); margin: 8px 0 0; font-size: 14px; }
:deep(.el-button.is-circle) { color: #31576e; border-color: rgba(255,255,255,.65); }
}
.status-filter {
display: flex;
gap: 30px;
border-bottom: 1px solid var(--exam-line);
margin-top: 8px;
button {
border: 0;
background: none;
padding: 14px 2px 13px;
color: var(--exam-muted);
cursor: pointer;
position: relative;
font-size: 14px;
transition: color .2s ease;
b { margin-left: 7px; font-weight: 600; color: #b8d0de; }
&:hover { color: #d9f3ff; }
&.active { color: #55d4ee; font-weight: 600; &:after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: #27c7e5; box-shadow: 0 0 10px rgba(39,199,229,.65); } }
}
}
.exam-list { min-height: 280px; }
.exam-row { display: grid; grid-template-columns: 78px 1fr 150px; gap: 22px; align-items: center; padding: 22px 8px; border-bottom: 1px solid var(--exam-line); }
.date-block { border-right: 1px solid var(--exam-line); display: grid; text-align: center; strong { font-size: 28px; color: #5ed3ed; } span { color: var(--exam-muted); font-size: 13px; } }
.exam-info { h2 { color: #edf8ff; font-size: 18px; margin: 9px 0; } .submitted { margin-left: 8px; color: #7ed9bd; font-size: 13px; } p { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--exam-muted); } }
.exam-action { text-align: right; color: var(--exam-muted); }
:deep(.el-empty__description p) { color: var(--exam-muted); }
@media(max-width:650px){.student-exams{width:calc(100% - 12px);padding:20px 16px 24px}.exam-row{grid-template-columns:58px 1fr}.exam-action{grid-column:2;text-align:left}.status-filter{gap:14px;overflow-x:auto}}
</style> </style>

Write Preview
Loading…
Cancel
Save