lenghui
11 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