mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-06 17:36:45 +08:00
style：修改调研、直播、投票、作业、讨论、讨论详情页面
This commit is contained in:
songwc
BIN
src/assets/image/ballotpage/left.png
Normal file
BIN
src/assets/image/ballotpage/left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 B |
BIN
src/assets/image/ballotpage/time.png
Normal file
BIN
src/assets/image/ballotpage/time.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 968 B |
BIN
src/assets/image/discuss/dianzan2.png
Normal file
BIN
src/assets/image/discuss/dianzan2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 392 B |
BIN
src/assets/image/liveboradcast/cha.png
Normal file
BIN
src/assets/image/liveboradcast/cha.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 B |
BIN
src/assets/image/liveboradcast/toright.png
Normal file
BIN
src/assets/image/liveboradcast/toright.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
@@ -1,24 +1,41 @@
|
||||
<template>
|
||||
<div class="ballotpage">
|
||||
<TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead>
|
||||
<!-- <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead> -->
|
||||
|
||||
<div class="notice">
|
||||
|
||||
<div class="noticebox">
|
||||
|
||||
<div class="mani">
|
||||
<div class="dir">
|
||||
<div class="samegt pre"></div>
|
||||
<div class="sameg">上一个</div>
|
||||
<div class="sameg" style="margin-left: 15.5px">下一个</div>
|
||||
<div class="samegt next"></div>
|
||||
<div class="joininfo" style="margin-left:-8px">
|
||||
【投票】管理者进阶腾飞班 - 授课方式
|
||||
</div>
|
||||
<div class="contenttitle">
|
||||
<img class="timeimg" src="../../assets/image/ballotpage/time.png" >
|
||||
<div class="timee">2022-07-20 20:00-21:00</div>
|
||||
</div>
|
||||
<div class="timebox">
|
||||
<div class="samez" style="margin-left:18px">00</div>
|
||||
<div class="samey">时</div>
|
||||
<div class="samez">00</div>
|
||||
<div class="samey">分</div>
|
||||
<div class="samez">00</div>
|
||||
<div class="samey">秒</div>
|
||||
</div>
|
||||
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">参与情况</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notice">
|
||||
|
||||
<div class="noticebox">
|
||||
|
||||
<div class="mani">
|
||||
<div class="joininfo">
|
||||
参与情况
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="contentone">
|
||||
<div class="same ba">
|
||||
<div class="samenum" style="color: #089dff">123</div>
|
||||
@@ -34,63 +51,56 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">投票时间</div>
|
||||
<div class="box"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice">
|
||||
|
||||
<div class="noticebox">
|
||||
|
||||
<div class="mani">
|
||||
<div class="joininfo">
|
||||
投票说明
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="contentone">
|
||||
<div class="ballotdetail">
|
||||
为提高核心项目讲解体验，现向广大学员征集较为接受的授课方式 ，每位学员可投票2个选项，我们将选取最高选项的两个做后续讲解。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contenttwo clearfix">
|
||||
<div class="time">
|
||||
<div class="timeone">2022-7-20 00:00</div>
|
||||
<div class="timetwo" style="margin-top: -2.5px">至</div>
|
||||
<div class="timethr">2022-8-29 23:59:59</div>
|
||||
</div>
|
||||
<div class="endbox">
|
||||
<div class="endtalk clearfix">
|
||||
<div class="sameto">距离结束还有</div>
|
||||
<div class="sametoo">123</div>
|
||||
<div class="sameto">小时</div>
|
||||
<div class="sametoo">42</div>
|
||||
<div class="sameto">分钟</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice">
|
||||
|
||||
<div class="noticebox">
|
||||
|
||||
<div class="mani">
|
||||
<div class="joininfo">
|
||||
参加投票
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="contentone">
|
||||
<div class="ballotjoincontainer">
|
||||
<div class="ballotjoin">
|
||||
<div class="ballotitem" v-for="(item,index) in ballot" :key="item.id">
|
||||
<div class="upitem">
|
||||
<div class="left">
|
||||
<img class="leftimg" src="../../assets/image/ballotpage/left.png" >
|
||||
<div class="leftcontent">{{item.content}}</div>
|
||||
</div>
|
||||
<button class="btn" @click="getId(item.id)">投票</button>
|
||||
</div>
|
||||
<div :class="index === ballot.length-1? null:'thinline'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">投票说明</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contentthr clearfix">
|
||||
<div class="thrcontent">
|
||||
为提高核心项目讲解体验，现向广大学员征集较为接受的授课方式，每位学员可投票2个选项，我们将选取最高选项的两个做后续讲解。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">参与投票</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contentfor clearfix">
|
||||
<div class="imgcontent">
|
||||
<div class="imgsame aimg"></div>
|
||||
<div class="imgsame bimg"></div>
|
||||
<div class="imgsame cimg"></div>
|
||||
</div>
|
||||
<div class="text">
|
||||
为提高核心项目讲解体验，现向广大学员征集较为接受的授课方式，每位学员可投票2个选项,我们将选取最高选项的两个做后续讲解。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,14 +108,42 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { reactive, toRefs } from "vue";
|
||||
import TitleHead from "@/components/TitleHead.vue";
|
||||
import { reactive, toRefs } from "vue";
|
||||
// import TitleHead from "@/components/TitleHead.vue";
|
||||
export default {
|
||||
name: "BallotPage",
|
||||
components: {
|
||||
TitleHead,
|
||||
// TitleHead,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
ballot:[
|
||||
{
|
||||
id:1,
|
||||
content:'录播课'
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
content:'PPT+配音'
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
content:'HTML5'
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
content:'OTHER'
|
||||
},
|
||||
]
|
||||
});
|
||||
const getId = (id) => {
|
||||
console.log(id)
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
getId
|
||||
}
|
||||
},
|
||||
setup() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -124,79 +162,33 @@ export default {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -17.5px;
|
||||
// margin-top: -17.5px;
|
||||
margin-top: 20px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
// border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.line{
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-top: 1px solid #F1F2F3;
|
||||
margin-top: 17px;
|
||||
position:absolute;
|
||||
left:0;
|
||||
}
|
||||
.mani {
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
|
||||
.dir {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
// background-color: red;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
font-size: 12px;
|
||||
color: #2478ff;
|
||||
.samegt {
|
||||
margin-top: 3px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.samege {
|
||||
line-height: 12px;
|
||||
}
|
||||
.pre {
|
||||
margin-right: 5px;
|
||||
// background-size: 100%;
|
||||
background-image: url(../../assets/image/ballotpage/pre.png);
|
||||
}
|
||||
.next {
|
||||
margin-left: 5px;
|
||||
// background-size: 100%;
|
||||
background-image: url(../../assets/image/ballotpage/next.png);
|
||||
}
|
||||
// position:relative;
|
||||
.joininfo{
|
||||
color:#0D233A;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
.img {
|
||||
margin-top: 1.5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(../../assets/image/ballotpage/cycle.png);
|
||||
}
|
||||
.rightmain {
|
||||
margin-left: 7.5px;
|
||||
.talk {
|
||||
margin-left: -1.5px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 62.5px;
|
||||
height: 10px;
|
||||
right: 8px;
|
||||
bottom: -5px;
|
||||
background: #ccdfff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.samenum {
|
||||
margin-top: 18.5px;
|
||||
position: absolute;
|
||||
@@ -212,8 +204,47 @@ export default {
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.contenttitle{
|
||||
width:100%;
|
||||
// height:10px;
|
||||
margin-top: 15px;
|
||||
// background-color: #bfa;
|
||||
display:flex;
|
||||
.timeimg{
|
||||
width: 12.8px;
|
||||
height: 13px;
|
||||
}
|
||||
.timee{
|
||||
color:#6E7B84;
|
||||
font-size: 14px;
|
||||
line-height: 13px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
.timebox{
|
||||
display:flex;
|
||||
width: 100%;
|
||||
height:49px;
|
||||
background-color:#F2F5F7;
|
||||
margin-top: 17.5px;
|
||||
margin-bottom: 27.5px;
|
||||
border-radius: 10px;
|
||||
.samez{
|
||||
color:#0060FF;
|
||||
font-size: 18px;
|
||||
line-height: 49px;
|
||||
margin-left: 13px;
|
||||
}
|
||||
.samey{
|
||||
color:#6E7B84;
|
||||
font-size: 14px;
|
||||
line-height: 49px;
|
||||
|
||||
margin-left: 13px;
|
||||
}
|
||||
}
|
||||
.contentone {
|
||||
margin-top: 23px;
|
||||
margin-top: 43px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
@@ -221,7 +252,7 @@ export default {
|
||||
// height: 200px;
|
||||
.same {
|
||||
position: relative;
|
||||
width: 95px;
|
||||
width: 108px;
|
||||
height: 75px;
|
||||
// background-color: red;
|
||||
}
|
||||
@@ -234,110 +265,62 @@ export default {
|
||||
.bh {
|
||||
background-image: url(../../assets/image/ballotpage/baccthr.png);
|
||||
}
|
||||
}
|
||||
|
||||
.contenttwo {
|
||||
position: relative;
|
||||
margin-top: 23px;
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
margin-bottom: 20px;
|
||||
// #B6C6E1
|
||||
// #89AED6
|
||||
background-image: linear-gradient(to right, #b6c6e1, #89aed6 90%);
|
||||
.time {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
color: #fff;
|
||||
.ballotdetail{
|
||||
color:#6E7B84;
|
||||
line-height: 30px;
|
||||
font-size: 13px;
|
||||
height: 20px;
|
||||
}
|
||||
.endbox {
|
||||
margin-top: 42.5px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 95%;
|
||||
height: 45px;
|
||||
background-color: #f2f5f7;
|
||||
border-radius: 0 3px 0 3px;
|
||||
.ballotjoincontainer{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.endtalk {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 18px;
|
||||
.sameto {
|
||||
font-size: 14px;
|
||||
}
|
||||
.sametoo {
|
||||
margin-top: -3px;
|
||||
font-size: 21.5px;
|
||||
color: #4a9cf8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentthr {
|
||||
border-radius: 4px;
|
||||
margin-bottom: 23px;
|
||||
position: relative;
|
||||
margin-top: 23px;
|
||||
width: 100%;
|
||||
// height: 95px;
|
||||
background-color: #f2f5f7;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.thrcontent {
|
||||
width: 90%;
|
||||
margin-top: 19px;
|
||||
margin-bottom: 24.5px;
|
||||
// background-color: blue;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.contentfor {
|
||||
margin-top: 23px;
|
||||
width: 100%;
|
||||
margin-bottom: 34px;
|
||||
// height: 20px;
|
||||
// background-color: red;
|
||||
.imgcontent {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
.imgsame {
|
||||
background-size: 100% 100%;
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
// background-color: blue;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.aimg {
|
||||
background-image: url(../../assets/image/ballotpage/px.jpg);
|
||||
}
|
||||
.bimg {
|
||||
background-image: url(../../assets/image/ballotpage/px.jpg);
|
||||
}
|
||||
.cimg {
|
||||
background-image: url(../../assets/image/ballotpage/px.jpg);
|
||||
justify-content: center;
|
||||
.ballotjoin{
|
||||
width: 85%;
|
||||
// height:100px;
|
||||
// background-color: #bfa;
|
||||
.ballotitem{
|
||||
|
||||
.upitem{
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display:flex;
|
||||
.leftimg{
|
||||
width: 4.5px;
|
||||
height:14.5px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.leftcontent{
|
||||
margin-left: 9px;
|
||||
color:#6E7B84;
|
||||
font-size: 13px;
|
||||
line-height: 30px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
background-color: #2478FF;
|
||||
color:#fff;
|
||||
width:64px;
|
||||
height:21px;
|
||||
border-radius: 10px;
|
||||
border:0;
|
||||
font-size: 12px;
|
||||
line-height:19px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
.thinline{
|
||||
width: 100%;
|
||||
border-top: 1px solid #F1F2F3;
|
||||
margin-top: 17px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +1,15 @@
|
||||
<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>
|
||||
<!-- <TitleHead text="【直播】管理者进阶腾飞班 - 毕业典礼"></TitleHead> -->
|
||||
|
||||
<div class="tithead">
|
||||
<div class="headin">
|
||||
<div class="vaa">
|
||||
<img class="vaaimg" src="../../assets/image/discuss/px.jpg" />
|
||||
</div>
|
||||
<div class="vaainfo">
|
||||
<div class="vaana">付欣晴</div>
|
||||
<div class="vaanato">认识事物的本质。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,45 +17,18 @@
|
||||
<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 class="tt clearfix">
|
||||
<div class="ttin">
|
||||
请基于公司战略方向和你所负责的组织业务发展，识别3个你和你的团队在未来3年的新的能力与技能要求
|
||||
</div>
|
||||
</div>
|
||||
<div class="botime">2022-08-15 22:28</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,6 +36,14 @@
|
||||
</div>
|
||||
|
||||
<div class="restore">
|
||||
<div class="reshead">
|
||||
<div class="headn">
|
||||
<div class="pl">评论</div>
|
||||
<div class="ts">1992条</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="linee"></div>
|
||||
|
||||
<div class="restorebox">
|
||||
<div class="restoremani">
|
||||
<div
|
||||
@@ -92,11 +60,6 @@
|
||||
</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>
|
||||
@@ -113,29 +76,35 @@
|
||||
|
||||
<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 class="reccon">
|
||||
<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 class="line"></div> -->
|
||||
<div
|
||||
:class="index === newrestore.length - 1 ? null : 'line'"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,17 +115,51 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 重复上述 -->
|
||||
<div class="linee"></div>
|
||||
<div class="restorebox">
|
||||
<div class="restoremani">
|
||||
<div
|
||||
class="rescon clearfix"
|
||||
style="margin-bottom: 20px"
|
||||
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="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
import TitleHead from "@/components/TitleHead.vue";
|
||||
// import TitleHead from "@/components/TitleHead.vue";
|
||||
export default {
|
||||
name: "DiscussDetail",
|
||||
components: {
|
||||
TitleHead,
|
||||
// TitleHead,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
@@ -169,19 +172,20 @@ export default {
|
||||
reimg: require("../../assets/image/discuss/px.jpg"),
|
||||
},
|
||||
],
|
||||
|
||||
newrestore: [
|
||||
{
|
||||
name: "赵雪梨",
|
||||
time: "三天前",
|
||||
re: "教学重难点突出，板书条理清晰。教学步骤设计合理由浅入深，循序渐进。",
|
||||
head: require("../../assets/image/discuss/px.jpg"),
|
||||
},
|
||||
{
|
||||
name: "赵雪梨",
|
||||
time: "三天前",
|
||||
time: "3天前",
|
||||
re: "教学重难点突出，板书条理清晰。教学步骤设计合理由浅入深，循序渐进。",
|
||||
head: require("../../assets/image/discuss/px.jpg"),
|
||||
},
|
||||
// {
|
||||
// name: "赵雪梨",
|
||||
// time: "三天前",
|
||||
// re: "教学重难点突出，板书条理清晰。教学步骤设计合理由浅入深，循序渐进。",
|
||||
// head: require("../../assets/image/discuss/px.jpg"),
|
||||
// },
|
||||
],
|
||||
});
|
||||
|
||||
@@ -202,107 +206,48 @@ export default {
|
||||
}
|
||||
.discussdetail {
|
||||
width: 100%;
|
||||
.main {
|
||||
.tithead {
|
||||
margin-top: 20px;
|
||||
height: 77px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -14.5px;
|
||||
position: relative;
|
||||
.title {
|
||||
background-color: #fff;
|
||||
.headin {
|
||||
width: 90%;
|
||||
// height: 109px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
height: 100%;
|
||||
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);
|
||||
}
|
||||
}
|
||||
// background-color: lightcoral;
|
||||
.vaa {
|
||||
margin-top: 22px;
|
||||
.vaaimg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.titleblue {
|
||||
margin-top: 18.5px;
|
||||
color: #4a9cf8;
|
||||
}
|
||||
.vaainfo {
|
||||
margin-left: 8px;
|
||||
margin-top: 16.5px;
|
||||
.vaana {
|
||||
color: #0d233a;
|
||||
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;
|
||||
}
|
||||
.vaanato {
|
||||
margin-top: 4px;
|
||||
color: #747474;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
.previewbox {
|
||||
width: 90%;
|
||||
width: 100%;
|
||||
// height: 200px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
@@ -311,46 +256,45 @@ export default {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .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: 100%;
|
||||
// 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%;
|
||||
@@ -365,32 +309,36 @@ export default {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.taklcon {
|
||||
color: #333330;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.bottombox {
|
||||
margin-top: 21px;
|
||||
margin-bottom: 24.5px;
|
||||
.tt {
|
||||
margin-top: 20px;
|
||||
background-color: #f0f3f6;
|
||||
border-radius: 10px;
|
||||
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;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.ttin {
|
||||
width: 90%;
|
||||
margin-top: 25px;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
.botime {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
color: #6e7b84;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
margin: 16.5px 0 18.5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -399,13 +347,40 @@ export default {
|
||||
|
||||
.restore {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
margin-top: 10px;
|
||||
background: #fff;
|
||||
.reshead {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
.headn {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.pl {
|
||||
color: #0d233a;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.ts {
|
||||
color: #6e7b84;
|
||||
font-size: 13px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.linee {
|
||||
height: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #f1f2f3;
|
||||
}
|
||||
.restorebox {
|
||||
width: 90%;
|
||||
width: 100%;
|
||||
// height: 200px;
|
||||
background: #fff;
|
||||
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -437,17 +412,9 @@ export default {
|
||||
.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;
|
||||
margin-top: 7px;
|
||||
color: #5f6d75;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
@@ -493,71 +460,76 @@ export default {
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
}
|
||||
.rec {
|
||||
background-color: #f0f3f6;
|
||||
border-radius: 13px;
|
||||
.reccon {
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
.rec {
|
||||
background-color: #f0f3f6;
|
||||
border-radius: 13px;
|
||||
width: 90%;
|
||||
.it {
|
||||
margin-left: 12.5px;
|
||||
.rename {
|
||||
color: #02172a;
|
||||
font-size: 14px;
|
||||
width: 92%;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
// margin-bottom: 20px;
|
||||
.ava {
|
||||
// margin-top: 20px;
|
||||
.avainner {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.rein {
|
||||
color: #5f6d75;
|
||||
font-size: 14px;
|
||||
margin-top: 16.5px;
|
||||
}
|
||||
.detre {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
.day {
|
||||
.redetail {
|
||||
margin-left: 12.5px;
|
||||
.rename {
|
||||
color: #02172a;
|
||||
font-size: 14px;
|
||||
}
|
||||
.rein {
|
||||
color: #5f6d75;
|
||||
font-size: 14px;
|
||||
margin-right: 14px;
|
||||
margin-top: 16.5px;
|
||||
}
|
||||
.huifu {
|
||||
color: #00152a;
|
||||
font-size: 14px;
|
||||
}
|
||||
.good {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
.detre {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
.gimg {
|
||||
width: 14px;
|
||||
height: 15px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
.day {
|
||||
color: #5f6d75;
|
||||
font-size: 14px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
.gcou {
|
||||
color: #4e5e67;
|
||||
font-size: 13px;
|
||||
margin-top: 2px;
|
||||
margin-left: 7px;
|
||||
.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;
|
||||
.line {
|
||||
// margin-top: 24.5px;
|
||||
margin-left: -45px;
|
||||
height: 0;
|
||||
width: 117%;
|
||||
border-top: 1px solid #dcdedf;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -575,7 +547,7 @@ export default {
|
||||
transform: translate(-50%, 0);
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
color: #5f6d75;
|
||||
color: #2478ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,29 +1,8 @@
|
||||
<template>
|
||||
<div class="discusspage">
|
||||
<TitleHead text="【直播】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
|
||||
<div class="main">
|
||||
<div class="head clearfix">
|
||||
<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>
|
||||
请基于公司战略方向和你所负责的组织业务发展，识别3个你和你的团队在未来3年的新的能力与技能要求
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -31,63 +10,56 @@
|
||||
<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 class="inbtn">
|
||||
<button
|
||||
@click="changee"
|
||||
:class="onfo ? 'new samebtn' : 'samebtn hot'"
|
||||
>
|
||||
最新
|
||||
</button>
|
||||
<div class="dd"></div>
|
||||
<button
|
||||
@click="changeee"
|
||||
:class="onfo ? 'samebtn hot' : 'new samebtn'"
|
||||
>
|
||||
最热
|
||||
</button>
|
||||
</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 class="thinline"></div>
|
||||
<div class="coni">
|
||||
<div class="conin">
|
||||
<div class="tit">{{ item.title }}</div>
|
||||
<div class="inn">{{ item.contain }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thinline"></div>
|
||||
<div class="bott">
|
||||
<div class="dicon">
|
||||
<div class="imgcont">
|
||||
<img
|
||||
class="imgs"
|
||||
src="../../assets/image/discuss/pinglun.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="one">
|
||||
<div>
|
||||
<img
|
||||
class="samt"
|
||||
src="../../assets/image/discuss/dianzan.png"
|
||||
/>
|
||||
</div>
|
||||
<span class="a">{{ item.dianzan }}</span>
|
||||
<div class="samei">{{ item.pinglun }}</div>
|
||||
<div class="imgcont">
|
||||
<img
|
||||
@click="getId(item)"
|
||||
style="margin-left: 56px"
|
||||
class="imgs"
|
||||
:src="
|
||||
item.isGood
|
||||
? require('../../assets/image/discuss/dianzan2.png')
|
||||
: require('../../assets/image/discuss/dianzan.png')
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="one">
|
||||
<div>
|
||||
<img
|
||||
class="samt"
|
||||
src="../../assets/image/discuss/shoucang.png"
|
||||
/>
|
||||
</div>
|
||||
<span class="a">{{ item.shoucang }}</span>
|
||||
<div :class="item.isGood ? 'sameii' : 'samei'">
|
||||
{{ item.dianzan }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,12 +73,10 @@
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
import TitleHead from "@/components/TitleHead.vue";
|
||||
// import TitleHead from "@/components/TitleHead.vue";
|
||||
export default {
|
||||
name: "DiscussPage",
|
||||
components: {
|
||||
TitleHead,
|
||||
},
|
||||
components: {},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
onfo: true,
|
||||
@@ -116,30 +86,30 @@ export default {
|
||||
title: "从营销角度分析：我的团队需要这些能力",
|
||||
contain:
|
||||
"所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说...",
|
||||
time: "2022-7-20 00:00",
|
||||
|
||||
pinglun: 317,
|
||||
dianzan: 103,
|
||||
shoucang: 103,
|
||||
isGood: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "从营销角度分析：我的团队需要这些能力",
|
||||
contain:
|
||||
"所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说...",
|
||||
time: "2022-7-20 00:00",
|
||||
|
||||
pinglun: 317,
|
||||
dianzan: 103,
|
||||
shoucang: 103,
|
||||
isGood: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "从营销角度分析：我的团队需要这些能力",
|
||||
contain:
|
||||
"所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说...",
|
||||
time: "2022-7-20 00:00",
|
||||
|
||||
pinglun: 317,
|
||||
dianzan: 103,
|
||||
shoucang: 103,
|
||||
isGood: false,
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -153,10 +123,20 @@ export default {
|
||||
state.onfo = !state.onfo;
|
||||
}
|
||||
};
|
||||
const getId = (it) => {
|
||||
it.isGood = !it.isGood;
|
||||
if (it.isGood) {
|
||||
it.dianzan++;
|
||||
} else {
|
||||
it.dianzan--;
|
||||
}
|
||||
// console.log(it.isGood);
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
changee,
|
||||
changeee,
|
||||
getId,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -172,107 +152,29 @@ export default {
|
||||
}
|
||||
.discusspage {
|
||||
width: 100%;
|
||||
.main {
|
||||
width: 100%;
|
||||
.head {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -14.5px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-top: 20px;
|
||||
margin-bottom: 21px;
|
||||
color: #333330;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
|
||||
.previewbox {
|
||||
width: 90%;
|
||||
width: 100%;
|
||||
// height: 200px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
@@ -280,25 +182,36 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.previewmani {
|
||||
width: 90%;
|
||||
// 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;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.inbtn {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
.dd {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
.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 {
|
||||
@@ -339,65 +252,112 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.discusscontainer {
|
||||
padding-bottom: 20px;
|
||||
// padding-bottom: 20px;
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
.tit {
|
||||
margin-top: 18px;
|
||||
color: #04243c;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
// line-height: 24px;
|
||||
// width: 90%;
|
||||
// position:relative;
|
||||
|
||||
.thinline {
|
||||
// position:absolute;
|
||||
// margin-top: 12px;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid #f1f2f3;
|
||||
}
|
||||
.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;
|
||||
.coni {
|
||||
width: 100%;
|
||||
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;
|
||||
.conin {
|
||||
width: 90%;
|
||||
.tit {
|
||||
margin-top: 25px;
|
||||
color: #04243c;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
// line-height: 24px;
|
||||
}
|
||||
.inn {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 11px;
|
||||
color: #6e7b84;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bott {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.dicon {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
height: 35px;
|
||||
// background-color: #bfa;
|
||||
.imgcont {
|
||||
margin-top: 10px;
|
||||
.imgs {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
.samei {
|
||||
color: #b3bdc4;
|
||||
font-size: 13px;
|
||||
line-height: 35px;
|
||||
margin-left: 9.5px;
|
||||
}
|
||||
|
||||
.sameii {
|
||||
color: #387df7;
|
||||
font-size: 13px;
|
||||
line-height: 35px;
|
||||
margin-left: 9.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,175 +1,77 @@
|
||||
<template>
|
||||
<div class="homeworkpage">
|
||||
<TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead>
|
||||
<!-- <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead> -->
|
||||
|
||||
<div class="notice">
|
||||
|
||||
<div class="noticebox">
|
||||
|
||||
<div class="mani">
|
||||
<div class="dir">
|
||||
<div class="samegt pre"></div>
|
||||
<div class="sameg">上一个</div>
|
||||
<div class="sameg" style="margin-left: 15.5px">下一个</div>
|
||||
<div class="samegt next"></div>
|
||||
<div class="joininfo">
|
||||
管理者进阶腾飞班 - 第一次作业 - 沙盘实验
|
||||
</div>
|
||||
<div class="contenttitle">
|
||||
<img class="timeimg" src="../../assets/image/ballotpage/time.png" >
|
||||
<div class="timee">2022-07-20 20:00-21:00</div>
|
||||
</div>
|
||||
<div class="timebox">
|
||||
<div class="samez" style="margin-left:18px">00</div>
|
||||
<div class="samey">时</div>
|
||||
<div class="samez">00</div>
|
||||
<div class="samey">分</div>
|
||||
<div class="samez">00</div>
|
||||
<div class="samey">秒</div>
|
||||
</div>
|
||||
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">作业名称</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentone clearfix">
|
||||
<div class="onttitle">管理者进阶腾飞班 - 第一次作业 - 沙盘实验</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">投票时间</div>
|
||||
<div class="box"></div>
|
||||
<div class="notice">
|
||||
|
||||
<div class="noticebox">
|
||||
|
||||
<div class="mani">
|
||||
<div class="joininfo">
|
||||
作业详情
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="contentone">
|
||||
<div class="ballotdetail">
|
||||
1、阅读文章，做名校题库，翻译文言文，整体文化常识和文言知识；<br/>2、《中国古代诗词文化鉴赏》大唐之音、两宋清雅、明清情致
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contenttwo clearfix">
|
||||
<div class="time">
|
||||
<div class="timeone">2022-7-20 00:00</div>
|
||||
<div class="timetwo" style="margin-top: -2.5px">至</div>
|
||||
<div class="timethr">2022-8-29 23:59:59</div>
|
||||
</div>
|
||||
<div class="endbox">
|
||||
<div class="endtalk clearfix">
|
||||
<div class="sameto">距离结束还有</div>
|
||||
<div class="sametoo">123</div>
|
||||
<div class="sameto">小时</div>
|
||||
<div class="sametoo">42</div>
|
||||
<div class="sameto">分钟</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice">
|
||||
|
||||
<div class="noticebox">
|
||||
|
||||
<div class="mani">
|
||||
<div class="joininfo">
|
||||
历史纪录
|
||||
</div>
|
||||
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">投票说明</div>
|
||||
<div class="box"></div>
|
||||
<div class="line"></div>
|
||||
<div class="contentone" style="margin-bottom:10px;">
|
||||
<div class="hiscon">
|
||||
<div
|
||||
class="historyitem clearfix"
|
||||
v-for="(item,index) in historywork"
|
||||
:key="item.id"
|
||||
:style="index%2 !==0? null : 'background-color:#F2F5F7'"
|
||||
>
|
||||
<div class="itemtime">{{item.time}}</div>
|
||||
<div class="itemtitle">{{item.title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="contentthr clearfix">
|
||||
<div class="thrcontent">
|
||||
1、阅读文章，做名校题库，翻译文言文，整体文 化常识和文言知识；<br />
|
||||
2、《中国古代诗词文化鉴赏》大唐之音、两宋清 雅、明清情致
|
||||
<div class="btnc">
|
||||
<button class="btncc">交作业</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">作业内容</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contentfor clearfix">
|
||||
<el-input
|
||||
v-model="textarea1"
|
||||
:autosize="{ minRows: 12.5, maxRows: 12.5 }"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
@input="textareaInput"
|
||||
class="input"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="uploadDetail"
|
||||
:style="{ display: uploadfile ? 'block' : 'none' }"
|
||||
>
|
||||
<div class="square clearfix">
|
||||
<div class="squarecontent1">
|
||||
<div class="rar"></div>
|
||||
<div class="rarDetail">
|
||||
<span class="detail1" style="margin-right: 42px">
|
||||
文件名称1.rar
|
||||
</span>
|
||||
<span class="detail2" style="margin-right: 10px">48%</span>
|
||||
<span class="detail1">正在上传</span>
|
||||
<div class="progress">
|
||||
<div class="progressinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn samebtnn">暂停</button>
|
||||
<button class="btn samebtnn">取消</button>
|
||||
</div>
|
||||
|
||||
<div class="squarecontent2">
|
||||
<div class="rar"></div>
|
||||
<div class="rarDetail">
|
||||
<span class="detail1" style="margin-right: 42px">
|
||||
文件名称2.rar
|
||||
</span>
|
||||
<span class="detail2" style="margin-right: 10px">80%</span>
|
||||
<span class="detail1">上传失败</span>
|
||||
<div class="progress">
|
||||
<div class="progressinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn samebtnn">重传</button>
|
||||
<button class="btn samebtnn">取消</button>
|
||||
</div>
|
||||
|
||||
<div class="squarecontent3">
|
||||
<div class="rar"></div>
|
||||
<div class="rarDetail">
|
||||
<span class="detail1" style="margin-right: 34px">
|
||||
文件名称3.rar
|
||||
</span>
|
||||
<span class="detail2" style="margin-right: 10px">100%</span>
|
||||
<span class="detail1">上传成功</span>
|
||||
<div class="progress">
|
||||
<div class="progressinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn samebtnn" style="margin-left: 7px">
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btnbox">
|
||||
<div class="btnn">
|
||||
<button class="btns btno" @click="uploadFile">上传</button>
|
||||
<button class="btns btnt">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">历史纪录</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contentfiv">
|
||||
<div class="his clearfix">
|
||||
<div class="histime">2022-7-20 00:00</div>
|
||||
<div class="hiscon">大唐之音鉴赏 - 2022/7/20.zip</div>
|
||||
</div>
|
||||
<div class="his clearfix" style="background-color: #fff">
|
||||
<div class="histime">2022-7-18 00:00</div>
|
||||
<div class="hiscon">
|
||||
《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…
|
||||
</div>
|
||||
</div>
|
||||
<div class="his clearfix">
|
||||
<div class="histime">2022-7-14 00:00</div>
|
||||
<div class="hiscon">湖北黄冈语文压卷题.doc</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -178,29 +80,42 @@
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
import TitleHead from "@/components/TitleHead.vue";
|
||||
// import TitleHead from "@/components/TitleHead.vue";
|
||||
export default {
|
||||
name: "HomeworkPage",
|
||||
components: {
|
||||
TitleHead,
|
||||
// TitleHead,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
uploadfile: false,
|
||||
textarea1: " ",
|
||||
historywork:[
|
||||
{
|
||||
id:1,
|
||||
time:'2022-7-20 00:00',
|
||||
title:'大唐之音鉴赏 - 2022/7/20.zip'
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
time:'2022-7-18 00:00',
|
||||
title:'《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…'
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
time:'2022-7-14 00:00',
|
||||
title:'大唐之音鉴赏 - 2022/7/20.zip'
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
time:'2022-7-18 00:00',
|
||||
title:'《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…'
|
||||
},
|
||||
]
|
||||
});
|
||||
const uploadFile = () => {
|
||||
state.uploadfile = !state.uploadfile;
|
||||
};
|
||||
const textareaInput = (e) => {
|
||||
// console.log("eee", e);
|
||||
state.textarea1 = e;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
uploadFile,
|
||||
textareaInput,
|
||||
};
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -220,443 +135,122 @@ export default {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -17.5px;
|
||||
// margin-top: -17.5px;
|
||||
margin-top: 20px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
// border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.line{
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-top: 1px solid #F1F2F3;
|
||||
margin-top: 17px;
|
||||
position:absolute;
|
||||
left:0;
|
||||
}
|
||||
.mani {
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
|
||||
.dir {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
// background-color: red;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
font-size: 12px;
|
||||
color: #2478ff;
|
||||
.samegt {
|
||||
margin-top: 3px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.samege {
|
||||
line-height: 12px;
|
||||
}
|
||||
.pre {
|
||||
margin-right: 5px;
|
||||
// background-size: 100%;
|
||||
background-image: url(../../assets/image/ballotpage/pre.png);
|
||||
}
|
||||
.next {
|
||||
margin-left: 5px;
|
||||
// background-size: 100%;
|
||||
background-image: url(../../assets/image/ballotpage/next.png);
|
||||
}
|
||||
}
|
||||
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
.img {
|
||||
margin-top: 1.5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(../../assets/image/ballotpage/cycle.png);
|
||||
}
|
||||
.rightmain {
|
||||
margin-left: 7.5px;
|
||||
.talk {
|
||||
margin-left: -1.5px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 62.5px;
|
||||
height: 10px;
|
||||
right: 8px;
|
||||
bottom: -5px;
|
||||
background: #ccdfff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.samenum {
|
||||
margin-top: 18.5px;
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
// position:relative;
|
||||
.joininfo{
|
||||
color:#0D233A;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.samego {
|
||||
margin-top: 45px;
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
.contenttitle{
|
||||
width:100%;
|
||||
// height:10px;
|
||||
margin-top: 15px;
|
||||
// background-color: #bfa;
|
||||
display:flex;
|
||||
.timeimg{
|
||||
width: 12.8px;
|
||||
height: 13px;
|
||||
}
|
||||
.timee{
|
||||
color:#6E7B84;
|
||||
font-size: 14px;
|
||||
line-height: 13px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
.timebox{
|
||||
display:flex;
|
||||
width: 100%;
|
||||
height:49px;
|
||||
background-color:#F2F5F7;
|
||||
margin-top: 17.5px;
|
||||
margin-bottom: 27.5px;
|
||||
border-radius: 10px;
|
||||
.samez{
|
||||
color:#0060FF;
|
||||
font-size: 18px;
|
||||
line-height: 49px;
|
||||
margin-left: 13px;
|
||||
}
|
||||
.samey{
|
||||
color:#6E7B84;
|
||||
font-size: 14px;
|
||||
line-height: 49px;
|
||||
|
||||
margin-left: 13px;
|
||||
}
|
||||
}
|
||||
.contentone {
|
||||
margin-top: 23px;
|
||||
margin-top: 43px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
height: 74px;
|
||||
// #DFEBFF
|
||||
// #fff
|
||||
background-image: url(../../assets/image/homeworkpage/bacc.png);
|
||||
background-size: 100% 100%;
|
||||
color: #4a9cf8;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
.onttitle {
|
||||
margin-top: 15px;
|
||||
// width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.contenttwo {
|
||||
position: relative;
|
||||
margin-top: 23px;
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
margin-bottom: 20px;
|
||||
// #B6C6E1
|
||||
// #89AED6
|
||||
background-image: linear-gradient(to right, #b6c6e1, #89aed6 90%);
|
||||
.time {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
color: #fff;
|
||||
// height: 200px;
|
||||
|
||||
.ballotdetail{
|
||||
color:#6E7B84;
|
||||
line-height: 30px;
|
||||
font-size: 13px;
|
||||
height: 20px;
|
||||
}
|
||||
.endbox {
|
||||
margin-top: 42.5px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 95%;
|
||||
height: 45px;
|
||||
background-color: #f2f5f7;
|
||||
border-radius: 0 3px 0 3px;
|
||||
.hiscon{
|
||||
width: 100%;
|
||||
.historyitem{
|
||||
// margin-left: 21px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
.itemtime{
|
||||
color:#6E7B84;
|
||||
margin-left: 21px;
|
||||
font-size: 12px;
|
||||
margin-top: 11px;
|
||||
}
|
||||
.itemtitle{
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
color:#333330;
|
||||
margin:10.5px 0 10.5px 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.btnc{
|
||||
width:100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.endtalk {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 18px;
|
||||
.sameto {
|
||||
font-size: 14px;
|
||||
}
|
||||
.sametoo {
|
||||
margin-top: -3px;
|
||||
font-size: 21.5px;
|
||||
color: #4a9cf8;
|
||||
}
|
||||
.btncc{
|
||||
margin-bottom: 19px;
|
||||
height:33px;
|
||||
width:88%;
|
||||
border:0;
|
||||
background-color: #2478FF;
|
||||
border-radius: 6px;
|
||||
color:#fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentthr {
|
||||
border-radius: 4px;
|
||||
margin-bottom: 23px;
|
||||
position: relative;
|
||||
margin-top: 23px;
|
||||
width: 100%;
|
||||
// height: 95px;
|
||||
background-color: #f2f5f7;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.thrcontent {
|
||||
width: 90%;
|
||||
margin-top: 19px;
|
||||
margin-bottom: 15.5px;
|
||||
// background-color: blue;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.contentfor {
|
||||
margin-top: 23px;
|
||||
width: 100%;
|
||||
margin-bottom: 34px;
|
||||
height: 200px;
|
||||
// background-color: red;
|
||||
position: relative;
|
||||
// .input {
|
||||
// background-color: #f5f6f7;
|
||||
// }
|
||||
.el-textarea__inner {
|
||||
background-color: #f5f6f7;
|
||||
}
|
||||
.uploadDetail {
|
||||
.samebtnn {
|
||||
padding: 0;
|
||||
}
|
||||
position: absolute;
|
||||
// top: 110px;
|
||||
top: 120px;
|
||||
right: -14px;
|
||||
z-index: 999;
|
||||
width: 109%;
|
||||
.triangle {
|
||||
top: 156px;
|
||||
left: 110px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
border-top: 5px solid #fff;
|
||||
// box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
|
||||
}
|
||||
|
||||
.square {
|
||||
// width: 475px;
|
||||
// width: 100%;
|
||||
height: 156px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
|
||||
border-radius: 8px;
|
||||
.squarecontent1 {
|
||||
// padding-top: 18px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
.rar {
|
||||
margin: 12px 15px 0 27px;
|
||||
width: 19px;
|
||||
height: 22px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../../assets/image/homeworkpage/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: 202px;
|
||||
height: 8px;
|
||||
background: #e8f1fe;
|
||||
border-radius: 4px;
|
||||
.progressinner {
|
||||
width: 48%;
|
||||
height: 8px;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
#2478ff 0%,
|
||||
#5093ff 100%
|
||||
);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
color: #277aff;
|
||||
margin-top: 8px;
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.squarecontent2 {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
.rar {
|
||||
margin: 12px 15px 0 27px;
|
||||
width: 19px;
|
||||
height: 22px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../../assets/image/homeworkpage/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: 202px;
|
||||
height: 8px;
|
||||
background: #e8f1fe;
|
||||
border-radius: 4px;
|
||||
.progressinner {
|
||||
width: 80%;
|
||||
height: 8px;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
#ee625e 0%,
|
||||
#eea4a1 100%
|
||||
);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
color: #277aff;
|
||||
margin-top: 8px;
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
}
|
||||
.btndetail {
|
||||
// margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.squarecontent3 {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
.rar {
|
||||
margin: 12px 15px 0 27px;
|
||||
width: 19px;
|
||||
height: 22px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../../assets/image/homeworkpage/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: 202px;
|
||||
height: 8px;
|
||||
background: #e8f1fe;
|
||||
border-radius: 4px;
|
||||
.progressinner {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
#36d1ae 0%,
|
||||
#3be5bf 100%
|
||||
);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
color: #277aff;
|
||||
margin-top: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btndetail {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btnbox {
|
||||
margin-top: 90px;
|
||||
// height: 20px;
|
||||
width: 100%;
|
||||
// background-color: red;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.btnn {
|
||||
color: #fff;
|
||||
width: 60%;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.btns {
|
||||
color: #fff;
|
||||
width: 83px;
|
||||
height: 33px;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.btno {
|
||||
background-color: #ffb96d;
|
||||
}
|
||||
.btnt {
|
||||
background-color: #2478ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentfiv {
|
||||
margin-top: 26px;
|
||||
width: 100%;
|
||||
margin-bottom: 34px;
|
||||
// height: 200px;
|
||||
// background-color: #bfa;
|
||||
.his {
|
||||
width: 100%;
|
||||
// height: 100px;
|
||||
background-color: #f2f5f7;
|
||||
border-radius: 4px;
|
||||
.histime {
|
||||
color: #677d86;
|
||||
font-size: 12px;
|
||||
margin-top: 11px;
|
||||
margin-left: 22px;
|
||||
}
|
||||
.hiscon {
|
||||
width: 87%;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
margin: 11px 0 11px 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="Investigat">
|
||||
<TitleHead text="【调研】管理者进阶腾飞班 - 培训阶段性调研"></TitleHead>
|
||||
<!-- <TitleHead text="【调研】管理者进阶腾飞班 - 培训阶段性调研"></TitleHead> -->
|
||||
|
||||
<div class="notice">
|
||||
<div class="noticebox">
|
||||
<div class="mani">
|
||||
<div class="dir">
|
||||
<!-- <div class="dir">
|
||||
<div class="samegt pre"></div>
|
||||
<div class="sameg">上一个</div>
|
||||
<div class="sameg" style="margin-left: 15.5px">下一个</div>
|
||||
<div class="samegt next"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div
|
||||
class="question"
|
||||
v-for="(value, index) in question"
|
||||
@@ -18,10 +18,12 @@
|
||||
:style="{ 'margin-top': '20px' }"
|
||||
>
|
||||
<div class="text">{{ value.text }}</div>
|
||||
<div class="answerL">
|
||||
<div class="answerLcontainer">
|
||||
<div class="answerL">
|
||||
<div>完全没用</div>
|
||||
<div>非常好</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<div class="answerC">
|
||||
<div class="itemwrap">
|
||||
@@ -48,7 +50,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="question" style="margin-top: 20px">
|
||||
<div class="text">4.类似相应的课程，您认为适合哪些人观看？</div>
|
||||
<div class="text">4、类似相应的课程，您认为适合哪些人观看？</div>
|
||||
<div
|
||||
v-for="(value, index) in viewpeople"
|
||||
:key="index"
|
||||
@@ -56,24 +58,29 @@
|
||||
:style="{ 'margin-top': '22px' }"
|
||||
@click="selectPeople(value)"
|
||||
>
|
||||
<img
|
||||
style="width: 14px; height: 13px; cursor: pointer"
|
||||
<div class="conn">
|
||||
<div class="peoplecontainer">
|
||||
<img
|
||||
style="width: 14px; height: 13px"
|
||||
:src="
|
||||
value.select
|
||||
? require('../../assets/image/investigat/checkbox.png')
|
||||
: require('../../assets/image/investigat/checkbox2.png')
|
||||
"
|
||||
/>
|
||||
<div class="people" style="font-size: 13px; margin-left: 7px">
|
||||
<div class="people" style="font-size: 13px; margin-left: 7px;margin-top: -2px;">
|
||||
{{ value.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question" style="margin-top: 21px">
|
||||
<div class="text">5.您的其他意见</div>
|
||||
<div class="text">5、您的其他意见</div>
|
||||
<div style="margin-top: 21px; position: relative">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
<div class="inputcon">
|
||||
<el-input
|
||||
style="width: 87%"
|
||||
v-model="textarea1"
|
||||
:autosize="{ minRows: 5, maxRows: 5 }"
|
||||
resize="none"
|
||||
@@ -81,6 +88,7 @@
|
||||
type="textarea"
|
||||
@input="textareaInput"
|
||||
/>
|
||||
</div>
|
||||
<div class="words">{{ textarealength }}/200</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,28 +103,28 @@
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
import TitleHead from "@/components/TitleHead.vue";
|
||||
// import TitleHead from "@/components/TitleHead.vue";
|
||||
export default {
|
||||
name: "InvestigatPage",
|
||||
components: {
|
||||
TitleHead,
|
||||
// TitleHead,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
question: [
|
||||
{
|
||||
id: 1,
|
||||
text: "1.您觉得课程对您是否有用？",
|
||||
text: "1、您觉得课程对您是否有用？",
|
||||
selectAnswer: 0,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "2.您是否会推荐课程给其他同事？",
|
||||
text: "2、您是否会推荐课程给其他同事？",
|
||||
selectAnswer: 0,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "3.后续该讲师有其他课程是否会参与？",
|
||||
text: "3、后续该讲师有其他课程是否会参与？",
|
||||
selectAnswer: 0,
|
||||
},
|
||||
],
|
||||
@@ -194,9 +202,11 @@ export default {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -17.5px;
|
||||
// margin-top: -17.5px;
|
||||
margin-top: 20px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
// width: 90%;
|
||||
width:100%;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
@@ -204,7 +214,7 @@ export default {
|
||||
justify-content: center;
|
||||
.mani {
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
// margin-top: 20px;
|
||||
|
||||
.dir {
|
||||
width: 100%;
|
||||
@@ -234,32 +244,50 @@ export default {
|
||||
background-image: url(../../assets/image/ballotpage/next.png);
|
||||
}
|
||||
}
|
||||
|
||||
.conn{
|
||||
width: 100%;
|
||||
display:flex;
|
||||
justify-content: right;
|
||||
// background-color:yellow;
|
||||
.peoplecontainer{
|
||||
// background-color: yellowgreen;
|
||||
display: flex;
|
||||
width: 94%;
|
||||
}
|
||||
}
|
||||
.question {
|
||||
.text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333330;
|
||||
}
|
||||
.answerL {
|
||||
.answerLcontainer{
|
||||
width: 100%;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
.answerL {
|
||||
width:87%;
|
||||
margin-bottom: -20px;
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
color: #56a3f9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.answer {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #56a3f9;
|
||||
.answerC {
|
||||
// width: 540px;
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
width:86%;
|
||||
height: 43px;
|
||||
border: 1px solid #d7e5fd;
|
||||
border-radius: 8px;
|
||||
@@ -284,7 +312,6 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -299,19 +326,25 @@ export default {
|
||||
}
|
||||
.question .words {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 5px;
|
||||
right: 35px;
|
||||
bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333330;
|
||||
}
|
||||
.inputcon{
|
||||
width:100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.question .el-textarea__inner {
|
||||
border-radius: 8px;
|
||||
background-color: rgba(245, 246, 247, 1);
|
||||
}
|
||||
.submit {
|
||||
// width: 126px;
|
||||
width: 100%;
|
||||
width: 87%;
|
||||
height: 31.5px;
|
||||
background: #2478ff;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||
@@ -323,7 +356,6 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
margin-top: 10.5px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@@ -1,133 +1,97 @@
|
||||
<template>
|
||||
<div class="liveboradcast">
|
||||
<TitleHead text="【直播】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
|
||||
<div class="main">
|
||||
<div class="title">
|
||||
<div class="inner">
|
||||
<!-- 时间 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>
|
||||
<!-- <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead> -->
|
||||
<div class="top">
|
||||
<div class="topin">
|
||||
<div class="topsa">请各位选课的同学提前阅读本课程的“教学大纲与计划…</div>
|
||||
<img class="topimg" src="../../assets/image/liveboradcast/cha.png" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice" style="margin-top:0">
|
||||
|
||||
<div class="noticebox">
|
||||
<div class="avator">
|
||||
<img class="avaimg" src="../../assets/image/liveboradcast/px.jpg">
|
||||
<div class="avaname">刘敏</div>
|
||||
</div>
|
||||
<div class="mani">
|
||||
<div class="joininfo" >
|
||||
管理者进阶腾飞班 - 专属线下活动
|
||||
</div>
|
||||
<div class="contenttitle">
|
||||
<img class="timeimg" src="../../assets/image/ballotpage/time.png" >
|
||||
<div class="timee">2022-07-20 20:00-21:00</div>
|
||||
</div>
|
||||
<div class="midline"></div>
|
||||
<div class="timebox">
|
||||
<div class="allbtn">
|
||||
<button class="samebtn btno">观看</button>
|
||||
<button class="samebtn btnt">签到</button>
|
||||
<button class="samebtn btnr">评估</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- button 外部盒子 -->
|
||||
<div class="allbtn">
|
||||
<button class="samebtn btnone">观看</button>
|
||||
<button class="samebtn btntwo" style="margin-left: 9px">
|
||||
签到
|
||||
</button>
|
||||
<button class="samebtn btnthr" style="margin-left: 9px">
|
||||
评估
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notice">
|
||||
|
||||
<div class="noticebox">
|
||||
|
||||
<div class="mani">
|
||||
<div class="joininfo">
|
||||
活动详情
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="contentone">
|
||||
<div class="actinner">
|
||||
活动详情<br/>通过对各级人员的软件平台培训，使其能够了解如何运用乾元坤和智能信息管理系统来提升企业管理水平，最大限度发挥软件产品在企业中的作用;<br/>● 培训目标<br/>1.使企业不同部门人员掌握便捷、有效的系统平台操作方法;<br/>2.通过系统平台的培训提高员工对企业的管理理念认识与提升。<br/>3.通过系统平台培训加强沟通，统一部署，协同工作，提高效率。<br/>● 培训对象<br/>集团领导、各相关部门领导、总经理、车间主管、车间操作员
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice">
|
||||
|
||||
<div class="noticebox">
|
||||
|
||||
<div class="mani">
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">直播公告</div>
|
||||
<div class="box"></div>
|
||||
<div class="joininfo">
|
||||
课后作业
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="contentone">
|
||||
<div class="de">
|
||||
<div class="deal">网易有道词典现有功能结构拆解</div>
|
||||
<img class="rightpng" src="../../assets/image/liveboradcast/toright.png" >
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="content">
|
||||
当你走进这直播间，我和毛不易老师@毛不易就已经在直播间等你们了!今晚20点30，不见不散!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="teach">
|
||||
<div class="teachbox">
|
||||
<div class="teachmani">
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">直播讲师</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teachcontent">
|
||||
<div class="avator"></div>
|
||||
<div class="nametalk">
|
||||
<div class="name">王星天（显示事业）</div>
|
||||
<div class="talk">教师是学生的镜子,学生是老师的影子。</div>
|
||||
</div>
|
||||
<button class="likebtn">+ 关注</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview">
|
||||
<div class="previewbox">
|
||||
<div class="previewmani">
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">课前预习</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="previewcontent">
|
||||
通过对各级人员的软件平台培训，使其能够了解如何运用乾元坤和智能信息管理系统来提升企业管理水平最大限度发挥软件产品在企业中的作用;
|
||||
<br />
|
||||
● 培训目标
|
||||
<br />1.使企业不同部门人员掌握便捷、有效的系统平台操作方法;
|
||||
<br />
|
||||
2.通过系统平台的培训提高员工对企业的管理理念认识与提升。
|
||||
<br />
|
||||
3.通过系统平台培训加强沟通，统一部署，协同工作提高效率。
|
||||
<br />● 培训对象
|
||||
<br />
|
||||
集团领导、各相关部门领导、总经理、车间主管、车间操作员等;
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="work">
|
||||
<div class="workbox">
|
||||
<div class="workmani">
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">课后作业</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="workcontent">
|
||||
<div class="tit">网易有道词典现有功能结构拆解+问题分析</div>
|
||||
<div class="con">
|
||||
查找资料，介绍一种国外（日本、美国、欧洲）道路（公路、铁路、城市道路、地铁）设计规范的演变过程，可以一种或几种主要技术指标为例，并说明其原因
|
||||
</div>
|
||||
<div class="detailin">
|
||||
<div class="in">查找资料，介绍一种国外（日本、美国、欧洲）道路（公路、铁路、城市道路、地铁）设计规范的演变过程，可以一种或几种主要技术指标为例，并说明其原因。</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { reactive, toRefs } from "vue";
|
||||
import TitleHead from "@/components/TitleHead.vue";
|
||||
// import TitleHead from "@/components/TitleHead.vue";
|
||||
export default {
|
||||
name: "LiveBoradcast",
|
||||
components: {
|
||||
TitleHead,
|
||||
// TitleHead,
|
||||
},
|
||||
setup() {
|
||||
|
||||
},
|
||||
setup() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -141,366 +105,234 @@ export default {
|
||||
}
|
||||
.liveboradcast {
|
||||
width: 100%;
|
||||
.main {
|
||||
.top{
|
||||
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;
|
||||
// justify-content: space-between;
|
||||
// background-color: orange;
|
||||
// dd
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.allbtn {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.samebtn {
|
||||
width: 83px;
|
||||
height: 33px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btnone {
|
||||
background: #00c1fc;
|
||||
box-shadow: 0px 1px 8px 0px rgba(0, 193, 252, 0.7);
|
||||
}
|
||||
.btntwo {
|
||||
background: #0096fa;
|
||||
box-shadow: 0px 1px 8px 0px rgba(0, 150, 250, 0.7);
|
||||
}
|
||||
.btnthr {
|
||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||
background: #2478ff;
|
||||
}
|
||||
}
|
||||
height:25px;
|
||||
background-color: #FFFBEE;
|
||||
.topin{
|
||||
// text-align: center;
|
||||
width:90%;
|
||||
height: 25px;
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
.topsa{
|
||||
color:#FF9E00;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.topimg{
|
||||
height: 10px;
|
||||
width:10px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
// margin-top: -17.5px;
|
||||
margin-top: 20px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(36, 120, 255, 0.15) 0%,
|
||||
white 70%
|
||||
);
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
// border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.avator{
|
||||
display:flex;
|
||||
position:absolute;
|
||||
right:29px;
|
||||
top:30px;
|
||||
// background-color:red;
|
||||
// z-index: 999;
|
||||
.avaimg{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.avaname{
|
||||
line-height: 30px;
|
||||
margin-left: 8px;
|
||||
color:#0D233A;
|
||||
}
|
||||
}
|
||||
.line{
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-top: 1px solid #F1F2F3;
|
||||
margin-top: 17px;
|
||||
position:absolute;
|
||||
left:0;
|
||||
}
|
||||
.mani {
|
||||
margin-left: 20.5px;
|
||||
margin-top: 20px;
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
.img {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url(../../assets/image/liveboradcast/notic.png);
|
||||
}
|
||||
.rightmain {
|
||||
margin-left: 7.5px;
|
||||
.talk {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 62.5px;
|
||||
height: 10px;
|
||||
right: 6px;
|
||||
bottom: -4px;
|
||||
background: #ccdfff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
color: #677d86;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
font-weight: 700;
|
||||
margin: 21.5px 26.5px 32.5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.teach {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
.teachbox {
|
||||
width: 90%;
|
||||
// height: 200px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.teachmani {
|
||||
// margin-left: 20.5px;
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
.img {
|
||||
width: 17px;
|
||||
height: 17.5px;
|
||||
background-image: url(../../assets/image/liveboradcast/tv.png);
|
||||
// position:relative;
|
||||
.joininfo{
|
||||
color:#0D233A;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.contenttitle{
|
||||
width:100%;
|
||||
// height:10px;
|
||||
margin-top: 15px;
|
||||
// background-color: #bfa;
|
||||
display:flex;
|
||||
.timeimg{
|
||||
width: 12.8px;
|
||||
height: 13px;
|
||||
}
|
||||
.rightmain {
|
||||
margin-left: 7.5px;
|
||||
.talk {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 62.5px;
|
||||
height: 10px;
|
||||
right: 6px;
|
||||
bottom: -4px;
|
||||
background: #ccdfff;
|
||||
}
|
||||
.timee{
|
||||
color:#6E7B84;
|
||||
font-size: 14px;
|
||||
line-height: 13px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
.teachcontent {
|
||||
display: flex;
|
||||
.midline{
|
||||
height:0;
|
||||
border-top: 1px solid #F1F2F3;
|
||||
width:100%;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 27px;
|
||||
.avator {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-image: url(../../assets/image/liveboradcast/px.jpg);
|
||||
}
|
||||
.nametalk {
|
||||
margin-left: 11.5px;
|
||||
.name {
|
||||
}
|
||||
.timebox{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
// height: 100px;
|
||||
// background-color: #bfa;
|
||||
margin-bottom: 15px;
|
||||
.allbtn{
|
||||
width: 92%;
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
// background-color: lightcoral;
|
||||
.samebtn{
|
||||
width: 93px;
|
||||
height:33px;
|
||||
border:0;
|
||||
color:#fff;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.talk {
|
||||
width: 148px;
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.btno{
|
||||
background-color: #00C1FC;
|
||||
}
|
||||
.btnt{
|
||||
background-color:#0096FA;
|
||||
}
|
||||
.btnr{
|
||||
background-color: #2478FF;
|
||||
}
|
||||
}
|
||||
.likebtn {
|
||||
// margin: 10px 20px 0 0px;
|
||||
}
|
||||
.detailin{
|
||||
width:100%;
|
||||
// height: 100px;
|
||||
// background-color: red;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.in{
|
||||
margin-left: 20px;
|
||||
margin-top: 12px;
|
||||
width: 73px;
|
||||
height: 28px;
|
||||
background-color: #2478ff;
|
||||
border: 0;
|
||||
width:86%;
|
||||
color:#6E7B84;
|
||||
line-height: 30px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
// margin-left: 20.5px;
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
.lefttitle {
|
||||
.contentone {
|
||||
margin-top: 43px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
.img {
|
||||
width: 17px;
|
||||
height: 16px;
|
||||
background-image: url(../../assets/image/liveboradcast/class.png);
|
||||
}
|
||||
.rightmain {
|
||||
margin-left: 7.5px;
|
||||
.talk {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 62.5px;
|
||||
height: 10px;
|
||||
right: 6px;
|
||||
bottom: -5px;
|
||||
background: #ccdfff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.previewcontent {
|
||||
margin: 20.5px 0px 24px 0px;
|
||||
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #333330;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.work {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
.workbox {
|
||||
width: 90%;
|
||||
// height: 200px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.workmani {
|
||||
// margin-left: 20.5px;
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(../../assets/image/liveboradcast/write.png);
|
||||
}
|
||||
.rightmain {
|
||||
margin-left: 7.5px;
|
||||
.talk {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 62.5px;
|
||||
height: 10px;
|
||||
right: 3px;
|
||||
bottom: -3px;
|
||||
background: #ccdfff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workcontent {
|
||||
margin: 17px 0px 25.5px 0px;
|
||||
.tit {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
// height: 200px;
|
||||
.actinner{
|
||||
// background-color: red;
|
||||
color:#6E7B84;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.de{
|
||||
width:100%;
|
||||
height:34px;
|
||||
border-radius: 10px;
|
||||
background-color: #F2F5F7;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.deal{
|
||||
color:#333330;
|
||||
font-weight: bold;
|
||||
line-height: 34px;
|
||||
margin-left: 21px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.rightpng{
|
||||
width: 6px;
|
||||
height:11px;
|
||||
margin-right: 6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
.ballotjoincontainer{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
.ballotjoin{
|
||||
width: 85%;
|
||||
// height:100px;
|
||||
// background-color: #bfa;
|
||||
.ballotitem{
|
||||
|
||||
.upitem{
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display:flex;
|
||||
.leftimg{
|
||||
width: 4.5px;
|
||||
height:14.5px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.leftcontent{
|
||||
margin-left: 9px;
|
||||
color:#6E7B84;
|
||||
font-size: 13px;
|
||||
line-height: 30px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
background-color: #2478FF;
|
||||
color:#fff;
|
||||
width:64px;
|
||||
height:21px;
|
||||
border-radius: 10px;
|
||||
border:0;
|
||||
font-size: 12px;
|
||||
line-height:19px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
.thinline{
|
||||
width: 100%;
|
||||
border-top: 1px solid #F1F2F3;
|
||||
margin-top: 17px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.con {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #333330;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user