mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-10 11:26:48 +08:00
Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/stu_h5
This commit is contained in:
dongwug
BIN
src/assets/image/discuss/dianzan.png
Normal file
BIN
src/assets/image/discuss/dianzan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 404 B |
BIN
src/assets/image/discuss/elsedianzan.png
Normal file
BIN
src/assets/image/discuss/elsedianzan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 496 B |
BIN
src/assets/image/discuss/pinglun.png
Normal file
BIN
src/assets/image/discuss/pinglun.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 430 B |
BIN
src/assets/image/discuss/px.jpg
Normal file
BIN
src/assets/image/discuss/px.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/image/discuss/shoucang.png
Normal file
BIN
src/assets/image/discuss/shoucang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 484 B |
@@ -124,7 +124,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 10px;
|
margin-top: -17.5px;
|
||||||
.noticebox {
|
.noticebox {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
|
||||||
@@ -316,6 +316,7 @@ export default {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.imgsame {
|
.imgsame {
|
||||||
|
background-size: 100% 100%;
|
||||||
width: 95px;
|
width: 95px;
|
||||||
height: 95px;
|
height: 95px;
|
||||||
// background-color: blue;
|
// background-color: blue;
|
||||||
|
|||||||
585
src/views/discuss/DiscussDetail.vue
Normal file
585
src/views/discuss/DiscussDetail.vue
Normal file
@@ -0,0 +1,585 @@
|
|||||||
|
<template>
|
||||||
|
<div class="discussdetail">
|
||||||
|
<TitleHead text="【直播】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
|
||||||
|
<div class="main">
|
||||||
|
<div class="title">
|
||||||
|
<div class="inner clearfix">
|
||||||
|
<!-- 时间 pre next 外部盒子-->
|
||||||
|
<div class="titlemain clearfix">
|
||||||
|
<!-- <div class="imgTime clearfix">
|
||||||
|
<div class="img"></div>
|
||||||
|
<div class="time">2022-07-20 20:00-21:00</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="preNext clearfix">
|
||||||
|
<div class="sameone pre" style="margin-right: 5px"></div>
|
||||||
|
<div class="sametwo">上一个</div>
|
||||||
|
<div class="sametwo" style="margin-left: 15.5px">下一个</div>
|
||||||
|
<div class="sameone next" style="margin-left: 5px"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="titleblue">
|
||||||
|
请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求
|
||||||
|
</div>
|
||||||
|
<div class="buttoncontainer">
|
||||||
|
<button class="btn">发表帖子</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preview">
|
||||||
|
<div class="previewbox">
|
||||||
|
<div class="previewmani">
|
||||||
|
<div class="discusstitle clearfix">
|
||||||
|
<div class="titcon">
|
||||||
|
<div class="maint">第二讲：模块化产品展示：班内成员讨论</div>
|
||||||
|
<div class="intime">
|
||||||
|
<div class="yuna"></div>
|
||||||
|
<div class="in">进行中</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alltalkcontainer">
|
||||||
|
<div class="inne">
|
||||||
|
<div class="takltitle">从营销角度分析：我的团队需要这些能力</div>
|
||||||
|
<div class="taklcon">
|
||||||
|
所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。<br />包容成员
|
||||||
|
<br />团队工作需要成员在一起不断地讨论，如果一个人固执己见，无法听取他人的意见，或无法和他人达成一致，团队的工作就无法进行下去。团队的效率在于配合的默契，如果达不成这种默契，团队合作就不可能成功。为此，对待团队中其他成员时一定要抱着宽容的心态，讨论问题的时候对事不对人，即使他人犯了错误，也要本着大家共同进步的目的去帮对方改正，而不是一味斥责。同时也要经常检查自己的缺点，如果意识到了自己的缺点，不妨将它坦诚地讲出来，承认自己的缺点，让大家共同帮助你改进，这是最有效的方法。<br />获得支持<br />要使自己的工作得到大家的支持和认可，而不是反对，必须让大家喜欢你。但一个人又如何让别人来喜欢你呢?除了在工作中互相支援、互相鼓励外，还应该尽量和大家一起去参加各种活动，或者礼貌地关心一下大家的生活。<br />保持谦虚<br />任何人都不喜欢骄傲自大的人，这种人在团队合作中也不会被大家认可。可能你在某个方面比其他人强，但你更应该将自己的注意力放在他人的强项上，只有这样，才能看到自己的肤浅和无知。因为团队中的任
|
||||||
|
</div>
|
||||||
|
<div class="bottombox">
|
||||||
|
<div class="dianzan">
|
||||||
|
<div class="sa">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
style="margin-right: 9.5px; margin-left: 10px"
|
||||||
|
src="../../assets/image/discuss/dianzan.png"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span>103</span>
|
||||||
|
</div>
|
||||||
|
<div class="sa">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
style="margin-right: 9.5px"
|
||||||
|
src="../../assets/image/discuss/shoucang.png"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span>103</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="restore">
|
||||||
|
<div class="restorebox">
|
||||||
|
<div class="restoremani">
|
||||||
|
<div
|
||||||
|
class="rescon clearfix"
|
||||||
|
v-for="(item, index) in restore"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="head">
|
||||||
|
<div>
|
||||||
|
<img class="headavator" :src="item.head" />
|
||||||
|
</div>
|
||||||
|
<div class="namehead">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="inner">
|
||||||
|
<div class="allimg">
|
||||||
|
<img class="reavator" :src="item.reimg" />
|
||||||
|
<img class="reavator" :src="item.reimg" />
|
||||||
|
<img class="reavator" :src="item.reimg" />
|
||||||
|
</div>
|
||||||
|
<div class="recon">{{ item.re }}</div>
|
||||||
|
<div class="botto">
|
||||||
|
<div class="time">{{ item.time }}</div>
|
||||||
|
<div class="re">回复</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="good">
|
||||||
|
<img src="../../assets/image/discuss/elsedianzan.png" />
|
||||||
|
</div>
|
||||||
|
<div class="gocount">67</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="newre">
|
||||||
|
<div class="tri"></div>
|
||||||
|
<div class="rec clearfix">
|
||||||
|
<div class="it" v-for="(itemc, index) in newrestore" :key="index">
|
||||||
|
<div class="ava">
|
||||||
|
<img class="avainner" :src="itemc.head" />
|
||||||
|
</div>
|
||||||
|
<div class="redetail">
|
||||||
|
<div class="rename">{{ itemc.name }}</div>
|
||||||
|
<div class="rein">{{ itemc.re }}</div>
|
||||||
|
<div class="detre">
|
||||||
|
<div class="day">{{ itemc.time }}</div>
|
||||||
|
<div class="huifu">回复</div>
|
||||||
|
<div class="good">
|
||||||
|
<img
|
||||||
|
class="gimg"
|
||||||
|
src="../../assets/image/discuss/elsedianzan.png"
|
||||||
|
/>
|
||||||
|
<div class="gcou">0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="line"></div> -->
|
||||||
|
<div
|
||||||
|
:class="index === newrestore.length - 1 ? null : 'line'"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btncon clearfix">
|
||||||
|
<button class="btnn">查看全部14条评论</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { reactive, toRefs } from "vue";
|
||||||
|
import TitleHead from "@/components/TitleHead.vue";
|
||||||
|
export default {
|
||||||
|
name: "DiscussDetail",
|
||||||
|
components: {
|
||||||
|
TitleHead,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
restore: [
|
||||||
|
{
|
||||||
|
name: "罗宗梅",
|
||||||
|
time: "2022-09-01",
|
||||||
|
re: "教师基本功扎实，知识讲解准确，教学设计合理，始终以学生为主体，自主学习，小组交流讨论，上台交流展示等形式，师生配合默契，取得了较好的学习效果。",
|
||||||
|
head: require("../../assets/image/discuss/px.jpg"),
|
||||||
|
reimg: require("../../assets/image/discuss/px.jpg"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
newrestore: [
|
||||||
|
{
|
||||||
|
name: "赵雪梨",
|
||||||
|
time: "三天前",
|
||||||
|
re: "教学重难点突出，板书条理清晰。教学步骤设计合理由浅入深，循序渐进。",
|
||||||
|
head: require("../../assets/image/discuss/px.jpg"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "赵雪梨",
|
||||||
|
time: "三天前",
|
||||||
|
re: "教学重难点突出，板书条理清晰。教学步骤设计合理由浅入深，循序渐进。",
|
||||||
|
head: require("../../assets/image/discuss/px.jpg"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style lang="scss">
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
content: " ";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.discussdetail {
|
||||||
|
width: 100%;
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: -14.5px;
|
||||||
|
position: relative;
|
||||||
|
.title {
|
||||||
|
width: 90%;
|
||||||
|
// height: 109px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
width: 90%;
|
||||||
|
.titlemain {
|
||||||
|
width: 100%;
|
||||||
|
// display: flex;
|
||||||
|
margin-top: 18.5px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
height: 18px;
|
||||||
|
.imgTime {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
.img {
|
||||||
|
margin-right: 4px;
|
||||||
|
width: 13px;
|
||||||
|
height: 14.5px;
|
||||||
|
background-image: url(../../assets/image/liveboradcast/time.png);
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
margin-top: 2px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
// line-height: 15.5px;
|
||||||
|
// height: 16.5px;
|
||||||
|
color: #6e7b84;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preNext {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 2px;
|
||||||
|
display: flex;
|
||||||
|
.sameone {
|
||||||
|
width: 12px;
|
||||||
|
// border: 0;
|
||||||
|
height: 12px;
|
||||||
|
// background-color: #fff;
|
||||||
|
}
|
||||||
|
.sametwo {
|
||||||
|
color: #2478ff;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
.pre {
|
||||||
|
background-image: url(../../assets/image/liveboradcast/pre.png);
|
||||||
|
}
|
||||||
|
.next {
|
||||||
|
background-image: url(../../assets/image/liveboradcast/next.png);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.titleblue {
|
||||||
|
margin-top: 18.5px;
|
||||||
|
color: #4a9cf8;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.buttoncontainer {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 21.5px;
|
||||||
|
.btn {
|
||||||
|
width: 83px;
|
||||||
|
height: 33px;
|
||||||
|
background-color: #2478ff;
|
||||||
|
color: #fff;
|
||||||
|
border: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
.previewbox {
|
||||||
|
width: 90%;
|
||||||
|
// height: 200px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.previewmani {
|
||||||
|
width: 90%;
|
||||||
|
margin-top: 17px;
|
||||||
|
|
||||||
|
.discusstitle {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 15px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
// height: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.titcon {
|
||||||
|
margin-top: 11px;
|
||||||
|
width: 95%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.maint {
|
||||||
|
color: #333330;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
width: 75%;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.intime {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 2px;
|
||||||
|
.yuna {
|
||||||
|
margin-top: 4px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #0060ff;
|
||||||
|
}
|
||||||
|
.in {
|
||||||
|
margin-left: 3px;
|
||||||
|
color: #0060ff;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alltalkcontainer {
|
||||||
|
width: 100%;
|
||||||
|
// background-color: #bfa;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.inne {
|
||||||
|
width: 95%;
|
||||||
|
.takltitle {
|
||||||
|
color: #04243c;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.taklcon {
|
||||||
|
color: #333330;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.bottombox {
|
||||||
|
margin-top: 21px;
|
||||||
|
margin-bottom: 24.5px;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
.dianzan {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.sa {
|
||||||
|
color: #b3bdc4;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-top: 7px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.restore {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
.restorebox {
|
||||||
|
width: 90%;
|
||||||
|
// height: 200px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.restoremani {
|
||||||
|
width: 90%;
|
||||||
|
margin-top: 17px;
|
||||||
|
position: relative;
|
||||||
|
.rescon {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
// height: 100px;
|
||||||
|
// background-color: #bfa;
|
||||||
|
.head {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
.headavator {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.namehead {
|
||||||
|
margin-left: 5px;
|
||||||
|
color: #02172a;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.inner {
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-left: 36px;
|
||||||
|
.allimg {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.reavator {
|
||||||
|
width: 82px;
|
||||||
|
height: 82px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.recon {
|
||||||
|
margin-top: 14.5px;
|
||||||
|
color: #5f6d75;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
.botto {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20px;
|
||||||
|
position: relative;
|
||||||
|
.time {
|
||||||
|
color: #5f6d75;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 16.5px;
|
||||||
|
}
|
||||||
|
.re {
|
||||||
|
color: #00152a;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
.good {
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
.gocount {
|
||||||
|
color: #4e5e67;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-left: 6.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.newre {
|
||||||
|
margin-top: 7.5px;
|
||||||
|
.tri {
|
||||||
|
margin-left: 80px;
|
||||||
|
height: 0px;
|
||||||
|
width: 0px;
|
||||||
|
border-bottom: 10px solid #f0f3f6;
|
||||||
|
border-left: 10px solid transparent;
|
||||||
|
border-right: 10px solid transparent;
|
||||||
|
}
|
||||||
|
.rec {
|
||||||
|
background-color: #f0f3f6;
|
||||||
|
border-radius: 13px;
|
||||||
|
width: 100%;
|
||||||
|
.it {
|
||||||
|
margin-left: 12.5px;
|
||||||
|
width: 92%;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20px;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
.ava {
|
||||||
|
// margin-top: 20px;
|
||||||
|
.avainner {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.redetail {
|
||||||
|
margin-left: 12.5px;
|
||||||
|
.rename {
|
||||||
|
color: #02172a;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.rein {
|
||||||
|
color: #5f6d75;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 16.5px;
|
||||||
|
}
|
||||||
|
.detre {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.day {
|
||||||
|
color: #5f6d75;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
.huifu {
|
||||||
|
color: #00152a;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.good {
|
||||||
|
position: absolute;
|
||||||
|
right: 2px;
|
||||||
|
display: flex;
|
||||||
|
.gimg {
|
||||||
|
width: 14px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
.gcou {
|
||||||
|
color: #4e5e67;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
// margin-top: 24.5px;
|
||||||
|
margin-left: -45px;
|
||||||
|
height: 0;
|
||||||
|
width: 117%;
|
||||||
|
border-top: 1px solid #dcdedf;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btncon {
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
position: relative;
|
||||||
|
.btnn {
|
||||||
|
margin-top: 30px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
border: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #5f6d75;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
407
src/views/discuss/DiscussPage.vue
Normal file
407
src/views/discuss/DiscussPage.vue
Normal file
@@ -0,0 +1,407 @@
|
|||||||
|
<template>
|
||||||
|
<div class="discusspage">
|
||||||
|
<TitleHead text="【直播】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
|
||||||
|
<div class="main">
|
||||||
|
<div class="title">
|
||||||
|
<div class="inner clearfix">
|
||||||
|
<!-- 时间 pre next 外部盒子-->
|
||||||
|
<div class="titlemain clearfix">
|
||||||
|
<!-- <div class="imgTime clearfix">
|
||||||
|
<div class="img"></div>
|
||||||
|
<div class="time">2022-07-20 20:00-21:00</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="preNext clearfix">
|
||||||
|
<div class="sameone pre" style="margin-right: 5px"></div>
|
||||||
|
<div class="sametwo">上一个</div>
|
||||||
|
<div class="sametwo" style="margin-left: 15.5px">下一个</div>
|
||||||
|
<div class="sameone next" style="margin-left: 5px"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="titleblue">
|
||||||
|
请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求
|
||||||
|
</div>
|
||||||
|
<div class="buttoncontainer">
|
||||||
|
<button class="btn">发表帖子</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preview">
|
||||||
|
<div class="previewbox">
|
||||||
|
<div class="previewmani">
|
||||||
|
<div class="firstbtncontainer">
|
||||||
|
<!-- <button class="samebtn new">最新</button>
|
||||||
|
<button class="samebtn hot">最热</button> -->
|
||||||
|
<button
|
||||||
|
@click="changee"
|
||||||
|
:class="onfo ? 'new samebtn' : 'samebtn hot'"
|
||||||
|
>
|
||||||
|
最新
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="changeee"
|
||||||
|
:class="onfo ? 'samebtn hot' : 'new samebtn'"
|
||||||
|
>
|
||||||
|
最热
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="discusstitle clearfix">
|
||||||
|
<div class="titcon">
|
||||||
|
<div class="maint">第二讲：模块化产品展示：班内成员讨论</div>
|
||||||
|
<div class="intime">
|
||||||
|
<div class="yuna"></div>
|
||||||
|
<div class="in">进行中</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="discusscontainer clearfix">
|
||||||
|
<div class="item" v-for="(item, index) in discuss" :key="index">
|
||||||
|
<div class="tit">{{ item.title }}</div>
|
||||||
|
<div class="inn">{{ item.contain }}</div>
|
||||||
|
<div class="tim">{{ item.time }}</div>
|
||||||
|
<div class="dian clearfix">
|
||||||
|
<div class="diancon">
|
||||||
|
<div class="one">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
class="samt"
|
||||||
|
src="../../assets/image/discuss/pinglun.png"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span class="a">{{ item.pinglun }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="one">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
class="samt"
|
||||||
|
src="../../assets/image/discuss/dianzan.png"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span class="a">{{ item.dianzan }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="one">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
class="samt"
|
||||||
|
src="../../assets/image/discuss/shoucang.png"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span class="a">{{ item.shoucang }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { reactive, toRefs } from "vue";
|
||||||
|
import TitleHead from "@/components/TitleHead.vue";
|
||||||
|
export default {
|
||||||
|
name: "DiscussPage",
|
||||||
|
components: {
|
||||||
|
TitleHead,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
onfo: true,
|
||||||
|
discuss: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "从营销角度分析：我的团队需要这些能力",
|
||||||
|
contain:
|
||||||
|
"所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说...",
|
||||||
|
time: "2022-7-20 00:00",
|
||||||
|
pinglun: 317,
|
||||||
|
dianzan: 103,
|
||||||
|
shoucang: 103,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "从营销角度分析：我的团队需要这些能力",
|
||||||
|
contain:
|
||||||
|
"所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说...",
|
||||||
|
time: "2022-7-20 00:00",
|
||||||
|
pinglun: 317,
|
||||||
|
dianzan: 103,
|
||||||
|
shoucang: 103,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "从营销角度分析：我的团队需要这些能力",
|
||||||
|
contain:
|
||||||
|
"所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说...",
|
||||||
|
time: "2022-7-20 00:00",
|
||||||
|
pinglun: 317,
|
||||||
|
dianzan: 103,
|
||||||
|
shoucang: 103,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const changee = () => {
|
||||||
|
if (state.onfo !== true) {
|
||||||
|
state.onfo = !state.onfo;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const changeee = () => {
|
||||||
|
if (state.onfo == true) {
|
||||||
|
state.onfo = !state.onfo;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
changee,
|
||||||
|
changeee,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style lang="scss">
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
content: " ";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.discusspage {
|
||||||
|
width: 100%;
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: -14.5px;
|
||||||
|
position: relative;
|
||||||
|
.title {
|
||||||
|
width: 90%;
|
||||||
|
// height: 109px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
width: 90%;
|
||||||
|
.titlemain {
|
||||||
|
width: 100%;
|
||||||
|
// display: flex;
|
||||||
|
margin-top: 18.5px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
height: 18px;
|
||||||
|
.imgTime {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
.img {
|
||||||
|
margin-right: 4px;
|
||||||
|
width: 13px;
|
||||||
|
height: 14.5px;
|
||||||
|
background-image: url(../../assets/image/liveboradcast/time.png);
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
margin-top: 2px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
// line-height: 15.5px;
|
||||||
|
// height: 16.5px;
|
||||||
|
color: #6e7b84;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preNext {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 2px;
|
||||||
|
display: flex;
|
||||||
|
.sameone {
|
||||||
|
width: 12px;
|
||||||
|
// border: 0;
|
||||||
|
height: 12px;
|
||||||
|
// background-color: #fff;
|
||||||
|
}
|
||||||
|
.sametwo {
|
||||||
|
color: #2478ff;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
.pre {
|
||||||
|
background-image: url(../../assets/image/liveboradcast/pre.png);
|
||||||
|
}
|
||||||
|
.next {
|
||||||
|
background-image: url(../../assets/image/liveboradcast/next.png);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.titleblue {
|
||||||
|
margin-top: 18.5px;
|
||||||
|
color: #4a9cf8;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.buttoncontainer {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 21.5px;
|
||||||
|
.btn {
|
||||||
|
width: 83px;
|
||||||
|
height: 33px;
|
||||||
|
background-color: #2478ff;
|
||||||
|
color: #fff;
|
||||||
|
border: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
.previewbox {
|
||||||
|
width: 90%;
|
||||||
|
// height: 200px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.previewmani {
|
||||||
|
width: 90%;
|
||||||
|
margin-top: 17px;
|
||||||
|
.firstbtncontainer {
|
||||||
|
width: 100%;
|
||||||
|
.samebtn {
|
||||||
|
width: 42.5px;
|
||||||
|
height: 23px;
|
||||||
|
font-size: 13px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.new {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #387df7;
|
||||||
|
// margin-right: 10px;
|
||||||
|
}
|
||||||
|
.hot {
|
||||||
|
color: #6e7b84;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.discusstitle {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 15px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
// height: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.titcon {
|
||||||
|
margin-top: 11px;
|
||||||
|
width: 95%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.maint {
|
||||||
|
color: #333330;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
width: 75%;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.intime {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 2px;
|
||||||
|
.yuna {
|
||||||
|
margin-top: 4px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #0060ff;
|
||||||
|
}
|
||||||
|
.in {
|
||||||
|
margin-left: 3px;
|
||||||
|
color: #0060ff;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.discusscontainer {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
width: 100%;
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
.tit {
|
||||||
|
margin-top: 18px;
|
||||||
|
color: #04243c;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
// line-height: 24px;
|
||||||
|
}
|
||||||
|
.inn {
|
||||||
|
margin-top: 11px;
|
||||||
|
color: #6e7b84;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.tim {
|
||||||
|
color: #b3bdc4;
|
||||||
|
font-size: 12px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 42px;
|
||||||
|
}
|
||||||
|
.dian {
|
||||||
|
color: #b3bdc4;
|
||||||
|
line-height: 30px;
|
||||||
|
// line-height: 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 7px;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
|
||||||
|
.samt {
|
||||||
|
margin-right: 9px;
|
||||||
|
margin-top: 8px;
|
||||||
|
// position: absolute;
|
||||||
|
}
|
||||||
|
.a {
|
||||||
|
// position: absolute;
|
||||||
|
// top: 2px;
|
||||||
|
margin-top: 1.5px;
|
||||||
|
}
|
||||||
|
.diancon {
|
||||||
|
width: 80%;
|
||||||
|
height: 100%;
|
||||||
|
// background-color: #bfa;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
.one {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -220,7 +220,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 10px;
|
margin-top: -17.5px;
|
||||||
.noticebox {
|
.noticebox {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|||||||
@@ -194,7 +194,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 10px;
|
margin-top: -17.5px;
|
||||||
.noticebox {
|
.noticebox {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|||||||
Reference in New Issue
Block a user