Skip to content

C
center-exam-show
提交 8e095d70 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: 手机端适配

上级 da21b47d
显示空白字符变更
内嵌 并排
正在显示 包含 742 行增加 和 45 行删除
docs/superpowers/specs/2026-07-22-mobile-adaptation-design.md 0 → 100644
浏览文件 @ 8e095d70
# 移动端适配设计
## 概述
将考试展示系统适配到手机端，支持横屏/竖屏，纯 CSS 媒体查询方案，保留 Element UI。
## 全局适配
### Viewport 修正
- `index.html`: `initial-scale=-1` → `width=device-width, initial-scale=1.0`
### 断点策略
- `≤767px` 竖屏手机：单栏布局，固定宽度→百分比
- `768px–991px` 横屏手机/平板：双栏收紧
- `≥992px` 桌面：保持现有
### Element UI 移动端覆盖
- radio/checkbox inner 最小 20px（触摸友好）
- button 最小高度 40px
- message-box 宽度 80vw
- select dropdown 增大行高
## 页面适配
### Login
- 固定 900px → 100%，内容 padding
- 表单横向排列 → 竖屏时纵向堆叠
- 背景图适配
- 删除旧的 `tipsMobileAngle` 横屏提示逻辑
### Confirm
- 表单 400px → max-width 400px + 100%
- 协议区 900px → 100% + padding
- 按钮区域去掉绝对定位
### Countdown
- 大方块 182px → 等比缩放
- 字号响应式
### Exam（核心）
- 竖屏：题号面板改为底部弹出浮层（toggle 按钮控制）
- 横屏：右侧面板宽度从 220px 缩小
- footer 按钮自适应排列
- 题目内容图片 max-width: 100%
### Finish
- 大字号响应式缩放
- 图片宽度适配
## 组件适配
### QuestionList / QuestionListItem
- 复合题左右分栏 → 竖屏时堆叠
- 选项字体响应式
### QuestionNum
- 固定定位图例改为跟随文档流（竖屏时在弹出层内）
index.html
浏览文件 @ 8e095d70
......@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#3276fc" />
<meta name="viewport" id="viewport" content="initial-scale=-1,maximum-scale=1,shrink-to-fit=no,user-scalable=no" />
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
</head>
<body>
......
src/components/QuestionList.vue
浏览文件 @ 8e095d70
......@@ -75,4 +75,33 @@ export default {
.question-list-list-right {
flex: 1;
}
/* ========== 移动端适配 ========== */
// 竖屏手机：复合题左右堆叠
@media (max-width: 767px) {
.question-list-top {
height: auto;
flex-wrap: wrap;
margin-bottom: 10px;
padding-bottom: 8px;
h2 {
font-size: 16px;
flex: auto;
width: 100%;
}
p {
font-size: 14px;
margin-top: 4px;
}
}
.question-list-list {
flex-direction: column;
column-gap: 0;
}
.question-list-list-left {
font-size: 14px;
margin-bottom: 12px;
}
}
</style>
src/components/QuestionListItem.vue
浏览文件 @ 8e095d70
......@@ -130,4 +130,58 @@ export default {
left: 5px;
}
}
/* ========== 移动端适配 ========== */
// 竖屏手机
@media (max-width: 767px) {
.question-item {
margin-bottom: 24px;
.el-textarea__inner {
font-size: 16px !important;
}
}
.question-item-hd {
margin-bottom: 14px;
.question-index {
font-size: 22px;
}
.question-title {
margin-top: 3px;
margin-left: 4px;
font-size: 16px;
line-height: 22px;
}
}
.question-item-option {
margin-bottom: 16px;
.el-radio,
.el-checkbox {
font-size: 16px;
}
.el-radio__label,
.el-checkbox__label {
font-size: 16px;
}
}
}
// 横屏手机 + 平板
@media (min-width: 768px) and (max-width: 991px) {
.question-item-hd {
.question-index {
font-size: 26px;
}
.question-title {
font-size: 16px;
line-height: 22px;
}
}
.question-item-option {
.el-radio__label,
.el-checkbox__label {
font-size: 16px;
}
}
}
</style>
src/components/QuestionNum.vue
浏览文件 @ 8e095d70
......@@ -267,4 +267,46 @@ export default {
}
}
}
/* ========== 移动端适配 ========== */
// 竖屏手机
@media (max-width: 767px) {
.info {
height: auto;
padding: 12px 0;
.shape {
width: 44px;
height: 44px;
}
.right {
margin-left: 12px;
.name {
font-size: 16px;
}
.code {
font-size: 12px;
width: auto;
}
}
}
.order-num {
padding-bottom: 20px;
ul {
gap: 8px 12px;
li {
margin-right: 0;
margin-bottom: 0;
&:nth-child(5n + 5) {
margin-right: 0;
}
}
}
}
.flag-tips {
width: 100%;
position: static;
padding: 16px 0 8px;
}
}
</style>
src/main.js
浏览文件 @ 8e095d70
......@@ -11,6 +11,9 @@ import Element from 'element-ui'
import './assets/theme/style.scss'
// import 'element-ui/lib/theme-chalk/index.css'
// 全局响应式样式
import './style.scss'
import VueMeta from 'vue-meta'
Vue.use(Element)
......
src/style.scss
浏览文件 @ 8e095d70
......@@ -13,16 +13,24 @@ body {
'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif;
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
}
/* ========== 移动端全局适配 ========== */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
/* 竖屏手机 (portrait phones) */
@media (max-width: 767px) {
.el-message-box {
width: 85vw !important;
}
.el-message {
min-width: auto;
max-width: 90vw;
}
}
/* Medium devices (tablets, 768px and up) */
/* 横屏手机 + 平板 (landscape phones & tablets) */
@media (min-width: 768px) and (max-width: 991px) {
.el-message-box {
width: 70vw !important;
}
}
/* Large devices (desktops, 992px and up) */
......@@ -32,23 +40,3 @@ body {
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* 改变主题色变量 */
$--color-primary: #b80037;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
/* 引入element-ui对应scss文件，重新编译 */
@import '~element-ui/packages/theme-chalk/src/index';
/* 引入隐藏显示样式 */
@import '~element-ui/lib/theme-chalk/display.css';
/* 引入三方 自定义图标库，方法 vue -> 第三方 自建图标库 中有 */
@import '~@/assets/font-icons/iconfont.css';
[class^='el-icon-self-'],
[class*='el-icon-self-'] {
font-family: 'selfAllIcon' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
src/views/Confirm.vue
浏览文件 @ 8e095d70
......@@ -400,4 +400,109 @@ export default {
.none {
display: none;
}
/* ========== 移动端适配 ========== */
// 竖屏手机
@media (max-width: 767px) {
.box {
background-attachment: scroll;
padding-bottom: 40px;
}
.con-info {
.head {
height: 56px;
font-size: 18px;
line-height: 56px;
padding-left: 16px;
}
.info-form {
width: calc(100% - 32px);
max-width: 400px;
margin: 20px auto 0;
padding-bottom: 24px;
.tit {
margin-top: 20px;
font-size: 16px;
}
ul {
width: calc(100% - 32px);
max-width: 320px;
li input {
width: 100%;
box-sizing: border-box;
height: 44px;
font-size: 16px;
}
.select-btn div {
width: 48%;
height: 44px;
line-height: 44px;
font-size: 16px;
}
}
.confirm-btn {
width: calc(100% - 32px);
max-width: 320px;
height: 44px;
line-height: 44px;
font-size: 16px;
}
}
}
.explain-box {
display: flex;
flex-direction: column;
min-height: 100vh;
.head {
height: 56px;
font-size: 18px;
line-height: 56px;
padding-left: 16px;
}
.exp-text {
width: calc(100% - 32px);
margin: 16px auto 0;
padding: 24px 16px 24px;
flex: 1;
.t {
font-size: 16px;
line-height: 24px;
}
}
.exp-btn {
position: sticky;
bottom: 0;
left: auto;
transform: none;
width: 100%;
background: #fff;
padding: 16px 0 24px;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
.tips {
text-align: center;
padding: 0 16px;
font-size: 12px;
}
.btn-box {
width: auto;
padding: 0 16px;
div {
flex: 1;
height: 44px;
line-height: 44px;
font-size: 16px;
}
}
}
}
}
// 横屏手机 + 平板
@media (min-width: 768px) and (max-width: 991px) {
.explain-box .exp-text {
width: 90%;
padding: 30px 30px 60px;
}
}
</style>
src/views/Countdown.vue
浏览文件 @ 8e095d70
......@@ -113,4 +113,65 @@ export default {
margin-top: 40px;
}
}
/* ========== 移动端适配 ========== */
// 竖屏手机
@media (max-width: 767px) {
.countdown-container {
display: flex;
flex-direction: column;
justify-content: center;
.title {
padding-top: 0;
font-size: 22px;
letter-spacing: 8px;
line-height: 32px;
}
.time {
padding-top: 24px;
.time-block {
width: 64px;
height: 64px;
font-size: 36px;
line-height: 64px;
margin-right: 4px;
}
.spots {
padding: 0 10px 0 4px;
span {
width: 8px;
height: 8px;
margin-top: 16px;
}
}
}
.tips {
margin-top: 24px;
font-size: 14px;
letter-spacing: 1px;
padding: 0 16px;
}
}
}
// 横屏手机 + 平板
@media (min-width: 768px) and (max-width: 991px) {
.countdown-container {
.title {
padding-top: 100px;
font-size: 28px;
letter-spacing: 18px;
}
.time .time-block {
width: 120px;
height: 120px;
font-size: 64px;
line-height: 120px;
}
.spots span {
margin-top: 30px;
}
}
}
</style>
src/views/Exam.vue
浏览文件 @ 8e095d70
......@@ -19,9 +19,26 @@
@changeNumber="number => changeNumber(number, false)"
v-if="questionItems.length"></QuestionList>
</div>
<div class="right scroll">
<!-- 桌面端/横屏：右侧题号面板 -->
<div class="right scroll desktop-num-panel">
<QuestionNum :questionItems="questionItems" :questionNumber="questionNumber" :student="studentInfo" @changeNumber="changeNumber"></QuestionNum>
</div>
<!-- 竖屏：底部弹出题号面板 -->
<div class="mobile-num-overlay" :class="{ visible: showMobileNum }" @click.self="showMobileNum = false">
<div class="mobile-num-panel">
<div class="mobile-num-header">
<span>答题卡</span>
<span class="mobile-num-close" @click="showMobileNum = false">✕</span>
</div>
<div class="mobile-num-body scroll">
<QuestionNum :questionItems="questionItems" :questionNumber="questionNumber" :student="studentInfo" @changeNumber="onMobileNumChange"></QuestionNum>
</div>
</div>
</div>
<!-- 竖屏：题号切换浮钮 -->
<div class="mobile-num-fab" @click="showMobileNum = true">
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M3 3h8v8H3V3zm0 10h8v8H3v-8zm10-10h8v8h-8V3zm0 10h8v8h-8v-8z"/></svg>
</div>
</div>
<footer class="footer">
<div class="exam-btn">
......@@ -56,7 +73,8 @@ export default {
questionNumber: 1,
examTime: '00:00:00 倒计时',
countdownTimer: null,
cacheExamTimer: null
cacheExamTimer: null,
showMobileNum: false
}
},
computed: {
......@@ -296,6 +314,11 @@ export default {
changeNumber(number, isBackTop = true) {
this.questionNumber = number
isBackTop && this.$refs.questionRef.scrollTo(0, 0)
},
onMobileNumChange(number) {
this.questionNumber = number
this.showMobileNum = false
this.$refs.questionRef.scrollTo(0, 0)
}
}
}
......@@ -427,5 +450,204 @@ export default {
}
}
}
// 竖屏题号浮钮
.mobile-num-fab {
display: none;
}
// 竖屏题号弹出层
.mobile-num-overlay {
display: none;
}
}
/* ========== 移动端适配 ========== */
// 竖屏手机：单栏布局 + 题号弹出层
@media (max-width: 767px) {
.exam-container {
.header {
flex-shrink: 0;
.title {
padding-left: 12px;
font-size: 16px;
line-height: 44px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right {
width: auto;
padding-right: 12px;
.count {
font-size: 14px;
}
}
}
.exam-main {
position: relative;
.left {
padding: 8px 12px;
}
.desktop-num-panel {
display: none;
}
}
.footer {
height: auto;
padding: 8px 12px;
flex-wrap: wrap;
gap: 8px;
.exam-btn {
padding-left: 0;
.el-button {
width: auto;
min-width: 72px;
padding: 8px 14px;
font-size: 13px;
}
}
.right-btn {
margin-left: auto;
.end-exam-btn {
width: auto;
.el-button {
width: auto;
min-width: 80px;
padding: 8px 14px;
font-size: 13px;
}
}
.sign {
display: none;
}
}
}
// 浮钮
.mobile-num-fab {
display: flex;
position: fixed;
bottom: 80px;
right: 16px;
width: 48px;
height: 48px;
border-radius: 50%;
background: #c01540;
color: #fff;
align-items: center;
justify-content: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
z-index: 100;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
// 弹出层
.mobile-num-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
&.visible {
opacity: 1;
pointer-events: auto;
.mobile-num-panel {
transform: translateY(0);
}
}
.mobile-num-panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
max-height: 70vh;
background: #fff;
border-radius: 16px 16px 0 0;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.25s ease-out;
.mobile-num-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px 12px;
font-size: 16px;
font-weight: bold;
color: #222;
border-bottom: 1px solid #eee;
flex-shrink: 0;
.mobile-num-close {
font-size: 20px;
color: #999;
cursor: pointer;
padding: 4px;
}
}
.mobile-num-body {
flex: 1;
overflow-y: auto;
padding: 0 16px 24px;
-webkit-overflow-scrolling: touch;
// 隐藏原有固定定位的图例（在弹出层内部跟着文档流）
.flag-tips {
position: static;
width: 100%;
padding: 10px 0 0;
}
}
}
}
}
}
// 横屏手机 + 平板：收紧间距
@media (min-width: 768px) and (max-width: 991px) {
.exam-container {
.header {
.title {
padding-left: 16px;
font-size: 18px;
line-height: 48px;
}
.right {
width: 180px;
.count {
font-size: 14px;
}
}
}
.exam-main {
.left {
padding: 8px 16px;
}
.right {
width: 180px;
padding: 0 12px;
}
}
.footer {
height: 50px;
.exam-btn {
padding-left: 16px;
.el-button {
width: 80px;
padding: 8px 12px;
font-size: 13px;
}
}
.right-btn .end-exam-btn {
width: 200px;
.el-button {
width: 150px;
padding: 8px 12px;
font-size: 13px;
}
}
}
}
}
</style>
src/views/Finish.vue
浏览文件 @ 8e095d70
......@@ -120,4 +120,49 @@ export default {
height: 60%;
}
}
/* ========== 移动端适配 ========== */
// 竖屏手机
@media (max-width: 767px) {
.finish-container {
display: flex;
flex-direction: column;
justify-content: center;
.title {
padding-top: 40px;
font-size: 28px;
line-height: 40px;
letter-spacing: 1px;
}
.text {
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
}
img {
width: 80%;
height: auto;
max-height: 50vh;
object-fit: contain;
}
}
}
// 横屏手机 + 平板
@media (min-width: 768px) and (max-width: 991px) {
.finish-container {
.title {
padding-top: 50px;
font-size: 36px;
line-height: 50px;
}
.text {
font-size: 20px;
}
img {
height: 50%;
}
}
}
</style>
src/views/Login.vue
浏览文件 @ 8e095d70
......@@ -63,24 +63,8 @@ export default {
}
},
mounted() {
this.tipsMobileAngle()
window.onresize = () => {
this.tipsMobileAngle()
}
},
methods: {
tipsMobileAngle() {
if (this.isMobile()) {
const winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0
const winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
if (winHeight > winWidth) {
this.$message({ message: '请横屏预览', type: 'warning' })
}
}
},
isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
},
getExamInfo() {
this.data = this.examInfo
if (this.getEnabledTime() < 0) {
......@@ -329,4 +313,111 @@ export default {
}
}
}
/* ========== 移动端适配 ========== */
// 竖屏手机
@media (max-width: 767px) {
.welcome-msg {
padding-top: 40px;
}
.main-cont900 {
width: 100%;
padding: 0 16px;
box-sizing: border-box;
&.por {
position: relative;
bottom: auto;
left: auto;
transform: none;
margin-bottom: 0;
margin-top: -60px;
}
}
.login-box {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.content {
height: auto;
min-height: 360px;
padding-top: 30px;
padding-bottom: 30px;
.title {
padding-top: 60px;
font-size: 24px;
line-height: 34px;
letter-spacing: 3px;
padding-left: 0;
text-align: center;
}
.exam-time {
text-align: center;
.time {
height: auto;
}
.line {
margin: 10px auto;
}
}
.main-form {
height: auto;
padding: 24px 16px;
box-sizing: border-box;
.form {
width: 100%;
flex-direction: column;
.tips {
position: static;
margin-bottom: 12px;
font-size: 16px;
}
.time-tips {
position: static;
margin-top: 12px;
font-size: 14px;
}
}
input {
width: 100%;
box-sizing: border-box;
height: 44px;
font-size: 16px;
}
.btn {
width: 100%;
margin-left: 0;
margin-top: 16px;
height: 44px;
line-height: 44px;
font-size: 16px;
}
}
}
}
}
// 横屏手机 + 平板
@media (min-width: 768px) and (max-width: 991px) {
.main-cont900 {
width: 90%;
&.por {
margin-bottom: -80px;
}
}
.login-box .content {
.title {
padding-top: 70px;
font-size: 28px;
letter-spacing: 4px;
}
.main-form {
input {
width: 400px;
}
.btn {
width: 140px;
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论