hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-10 03:16:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat：新增DiscussPage,DicussDetail页面

Browse Source
This commit is contained in:
songwc
2022-09-21 14:50:46 +08:00
parent 61d204cdff
commit 2648c27069
12 changed files with 1474 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/X.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 499 B

BIN
src/assets/image/dianzan2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 353 B

BIN
src/assets/image/pinglun.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 B

BIN
src/assets/image/px.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/assets/image/shoucang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 418 B

BIN
src/assets/image/talk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 893 B

BIN
src/assets/image/uploadimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 722 B

65
src/views/ballot/ballot.vue → src/views/ballot/BallotPage.vue
View File

@@ -57,7 +57,33 @@
<div class="box"></div>
</div>
<div class="join"></div>
<div class="join">
<div class="imgcontent">
<div class="imgone" style="margin-right: 10px"></div>
<div class="imgone"></div>
</div>
<div class="ontitle">
通过对各级人员的软件平台培训，使其能够了解如何运用乾元坤和智能信息管理系统来提升企业管理水平，最大限度发挥软件产品在企业中的作用;
<br />
<br />
● 培训目标
<br />
<br />
1.使企业不同部门人员掌握便捷、有效的系统平台操作方法;
<br />
<br />
2.通过系统平台的培训提高员工对企业的管理理念认识与提升。
<br />
<br />
3.通过系统平台培训加强沟通，统一部署，协同工作，提高效率。
<br />
<br />
●培训对象
<br />
<br />
集团领导、各相关部门领导、总经理、车间主管、车间操作员等;
</div>
</div>
</div>
<div class="right">
<div class="righttitle">
@@ -129,6 +155,12 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.moreactive {
.crumb {
color: #fff;
@@ -172,6 +204,8 @@ export default {
line-height: 24px;
height: 24px;
font-weight: 600;
color: #fff;
margin-left: -10px;
}
.detailinfo {
@@ -182,7 +216,7 @@ export default {
flex: 1;
// margin-right: 20px;
.detailT {
height: 1000px;
min-height: 800px;
background: #ffffff;
border-radius: 8px;
color: rgba(51, 51, 51, 1);
@@ -221,12 +255,7 @@ export default {
border-radius: 4px;
margin-top: 42px;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.innertime {
margin-top: 17px;
margin-left: 55px;
@@ -342,11 +371,25 @@ export default {
.join {
// width: 1280px;
margin-right: 48px;
min-height: 408px;
background: #f5f6f7;
border-radius: 8px;
// min-height: 408px;
// background: #f5f6f7;
// border-radius: 8px;
margin-top: 32px;
flex: 1;
.imgcontent {
display: flex;
.imgone {
width: 140px;
height: 140px;
border-radius: 8px;
background-image: url(../../assets/image/px.png);
}
}
.ontitle {
margin-top: 27px;
font-size: 14px;
color: #333330;
}
}
}
.detailB {

2
src/views/debate/debate.vue → src/views/debate/DebatePage.vue
View File

@@ -384,6 +384,8 @@ export default {
line-height: 24px;
height: 24px;
font-weight: 600;
color: #fff;
margin-left: -10px;
}
.detailinfo {

311
src/views/discuss/DiscussPage.vue Normal file
View File

@@ -0,0 +1,311 @@
<template>
<div class="surveydetail">
<!-- 面包屑导航 -->
<div
style="display: flex; align-items: center; justify-content: space-between"
>
<div class="crumb">
<div>混合制项目</div>
<div style="margin-left: 6px; margin-right: 6px">/</div>
<div>管理者进阶-腾飞班</div>
<div style="margin-left: 6px; margin-right: 6px">/</div>
<div style="font-weight: 700; font-size: 16px">讨论详情</div>
</div>
<div class="prevnext">
<div class="prev">
<img
style="width: 23px; height: 23px"
src="../../assets/image/prev.png"
/>
<div style="margin-left: 7px">上一个</div>
</div>
<div class="prev" style="margin-left: 31px">
<div style="margin-right: 7px">下一个</div>
<img
style="width: 23px; height: 23px"
src="../../assets/image/next.png"
/>
</div>
</div>
</div>
<!-- 面包屑导航 -->
<!-- 标题 -->
<div class="title">【调研】管理者进阶腾飞班 - 班内成员讨论</div>
<!-- 标题 -->
<!-- 详细内容 -->
<div class="bascinfo clearfix">
<!-- 中间部分 -->
<div class="middletitle">
<div class="title">
请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求
</div>
<button class="btn">发表帖子</button>
</div>
<div class="line clearfix">
<div class="linetitle">第二讲：模块化产品展示：班内成员讨论</div>
<div class="radi"></div>
<div class="intime">进行中</div>
</div>
<div class="allbtn">
<button class="btnone">最新</button>
<button class="btntwo" style="margin-left: 20px">最热</button>
</div>
<div class="discusslist">
<div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
<div class="itemdiscuss">
所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
</div>
<div class="allstar clearfix">
<div class="sameone pinglun"></div>
<div class="count">317</div>
<div class="sameone dianzan"></div>
<div class="count">317</div>
<div class="sameone shoucang"></div>
<div class="count">317</div>
</div>
<div class="thinline"></div>
</div>
<div class="discusslist">
<div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
<div class="itemdiscuss">
所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
</div>
<div class="allstar clearfix">
<div class="sameone pinglun"></div>
<div class="count">317</div>
<div class="sameone dianzan"></div>
<div class="count">317</div>
<div class="sameone shoucang"></div>
<div class="count">317</div>
</div>
<div class="thinline"></div>
</div>
<div class="discusslist">
<div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
<div class="itemdiscuss">
所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
</div>
<div class="allstar clearfix">
<div class="sameone pinglun"></div>
<div class="count">317</div>
<div class="sameone dianzan"></div>
<div class="count">317</div>
<div class="sameone shoucang"></div>
<div class="count">317</div>
</div>
<div class="thinline"></div>
</div>
<div class="discusslist">
<div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
<div class="itemdiscuss">
所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
</div>
<div class="allstar clearfix">
<div class="sameone pinglun"></div>
<div class="count">317</div>
<div class="sameone dianzan"></div>
<div class="count">317</div>
<div class="sameone shoucang"></div>
<div class="count">317</div>
</div>
<div class="thinline" style="margin-bottom: 60px"></div>
</div>
</div>
<!-- 详细内容 -->
</div>
</template>
<script>
export default {
name: "DiscussPage",
};
</script>
<style scoped lang="scss">
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.surveydetail {
.crumb {
color: #fff;
display: flex;
font-size: 14px;
line-height: 24px;
}
.prevnext {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
color: #ffffff;
.prev {
display: flex;
align-items: center;
cursor: pointer;
}
}
.title {
font-size: 20px;
font-weight: 800;
color: #ffffff;
line-height: 24px;
margin-top: 17px;
margin-left: -11px;
}
.bascinfo {
min-height: 800px;
width: 100%;
background: #ffffff;
border-radius: 8px;
margin-top: 24px;
// display: flex;
// flex-direction: column;
// align-items: center;
.middletitle {
display: flex;
margin-top: 64px;
position: relative;
.title {
font-size: 24px;
font-weight: 800;
color: #4a9cf8;
margin-left: 79px;
margin-right: 210px;
}
@media screen and (max-width: 1574px) {
.title {
margin-bottom: -24px;
}
}
.btn {
cursor: pointer;
position: absolute;
width: 146px;
height: 46px;
background: #2478ff;
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
border-radius: 4px;
border: 0;
font-size: 16px;
font-weight: 800;
color: #ffffff;
right: 45px;
top: 5px;
}
}
.line {
display: flex;
margin: 47px 45px 0 75px;
max-width: 1810px;
height: 50px;
background: #f9f9f9;
position: relative;
.linetitle {
margin: 14px 0 17px 28px;
font-size: 16px;
font-weight: 800;
color: #333333;
}
.radi {
position: absolute;
width: 11px;
height: 11px;
border: 2px solid #0060ff;
border-radius: 50%;
margin-top: 19px;
right: 91px;
}
.intime {
position: absolute;
margin-top: 15px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 800;
color: #0060ff;
right: 36px;
}
}
.allbtn {
margin-top: 21px;
margin-left: 105px;
.btnone {
width: 44px;
height: 26px;
background: #387df7;
border-radius: 4px;
border: 0;
font-size: 14px;
font-weight: 500;
color: #ffffff;
cursor: pointer;
}
.btntwo {
font-size: 14px;
font-weight: 500;
color: #6e7b84;
background-color: #fff;
border: 0;
cursor: pointer;
}
}
.discusslist {
margin-left: 105px;
margin-top: 39px;
.itemtitle {
font-size: 16px;
font-weight: 500;
color: #333333;
}
.itemdiscuss {
margin-top: 15px;
width: 812px;
height: 39px;
font-size: 14px;
font-weight: 500;
color: #666666;
line-height: 24px;
}
.allstar {
display: flex;
margin-top: 18px;
// margin-left: 105px;
.sameone {
width: 14px;
height: 14px;
}
.count {
margin-left: 7px;
font-size: 14px;
font-weight: 500;
color: #b3bdc4;
}
.pinglun {
background-image: url(../../assets/image/pinglun.png);
}
.dianzan {
margin-left: 19px;
background-image: url(../../assets/image/dianzan2.png);
}
.shoucang {
margin-left: 19px;
background-image: url(../../assets/image/shoucang.png);
}
}
.thinline {
max-width: 1450px;
margin-top: 33px;
border-top: 1px solid #999999;
opacity: 0.2;
}
}
}
}
</style>

741
src/views/discussdetail/DiscussDetail.vue Normal file
View File

@@ -0,0 +1,741 @@
<template>
<div class="surveydetail">
<!-- 面包屑导航 -->
<div
style="display: flex; align-items: center; justify-content: space-between"
>
<div class="crumb">
<div>混合制项目</div>
<div style="margin-left: 6px; margin-right: 6px">/</div>
<div>管理者进阶-腾飞班</div>
<div style="margin-left: 6px; margin-right: 6px">/</div>
<div style="font-weight: 700; font-size: 16px">讨论详情</div>
</div>
<div class="prevnext">
<div class="prev">
<img
style="width: 23px; height: 23px"
src="../../assets/image/prev.png"
/>
<div style="margin-left: 7px">上一个</div>
</div>
<div class="prev" style="margin-left: 31px">
<div style="margin-right: 7px">下一个</div>
<img
style="width: 23px; height: 23px"
src="../../assets/image/next.png"
/>
</div>
</div>
</div>
<!-- 面包屑导航 -->
<!-- 标题 -->
<div class="title">【调研】管理者进阶腾飞班 - 班内成员讨论</div>
<!-- 标题 -->
<!-- 详细内容 -->
<div class="bascinfo clearfix">
<!-- 中间部分 -->
<div class="middletitle">
<div class="title">
请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求
</div>
<button class="btn">回复</button>
</div>
<div class="line clearfix">
<div class="linetitle">第二讲：模块化产品展示：班内成员讨论</div>
<div class="radi"></div>
<div class="intime">进行中</div>
</div>
<div class="discusscontent clearfix">
<div class="contenttop clearfix">
<div class="contenttitle">从营销角度分析：我的团队需要这些能力</div>
<div class="same dianzan"></div>
<div class="count">103</div>
<div class="same shoucang"></div>
<div class="count">103</div>
</div>
<div class="contentmid">
所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。<br />
包容成员<br />
团队工作需要成员在一起不断地讨论，如果一个人固执己见，无法听取他人的意见，或无法和他人达成一致，团队的工作就无法进行下去。团队的效率在于配合的默契，如果达不成这种默契，团队合作就不可能成功。为此，对待团队中其他成员时一定要抱着宽容的心态，讨论问题的时候对事不对人，即使他人犯了错误，也要本着大家共同进步的目的去帮对方改正，而不是一味斥责。同时也要经常检查自己的缺点，如果意识到了自己的缺点，不妨将它坦诚地讲出来，承认自己的缺点，让大家共同帮助你改进，
这是最有效的方法。 <br />
获得支持<br />
要使自己的工作得到大家的支持和认可，而不是反对，必须让大家喜欢你。但一个人又如何让别人来喜欢你呢?除了在工作中互相支援、互相鼓励外，还应该尽量和大家一起去参加各种活动，或者礼貌地关心一下大家的生活。<br />
保持谦虚<br />
任何人都不喜欢骄傲自大的人，这种人在团队合作中也不会被大家认可。可能你在某个方面比其他人强，但你更应该将自己的注意力放在他人的强项上，只有这样，才能看到自己的肤浅和无知。因为团队中的任何一位成员，都有自己的专长，所以必须保持足够的谦虚。
</div>
</div>
</div>
<div class="bascinfor">
<div class="inputone">
<el-input
v-model="textarea1"
:autosize="{ minRows: 5, maxRows: 5 }"
resize="none"
maxlength="100"
type="textarea"
placeholder="写评论~"
@input="textareaInput"
/>
<div class="words">{{ textarealength }}/100</div>
<div class="upload">
<div class="allimg">
<div>
<div class="imgone"></div>
<div class="cha"></div>
</div>
<div style="margin-left: 15px">
<div class="imgone"></div>
<div class="cha" style="right: 131px"></div>
</div>
<div style="margin-left: 15px">
<div class="imgone"></div>
<div class="cha" style="right: 61px"></div>
</div>
</div>
<datagrid class="uploadAnd">
<button class="btnone clearfix">
<img class="image" src="../../assets/image/uploadimg.png" />
<div class="shangchuan">上传图片</div>
</button>
<button class="btntwo">发表</button>
</datagrid>
</div>
<div class="thinline"></div>
<div class="bottom">
<div class="header">
<div class="avator"></div>
<div class="id">罗宗梅</div>
<div class="showCareer">(显示事业)</div>
<div class="idThink">理性思考，崇尚科学</div>
</div>
<div class="discuss clearfix">
<div class="discussmain clearfix">
<div class="talkmain">
教师基本功扎实，知识讲解准确，教学设计合理，始终以学生为主体，自主学习，小组交流讨论，上台交流展示等形式，师生配合默契，取得了较好的学习效果。
</div>
<div class="talk"></div>
</div>
<div class="intime">2022-06-21&nbsp;21:35:12</div>
<div class="likeYou">
<div class="same pinglun"></div>
<div class="count">317</div>
<div class="same dianzan" style="margin-left: 19px"></div>
<div class="count">111</div>
</div>
<div class="reply">
<div class="sameava avaone"></div>
<div class="sameuser">赵雪莉</div>
<div class="centerreply">回复</div>
<div class="sameava avatwo"></div>
<div class="sameuser">罗宗梅</div>
<div class="replytime">2022-06-21 21:35:12</div>
</div>
<div class="allreplyimg">
<div class="singleimg"></div>
<div class="singleimg"></div>
<div class="singleimg"></div>
</div>
<div class="mainreply">
<div class="replydetail">
教学重难点突出，板书条理清晰。教学步骤设计合理，由浅入深，循序渐进
</div>
<div class="talk"></div>
</div>
<div class="inreply">
<el-input
v-model="textarea2"
:autosize="{ minRows: 5, maxRows: 5 }"
resize="none"
maxlength="100"
type="textarea"
@input="textareaInputdown"
/>
<div class="words">{{ textarealength2 }}/100</div>
<div class="upload">
<div class="allimg">
<div>
<div class="imgone"></div>
<div class="cha"></div>
</div>
<div style="margin-left: 15px">
<div class="imgone"></div>
<div class="cha" style="right: 131px"></div>
</div>
<div style="margin-left: 15px">
<div class="imgone"></div>
<div class="cha" style="right: 61px"></div>
</div>
</div>
<datagrid class="uploadAnd">
<button class="btnone clearfix">
<img class="image" src="../../assets/image/uploadimg.png" />
<div class="shangchuan">上传图片</div>
</button>
<button class="btntwo">发表</button>
</datagrid>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 详细内容 -->
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
// import { expandKeys } from "element-plus/es/components/table-v2/src/common";
export default {
name: "DiscussDetail",
setup() {
const state = reactive({
textarea1: "",
textarealength: 0,
textarea2: "",
textarealength2: 0,
});
const textareaInput = (e) => {
// console.log("eee", e);
state.textarea1 = e;
state.textarealength = e.length;
};
const textareaInputdown = (e) => {
state.textarea2 = e;
state.textarealength2 = e.length;
};
return {
...toRefs(state),
textareaInput,
textareaInputdown,
};
},
};
</script>
<style lang="scss">
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.surveydetail {
.crumb {
color: #fff;
display: flex;
font-size: 14px;
line-height: 24px;
}
.prevnext {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
color: #ffffff;
.prev {
display: flex;
align-items: center;
cursor: pointer;
}
}
.title {
font-size: 20px;
font-weight: 800;
color: #ffffff;
line-height: 24px;
margin-top: 17px;
margin-left: -11px;
}
.bascinfo {
width: 100%;
background: #ffffff;
border-radius: 8px;
margin-top: 24px;
.middletitle {
display: flex;
margin-top: 64px;
position: relative;
.title {
font-size: 24px;
font-weight: 800;
color: #4a9cf8;
margin-left: 79px;
margin-right: 210px;
}
@media screen and (max-width: 1574px) {
.title {
margin-bottom: -24px;
}
}
.btn {
cursor: pointer;
position: absolute;
width: 146px;
height: 46px;
background: #2478ff;
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
border-radius: 4px;
border: 0;
font-size: 16px;
font-weight: 800;
color: #ffffff;
right: 45px;
top: 5px;
}
}
.line {
display: flex;
margin: 47px 45px 0 75px;
max-width: 1810px;
height: 50px;
background: #f9f9f9;
position: relative;
.linetitle {
margin: 14px 0 17px 28px;
font-size: 16px;
font-weight: 800;
color: #333333;
}
.radi {
position: absolute;
width: 11px;
height: 11px;
border: 2px solid #0060ff;
border-radius: 50%;
margin-top: 19px;
right: 91px;
}
.intime {
position: absolute;
margin-top: 15px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 800;
color: #0060ff;
right: 36px;
}
}
.discusscontent {
margin-left: 105px;
margin-top: 35px;
.contenttop {
display: flex;
.contenttitle {
font-size: 16px;
font-weight: 500;
color: #333333;
}
.same {
width: 14px;
height: 14px;
margin-top: 4px;
margin-left: 20px;
}
.count {
font-size: 14px;
font-weight: 500;
color: #b3bdc4;
margin-top: 4px;
margin-left: 7px;
}
.dianzan {
background-image: url(../../assets/image/dianzan2.png);
}
.shoucang {
background-image: url(../../assets/image/shoucang.png);
}
}
.contentmid {
margin: 15px 47px 30px 0;
font-size: 14px;
font-weight: 500;
color: #666666;
line-height: 24px;
}
}
}
.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);
}
// .el-input__inner {
// &::-webkit-input-placeholder {
// /* WebKit browsers 适配谷歌 */
// color: red;
// }
// }
.upload {
display: flex;
// z-index: 999;
.allimg {
position: relative;
display: flex;
.imgone {
margin-top: 24px;
width: 55px;
height: 55px;
border-radius: 8px;
background-image: url(../../assets/image/px.png);
}
.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);
}
}
.uploadAnd {
margin-top: 21px;
.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: 26px;
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);
}
.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;
widows: 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);
}
}
.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);
}
.dianzan {
background-image: url(../../assets/image/dianzan2.png);
}
.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);
}
.avatwo {
background-image: url(../../assets/image/px.png);
}
.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);
}
}
.mainreply {
display: flex;
margin-top: 16px;
.replydetail {
// width: 462px;
height: 23px;
font-size: 14px;
font-weight: 500;
color: #666666;
line-height: 23px;
margin-right: 11px;
}
.talk {
width: 23px;
height: 23px;
background-image: url(../../assets/image/talk.png);
}
}
.inreply {
position: relative;
margin-top: -22px;
margin-bottom: 20px;
// .words {
// position: absolute;
// bottom: 5px;
// 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;
// // height: 1000px;
// background-color: rgba(245, 246, 247, 1);
// }
// .upload {
// display: flex;
// // z-index: 999;
// .allimg {
// margin-bottom: 30px;
// position: relative;
// display: flex;
// .imgone {
// margin-top: 24px;
// width: 55px;
// height: 55px;
// border-radius: 8px;
// background-image: url(../../assets/image/px.png);
// }
// .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);
// }
// }
// .uploadAnd {
// margin-top: 21px;
// .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;
// }
// }
// }
}
}
}
}
}
}
</style>

824
src/views/homework/homework.vue → src/views/homework/HomeworkPage.vue
View File

@@ -23,9 +23,7 @@
<div class="detailinfo">
<div class="detail">
<div class="detailT">
<div
style="margin-left: 48px; margin-right: 147px; position: relative"
>
<div class="left">
<div class="title">
<img
width="20px"
@@ -220,6 +218,12 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.moreactive {
.crumb {
color: #fff;
@@ -280,6 +284,365 @@ export default {
color: rgba(51, 51, 51, 1);
display: flex;
.left {
margin-left: 48px;
margin-right: 45px;
position: relative;
flex: 1;
.shapan {
width: 1181px;
height: 58px;
margin-top: 30px;
background-image: url("../../assets/image/shapan.png");
.shapanexplain {
margin-top: 18px;
margin-left: 34px;
// width: 391px;
height: 20px;
font-size: 20px;
font-weight: 800;
color: #4a9cf8;
line-height: 24px;
}
}
.shangchuan {
z-index: 999;
font-size: 16px;
font-weight: 800;
color: #ffffff;
line-height: 24px;
position: absolute;
right: -6px;
top: 162px;
border: 0;
background-color: #fff;
width: 162px;
height: 62px;
background-image: url("../../assets/image/shangchuan.png");
}
.uploadDetail {
position: absolute;
top: 235px;
right: 3px;
.triangle {
top: -10px;
right: 60px;
width: 0;
height: 0;
position: absolute;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #fff;
}
.square {
width: 475px;
height: 243px;
background: #ffffff;
box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
border-radius: 8px;
.squarecontent1 {
margin-top: 40px;
display: flex;
.rar {
margin: 12px 15px 0 27px;
width: 22px;
height: 26px;
background-image: url("../../assets/image/rar.png");
}
.rarDetail {
.detail1 {
// height: 14px;
font-size: 12px;
line-height: 30px;
font-weight: 500;
color: #677d86;
}
.detail2 {
// height: 11px;
font-size: 12px;
font-weight: 500;
color: #277aff;
}
.progress {
width: 291px;
height: 8px;
background: #e8f1fe;
border-radius: 4px;
.progressinner {
width: 131px;
height: 8px;
background: linear-gradient(
0deg,
#2478ff 0%,
#5093ff 100%
);
border-radius: 4px;
}
}
}
.btn {
border: 0;
background-color: #fff;
color: #277aff;
margin-top: 20px;
cursor: pointer;
}
.btndetail {
margin-left: 25px;
}
}
.squarecontent2 {
margin-top: 25px;
display: flex;
.rar {
margin: 12px 15px 0 27px;
width: 22px;
height: 26px;
background-image: url("../../assets/image/rar.png");
}
.rarDetail {
.detail1 {
// height: 14px;
font-size: 12px;
line-height: 30px;
font-weight: 500;
color: #677d86;
}
.detail2 {
// height: 11px;
font-size: 12px;
font-weight: 500;
color: #277aff;
}
.progress {
width: 291px;
height: 8px;
background: #e8f1fe;
border-radius: 4px;
.progressinner {
width: 231px;
height: 8px;
background: linear-gradient(
0deg,
#ee625e 0%,
#eea4a1 100%
);
border-radius: 4px;
}
}
}
.btn {
border: 0;
background-color: #fff;
color: #277aff;
margin-top: 20px;
cursor: pointer;
}
.btndetail {
margin-left: 25px;
}
}
.squarecontent3 {
margin-top: 25px;
display: flex;
.rar {
margin: 12px 15px 0 27px;
width: 22px;
height: 26px;
background-image: url("../../assets/image/rar.png");
}
.rarDetail {
.detail1 {
// height: 14px;
font-size: 12px;
line-height: 30px;
font-weight: 500;
color: #677d86;
}
.detail2 {
// height: 11px;
font-size: 12px;
font-weight: 500;
color: #277aff;
}
.progress {
width: 291px;
height: 8px;
background: #e8f1fe;
border-radius: 4px;
.progressinner {
width: 291px;
height: 8px;
background: linear-gradient(
0deg,
#36d1ae 0%,
#3be5bf 100%
);
border-radius: 4px;
}
}
}
.btn {
border: 0;
background-color: #fff;
color: #277aff;
margin-top: 20px;
cursor: pointer;
}
.btndetail {
margin-left: 25px;
}
}
}
}
.tijiao {
z-index: 999;
cursor: pointer;
margin-top: 22px;
margin-left: 480px;
width: 33px;
height: 16px;
font-size: 16px;
font-weight: 800;
color: #ffffff;
line-height: 24px;
border: 0;
background-color: #fff;
width: 162px;
height: 62px;
background-image: url("../../assets/image/tijiao.png");
}
.history {
position: relative;
margin-top: 32px;
width: 1182px;
height: 200px;
border: 1px solid #d7e5fd;
border-radius: 8px;
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.fenge {
width: 1181px;
border-top: 1px solid #d7e5fd;
}
.tongyi {
display: flex;
}
.content1 {
margin-top: 14px;
margin-left: 87px;
}
.content2 {
position: absolute;
margin-top: 14px;
left: 400px;
}
.historycontent {
width: 59px;
height: 14px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333330;
line-height: 38px;
}
.historytitle {
width: 1182px;
height: 50px;
background: #f2f5f7;
border-radius: 8px 8px 0px 0px;
}
.historytitle2 {
width: 1182px;
height: 48px;
background: #fff;
}
}
.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;
}
.all {
display: flex;
justify-content: space-between;
width: 1280px;
margin-top: 43px;
.allbox1 {
background: linear-gradient(
0deg,
rgba(160, 193, 230, 0) 0%,
rgba(161, 195, 231, 0.2) 100%
);
}
.allbox2 {
background: linear-gradient(
0deg,
rgba(177, 219, 229, 0) 0%,
rgba(172, 216, 227, 0.2) 100%
);
}
.allbox3 {
background: linear-gradient(
0deg,
rgba(195, 209, 234, 0) 0%,
rgba(191, 206, 231, 0.2) 100%
);
}
.item {
width: 410px;
height: 149px;
text-align: center;
border-radius: 4px;
.item1 {
color: #089dff;
font-size: 24px;
font-weight: bold;
margin-top: 36px;
}
.item2 {
color: #333330;
font-size: 14px;
margin-top: 29px;
}
}
}
.join {
width: 1181px;
height: 271px;
background: #f5f6f7;
border-radius: 8px;
margin-top: 32px;
}
}
.right {
.righttitle {
display: flex;
@@ -357,461 +720,6 @@ export default {
}
}
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.shapan {
width: 1181px;
height: 58px;
margin-top: 30px;
background-image: url("../../assets/image/shapan.png");
.shapanexplain {
margin-top: 18px;
margin-left: 34px;
width: 391px;
height: 20px;
font-size: 20px;
font-weight: 800;
color: #4a9cf8;
line-height: 24px;
}
}
.shangchuan {
z-index: 999;
font-size: 16px;
font-weight: 800;
color: #ffffff;
line-height: 24px;
position: absolute;
right: -6px;
top: 162px;
border: 0;
background-color: #fff;
width: 162px;
height: 62px;
background-image: url("../../assets/image/shangchuan.png");
}
.uploadDetail {
position: absolute;
top: 235px;
right: 3px;
.triangle {
top: -10px;
right: 60px;
width: 0;
height: 0;
position: absolute;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #fff;
}
.square {
width: 475px;
height: 243px;
background: #ffffff;
box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
border-radius: 8px;
.squarecontent1 {
margin-top: 40px;
display: flex;
.rar {
margin: 12px 15px 0 27px;
width: 22px;
height: 26px;
background-image: url("../../assets/image/rar.png");
}
.rarDetail {
.detail1 {
// height: 14px;
font-size: 12px;
line-height: 30px;
font-weight: 500;
color: #677d86;
}
.detail2 {
// height: 11px;
font-size: 12px;
font-weight: 500;
color: #277aff;
}
.progress {
width: 291px;
height: 8px;
background: #e8f1fe;
border-radius: 4px;
.progressinner {
width: 131px;
height: 8px;
background: linear-gradient(0deg, #2478ff 0%, #5093ff 100%);
border-radius: 4px;
}
}
}
.btn {
border: 0;
background-color: #fff;
color: #277aff;
margin-top: 20px;
cursor: pointer;
}
.btndetail {
margin-left: 25px;
}
}
.squarecontent2 {
margin-top: 25px;
display: flex;
.rar {
margin: 12px 15px 0 27px;
width: 22px;
height: 26px;
background-image: url("../../assets/image/rar.png");
}
.rarDetail {
.detail1 {
// height: 14px;
font-size: 12px;
line-height: 30px;
font-weight: 500;
color: #677d86;
}
.detail2 {
// height: 11px;
font-size: 12px;
font-weight: 500;
color: #277aff;
}
.progress {
width: 291px;
height: 8px;
background: #e8f1fe;
border-radius: 4px;
.progressinner {
width: 231px;
height: 8px;
background: linear-gradient(0deg, #ee625e 0%, #eea4a1 100%);
border-radius: 4px;
}
}
}
.btn {
border: 0;
background-color: #fff;
color: #277aff;
margin-top: 20px;
cursor: pointer;
}
.btndetail {
margin-left: 25px;
}
}
.squarecontent3 {
margin-top: 25px;
display: flex;
.rar {
margin: 12px 15px 0 27px;
width: 22px;
height: 26px;
background-image: url("../../assets/image/rar.png");
}
.rarDetail {
.detail1 {
// height: 14px;
font-size: 12px;
line-height: 30px;
font-weight: 500;
color: #677d86;
}
.detail2 {
// height: 11px;
font-size: 12px;
font-weight: 500;
color: #277aff;
}
.progress {
width: 291px;
height: 8px;
background: #e8f1fe;
border-radius: 4px;
.progressinner {
width: 291px;
height: 8px;
background: linear-gradient(0deg, #36d1ae 0%, #3be5bf 100%);
border-radius: 4px;
}
}
}
.btn {
border: 0;
background-color: #fff;
color: #277aff;
margin-top: 20px;
cursor: pointer;
}
.btndetail {
margin-left: 25px;
}
}
}
}
.tijiao {
z-index: 999;
cursor: pointer;
margin-top: 22px;
margin-left: 480px;
width: 33px;
height: 16px;
font-size: 16px;
font-weight: 800;
color: #ffffff;
line-height: 24px;
border: 0;
background-color: #fff;
width: 162px;
height: 62px;
background-image: url("../../assets/image/tijiao.png");
}
.history {
position: relative;
margin-top: 32px;
width: 1182px;
height: 200px;
border: 1px solid #d7e5fd;
border-radius: 8px;
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.fenge {
width: 1181px;
border-top: 1px solid #d7e5fd;
}
.tongyi {
display: flex;
}
.content1 {
margin-top: 14px;
margin-left: 87px;
}
.content2 {
position: absolute;
margin-top: 14px;
left: 400px;
}
.historycontent {
width: 59px;
height: 14px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333330;
line-height: 38px;
}
.historytitle {
width: 1182px;
height: 50px;
background: #f2f5f7;
border-radius: 8px 8px 0px 0px;
}
.historytitle2 {
width: 1182px;
height: 48px;
background: #fff;
}
}
.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;
}
.all {
display: flex;
justify-content: space-between;
width: 1280px;
margin-top: 43px;
.allbox1 {
background: linear-gradient(
0deg,
rgba(160, 193, 230, 0) 0%,
rgba(161, 195, 231, 0.2) 100%
);
}
.allbox2 {
background: linear-gradient(
0deg,
rgba(177, 219, 229, 0) 0%,
rgba(172, 216, 227, 0.2) 100%
);
}
.allbox3 {
background: linear-gradient(
0deg,
rgba(195, 209, 234, 0) 0%,
rgba(191, 206, 231, 0.2) 100%
);
}
.item {
width: 410px;
height: 149px;
text-align: center;
border-radius: 4px;
.item1 {
color: #089dff;
font-size: 24px;
font-weight: bold;
margin-top: 36px;
}
.item2 {
color: #333330;
font-size: 14px;
margin-top: 29px;
}
}
}
.join {
width: 1181px;
height: 271px;
background: #f5f6f7;
border-radius: 8px;
margin-top: 32px;
}
}
.detailB {
min-height: 363px;
background: #ffffff;
border-radius: 8px;
margin-top: 20px;
.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 .active {
width: 82px;
height: 28px;
background: linear-gradient(90deg, #a5d4e0 0%, #b4dce6 100%);
border-radius: 4px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
line-height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-right: 11px;
}
.work .unactive {
width: 80px;
height: 26px;
border: 1px solid #a5d4e0;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
color: #a5d4e0;
line-height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 11px;
cursor: pointer;
}
.work .btncolor {
background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%);
}
.work .bordercolor {
border: 1px solid #85aad2;
}
.work .fontcolor {
color: rgba(133, 170, 210, 1);
}
.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;
}
}
}
}