2021/7/15 学习知识汇聚平台：专题详情页布局设置

今天主要进行了专题页面的进一步开发，大致进行了专题详情页的布局，对于具体内容和整体思路仍有问题需要确定

主要实现代码如下：

<template>
  <div>
    <Headers_copy>
    </Headers_copy>

    <div>
      <el-container>
        <el-header class="el-header" style="font-weight: bold;color: #FFFFFF ;font-size: larger">专题学习资源
        </el-header>
        <el-main class="el-main">
          <template slot-scope="props">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item  title="< 教师专题资源 >" name="1">
                <div class="new">
                  <el-button type="primary" plain>
                    <el-link href="/#/blog/add"  style="color: #333333;text-decoration: none">发布资源</el-link>
                    <i class="el-icon-upload el-icon--right">
                  </i></el-button></div>
                <el-table
                    :data="tableData"
                    height="400"
                    style="width: 100%">
                  <el-table-column
                      prop="name"
                      label="学习资源名称"
                      width="580">
                  </el-table-column>
                  <el-table-column
                      prop="date"
                      label="上传时间"
                      width="350">
                  </el-table-column>
                  <el-table-column
                      label="操作">
                    <template slot-scope="scope">
                      <el-button-group>
                        <el-button type="primary"plain icon="el-icon-reading" ></el-button>
                        <el-button type="primary"plain icon="el-icon-delete" ></el-button>
                      </el-button-group>
                    </template>
                  </el-table-column>
                </el-table>
              </el-collapse-item>
              <el-collapse-item title="< 学生知识分享 >" name="2" >
                <div class="new">
                  <el-button type="primary" plain>
                    <el-link href="/#/blog/add"  style="color: #333333;text-decoration: none">发布</el-link>
                    <i class="el-icon-upload el-icon--right">
                  </i></el-button></div>
                <el-table
                    :data="tableData"
                    height="400"
                    style="width: 100%">
                  <el-table-column
                      prop="name"
                      label="学习资源名称"
                      width="580">
                  </el-table-column>
                  <el-table-column
                      prop="date"
                      label="发布者"
                      width="350">
                  </el-table-column>
                  <el-table-column
                      label="操作">
                    <template slot-scope="scope">
                      <el-button-group>
                        <el-button type="primary"plain icon="el-icon-reading" ></el-button>
                        <el-button type="primary"plain icon="el-icon-delete" ></el-button>
                      </el-button-group>
                    </template>
                  </el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>
            </template>
        </el-main>
      </el-container>

      <el-container>
        <el-header class="el-header" style="font-weight: bold;color: #FFFFFF ;font-size: larger">
          专题学习成果
        </el-header>
        <el-main class="el-main">
          <template slot-scope="props">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="< 专题学习总结 >" name="3">
                <div class="new">
                <el-button type="primary" plain>提交总结<i class="el-icon-upload el-icon--right">
                </i></el-button></div>
                <el-table
                    :data="tableData"
                    height="400"
                    style="width: 100%">
                  <el-table-column
                      prop="name"
                      label="学习总结标题"
                      width="580">
                  </el-table-column>
                  <el-table-column
                      prop="date"
                      label="发布者"
                      width="350">
                  </el-table-column>
                  <el-table-column
                      label="操作">
                    <template slot-scope="scope">

                        <el-button type="primary"plain icon="el-icon-reading" ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-collapse-item>
              <el-collapse-item title="< 学生专题作业 >" name="4">
                <div class="new">
                  <el-button type="primary" plain>提交作业<i class="el-icon-upload el-icon--right">
                  </i></el-button></div>
                <el-table
                    :data="tableData"
                    height="400"
                    style="width: 100%">
                  <el-table-column
                      prop="name"
                      label="专题作业标题"
                      width="580">
                  </el-table-column>
                  <el-table-column
                      prop="date"
                      label="发布者"
                      width="350">
                  </el-table-column>
                  <el-table-column
                      label="操作">
                    <template slot-scope="scope">

                        <el-button type="primary"plain icon="el-icon-reading" ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </template>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import Headers_copy from "@/components/headers_copy";
import QS from "qs";
const axios = require('axios');
export default {
  name: "ClassDetail",
  components: {
    Headers_copy,
  },
  data() {
    return {
      tableData: [],
      sid:this.$route.query.sid,
      activeNames: ['1','2']
    }
  },
  created() {
    const _this=this
    axios.post("http://47.107.40.143:8080//checkSubject",QS.stringify(
        {
          sid:this.$route.query.sid,
          status:1
        })).then(res=>{
      console.log(res)
      _this.tableData=res.data.data
    })
  },
}
</script>

<style  scoped>
.new{
  margin-left: 750px;
}

.el-table__header th {
  padding: 0;
  height: 30px;
  line-height: 30px;
}
.el-header {
  background-color: #409EFF;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 220px;
}
</style>

目前的界面如下：

 

预计明天继续进行整体思路和框架的修改完善。