dy-admin-manager/src/views/liveClassManager/liveClassTwo/components/courseAdjust.vue

<!--  -->
<template>
  <div>
    <save-form
      :inline="true"
      class="searchForm"
      save-key="liveClassManager-courseAdjust"
      @submit="search"
      @reset="onReSet"
      :model="searchForm"
      ref="searchForm"
    >
      <el-form-item prop="shareMode">
        <el-select
          v-model="searchForm.shareMode"
          filterable
          clearable
          placeholder="请选择分享方式"
        >
          <el-option
            v-for="(item, index) in shareModeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="danger">搜索</el-button>
        <el-button type="primary" native-type="reset">重置</el-button>
      </el-form-item>
    </save-form>
    <el-button type="primary" style="margin-bottom: 12px" @click="onAdjustment"
      >批量调整</el-button
    >
    <div class="tableWrap">
      <el-table
        style="width: 100%"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="tableList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          :selectable="isDisabled"
          width="55"
        ></el-table-column>
        <el-table-column align="center" label="课程编号">
          <template slot-scope="scope">
            <div>{{ scope.row.id || "" }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课程名称">
          <template slot-scope="scope">
            <div>{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课程状态">
          <template slot-scope="scope">
            <div>{{ scope.row.status | coursesStatus }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="classDate" label="上课日期">
          <template slot-scope="scope">
            {{ scope.row.classDate | dayjsFormat }}
            {{ scope.row.startClassTime | dayjsFormat("HH:mm") }}~{{
              scope.row.endClassTime | dayjsFormat("HH:mm")
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="分享状态">
          <template slot-scope="scope">
            <div>{{ scope.row.shareMode | shareLiveTypeFilter }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="startClassTime" label="开始时间"></el-table-column>
        <el-table-column align="center" prop="endClassTime" label="结束时间"></el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-dropdown
                trigger="click"
                placement="bottom"
                :hide-on-click="false"
                v-if="scope.row.id"
              >
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" style="width: 100px">
                  <el-dropdown-item
                    style="width: 100px"
                    v-if="
                      scope.row.id &&
                      !scope.row.isSettlement &&
                      scope.row.status != 'UNDERWAY' &&
                      $helpers.permission('courseSchedule/classStartDateAdjust/liveReset')
                    "
                    @click.native="resetClass(scope.row)"
                  >
                    <el-button type="text">调整</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item
                    style="width: 100px"
                    @click.native="
                      () => {
                        if (scope.row.status == 'OVER') {
                          return;
                        } else {
                          startShare(scope.row);
                        }
                      }
                    "
                    v-if="
                      scope.row.id &&
                      $helpers.permission('courseSchedule/updateCourseScheduleShareMode')
                    "
                  >
                    <el-button type="text" :disabled="scope.row.status == 'OVER'"
                      >分享</el-button
                    >
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="
                      scope.row.id &&
                      $helpers.permission('courseSchedule/classStartDateAdjust/liveReset')
                    "
                    @click.native="
                      () => {
                        if (
                          scope.row.status == 'OVER' ||
                          scope.row.shareMode == 'NO_SHARE'
                        ) {
                          return;
                        } else {
                          lookCode(scope.row);
                        }
                      }
                    "
                  >
                    <el-button
                      type="text"
                      :disabled="
                        scope.row.status == 'OVER' || scope.row.shareMode == 'NO_SHARE'
                      "
                      >二维码</el-button
                    >
                  </el-dropdown-item>

                  <el-dropdown-item
                    v-if="
                      scope.row.id &&
                      $helpers.permission('courseShare/queryCourseSharedStudent')
                    "
                    @click.native="
                      () => {
                        if (
                          scope.row.status == 'OVER' ||
                          scope.row.shareMode !== 'PRIVATE'
                        ) {
                          return;
                        } else {
                          gotoShareList(scope.row);
                        }
                      }
                    "
                  >
                    <el-button
                      type="text"
                      :disabled="
                        scope.row.status == 'OVER' || scope.row.shareMode !== 'PRIVATE'
                      "
                      >分享列表</el-button
                    >
                  </el-dropdown-item>

                  <el-dropdown-item
                    @click.native="lookViedoList(scope.row)"
                    v-if="
                      scope.row.videoNum > 0 &&
                      $helpers.permission('courseShare/queryCourseSharedStudent')
                    "
                  >
                    <el-button type="text">回放</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

              <!--  -->
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="adjustmentName" width="800px" :visible.sync="adjustmentVisible">
      <el-form
        :model="adjustmentForm"
        label-position="right"
        label-width="120px"
        ref="adjustmentForm"
        :rules="adjustmentRules"
        :inline="true"
      >
        <el-form-item label="已选择课时数">
          <el-input disabled v-model.trim="adjustmentForm.count"></el-input>
        </el-form-item>

        <!-- <el-form-item label="课程类型" prop="courseType">
          <el-select clearable v-model.trim="adjustmentForm.courseType" disabled>
            <el-option label="线上课" value="ONLINE"></el-option>
            <el-option label="线下课" value="OFFLINE"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="教学地点" v-if="adjustmentForm.courseType == 'OFFLINE'">
          <el-select v-model.trim="adjustmentForm.address" filterable clearable>
            <el-option v-for="(item, index) in schoolList" :key="index" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item> -->
        <br />
        <el-form-item label="排课起始时间" prop="courseTime">
          <el-date-picker
            v-model.trim="adjustmentForm.courseTime"
            :picker-options="pickerOptions()"
            style="width: 200px !important"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
          <el-checkbox style="margin-left: 10px" v-model.trim="adjustmentForm.checked"
            >是否跳过节假日</el-checkbox
          >
        </el-form-item>
      </el-form>
      <div class="WeekWrap">
        <h3 style="margin-bottom: 20px">
          循环次数
          <el-button type="text" style="margin-left: 10px" @click="addWeek"
            >添加</el-button
          >
        </h3>
        <div class="countWrap" style="margin-bottom: 10px">
          <div
            class="countItem"
            style="margin-bottom: 20px"
            v-for="(item, index) in weekList"
            :key="index"
          >
            <span>循环周期:</span>
            <el-select v-model.trim="item.dayOfWeek" filterable clearable>
              <el-option
                v-for="(item, index) in weekDateList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <span style="margin-left: 10px">开始时间</span>
            <el-time-picker
              style="margin-left: 10px"
              placeholder
              v-model.trim="item.startClassTime"
              @change="
                (val) => {
                  changeStartTimes(val, item);
                }
              "
              format="HH:mm"
              value-format="HH:mm"
              :picker-options="{
                selectableRange: '06:00:00 - 21:00:00',
              }"
            ></el-time-picker>
            <span style="margin-left: 10px">结束时间</span>
            <el-time-picker
              style="margin-left: 10px"
              placeholder
              v-model.trim="item.endClassTime"
              format="HH:mm"
              value-format="HH:mm"
              disabled
              :picker-options="{
                selectableRange: '06:00:00 - 21:00:00',
              }"
            ></el-time-picker>
            <el-button
              style="margin-left: 10px"
              type="danger"
              :disabled="index < 1"
              @click="removeWeek(item)"
              icon="el-icon-delete"
              circle
            ></el-button>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adjustmentVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdjustment">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="课程调整"
      width="400px"
      :before-close="handleClose"
      :visible.sync="courseVisible"
    >
      <el-form
        :model="maskForm"
        class="maskForm"
        ref="maskForm"
        :rules="maskRules"
        label-position="right"
        label-width="80px"
        :inline="true"
      >
        <el-form-item label="上课日期" prop="date">
          <el-date-picker
            v-model.trim="maskForm.date"
            type="date"
            :picker-options="coursesDate()"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-time-picker
            placeholder="起始时间"
            v-model.trim="startTime"
            @change="changeStartTime"
            format="HH:mm"
            value-format="HH:mm"
            :picker-options="{
              selectableRange: `${nowTime} - 23:30:00`,
            }"
          ></el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-time-picker
            placeholder="结束时间"
            format="HH:mm"
            value-format="HH:mm"
            v-model="maskForm.endTime"
            disabled
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="courseVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitResetClass">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="分享模式" width="400px" :visible.sync="shareModeVisible">
      <el-form
        :model="shareModeForm"
        class="maskForm"
        ref="shareModeForm"
        label-position="right"
        label-width="80px"
        :inline="true"
      >
        <el-form-item label="分享模式" prop="shareMode">
          <el-radio-group v-model="shareModeForm.shareMode">
            <el-radio label="OPEN">公开</el-radio>
            <el-radio label="PRIVATE">私密</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shareModeVisible = false">取 消</el-button>
        <el-button type="primary" @click="createShareCode">确 定</el-button>
      </div>
    </el-dialog>
    <qr-code v-model="codeStatus" title="二维码" :codeUrl="qrCodeUrl">
      <div class="codeType">
        {{ actvieRow.shareMode == "OPEN" ? "公开二维码" : "私密二维码" }}
      </div>
    </qr-code>

    <el-dialog
      :visible.sync="payVisible"
      v-if="payVisible"
      width="500px"
      title="直播回放"
    >
      <div class="lineWrap">
        <div
          class="linkItem"
          v-for="(item, index) in videoList"
          :key="index"
          @click="opneVideo(item)"
        >
          <div class="linkItemWrap">
            <!-- <video width="110px" :src="item.url"></video> -->
            <img width="110px" :src="videoPlace" alt="" />
            <i class="el-icon-video-play linkIcon"></i>
          </div>

          <p :underline="false" type="text" class="lineTitle">
            {{ item.endTime | dateForMinFormat }}
          </p>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="payVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="payVisible = false">确 定</el-button>
      </div></el-dialog
    >
    <el-dialog
      :title="activeVideo.endTime | dateForMinFormat"
      width="680px"
      append-to-body
      :visible.sync="videoVisible"
      v-if="videoVisible"
    >
      <!-- activeUrl -->
      <div class="activeVideoWrap">
        <vue-core-video-player
          v-if="activeVideo.os == 'mobile' && activeVideo.videoType != 'm3u8'"
          style="width: 480px"
          :src="activeVideo.url"
          ref="dialogVideo"
        >
          您的浏览器不支持视频播放
        </vue-core-video-player>
        <vue-core-video-player
          v-if="activeVideo.os == 'mobile' && activeVideo.videoType == 'm3u8'"
          style="width: 480px"
          :src="activeVideo.url"
          ref="dialogVideo"
          :core="HLSCore"
        >
          您的浏览器不支持视频播放
        </vue-core-video-player>
        <vue-core-video-player
          v-if="activeVideo.os == 'client'"
          style="width: 640px"
          :src="activeVideo.url"
          ref="dialogVideo"
          :core="HLSCore"
        >
          您的浏览器不支持视频播放
        </vue-core-video-player>
        <vue-core-video-player
          v-if="activeVideo.os == 'pc'"
          style="width: 640px"
          :src="activeVideo.url"
          ref="dialogVideo"
        >
          您的浏览器不支持视频播放
        </vue-core-video-player>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { resetCourse } from "@/api/buildTeam";
import { vipCourseAdjust } from "@/api/vipSeting";
import { liveCourseList, createLiveGroupShare, getCourseVideoList } from "../../api";
import { diffTimerFormMinute, addTimerFormMinute } from "@/utils/date";
import { shareLiveTypeList } from "@/utils/searchArray";
import { vaildStudentUrl } from "@/utils/validate";
import dayjs from "dayjs";
import qrCode from "@/components/QrCode/index";
import videoPlace from "../../images/video-place.png";
import HLSCore from "@core-player/playcore-hls";
export default {
  components: {
    qrCode,
  },
  data() {
    return {
      shareModeList: shareLiveTypeList,
      searchForm: {
        id: this.$route.query.id,
        shareMode: "",
      },
      adjustmentName: "",
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      chioseVipList: [],
      activeList: [],
      adjustmentVisible: false,
      adjustmentForm: {
        count: "",
        courseTime: "",
        checked: false,
        addCount: "",
        courseType: "ONLINE",
        fee: "",
        address: "",
      },
      adjustmentRules: {
        courseTime: [{ required: true, message: "请选择开始时间" }],
        addCount: [{ required: true, message: "请输入加课次数" }],
        courseType: [{ required: true, message: "请选择课程类型" }],
        fee: [{ required: true, message: "请输入费用" }],
        address: [{ required: true, message: "请选择教学地点" }],
      },
      weekDateList: [
        { value: "1", label: "星期一" },
        { value: "2", label: "星期二" },
        { value: "3", label: "星期三" },
        { value: "4", label: "星期四" },
        { value: "5", label: "星期五" },
        { value: "6", label: "星期六" },
        { value: "7", label: "星期日" },
      ],
      weekList: [
        {
          dayOfWeek: "",
          startTime: "",
          endTime: "",
          moid: new Date().getTime(),
        },
      ],
      courseVisible: false,
      maskForm: {
        date: "",
        startTime: "",
        endTime: "",
        id: "",
        address: "",
        teachMode: "",
      },
      maskRules: {
        date: [{ required: true, message: "请选择上课时间", trigger: "blur" }],
      },
      startTime: "",
      shareModeForm: {
        shareMode: "OPEN",
        courseId: "",
      },
      shareModeVisible: false,
      codeStatus: false,
      qrCodeUrl: "",
      actvieRow: { shareMode: "" },
      payVisible: false,
      videoVisible: false,
      videoList: [],
      videoPlace,
      HLSCore,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    lookCode(row) {
      this.actvieRow = row;
      this.qrCodeUrl =
        vaildStudentUrl() + `/mlive/?courseId=${row.id}&isLogin=true#/login`;
      this.codeStatus = true;
    },
    gotoShareList(row) {
      this.$router.push({
        path: "/business/liveShareStudentList",
        query: { ...this.$route.query, courseId: row.id },
      });
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.$refs.searchForm.resetFields();
      (this.searchForm.id = this.$route.query.id), this.search();
    },
    async getList() {
      try {
        const { data } = await liveCourseList({
          liveGroupId: this.searchForm.id,
          rows: this.rules.limit,
          page: this.rules.page,
          ...this.searchForm,
        });
        this.tableList = data.list;
        // this.rules.total = data.pageInfo.total;
        this.courseTime = data.singleClassMinutes;
      } catch {}
    },
    isDisabled(row, index) {
      if (row.isSettlement || !row.id || row.status == "UNDERWAY") {
        return false;
      } else {
        return true;
      }
    },
    addWeek() {
      // 添加循环周期
      this.weekList.push({
        dayOfWeek: "",
        startClassTime: "",
        endClassTime: "",
        id: new Date(),
      });
    },
    // 删除循环周
    removeWeek(item) {
      for (let i in this.weekList) {
        if (this.weekList[i].id == item.id) {
          this.weekList.splice(i, 1);
        }
      }
    },
    handleSelectionChange(val) {
      this.chioseVipList = val;
      this.adjustmentForm.count = val.length;
      this.activeList = val;
    },
    onAdjustment() {
      this.adjustmentName = "批量调整";
      if (this.adjustmentForm.count <= 0) {
        this.$message.error("请至少勾选一节课");
      } else {
        this.adjustmentVisible = true;
      }
    },
    coursesDate(dateStr) {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate: (time) => {
          return time.getTime() + 86400000 <= new Date().getTime();
        },
      };
    },
    pickerOptions(dateStr) {
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        },
      };
    },
    resetClass(row) {
      /**
       * maskForm.startTime
       */
      this.maskForm.date = row.classDate.split(" ")[0];
      this.startTime = row.startClassTimeStr.substring(0, 5);
      this.maskForm.endTime = row.endClassTimeStr.substring(0, 5);
      // this.maskForm.endTime = row.endClassTimeStr;
      this.maskForm.id = row.id;
      this.maskForm.address = row.schoolId || null;
      this.maskForm.teachMode = row.teachMode;
      // 修改课时
      this.courseVisible = true;
    },
    handleClose() {
      this.courseVisible = false;
      this.startTime = "";
      this.maskForm = {
        date: "",
        startTime: "",
        endTime: "",
        id: "",
        address: "",
        teachMode: "",
      };
      this.$refs["maskForm"].resetFields();
    },
    submitResetClass() {
      //   endClassTimeStr: this.maskForm.endTime,
      if (!this.startTime) {
        this.$message.error("请填写修改时间");
        return;
      }
      let classTime = this.maskForm.date ? new Date(this.maskForm.date) : new Date();
      let ymd =
        classTime.getFullYear() +
        "-" +
        (classTime.getMonth() + 1) +
        "-" +
        classTime.getDate();
      let tempStartTime = this.startTime;
      if (this.startTime.length <= 5) {
        tempStartTime = tempStartTime + ":00";
      }
      let obj = {
        startClassTime: ymd + " " + this.startTime,
        // startClassTimeStr: this.startTime,
        id: this.maskForm.id,
        classDate: this.maskForm.date,
        schoolId: this.maskForm.address || null,
        teachMode: this.maskForm.teachMode || null,
        groupType: "LIVE",
      };
      resetCourse(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.courseVisible = false;
          this.getList();
        } //else {
        //   this.$message.error(res.msg)
        // }
      });
    },
    submitAdjustment() {
      this.$refs["adjustmentForm"].validate((item) => {
        if (item) {
          let week = this.weekList;
          if (!week[0] || !week[0].startClassTime || !week[0].dayOfWeek) {
            this.$message.error("至少排一节课");
            return;
          }
          // 开始
          let obj = {};
          obj.courseCreateStartTime = this.adjustmentForm.courseTime;
          let idArr = this.activeList.map((item) => {
            return item.id;
          });

          let courseScheduleIds = idArr.join(",");
          obj.courseScheduleIds = courseScheduleIds;
          obj.courseTimes = this.weekList;
          obj.holiday = this.adjustmentForm.checked;
          obj.teachMode = this.adjustmentForm.courseType || null;
          obj.groupType = "LIVE";
          obj.vipGroupId = this.searchForm.id;
          obj.schoolId = this.adjustmentForm.address || null;
          vipCourseAdjust(obj).then((res) => {
            if (res.code == 200) {
              this.$message.success("恭喜您修改成功");
              this.adjustmentVisible = false;
              this.getList();
            }
          });
        }
      });
    },
    changeStartTime(val) {
      this.$nextTick((res) => {
        if (val) {
          this.$set(
            this.maskForm,
            "endTime",
            addTimerFormMinute(this.maskForm.date, val, this.courseTime)
          );
        } else {
          this.$set(this.maskForm, "endTime", "");
        }
        if (!this.maskForm.endTime) {
          this.$set(this, "startTime", "");
        }
      });
    },
    changeStartTimes(val, item) {
      this.$nextTick((res) => {
        if (val) {
          let str = dayjs(new Date()).format("YYYY-MM-DD");
          this.$set(item, "endClassTime", addTimerFormMinute(str, val, this.courseTime));
        } else {
          this.$set(item, "endClassTime", "");
        }
        if (!item.endClassTime) {
          console.log(item.startClassTime);
          this.$set(item, "startClassTime", "");
        }
      });
    },
    startShare(row) {
      this.actvieRow = row;
      this.shareModeForm.courseId = row.id;
      console.log(row.shareMode, "row.shareMode");
      this.shareModeForm.shareMode = row.shareMode || "OPEN";
      if (row.shareMode == "NO_SHARE") {
        this.shareModeForm.shareMode = "OPEN";
      }
      this.shareModeVisible = true;
    },
    async createShareCode() {
      try {
        const res = await createLiveGroupShare({
          ...this.shareModeForm,
          shareMode: this.shareModeForm.shareMode,
        });

        this.shareModeVisible = false;
        this.$message.success("创建成功");
        if (this.shareModeForm.shareMode == "PRIVATE") {
          this.actvieRow.shareMode = "PRIVATE";
          this.gotoShareList(this.actvieRow);
        }
        if (this.shareModeForm.shareMode == "OPEN") {
          this.actvieRow.shareMode = "OPEN";
          this.lookCode(this.actvieRow);
        }
        this.getList();
      } catch (e) {}
    },
    opneVideo(row) {
      console.log(row, "opneVideo");
      this.activeVideo = row;
      this.videoVisible = true;
    },
    async lookViedoList(row) {
      try {
        const res = await getCourseVideoList({ roomUid: row.liveRoomId });
        this.videoList = res.data;
        this.payVisible = true;
      } catch (e) {
        console.log(e);
      }
    },
  },
  computed: {
    nowTime() {
      // console.log(that.maskForm.date)
      let str = "06:00:00";
      if (this.maskForm.date == dayjs(new Date()).format("YYYY-MM-DD")) {
        str = dayjs(new Date()).format("HH:mm:ss");
      }

      return str;
    },
  },
  filters: {
    formatterTime(val) {
      let result;
      if (val) {
        result = val.split(" ")[0];
      } else {
        result = "";
      }
      return result;
    },
    formatterStatus(val) {
      let arr = ["未开始", "报名中", "进行中", "取消", "已结束", "报名结束", "暂停"];
      return arr[val];
    },
  },
};
</script>
<style lang="scss" scoped>
.codeType {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px;
}
::v-deep .el-dropdown-link {
  cursor: pointer;
  color: var(--color-primary);
}

::v-deep .el-icon-arrow-down {
  font-size: 12px;
}

.vipwrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  .newBand {
    margin-right: 20px;
  }
}

.resetClassForm {
  ::v-deep .el-date-editor.el-input,
  ::v-deep .el-date-editor.el-input__inner {
    width: 180px !important;
  }
}

.countWrap {
  ::v-deep .el-date-editor.el-input,
  ::v-deep .el-date-editor.el-input__inner {
    width: 100px !important;
  }
}

.maskForm {
  ::v-deep .el-input {
    width: 220px !important;
  }
}

.titlewrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.lineWrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;

  .linkItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 5px;
    cursor: pointer;
    position: relative;
    &:hover {
      color: var(--color-primary);
      .lineTitle {
        color: var(--color-primary);
        font-weight: bold;
      }
    }
    .linkItemWrap {
      position: relative;
      .linkIcon {
        font-size: 25px;
        position: absolute;
        top: 50%;
        margin-top: -13px;
        left: 50%;
        margin-left: -13px;
        color: #fff;
      }
    }
  }
  .lineTitle {
    height: 40px;
    line-height: 40px;
    color: rgba(102, 102, 102, 0.9);
    padding: 0 17px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
    border-radius: 4px;
  }
}
.activeVideoWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>