mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-12 12:26:49 +08:00
feat：新增DiscussPage,DicussDetail页面
This commit is contained in:
songwc
311
src/views/discuss/DiscussPage.vue
Normal file
311
src/views/discuss/DiscussPage.vue
Normal 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>
|
||||
Reference in New Issue
Block a user