mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-11 11:56:48 +08:00
1158 lines
37 KiB
Vue
1158 lines
37 KiB
Vue
<template>
|
|
<div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
|
|
<div class="faceteach" style="padding: 30px">
|
|
<!-- 面包屑导航 -->
|
|
<div class="crumb">
|
|
<div>课程列表</div>
|
|
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
|
<div style="font-weight: 700">课程报名</div>
|
|
<div v-if="pName != ''" class="return">
|
|
<div style="display: flex" @click="returnclick">
|
|
<el-button style="color:#0073FB"><img class="img2" style="margin-right:11px;cursor: pointer;"
|
|
src="../../assets/image/return.png"/>返回
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 面包屑导航 -->
|
|
<!-- 基本信息 -->
|
|
<div class="bascinfo">
|
|
<div style="display:flex;">
|
|
<img style="width:405px;height:230px;margin-left: 48px;border-radius: 8px;margin-top: 40px;"
|
|
:src="data.offcourseDto?.picUrl" alt="">
|
|
<div style="margin-left: 40px;margin-top: 56px;">
|
|
<div class="title">【面授课】{{ data.planDto?.name }}</div>
|
|
<div class="time" style="margin-top: 30px">
|
|
<img style="width: 15px; height: 17px" src="../../assets/image/time.png"/>
|
|
<div style="margin-left: 8px">
|
|
{{
|
|
data.planDto?.beginTime + " 至 " + data.planDto?.endTime
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div v-if="data.planDto.address" class="time" style="margin-top: 10px">
|
|
<img style="width: 16px; height: 18px" src="../../assets/image/position.png"/>
|
|
<div style="margin-left: 8px">{{ data.planDto?.address }}</div>
|
|
</div>
|
|
<div class="time" style="margin-top: 37px">
|
|
<botton
|
|
class="btn"
|
|
style="margin-right: 20px;width: 160px;height: 46px;"
|
|
v-if="data.planDto.applyFlag"
|
|
@click="onLineSignUp(false)"
|
|
:style="{ background: isAllowSign?data.isSignUp || data.isRefused ? '#999' : 'rgb(57, 146, 249)':'#999'}">
|
|
{{
|
|
data.isRefused ? '审核拒绝' : data.isSignUp? '已报名' :'立即报名'
|
|
}}
|
|
</botton>
|
|
<botton
|
|
v-if="data.isRefused && !data.isSignUpAgain"
|
|
class="btn"
|
|
style="margin-right: 20px;width: 160px;height: 46px;"
|
|
@click="onLineSignUp(true)">
|
|
重新报名
|
|
</botton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex">
|
|
</div>
|
|
</div>
|
|
<!-- 基本信息 -->
|
|
<!-- 详细信息 -->
|
|
<div class="detailinfo">
|
|
<div class="detail">
|
|
<div class="detailB">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="课程介绍" name="first">
|
|
<div class="notice" style="padding:20px;font-size:14px;">
|
|
{{ data.offcourseDto?.intro || "暂无课程介绍" }}
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="课程大纲" name="second">
|
|
<div style="display: flex; align-items: center">
|
|
<div style="padding:20px;" class="content" v-html="data.offcourseDto?.outline"></div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="课程评论" name="third" :disabed=dayjs().isBefore(dayjs(data.planDto.beginTime))>
|
|
<div class="bascinfor">
|
|
<div class="inputone">
|
|
<el-input
|
|
ref="refInput"
|
|
v-model="disComment.content"
|
|
:autosize="{ minRows: 5, maxRows: 5 }"
|
|
resize="none"
|
|
maxlength="100"
|
|
type="textarea"
|
|
placeholder="写评论~"
|
|
/>
|
|
<div class="words">{{ disComment.content.length }}/100</div>
|
|
<div class="upload">
|
|
<div style="display: flex">
|
|
<div
|
|
class="allimg"
|
|
v-for="(img, i) in fileListComment"
|
|
:key="i"
|
|
>
|
|
<div
|
|
class="imgone"
|
|
:style="{
|
|
backgroundImage: `url('${img.url}')`,
|
|
marginLeft: '15px',
|
|
}"
|
|
></div>
|
|
<div class="cha" @click="removeCommentImg(i)"></div>
|
|
</div>
|
|
</div>
|
|
<div class="uploadAnd">
|
|
<div v-if="3>5" class="btnone clearfix">
|
|
<UploadPostImg v-model="commentSubmitFileList" @fileUploadValue="uploadBack">
|
|
<button class="btwwo">
|
|
<img class="image" src="../../assets/image/uploadimg.png" />
|
|
<div class="shangchuan">上传图片</div>
|
|
</button>
|
|
</UploadPostImg>
|
|
</div>
|
|
<button class="btntwo" @click="submitComment" v-loading="submitLoading">发表评论</button>
|
|
</div>
|
|
</div>
|
|
<div class="thinline"></div>
|
|
<div class="bottom">
|
|
<div v-for="(row, i) in commontList" :key="i" style="margin-bottom: 24px;">
|
|
<div class="header">
|
|
<img :src="row.studentAvatar" alt="" srcset="" class="avator">
|
|
<div class="id">{{ row.createName }}</div>
|
|
<div class="showCareer">{{row.studentJobName}}</div>
|
|
<div class="idThink"></div>
|
|
</div>
|
|
<div class="discuss clearfix">
|
|
<div class="discussmain clearfix">
|
|
<div class="talkmain">
|
|
{{ row.content }}
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;margin-top: 12px;margin-bottom: 12px;">
|
|
<div v-if="row.img" v-for="(rowimg, index) in row.img.split(',')" :key="index" style="width:55px;height:55px;margin-right: 12px;">
|
|
<img class="image" style="width:55px;height:55px;border-radius: 4px;" :src="rowimg" />
|
|
</div>
|
|
</div>
|
|
<div class="intime">{{ row.ctime }}</div>
|
|
<div class="likeYou">
|
|
<div
|
|
@click="commentComment(row)"
|
|
style="display: flex; cursor: pointer; align-items: baseline"
|
|
>
|
|
<span
|
|
class="iconfont icon-pinglun"
|
|
:style="{ color: '#b3bdc4' }"
|
|
></span>
|
|
<!-- <div class="count"> {{ row.praiseNum || 0 }}</div>-->
|
|
</div>
|
|
<div
|
|
@click="commentLike(row)"
|
|
style="display: flex;cursor: pointer;align-items: baseline;margin-left: 19px;">
|
|
<span
|
|
class="iconfont icon-dianzan"
|
|
:style="{ color: row.praised ? '#2478ff' : '#b3bdc4' }"></span>
|
|
<div class="count" :style="{color:row.praised ? '#2478ff' : '#b3bdc4'}">{{ row.praiseNum || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- 评论下的回复 -->
|
|
<div v-if="row.children.length!==0" :style="{height:spreadReply==i ? 'auto' : 210 +'px',overflow:'hidden',position: 'relative'}">
|
|
<div v-for="(replay, j) in row.children" :key="j">
|
|
<div class="reply">
|
|
<img :src="replay.studentAvatar" alt="" srcset="" class="sameava avaone">
|
|
<div class="sameuser">{{ replay.studentName }}</div>
|
|
<div class="centerreply">回复</div>
|
|
<img :src="replay.targetStudentAvatar" alt="" srcset="" class="sameava avaone">
|
|
<div class="sameuser">{{ replay.targetStudentName }}</div>
|
|
<div class="replytime">{{ replay.createTime }}</div>
|
|
</div>
|
|
<div style="display:flex;margin-top: 12px;margin-bottom: 12px;">
|
|
<div v-if="replay.img" v-for="(rowimg, index) in replay.img.split(',')" :key="index" style="width:65px;height:65px;margin-right: 7px;">
|
|
<img class="image" style="width:65px;height:65px;border-radius: 4px;" :src="rowimg" />
|
|
</div>
|
|
</div>
|
|
<div class="mainreply">
|
|
<div class="replydetail">
|
|
{{ replay.content }}
|
|
</div>
|
|
<!-- <div class="talk"></div> -->
|
|
</div>
|
|
<div class="likeYou">
|
|
<div
|
|
@click="commentComment(replay)"
|
|
style="display: flex;cursor: pointer;align-items: baseline;">
|
|
<span
|
|
class="iconfont icon-pinglun"
|
|
:style="{ color: '#b3bdc4' }"></span>
|
|
<!-- <div class="count"> {{ replay.commentNum }}</div>-->
|
|
</div>
|
|
<div
|
|
style="display: flex; cursor: pointer; align-items: baseline;margin-left: 19px;"
|
|
@click="commentLike(replay)">
|
|
<span
|
|
class="iconfont icon-dianzan"
|
|
:style="{ color: replay.praised ? '#2478ff' : '#b3bdc4' }"></span>
|
|
<div class="count" :style="{color:replay.praised ? '#2478ff' : '#b3bdc4'}">{{ replay.praiseNum || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 查看更多 -->
|
|
<div style="display: flex;justify-content: center;align-items: center;position:absolute;bottom:0px;cursor: pointer;width:100%">
|
|
<span
|
|
@click="lookMore(i)"
|
|
style="font-size: 14px;color: #2478ff;">{{ i==spreadReply ? '收起' : '查看更多' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 回复分页 -->
|
|
<div style="display:flex;justify-content:center;align-items:center;margin-top:36px;margin-bottom:36px;">
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
v-model:current-page="hfPage.currentPage"
|
|
:page-size="hfPage.pageSize"
|
|
:small="small"
|
|
layout="prev, pager, next, jumper"
|
|
:total="hfPage.total"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="discuss clearfix"
|
|
v-if="commontList && commontList.length">
|
|
<div class="inreply">
|
|
<el-input
|
|
v-model="replayComment.content"
|
|
:autosize="{ minRows: 5, maxRows: 5 }"
|
|
resize="none"
|
|
maxlength="100"
|
|
type="textarea"
|
|
:placeholder="replayComment.placeholder"
|
|
/>
|
|
<div class="words">{{ replayComment.content.length }}/100</div>
|
|
<div class="upload">
|
|
<div style="display: flex">
|
|
<div class="allimg" v-for="(img, i) in fileListCommentRelpay" :key="i">
|
|
<div
|
|
class="imgone"
|
|
:style="{
|
|
backgroundImage: `url('${img.url}')`,
|
|
marginLeft: '15px',
|
|
}"
|
|
></div>
|
|
<div class="cha" @click="removeImg(i)"></div>
|
|
</div>
|
|
</div>
|
|
<datagrid class="uploadAnd">
|
|
<UploadPostImg v-if="3>5" v-model="fileListCommentRelpay" @fileUploadValue="uploadReplyBack">
|
|
<button class="btnone clearfix">
|
|
<img
|
|
class="image"
|
|
src="../../assets/image/uploadimg.png"
|
|
/>
|
|
<div class="shangchuan">上传图片</div>
|
|
</button>
|
|
</UploadPostImg>
|
|
<button class="btntwo" @click="submitReplayComment" style="top:206px;" v-loading="submitReplayLoading">
|
|
回复
|
|
</button>
|
|
</datagrid>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="材料下载" name="four" >
|
|
<div v-if="data.planDto?.attach == ''"
|
|
style="font-size: 14px;font-weight: 400; line-height: 24px; cursor: pointer;margin-left: 40px; margin-top: 20px;">
|
|
此课程无附件
|
|
</div>
|
|
<div v-else>
|
|
<div v-for="(el, index) in formateArr(data.planDto.attach)" :key="index" class="enclosure"
|
|
:style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }">
|
|
<div class="enclosureL">
|
|
<FileTypeImg :v-model="el.slice(el.lastIndexOf('/')+1,el.indexOf('-')) + el.slice(el.lastIndexOf('.'))" :style="{
|
|
width: '22px',
|
|
height: '26px',
|
|
marginLeft: '10px',
|
|
}"></FileTypeImg>
|
|
<div style="margin-left: 20px">{{ el.slice(el.lastIndexOf('/')+1,el.indexOf('-')) + el.slice(el.lastIndexOf('.')) }}</div>
|
|
</div>
|
|
<div class="download">
|
|
<img style="width: 16px; height: 15px" src="../../assets/image/download.png"/>
|
|
<!-- <div style="margin-left: 5px;color:#999;">
|
|
下载
|
|
</div> -->
|
|
<div style="margin-left: 5px;color:#2478ff;" @click="download(el)">
|
|
下载
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
<div class="teacher">
|
|
<div class="title">
|
|
<img style="width: 21px; height: 23px" src="../../assets/image/livelecturer.png"/>
|
|
<div class="text">面授课讲师</div>
|
|
<div class="box"></div>
|
|
</div>
|
|
<!-- todo #面授课接口 讲师缺少img和介绍-->
|
|
<div class="teacheritem">
|
|
<img class="peopleimg" :src="teacherInfo.avatar"/>
|
|
<div class="nameSpan">
|
|
<div class="teacherName" style="margin-right: 5px">
|
|
{{ data.planDto?.teacher }}
|
|
</div>
|
|
<div class="introduce">{{ data.planDto?.bandDesc }}</div>
|
|
</div>
|
|
<!-- <div class="follow">+ 关注</div>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 详细信息 -->
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import {computed, reactive, toRefs, watch, onUnmounted, ref} from "vue";
|
|
import FileTypeImg from "@/components/FileTypeImg.vue";
|
|
import {request, useRequest} from "@/api/request";
|
|
import {
|
|
STU_OFFCOURSE_DETAIL,
|
|
FACETEACH_SIGNUP,
|
|
COMMENT_ADD,
|
|
COMMENT_LIST,
|
|
COMMENT_PRAISE,
|
|
PostPraise,
|
|
PostDetails,
|
|
} from "@/api/api";
|
|
import {useRoute, useRouter} from "vue-router";
|
|
import {useUserInfo} from "@/api/utils";
|
|
import {ElMessage, messageConfig} from "element-plus";
|
|
import dayjs from "dayjs";
|
|
const router = useRouter();
|
|
const returnclick = () => {
|
|
router.back();
|
|
};
|
|
const {
|
|
query: {courseId, type, id: taskId},
|
|
} = useRoute();
|
|
const {data = {}} = useRequest(STU_OFFCOURSE_DETAIL, {courseId});
|
|
const teacherInfo = useUserInfo(
|
|
computed(() => data.value?.planDto?.teacherId)
|
|
);
|
|
const state = reactive({
|
|
activeName: "first",
|
|
enclosure: "",
|
|
isAllowSign: false,
|
|
});
|
|
const {activeName, enclosure, isAllowSign} = toRefs(state);
|
|
const handleClick = (tab, event) => {
|
|
console.log("附件", tab, event);
|
|
};
|
|
const fielPath = ref(import.meta.env.VITE_FILE_PATH);
|
|
const download = (url) => {
|
|
console.log('下载url',fielPath.value+url)
|
|
window.open(fielPath.value+url);
|
|
};
|
|
const downloads = (url) => {
|
|
ElMessage.warning("未在有效时间范围内，请耐心等待！");
|
|
};
|
|
//判断能否报名 (TODO-大于面授课截止时间就不能报名了，其余均可以)
|
|
function isSignClick() {
|
|
let endTime = new Date(data.value.planDto?.endTime).getTime()
|
|
let nowTime = new Date().getTime();
|
|
if (nowTime < endTime) {
|
|
state.isAllowSign = true;
|
|
} else {
|
|
state.isAllowSign = false;
|
|
}
|
|
console.log(state.isAllowSign)
|
|
}
|
|
watch(data,()=>{
|
|
isSignClick();
|
|
})
|
|
// 查看更多-展开回复列表
|
|
function lookMore(i) {
|
|
i == spreadReply.value ? spreadReply.value = -1 : spreadReply.value = i;
|
|
}
|
|
// 获取评论数据
|
|
const hfPage = ref({
|
|
currentPage: 1,
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0
|
|
})
|
|
const disComment = ref({
|
|
content: "",
|
|
});
|
|
// 获取数据
|
|
const getData = () => {
|
|
// 获取面授课下的评论
|
|
request(COMMENT_LIST, {
|
|
id: courseId,
|
|
type: 2,
|
|
current:hfPage.value.currentPage,
|
|
pageNo:hfPage.value.currentPage,
|
|
pageSize:10
|
|
}).then(res=>{
|
|
console.log('我是获取当前帖子的评论', res)
|
|
commontList.value = res.data.records;
|
|
hfPage.value.total = Number(res.data.total);
|
|
submitLoading.value = false;
|
|
submitReplayLoading.value = false;
|
|
clearText()
|
|
}).catch(err=>{
|
|
console.log(err)
|
|
submitLoading.value = false;
|
|
submitReplayLoading.value = false;
|
|
})
|
|
}
|
|
// 回复分页
|
|
function handleCurrentChange(e, k) {
|
|
console.log('分页打印', e, k)
|
|
hfPage.value.currentPage = e;
|
|
hfPage.value.pageNo = e;
|
|
getData();
|
|
}
|
|
getData()
|
|
const disDetail = ref({});
|
|
const commontList = ref([]);
|
|
const spreadReply = ref(-1);
|
|
const replayComment = ref({
|
|
placeholder: "",
|
|
content: "",
|
|
pid: "",
|
|
});
|
|
// 清空回复及评论输入框
|
|
const clearText = () => {
|
|
disComment.value.content = "";
|
|
fileListComment.value = [];
|
|
fileListCommentRelpay.value = [];
|
|
replayComment.value.content = "";
|
|
}
|
|
// 评论图片展示数组
|
|
const fileListComment = ref([]);
|
|
// 回复图片展示数组
|
|
const fileListCommentRelpay = ref([]);
|
|
// 上传图片成功返回的URL
|
|
const uploadBack = (e) => {
|
|
console.log('--------->', e)
|
|
fileListComment.value.push(e)
|
|
}
|
|
const uploadReplyBack = (e) => {
|
|
console.log('--------->', e)
|
|
fileListCommentRelpay.value.push(e)
|
|
}
|
|
function removeImg(i) {
|
|
fileListCommentRelpay.value.splice(i, 1);
|
|
}
|
|
function removeCommentImg(i) {
|
|
fileListComment.value.splice(i, 1);
|
|
}
|
|
function commentLike(obj) {
|
|
obj.praised ? (obj.praiseNum = Number(obj.praiseNum) - 1) : (obj.praiseNum = Number(obj.praiseNum) + 1);
|
|
obj.praised = !obj.praised;
|
|
request(COMMENT_PRAISE, { targetId: obj.id, type: 1 });
|
|
}
|
|
function commentComment(obj) {
|
|
console.log(obj)
|
|
replayComment.value.placeholder = "@ " + obj.createName;
|
|
replayComment.value.pid = obj.id;
|
|
}
|
|
const submitLoading = ref(false);
|
|
// 提交评论
|
|
function submitComment() {
|
|
if(disComment.value.content==""){
|
|
ElMessage.error(`请输入评论内容`);
|
|
return
|
|
}
|
|
if(submitLoading.value){
|
|
ElMessage.error(`请勿频繁点击`)
|
|
return
|
|
}
|
|
submitLoading.value = true;
|
|
console.table('面授课评论参数',{
|
|
id: courseId,
|
|
targetId: courseId,
|
|
content: disComment.value.content,
|
|
type: 2,
|
|
})
|
|
|
|
request(COMMENT_ADD, {
|
|
id: courseId,
|
|
targetId: courseId,
|
|
content: disComment.value.content,
|
|
type: 2,
|
|
}).then((res) => {
|
|
console.log(res)
|
|
getData();
|
|
}).catch(err=>{
|
|
submitLoading.value = false;
|
|
console.log(err)
|
|
});
|
|
}
|
|
const submitReplayLoading = ref(false);
|
|
// 回复评论
|
|
function submitReplayComment() {
|
|
if(replayComment.value.content==""){
|
|
ElMessage.error(`请输入回复内容`);
|
|
return
|
|
}
|
|
if(submitReplayLoading.value){
|
|
ElMessage.error(`请勿频繁点击`)
|
|
return
|
|
}
|
|
submitReplayLoading.value = true;
|
|
console.table('帖子回复评论参数',{
|
|
id: courseId,
|
|
targetId: courseId,
|
|
content: replayComment.value.content,
|
|
type: 2,
|
|
pid: replayComment.value.pid
|
|
})
|
|
|
|
request(COMMENT_ADD, {
|
|
id: courseId,
|
|
targetId: courseId,
|
|
content: replayComment.value.content,
|
|
type: 2,
|
|
pid: replayComment.value.pid
|
|
}).then((res) => {
|
|
console.log(res)
|
|
getData();
|
|
}).catch(err=>{
|
|
console.log(err)
|
|
submitReplayLoading.value = false;
|
|
});
|
|
}
|
|
// 报名
|
|
function onLineSignUp(isAgain) {
|
|
if (!state.isAllowSign) {
|
|
// console.log("data.signFlag", data.value.signFlag, isAllowSign);
|
|
ElMessage.warning("未在允许报名时间范围内");
|
|
return;
|
|
}
|
|
if(data.value.isSignUp && !isAgain){
|
|
return;
|
|
}
|
|
request(FACETEACH_SIGNUP, {courseId})
|
|
data.value.isSignUp = true
|
|
//重置按钮
|
|
data.value.isSignUpAgain = isAgain;
|
|
data.value.isRefused = false;
|
|
ElMessage.success(isAgain? "重新报名成功" : "报名成功");
|
|
}
|
|
function formateArr(strs) {
|
|
let arrs = strs.split(',')
|
|
console.log('112233', arrs)
|
|
return arrs
|
|
}
|
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style lang="scss">
|
|
.faceteach {
|
|
.crumb {
|
|
color: #fff;
|
|
display: flex;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
}
|
|
.bascinfo {
|
|
width: 100%;
|
|
height: 310px;
|
|
border-radius: 8px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
margin-top: 37px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.btn {
|
|
width: 146px;
|
|
height: 46px;
|
|
background: #2478ff;
|
|
border-radius: 4px;
|
|
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
line-height: 24px;
|
|
cursor: pointer;
|
|
margin-right: 96px;
|
|
}
|
|
.title {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: #333333;
|
|
line-height: 24px;
|
|
margin-left: -9px;
|
|
}
|
|
.time {
|
|
font-size: 14px;
|
|
color: #6e7b84;
|
|
line-height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.return {
|
|
position: absolute;
|
|
right: 10%;
|
|
.text {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.detailinfo {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
.detail {
|
|
flex: 1;
|
|
margin-right: 20px;
|
|
.detailT {
|
|
min-height: 263px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
color: rgba(51, 51, 51, 1);
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 39px;
|
|
position: relative;
|
|
}
|
|
.title .text {
|
|
margin-left: 8px;
|
|
font-size: 16px;
|
|
color: rgba(51, 51, 51, 1);
|
|
font-weight: 800;
|
|
}
|
|
.title .box {
|
|
width: 75px;
|
|
height: 10px;
|
|
background-color: rgba(36, 120, 255, 0.15);
|
|
position: absolute;
|
|
left: 23px;
|
|
top: 53px;
|
|
}
|
|
.content {
|
|
margin-left: 8px;
|
|
font-size: 14px;
|
|
color: rgba(51, 51, 48, 1);
|
|
font-weight: 500;
|
|
line-height: 35px;
|
|
margin-top: 30px;
|
|
padding-bottom: 30px;
|
|
}
|
|
}
|
|
.detailB {
|
|
min-height: 363px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
margin-top: 20px;
|
|
.wenxintishi {
|
|
display: flex;
|
|
justify-content: stretch;
|
|
padding: 72px;
|
|
}
|
|
.el-tabs__item {
|
|
height: 69px;
|
|
padding: 25px 7px 0px 52px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
.el-tabs__nav-wrap::after {
|
|
background-color: rgba(56, 125, 247, 0.2);
|
|
}
|
|
.enclosure {
|
|
height: 89px;
|
|
margin-left: 51px;
|
|
margin-right: 40px;
|
|
// border-bottom: 1px solid rgba(56, 125, 247, 0.2);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.enclosureL {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #677d86;
|
|
line-height: 24px;
|
|
}
|
|
.download {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #2478ff;
|
|
line-height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.work {
|
|
margin-left: 51px;
|
|
margin-right: 40px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 37px;
|
|
}
|
|
.work .question {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333330;
|
|
line-height: 18px;
|
|
}
|
|
.work .submit {
|
|
width: 126px;
|
|
height: 46px;
|
|
background: #2478ff;
|
|
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.teacher {
|
|
width: 434px;
|
|
min-height: 500px;
|
|
// height: 10%;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border-radius: 8px;
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 39px;
|
|
position: relative;
|
|
margin-left: 48px;
|
|
}
|
|
.title .text {
|
|
margin-left: 8px;
|
|
font-size: 16px;
|
|
color: rgba(51, 51, 51, 1);
|
|
font-weight: 800;
|
|
}
|
|
.title .box {
|
|
width: 75px;
|
|
height: 10px;
|
|
background-color: rgba(36, 120, 255, 0.15);
|
|
position: absolute;
|
|
left: 23px;
|
|
top: 53px;
|
|
}
|
|
.teacheritem {
|
|
margin-left: 48px;
|
|
margin-right: 48px;
|
|
// min-height: 115px;
|
|
margin-top: 20px;
|
|
padding: 25px 0px;
|
|
display: flex;
|
|
position: relative;
|
|
// align-items: center;
|
|
}
|
|
.teacheritem .peopleimg {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
}
|
|
.teacheritem {
|
|
.nameSpan {
|
|
width: 190px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.teacherName {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #394145;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
.teacheritem {
|
|
.nameSpan {
|
|
width: 190px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.teacherName {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #394145;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
.teacheritem .introduce {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #394145;
|
|
margin-top: 14px;
|
|
}
|
|
.teacheritem .follow {
|
|
width: 80px;
|
|
height: 30px;
|
|
background: #387df7;
|
|
border-radius: 4px;
|
|
margin-top: 28px;
|
|
position: absolute;
|
|
right: -25px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bascinfor {
|
|
width: 100%;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
margin-top: 24px;
|
|
// position: relative;
|
|
.inputone {
|
|
margin-right: 44px;
|
|
position: relative;
|
|
max-width: 1069px;
|
|
// max-height: 110px;
|
|
margin-left: 88px;
|
|
margin-top: 44px;
|
|
.words {
|
|
position: absolute;
|
|
right: 15px;
|
|
// bottom: 5px;
|
|
top: 130px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333330;
|
|
}
|
|
.el-textarea__inner {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
margin-top: 44px;
|
|
// margin: 23px 50px;
|
|
border-radius: 8px;
|
|
background-color: rgba(245, 246, 247, 1);
|
|
padding: 11px 25px;
|
|
}
|
|
.el-textarea__inner::placeholder {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
line-height: 24px;
|
|
}
|
|
// .el-input__inner {
|
|
// &::-webkit-input-placeholder {
|
|
// /* WebKit browsers 适配谷歌 */
|
|
// color: red;
|
|
// }
|
|
// }
|
|
.upload {
|
|
display: flex;
|
|
height: 100px;
|
|
// background-color: red;
|
|
.allimg {
|
|
position: relative;
|
|
display: flex;
|
|
.imgone {
|
|
margin-top: 24px;
|
|
width: 55px;
|
|
height: 55px;
|
|
border-radius: 8px;
|
|
background-image: url(../../assets/image/px.png);
|
|
background-size: 100%;
|
|
}
|
|
.cha {
|
|
cursor: pointer;
|
|
top: 15px;
|
|
right: -9px;
|
|
// right: 0;
|
|
position: absolute;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background-image: url(../../assets/image/X.png);
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
.uploadAnd {
|
|
margin-top: 21px;
|
|
.btwwo {
|
|
cursor: pointer;
|
|
.image {
|
|
padding-top: 8px;
|
|
width: 18px;
|
|
height: 17px;
|
|
// margin-top: 10px;
|
|
margin-left: -60px;
|
|
}
|
|
.shangchuan {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 7px;
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #2478ff;
|
|
line-height: 24px;
|
|
}
|
|
width: 126px;
|
|
height: 36px;
|
|
border: none;
|
|
background-color: #fff;
|
|
}
|
|
.btnone {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 140px;
|
|
.image {
|
|
padding-top: 8px;
|
|
width: 18px;
|
|
height: 17px;
|
|
// margin-top: 10px;
|
|
margin-left: -60px;
|
|
}
|
|
.shangchuan {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 7px;
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #2478ff;
|
|
line-height: 24px;
|
|
}
|
|
width: 126px;
|
|
height: 36px;
|
|
border: 1px solid #2478ff;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
}
|
|
.btntwo {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
width: 126px;
|
|
height: 36px;
|
|
background: #2478ff;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
border: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
.thinline {
|
|
margin-top: 66px;
|
|
// width: 1635px;
|
|
border-top: 1px solid #878b92;
|
|
margin-left: -50px;
|
|
opacity: 0.2;
|
|
}
|
|
.bottom {
|
|
margin-top: 31px;
|
|
// width: 100px;
|
|
// height: 100px;
|
|
// background-color: #bfa;
|
|
.header {
|
|
display: flex;
|
|
.avator {
|
|
width: 41px;
|
|
height: 41px;
|
|
border-radius: 50%;
|
|
// background-image: url(../../assets/image/px.png);
|
|
background-size: 100%;
|
|
}
|
|
.id {
|
|
margin-left: 8px;
|
|
font-size: 14px;
|
|
height: 41px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
line-height: 41px;
|
|
}
|
|
.showCareer {
|
|
margin-left: 7px;
|
|
height: 41px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
line-height: 41px;
|
|
}
|
|
.idThink {
|
|
margin-left: 17px;
|
|
height: 41px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
line-height: 41px;
|
|
}
|
|
}
|
|
.discuss {
|
|
margin-left: 48px;
|
|
margin-top: 23px;
|
|
// width: 100px;
|
|
width: 100%;
|
|
// height: 100px;
|
|
// background-color: orange;
|
|
.discussmain {
|
|
// background-color: red;
|
|
width: 100%;
|
|
display: flex;
|
|
position: relative;
|
|
.talkmain {
|
|
margin-right: 25px;
|
|
margin-top: 2px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
}
|
|
// .talk {
|
|
// position: absolute;
|
|
// right: 0;
|
|
// width: 23px;
|
|
// height: 23px;
|
|
// background-image: url(../../assets/image/talk.png);
|
|
// background-size: 100%;
|
|
// }
|
|
}
|
|
.intime {
|
|
margin-top: 11px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
}
|
|
.likeYou {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
.same {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.pinglun {
|
|
background-image: url(../../assets/image/pinglun.png);
|
|
background-size: 100%;
|
|
}
|
|
.dianzan {
|
|
background-image: url(../../assets/image/dianzan2.png);
|
|
background-size: 100%;
|
|
}
|
|
.count {
|
|
margin-left: 7px;
|
|
margin-top: -1px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #b3bdc4;
|
|
}
|
|
}
|
|
.reply {
|
|
display: flex;
|
|
margin-top: 32px;
|
|
// height: 100px;
|
|
width: 100%;
|
|
// background-color: lightpink;
|
|
.sameava {
|
|
width: 29px;
|
|
height: 29px;
|
|
border-radius: 50%;
|
|
}
|
|
.sameuser {
|
|
margin-left: 14px;
|
|
line-height: 29px;
|
|
height: 29px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
font-size: 14px;
|
|
}
|
|
.centerreply {
|
|
height: 29px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #4a9cf8;
|
|
line-height: 29px;
|
|
margin-left: 23px;
|
|
margin-right: 17px;
|
|
}
|
|
.avaone {
|
|
// background-image: url(../../assets/image/px.png);
|
|
background-size: 100%;
|
|
}
|
|
.avatwo {
|
|
// background-image: url(../../assets/image/px.png);
|
|
background-size: 100%;
|
|
}
|
|
.replytime {
|
|
margin-left: 17px;
|
|
height: 29px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
line-height: 29px;
|
|
}
|
|
}
|
|
.allreplyimg {
|
|
display: flex;
|
|
margin-top: 21px;
|
|
.singleimg {
|
|
margin-right: 7px;
|
|
width: 65px;
|
|
height: 65px;
|
|
border-radius: 8px;
|
|
background-image: url(../../assets/image/px.png);
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
.mainreply {
|
|
display: flex;
|
|
margin-top: 16px;
|
|
.replydetail {
|
|
height: 23px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
line-height: 23px;
|
|
margin-right: 11px;
|
|
}
|
|
}
|
|
.inreply {
|
|
position: relative;
|
|
margin-top: -22px;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |