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

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

上级 90103255
......@@ -3,7 +3,7 @@
* @Author: AnthonyD
* @Date: 2023-03-01 15:29:44
* @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 20:19:14
* @Last Modified time: 2023-03-23 19:58:38
*/
</script><template>
<div class="header_container">
......@@ -20,22 +20,22 @@
@click="goBack()"
>返回</el-button
>
<h3 style="display: inline-block; margin: 0 25px">
<h3 class="title_card_box">
{{ examination_questions_info.title }}
</h3>
<div class="top_card_box">
<el-tag
v-for="(e, i) in test_states"
class="status_test_box"
:key="i"
:type="e.type"
v-show="e.id == examination_questions_info.status"
>{{ e.label }}</el-tag
>
<el-tag
v-if="time"
type="warning"
style="margin-left: 30px; backgound-color: #fcf6ec"
>{{ time }}</el-tag
>
<el-tag v-if="time" class="time_over_box" type="warning">{{
time
}}</el-tag>
</div>
</div>
<div v-if="false">
<div class="info_unit">
......@@ -194,10 +194,42 @@ export default {
}
}
.time_over_box {
margin-left: 30px;
}
.title_card_box {
display: inline-block;
margin: 0 25px;
}
.test_info {
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>
......@@ -3,10 +3,49 @@
* @Author: AnthonyD
* @Date: 2023-02-23 16:03:00
* @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 17:03:56
* @Last Modified time: 2023-03-23 19:11:19
*/
</script><template>
<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">
<img src="/image/logo.svg" alt="" />
</div>
......@@ -59,9 +98,17 @@ export default {
}
}
@media screen and (min-width: 600px) {
.btn_box_mobile {
display: none;
}
}
// 移动端样式
@media screen and (max-width: 600px) {
.header_container {
position: relative;
text-align: left;
.logo {
display: none;
}
......@@ -71,6 +118,10 @@ export default {
.header_box {
margin: auto;
}
.btn_box_mobile {
position: absolute;
right: 20px;
}
}
}
</style>
......@@ -2,7 +2,7 @@
* @Author: AnthonyD
* @Date: 2023-02-22 11:31:31
* @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
......
......@@ -2,7 +2,7 @@
* @Author: AnthonyD
* @Date: 2023-02-22 11:31:31
* @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 './mixin.scss';
......@@ -219,13 +219,19 @@ aside {
/* 输入框样式调整 */
.right_data {
.el-input__inner {
// .el-input__inner {
// border: none;
// }
.el-button--medium {
border: none;
// height: 60px;
height: 35px;
}
}
/* 移动端样式 */
@media screen and (max-width: 600px) {
......@@ -234,4 +240,28 @@ aside {
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 @@
* @Author: AnthonyD
* @Date: 2023-02-27 12:03:06
* @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 17:20:32
* @Last Modified time: 2023-03-23 19:32:08
*/
</script><template>
<el-card class="box-card">
......@@ -95,7 +95,11 @@ export default {
width: 100%;
margin: 24px 0 0 0;
.affirm_btn_box {
margin: 110% auto 0;
margin: 50px auto 0;
}
.text_item {
width: 100%;
min-height: 60vh;
}
}
}
......
......@@ -3,7 +3,7 @@
* @Author: AnthonyD
* @Date: 2023-03-13 09:56:01
* @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 18:54:08
* @Last Modified time: 2023-03-23 19:17:34
*/
</script>
<template>
......@@ -281,7 +281,7 @@ export default {
display: flex;
font-size: 14px;
color: #303133;
justify-content: space-between;
// justify-content: space-between;
align-items: center;
box-sizing: border-box;
border-right: 1px solid #ebeef5;
......@@ -294,10 +294,10 @@ export default {
}
.right {
width: calc(100% - 60px);
// width: calc(100% - 60px);
text-align: center;
padding: 15px 0;
border-right: 1px solid #ebeef5;
// border-right: 1px solid #ebeef5;
}
}
}
......@@ -372,4 +372,48 @@ export default {
width: 1280px;
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>
......@@ -3,7 +3,7 @@
* @Author: AnthonyD
* @Date: 2023-02-22 11:31:31
* @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 11:48:25
* @Last Modified time: 2023-03-23 20:05:14
*/
</script>
<template>
......@@ -161,10 +161,11 @@
</div>
</el-form-item>
</el-form> -->
<!-- 登录按钮 -->
<div class="login_enter_box_">
<a @click="goLogin()">没有账号?点击注册</a>
</div>
<!-- 登录按钮 -->
<div style="margin-top: 9px">
<el-button
:loading="loading"
......@@ -454,9 +455,9 @@ $light_gray: #eee;
top: 18%;
.login_enter_box_ {
text-align: right;
position: absolute;
bottom: 22%;
right: 10%;
// position: absolute;
// bottom: 22%;
// right: 10%;
a {
font-size: 12px;
text-decoration: underline;
......@@ -520,9 +521,9 @@ $light_gray: #eee;
}
.login-form {
width: 100%;
height: 430px;
height: 465px;
position: absolute;
top: 11%;
top: 8%;
right: 0%;
}
}
......
......@@ -3,7 +3,7 @@
* @Author: AnthonyD
* @Date: 2023-02-23 15:52:52
* @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 20:19:17
* @Last Modified time: 2023-03-23 17:31:50
*/
</script><template>
<div class="person_container">
......@@ -128,10 +128,7 @@
>{{ item.score }}</span
>
</div>
<div
style="border-left: 1px solid #f4d6a9"
class="score_btn_box"
>
<div class="score_btn_box">
<el-button
v-if="
(item.examination_questions.status == 4 &&
......@@ -196,6 +193,7 @@
</div>
<div class="tab_box_tight">
<div class="score_box">
<div>
<span>成绩:</span>
<span
style="font-size: 48px; font-weight: bold"
......@@ -217,7 +215,9 @@
style="font-size: 48px; font-weight: bold"
>{{ item.score }}</span
>
<div style="border-left: 1px solid #f4d6a9">
</div>
</div>
<div class="division_line_box">
<el-button
v-if="
(item.examination_questions.status == 4 &&
......@@ -244,7 +244,6 @@
</el-button>
</div>
</div>
</div>
<span>考试时间:{{ item.answer_time }}</span>
</div>
</div>
......@@ -447,6 +446,7 @@ export default {
.score_btn_box {
width: 120px;
border-left: 1px solid #f4d6a9;
}
.el-input__icon {
cursor: pointer;
......@@ -457,7 +457,7 @@ export default {
}
.finish_btn {
float: right;
margin: 10px;
margin: 10px 0;
// margin-left: 30px;
// background-color: #eebe77;
}
......@@ -501,6 +501,9 @@ export default {
}
@media screen and (min-width: 600px) {
.division_line_box {
border-left: 1px solid #f4d6a9;
}
.mobile_box {
display: none;
}
......@@ -531,28 +534,25 @@ export default {
}
.tab_box {
display: block;
.tab_box_tight {
display: flex;
justify-content: space-between;
.score_box {
position: relative;
margin: 0 0 5px 0;
border-left: 1px solid #faecd8;
.score_box_left {
margin-left: 0;
margin-bottom: 0;
}
.finish_btn {
margin: 0;
position: absolute;
right: 45px;
top: 10px;
display: block;
border-left: none;
}
}
}
.tab_box_tight {
display: block;
}
}
.title_card_box {
margin-bottom: 10px;
}
.tab_box_tight {
width: 100%;
}
}
</style>
......@@ -3,7 +3,7 @@
* @Author: AnthonyD
* @Date: 2023-02-28 10:03:17
* @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-21 17:39:58
* @Last Modified time: 2023-03-22 11:26:29
*/
</script><template>
<div class="content_container">
......@@ -133,6 +133,8 @@ export default {
@media screen and (max-width: 600px) {
.picture_container {
width: 50%;
position: relative;
left: -128px;
}
.result_container {
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑!
请 注册 或者 后发表评论