1

src/components/student/courseDetail.vue

@@ -3,35 +3,47 @@
     <div class="pb_content_body" style="height: 100%">
       <div class="body_student">
         <div class="student_head">
-          <div v-if="screenType != 2 && screenType != '2s'" class="return" @click.stop="
-            goTo(
-              '/studentIndex?userid=' +
-              userid +
-              '&oid=' +
-              oid +
-              '&org=' +
-              org +
-              '&cid=' +
-              classId +
-              '&tType=' +
-              tType +
-              '&role=' +
-              role +
-              '&screenType=' +
-              screenType
-            )
-            ">
-            返回
+          <div
+            v-if="screenType != 2 && screenType != '2s'"
+            class="return"
+            @click.stop="
+              goTo(
+                '/studentIndex?userid=' +
+                  userid +
+                  '&oid=' +
+                  oid +
+                  '&org=' +
+                  org +
+                  '&cid=' +
+                  classId +
+                  '&tType=' +
+                  tType +
+                  '&role=' +
+                  role +
+                  '&screenType=' +
+                  screenType
+              )
+            "
+          >
+            <div class="returnIndexImg">
+              <img src="../../assets/icon/newIcon/returnIndex.png" alt="" />
+            </div>
+            <div>返回</div>
           </div>
           <div class="box_course">
             <div class="wheel">
-              <img style="object-fit: cover" :src="this.courseDetail.cover != null &&
+              <img
+                style="object-fit: cover"
+                :src="
+                  this.courseDetail.cover != null &&
                   this.courseDetail.cover != ''
-                  ? JSON.parse(this.courseDetail.cover).length > 0
-                    ? JSON.parse(this.courseDetail.cover)[0].url
+                    ? JSON.parse(this.courseDetail.cover).length > 0
+                      ? JSON.parse(this.courseDetail.cover)[0].url
+                      : mr
                     : mr
-                  : mr
-                " alt />
+                "
+                alt
+              />
             </div>
             <div class="right_box">
               <div class="rightT">
@@ -40,31 +52,53 @@
                 <div class="jd">{{ rw }}任务</div>
               </div>
               <div class="cType">
-                <div class="all_choose" v-for="(item, index) in courseType" :key="index">
-                  <span style="color: #6c6c6c">{{ item + ":" }}</span>
-                  <span class="type_children" v-for="(item2, index2) in courseTypeJson[item]" :key="index2">{{ item2
-                  }}</span>
+                <div
+                  class="all_choose"
+                  v-for="(item, index) in courseType"
+                  :key="index"
+                >
+                  <span style="color: #717c8d; font-weight: 400">{{ item + ":" }}</span>
+                  <span
+                    class="type_children"
+                    v-for="(item2, index2) in courseTypeJson[item]"
+                    :key="index2"
+                    >{{ item2 }}</span
+                  >
                 </div>
               </div>
-              <div class="cType" style="font-size: 18px; color: #6c6c6c">
-                <div style="min-width:150px">
-                  创建者：<span style="color: #000">{{
+              <div class="cType" style="align-items: flex-start">
+                <div style="
+                    min-width: fit-content;
+                    color: #717c8d;
+                    font-weight: 400;
+                  ">
+                  创建者：<span style="font-weight: bold; color: #0e1e33">{{
                     courseDetail.username
                   }}</span>
                 </div>
-                <div class="Tname" v-if="Tname.length > 0" @click="TnameCheck = !TnameCheck">
-                  协同人员：<span v-for="(tname, tIndex) in  TnameCheck ? Tname : Tname.slice(0, 6)" :key="tIndex"
-                    style="margin: 0 5px; color: #000">{{ tname
-                    }}</span><span style="margin: 0 5px; color: #b2b2b2"
-                    v-if="!TnameCheck && Tname.length > 6">更多....</span>
+                <div
+                  class="Tname"
+                  v-if="Tname.length > 0"
+                  @click="TnameCheck = !TnameCheck"
+                  style="color: #717c8d; font-weight: 400"
+                >
+                  协同人员：<span
+                    v-for="(tname, tIndex) in TnameCheck
+                      ? Tname
+                      : Tname.slice(0, 6)"
+                    :key="tIndex"
+                    style="margin: 0 5px; font-weight: 400; color: #0e1e33"
+                    >{{ tname }}</span
+                  ><span
+                    style="margin: 0 5px; font-weight: 400; color: #b2b2b2"
+                    v-if="!TnameCheck && Tname.length > 6"
+                    >更多....</span
+                  >
                 </div>
               </div>
-              <div class="cType" style="font-size: 18px; color: #6c6c6c">
-              </div>
+              <div class="cType" style="font-size: 18px; color: #6c6c6c"></div>
               <div class="btnBox" v-if="false">
-                <div class="now_study" @click="dialogVisible = true">
-                  预览
-                </div>
+                <div class="now_study" @click="dialogVisible = true">预览</div>
                 <div class="now_study" @click="goToCongress">进展</div>
               </div>
             </div>
@@ -77,36 +111,92 @@
           </div>
           <div :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'">
             <div class="checkBox">
-              <span :class="{ active: type == 1 }" @click="type = 1">阶段选择</span>
-              <span :class="{ active: type == 2 }" @click="type = 2">项目进展</span>
+              <span :class="{ active: type == 1 }" @click="type = 1"
+                >阶段选择</span
+              >
+              <span :class="{ active: type == 2 }" @click="type = 2"
+                >项目进展</span
+              >
             </div>
-            <div :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'" v-show="type == 1">
-              <div class="blue_box_one" v-for="(item, index) in chapInfo" :key="index" @click="addUserRate(index)">
+            <div
+              :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'"
+              v-show="type == 1"
+              style="width: 100%; padding-top: 20px"
+            >
+              <!-- <div class="blue_box_one" v-for="(item, index) in chapInfo" :key="index" @click="addUserRate(index)">
                 <div>第{{ index + 1 }}阶段</div>
                 <div :title="item.dyName">{{ item.dyName }}</div>
                 <div>{{ item.chapterInfo[0].taskJson.length }}个任务</div>
+              </div> -->
+              <div
+                class="courseItem"
+                v-for="(item, index) in chapInfo"
+                :key="index"
+                @click="addUserRate(index)"
+              >
+                <div class="jdAndTask">
+                  <div>第{{ index + 1 }}阶段</div>
+                  <div :title="item.dyName">
+                    {{ item.dyName }}
+                  </div>
+                </div>
+                <div style="font-size: 14px; font-weight: 400; color: 3681FC">
+                  {{ item.chapterInfo[0].taskJson.length }}个任务
+                </div>
               </div>
             </div>
-            <div :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'" v-if="type == 2">
-              <courseProgress :cid="id" :userid="userid" :oid="oid" :org="org"></courseProgress>
+            <div
+              :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'"
+              v-if="type == 2"
+            >
+              <courseProgress
+                :cid="id"
+                :userid="userid"
+                :oid="oid"
+                :org="org"
+              ></courseProgress>
             </div>
           </div>
         </div>
 
-        <el-dialog title="阶段选择" :visible.sync="dialogVisible" :append-to-body="true" width="700px"
-          :before-close="handleClose" class="dialog_change">
+        <el-dialog
+          title="阶段选择"
+          :visible.sync="dialogVisible"
+          :append-to-body="true"
+          width="700px"
+          :before-close="handleClose"
+          class="dialog_change"
+        >
           <div style="font-size: 20px">请选择阶段</div>
-          <div style="
+          <div
+            style="
               padding: 20px 30px;
               display: flex;
               flex-direction: row;
               flex-wrap: wrap;
-            ">
-            <div class="blue_box" v-for="(item, index) in chapInfo" :key="index" @click="addUserRate(index)">
+            "
+          >
+            <div
+              class="courseItem"
+              v-for="(item, index) in chapInfo"
+              :key="index"
+              @click="addUserRate(index)"
+            >
+              <div class="jdAndTask">
+                <div>第{{ index + 1 }}阶段</div>
+                <div :title="item.dyName">
+                  {{ item.dyName }}
+                </div>
+              </div>
+              <div style="font-size: 14px; font-weight: 400; color: 3681FC">
+                {{ item.chapterInfo[0].taskJson.length }}个任务
+              </div>
+            </div>
+            <!-- <div class="blue_box" v-for="(item, index) in chapInfo" :key="index" @click="addUserRate(index)">
               <div>第{{ index + 1 }}阶段</div>
               <div>{{ item.dyName }}</div>
               <div>{{ item.chapterInfo[0].taskJson.length }}个任务</div>
-            </div>
+            </div> -->
           </div>
         </el-dialog>
       </div>
@@ -115,13 +205,13 @@
 </template>
 
 <script>
-import Heatmap from '../tools/heatmap.vue'
-import courseProgress from './courseProgress.vue'
+import Heatmap from "../tools/heatmap.vue";
+import courseProgress from "./courseProgress.vue";
 
 export default {
   components: {
     Heatmap,
-    courseProgress
+    courseProgress,
   },
   data() {
     return {
@@ -157,14 +247,15 @@ export default {
       this.$router.push(path);
     },
     goToCongress() {
-      window.location.href = 'https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/courseProgress?cid=' +
+      window.location.href =
+        "https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/courseProgress?cid=" +
         this.id +
-        '&userid=' +
+        "&userid=" +
         this.userid +
-        '&oid=' +
+        "&oid=" +
         this.oid +
-        '&org=' +
-        this.org
+        "&org=" +
+        this.org;
     },
     addUserRate(i) {
       // var suid = this.userid;
@@ -205,23 +296,23 @@ export default {
       //     this.updateVc();
       this.goTo(
         "/studyStudentS?type=" +
-        i +
-        "&courseId=" +
-        this.id +
-        "&userid=" +
-        this.userid +
-        "&oid=" +
-        this.oid +
-        "&org=" +
-        this.org +
-        "&cid=" +
-        this.classId +
-        '&role=' +
-        this.role +
-        "&tType=" +
-        this.tType +
-        "&screenType=" +
-        this.screenType
+          i +
+          "&courseId=" +
+          this.id +
+          "&userid=" +
+          this.userid +
+          "&oid=" +
+          this.oid +
+          "&org=" +
+          this.org +
+          "&cid=" +
+          this.classId +
+          "&role=" +
+          this.role +
+          "&tType=" +
+          this.tType +
+          "&screenType=" +
+          this.screenType
       );
 
       // })
@@ -283,7 +374,6 @@ export default {
             this.rw += this.chapInfo[z].chapterInfo[0].taskJson.length;
           }
 
-
           // debugger
         })
         .catch((err) => {
@@ -360,8 +450,8 @@ export default {
   height: 16px;
 }
 
-.wheel>img,
-.man>img {
+.wheel > img,
+.man > img {
   width: 100%;
   height: 100%;
 }
@@ -380,8 +470,9 @@ export default {
 }
 
 .right_box_title {
-  font-size: 23px;
-  max-width: calc(100% - 190px);
+  font-size: 20px;
+  font-weight: bold;
+  max-width: calc(100% - 250px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -410,7 +501,7 @@ export default {
   margin-top: 30px;
 }
 
-.now_study+.now_study {
+.now_study + .now_study {
   margin-left: 10px;
 }
 
@@ -424,7 +515,7 @@ export default {
   cursor: pointer;
 }
 
-.choose_who>div:nth-child(2) {
+.choose_who > div:nth-child(2) {
   margin-left: 35px;
 }
 
@@ -470,7 +561,7 @@ export default {
   overflow: hidden;
 }
 
-.Img>img {
+.Img > img {
   width: 100%;
   height: 100%;
 }
@@ -493,7 +584,7 @@ export default {
   margin: auto 10px;
 }
 
-.student>div {
+.student > div {
   width: 12%;
   height: 35px;
   background: #e3759a;
@@ -505,11 +596,11 @@ export default {
   margin: 10px;
 }
 
-.dialog_change>>>.el-dialog {
+.dialog_change >>> .el-dialog {
   border-radius: 5px;
 }
 
-.dialog_change>>>.el-dialog__header {
+.dialog_change >>> .el-dialog__header {
   background: #303030;
   height: 36px;
   line-height: 36px;
@@ -517,18 +608,18 @@ export default {
   padding: 0px 10px 0px;
 }
 
-.dialog_change>>>.el-dialog__headerbtn {
+.dialog_change >>> .el-dialog__headerbtn {
   top: 10px !important;
   right: 10px !important;
 }
 
-.dialog_change>>>.el-dialog__title {
+.dialog_change >>> .el-dialog__title {
   color: #fff;
   font-size: 14px;
   line-height: 5px;
 }
 
-.dialog_change>>>.el-dialog__body {
+.dialog_change >>> .el-dialog__body {
   background: #f5f5f5;
 }
 
@@ -562,20 +653,20 @@ export default {
   justify-content: center;
 }
 
-.blue_box_one>div {
+.blue_box_one > div {
   margin: 5px 0;
 }
 
-.blue_box_one>div:nth-child(1) {
+.blue_box_one > div:nth-child(1) {
   font-size: 20px;
   font-weight: bold;
 }
 
-.blue_box>div:nth-child(2) {
+.blue_box > div:nth-child(2) {
   margin-top: 10px;
 }
 
-.blue_box_one>div:nth-child(2) {
+.blue_box_one > div:nth-child(2) {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -587,22 +678,27 @@ export default {
 }
 
 .return {
-  background: #205cc6;
-  width: 70px;
-  height: 30px;
-  color: #fff;
+  background: #f0f4fa;
+  width: 75px;
+  height: 36px;
+  color: #000;
   text-align: center;
-  line-height: 32px;
+  line-height: 36px;
   margin-right: 20px;
   cursor: pointer;
   border-radius: 5px;
   position: absolute;
-  right: 0;
+  right: 10px;
   top: 24px;
   font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
 }
 
-.return>img {
+.return > img {
   width: 100%;
   height: 100%;
 }
@@ -615,11 +711,12 @@ export default {
   margin-top: 20px;
 }
 
-.cType>div>span {
-  font-size: 18px;
+.cType > div > span {
+  font-weight: 400;
+  color: #717c8d;
 }
 
-.type_children+.type_children {
+.type_children + .type_children {
   margin-left: 10px;
 }
 
@@ -640,21 +737,22 @@ export default {
 }
 
 .jd {
-  background: #4a9eed;
-  margin-left: 15px;
-  border-radius: 10px;
-  color: #fff;
-  width: 70px;
-  height: 25px;
+  background: #f0f0f0;
+  margin-left: 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #3d3d3d;
+  width: 90px;
+  height: 28px;
   text-align: center;
-  line-height: 25px;
+  line-height: 28px;
 }
 
 .sLeft {
-  width: 260px;
+  width: 343px;
   margin-right: 10px;
   background: rgb(255, 255, 255);
-  padding: 20px 15px 0 15px;
+  padding: 20px 20px 0 20px;
   box-sizing: border-box;
   border-radius: 12px;
 }
@@ -695,7 +793,7 @@ export default {
 
 .rightTd,
 .noBRight {
-  width: calc(100% - 270px);
+  width: calc(100% - 28% - 10px);
   background: #fff;
   display: flex;
   flex-direction: row;
@@ -704,6 +802,12 @@ export default {
   align-items: center;
   justify-content: flex-start;
   border-radius: 12px;
+  padding-left: 17px;
+}
+
+.rightTd:nth-child(5n),
+.noBRight:nth-child(5n) {
+  margin-right: 0;
 }
 
 .noBRight {
@@ -727,7 +831,6 @@ export default {
   text-overflow: unset;
 } */
 
-
 .detail {
   width: 100%;
   padding: 15px;
@@ -749,7 +852,7 @@ export default {
   align-items: center;
 }
 
-.statebox div+div {
+.statebox div + div {
   margin-left: 20px;
 }
 
@@ -759,12 +862,11 @@ export default {
   align-items: center;
 }
 
-.statebox div span+span {
+.statebox div span + span {
   margin-left: 10px;
   color: #1463eb;
 }
 
-
 .p_tool_box {
   display: flex;
   flex-wrap: wrap;
@@ -783,19 +885,19 @@ export default {
   margin-top: 10px;
 }
 
-.p_tool>div {
+.p_tool > div {
   display: flex;
   flex-direction: column;
   align-items: center;
   min-width: 60px;
 }
 
-.p_tool>div img {
+.p_tool > div img {
   width: 50px;
   height: 50px;
 }
 
-.p_tool>div>div {
+.p_tool > div > div {
   margin-top: 5px;
   font-size: 12px;
 }
@@ -804,7 +906,6 @@ export default {
   padding: 10px 15px;
 }
 
-
 .p_tool2 {
   margin-right: 20px;
   display: flex;
@@ -813,7 +914,7 @@ export default {
   /* margin-bottom: 10px; */
 }
 
-.p_tool2>div:nth-child(1) {
+.p_tool2 > div:nth-child(1) {
   margin-bottom: 10px;
 }
 
@@ -827,19 +928,19 @@ export default {
   margin: 20px 0 0;
 }
 
-.toolSta>div {
+.toolSta > div {
   display: flex;
 }
 
-.toolSta>div+div {
+.toolSta > div + div {
   margin-left: 50px;
 }
 
-.toolSta>div>div:nth-child(1) {
+.toolSta > div > div:nth-child(1) {
   margin: 10px 10px 0 0;
 }
 
-.toolSta>div>div:nth-child(2)>div {
+.toolSta > div > div:nth-child(2) > div {
   background: rgb(79, 140, 223);
   color: #fff;
   display: flex;
@@ -850,15 +951,15 @@ export default {
   border-radius: 5px;
 }
 
-.toolSta>div:nth-child(2)>div:nth-child(2)>div {
+.toolSta > div:nth-child(2) > div:nth-child(2) > div {
   background: rgb(53, 103, 172);
 }
 
-.toolSta>div>div:nth-child(2)>div+div {
+.toolSta > div > div:nth-child(2) > div + div {
   margin-top: 10px;
 }
 
-.toolSta>div>div:nth-child(2)>div>div+div {
+.toolSta > div > div:nth-child(2) > div > div + div {
   margin: 0 20px;
 }
 
@@ -868,28 +969,6 @@ export default {
   margin-top: 10px;
 }
 
-.checkBox {
-  display: flex;
-  padding: 20px 0 0 20px;
-  box-sizing: border-box;
-  width: 100%;
-}
-
-.checkBox span {
-  padding: 0 10px 5px;
-  cursor: pointer;
-  font-size: 18px;
-}
-
-.checkBox span+span {
-  margin-left: 20px;
-}
-
-.checkBox .active {
-  border-bottom: 2px solid rgb(75, 151, 229);
-  cursor: pointer;
-}
-
 .detail_box {
   background-color: rgb(231, 240, 247);
   padding: 15px 20px;
@@ -897,17 +976,16 @@ export default {
   width: 100%;
 }
 
-.detail_box+.detail_box {
+.detail_box + .detail_box {
   margin-top: 20px;
 }
 
 .detail_box .title {
   display: flex;
   align-items: center;
-
 }
 
-.detail_box .title>span:nth-child(1) {
+.detail_box .title > span:nth-child(1) {
   font-size: 20px;
   display: flex;
   align-items: center;
@@ -921,7 +999,6 @@ export default {
   /* width: 100%; */
   box-sizing: border-box;
   overflow: auto;
-
 }
 
 .progress {
@@ -936,7 +1013,7 @@ export default {
   margin-right: 10px;
 }
 
-.chapter+.chapter {
+.chapter + .chapter {
   padding-left: 10px;
   border-left: 1px solid rgb(220, 220, 220);
 }
@@ -963,17 +1040,17 @@ export default {
   height: 100%;
 }
 
-.chapter .task .taskBox+.taskBox {
+.chapter .task .taskBox + .taskBox {
   margin-left: 10px;
 }
 
 .chapter .task .taskBox .taskName {
   text-align: center;
-  margin: 10px
+  margin: 10px;
 }
 
 .toolIcon::before {
-  content: '';
+  content: "";
   width: 26px;
   height: 26px;
   display: inline-block;
@@ -982,7 +1059,7 @@ export default {
 }
 
 .toolIcon::before {
-  content: '';
+  content: "";
   width: 26px;
   height: 26px;
   display: inline-block;
@@ -991,7 +1068,7 @@ export default {
 }
 
 .taskIcon::before {
-  content: '';
+  content: "";
   width: 26px;
   height: 26px;
   display: inline-block;
@@ -1000,7 +1077,7 @@ export default {
 }
 
 .finishIcon::before {
-  content: '';
+  content: "";
   width: 26px;
   height: 26px;
   display: inline-block;
@@ -1009,7 +1086,7 @@ export default {
 }
 
 .learningIcon::before {
-  content: '';
+  content: "";
   width: 22px;
   height: 22px;
   display: inline-block;
@@ -1018,7 +1095,7 @@ export default {
 }
 
 .frequencyIcon::before {
-  content: '';
+  content: "";
   width: 26px;
   height: 26px;
   display: inline-block;
@@ -1027,7 +1104,7 @@ export default {
 }
 
 .timeIcon::before {
-  content: '';
+  content: "";
   width: 26px;
   height: 26px;
   display: inline-block;
@@ -1035,7 +1112,6 @@ export default {
   background-size: 100% 100%;
 }
 
-
 .chapter_time_box {
   border-left: 5px solid #f0f0f0;
   padding: 0 30px;
@@ -1069,7 +1145,7 @@ export default {
 }
 
 .c_box .stage_box .yuan::before {
-  content: '';
+  content: "";
   width: 15px;
   height: 15px;
   background: rgb(59, 149, 238);
@@ -1089,7 +1165,7 @@ export default {
 
 .s_up {
   cursor: pointer;
-  transition: all .5s;
+  transition: all 0.5s;
 }
 
 .s_up img {
@@ -1112,17 +1188,75 @@ export default {
 }
 
 .checkBox span {
-  padding: 0 10px 5px;
+  padding: 0 5px 5px;
   cursor: pointer;
   font-size: 18px;
+  font-weight: 400;
 }
 
-.checkBox span+span {
+.checkBox span + span {
   margin-left: 20px;
 }
 
 .checkBox .active {
-  border-bottom: 2px solid rgb(75, 151, 229);
+  border-bottom: 3px solid #3681fc;
+  color: #3681fc;
+  font-weight: bold;
+}
+
+.courseItem {
+  width: 299px;
+  height: 70px;
+  background: #ddebf8;
+  border-radius: 8px;
+  margin-right: 16px;
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 20px;
   cursor: pointer;
 }
+
+.jdAndTask {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.jdAndTask > div:nth-child(1) {
+  font-size: 18px;
+  font-weight: bold;
+  color: #000;
+  margin-bottom: 10px;
+}
+
+.jdAndTask > div:nth-child(2) {
+  font-size: 14px;
+  font-weight: 400;
+  color: #000;
+  max-width: 180px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  width: 180px;
+}
+
+.returnIndexImg {
+  width: 18px;
+  margin: 0 7px 0 0;
+  height: auto;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.returnIndexImg > img {
+  width: 100%;
+}
 </style>