作业

src/router/index.js

@@ -18,6 +18,11 @@ const routes = [
         path: '/animation',
         name: 'animation',
         component: () => import('../views/animation/anima.vue')
+    },
+    {
+        path: '/homework',
+        name: 'homework',
+        component: () => import('../views/homework/homework.vue')
     }
 ]
 // 创建路由实例

src/views/homepage.vue

@@ -18,6 +18,7 @@ const router = useRouter()
 const buttons = [
     { type: 'primary', text: '转盘',path:'/hxl_dzp1' },
     { type: 'success', text: '动画',path:'/animation' },
+    { type: 'success', text: '作业',path:'/homework' },
 ]
 
 

src/views/homework/homework.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="total">
+        <div class="title">作业</div>
+        <div class="btnGroup">
+            <el-button type="primary" plain size="large" @click="danxun">单选题</el-button>
+            <el-button type="primary" plain size="large" @click="duoxuan">多选题</el-button>
+            <el-button type="primary" plain size="large" @click="jianda">简答题</el-button>
+        </div>
+        <div class="qLists">
+            <div class="qList" v-for="(item, index) in qLists" :key="index">
+                <div v-if="item.type === '1'">
+                    <div>{{ index + 1 }}.作业题目（单选）</div>
+                    <div>
+                        <el-input v-model="item.qTitle" show-word-limit maxlength="200"></el-input>
+                    </div>
+                    <div>
+                        设置选项：<el-button type="primary" text @click="addOption(item)">添加</el-button>
+                    </div>
+                    <div class="options" v-for="(option,index) in item.options" :key="index" >
+                        <el-input v-model="option.optionContent"></el-input>
+                        <el-button type="danger" text @click="delOption(item,option)">删除</el-button>
+                    </div>
+                </div>
+                <div v-else-if="item.type === '2'">
+                    <div>{{ index + 1 }}.作业题目（多选）</div>
+                    <el-input v-model="item.qTitle" show-word-limit maxlength="200"></el-input>
+                </div>
+                <div v-else>
+                    <div>{{ index + 1 }}.作业题目（简答）</div>
+                    <el-input v-model="item.qTitle" show-word-limit maxlength="200"></el-input>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const qLists = ref([]);
+
+const danxun = () => {
+    const qTitle = '';
+    const type = '1';
+    const options = [];
+    const question = {
+        qTitle,
+        type,
+        options
+    }
+    qLists.value.push(question);
+}
+
+const duoxuan = () => {
+    const qTitle = '';
+    const type = '2';
+    const options = [];
+    const question = {
+        qTitle,
+        type,
+        options
+    }
+    qLists.value.push(question);
+}
+
+const jianda = () => {
+    const qTitle = '';
+    const type = '3';
+    const options = [];
+    const question = {
+        qTitle,
+        type,
+        options
+    }
+    qLists.value.push(question);
+}
+
+const addOption = (item) => {
+    console.log(item);
+    const optionContent = '';
+    const index=item.options.length;
+    const option = {
+        optionContent,
+        index
+    }
+
+    item.options.push(option);
+}
+
+const delOption = (item,option) => {
+    console.log(item,option);
+    item.options.forEach((item,index)=>{
+        if(item.index===option.index){
+            item.options.splice(index,1) 
+        }
+    })
+}
+
+
+</script>
+
+<style scoped>
+.total {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.title {
+    width: 100%;
+    text-align: center;
+    font-size: 48px;
+    font-weight: bold;
+    margin-top: 20px
+}
+
+.btnGroup {
+    width: 100%;
+    text-align: center;
+    margin-top: 20px
+}
+
+.qLists {
+    width: 500px;
+    min-height: 200px;
+    margin-top: 20px;
+    background-color: #f0f0f0;
+    display: flex;
+    flex-direction: column;
+    /* align-items: center; */
+    /* justify-content: center; */
+}
+
+.qList {
+    width: 80%;
+    margin: 10px;
+}
+
+.options{
+    display: flex;
+    margin: 10px;
+}
+
+</style>