提交 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>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Author: AnthonyD * @Author: AnthonyD
* @Date: 2023-03-01 16:25:21 * @Date: 2023-03-01 16:25:21
* @Last Modified by: AnthonyD * @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 20:05:50 * @Last Modified time: 2023-03-23 19:52:23
*/ */
</script> </script>
...@@ -14,30 +14,19 @@ ...@@ -14,30 +14,19 @@
:testdata="test_card_info" :testdata="test_card_info"
@sub="sub" @sub="sub"
></test-info> ></test-info>
<el-card class="box-card"> <el-card class="box-card browser_box">
<el-row v-if="false"> <el-row class="box_card_header">
<el-col :span="15">
<div v-for="e in 5" :key="e">
<div>
<el-col :span="1">序号</el-col>
<el-col :span="2">结果</el-col>
</div>
</div>
<div v-for="e in 14" :key="e">
<el-col :span="1">100</el-col>
<el-col :span="2"><el-input type="text"></el-input></el-col>
</div>
</el-col>
<el-col :span="9"></el-col>
</el-row>
<el-row class="box_card_header" v-if="true">
<el-col :span="14"> <el-col :span="14">
<div class="grid-content"> <div class="grid-content">
<div> <div>
<h3 class="photo_header_title" style="display: inline-block"> <h3 class="photo_header_title" style="display: inline-block">
考试结果 考试结果
</h3> </h3>
<el-button type="primary" @click="sub(false)" style="float: right" <el-button
type="primary"
@click="sub(false)"
style="float: right"
class="preserve_box"
>保存</el-button >保存</el-button
> >
</div> </div>
...@@ -60,9 +49,19 @@ ...@@ -60,9 +49,19 @@
: '' : ''
}} }}
</div> </div>
<!-- -->
<div class="right_data"> <div class="right_data">
<el-button type="text" style="color: #303133; width: 70px" @click="s_item=(e + (i - 1) * 5 - 1);dialogVisible=true" > <el-button
{{test_result_sub_data[e + (i - 1) * 5 - 1].value}} type="text"
style="color: #303133; width: 80px"
@click="
s_item = e + (i - 1) * 5 - 1;
dialogVisible = true;
"
>
{{
test_result_sub_data[e + (i - 1) * 5 - 1].value
}}
</el-button> </el-button>
<!-- <el-input <!-- <el-input
v-if="test_result_sub_data[e + (i - 1) * 5 - 1]" v-if="test_result_sub_data[e + (i - 1) * 5 - 1]"
...@@ -86,14 +85,14 @@ ...@@ -86,14 +85,14 @@
> >
<div style="overflow-y: scroll;max-height: 400px;"> <div style="overflow-y: scroll;max-height: 400px;">
<el-row > <el-row >
<el-col :span="8" v-for="(tobacco_grades_data_f, tobacco_grades_data_index) in tobacco_grades_data" <el-col :span="8" v-for="(tobacco_grades_data_f, tobacco_grades_data_index) in tobacco_grades_data"
:key="'t'+(e + (i - 1) * 5 - 1)+tobacco_grades_data_index" style="height:119px;border-bottom: 1px solid #e6ebf5; padding:8px 0px"> :key="'t'+(e + (i - 1) * 5 - 1)+tobacco_grades_data_index" style="height:119px;border-bottom: 1px solid #e6ebf5; padding:8px 0px">
<div style="padding:2px 0px"><el-tag>组别:{{tobacco_grades_data_f.name}}</el-tag></div> <div style="padding:2px 0px"><el-tag>组别:{{tobacco_grades_data_f.name}}</el-tag></div>
<el-radio-group size="mini" @change="test_result_sub_data[e + (i - 1) * 5 - 1].visible=false" v-model="test_result_sub_data[e + (i - 1) * 5 - 1].value"> <el-radio-group size="mini" @change="test_result_sub_data[e + (i - 1) * 5 - 1].visible=false" v-model="test_result_sub_data[e + (i - 1) * 5 - 1].value">
<el-radio-button <el-radio-button
v-for="(grade_code_i, grade_code_index) in tobacco_grades_data_f.value" v-for="(grade_code_i, grade_code_index) in tobacco_grades_data_f.value"
:key="'s'+tobacco_grades_data_index+(e + (i - 1) * 5 - 1)+grade_code_index" :key="'s'+tobacco_grades_data_index+(e + (i - 1) * 5 - 1)+grade_code_index"
:label="grade_code_i.grade_code">{{grade_code_i.grade_code}}</el-radio-button> :label="grade_code_i.grade_code">{{grade_code_i.grade_code}}</el-radio-button>
</el-radio-group> </el-radio-group>
</el-col> </el-col>
...@@ -146,7 +145,7 @@ ...@@ -146,7 +145,7 @@
</el-col> </el-col>
<el-col :span="10" v-show="true"> <el-col :span="10" v-show="true">
<div class="upload_right"> <div class="upload_right">
<el-row> <el-row style="display: flex; justify-content: space-between">
<el-col :span="12"> <el-col :span="12">
<h3 class="photo_header_title">上传纸质考试照片</h3> <h3 class="photo_header_title">上传纸质考试照片</h3>
</el-col> </el-col>
...@@ -155,7 +154,7 @@ ...@@ -155,7 +154,7 @@
name="image" name="image"
:accept="'image/*'" :accept="'image/*'"
v-if="test_results && test_results.test_results_image" v-if="test_results && test_results.test_results_image"
style="display: inline-block; margin-right: 15px" style="display: inline-block"
:action=" :action="
IP + '/student/test_results/imageUpload/' + result_id IP + '/student/test_results/imageUpload/' + result_id
" "
...@@ -164,7 +163,7 @@ ...@@ -164,7 +163,7 @@
:headers="headers" :headers="headers"
:show-file-list="false" :show-file-list="false"
> >
<el-button type="primary" style="margin-left: 159px" <el-button type="primary" class="reupload_box"
>重新上传</el-button >重新上传</el-button
> >
</el-upload> </el-upload>
...@@ -210,32 +209,238 @@ ...@@ -210,32 +209,238 @@
> >
</div> </div>
</el-card> </el-card>
<el-button type="primary" style="width: 100%" @click="dialogVisible=true"
>sssss</el-button <!-- 移动端 -->
<el-card class="box-card mobile_box" v-if="true">
<el-row class="box_card_header">
<el-col :span="24">
<div class="grid-content">
<div>
<h3 class="photo_header_title" style="display: inline-block">
考试结果
</h3>
<el-button
type="primary"
@click="sub(false)"
style="float: right"
class="preserve_box"
>保存</el-button
>
</div>
<div class="list_container">
<el-row>
<template>
<div class="row_box" v-for="e in 5" :key="e">
<div class="row_line row_header">
<div class="left">序号</div>
<div class="right">结果</div>
</div>
<div
:class="row <= 10 ? 'tablex_style_big' : 'tablex_style'"
>
<div class="row_line" v-for="i in row" :key="i">
<div class="left_data">
{{
test_result_sub_data[e + (i - 1) * 5 - 1]
? e + (i - 1) * 5
: ''
}}
</div>
<!-- -->
<div class="right_data">
<el-button
type="text"
class="result_box"
style="color: #303133"
@click="
s_item = e + (i - 1) * 5 - 1;
dialogVisibleMobile = true;
"
>
{{
test_result_sub_data[e + (i - 1) * 5 - 1].value
}}
</el-button>
</div>
</div>
</div>
</div>
</template>
</el-row>
</div>
</div>
</el-col>
</el-row>
<el-row class="box_card_header">
<el-col :span="24">
<div class="upload_right">
<el-row style="display: flex; justify-content: space-between">
<el-col :span="12">
<h3 class="photo_header_title">上传纸质考试照片</h3>
</el-col>
<el-col :span="12" style="text-align: right">
<el-upload
name="image"
:accept="'image/*'"
v-if="test_results && test_results.test_results_image"
style="display: inline-block"
:action="
IP + '/student/test_results/imageUpload/' + result_id
"
:on-change="uploadSubmit"
:on-success="handleAvatarSuccess"
:headers="headers"
:show-file-list="false"
>
<el-button type="primary" class="reupload_box"
>重新上传</el-button
>
</el-upload>
</el-col>
</el-row>
<div class="grid-content_upload" v-loading="is_loading">
<div class="upload_btn">
<div
class="img_box"
v-if="test_results && test_results.test_results_image"
>
<img :src="IP + test_results.test_results_image" alt="" />
</div>
<el-upload
v-else
name="image"
class="upload-demo"
:action="
IP + '/student/test_results/imageUpload/' + result_id
"
:on-change="uploadSubmit"
:on-success="handleAvatarSuccess"
:headers="headers"
drag
:accept="'image/*'"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png文件,且不超过20MB
</div>
</el-upload>
</div>
</div>
</div>
</el-col>
</el-row>
<div class="btn_upload_result">
<el-button type="primary" style="width: 100%" @click="sub()"
>提交</el-button
> >
</div>
</el-card>
<!-- <el-button type="primary" style="width: 100%" @click="dialogVisible = true"
>sssss</el-button
> -->
<el-dialog <el-dialog
title="请选择等级" title="请选择等级"
v-if="test_result_sub_data[s_item]" v-if="test_result_sub_data[s_item]"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="400px" class="answer_box"
> >
<div style="overflow-y: scroll;max-height: 500px;"> <div style="overflow-y: scroll; max-height: 500px">
<el-row > <el-row>
<el-col :span="8" v-for="(tobacco_grades_data_f, tobacco_grades_data_index) in tobacco_grades_data" <el-col
:key="'t'+(s_item)+tobacco_grades_data_index" style="height:119px;border-bottom: 1px solid #e6ebf5; padding:8px 0px"> :span="4"
<div style="padding:2px 0px"><el-tag>组别:{{tobacco_grades_data_f.name}}</el-tag></div> v-for="(
<el-radio-group size="mini" @change="dialogVisible=false" v-model="test_result_sub_data[s_item].value"> tobacco_grades_data_f, tobacco_grades_data_index
<el-radio-button ) in tobacco_grades_data"
v-for="(grade_code_i, grade_code_index) in tobacco_grades_data_f.value" :key="'t' + s_item + tobacco_grades_data_index"
:key="'s'+tobacco_grades_data_index+(s_item)+grade_code_index" style="
:label="grade_code_i.grade_code">{{grade_code_i.grade_code}}</el-radio-button> height: 119px;
</el-radio-group> border-bottom: 1px solid #e6ebf5;
</el-col> padding: 8px 0px;
</el-row> "
>
<div style="padding: 2px 0px">
<el-tag>组别:{{ tobacco_grades_data_f.name }}</el-tag>
</div>
<el-radio-group
size="mini"
@change="dialogVisible = false"
v-model="test_result_sub_data[s_item].value"
>
<el-radio-button
style="boder-redous: "
v-for="(
grade_code_i, grade_code_index
) in tobacco_grades_data_f.value"
:key="
's' + tobacco_grades_data_index + s_item + grade_code_index
"
:label="grade_code_i.grade_code"
>{{ grade_code_i.grade_code }}</el-radio-button
>
</el-radio-group>
</el-col>
</el-row>
</div> </div>
<!-- <span slot="footer" class="dialog-footer"> <!-- <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> <el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span> -->
</el-dialog>
<!-- 移动 -->
<el-dialog
title="请选择等级"
v-if="test_result_sub_data[s_item]"
:visible.sync="dialogVisibleMobile"
class="answer_box"
>
<div style="overflow-y: scroll; max-height: 500px">
<el-row>
<el-col
:span="8"
v-for="(
tobacco_grades_data_f, tobacco_grades_data_index
) in tobacco_grades_data"
:key="'t' + s_item + tobacco_grades_data_index"
style="
height: 119px;
border-bottom: 1px solid #e6ebf5;
padding: 8px 0px;
"
>
<div style="padding: 2px 0px">
<el-tag>组别:{{ tobacco_grades_data_f.name }}</el-tag>
</div>
<el-radio-group
size="mini"
@change="dialogVisibleMobile = false"
v-model="test_result_sub_data[s_item].value"
>
<el-radio-button
v-for="(
grade_code_i, grade_code_index
) in tobacco_grades_data_f.value"
:key="
's' + tobacco_grades_data_index + s_item + grade_code_index
"
:label="grade_code_i.grade_code"
>{{ grade_code_i.grade_code }}</el-radio-button
>
</el-radio-group>
</el-col>
</el-row>
</div>
<!-- <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisibleMobile = false">取 消</el-button>
<el-button type="primary" @click="dialogVisibleMobile = false"
>确 定</el-button
>
</span> --> </span> -->
</el-dialog> </el-dialog>
</div> </div>
...@@ -245,14 +450,14 @@ ...@@ -245,14 +450,14 @@
import TestInfo from '@/components/TestInfo/index'; import TestInfo from '@/components/TestInfo/index';
import { getResultsData, uploadTestResults, getTobaccoList } from '@/api/user'; import { getResultsData, uploadTestResults, getTobaccoList } from '@/api/user';
import { getToken } from '@/utils/auth'; import { getToken } from '@/utils/auth';
import AnswerView from './components/answer-view.vue';
export default { export default {
name: '', name: '',
components: { TestInfo, AnswerView }, components: { TestInfo },
data() { data() {
return { return {
s_item:0, s_item: 0,
dialogVisible:false, dialogVisible: false,
dialogVisibleMobile: false,
headers: { Authorization: ' Bearer ' + getToken() }, headers: { Authorization: ' Bearer ' + getToken() },
IP: process.env.VUE_APP_BASE_API, IP: process.env.VUE_APP_BASE_API,
row: 1, row: 1,
...@@ -321,8 +526,8 @@ export default { ...@@ -321,8 +526,8 @@ export default {
begin_answer_time: res.begin_answer_time, begin_answer_time: res.begin_answer_time,
duration: res.examination_questions.duration * 60, duration: res.examination_questions.duration * 60,
const_down: const_down:
res.examination_questions.duration * 60 res.examination_questions.duration * 60 -
-(res.begin_answer_duration ? res.begin_answer_duration : 0), (res.begin_answer_duration ? res.begin_answer_duration : 0),
status: res.status, status: res.status,
title: res.examination_questions_title, title: res.examination_questions_title,
}; };
...@@ -390,6 +595,7 @@ export default { ...@@ -390,6 +595,7 @@ export default {
getTobaccoInfo() { getTobaccoInfo() {
getTobaccoList().then((res) => { getTobaccoList().then((res) => {
this.tobacco_grades_data = res; this.tobacco_grades_data = res;
console.log(this.tobacco_grades_data);
}); });
}, },
}, },
...@@ -397,6 +603,20 @@ export default { ...@@ -397,6 +603,20 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-radio-button__inner {
border-left: 1px solid #dcdfe6;
width: 45px;
padding: 7px 5px;
}
::v-deep .el-dialog__body {
padding: 30px 10px;
}
::v-deep .el-upload-dragger {
width: 200px;
}
.box-card { .box-card {
width: 1280px; width: 1280px;
margin: 0 auto; margin: 0 auto;
...@@ -418,10 +638,10 @@ export default { ...@@ -418,10 +638,10 @@ export default {
padding: 8px 15px; padding: 8px 15px;
} }
.row_line .left_data { .row_line .left_data {
width: 60px; // width: 60px;
border-top: 1px solid #dcdfe6; // border-top: 1px solid #dcdfe6;
border-left: 2px solid #dcdfe6; // border-left: 2px solid #dcdfe6;
border-right: 1px solid #dcdfe6; // border-right: 1px solid #dcdfe6;
background-color: #f2f3f5; background-color: #f2f3f5;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
...@@ -430,10 +650,10 @@ export default { ...@@ -430,10 +650,10 @@ export default {
.row_line .right_data { .row_line .right_data {
position: relative; position: relative;
width: calc(100% - 60px); // width: calc(100% - 60px);
display: inline-block; display: inline-block;
text-align: center; text-align: center;
border-top: 1px solid #dcdfe6; // border-top: 1px solid #dcdfe6;
margin: 0; margin: 0;
vertical-align: top; vertical-align: top;
background: #fff; background: #fff;
...@@ -447,12 +667,12 @@ export default { ...@@ -447,12 +667,12 @@ export default {
} }
} }
} }
.photo_header { // .photo_header {
width: 100%; // width: 100%;
.grid-content { // .grid-content {
width: calc(100%-59px); // width: calc(100%-59px);
} // }
} // }
} }
.list_container .row_box:nth-child(1) .row_line .left_data { .list_container .row_box:nth-child(1) .row_line .left_data {
border-left: none; border-left: none;
...@@ -471,7 +691,7 @@ export default { ...@@ -471,7 +691,7 @@ export default {
margin: 9px 0; margin: 9px 0;
} }
.row_box .row_line:nth-child(odd) { .row_box .row_line:nth-child(odd) {
background-color: #fafafa; background-color: #fff;
} }
.row_header { .row_header {
background-color: #e6e8eb !important; background-color: #e6e8eb !important;
...@@ -481,14 +701,15 @@ export default { ...@@ -481,14 +701,15 @@ export default {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 35%; top: 35%;
right: 14%; // right: 26%;
} }
.box_card_header { .box_card_header {
display: flex; display: flex;
// justify-content: space-between; // justify-content: space-between;
} }
.grid-content { .grid-content {
width: calc(100% - 20px); // width: calc(100% - 20px);
margin-right: 20px;
} }
.grid-content_upload { .grid-content_upload {
text-align: center; text-align: center;
...@@ -554,4 +775,110 @@ export default { ...@@ -554,4 +775,110 @@ export default {
line-height: 37px; line-height: 37px;
} }
} }
@media screen and (min-width: 600px) {
.row_line .left_data {
width: 60px;
}
.row_line .right_data {
margin: 0;
width: calc(100% - 60px);
}
.upload-demo {
position: absolute;
right: 26%;
}
.mobile_box {
display: none;
}
.result_box {
width: 80px;
}
.reupload_box {
margin-left: 158px;
}
.row_line .left_data {
border-top: 1px solid #dcdfe6;
border-left: 2px solid #dcdfe6;
border-right: 1px solid #dcdfe6;
}
.row_line .right_data {
border-top: 1px solid #dcdfe6;
}
}
@media screen and (max-width: 600px) {
.list_container {
border: none;
}
.browser_box {
display: none;
}
.box-card {
width: 100%;
}
.row_header {
display: flex;
justify-content: space-around;
font-size: 10px;
padding: 10px 0;
.left,
.right {
width: auto !important;
padding: 0 !important;
}
}
.left_data,
.right_data {
margin: 0;
display: inline-block;
}
.left_data {
width: 30px;
}
.result_box {
width: 30px;
}
.grid-content {
margin-right: 0;
}
.preserve_box {
display: none;
}
.reupload_box {
margin-left: 76px;
margin-top: 10px;
}
.photo_header_title {
margin-top: 15px;
}
.row_line {
white-space: nowrap;
overflow: hidden;
border: 1px solid #dcdfe6;
margin-bottom: -1px;
margin-right: -1px;
}
.grid-content_upload {
height: 524px;
.img_box img {
height: 520px;
}
}
.list_container .row_box:nth-child(1) .row_line {
border-left: 1px solid #dcdfe6;
}
.list_container .row_box:nth-child(5) .row_line {
border-right: 2px solid #dcdfe6;
}
.upload-demo {
position: absolute;
left: 23%;
}
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑!
请 注册 或者 后发表评论