Browse Source

任务调整样式

natasha 1 year ago
parent
commit
e480c996b6

+ 32 - 8
src/views/task_details/TaskTop.vue

@@ -11,13 +11,13 @@
       <template v-if="type === 'teacher'">
         <div class="task-name">{{ itemInfo.name }}</div>
         <div class="task-time">{{ itemInfo.time_space_view_txt }}</div>
-        <div class="task-content">
+        <div class="task-content" v-if="contentUrl">
           <span>{{ $t('Key371') }}</span>
           <!-- eslint-disable-next-line vue/no-v-html -->
           <span v-html="contentUrl"></span>
         </div>
       </template>
-      <template v-if="!isExercises">
+      <template v-if="!isExercises && itemInfo.courseware_list.length > 0">
         <div class="courseware-list-title">
           {{ $t('Key309') }}
         </div>
@@ -44,7 +44,7 @@
         </el-tag>
       </template>
     </div>
-    <div class="learning-material">
+    <div class="learning-material" v-if="itemInfo.cs_item_learning_material_list.length > 0">
       <div class="learning-material-title">
         {{ isExercises && type === 'teacher' ? '练习任务' : $t('Key274') }}
       </div>
@@ -101,7 +101,7 @@ function emitViewFile(fileName, fileId) {
 
 <style lang="scss" scoped>
 .task-detail-top {
-  padding: 24px 32px;
+  padding: 24px 40px;
   background-color: #fff;
   border-radius: 8px;
 
@@ -113,6 +113,7 @@ function emitViewFile(fileName, fileId) {
     &-name {
       font-size: 24px;
       font-weight: 700;
+      line-height: 36px;
     }
 
     &-time {
@@ -122,6 +123,10 @@ function emitViewFile(fileName, fileId) {
 
   .cs_item_name {
     margin: 8px 0 24px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    color: rgba(0, 0, 0, 50%);
   }
 
   .learning-material {
@@ -129,7 +134,10 @@ function emitViewFile(fileName, fileId) {
 
     &-title {
       margin-bottom: 16px;
-      font-size: 18px;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 32px; /* 200% */
+      color: #2c2c2c;
     }
   }
 
@@ -142,16 +150,21 @@ function emitViewFile(fileName, fileId) {
       margin-bottom: 16px;
       font-size: 20px;
       font-weight: bold;
+      line-height: 30px;
     }
 
     .task-time {
       margin-bottom: 16px;
-      color: #969696;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px; /* 150% */
+      color: #2c2c2c;
+      opacity: 0.5;
     }
 
     .task-content {
       display: flex;
-      column-gap: 40px;
+      column-gap: 38px;
       margin-bottom: 16px;
       white-space: pre-wrap;
 
@@ -161,16 +174,27 @@ function emitViewFile(fileName, fileId) {
 
       :first-child {
         min-width: 70px;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 32px; /* 200% */
+        color: #000;
       }
 
       :last-child {
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 32px; /* 200% */
+        color: #000;
         word-break: break-all;
       }
     }
 
     &-title {
       margin-bottom: 16px;
-      font-size: 18px;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 32px; /* 200% */
+      color: #2c2c2c;
     }
 
     .el-tag {

+ 41 - 30
src/views/task_details/teacher/index.vue

@@ -117,34 +117,38 @@
             <span class="finish-time">{{ curFinishDetail.finish_time_view_txt }}</span>
           </div>
           <div ref="situation" class="finish-situation">
-            <div class="title">
-              {{ $t('Key312') }}
-            </div>
-            <div class="courseware-list">
-              <el-tag
-                v-for="item in curFinishDetail.courseware_list"
-                :key="item.courseware_id"
-                color="#fff"
-                :title="item.courseware_name"
-                @click="showCompletionView(item.courseware_id, item.is_finished, item.group_id_selected_info)"
-              >
-                <div class="courseware">
-                  <svg-icon icon-class="courseware" />
-                  <span class="courseware_name nowrap-ellipsis">{{ item.courseware_name }}</span>
-                  <svg-icon v-if="item.is_finished === 'true'" class="check-mark" icon-class="check-mark-circle" />
-                </div>
-              </el-tag>
-            </div>
-            <div class="title">
-              {{ $t('Key313') }}
-            </div>
-            <div>
-              <el-tag v-for="item in accessory_list" :key="item.file_id" color="#fff" :title="item.file_name">
-                <span @click="showFileVisible(item.file_name, item.file_id)">{{ item.file_name }}</span>
-              </el-tag>
-            </div>
+            <template v-if="curFinishDetail.courseware_list.length > 0">
+              <div class="title">
+                {{ $t('Key312') }}
+              </div>
+              <div class="courseware-list">
+                <el-tag
+                  v-for="item in curFinishDetail.courseware_list"
+                  :key="item.courseware_id"
+                  color="#fff"
+                  :title="item.courseware_name"
+                  @click="showCompletionView(item.courseware_id, item.is_finished, item.group_id_selected_info)"
+                >
+                  <div class="courseware">
+                    <svg-icon icon-class="courseware" />
+                    <span class="courseware_name nowrap-ellipsis">{{ item.courseware_name }}</span>
+                    <svg-icon v-if="item.is_finished === 'true'" class="check-mark" icon-class="check-mark-circle" />
+                  </div>
+                </el-tag>
+              </div>
+            </template>
+            <template v-if="accessory_list.length > 0">
+              <div class="title">
+                {{ $t('Key313') }}
+              </div>
+              <div>
+                <el-tag v-for="item in accessory_list" :key="item.file_id" color="#fff" :title="item.file_name">
+                  <span @click="showFileVisible(item.file_name, item.file_id)">{{ item.file_name }}</span>
+                </el-tag>
+              </div>
+            </template>
             <!-- 作业列表 -->
-            <template v-if="is_enable_homework">
+            <template v-if="is_enable_homework && curFinishDetail.homework_list.length > 0">
               <div class="title">
                 {{ $t('Key314') }}
               </div>
@@ -160,7 +164,7 @@
               </div>
             </template>
             <!-- 学员留言 -->
-            <template v-if="is_enable_message">
+            <template v-if="is_enable_message && curFinishDetail.student_message">
               <div class="title">
                 {{ $t('Key315') }}
               </div>
@@ -649,11 +653,18 @@ $bor-color: #d9d9d9;
         }
 
         .title {
-          font-size: 18px;
-          font-weight: bold;
+          font-size: 20px;
+          font-weight: 500;
+          line-height: 30px; /* 150% */
+          color: #2c2c2c;
 
           + div {
             padding: 16px 0;
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 24px; /* 150% */
+            color: #2c2c2c;
+            opacity: 0.6;
           }
         }
 

+ 20 - 1
src/views/teacher/create_course/step_four/NewTask.vue

@@ -178,7 +178,23 @@
                   />
                 </div>
               </el-form-item>
-
+              <el-form-item :label="$t('Key374')">
+                <el-upload action="no" :http-request="upload" multiple :show-file-list="false" accept="*">
+                  <el-button><svg-icon icon-class="upload" /> {{ $t('Key374') }}</el-button>
+                </el-upload>
+                <div class="tag-list">
+                  <el-tag
+                    v-for="({ file_id, file_name }, i) in courseForm.file_info_list"
+                    :key="file_id"
+                    color="#fff"
+                    closable
+                    :title="file_name"
+                    @close="closeFile(i, courseForm.file_info_list)"
+                  >
+                    <span>{{ file_name }}</span>
+                  </el-tag>
+                </div>
+              </el-form-item>
               <el-form-item :label="$t('Key634')">
                 <el-radio v-for="item in mode_list" :key="item.code" v-model="courseForm.task_mode" :label="item.code">
                   {{ item.name }}
@@ -288,6 +304,7 @@ let liveForm = ref({
 
 let courseForm = ref({
   coursewareInfo: [],
+  file_info_list: [],
   task_mode: 'PRACTICE',
   is_enable_message: true
 });
@@ -300,6 +317,7 @@ let basicForm = ref({
 
 const { form, rules, closeFile, upload, custom_student_list, deleteStudentItem, selectStudent, student_list } = useForm(
   liveForm,
+  courseForm,
   basicForm
 );
 
@@ -362,6 +380,7 @@ function addTaskToCSItem() {
 
     if (teaching_type === 11) {
       data['courseware_id_list'] = courseForm.value.coursewareInfo.map(({ courseware_id }) => courseware_id);
+      data['file_id_list'] = courseForm.value.file_info_list.map(({ file_id }) => file_id);
       data['task_mode'] = courseForm.value.task_mode;
       data['is_enable_message'] = courseForm.value.is_enable_message;
       data['courseware_group_selected_list'] = courseForm.value.coursewareInfo.map(

+ 5 - 2
src/views/teacher/create_course/step_four/newTask.js

@@ -78,6 +78,7 @@ export function useInit(form, student_list, custom_student_list, { liveForm, bas
 
     if (teaching_type === 11) {
       courseForm.value.coursewareInfo = courseware_list;
+      courseForm.value.file_info_list = accessory_list;
       courseForm.value.task_mode = task_mode;
     }
 
@@ -167,7 +168,7 @@ export function useInit(form, student_list, custom_student_list, { liveForm, bas
 /**
  * 表单及操作
  */
-export function useForm(liveForm, basicForm) {
+export function useForm(liveForm, courseForm,basicForm) {
   const $t = inject('$t');
   const route = useRoute();
   const { query } = route;
@@ -217,7 +218,9 @@ export function useForm(liveForm, basicForm) {
         liveForm.value.file_info_list = liveForm.value.file_info_list.concat(file_info_list);
         return;
       }
-
+      if (type === 11) {
+        courseForm.value.file_info_list = courseForm.value.file_info_list.concat(file_info_list);
+      }
       if (type === 12) {
         basicForm.value.file_info_list = basicForm.value.file_info_list.concat(file_info_list);
       }