mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-11 03:46:47 +08:00
feat：新增讨论页面 讨论详情页面 style：解决部分页面上部偏离的问题 解决投票页面图片显示不完整问题
This commit is contained in:
songwc
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>
|
||||
Reference in New Issue
Block a user