|
|
@@ -0,0 +1,350 @@
|
|
|
+<template>
|
|
|
+ <div class="course-detail-page">
|
|
|
+ <!--课程信息-->
|
|
|
+ <div class="course-detail-container">
|
|
|
+ <!--课程基本信息-->
|
|
|
+ <el-card>
|
|
|
+ <div class="header">
|
|
|
+<!-- <div class="course-img">-->
|
|
|
+<!-- <img :src="img" alt="err">-->
|
|
|
+<!-- </div>-->
|
|
|
+ <img :src="communicationInfo.img" alt="err" class="course-img">
|
|
|
+ <div class="course-info">
|
|
|
+ <el-row style="font-size: xx-large; font-weight: bold">
|
|
|
+ {{ communicationInfo.title }}
|
|
|
+ </el-row>
|
|
|
+ <div class="course-info-main">
|
|
|
+ <el-row>{{ communicationInfo.publisherName }}</el-row>
|
|
|
+ <el-row>{{ communicationInfo.deadline }}</el-row>
|
|
|
+ </div>
|
|
|
+<!-- <el-row class="mooc-link">-->
|
|
|
+<!-- MOOC链接：-->
|
|
|
+<!-- <el-link v-if="courseInfo.moocUrl!==null" :href="courseInfo.moocUrl" target="_blank">点击此处<i-->
|
|
|
+<!-- class="el-icon-link el-icon--right"></i></el-link>-->
|
|
|
+<!-- <span v-else>无</span>-->
|
|
|
+<!-- </el-row>-->
|
|
|
+<!-- <el-row v-if="isCreator">-->
|
|
|
+<!-- 邀请码：{{courseInfo.invitationCode}}-->
|
|
|
+<!-- </el-row>-->
|
|
|
+<!-- <el-row v-if="isStudent">-->
|
|
|
+<!-- <el-button :disabled="isCourseSelected" size="mini" @click="handleSelectCourse">-->
|
|
|
+<!-- {{ isCourseSelected ? "已选课" : "确认选课" }}-->
|
|
|
+<!-- </el-button>-->
|
|
|
+<!-- <el-button v-if="isCourseSelected" size="mini" type="danger" @click="handleDropCourse">-->
|
|
|
+<!-- 退课-->
|
|
|
+<!-- </el-button>-->
|
|
|
+<!-- </el-row>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider/>
|
|
|
+<!-- <div class="introduce">-->
|
|
|
+<!-- <div class="title">简介</div>-->
|
|
|
+<!-- <div class="introduce-content">{{ description }}</div>-->
|
|
|
+<!-- </div>-->
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "CommunicationDetail",
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ communicationInfo: {
|
|
|
+ img: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ this.fetchData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ fetchData(){
|
|
|
+ this.$apis.getCommunicationDetail(this.$route.params.id).then(res=>{
|
|
|
+ this.communicationInfo = res.data.data;
|
|
|
+ this.communicationInfo.img = this.communicationInfo.photos[0].fileUrl;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.course-detail-page {
|
|
|
+ margin: 40px 0 80px 0;
|
|
|
+ min-height: calc(100vh - 100px);
|
|
|
+}
|
|
|
+
|
|
|
+.course-detail-container {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 100px;
|
|
|
+ margin-top: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.flex-center {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-around {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-between {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin: 40px 10vw 80px 10vw;
|
|
|
+}
|
|
|
+
|
|
|
+.course-img {
|
|
|
+ width: 400px;
|
|
|
+ height: 230px;
|
|
|
+ margin-left: -80px
|
|
|
+}
|
|
|
+
|
|
|
+.course-img > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ object-position: center center;
|
|
|
+}
|
|
|
+
|
|
|
+.course-info {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ margin-left: 32px;
|
|
|
+ margin-right: -80px;
|
|
|
+}
|
|
|
+
|
|
|
+.course-info-main {
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ color: #777777;
|
|
|
+ margin-top: 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px;
|
|
|
+ width: 350px;
|
|
|
+}
|
|
|
+
|
|
|
+.course-info > div {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.course-info > div:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.course-info .mooc-link .el-link {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.course-info .mooc-link .el-link:hover {
|
|
|
+ color: #79bbff;
|
|
|
+}
|
|
|
+
|
|
|
+.introduce-content {
|
|
|
+ white-space: pre-wrap;
|
|
|
+ margin-top: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 26px;
|
|
|
+ color: #333333;
|
|
|
+ padding: 10px 0 10px 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #f6f6f6;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.course-tabs {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.course-tab-content {
|
|
|
+ margin-top: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.sel-notice-type {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 45px;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+
|
|
|
+.sel-project-type {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 45px;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+
|
|
|
+.project-type-icon {
|
|
|
+ border-radius: 24px;
|
|
|
+ border: 2px solid;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 4px 12px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.project-type-txt {
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.notice-type-icon {
|
|
|
+ border-radius: 24px;
|
|
|
+ border: 2px solid;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 4px 12px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.notice-type-txt {
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.el-dialog__title {
|
|
|
+ font-size: 22px;
|
|
|
+}
|
|
|
+
|
|
|
+.new-notice-content {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 24px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.new-notice-content .new-notice-item {
|
|
|
+ height: 40px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.content-description-area {
|
|
|
+ height: 100px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 6px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.new-notice-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.new-notice-item > span, .content-description-area > span {
|
|
|
+ min-width: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-vc {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.new-notice-item .mini-name-icon {
|
|
|
+ margin-left: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ color: white;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.new-notice-btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.task-title {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.task-info {
|
|
|
+ padding: 5px 0 0 5px;
|
|
|
+}
|
|
|
+
|
|
|
+#eval-button:hover {
|
|
|
+ font-size: 17px
|
|
|
+}
|
|
|
+
|
|
|
+#coder-button:hover {
|
|
|
+ font-size: 17px;
|
|
|
+}
|
|
|
+
|
|
|
+.comment {
|
|
|
+ margin: 30px 0 0 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.comment-child {
|
|
|
+ padding: 20px 0 0 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.reply-button {
|
|
|
+ padding: 2px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-left: 20px;
|
|
|
+ font-size: small;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #808080;
|
|
|
+}
|
|
|
+
|
|
|
+.reply-button:hover {
|
|
|
+ background: #a5d1ff;
|
|
|
+}
|
|
|
+
|
|
|
+.announcement-content {
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 10px 0 0 20px;
|
|
|
+ white-space: pre-wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.el-timeline-item {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.el-timeline-item:hover {
|
|
|
+ background-color: #F0F0F0;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-content{
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+</style>
|
