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,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 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 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 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">
@@ -61,9 +66,45 @@
 <script setup>
 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 = {
   // 配置项
@@ -86,22 +127,25 @@ const editorOptions = {
         {'color': []}, {'background': []},
         {'font': []},
         {'align': []},
-        'clean',
-        'link',
-        'image'
+        '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 {
   text-align: center;
   margin-left: auto;
@@ -109,6 +153,7 @@ const title = ref('');
   width: 34.375rem;
   height: 114.399375rem;
 }
+
 .main {
   background-image: url("https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/images/20230823/qiangdianbanHomeWorkBg.png");
   background-size: contain;
@@ -120,36 +165,58 @@ const title = ref('');
   text-align: center;
   position: relative;
 }
+
 .content {
   position: absolute;
-  width: 90%;
+  width: 93%;
+  height: 80%;
+  overflow-y: scroll;
   /*居中显示*/
   left: 50%;
   transform: translate(-50%, 0);
   top: 12.5%;
   text-align: left;
 }
+
+/*滚动条样式*/
+.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 {
   padding-top: 10%;
-  padding-left: 3.5%;
+  padding-left: 4%;
   font-size: 1.35rem;
   font-weight: 500;
 }
+
 .answer {
   padding-top: 2.5%;
-  padding-left: 6%;
+  padding-left: 7%;
   font-size: 1.35rem;
 }
+
 .selected {
   display: block;
   padding: 1% 0 1.2% 0;
 }
+
 .selected input[name="radio"],
 .selected input[name="checkbox"] {
   margin-right: 1%;
@@ -159,15 +226,18 @@ const title = ref('');
   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;
 }
@@ -176,6 +246,7 @@ const title = ref('');
   display: block;
   text-align: center;
 }
+
 .submit img {
   padding-top: 2.5%;
   padding-left: 3.5%;