pbl-teacher-table/src/components/pages/worksDetail.vue

<template>
  <div class="pb_content" style="background: unset">
    <div
      class="pb_content_body"
      style="
        background: #fff;
        padding: 0px 25px;
        box-sizing: border-box;
        border-radius: 5px;
      "
    >
      <div class="pb_head">
        <span>评价管理</span>
        <!-- <span>备注：教师可以根据课程、班级条件筛选学生并查看该学生信息</span> -->
      </div>
      <div class="student_head">
        <div style="padding: 10px 0px 20px 0">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{ path: '/works?userid=' + userid + '&oid=' + oid }"
              >评价管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>作业管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="student_search">
          <div>项目筛选</div>
          <!-- <el-select
						v-model="subject"
						placeholder="请选择课程"
						@change="searchWork"
					>
						<el-option label="所有课程" value=""></el-option>
						<el-option
							v-for="(item, index) in subjectJuri"
							:key="index"
							:label="item.name"
							:value="item.id"
						></el-option>
					</el-select> -->
          <el-select
            v-model="sClass"
            placeholder="请选择班级"
            @change="searchWork"
          >
            <el-option label="所有班级" value=""></el-option>
            <el-option
              v-for="(item, index) in grade"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="pb_content_body">
      <div class="student_table">
        <el-table
          ref="table"
          :data="tableData"
          border
          :height="tableHeight"
          :fit="true"
          v-loading="isLoading"
          style="width: 100%"
          :header-cell-style="{ background: '#f1f1f1' }"
          :row-class-name="tableRowClassName"
          stripe
        >
          <el-table-column
            prop="sName"
            label="姓名"
            min-width="15"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="class"
            label="班级"
            min-width="20"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="course"
            label="项目"
            min-width="20"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="time"
            label="时间"
            min-width="15"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" min-width="30">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="lookWork(scope.row.id, scope.row.userid)"
                >查看作业</el-button
              >
              <el-button
                class="de_button"
                type="primary"
                size="small"
                @click="deleteWork(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          :visible.sync="dialogVisible3"
          :append-to-body="true"
          :before-close="handleClose"
          class="add_work"
        >
          <div class="zyBox">
            <div class="left">
              <div class="courseTitle">
                {{
                  chapInfo[publicIndex] != null &&
                  chapInfo[publicIndex].dyName != null &&
                  chapInfo[publicIndex].dyName != ""
                    ? chapInfo[publicIndex].dyName
                    : "暂无内容"
                }}
              </div>

              <div class="bigImg" v-if="tType == 0">
                <video-player
                  class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerO"
                  @play="onPlayerPlay($event)"
                  style="width: 100%; height: 100%"
                ></video-player>
              </div>
              <div class="bigImg" v-else>
                <img
                  :src="
                    thumbnail.length > 0 && thumbnail[1].length > 0
                      ? thumbnail[1][0].url
                      : ''
                  "
                  alt=""
                />
              </div>
              <div class="thumbnail">
                <div
                  style="background: #a3d4ff"
                  :class="tType == 0 ? 'isClick' : ''"
                >
                  <img
                    src="../../assets/icon/spIcon.png"
                    alt=""
                    @click="tType = 0"
                  />
                </div>
                <div :class="tType == 1 ? 'isClick' : ''">
                  <img
                    :src="
                      thumbnail.length > 0 && thumbnail[1].length > 0
                        ? thumbnail[1][0].url
                        : ''
                    "
                    alt=""
                    @click="tType = 1"
                  />
                </div>
              </div>
              <div style="margin: 5px 10px">{{ sInfo.course }}</div>
              <div class="student_Answer">
                <div class="toux">
                  <img :src="sInfo.tx != null ? sInfo.tx : tx" alt="" />
                </div>
                <div class="nav">
                  <div class="studentName">{{ sInfo.sName }}</div>
                  <div class="studentAnswer">
                    {{
                      chapInfo[publicIndex] != null &&
                      chapInfo[publicIndex].content != null &&
                      chapInfo[publicIndex].content != ""
                        ? chapInfo[publicIndex].content
                        : "暂无内容"
                    }}
                    <!-- 雨荒深院菊，霜倒半池莲.唐杜甫《宿赞公房》 -->
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="comment">
                <div class="comment_title">
                  评论<span>({{ this.commentCount }})</span>
                </div>
                <div class="other_Answer">暂无学生评论</div>
                <!-- <div class="other_Answer">
									<div class="toux">
										<img src="../../assets/portal.png" alt="" />
									</div>
									<div class="nav">
										<div class="nameAndTime">
											<div class="otherName">{{ this.commentName }}</div>
											<div class="time">{{ this.commentTime }}</div>
										</div>
										<div class="otherAnswer">{{ this.commentAnswer }}</div>
									</div>
								</div> -->
              </div>
              <div
                class="lastTop"
                style="
                  width: 100%;
                  padding: 5px 0px 0px;
                  box-sizing: border-box;
                  height: 225px;
                  margin-top: 10px;
                  box-shadow: none;
                "
              >
                <div class="moreSay">更多评价</div>
                <div class="more_say_input">
                  <el-input
                    type="textarea"
                    placeholder="还有要说的吗..."
                    :rows="8"
                    resize="none"
                    v-model="rateList.content"
                    :readonly="
                      rateParams[5] != '' && rateParams[5] != undefined
                    "
                    style="background: #fafafa"
                  ></el-input>
                </div>
              </div>
            </div>
            <div style="width: 290px">
              <div
                class="sd_score"
                style="box-sizing: border-box; width: 100%; box-shadow: none"
              >
                <div class="score_box">
                  <span>意识能力</span
                  ><el-rate
                    v-model="rateList.ca"
                    :disabled="
                      rateParams[5] != '' && rateParams[5] != undefined
                    "
                  ></el-rate>
                </div>
                <div class="score_box">
                  <span>科学探究能力</span
                  ><el-rate
                    v-model="rateList.sia"
                    :disabled="
                      rateParams[5] != '' && rateParams[5] != undefined
                    "
                  ></el-rate>
                </div>
                <div class="score_box">
                  <span>实践创新能力</span
                  ><el-rate
                    v-model="rateList.eta"
                    :disabled="
                      rateParams[5] != '' && rateParams[5] != undefined
                    "
                  ></el-rate>
                </div>
                <div class="score_box">
                  <span>学习反思能力</span
                  ><el-rate
                    v-model="rateList.pia"
                    :disabled="
                      rateParams[5] != '' && rateParams[5] != undefined
                    "
                  ></el-rate>
                </div>
                <div class="score_box">
                  <span>工程思维能力</span
                  ><el-rate
                    v-model="rateList.lra"
                    :disabled="
                      rateParams[5] != '' && rateParams[5] != undefined
                    "
                  ></el-rate>
                </div>
              </div>
              <div class="data_body">
                <div class="title">
                  <span>量规评分</span>
                </div>
                <div style="width: 100%">
                  <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
                  <div
                    id="charts_canvas"
                    class="echart"
                    style="width: 100%; height: 100%; margin: 0 0 0 1rem"
                  ></div>
                </div>
              </div>
            </div>
            <!-- <div class="rbButtom" @click="giveScore">评分</div> -->
            <div class="rbButtom" @click="updateWorks">评分</div>
          </div>
        </el-dialog>
        <el-dialog
          :visible.sync="dialogVisible2"
          :append-to-body="true"
          width="700px"
          :before-close="handleClose"
          class="add_work talkScore"
        >
          <div slot="title" class="header-title">
            <!-- <div class="logoImg">
              <img src="../../assets/logo.png" alt="" />
            </div> -->
            <div class="title_add_student">"评分"</div>
          </div>
          <div class="firstTop">
            <div class="score_top">
              <div class="userTou">
                <img :src="sInfo.tx != null ? sInfo.tx : tx" alt="" />
              </div>
              <div class="score_user_name">{{ sInfo.sName }}</div>
            </div>
            <div class="course_top">
              <div>课程名称</div>
              <div>
                {{
                  chapInfo[publicIndex] != null
                    ? chapInfo[publicIndex].dyName
                    : "暂无课程"
                }}
              </div>
            </div>
          </div>

          <div class="sd_score">
            <div class="score_box">
              <span>意识能力</span
              ><el-rate
                v-model="rateList.ca"
                :disabled="rateParams[5] != '' && rateParams[5] != undefined"
              ></el-rate>
            </div>
            <div class="score_box">
              <span>科学探究能力</span
              ><el-rate
                v-model="rateList.sia"
                :disabled="rateParams[5] != '' && rateParams[5] != undefined"
              ></el-rate>
            </div>
            <div class="score_box">
              <span>实践创新能力</span
              ><el-rate
                v-model="rateList.eta"
                :disabled="rateParams[5] != '' && rateParams[5] != undefined"
              ></el-rate>
            </div>
            <div class="score_box">
              <span>学习反思能力</span
              ><el-rate
                v-model="rateList.pia"
                :disabled="rateParams[5] != '' && rateParams[5] != undefined"
              ></el-rate>
            </div>
            <div class="score_box">
              <span>工程思维能力</span
              ><el-rate
                v-model="rateList.lra"
                :disabled="rateParams[5] != '' && rateParams[5] != undefined"
              ></el-rate>
            </div>
          </div>
          <div class="lastTop">
            <div class="moreSay">更多评价</div>
            <div class="more_say_input">
              <el-input
                type="textarea"
                placeholder="还有要说的吗..."
                :rows="3"
                resize="none"
                v-model="rateList.content"
                :readonly="rateParams[5] != '' && rateParams[5] != undefined"
                style="background: #fafafa"
              ></el-input>
            </div>
          </div>

          <div class="assess_right" @click="updateWorks" v-if="!uploadBoolean">
            提交
          </div>
          <div class="assess_right" @click="updateWorks" v-else>提交</div>
        </el-dialog>
      </div>
      <div class="student_page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          v-if="page"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="pictureDialog" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableHeight: "500px",
      isLoading: false,
      id: this.$route.query.cid,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      formLabelWidth: "100px",
      dialogImageUrl: "",
      pictureDialog: false,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      courseByUser: "诗词中的植物",
      userName: "林点",
      answerName: "宿赞公房",
      studentAnswer: "雨荒深院菊,霜倒半池莲.唐杜甫《宿赞公房》",
      commentCount: 0,
      publicIndex: 0,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: "", //url地址require("../../assets/media/aaa.mp4")
          },
        ],
        // poster: require("../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerO: {},
      commentName: "谭子松",
      commentTime: "2021/2/5",
      commentAnswer:
        "作为家长我很高兴看到孩子的进步，希望这个进步只是一个开始，在新学期能够继续延续，这样才能不负老师的期望",
      tableData: [],
      uploadBoolean: false,
      studentMessage: [],
      subject: "",
      sClass: "",
      subjectJuri: [],
      projectJuri: [],
      grade: [],
      mr: require("../../assets/icon/wheel.png"),
      tx: require("../../assets/portal.png"),
      projectchoose: "",
      scopeId: "",
      thumbnail: [],
      rateList: {
        ca: 0,
        sia: 0,
        eta: 0,
        pia: 0,
        lra: 0,
        content: "",
      },
      rateParams: [],
      page: 1,
      total: 0,
      worksDetail: [],
      suserId: "",
      sInfo: {},
      chapInfo: [],
      vedio: [],
      file: [],
      tType: 0,
      chartObj: null,
      ooption: [
        { value: 0, name: "意识能力" },
        { value: 0, name: "科学探究能力" },
        { value: 0, name: "实践创新能力" },
        { value: 0, name: "学习房媳能力" },
        { value: 0, name: "工程思维能力" },
      ],
      option: {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "量规评分",
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            data: [
              { value: 0, name: "意识能力" },
              { value: 0, name: "科学探究能力" },
              { value: 0, name: "实践创新能力" },
              { value: 0, name: "学习房媳能力" },
              { value: 0, name: "工程思维能力" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                label: {
                  show: true,
                  formatter: "{d}%",
                  inside: true,
                  position: "inner",
                },
                labelLine: { show: false },
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
    });
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleClose(done) {
      done();
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getWorks();
    },
    lookWork(id, uid) {
      this.scopeId = id;
      let params = {
        uid: uid,
        cid: this.id,
      };
      this.ajax
        .get(this.$store.state.api + "selectWorksDetail", params)
        .then((res) => {
          this.sInfo = res.data[0][0];
          this.chapInfo = JSON.parse(res.data[0][0].chapters);
          var worksDetail = res.data[1];
          this.chapInfo.filter((value, index, array) => {
            for (var i = 0; i < worksDetail.length; i++) {
              if (index == worksDetail[i].stage) {
                var c = JSON.parse(worksDetail[i].content)[0];
                var d =
                  worksDetail[i].rate != null && worksDetail[i].rate != ""
                    ? JSON.parse(worksDetail[i].rate)
                    : { ca: 0, sia: 0, eta: 0, pia: 0, lra: 0, content: "" };
                var e =
                  worksDetail[i].rate != null && worksDetail[i].rate != ""
                    ? 0
                    : 1;
                value.rateWrong = e;
                value.content = c.content;
                value.rate = d;
                value.cover = c.cover;
                value.upVedio = c.upVedio;
                this.thumbnail.push(value.upVedio);
                this.thumbnail.push(value.cover);
                break;
              }
            }
          });

          this.courseDetail = res.data[0][0];
          this.playerOptions.sources[0].src =
            this.chapInfo[this.publicIndex].upVedio.length > 0
              ? this.chapInfo[this.publicIndex].upVedio[0].url
              : require("../../assets/icon/kc1.png");
          console.log(this.playerOptions.sources[0].src);
          this.playerO = this.playerOptions;
          //   this.dialogVisible = true;
          this.rateList = this.chapInfo[this.publicIndex].rate;
          this.dialogVisible3 = true;

          this.ooption[0].value = this.rateList.ca;
          this.ooption[1].value = this.rateList.sia;
          this.ooption[2].value = this.rateList.eta;
          this.ooption[3].value = this.rateList.pia;
          this.ooption[4].value = this.rateList.lra;
          if (this.chartObj) {
            this.option.series[0].data = this.ooption;
            this.chartObj.setOption(this.option);
          } else {
            this.setChart(this.ooption);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    setChart(option) {
      let _this = this;
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        console.log(_this.option);

        const chartObj = _this.$echarts.init(
          //劳动课程
          // _this.$el.querySelector("#charts_canvas")
          document.getElementById("charts_canvas")
        );
        _this.option.series[0].data = option;
        // 初始化雷达图
        _this.chartObj = chartObj;
        _this.chartObj.setOption(_this.option);
      });
    },
    // doingAssess(index) {
    // 	this.publicIndex = index;
    // 	this.playerOptions.sources[0].src =
    // 		this.chapInfo[this.publicIndex].upVedio.length > 0
    // 			? this.chapInfo[this.publicIndex].upVedio[0].url
    // 			: require("../../assets/icon/kc1.png");
    // 	console.log(this.playerOptions.sources[0].src);
    // 	this.playerO = this.playerOptions;
    // 	this.dialogVisible1 = true;
    // },
    giveScore() {
      this.rateList = this.chapInfo[this.publicIndex].rate;
      this.dialogVisible2 = true;
    },
    //获取班级列表
    getClass() {
      this.isLoading = true;
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectClassBySchool", params)
        .then((res) => {
          this.isLoading = false;
          this.grade = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    //获取分组分类
    getGroup() {
      let params = {};
      this.ajax
        .get(this.$store.state.api + "getGroup", params)
        .then((res) => {
          this.subjectJuri = res.data[0];
          this.projectJuri = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    searchWork() {
      this.page = 1;
      this.getWorks();
    },
    //获取作业
    getWorks() {
      this.isLoading = true;
      var mr = this.mr;
      let params = {
        cn: this.sClass,
        cid: this.id,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getWorks", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    getCourseDetail() {
      const loading = this.$loading.service({
        background: "rgba(255, 255, 255, 0.7)",
        target: document.querySelector(".student_table"),
      });
      let params = {
        courseId: this.id,
      };
      this.ajax
        .get(this.$store.state.api + "selectCourseDetail", params)
        .then((res) => {
          loading.close();
          this.chapInfo = JSON.parse(res.data[0][0].chapters);
          // element.imgUrl = JSON.parse(element.chapters).poster;
        })
        .catch((err) => {
          loading.close();
          console.error(err);
        });
    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.pictureDialog = true;
    },
    updateWorks() {
      let params = {
        rate: this.rateList,
        tuid: this.userid,
        id: this.scopeId,
      };
      this.ajax
        .get(this.$store.state.api + "updateWorks", params)
        .then((res) => {
          this.$message({
            message: "评价成功",
            type: "success",
          });
          this.ooption[0].value = this.rateList.ca;
          this.ooption[1].value = this.rateList.sia;
          this.ooption[2].value = this.rateList.eta;
          this.ooption[3].value = this.rateList.pia;
          this.ooption[4].value = this.rateList.lra;
          if (this.chartObj) {
            this.option.series[0].data = this.ooption;
            this.chartObj.setOption(this.option);
          } else {
            this.setChart(this.ooption);
          }
          // this.uploadBoolean = false;
          // this.dialogVisible2 = false;
        })
        .catch((err) => {
          this.$message.error("评价失败");
          console.error(err);
        });
    },
    switchVideo(media, index) {
      this.playerO = {};
      this.playerOptions.poster = "";
      this.playerOptions.sources[0].src = media;
      this.playerO = this.playerOptions;
    },
    onPlayerPlay() {},
  },
  created() {
    this.page = 1;
    this.getClass();
    this.getGroup();
    this.getWorks();
    // this.getCourseDetail();
  },
};
</script>

<style scoped>
.pb_head > span:nth-child(2) {
  font-size: 16px;
  margin-left: 80px;
  color: #ab582f;
}
.pb_head {
  margin: 0 !important;
  width: 100% !important;
}
.student_page {
  margin-top: 10px;
}
.student_head {
  margin-top: 10px;
  padding-bottom: 15px;
}
.student_search {
  display: flex;
}
.student_search > div:nth-child(1) {
  line-height: 35px;
  font-size: 14px;
}
.student_search >>> .el-input__inner {
  width: 190px;
  height: 35px;
  margin-left: 10px;
}
.student_table >>> .el-table--border td {
  border-right: 0px !important;
}
.add_work >>> .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
  background: #32455b;
}
.add_work >>> .el-dialog__title {
  font-size: 14px !important;
  color: #fff !important;
}
.add_work >>> .el-dialog__headerbtn {
  font-size: 20px !important;
  top: 5px !important;
  right: 8px !important;
}
.add_work >>> .el-form-item__label {
  margin-left: 65px;
}
.add_work >>> .el-form-item {
  display: flex;
}
.add_work >>> .el-form-item__content {
  margin: 0 !important;
}
.add_work >>> .el-dialog__footer {
  text-align: center !important;
}
.add_work >>> .el-dialog {
  min-width: 650px !important;
  width: 1080px;
}
.add_work >>> .el-dialog__body {
  background: #ededed;
}
.header-title {
  display: flex;
}
.logoImg {
  width: 30px;
}
.logoImg > img {
  width: 100%;
  height: 100%;
}
.title_add_student {
  margin: 0 auto;
  color: #fff;
}
.top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}
.top > div:nth-child(1) {
  font-size: 18px;
}
.top > div:nth-child(2) {
  font-size: 14px;
  line-height: 28px;
}
.first {
  margin-top: 25px;
  border-bottom: 1px solid #c5c5c5;
}
.one_top {
  display: flex;
  justify-content: space-between;
}
.one_top > div:nth-child(1) {
  color: #2490bf;
  font-size: 16px;
}
.one_top > button {
  width: 100px;
  background: #24a0a4;
  height: 30px;
  color: #e0e0e0;
  font-size: 13px;
  padding: 0 !important;
}
.work_Img {
  width: 150px;
  margin: 10px 0;
}
.assess_Img {
  width: 400px;
  margin: 0 auto;
  padding: 15px 0;
}
.work_Img > img,
.assess_Img > img {
  width: 100%;
  height: 100%;
}
.work_input {
  border: 1px solid;
  width: 135px;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
  padding: 5px;
}
.poetry {
  margin: 10px 0 15px 0;
}
.assess {
  background: #169bd5 !important;
}
.assess_top {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}
.assess_top > div:nth-child(1) {
  color: #2490bf;
  font-size: 16px;
}
.student_Answer {
  display: flex;
  margin: 5px 10px;
  padding-bottom: 25px;
}
.workName {
  font-size: 18px;
  font-weight: bold;
  margin: 5px 10px;
}
.toux {
  width: 35px;
  margin: auto 0;
  height: 35px;
}
.toux > img {
  width: 100%;
  height: 100%;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  flex-direction: column;
}
.studentName {
  margin-left: 10px;
  font-size: 13px;
}
.studentAnswer {
  font-size: 12px;
  margin: 5px 0 0 10px;
}
.comment {
  /* margin: 20px 0 0 10px;
  overflow: auto;
  height: 75%;
  max-height: 330px; */
  overflow: auto;
  height: 330px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}
.comment > .comment_title {
  font-size: 18px;
}
.comment > .comment_title > span {
  font-size: 14px;
}
.other_Answer {
  display: flex;
  margin: 5px 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
}
.nav {
  margin-left: 5px;
  width: 80%;
}
.nameAndTime {
  display: flex;
}
.otherName {
  font-weight: bold;
  margin-left: 10px;
  font-size: 13px;
}
.time {
  margin-left: 25px;
  font-size: 12px;
  margin-top: 3px;
}
.otherAnswer {
  width: 80%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  font-size: 12px;
  margin: 5px 0 0 10px;
}
.doingAssess {
  margin: 0 auto;
  width: 300px;
  background: #169bd5;
  height: 35px;
  line-height: 35px;
  border-radius: 3px;
  font-size: 13px;
  text-align: center;
  color: #fff;
  margin-top: 30px;
  cursor: pointer;
}
.score_top {
  display: flex;
  margin-bottom: 10px;
}
.userTou {
  width: 50px;
}
.userTou > img {
  width: 100%;
  height: 100%;
}
.score_user_name {
  line-height: 53px;
  margin-left: 15px;
}
.course_top {
  display: flex;
  align-items: center;
}
.course_top > div:nth-child(1) {
  line-height: 25px;
}
.course_top > div:nth-child(2) {
  border: 1px solid #ccc;
  width: 250px;
  text-align: center;
  height: 25px;
  line-height: 25px;
  margin-left: 30px;
}
.sd_score {
  font-size: 15px;
  background: #fff;
  padding: 18px 25px 1px;
  margin-bottom: 15px;
  border-radius: 5px;
  width: 90%;
  box-shadow: 2px 2px 5px #909090;
}
.sd_score .score_box {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.sd_score span {
  width: 100px;
  text-align: justify;
  text-align-last: justify;
  display: block;
  margin-right: 20px;
}
.moreSay {
  margin: 0px 0 5px 20px;
}
.more_say_input {
  margin-left: 20px;
  width: 80%;
}
.more_say_input >>> .el-input__inner {
  height: 75px;
  font-size: 13px;
  padding: 0 0 0 10px;
}
.assess_right {
  width: 200px;
  background: #82b0ee;
  color: #fff;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 13px;
  cursor: pointer;
}
.student_page {
  margin-top: 10px;
}
.display {
  display: none;
}

.firstTop {
  background: #fff;
  display: flex;
  margin-bottom: 15px;
  flex-direction: column;
  align-items: flex-start;
  height: 90px;
  padding: 10px 25px;
  border-radius: 5px;
  width: 90%;
  box-shadow: 2px 2px 5px #909090;
}

.talkScore >>> .el-dialog__body {
  background: #efefef;
  margin: 0 !important;
}

.lastTop {
  background: #fff;
  border-radius: 5px;
  width: 98%;
  height: 120px;
  box-shadow: 2px 2px 5px #909090;
}

.left,
.right {
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.left {
  /* width: 60%;
  margin-right: 10px;
  min-width: 350px;
  min-height: 425px; */
  margin-right: 10px;
  width: 450px;
  min-height: 425px;
}

.right {
  /* width: 40%;
  height: 75%;
  min-width: 230px;
  min-height: 370px; */
  width: 25%;
  margin-right: 10px;
  background: none;
  padding: 0;
}

.courseTitle {
  font-size: 19px;
  font-weight: 600;
}

.bigImg {
  margin-top: 10px;
  height: 300px;
}

.bigImg > img,
.thumbnail > div > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumbnail {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 10px 0;
}

.isClick {
  border: 3px solid #5f89d4;
  border-radius: 5px;
}

.thumbnail > div {
  width: 80px;
  margin-right: 5px;
  cursor: pointer;
}

.zyBox {
  display: flex;
  width: 100%;
  position: relative;
  min-width: 585px;
  min-height: 425px;
}

.rbButtom {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #06a7ff;
  width: 150px;
  height: 30px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  line-height: 30px;
  font-size: 14px;
  cursor: pointer;
  right: 27px;
}

.bigImg >>> .vjs-tech,
.bigImg >>> .video-js {
  height: 300px !important;
}

.el-table >>> .even_row {
  background-color: #f1f1f1;
}

.data_body {
  height: 292px;
  display: flex;
  position: relative;
  border-radius: 5px;
  /* border: 1px solid #eee; */
  /* margin: 10px auto; */
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  background: #fff;
}
.data_body .title {
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>