提交 c2cc7ff2 authored 作者: Yroc's avatar Yroc

'学生登录上传修改移动端适配'

上级 90103255
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Author: AnthonyD * @Author: AnthonyD
* @Date: 2023-03-01 15:29:44 * @Date: 2023-03-01 15:29:44
* @Last Modified by: AnthonyD * @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 20:19:14 * @Last Modified time: 2023-03-23 19:58:38
*/ */
</script><template> </script><template>
<div class="header_container"> <div class="header_container">
...@@ -20,22 +20,22 @@ ...@@ -20,22 +20,22 @@
@click="goBack()" @click="goBack()"
>返回</el-button >返回</el-button
> >
<h3 style="display: inline-block; margin: 0 25px"> <h3 class="title_card_box">
{{ examination_questions_info.title }} {{ examination_questions_info.title }}
</h3> </h3>
<el-tag <div class="top_card_box">
v-for="(e, i) in test_states" <el-tag
:key="i" v-for="(e, i) in test_states"
:type="e.type" class="status_test_box"
v-show="e.id == examination_questions_info.status" :key="i"
>{{ e.label }}</el-tag :type="e.type"
> v-show="e.id == examination_questions_info.status"
<el-tag >{{ e.label }}</el-tag
v-if="time" >
type="warning" <el-tag v-if="time" class="time_over_box" type="warning">{{
style="margin-left: 30px; backgound-color: #fcf6ec" time
>{{ time }}</el-tag }}</el-tag>
> </div>
</div> </div>
<div v-if="false"> <div v-if="false">
<div class="info_unit"> <div class="info_unit">
...@@ -194,10 +194,42 @@ export default { ...@@ -194,10 +194,42 @@ export default {
} }
} }
.time_over_box {
margin-left: 30px;
}
.title_card_box {
display: inline-block;
margin: 0 25px;
}
.test_info { .test_info {
margin-right: 12px; margin-right: 12px;
} }
.test_info_show {
// margin-left: 12px; @media screen and (max-width: 600px) {
.box-card {
width: 100%;
}
.top_card_box::after {
content: '';
display: block;
clear: both;
}
.status_test_box {
margin-left: 10px;
float: right;
margin-top: 10px;
}
.time_over_box {
float: right;
margin-left: 0;
margin-top: 10px;
}
.title_card_box {
margin: 0 30px 0 15px;
}
} }
</style> </style>
...@@ -3,10 +3,49 @@ ...@@ -3,10 +3,49 @@
* @Author: AnthonyD * @Author: AnthonyD
* @Date: 2023-02-23 16:03:00 * @Date: 2023-02-23 16:03:00
* @Last Modified by: AnthonyD * @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 17:03:56 * @Last Modified time: 2023-03-23 19:11:19
*/ */
</script><template> </script><template>
<div class="header_container"> <div class="header_container">
<div class="btn_box_mobile">
<el-row>
<el-popover placement="top-start" trigger="hover">
<button
style="
background-color: #038d6e;
width: 100%;
color: #fff;
border: 1px solid #038d6e;
margin-bottom: 5px;
"
size="mini"
@click="goPersonalCenter"
>
个人中心
</button>
<button
style="
background-color: #038d6e;
width: 100%;
color: #fff;
border: 1px solid #038d6e;
"
size="mini"
@click="logOut"
>
退出登录
</button>
<el-button
slot="reference"
type="primary"
icon="el-icon-user"
size="mini"
circle
></el-button>
</el-popover>
</el-row>
</div>
<div class="logo" @click="goPersonalCenter()" style="cursor: pointer"> <div class="logo" @click="goPersonalCenter()" style="cursor: pointer">
<img src="/image/logo.svg" alt="" /> <img src="/image/logo.svg" alt="" />
</div> </div>
...@@ -59,9 +98,17 @@ export default { ...@@ -59,9 +98,17 @@ export default {
} }
} }
@media screen and (min-width: 600px) {
.btn_box_mobile {
display: none;
}
}
// 移动端样式 // 移动端样式
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.header_container { .header_container {
position: relative;
text-align: left;
.logo { .logo {
display: none; display: none;
} }
...@@ -71,6 +118,10 @@ export default { ...@@ -71,6 +118,10 @@ export default {
.header_box { .header_box {
margin: auto; margin: auto;
} }
.btn_box_mobile {
position: absolute;
right: 20px;
}
} }
} }
</style> </style>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: AnthonyD * @Author: AnthonyD
* @Date: 2023-02-22 11:31:31 * @Date: 2023-02-22 11:31:31
* @Last Modified by: AnthonyD * @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-04 15:44:04 * @Last Modified time: 2023-03-23 13:41:54
*/ */
// cover some element-ui styles // cover some element-ui styles
...@@ -87,4 +87,4 @@ ...@@ -87,4 +87,4 @@
// to fix el-date-picker css style // to fix el-date-picker css style
.el-range-separator { .el-range-separator {
box-sizing: content-box; box-sizing: content-box;
} }
\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: AnthonyD * @Author: AnthonyD
* @Date: 2023-02-22 11:31:31 * @Date: 2023-02-22 11:31:31
* @Last Modified by: AnthonyD * @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 15:42:57 * @Last Modified time: 2023-03-23 19:47:29
*/ */
@import './variables.scss'; @import './variables.scss';
@import './mixin.scss'; @import './mixin.scss';
...@@ -219,13 +219,19 @@ aside { ...@@ -219,13 +219,19 @@ aside {
/* 输入框样式调整 */ /* 输入框样式调整 */
.right_data { .right_data {
.el-input__inner { // .el-input__inner {
// border: none;
// }
.el-button--medium {
border: none; border: none;
// height: 60px; height: 35px;
} }
} }
/* 移动端样式 */ /* 移动端样式 */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
...@@ -234,4 +240,28 @@ aside { ...@@ -234,4 +240,28 @@ aside {
padding: 0; padding: 0;
} }
} }
.list_container {
.el-button--medium {
// width: 40px;
padding: 0;
}
}
.answer_box {
.el-dialog {
width: 90%;
}
.el-upload-dragger {
width: 0;
}
}
// .el-radio-button__inner {
// border-left: 1px solid #DCDFE6;
// }
} }
\ No newline at end of file
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Author: AnthonyD * @Author: AnthonyD
* @Date: 2023-02-27 12:03:06 * @Date: 2023-02-27 12:03:06
* @Last Modified by: AnthonyD * @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 17:20:32 * @Last Modified time: 2023-03-23 19:32:08
*/ */
</script><template> </script><template>
<el-card class="box-card"> <el-card class="box-card">
...@@ -95,7 +95,11 @@ export default { ...@@ -95,7 +95,11 @@ export default {
width: 100%; width: 100%;
margin: 24px 0 0 0; margin: 24px 0 0 0;
.affirm_btn_box { .affirm_btn_box {
margin: 110% auto 0; margin: 50px auto 0;
}
.text_item {
width: 100%;
min-height: 60vh;
} }
} }
} }
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Author: AnthonyD * @Author: AnthonyD
* @Date: 2023-03-13 09:56:01 * @Date: 2023-03-13 09:56:01
* @Last Modified by: AnthonyD * @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 18:54:08 * @Last Modified time: 2023-03-23 19:17:34
*/ */
</script> </script>
<template> <template>
...@@ -281,7 +281,7 @@ export default { ...@@ -281,7 +281,7 @@ export default {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
color: #303133; color: #303133;
justify-content: space-between; // justify-content: space-between;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid #ebeef5; border-right: 1px solid #ebeef5;
...@@ -294,10 +294,10 @@ export default { ...@@ -294,10 +294,10 @@ export default {
} }
.right { .right {
width: calc(100% - 60px); // width: calc(100% - 60px);
text-align: center; text-align: center;
padding: 15px 0; padding: 15px 0;
border-right: 1px solid #ebeef5; // border-right: 1px solid #ebeef5;
} }
} }
} }
...@@ -372,4 +372,48 @@ export default { ...@@ -372,4 +372,48 @@ export default {
width: 1280px; width: 1280px;
margin: 0px auto; margin: 0px auto;
} }
@media screen and (min-width: 600px) {
.row_box {
justify-content: space-between;
}
.right {
border-right: 1px solid #ebeef5;
width: calc(100% - 60px);
}
}
@media screen and (max-width: 600px) {
.box-card {
width: 100%;
}
.table_container {
width: 100%;
margin: 0;
}
.row_box {
display: inline-block;
.left {
width: 30px !important;
font-size: 10px;
}
.right {
font-size: 10px;
margin-left: 5px;
}
}
.table_box {
width: 90vw;
// height: 60vh;
left: 0;
overflow: scroll;
}
.image_box {
width: 150px;
}
.right_box {
width: 60vw;
}
}
</style> </style>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Author: AnthonyD * @Author: AnthonyD
* @Date: 2023-02-22 11:31:31 * @Date: 2023-02-22 11:31:31
* @Last Modified by: AnthonyD * @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 11:48:25 * @Last Modified time: 2023-03-23 20:05:14
*/ */
</script> </script>
<template> <template>
...@@ -161,10 +161,11 @@ ...@@ -161,10 +161,11 @@
</div> </div>
</el-form-item> </el-form-item>
</el-form> --> </el-form> -->
<!-- 登录按钮 -->
<div class="login_enter_box_"> <div class="login_enter_box_">
<a @click="goLogin()">没有账号?点击注册</a> <a @click="goLogin()">没有账号?点击注册</a>
</div> </div>
<!-- 登录按钮 -->
<div style="margin-top: 9px"> <div style="margin-top: 9px">
<el-button <el-button
:loading="loading" :loading="loading"
...@@ -454,9 +455,9 @@ $light_gray: #eee; ...@@ -454,9 +455,9 @@ $light_gray: #eee;
top: 18%; top: 18%;
.login_enter_box_ { .login_enter_box_ {
text-align: right; text-align: right;
position: absolute; // position: absolute;
bottom: 22%; // bottom: 22%;
right: 10%; // right: 10%;
a { a {
font-size: 12px; font-size: 12px;
text-decoration: underline; text-decoration: underline;
...@@ -520,9 +521,9 @@ $light_gray: #eee; ...@@ -520,9 +521,9 @@ $light_gray: #eee;
} }
.login-form { .login-form {
width: 100%; width: 100%;
height: 430px; height: 465px;
position: absolute; position: absolute;
top: 11%; top: 8%;
right: 0%; right: 0%;
} }
} }
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Author: AnthonyD * @Author: AnthonyD
* @Date: 2023-02-23 15:52:52 * @Date: 2023-02-23 15:52:52
* @Last Modified by: AnthonyD * @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 20:19:17 * @Last Modified time: 2023-03-23 17:31:50
*/ */
</script><template> </script><template>
<div class="person_container"> <div class="person_container">
...@@ -128,10 +128,7 @@ ...@@ -128,10 +128,7 @@
>{{ item.score }}</span >{{ item.score }}</span
> >
</div> </div>
<div <div class="score_btn_box">
style="border-left: 1px solid #f4d6a9"
class="score_btn_box"
>
<el-button <el-button
v-if=" v-if="
(item.examination_questions.status == 4 && (item.examination_questions.status == 4 &&
...@@ -196,54 +193,56 @@ ...@@ -196,54 +193,56 @@
</div> </div>
<div class="tab_box_tight"> <div class="tab_box_tight">
<div class="score_box"> <div class="score_box">
<span>成绩:</span> <div>
<span <span>成绩:</span>
style="font-size: 48px; font-weight: bold" <span
v-if=" style="font-size: 48px; font-weight: bold"
(item.examination_questions.status == 4 &&
item.status == 2) ||
(item.examination_questions.status == 3 &&
item.status == 2)
"
>***</span
>
<span
v-else-if="
(item.examination_questions.status == 4 &&
item.status == 3) ||
(item.examination_questions.status == 5 &&
item.status == 3)
"
style="font-size: 48px; font-weight: bold"
>{{ item.score }}</span
>
<div style="border-left: 1px solid #f4d6a9">
<el-button
v-if=" v-if="
(item.examination_questions.status == 4 &&
item.status == 3) ||
(item.examination_questions.status == 5 &&
item.status == 3)
"
@click="route(item)"
type="warning"
class="finish_btn"
>查看
</el-button>
<el-button
v-else-if="
(item.examination_questions.status == 4 && (item.examination_questions.status == 4 &&
item.status == 2) || item.status == 2) ||
(item.examination_questions.status == 3 && (item.examination_questions.status == 3 &&
item.status == 2) item.status == 2)
" "
type="warning" >***</span
class="finish_btn" >
disabled <span
>未发布 v-else-if="
</el-button> (item.examination_questions.status == 4 &&
item.status == 3) ||
(item.examination_questions.status == 5 &&
item.status == 3)
"
style="font-size: 48px; font-weight: bold"
>{{ item.score }}</span
>
</div> </div>
</div> </div>
<div class="division_line_box">
<el-button
v-if="
(item.examination_questions.status == 4 &&
item.status == 3) ||
(item.examination_questions.status == 5 &&
item.status == 3)
"
@click="route(item)"
type="warning"
class="finish_btn"
>查看
</el-button>
<el-button
v-else-if="
(item.examination_questions.status == 4 &&
item.status == 2) ||
(item.examination_questions.status == 3 &&
item.status == 2)
"
type="warning"
class="finish_btn"
disabled
>未发布
</el-button>
</div>
</div> </div>
<span>考试时间:{{ item.answer_time }}</span> <span>考试时间:{{ item.answer_time }}</span>
</div> </div>
...@@ -447,6 +446,7 @@ export default { ...@@ -447,6 +446,7 @@ export default {
.score_btn_box { .score_btn_box {
width: 120px; width: 120px;
border-left: 1px solid #f4d6a9;
} }
.el-input__icon { .el-input__icon {
cursor: pointer; cursor: pointer;
...@@ -457,7 +457,7 @@ export default { ...@@ -457,7 +457,7 @@ export default {
} }
.finish_btn { .finish_btn {
float: right; float: right;
margin: 10px; margin: 10px 0;
// margin-left: 30px; // margin-left: 30px;
// background-color: #eebe77; // background-color: #eebe77;
} }
...@@ -501,6 +501,9 @@ export default { ...@@ -501,6 +501,9 @@ export default {
} }
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
.division_line_box {
border-left: 1px solid #f4d6a9;
}
.mobile_box { .mobile_box {
display: none; display: none;
} }
...@@ -531,28 +534,25 @@ export default { ...@@ -531,28 +534,25 @@ export default {
} }
.tab_box { .tab_box {
display: block; display: block;
.score_box { .tab_box_tight {
position: relative; display: flex;
margin: 0 0 5px 0; justify-content: space-between;
border-left: 1px solid #faecd8; .score_box {
.score_box_left { margin: 0 0 5px 0;
margin-left: 0; border-left: 1px solid #faecd8;
margin-bottom: 0; .finish_btn {
} display: block;
.finish_btn { border-left: none;
margin: 0; }
position: absolute;
right: 45px;
top: 10px;
} }
} }
} }
.tab_box_tight {
display: block;
}
} }
.title_card_box { .title_card_box {
margin-bottom: 10px; margin-bottom: 10px;
} }
.tab_box_tight {
width: 100%;
}
} }
</style> </style>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Author: AnthonyD * @Author: AnthonyD
* @Date: 2023-02-28 10:03:17 * @Date: 2023-02-28 10:03:17
* @Last Modified by: AnthonyD * @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 17:39:58 * @Last Modified time: 2023-03-22 11:26:29
*/ */
</script><template> </script><template>
<div class="content_container"> <div class="content_container">
...@@ -133,6 +133,8 @@ export default { ...@@ -133,6 +133,8 @@ export default {
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.picture_container { .picture_container {
width: 50%; width: 50%;
position: relative;
left: -128px;
} }
.result_container { .result_container {
width: 100%; width: 100%;
......
<script>
/**
* @Author: AnthonyD
* @Date: 2023-03-21 18:22:06
* @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 18:26:57
*/
</script><template>
<div class="answer_box">
<el-popover placement="right" width="400" trigger="click">
<el-table> </el-table>
</el-popover>
</div>
</template>
<script>
export default {
name: '',
data() {
return {};
},
};
</script>
<style lang="" scoped>
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑!
请 注册 或者 后发表评论