今天主要进行了专题页面的进一步开发,大致进行了专题详情页的布局,对于具体内容和整体思路仍有问题需要确定
主要实现代码如下:
<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>
目前的界面如下:
预计明天继续进行整体思路和框架的修改完善。