<template>
  <div>
    <div class="zj">
      <!-- 左侧章节区域 -->
      <div class="zjLeft">
        <div class="leftTop">数学北师大课标版七年级</div>
        <div class="conLeft">
          <div class="zjfirst">第一章 计算公式</div>
          <ul>
            <li>
              <span>1.生活中的立体图形</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 右侧内容区域 -->
      <div class="conRight">
        <div class="conrightTop">
          <div class="rightTop">
            <span>平台套题</span>
            <el-button type="primary" size="mini" @click="upload_taojuan">上传套卷</el-button>
          </div>
        </div>
        <!-- 下部分区域 -->
        <div class="rightBottom">
          <ul class="contotal">
            <li class="conlist">
              <div class="conlist_ico"></div>
             
              <div class="shitiCon">
                <div class="shitiCon_head">北京123</div>
                <div class="shitiCon_bottom">1099-19-10 | 23道</div>
              </div>
              <div class="conlist_fenxi">
                <a href="#">套卷分析</a>
                <a href="#" @click="readInfo">查看详情</a>
              </div>
              
            </li>
          </ul>
        </div>
        <!-- 分页组件 -->
        <fenyebutton></fenyebutton>
      </div>
    </div>
    <!-- 上传套卷的弹出窗口 选择题 -->
    <el-dialog title="上传套卷" :visible.sync="uploadDialog" width="60%">
      <span>
        <div>
          <el-input type="text" placeholder="输入套卷名称" style="width:20%"></el-input>0分
          题型：
          <el-select v-model="value" placeholder="请选择" style="margin-right:5px;width:20%">
            <el-option></el-option>
          </el-select>

          <el-radio v-model="radio" label="1">备选项</el-radio>
          <el-radio v-model="radio" label="1">备选项</el-radio>
          <el-button type="primary" size="mini">添加</el-button>
          <el-button type="warning" size="mini">删除</el-button>
        </div>
        <!-- 题干 -->
        <div>
          <p>题干:</p>
          <template>
            <quill-editor></quill-editor>
          </template>
        </div>
        <!-- 选项 -->
        <div>
          <p>选项:</p>
          <p>A:</p>
          <template>
            <div class="edit_quill">
              <quill-editor></quill-editor>
              <div class="edit_right">
                <el-radio v-model="radio">
                  <el-button type="warning">删除</el-button>
                </el-radio>
              </div>
            </div>
          </template>
        </div>
        <!-- 解析 -->
        <div>
          <p>解析:</p>
          <template>
            <quill-editor></quill-editor>
          </template>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadDialog = false">添加选项</el-button>
        <el-button type="primary" @click="uploadDialog = false">保存试题</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uploadDialog: false
    };
  },
  methods: {
    // 跳转查看详情页面
    readInfo() {
      this.$router.push("/readInfo");
    },
    // 上传套卷显示单选对话框
    upload_taojuan() {
      this.uploadDialog = true;
    }
  }
};
</script>
<style lang="less" scoped>
.zj {
  width: 100%;
  display: flex;
  justify-content: space-between;
  // 左侧章节部分样式
  .zjLeft {
    width: 25%;
    height: 100%;
    background-color: #fff;
    .conLeft {
      span {
        padding: 8px;
      }

      .zjfirst {
        height: 31px;
        line-height: 31px;
        padding-left: 8px;
      }
      li {
        height: 40px;
        line-height: 40px;
      }
      li:hover {
        background-color: #f4f6f9;
      }
    }
    .leftTop {
      display: flex;
      justify-content: center;
      height: 56px;
      line-height: 56px;
      text-align: center;
      border-bottom: 1px solid #ccc;
      background-color: #4398ff;
      color: #fff;
    }
  }
  // 右侧内容样式
  .conRight {
    width: 73%;
    height: 100%;
    background-color: #fff;
    .conrightTop {
      width: 100%;
      height: 57px;
      border-bottom: 1px solid #ccc;
      .rightTop {
        display: flex;
        justify-content: space-between;
        padding: 10px 5px 0 5px;
        span {
          padding-left: 7px;
        }
      }
    }
    // 右侧下面部分
    .rightBottom {
      margin: 15px;
      .conlist {
        height: 89px;
        border: 1px solid #ccc;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .conlist_ico {
          margin: 0 -148px;
          width: 48px;
          height: 54px;
          background-color: #ccc;
        }
        .shitiCon {
          margin-left: -90px;
        }
       
      }
    }
  }
}
.edit_quill {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.edit_right {
  margin: 0 -30px 0 10px;
}

.conlist_fenxi {
    a:nth-child(2){
        margin-left: 20px;
    }
}
</style>