donghanyang
/
Link_Homework_Vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

JS编写

qt_lh
lenghui 5 months ago
parent
486fd487be
commit
99a2af855c
3 changed files with 165 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      work/package.json
  2. 3
      work/src/assets/main.css
  3. 187
      work/src/views/DoHomeworkView.vue

5
work/package.json
View File

@ -24,5 +24,10 @@
"@vitejs/plugin-vue": "^5.2.1",
"vite": "^6.0.1",
"vite-plugin-vue-devtools": "^7.6.5"
},
"pnpm": {
"overrides": {
"quill": "2.0.2"
}
}
}

3
work/src/assets/main.css
View File

@ -0,0 +1,3 @@
*{
margin: 0;
}

187
work/src/views/DoHomeworkView.vue
View File

@ -3,27 +3,36 @@
<div class="main">
<div class="content">
<div class="title">
张三刺杀了部长
{{questionList[0].name}}
</div>
<template v-for="(question,index) in questionList" :key="index">
<!--单选-->
<template v-if="question.type == 1">
<div class="question">
1、单选题目（单选）
{{index+1}}. {{question.description}}（单选）
</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 v-for="(answer,index) in question.content" :key="index" class="answer">
<div class="selected"><input id="select1" name="radio" type="radio"><label for="select1">{{answer.text}}</label></div>
</div>
</template>
<!--多选-->
<template v-if="question.type == 2">
<div class="question">
2、多选题目（多选）
{{index+1}}. {{question.description}}（多选）
</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 v-for="(answer,index) in question.content" :key="index" class="answer">
<div class="selected"><input id="checkbox1" name="checkbox" type="checkbox"><label
for="checkbox1">{{answer.text}}</label>
</div>
</div>
</template>
<!--简答题-->
<template v-if="question.type == 3">
<div class="Short-answers">
<div class="question">
3、填空题
{{index+1}}. {{question.description}}
</div>
<el-input
v-model="title"
@ -38,13 +47,9 @@
<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>
</template>
</template>
<!--提交按钮-->
<div class="submit">
<img src="https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d2foxm6thylaa50qz6lgl.png">
@ -59,11 +64,47 @@
</template>
<script setup>
import { ref } from 'vue';
import {ref} from 'vue';
const questionList = ref([]);
function getQuestionList(Id) {
questionList.value = [
{
"id": 1377,
"name": "12-9课后作业",
"description": "是否抄底",
"content": "[{\"id\":\"\",\"text\":\"是\"},{\"id\":\"\",\"text\":\"否\"}]",
"status": 1,
"type": 1
},
{
"id": 1378,
"name": "12-9课后作业",
"description": "抄底股票",
"content": "[{\"id\":\"\",\"text\":\"恒邦股份\"},{\"id\":\"\",\"text\":\"上海电气\"},{\"text\":\"葫芦娃\",\"id\":\"\"}]",
"status": 1,
"type": 2
},
{
"id": 1379,
"name": "12-9课后作业",
"description": "如何看待抄底",
"content": "[{\"id\":\"\",\"text\":\"\"}]",
"status": 1,
"type": 3
}
]
for (let i = 0; i < questionList.value.length; i++) {
questionList.value[i].content = JSON.parse(questionList.value[i].content);
}
}
getQuestionList(1);
// 绑定到编辑器的内容
const content = ref('请输入内容');
const title = ref('');
// 编辑器配置选项
const editorOptions = {
// 配置项
@ -72,44 +113,48 @@ const editorOptions = {
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'
'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'
]
]
}
};
const title = ref('');
//提交作业
const homework = ref({
id: 1,
jwCode: 1,
formId: 1,
content: content.value,
});
function submit() {
console.log(homework.value);
}
</script>
<style scoped>
/**{
margin: 0;
padding: 0;
}*/
.container{
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 34.375rem;
height: 114.399375rem;
}
.main{
.main {
background-image: url("https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/images/20230823/qiangdianbanHomeWorkBg.png");
background-size: contain;
background-position: center 0;
@ -120,38 +165,60 @@ const title = ref('');
text-align: center;
position: relative;
}
.content{
.content {
position: absolute;
width: 90%;
width: 93%;
height: 80%;
overflow-y: scroll;
/*居中显示*/
left: 50%;
transform: translate(-50%, 0);
top: 12.5%;
text-align: left;
}
.title{
/*滚动条样式*/
.content::-webkit-scrollbar {
width: 3px;
}
.content::-webkit-scrollbar-track {
background: #f1f1f1; /* 滚动条轨道的背景色 */
}
.content::-webkit-scrollbar-thumb {
background: #d9d9d9; /* 滚动条滑块的颜色 */
border-radius: 6px; /* 滑块的圆角 */
}
.title {
font-size: 1.65rem;
font-weight: 500;
/*居中显示*/
text-align: center;
}
.question{
.question {
padding-top: 10%;
padding-left: 3.5%;
padding-left: 4%;
font-size: 1.35rem;
font-weight: 500;
}
.answer{
.answer {
padding-top: 2.5%;
padding-left: 6%;
padding-left: 7%;
font-size: 1.35rem;
}
.selected{
.selected {
display: block;
padding: 1% 0 1.2% 0;
}
.selected input[name="radio"],
.selected input[name="checkbox"]{
.selected input[name="checkbox"] {
margin-right: 1%;
width: 1.2rem;
height: 1rem;
@ -159,24 +226,28 @@ const title = ref('');
opacity: 0.8;
cursor: pointer; /* 鼠标悬停时变成手的形状 */
}
.selected label{
.selected label {
cursor: pointer;
}
.editor{
.editor {
padding-top: 2.5%;
padding-left: 3.5%;
padding-right: 3.5%;
height: 30rem;
}
.Short-answers{
.Short-answers {
height: 48rem;
}
.submit{
.submit {
display: block;
text-align: center;
}
.submit img{
.submit img {
padding-top: 2.5%;
padding-left: 3.5%;
padding-right: 3.5%;
@ -184,7 +255,7 @@ const title = ref('');
width: 67%;
}
.submit-times{
.submit-times {
font-size: 0.8rem;
color: #858585;
text-align: center;

Write Preview
Loading…
Cancel
Save