pbl-teacher-table/src/components/pages/classroomObservation/dialog/uploadFileToCreateClassDialog.vue

<template>
  <div>
    <el-dialog
      :center="true"
      :visible.sync="show"
      :close-on-click-modal="false"
      :modal="false"
      width="auto"
      height="auto"
      class="uploadFileToCreateClassDialog"
    >
      <div class="box">
        <div class="b_head">
          <span>文件上传与配置</span>
          <img
            src="../../../../assets/icon/classroomObservation/close.svg"
            @click="close()"
          />
        </div>
        <div class="b_main">
          <div class="b_m_left">
            <img
              src="../../../../assets/icon/classroomObservation/file_processing.svg"
            />
            <span>文件格式支持：mp4、wav、txt 文件</span>
          </div>
          <div class="b_m_right">
            <span>配置</span>
            <div>
              <span>自动编码</span>
              <el-switch
                v-model="automaticCoding"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </div>
            <div>
              <span>分析模板</span>
              <el-cascader
                size="small"
                v-model="analysisTemplate"
                :options="options"
              ></el-cascader>
            </div>
          </div>
        </div>
        <div class="b_bottom">
          <el-button size="small" @click="close()">取消</el-button>
          <el-button size="small" type="primary" @click="submit"
            >确定修改</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      show: false,
      loading: false,
      automaticCoding: false,
      analysisTemplate: "",
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                }
              ]
            }
          ]
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局"
                },
                {
                  value: "color",
                  label: "Color 色彩"
                },
                {
                  value: "typography",
                  label: "Typography 字体"
                },
                {
                  value: "icon",
                  label: "Icon 图标"
                },
                {
                  value: "button",
                  label: "Button 按钮"
                }
              ]
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框"
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框"
                },
                {
                  value: "input",
                  label: "Input 输入框"
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器"
                },
                {
                  value: "select",
                  label: "Select 选择器"
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器"
                },
                {
                  value: "switch",
                  label: "Switch 开关"
                },
                {
                  value: "slider",
                  label: "Slider 滑块"
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器"
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器"
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器"
                },
                {
                  value: "upload",
                  label: "Upload 上传"
                },
                {
                  value: "rate",
                  label: "Rate 评分"
                },
                {
                  value: "form",
                  label: "Form 表单"
                }
              ]
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格"
                },
                {
                  value: "tag",
                  label: "Tag 标签"
                },
                {
                  value: "progress",
                  label: "Progress 进度条"
                },
                {
                  value: "tree",
                  label: "Tree 树形控件"
                },
                {
                  value: "pagination",
                  label: "Pagination 分页"
                },
                {
                  value: "badge",
                  label: "Badge 标记"
                }
              ]
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告"
                },
                {
                  value: "loading",
                  label: "Loading 加载"
                },
                {
                  value: "message",
                  label: "Message 消息提示"
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框"
                },
                {
                  value: "notification",
                  label: "Notification 通知"
                }
              ]
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单"
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页"
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑"
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单"
                },
                {
                  value: "steps",
                  label: "Steps 步骤条"
                }
              ]
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框"
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示"
                },
                {
                  value: "popover",
                  label: "Popover 弹出框"
                },
                {
                  value: "card",
                  label: "Card 卡片"
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯"
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板"
                }
              ]
            }
          ]
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components"
            },
            {
              value: "sketch",
              label: "Sketch Templates"
            },
            {
              value: "jiaohu",
              label: "组件交互文档"
            }
          ]
        }
      ]
    };
  },
  computed: {},
  methods: {
    open(data) {
      this.loading = false;
      this.show = true;
    },
    close() {
      this.show = false;
      this.init();
    },
    init() {
      this.loading = false;
    },
    submit() {
      this.$message.info("确认上传");
      this.close();
    }
  }
};
</script>

<style scoped>
.uploadFileToCreateClassDialog >>> .el-dialog {
  width: 900px !important;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}

.uploadFileToCreateClassDialog >>> .el-dialog__body {
  width: 900px !important;
  height: auto;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: auto;
}

.uploadFileToCreateClassDialog >>> .el-dialog__header {
  display: none !important;
}

.box {
  width: 900px;
  height: 500px;
  background: #fafafa;
  border-radius: 15px;
  box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05),
    0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
}

.b_head {
  width: 100%;
  height: 50px;
  border-radius: 15px 15px 0 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}

.b_head > span {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.b_head > img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.b_main {
  width: 100%;
  height: calc(100% - 50px - 70px);
  background: #fafafa;
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.b_bottom {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 0 20px;
}

.b_main > div {
  border-radius: 15px;
  width: 400px;
  height: 350px;
  box-sizing: border-box;
  border: rgba(150, 155, 163, 1) 1px dashed;
}

.b_m_left {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.b_m_left > img {
  width: 140px;
  height: 140px;
}

.b_m_left > span {
  font-size: 16px;
  color: #000;
}

.b_m_right {
  box-sizing: border-box;
  padding: 20px;
}

.b_m_right > span {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.b_m_right>div{
  margin-top: 20px;
  font-size: 16px;
  color: #000;
}


</style>