|
|
@@ -0,0 +1,830 @@
|
|
|
+<template>
|
|
|
+ <!-- <div> -->
|
|
|
+ <div class="right_box__body">
|
|
|
+ <div
|
|
|
+ class="item"
|
|
|
+ v-for="(menu, index) in menuList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <template v-if="menu.type == 1">
|
|
|
+ <div
|
|
|
+ class="item__title"
|
|
|
+ @click="openModule(menu)"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ :class="{
|
|
|
+ 'el-icon-caret-right': !menu.showList,
|
|
|
+ 'el-icon-caret-bottom': menu.showList,
|
|
|
+ }"
|
|
|
+ ></i>
|
|
|
+ {{ menu.menuName }}
|
|
|
+ </div>
|
|
|
+ <div class="item__content">
|
|
|
+ <div
|
|
|
+ class="bank-chapter"
|
|
|
+ v-if="menu.showList"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="bank-chapter__item"
|
|
|
+ v-for="(
|
|
|
+ chapter, chapterIndex
|
|
|
+ ) in menu.list"
|
|
|
+ :key="chapterIndex"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="bank-chapter__item__text"
|
|
|
+ @click="openChapter(chapter)"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ :class="{
|
|
|
+ 'el-icon-caret-right':
|
|
|
+ !chapter.showList,
|
|
|
+ 'el-icon-caret-bottom':
|
|
|
+ chapter.showList,
|
|
|
+ }"
|
|
|
+ ></i
|
|
|
+ >{{ chapter.name }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="bank-section"
|
|
|
+ v-if="chapter.showList"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="bank-section__item"
|
|
|
+ :class="{
|
|
|
+ active: isActive(section),
|
|
|
+ }"
|
|
|
+ v-for="(
|
|
|
+ section, sectionIndex
|
|
|
+ ) in chapter.list"
|
|
|
+ :key="sectionIndex"
|
|
|
+ @click="getResource(section)"
|
|
|
+ >
|
|
|
+ <template v-if="section.type != 2">
|
|
|
+ <template>
|
|
|
+ <div
|
|
|
+ class="note note--blue"
|
|
|
+ v-if="
|
|
|
+ section.sectionType == 1
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 录播
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="note"
|
|
|
+ v-if="
|
|
|
+ section.sectionType == 2
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 直播
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="note note--yellow"
|
|
|
+ v-if="
|
|
|
+ section.sectionType == 3
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 回放
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ bank-section__item__text
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ section.name }}
|
|
|
+ <div
|
|
|
+ style="font-size: 12px"
|
|
|
+ v-if="
|
|
|
+ section.liveStartTime >
|
|
|
+ nowTime
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>{{
|
|
|
+ $tools.timestampToTime(
|
|
|
+ section.liveStartTime,
|
|
|
+ (isDay = false)
|
|
|
+ )
|
|
|
+ }}</span
|
|
|
+ >-
|
|
|
+ <span>{{
|
|
|
+ $tools.timestampToTime(
|
|
|
+ section.liveEndTime,
|
|
|
+ (isDay = false)
|
|
|
+ )
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template
|
|
|
+ v-if="section.durationTime > 0"
|
|
|
+ >
|
|
|
+ <div class="during">
|
|
|
+ {{
|
|
|
+ $tools.secondToDate(
|
|
|
+ section.durationTime
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template>
|
|
|
+ <div
|
|
|
+ class="btn"
|
|
|
+ v-if="section.rebuild > 0"
|
|
|
+ >
|
|
|
+ 待重修
|
|
|
+ </div>
|
|
|
+ <template v-else>
|
|
|
+ <div
|
|
|
+ class="btn btn--green"
|
|
|
+ v-if="section.learning == 1"
|
|
|
+ >
|
|
|
+ 已看完
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ section.liveStartTime &&
|
|
|
+ section.sectionType == 2
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ live-btn live-btn--blue
|
|
|
+ "
|
|
|
+ v-if="
|
|
|
+ section.liveStartTime >
|
|
|
+ nowTime
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 待开播
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ live-btn live-btn--yellow
|
|
|
+ "
|
|
|
+ v-if="
|
|
|
+ section.liveStartTime <=
|
|
|
+ nowTime &&
|
|
|
+ section.liveEndTime >
|
|
|
+ nowTime
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 直播中
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="live-btn"
|
|
|
+ v-if="
|
|
|
+ section.liveEndTime <
|
|
|
+ nowTime
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 已结束
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="section.type == 2">
|
|
|
+ <template>
|
|
|
+ <div
|
|
|
+ class="test-btn"
|
|
|
+ v-if="section.doType == 1"
|
|
|
+ >
|
|
|
+ 练习
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="test-btn"
|
|
|
+ v-if="section.doType != 1"
|
|
|
+ >
|
|
|
+ 考试
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ class="bank-section__item__text"
|
|
|
+ >
|
|
|
+ {{ section.name }}
|
|
|
+ </div>
|
|
|
+ <template>
|
|
|
+ <div
|
|
|
+ class="btn"
|
|
|
+ v-if="section.rebuild > 0"
|
|
|
+ >
|
|
|
+ 待重修
|
|
|
+ </div>
|
|
|
+ <template v-else>
|
|
|
+ <div
|
|
|
+ class="btn btn--green"
|
|
|
+ v-if="section.learning == 1"
|
|
|
+ >
|
|
|
+ 合格
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="btn btn--red"
|
|
|
+ v-if="section.learning == 0"
|
|
|
+ >
|
|
|
+ 不合格
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="btn btn--green"
|
|
|
+ v-if="section.rebuild > 0"
|
|
|
+ >
|
|
|
+ 待重测
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="menu.type == 2">
|
|
|
+ <div class="item__content">
|
|
|
+ <div class="bank-chapter">
|
|
|
+ <div class="bank-chapter__item">
|
|
|
+ <div
|
|
|
+ class="bank-chapter__item__text"
|
|
|
+ @click="openChapter(menu)"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ :class="{
|
|
|
+ 'el-icon-caret-right':
|
|
|
+ !menu.showList,
|
|
|
+ 'el-icon-caret-bottom':
|
|
|
+ menu.showList,
|
|
|
+ }"
|
|
|
+ ></i
|
|
|
+ >{{ menu.menuName }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="bank-section"
|
|
|
+ v-if="menu.showList"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="bank-section__item"
|
|
|
+ :class="{
|
|
|
+ active: isActive(section),
|
|
|
+ }"
|
|
|
+ v-for="(
|
|
|
+ section, sectionIndex
|
|
|
+ ) in menu.list"
|
|
|
+ :key="sectionIndex"
|
|
|
+ @click="getResource(section)"
|
|
|
+ >
|
|
|
+ <template v-if="section.type != 2">
|
|
|
+ <template>
|
|
|
+ <div
|
|
|
+ class="note note--blue"
|
|
|
+ v-if="
|
|
|
+ section.sectionType == 1
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 录播
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="note"
|
|
|
+ v-if="
|
|
|
+ section.sectionType == 2
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 直播
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="note note--yellow"
|
|
|
+ v-if="
|
|
|
+ section.sectionType == 3
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 回放
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ class="bank-section__item__text"
|
|
|
+ >
|
|
|
+ {{ section.name }}
|
|
|
+ <div
|
|
|
+ style="font-size: 12px"
|
|
|
+ v-if="
|
|
|
+ section.liveStartTime >
|
|
|
+ nowTime
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>{{
|
|
|
+ $tools.timestampToTime(
|
|
|
+ section.liveStartTime,
|
|
|
+ (isDay = false)
|
|
|
+ )
|
|
|
+ }}</span
|
|
|
+ >-
|
|
|
+ <span>{{
|
|
|
+ $tools.timestampToTime(
|
|
|
+ section.liveEndTime,
|
|
|
+ (isDay = false)
|
|
|
+ )
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template
|
|
|
+ v-if="section.durationTime > 0"
|
|
|
+ >
|
|
|
+ <div class="during">
|
|
|
+ {{
|
|
|
+ $tools.secondToDate(
|
|
|
+ section.durationTime
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template>
|
|
|
+ <div
|
|
|
+ class="btn"
|
|
|
+ v-if="section.rebuild > 0"
|
|
|
+ >
|
|
|
+ 待重修
|
|
|
+ </div>
|
|
|
+ <template v-else>
|
|
|
+ <div
|
|
|
+ class="btn btn--green"
|
|
|
+ v-if="section.learning == 1"
|
|
|
+ >
|
|
|
+ 已看完
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ section.liveStartTime &&
|
|
|
+ section.sectionType == 2
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ live-btn live-btn--blue
|
|
|
+ "
|
|
|
+ v-if="
|
|
|
+ section.liveStartTime >
|
|
|
+ nowTime
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 待开播
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ live-btn live-btn--yellow
|
|
|
+ "
|
|
|
+ v-if="
|
|
|
+ section.liveStartTime <=
|
|
|
+ nowTime &&
|
|
|
+ section.liveEndTime >
|
|
|
+ nowTime
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 直播中
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="live-btn"
|
|
|
+ v-if="
|
|
|
+ section.liveEndTime <
|
|
|
+ nowTime
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 已结束
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="section.type == 2">
|
|
|
+ <template>
|
|
|
+ <div
|
|
|
+ class="test-btn"
|
|
|
+ v-if="section.doType == 1"
|
|
|
+ >
|
|
|
+ 练习
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="test-btn"
|
|
|
+ v-if="section.doType != 1"
|
|
|
+ >
|
|
|
+ 考试
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ class="bank-section__item__text"
|
|
|
+ >
|
|
|
+ {{ section.name }}
|
|
|
+ </div>
|
|
|
+ <template>
|
|
|
+ <div
|
|
|
+ class="btn"
|
|
|
+ v-if="section.rebuild > 0"
|
|
|
+ >
|
|
|
+ 待重修
|
|
|
+ </div>
|
|
|
+ <template v-else>
|
|
|
+ <div
|
|
|
+ class="btn btn--green"
|
|
|
+ v-if="section.learning == 1"
|
|
|
+ >
|
|
|
+ 合格
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="btn btn--red"
|
|
|
+ v-if="section.learning == 0"
|
|
|
+ >
|
|
|
+ 不合格
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="btn btn--green"
|
|
|
+ v-if="section.rebuild > 0"
|
|
|
+ >
|
|
|
+ 待重测
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="menu.type == 3">
|
|
|
+ <div class="item__content">
|
|
|
+ <div class="bank-section">
|
|
|
+ <div
|
|
|
+ class="bank-section__item"
|
|
|
+ :class="{
|
|
|
+ active: isActive(menu),
|
|
|
+ }"
|
|
|
+ @click="getResource(menu)"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <div
|
|
|
+ class="note note--blue"
|
|
|
+ v-if="menu.sectionType == 1"
|
|
|
+ >
|
|
|
+ 录播
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="note"
|
|
|
+ v-if="menu.sectionType == 2"
|
|
|
+ >
|
|
|
+ 直播
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="note note--yellow"
|
|
|
+ v-if="menu.sectionType == 3"
|
|
|
+ >
|
|
|
+ 回放
|
|
|
+ </div>
|
|
|
+ <div class="bank-section__item__text">
|
|
|
+ {{ menu.name }}
|
|
|
+ <div
|
|
|
+ style="font-size: 12px"
|
|
|
+ v-if="
|
|
|
+ menu.liveStartTime > nowTime
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>{{
|
|
|
+ $tools.timestampToTime(
|
|
|
+ menu.liveStartTime,
|
|
|
+ (isDay = false)
|
|
|
+ )
|
|
|
+ }}</span
|
|
|
+ >-
|
|
|
+ <span>{{
|
|
|
+ $tools.timestampToTime(
|
|
|
+ menu.liveEndTime,
|
|
|
+ (isDay = false)
|
|
|
+ )
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="menu.durationTime > 0">
|
|
|
+ <div class="during">
|
|
|
+ {{
|
|
|
+ $tools.secondToDate(
|
|
|
+ menu.durationTime
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template>
|
|
|
+ <div
|
|
|
+ class="btn"
|
|
|
+ v-if="menu.rebuild > 0"
|
|
|
+ >
|
|
|
+ 待重修
|
|
|
+ </div>
|
|
|
+ <template v-else>
|
|
|
+ <div
|
|
|
+ class="btn btn--green"
|
|
|
+ v-if="menu.learning == 1"
|
|
|
+ >
|
|
|
+ 已看完
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ menu.liveStartTime &&
|
|
|
+ menu.sectionType == 2
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="live-btn live-btn--blue"
|
|
|
+ v-if="menu.liveStartTime > nowTime"
|
|
|
+ >
|
|
|
+ 待开播
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="live-btn live-btn--yellow"
|
|
|
+ v-if="
|
|
|
+ menu.liveStartTime <= nowTime &&
|
|
|
+ menu.liveEndTime > nowTime
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 直播中
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="live-btn"
|
|
|
+ v-if="menu.liveEndTime < nowTime"
|
|
|
+ >
|
|
|
+ 已结束
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- </div> -->
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'boxs',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ menuList: [],
|
|
|
+ param: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 100,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 目录列表
|
|
|
+ getMenuList() {
|
|
|
+ // /course/menuList
|
|
|
+ this.$request
|
|
|
+ .reMenuList({ courseId: this.courseId, gradeId: this.gradeId })
|
|
|
+ .then(async (res) => {
|
|
|
+ console.log('--asfsdgshfduofhdug', res.rows, this.menuList)
|
|
|
+ for (let i = 0; i < res.rows.length; i++) {
|
|
|
+ let item = res.rows[i];
|
|
|
+ item.id = item.menuId;
|
|
|
+ item.name = item.menuName;
|
|
|
+ item.menuType = item.type;
|
|
|
+ item.showList = false;
|
|
|
+ item.list = [];
|
|
|
+ item.parent = this.menuList;
|
|
|
+ }
|
|
|
+ this.menuList = res.rows;
|
|
|
+ console.log('==============this.menuList===', res.rows, this.menuList)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.right_box {
|
|
|
+ width: 420px;
|
|
|
+ height: 528px;
|
|
|
+ background: #3f4449;
|
|
|
+ border-radius: 0px;
|
|
|
+ // &__header {
|
|
|
+ // .tabs {
|
|
|
+ /deep/.el-tabs__nav-wrap::after {
|
|
|
+ background-color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-tabs__header {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: #fff;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ &__title {
|
|
|
+ padding-left: 12px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .el-icon-caret-right,
|
|
|
+ .el-icon-caret-bottom {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__content {
|
|
|
+ .bank-chapter {
|
|
|
+ &__item {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &__text {
|
|
|
+ padding: 8px 8px 8px 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .el-icon-caret-right,
|
|
|
+ .el-icon-caret-bottom {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bank-section {
|
|
|
+ &__item {
|
|
|
+ user-select: none;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #132b4d;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3f8dfd;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__text {
|
|
|
+ flex: 1;
|
|
|
+ padding: 8px 8px 8px 12px;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .el-icon-caret-right,
|
|
|
+ .el-icon-caret-bottom {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .test-btn {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 32px;
|
|
|
+ height: 20px;
|
|
|
+ background: #007aff;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .note {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 32px;
|
|
|
+ height: 20px;
|
|
|
+ border: 1px solid #ff3b30;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #ff3b30;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &--yellow {
|
|
|
+ border-color: #ff9500;
|
|
|
+ color: #ff9500;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--blue {
|
|
|
+ border-color: #3f8dfd;
|
|
|
+ color: #3f8dfd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .during {
|
|
|
+ color: #999;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ margin-right: 12px;
|
|
|
+ width: 48px;
|
|
|
+ height: 20px;
|
|
|
+ border: 1px solid #ff3b30;
|
|
|
+ background: #ff3b30;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &--green {
|
|
|
+ border: 1px solid #34c759;
|
|
|
+ background: #34c759;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .live-btn {
|
|
|
+ margin-left: 20px;
|
|
|
+ width: 60px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #eeeeee;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #666666;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &--yellow {
|
|
|
+ background: #fff7eb;
|
|
|
+ color: #ff9500;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--blue {
|
|
|
+ border-color: #ebf4ff;
|
|
|
+ color: #007aff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ height: 40px;
|
|
|
+ border-bottom: 1px solid #999;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .select {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 10px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ background: none;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // }
|
|
|
+ &__body {
|
|
|
+ height: 374px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ // width: 6px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ background-color: #060e1a;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #eeeeee;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xuqiaoying