JS编写

work/package.json

@@ -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"
+    }
   }
 }

work/src/assets/main.css

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

work/src/views/DoHomeworkView.vue

@@ -3,67 +3,108 @@
     <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>
+          {{questionList[0].name}}
         </div>
+        <template v-for="(question,index) in questionList" :key="index">
+          <!--单选-->
+          <template v-if="question.type == 1">
+            <div class="question">
+              {{index+1}}. {{question.description}}（单选）
+            </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>
 
-        <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 v-if="question.type == 2">
+            <div class="question">
+              {{index+1}}. {{question.description}}（多选）
+            </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">
+                {{index+1}}. {{question.description}}
+              </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>
+          </template>
+        </template>
 
-        <div class="Short-answers">
-          <div class="question">
-            3、填空题
+          <!--提交按钮-->
+          <div class="submit">
+            <img src="https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d2foxm6thylaa50qz6lgl.png">
           </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 class="submit-times">
+            <span>您已提交0次，每个作业可以提交3次</span>
           </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';
+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;