lenghui
5 months ago
5 changed files with 402 additions and 1 deletions
-
198work/package-lock.json
-
3work/package.json
-
4work/src/main.js
-
6work/src/router/index.js
-
192work/src/views/DoHomeworkView.vue
@ -0,0 +1,192 @@ |
|||||
|
<template> |
||||
|
<div class="container"> |
||||
|
<div class="main"> |
||||
|
<div class="content"> |
||||
|
<div class="title"> |
||||
|
张三刺杀了部长 |
||||
|
</div> |
||||
|
<div class="question"> |
||||
|
1、单选题目（单选） |
||||
|
</div> |
||||
|
<div class="answer"> |
||||
|
<div class="selected"><input id="select1" name="radio" type="radio" ><label for="select1">选项1</label></div> |
||||
|
<div class="selected"><input id="select2" name="radio" type="radio" ><label for="select2">选项2</label></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="question"> |
||||
|
2、多选题目（多选） |
||||
|
</div> |
||||
|
<div class="answer"> |
||||
|
<div class="selected"><input id="checkbox1" name="checkbox" type="checkbox" ><label for="checkbox1">选项1</label></div> |
||||
|
<div class="selected"><input id="checkbox2" name="checkbox" type="checkbox" ><label for="checkbox2">选项2</label></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="Short-answers"> |
||||
|
<div class="question"> |
||||
|
3、填空题 |
||||
|
</div> |
||||
|
<el-input |
||||
|
v-model="title" |
||||
|
style="width: 100%;padding: 3.5%" |
||||
|
size="large" |
||||
|
placeholder="请输入标题(5-100字符)" |
||||
|
maxlength="100" |
||||
|
show-word-limit |
||||
|
/> |
||||
|
<div class="editor"> |
||||
|
<!-- 引入 VueQuill 编辑器 --> |
||||
|
<quill-editor v-model="content" :options="editorOptions"></quill-editor> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="question"> |
||||
|
2、多选题目（多选） |
||||
|
</div> |
||||
|
<div class="answer"> |
||||
|
<div class="selected"><input id="checkbox1" name="checkbox" type="checkbox" ><label for="checkbox1">选项1</label></div> |
||||
|
<div class="selected"><input id="checkbox2" name="checkbox" type="checkbox" ><label for="checkbox2">选项2</label></div> |
||||
|
</div> |
||||
|
<!--提交按钮--> |
||||
|
<div class="submit"> |
||||
|
<img src="https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d2foxm6thylaa50qz6lgl.png"> |
||||
|
</div> |
||||
|
<!-- 提交次数 --> |
||||
|
<div class="submit-times"> |
||||
|
<span>您已提交0次，每个作业可以提交3次</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
// 绑定到编辑器的内容 |
||||
|
const content = ref('请输入内容'); |
||||
|
|
||||
|
// 编辑器配置选项 |
||||
|
const editorOptions = { |
||||
|
// 配置项 |
||||
|
theme: 'snow', // 或者 'bubble' |
||||
|
placeholder: '请输入内容', |
||||
|
modules: { |
||||
|
toolbar: [ |
||||
|
['bold', 'italic', 'underline', |
||||
|
'strike','blockquote', 'code-block',{ 'header': 1 }, |
||||
|
{ 'header': 2 }, |
||||
|
{ 'list': 'ordered'}, |
||||
|
{ 'list': 'bullet' }, |
||||
|
{ 'script': 'sub'}, |
||||
|
{ 'script': 'super' }, |
||||
|
{ 'indent': '-1'}, |
||||
|
{ 'indent': '+1' }, |
||||
|
{ 'direction': 'rtl' }, |
||||
|
{ 'size': ['small', false, 'large', 'huge'] }, |
||||
|
{ 'header': [1, 2, 3, 4, 5, 6, false] }, |
||||
|
{ 'color': [] }, { 'background': [] }, |
||||
|
{ 'font': [] }, |
||||
|
{ 'align': [] }, |
||||
|
'clean', |
||||
|
'link', |
||||
|
'image' |
||||
|
] |
||||
|
] |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const title = ref(''); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/**{ |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
}*/ |
||||
|
.container{ |
||||
|
text-align: center; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
width: 34.375rem; |
||||
|
height: 114.399375rem; |
||||
|
} |
||||
|
.main{ |
||||
|
background-image: url("https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/images/20230823/qiangdianbanHomeWorkBg.png"); |
||||
|
background-size: contain; |
||||
|
background-position: center 0; |
||||
|
background-repeat: no-repeat; |
||||
|
margin: 0; |
||||
|
width: 100%; |
||||
|
height: 1830px; |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
} |
||||
|
.content{ |
||||
|
position: absolute; |
||||
|
width: 90%; |
||||
|
/*居中显示*/ |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, 0); |
||||
|
top: 12.5%; |
||||
|
text-align: left; |
||||
|
} |
||||
|
.title{ |
||||
|
font-size: 1.65rem; |
||||
|
font-weight: 500; |
||||
|
/*居中显示*/ |
||||
|
text-align: center; |
||||
|
} |
||||
|
.question{ |
||||
|
padding-top: 10%; |
||||
|
padding-left: 3.5%; |
||||
|
font-size: 1.35rem; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.answer{ |
||||
|
padding-top: 2.5%; |
||||
|
padding-left: 6%; |
||||
|
font-size: 1.35rem; |
||||
|
} |
||||
|
.selected{ |
||||
|
display: block; |
||||
|
padding: 1% 0 1.2% 0; |
||||
|
} |
||||
|
.selected input[name="radio"], |
||||
|
.selected input[name="checkbox"]{ |
||||
|
margin-right: 1%; |
||||
|
width: 1.2rem; |
||||
|
height: 1rem; |
||||
|
/*透明度*/ |
||||
|
opacity: 0.8; |
||||
|
cursor: pointer; /* 鼠标悬停时变成手的形状 */ |
||||
|
} |
||||
|
.selected label{ |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.editor{ |
||||
|
padding-top: 2.5%; |
||||
|
padding-left: 3.5%; |
||||
|
padding-right: 3.5%; |
||||
|
height: 30rem; |
||||
|
} |
||||
|
.Short-answers{ |
||||
|
height: 48rem; |
||||
|
} |
||||
|
|
||||
|
.submit{ |
||||
|
display: block; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.submit img{ |
||||
|
padding-top: 2.5%; |
||||
|
padding-left: 3.5%; |
||||
|
padding-right: 3.5%; |
||||
|
cursor: pointer; |
||||
|
width: 67%; |
||||
|
} |
||||
|
|
||||
|
.submit-times{ |
||||
|
font-size: 0.8rem; |
||||
|
color: #858585; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue