10-24

src/components/controlMainPage/issuePaperList/IQuestionList.vue

@@ -35,16 +35,19 @@
     padding: 15px;
     textarea{
       width: 100%;
-      min-height: 50px;
-      margin: 10px;
+      min-height: 60px;
+      margin: 10px 0;
       font-size: 16px;
       &:first-child{
         min-height: 200px;
       } 
     }
   }
-  .material-part{
+  .material-edit{
     width: 400px;
+    textarea{
+      height: 738px;
+    }
   }
   .question-part{
     width: 100%;
@@ -60,6 +63,18 @@
 }
 /deep/.el-drawer__body{
   height: calc(100% - 60px);
+  .material-part{
+    margin-top: 0;
+    &>div:first-child{
+      padding: 0;
+    }
+    &>div:nth-child(2){
+      font-size: 18px;
+    }
+  }
+  .halfScreen{
+    margin-right: 15px;
+  }
 }
 .dialog-style{
   div{
@@ -71,11 +86,16 @@
     }
   }
 }
+.materialModel{
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+}
 </style>
 <template>
 <div>
   <div class="index-area">
-    <el-collapse v-model="currentSection" accordion>
+    <el-collapse v-model="collapseSection" accordion @change="handleSection">
       <el-collapse-item v-for="(item,index) in indexRange" :key="index" :title="'M' + String(index + 1)" :name="index + 1">
         <ul>
           <li v-for="(ques,i) in paper.issues" :key="i" v-show="currentSection == ques.section || currentSection == ques.section * -1" 
@@ -85,10 +105,10 @@
     </el-collapse>
   </div>
   <div class="change-area">
-    <div class="material-part" v-if="indexRange[currentSection - 1].hasLites">
-
+    <div class="material-edit" v-if="indexRange[currentSection - 1].material">
+      <textarea v-model="paper.issues[currentQuestion].material" ></textarea>
     </div>
-    <div class="question-part" :class="{'halfScreen':indexRange[currentSection - 1].hasLites}">
+    <div class="question-part" :class="{'halfScreen':indexRange[currentSection - 1].material}">
       <textarea v-model="paper.issues[currentQuestion].content"></textarea>
       <textarea v-for="answer in paper.issues[currentQuestion].options" :key="answer.id" v-model="answer.content"></textarea>
       <br/><br/>
@@ -97,22 +117,21 @@
       </div>
       <br/><br/>
       <el-button @click="drawer = true" type="primary">查看</el-button>
-      <!-- <el-button @click="updateQuestion" type="danger">保存</el-button> -->
     </div>
   </div>
   <el-drawer
     :visible.sync="drawer"
-    :size="'900px'"
+    :size="'1000px'"
     :show-close="false"
     v-if="currentSection != ''">
     <div class="exam">
-      <div class="material-part" v-if="indexRange[currentSection - 1].hasLites">
-          <div class="triangle-top"><span>材</span><span>料</span></div>
+      <div class="material-part" v-if="indexRange[currentSection - 1].material">
+          <div class="triangle-top"><span>材料</span></div>
           <div>
-              <div v-html="paper.issues[currentQuestion].content" class="material-html"></div>
+              <div v-html="paper.issues[currentQuestion].material" class="material-html"></div>
           </div>
       </div>
-      <div class="scroll-part" :class="{'halfScreen':indexRange[currentSection - 1].hasLites}">
+      <div class="scroll-part" style="height: calc(100% - 105px)" :class="{'halfScreen':indexRange[currentSection - 1].material}">
           <div class="content-part">
               <div class="question-area">
                   <div class="triangle-top"><span>#{{currentQuestion - indexRange[currentSection - 1].min + 1}}</span></div>
@@ -134,7 +153,7 @@
               </div>
           </div>
       </div>
-      <div class="page-part">
+      <div class="page-part" :class="{'materialModel':indexRange[currentSection - 1].material}">
           <button @click="changePage(currentQuestion - 1)">
               <span id="preLeft"><img src="@/images/doTest/pre.png"></span>
               <label>上一题</label>
@@ -174,7 +193,8 @@ export default {
         },
         currentQuestion: 0,
         currentSection: 1,
-        indexRange:[{min: 0,max: 1,hasLites:false}],
+        collapseSection: 1,
+        indexRange:[{min: 0,max: 1,material:false}],
         allOptionList: OPTION_LIST,
         drawer:false,
         visibleDelete:false,
@@ -188,6 +208,11 @@ export default {
     this.getQuestion(this.$route.params.pid,0);
   },
   methods: {
+    handleSection(val){
+      if(val != ""){
+        this.currentSection = val;
+      }
+    },
     getQuestion(pid,index){
       getIssuePaperById(pid).then((result) => {
         if(result.result){
@@ -221,13 +246,19 @@ export default {
           }
         });
         this.indexRange = this.indexRange.map(item => {
-          item.hasLites = this.paper.issues[item.min].lites?true:false
+          item.material = this.paper.issues[item.min].material?true:false
           return item;
         })
     },
     changePage(page) {
       if(page >= 0 && page < this.paper.issues.length){
         this.currentQuestion = page;
+        this.indexRange.forEach((element,i) => {
+          if(page >= element.min && page <= element.max){
+            this.currentSection = i + 1;
+            this.collapseSection = i + 1;
+          }
+        });
         setTimeout(() => {
             MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
         },100);

static/index.html

@@ -31,4 +31,4 @@
           if(window.confirm("您的浏览器版本过低，推荐使用IE10及以上浏览器或者chrome浏览器，点击确定下载chrome安装浏览器。若是360等浏览器，开启兼容模式")){
               window.open("/download/44.0.2403.89_chrome_installer.exe", "_blank");
           }
-      }</script><link href=/css/group-app.b23098f2.css rel=prefetch><link href=/css/group-controlApp.8ac50025.css rel=prefetch><link href=/css/group-controlApp~group-doTest.40e89122.css rel=prefetch><link href=/css/group-doTest.7bdcefbe.css rel=prefetch><link href=/css/group-mainPage.213f7015.css rel=prefetch><link href=/js/group-app.704f72cd.js rel=prefetch><link href=/js/group-controlApp.2e7b24c9.js rel=prefetch><link href=/js/group-controlApp~group-doTest.c91d57c6.js rel=prefetch><link href=/js/group-doTest.d6a08083.js rel=prefetch><link href=/js/group-mainPage.b0fcae64.js rel=prefetch><link href=/css/app.e9f156cc.css rel=preload as=style><link href=/css/chunk-vendors.635bc84a.css rel=preload as=style><link href=/js/app.595e2bd5.js rel=preload as=script><link href=/js/chunk-vendors.33553e99.js rel=preload as=script><link href=/css/chunk-vendors.635bc84a.css rel=stylesheet><link href=/css/app.e9f156cc.css rel=stylesheet></head><body><noscript><strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.33553e99.js></script><script src=/js/app.595e2bd5.js></script></body></html>
+      }</script><link href=/css/group-app.be5f5bcd.css rel=prefetch><link href=/css/group-controlApp.47a2992d.css rel=prefetch><link href=/css/group-controlApp~group-doTest.40e89122.css rel=prefetch><link href=/css/group-doTest.e7aa7ee8.css rel=prefetch><link href=/css/group-mainPage.c54885d3.css rel=prefetch><link href=/js/group-app.94dfc3d3.js rel=prefetch><link href=/js/group-controlApp.082de928.js rel=prefetch><link href=/js/group-controlApp~group-doTest.b0c159a8.js rel=prefetch><link href=/js/group-doTest.da4cfd66.js rel=prefetch><link href=/js/group-mainPage.9c108c85.js rel=prefetch><link href=/css/app.e9f156cc.css rel=preload as=style><link href=/css/chunk-vendors.0ba8f5b6.css rel=preload as=style><link href=/js/app.0f6bb1ce.js rel=preload as=script><link href=/js/chunk-vendors.e1dfd16b.js rel=preload as=script><link href=/css/chunk-vendors.0ba8f5b6.css rel=stylesheet><link href=/css/app.e9f156cc.css rel=stylesheet></head><body><noscript><strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.e1dfd16b.js></script><script src=/js/app.0f6bb1ce.js></script></body></html>