|
@@ -0,0 +1,239 @@
|
|
|
+<template>
|
|
|
+ <!-- 课程资源资源 -->
|
|
|
+ <div class="kczyContent-zy" v-loading="loading">
|
|
|
+ <el-card>
|
|
|
+ <div style="padding: 0 75px;">
|
|
|
+ <span class="title">课程资源</span>
|
|
|
+ <span class="subTitle">作业 - 创建 - <span class="pointer" @click="goBack">课程</span> - <span style="color: #000;">资源</span></span>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card class="bgCard">
|
|
|
+ <div class="bgDetail">
|
|
|
+ <div style="font-size: 28px;font-weight: 600;">{{detailInfo.kk_name}}</div>
|
|
|
+ <div class="flex" style="font-size: 16px;margin: 20px 0 30px;">
|
|
|
+ <div>
|
|
|
+ <span>责任教师:</span>
|
|
|
+ <span>{{detailInfo.kk_zrjs}}</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 80px;">
|
|
|
+ <span>机构名称:</span>
|
|
|
+ <span>{{detailInfo.kk_jgmc}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px;line-height: 20px;">
|
|
|
+ 简介:
|
|
|
+ <p>{{detailInfo.kc_jj}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="searchDiv">
|
|
|
+ <div class="searchValue">
|
|
|
+ <input type="text" placeholder="搜索关键字" v-model="searchKey">
|
|
|
+ <div class="searchBtn" @click="initData">
|
|
|
+ <img src="/kczy/searchIcon.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="zyContent">
|
|
|
+ <el-empty v-if="resultData.length==0" image-size="100" description="无数据" style="padding: 10px 0;" />
|
|
|
+ <div class="resultDiv">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="5" v-for="item in resultData" :key="item.name">
|
|
|
+ <el-card class="resultCard pointer" @click="lookDetail(item.kf_id)">
|
|
|
+ <div class="collect">
|
|
|
+ <div class="icon-item" style="margin-right: 18px;">
|
|
|
+ <img src="/images/home/icon-prove.png" alt="">
|
|
|
+ <span>{{item.kf_like_num}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="icon-item">
|
|
|
+ <img src="/images/home/icon-favor.png" alt="">
|
|
|
+ <span>{{item.kf_fav_num}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img style="height: 157px;width: 100%;" :src="getFullUrl(item.kf_img)" alt="" />
|
|
|
+ <div style="padding: 8px 8px 0;">
|
|
|
+ <div style="font-size: 16px;">{{item.kf_name}}</div>
|
|
|
+ <div class="operate">
|
|
|
+ <el-rate size="large" disabled v-model="item.kf_star_num" allow-half />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { kc_detail, files_list } from "../../MyCourse/api";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ workType: "",
|
|
|
+ parentId: "",
|
|
|
+ searchKey: "",
|
|
|
+ detailInfo: {},
|
|
|
+ resultData: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ },
|
|
|
+ initDetailData() {
|
|
|
+ kc_detail({ kk_id: this.parentId }).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.detailInfo = res.data.one_info;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initData() {
|
|
|
+ this.loading = true;
|
|
|
+ let data = {
|
|
|
+ keyword: this.searchKey,
|
|
|
+ kk_id: this.parentId,
|
|
|
+ yzk_id: 1,
|
|
|
+ }
|
|
|
+ files_list(data).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.resultData = res.data.page_data;
|
|
|
+
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ lookDetail(id) {
|
|
|
+ this.$router.push({ name: "personal_homework_wlzb_worklist", params: { workType: this.workType, id }, query: { kkID: this.parentId } });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.workType = this.$route.params.workType;
|
|
|
+ this.parentId = this.$route.params.id;
|
|
|
+ this.initDetailData();
|
|
|
+ this.initData();
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.kczyContent-zy::v-deep {
|
|
|
+ .bgCard {
|
|
|
+ .el-card__body {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-card {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ background: #fff;
|
|
|
+ &.resultCard {
|
|
|
+ .el-card__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pointer {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #050026;
|
|
|
+ }
|
|
|
+ .subTitle {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #949494;
|
|
|
+ margin-left: 45px;
|
|
|
+ }
|
|
|
+ .flex {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .bgDetail {
|
|
|
+ background: url("/kczy/chapterBG.png") no-repeat top left;
|
|
|
+ background-size: 100%;
|
|
|
+ color: #fff;
|
|
|
+ padding: 50px 60px;
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
+ .searchDiv {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin: 30px 0;
|
|
|
+ .searchValue {
|
|
|
+ width: 350px;
|
|
|
+ height: 50px;
|
|
|
+ // margin: 0 auto;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ outline: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 10px;
|
|
|
+ background: #f6f8fa;
|
|
|
+ }
|
|
|
+ .searchBtn {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ background: #00a3ff;
|
|
|
+ border-radius: 6px;
|
|
|
+ position: absolute;
|
|
|
+ right: 5px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ text-align: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ margin: 6px auto 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zyContent {
|
|
|
+ display: flex;
|
|
|
+ // margin-top: 40px;
|
|
|
+ .resultDiv {
|
|
|
+ width: 100%;
|
|
|
+ .el-col-5 {
|
|
|
+ flex: 0 0 20%;
|
|
|
+ }
|
|
|
+ .resultCard {
|
|
|
+ position: relative;
|
|
|
+ border-radius: 12px;
|
|
|
+ .collect {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ background: rgba($color: #000000, $alpha: 0.59);
|
|
|
+ border-radius: 0px 12px 0px 12px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ padding: 0 18px;
|
|
|
+ line-height: 32px;
|
|
|
+ .icon-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 17px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .operate {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|