修改课程显示样式

src/components/pages/course.vue

@@ -3,29 +3,33 @@
     <div class="pb_head top">
       <div>
         <span>项目管理</span>
-        <span class="subClick" @click="
-          goTo(
-            '/works?userid=' +
-                  userid +
-                  '&oid=' +
-                  oid +
-                  '&org=' +
-                  org
-          )
-        ">评价管理</span>
+        <span
+          class="subClick"
+          @click="
+            goTo('/works?userid=' + userid + '&oid=' + oid + '&org=' + org)
+          "
+          >评价管理</span
+        >
       </div>
       <div class="student_button">
-        <el-button type="primary" class="bgColor" @click="openCourse">协同编辑</el-button>
-        <el-button type="primary" class="bgColor" @click="
-          goTo(
-            '/course/addCourse?userid=' +
-              userid +
-              '&oid=' +
-              oid +
-              '&org=' +
-              org
-          )
-        ">添加项目</el-button>
+        <el-button type="primary" class="bgColor" @click="openCourse"
+          >协同编辑</el-button
+        >
+        <el-button
+          type="primary"
+          class="bgColor"
+          @click="
+            goTo(
+              '/course/addCourse?userid=' +
+                userid +
+                '&oid=' +
+                oid +
+                '&org=' +
+                org
+            )
+          "
+          >添加项目</el-button
+        >
       </div>
     </div>
     <div class="pb_content_body" style="height: 100%">
@@ -38,11 +42,24 @@
               <el-option value="1" label="他人项目"></el-option>
             </el-select>
           </div>
-          <div class="all_choose" v-for="(item, index) in CourseType[0]" :key="index">
+          <div
+            class="all_choose"
+            v-for="(item, index) in CourseType[0]"
+            :key="index"
+          >
             <span>{{ item.name }}</span>
-            <el-select v-model="courseTypeId[item.id]" placeholder="请选择" @change="getTypeName">
+            <el-select
+              v-model="courseTypeId[item.id]"
+              placeholder="请选择"
+              @change="getTypeName"
+            >
               <el-option label="全部" value="1">全部</el-option>
-              <el-option v-for="item1 in CourseTypeJson[item.id]" :key="item1.id" :label="item1.name" :value="item1.id">
+              <el-option
+                v-for="item1 in CourseTypeJson[item.id]"
+                :key="item1.id"
+                :label="item1.name"
+                :value="item1.id"
+              >
               </el-option>
             </el-select>
           </div>
@@ -51,8 +68,14 @@
 
         <div class="student_right">
           <div class="head_left">
-            <el-input v-model="courseName" class="student_input" placeholder="请输入项目名称"></el-input>
-            <el-button class="course_button" @click="searchCourse">查询</el-button>
+            <el-input
+              v-model="courseName"
+              class="student_input"
+              placeholder="请输入项目名称"
+            ></el-input>
+            <el-button class="course_button" @click="searchCourse"
+              >查询</el-button
+            >
           </div>
         </div>
       </div>
@@ -62,13 +85,16 @@
             <div class="myCourse" v-if="item.isCourseType == 1">我的项目</div>
             <div class="xtCourse" v-else>协同项目</div>
             <div class="tup">
-              <img :src="
-                item.cover != null && item.cover != ''
-                  ? JSON.parse(item.cover).length > 0
-                    ? JSON.parse(item.cover)[0].url
+              <img
+                :src="
+                  item.cover != null && item.cover != ''
+                    ? JSON.parse(item.cover).length > 0
+                      ? JSON.parse(item.cover)[0].url
+                      : mr
                     : mr
-                  : mr
-              " alt />
+                "
+                alt
+              />
             </div>
             <!-- <div class="bottom_box">
               <div>{{ item.title }}</div>
@@ -79,37 +105,44 @@
             </div> -->
             <div class="bottom_box">
               <div>{{ item.title }}</div>
-              <div class="kc_t" v-if="item.isCourseType == 2">创建老师：{{ item.uname }}</div>
+              <div class="kc_t" v-if="item.isCourseType == 2">
+                创建老师：{{ item.uname }}
+              </div>
               <div class="kc_time">{{ item.time }}</div>
             </div>
             <div class="three_bottom">
               <div @click="jump(item.courseId)">评课</div>
-              <div v-if="groupA == '0'" @click="
-                goTo(
-                  '/course/addCourse?cid=' +
-                    item.courseId +
-                    '&userid=' +
-                    userid +
-                    '&oid=' +
-                    oid +
-                    '&org=' +
-                    org
-                )
-              ">
+              <div
+                v-if="groupA == '0'"
+                @click="
+                  goTo(
+                    '/course/addCourse?cid=' +
+                      item.courseId +
+                      '&userid=' +
+                      userid +
+                      '&oid=' +
+                      oid +
+                      '&org=' +
+                      org
+                  )
+                "
+              >
                 修改
               </div>
-              <div @click="
-                goTo(
-                  '/works?cid=' +
-                    item.courseId +
-                    '&userid=' +
-                    userid +
-                    '&oid=' +
-                    oid +
-                    '&org=' +
-                    org
-                )
-              ">
+              <div
+                @click="
+                  goTo(
+                    '/works?cid=' +
+                      item.courseId +
+                      '&userid=' +
+                      userid +
+                      '&oid=' +
+                      oid +
+                      '&org=' +
+                      org
+                  )
+                "
+              >
                 报告
               </div>
               <div @click="deleteCourse(item.courseId)">删除</div>
@@ -120,14 +153,27 @@
       </div>
     </div>
     <div class="student_page">
-      <el-pagination background layout="prev, pager, next" :page-size="10" :total="total" v-if="page && course.length"
-        style="padding-bottom: 20px" @current-change="handleCurrentChange"></el-pagination>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :page-size="10"
+        :total="total"
+        v-if="page && course.length"
+        style="padding-bottom: 20px"
+        @current-change="handleCurrentChange"
+      ></el-pagination>
     </div>
     <el-dialog :visible.sync="dialogVisible1" size="tiny">
       <img width="100%" :src="dialogImageUrl" alt />
     </el-dialog>
-    <el-dialog title="查看提问" :visible.sync="dialogVisible" :append-to-body="true" width="750px"
-      :before-close="handleClose" class="dialog_diy">
+    <el-dialog
+      title="查看提问"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="750px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
       <div>
         <div class="a_addBox">
           <CourseProblem :problemCourse="problemCourse"></CourseProblem>
@@ -137,18 +183,32 @@
         <el-button @click="dialogVisible = false">关 闭</el-button>
       </span>
     </el-dialog>
-    <el-dialog title="查看协同项目" :visible.sync="dialogVisibleCourse" :append-to-body="true" width="850px"
-      :before-close="handleClose" class="dialog_diy">
+    <el-dialog
+      title="查看协同项目"
+      :visible.sync="dialogVisibleCourse"
+      :append-to-body="true"
+      width="850px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
       <div class="ct_box">
-        <div class="out_box" v-for="(item, index) in courseTeam" :key="index" style="margin-left: 15px">
+        <div
+          class="out_box"
+          v-for="(item, index) in courseTeam"
+          :key="index"
+          style="margin-left: 15px"
+        >
           <div class="tup">
-            <img :src="
-              item.cover != null && item.cover != ''
-                ? JSON.parse(item.cover).length > 0
-                  ? JSON.parse(item.cover)[0].url
+            <img
+              :src="
+                item.cover != null && item.cover != ''
+                  ? JSON.parse(item.cover).length > 0
+                    ? JSON.parse(item.cover)[0].url
+                    : mr
                   : mr
-                : mr
-            " alt />
+              "
+              alt
+            />
           </div>
           <div class="bottom_box">
             <div>{{ item.title }}</div>
@@ -157,18 +217,20 @@
           </div>
           <div class="three_bottom">
             <div @click="jump(item.courseId)">查看内容</div>
-            <div @click="
-              goTo(
-                '/course/addCourse?cid=' +
-                  item.courseId +
-                  '&userid=' +
-                  userid +
-                  '&oid=' +
-                  oid +
-                  '&org=' +
-                  org
-              )
-            ">
+            <div
+              @click="
+                goTo(
+                  '/course/addCourse?cid=' +
+                    item.courseId +
+                    '&userid=' +
+                    userid +
+                    '&oid=' +
+                    oid +
+                    '&org=' +
+                    org
+                )
+              "
+            >
               编辑
             </div>
           </div>
@@ -301,7 +363,7 @@ export default {
       this.page = val;
       this.getCourse();
     },
-    init() { },
+    init() {},
     handleClose(done) {
       done();
     },
@@ -580,28 +642,28 @@ export default {
 </script>
 
 <style scoped>
-.dialog_diy>>>.el-dialog__header {
+.dialog_diy >>> .el-dialog__header {
   background: #3d67bc !important;
   padding: 15px 20px;
 }
 
-.dialog_diy>>>.el-dialog__title {
+.dialog_diy >>> .el-dialog__title {
   color: #fff;
 }
 
-.dialog_diy>>>.el-dialog__headerbtn {
+.dialog_diy >>> .el-dialog__headerbtn {
   top: 19px;
 }
 
-.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
   color: #fff;
 }
 
-.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
   color: #fff;
 }
 
-.student_head>>>.el-button--primary {
+.student_head >>> .el-button--primary {
   background-color: #2268bc;
 }
 
@@ -667,7 +729,7 @@ export default {
   align-items: center;
 }
 
-.el-table>>>.even_row {
+.el-table >>> .even_row {
   background-color: #f1f1f1;
 }
 
@@ -779,7 +841,7 @@ export default {
   justify-content: center;
 }
 
-.el_cards>>>.el-card__body {
+.el_cards >>> .el-card__body {
   height: 100%;
 }
 
@@ -795,7 +857,7 @@ export default {
   display: flex;
 }
 
-.wordUpload>.buttonUp {
+.wordUpload > .buttonUp {
   margin-right: 5px;
 }
 
@@ -820,9 +882,12 @@ export default {
   padding: 10px 0 10px 10px;
   flex-direction: column;
   box-sizing: border-box;
+  height: 91px;
+  flex-wrap: nowrap;
+  justify-content: space-evenly;
 }
 
-.bottom_box>div:nth-child(1) {
+.bottom_box > div:nth-child(1) {
   width: 230px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -838,7 +903,7 @@ export default {
   align-items: center;
 }
 
-.tup>img {
+.tup > img {
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -864,11 +929,11 @@ export default {
   font-size: 14px;
 }
 
-.three_bottom>div {
+.three_bottom > div {
   cursor: pointer;
 }
 
-.three_bottom>div:hover {
+.three_bottom > div:hover {
   color: #79a2ff;
 }
 
@@ -876,7 +941,7 @@ export default {
   display: flex;
 }
 
-.student_input>>>.el-input__inner {
+.student_input >>> .el-input__inner {
   height: 40px;
   width: 190px;
   font-size: 13px;
@@ -902,7 +967,7 @@ export default {
   width: calc(100% / 3);
 }
 
-.all_choose>span {
+.all_choose > span {
   width: 50px;
   display: block;
 }
@@ -919,26 +984,26 @@ export default {
   align-items: center;
 }
 
-.choose>div:nth-child(2) {
+.choose > div:nth-child(2) {
   margin-left: 1%;
   width: 32.33333%;
 }
 
-.choose>div:nth-child(4) {
+.choose > div:nth-child(4) {
   margin-right: 1%;
   width: 32.33333%;
 }
 
-.choose>div:nth-child(5) {
+.choose > div:nth-child(5) {
   margin: 5px 0 0 1%;
 }
 
-.choose>div:nth-child(4)>span {
+.choose > div:nth-child(4) > span {
   width: 74px !important;
   min-width: 74px;
 }
 
-.choose>div:nth-child(4)>>>.el-select {
+.choose > div:nth-child(4) >>> .el-select {
   width: 217.5px;
   min-width: 215.06px;
 }
@@ -990,7 +1055,6 @@ export default {
   left: 5px;
 }
 
-
 .subClick {
   font-size: 16px;
   cursor: pointer;