'笔记功能’

src/components/TestInfo/index.vue

@@ -3,7 +3,7 @@
  * @Author: AnthonyD
  * @Date:   2023-03-01 15:29:44
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-24 09:41:58
+ * @Last Modified time: 2023-04-20 19:03:32
  */
 </script><template>
   <div class="header_container">

src/components/ViewHeader/index.vue

@@ -3,48 +3,46 @@
  * @Author: AnthonyD
  * @Date:   2023-02-23 16:03:00
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-23 19:11:19
+ * @Last Modified time: 2023-04-20 16:51:20
  */
 </script><template>
   <div class="header_container">
     <div class="btn_box_mobile">
-      <el-row>
-        <el-popover placement="top-start" trigger="hover">
-          <button
-            style="
-              background-color: #038d6e;
-              width: 100%;
-              color: #fff;
-              border: 1px solid #038d6e;
-              margin-bottom: 5px;
-            "
-            size="mini"
-            @click="goPersonalCenter"
-          >
-            个人中心
-          </button>
-          <button
-            style="
-              background-color: #038d6e;
-              width: 100%;
-              color: #fff;
-              border: 1px solid #038d6e;
-            "
-            size="mini"
-            @click="logOut"
-          >
-            退出登录
-          </button>
+      <el-popover placement="top-start" trigger="hover">
+        <button
+          style="
+            background-color: #038d6e;
+            width: 100%;
+            color: #fff;
+            border: 1px solid #038d6e;
+            margin-bottom: 5px;
+          "
+          size="mini"
+          @click="goPersonalCenter"
+        >
+          个人中心
+        </button>
+        <button
+          style="
+            background-color: #038d6e;
+            width: 100%;
+            color: #fff;
+            border: 1px solid #038d6e;
+          "
+          size="mini"
+          @click="logOut"
+        >
+          退出登录
+        </button>
 
-          <el-button
-            slot="reference"
-            type="primary"
-            icon="el-icon-user"
-            size="mini"
-            circle
-          ></el-button>
-        </el-popover>
-      </el-row>
+        <el-button
+          slot="reference"
+          type="primary"
+          icon="el-icon-user"
+          size="mini"
+          circle
+        ></el-button>
+      </el-popover>
     </div>
     <div class="logo" @click="goPersonalCenter()" style="cursor: pointer">
       <img src="/image/logo.svg" alt="" />

src/views/analysis/components/student_comments_view.vue

@@ -3,10 +3,10 @@
  * @Author: AnthonyD
  * @Date:   2023-03-27 15:09:40
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-04-20 10:49:14
+ * @Last Modified time: 2023-04-21 12:39:42
  */
 </script><template>
-  <div>
+  <div class="module_container">
     <el-row>
       <!-- 南北方正确/错误率 -->
       <el-col
@@ -95,18 +95,82 @@
       </el-col>
     </el-row>
     <div>
-      <div class="module_header">
-        学员笔记:<el-button
+      <div class="module_header">学员笔记:</div>
+
+      <div style="padding: 0 10px; box-sizing: border-box">
+        <el-input disabled type="textarea" v-model="remark" :rows="6">
+        </el-input>
+      </div>
+    </div>
+    <div>
+      <el-popover
+        width="600"
+        placement="bottom"
+        title="学生笔记:"
+        trigger="click"
+        v-model="visible"
+      >
+        <div style="padding: 0 10px; box-sizing: border-box">
+          <el-input type="textarea" v-model="remark" :rows="12"> </el-input>
+        </div>
+
+        <el-button
+          style="margin-top: 10px"
           class="save_box"
           type="primary"
           @click="getStudentTakeDown"
           >保存</el-button
         >
-      </div>
+        <el-button
+          style="margin-top: 10px"
+          class="save_box"
+          type="danger"
+          @click="visible = false"
+          >关闭</el-button
+        >
+        <el-button
+          size="mini"
+          slot="reference"
+          class="note_box"
+          type="primary"
+          icon="el-icon-edit"
+          circle
+        ></el-button>
+      </el-popover>
 
-      <div style="padding: 0 10px; box-sizing: border-box">
-        <el-input type="textarea" v-model="remark" :rows="6"> </el-input>
-      </div>
+      <el-popover
+        width="300"
+        placement="bottom-start"
+        title="学生笔记:"
+        trigger="click"
+        v-model="visible_mobile"
+      >
+        <div style="padding: 0 10px; box-sizing: border-box">
+          <el-input type="textarea" v-model="remark" :rows="12"> </el-input>
+        </div>
+        <el-button
+          style="margin-top: 10px"
+          class="save_box"
+          type="primary"
+          @click="getStudentTakeDown"
+          >保存</el-button
+        >
+        <el-button
+          style="margin-top: 10px"
+          @click="visible_mobile = false"
+          class="save_box"
+          type="danger"
+          >关闭</el-button
+        >
+        <el-button
+          size="mini"
+          slot="reference"
+          class="note_mobile_box"
+          type="primary"
+          icon="el-icon-edit"
+          circle
+        ></el-button>
+      </el-popover>
     </div>
   </div>
 </template>
@@ -139,6 +203,8 @@ export default {
       task_id: null,
       //学员笔记
       remark: null,
+      visible: false,
+      visible_mobile: false,
     };
   },
   components: { AnalyseModule },
@@ -153,6 +219,9 @@ export default {
   methods: {
     //学员笔记
     getStudentTakeDown() {
+      this.visible = false;
+      this.visible_mobile = false;
+      // let a = {remark:this.remark};
       getTakeDown(this.task_id, { remark: this.remark }).then((res) => {
         console.log('上传回调');
         console.log(res);
@@ -445,4 +514,27 @@ export default {
   float: right;
   margin-right: 10px;
 }
+
+.note_box {
+  position: fixed;
+  top: 15%;
+  right: 18%;
+}
+
+@media screen and (min-width: 600px) {
+  .note_mobile_box {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .note_box {
+    display: none;
+  }
+  .note_mobile_box {
+    position: fixed;
+    top: 27%;
+    right: 6%;
+  }
+}
 </style>