You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
563 lines
15 KiB
563 lines
15 KiB
2 years ago
|
<template>
|
||
|
|
<div class="wrap index">
|
||
|
|
<div class="banner"
|
||
|
|
:style="{backgroundImage: 'url(' + (form.carouselUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220613/png/1536269450851409920.png') + ')'}"></div>
|
||
|
|
<div class="center-con">
|
||
|
|
<div class="center-wrap">
|
||
|
|
<breadcrumb ref="breadcrumb"
|
||
|
|
:data="'全部项目/' + form.projectName"></breadcrumb>
|
||
|
|
<div class="content">
|
||
|
|
<div class="tool flex-between">
|
||
|
|
<el-tabs v-model="curType"
|
||
|
|
@tab-click="typeChange">
|
||
|
|
<el-tab-pane v-for="(item, index) in typeList"
|
||
|
|
:key="index"
|
||
|
|
:label="item.name"
|
||
|
|
:name="item.id"></el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<div class="status wait">等待报名</div>
|
||
|
|
</div>
|
||
|
|
<div class="info">
|
||
|
|
<h6 class="title">{{ form.projectName }}</h6>
|
||
|
|
<div class="meta">最近编辑时间：{{ form.updateTime }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-show="curType < 4">
|
||
|
|
<div class="l-title"
|
||
|
|
id="part1"><img src="@/assets/img/label.png"
|
||
|
|
alt=""> 项目信息</div>
|
||
|
|
<div v-if="form.projectDescribe"
|
||
|
|
class="texts ql-editor"
|
||
|
|
v-html="form.projectDescribe"></div>
|
||
|
|
<template v-if="form.activityFileList">
|
||
|
|
<h6 class="p-title">附件下载</h6>
|
||
|
|
<ul class="files">
|
||
|
|
<li v-for="(item, i) in form.activityFileList"
|
||
|
|
:key="i">
|
||
|
|
<el-link v-if="item.canPreview"
|
||
|
|
class="m-r-10"
|
||
|
|
type="primary"
|
||
|
|
@click="preview(item)">{{ item.fileName }}</el-link>
|
||
|
|
<span v-else
|
||
|
|
class="fileName">{{ item.fileName }}</span>
|
||
|
|
<el-link type="primary"
|
||
|
|
:underline="false"
|
||
|
|
@click="download(item)">下载</el-link>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!-- 进展 -->
|
||
|
|
<div class="l-title"
|
||
|
|
id="part2"><img src="@/assets/img/label.png"
|
||
|
|
alt=""> 项目进展</div>
|
||
|
|
<ul class="progress"
|
||
|
|
v-if="progress.length">
|
||
|
|
<li v-for="(item,index) in progress"
|
||
|
|
:key="index"
|
||
|
|
:class="item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done')">
|
||
|
|
<i class="dot"></i>
|
||
|
|
<p class="name">{{item.title}}</p>
|
||
|
|
<p class="desc">{{item.description}}</p>
|
||
|
|
</li>
|
||
|
|
<img class="rocket"
|
||
|
|
src="@/assets/img/rocket.png"
|
||
|
|
alt="">
|
||
|
|
</ul>
|
||
|
|
<template v-else>
|
||
|
|
<div class="empty">
|
||
|
|
<div>
|
||
|
|
<img src="@/assets/img/none.png"
|
||
|
|
alt="">
|
||
|
|
<p>暂无数据</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!-- 公告 -->
|
||
|
|
<div class="l-title"
|
||
|
|
id="part3"><img src="@/assets/img/label.png"
|
||
|
|
alt=""> 通知公告</div>
|
||
|
|
<ul class="notice-list"
|
||
|
|
v-if="notices.length">
|
||
|
|
<li v-for="(item, i) in notices"
|
||
|
|
:key="i"
|
||
|
|
@click="toNotice(item)">
|
||
|
|
<h6>{{ item.announcementTitle }}</h6>
|
||
|
|
<p class="meta">{{ item.updateTime }}</p>
|
||
|
|
<div class="des"
|
||
|
|
v-html="item.announcementText"></div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<template v-else>
|
||
|
|
<div class="empty">
|
||
|
|
<div>
|
||
|
|
<img src="@/assets/img/none.png"
|
||
|
|
alt="">
|
||
|
|
<p>暂无通知公告</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import breadcrumb from '@/components/breadcrumb'
|
||
|
|
import util from '@/libs/util'
|
||
|
|
import Setting from "@/setting"
|
||
|
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
form: util.local.get('activity'),
|
||
|
|
curType: '1',
|
||
|
|
typeList: [
|
||
|
|
{
|
||
|
|
id: '1',
|
||
|
|
name: '项目信息'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '2',
|
||
|
|
name: '项目进展'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '3',
|
||
|
|
name: '通知公告'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
progress: [],
|
||
|
|
timer: null,
|
||
|
|
notices: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
breadcrumb
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
if (this.form.id) {
|
||
|
|
this.getProgress()
|
||
|
|
this.getNotice()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getProgress () { // 获取项目进展
|
||
|
|
this.$get(this.api.listActivityProgress, {
|
||
|
|
activityId: this.form.id
|
||
|
|
}).then(res => {
|
||
|
|
this.progress = res.activityProgressList.reverse()
|
||
|
|
}).catch(err => { });
|
||
|
|
},
|
||
|
|
// 公告列表
|
||
|
|
getNotice () {
|
||
|
|
this.$post(`${this.api.listActivityAnnouncement}?pageNum=1&pageSize=1000&competitionId=${this.form.id}`).then(({ data }) => {
|
||
|
|
const records = data.records.filter(e => e.status) // 只显示已发布的（status 0草稿 1为已发布）
|
||
|
|
records.map(e => {
|
||
|
|
e.announcementText = e.announcementText.replace(/<img.*?(?:>|\/>)/gi, '')
|
||
|
|
})
|
||
|
|
this.notices = records
|
||
|
|
}).catch(res => { })
|
||
|
|
},
|
||
|
|
// 预览附件
|
||
|
|
preview (item) {
|
||
|
|
const { filePath } = item
|
||
|
|
const suffix = filePath.substr(filePath.lastIndexOf('.') + 1)
|
||
|
|
window.open((util.isDoc(suffix) ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + item.filePath)
|
||
|
|
},
|
||
|
|
// 下载附件
|
||
|
|
download (item) {
|
||
|
|
util.downloadFile(item.fileName, item.filePath)
|
||
|
|
},
|
||
|
|
// tab切换
|
||
|
|
typeChange () {
|
||
|
|
document.querySelector(`#part${type}`).scrollIntoView()
|
||
|
|
},
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.wrap {
|
||
|
|
margin: -24px;
|
||
|
|
}
|
||
|
|
.banner {
|
||
|
|
width: 100%;
|
||
|
|
height: 350px;
|
||
|
|
padding: 120px 0 0 20%;
|
||
|
|
color: #fff;
|
||
|
|
background-size: 100% 350px;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.l-title {
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
.main .center-con {
|
||
|
|
width: 1000px;
|
||
|
|
margin: 40px auto 0;
|
||
|
|
background: url(../../../../assets/img/match-bg1.png) (0px 95px) / auto auto no-repeat,
|
||
|
|
url(../../../../assets/img/match-bg2.png) (98% 300px) / auto auto no-repeat;
|
||
|
|
}
|
||
|
|
.main .center-wrap {
|
||
|
|
margin-top: 30px;
|
||
|
|
}
|
||
|
|
.rule-title {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.rule {
|
||
|
|
padding: 15px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
border: 1px solid #dfdfdf;
|
||
|
|
p {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 30px;
|
||
|
|
color: #6e6e6e;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/deep/.el-tabs__item {
|
||
|
|
box-shadow: none !important;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
position: relative;
|
||
|
|
padding: 20px 40px;
|
||
|
|
margin-top: 30px;
|
||
|
|
background-color: #fff;
|
||
|
|
.title {
|
||
|
|
width: 67%;
|
||
|
|
margin: 0 auto;
|
||
|
|
font-size: 28px;
|
||
|
|
text-align: center;
|
||
|
|
color: #0b1d30;
|
||
|
|
}
|
||
|
|
.tool {
|
||
|
|
z-index: 100;
|
||
|
|
position: sticky;
|
||
|
|
top: 64px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
.info .meta {
|
||
|
|
padding: 16px 0;
|
||
|
|
font-size: 12px;
|
||
|
|
color: #999;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.action {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.status {
|
||
|
|
max-width: 120px;
|
||
|
|
padding: 0 16px;
|
||
|
|
margin-left: 20px;
|
||
|
|
line-height: 34px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #52c41a;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
@include ellipsis();
|
||
|
|
&.wait {
|
||
|
|
background-color: #faad14;
|
||
|
|
}
|
||
|
|
&.signing {
|
||
|
|
background-color: $main-color;
|
||
|
|
}
|
||
|
|
&.signed {
|
||
|
|
background-color: #52c41a;
|
||
|
|
}
|
||
|
|
&.playing {
|
||
|
|
background-color: #f96d6d;
|
||
|
|
}
|
||
|
|
&.finish {
|
||
|
|
background-color: #ccc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.end-text {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #666;
|
||
|
|
em {
|
||
|
|
font-style: normal;
|
||
|
|
color: #f00;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.texts {
|
||
|
|
margin: 20px 0 50px;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 1.6;
|
||
|
|
text-indent: 2em;
|
||
|
|
overflow: hidden;
|
||
|
|
/deep/img {
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.progress {
|
||
|
|
position: relative;
|
||
|
|
width: 95%;
|
||
|
|
padding: 50px 0;
|
||
|
|
margin: 40px auto 80px;
|
||
|
|
text-align: left;
|
||
|
|
&:before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 50%;
|
||
|
|
width: 2px;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #e1e6f2;
|
||
|
|
}
|
||
|
|
&:after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: -10px;
|
||
|
|
left: 430px;
|
||
|
|
border: 8px solid transparent;
|
||
|
|
border-bottom-color: #e1e6f2;
|
||
|
|
}
|
||
|
|
.rocket {
|
||
|
|
position: absolute;
|
||
|
|
bottom: -50px;
|
||
|
|
left: 425px;
|
||
|
|
}
|
||
|
|
li {
|
||
|
|
position: relative;
|
||
|
|
width: 400px;
|
||
|
|
margin-bottom: 42px;
|
||
|
|
.dot {
|
||
|
|
position: absolute;
|
||
|
|
top: 12px;
|
||
|
|
left: 431px;
|
||
|
|
width: 15px;
|
||
|
|
height: 15px;
|
||
|
|
background-color: #dcdcdc;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.name {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 0 19px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
line-height: 40px;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 20px;
|
||
|
|
background-color: #c4c4c4;
|
||
|
|
}
|
||
|
|
.desc {
|
||
|
|
position: relative;
|
||
|
|
color: #333;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
&.ing,
|
||
|
|
&.done {
|
||
|
|
.dot {
|
||
|
|
top: 8px;
|
||
|
|
background-color: #007eff;
|
||
|
|
}
|
||
|
|
.name {
|
||
|
|
background-color: #007eff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.ing {
|
||
|
|
.dot {
|
||
|
|
width: 27px;
|
||
|
|
height: 27px;
|
||
|
|
border: 6px solid #e2f1fb;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:nth-child(odd) {
|
||
|
|
text-align: right;
|
||
|
|
&.ing {
|
||
|
|
.dot {
|
||
|
|
left: auto;
|
||
|
|
right: -51px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.name {
|
||
|
|
&:before {
|
||
|
|
content: '';
|
||
|
|
z-index: 2;
|
||
|
|
position: absolute;
|
||
|
|
top: 14px;
|
||
|
|
right: -35px;
|
||
|
|
border: 18px solid transparent;
|
||
|
|
border-top-width: 6px;
|
||
|
|
border-bottom-width: 6px;
|
||
|
|
border-left-color: #c4c4c4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.desc {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
&.ing,
|
||
|
|
&.done {
|
||
|
|
.name {
|
||
|
|
&:before {
|
||
|
|
border-left-color: #007eff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:nth-child(even) {
|
||
|
|
margin-left: 482px;
|
||
|
|
.dot {
|
||
|
|
left: -51px;
|
||
|
|
}
|
||
|
|
&.ing {
|
||
|
|
.dot {
|
||
|
|
left: -57px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.name {
|
||
|
|
text-align: left;
|
||
|
|
&:after {
|
||
|
|
content: '';
|
||
|
|
z-index: 2;
|
||
|
|
position: absolute;
|
||
|
|
top: 14px;
|
||
|
|
left: -35px;
|
||
|
|
border: 18px solid transparent;
|
||
|
|
border-top-width: 6px;
|
||
|
|
border-bottom-width: 6px;
|
||
|
|
border-right-color: #c4c4c4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.desc {
|
||
|
|
&:before {
|
||
|
|
left: auto;
|
||
|
|
right: -16px;
|
||
|
|
border: 8px solid transparent;
|
||
|
|
border-left-color: #fff;
|
||
|
|
}
|
||
|
|
&:after {
|
||
|
|
left: auto;
|
||
|
|
right: -18px;
|
||
|
|
border: 9px solid transparent;
|
||
|
|
border-left-color: #e6e6e6;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.ing,
|
||
|
|
&.done {
|
||
|
|
.name {
|
||
|
|
&:after {
|
||
|
|
border-right-color: #007eff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.files {
|
||
|
|
margin-bottom: 30px;
|
||
|
|
li {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
.fileName {
|
||
|
|
margin-right: 10px;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.notice-list {
|
||
|
|
text-align: left;
|
||
|
|
li {
|
||
|
|
padding: 16px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
transition: all 0.3s;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 6px;
|
||
|
|
background-color: #fff;
|
||
|
|
border-bottom: 1px dashed #ebebeb;
|
||
|
|
&:last-child {
|
||
|
|
border-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
h6 {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #0b1d30;
|
||
|
|
&:hover {
|
||
|
|
color: #007eff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.meta {
|
||
|
|
margin: 10px 0;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
.des {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #333;
|
||
|
|
line-height: 24px;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -moz-box;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-moz-box-orient: vertical;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
-moz-line-clamp: 2;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
th,
|
||
|
|
td {
|
||
|
|
padding: 12px;
|
||
|
|
border: 1px solid #ebeef5;
|
||
|
|
}
|
||
|
|
&.tc {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
th {
|
||
|
|
text-align: center;
|
||
|
|
background-color: #f8faff;
|
||
|
|
}
|
||
|
|
.icon {
|
||
|
|
margin-right: 10px;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #7a7a7a;
|
||
|
|
cursor: pointer;
|
||
|
|
&:hover {
|
||
|
|
color: #007eff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.plus {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.line {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
.el-input {
|
||
|
|
margin-right: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.flex-center {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
/deep/.dia-form {
|
||
|
|
.w-100 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.tips {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|