596 lines
16 KiB
Vue
596 lines
16 KiB
Vue
<template>
|
||
<div class="wrapper">
|
||
<header-nav :index_num="index_num"></header-nav>
|
||
<div id="box">
|
||
<!-- 导航 -->
|
||
<div class="top">
|
||
<div class="span">
|
||
<span @click="btn(0)"
|
||
:class="sub == 0 ? 'style' : ''">项目进度</span>
|
||
<span @click="btn(1)"
|
||
:class="sub == 1 ? 'style' : ''">项目信息</span>
|
||
</div>
|
||
<div class="daochu"
|
||
v-if="sub == 1">项目导出</div>
|
||
</div>
|
||
<!-- 进度 -->
|
||
<div class="img"
|
||
v-if="sub == 0">
|
||
<img :src="imgUrl.tg"
|
||
v-if="state == 0" />
|
||
<img :src="imgUrl.btg"
|
||
v-if="state == 1" />
|
||
<img :src="imgUrl.shz"
|
||
v-if="state == 2" />
|
||
<img :src="imgUrl.zxz"
|
||
v-if="state == 3" />
|
||
</div>
|
||
<!-- 项目流程 -->
|
||
<div class="bobb"
|
||
v-if="sub == 0">
|
||
<div class="left">
|
||
<div class="time">
|
||
<span>2019-09-01</span>
|
||
<span>2019-09-01</span>
|
||
<span>2019-09-01</span>
|
||
<span>2019-09-01</span>
|
||
<span>2019-09-01</span>
|
||
</div>
|
||
<div class="jdt">
|
||
<!-- 已申报 -->
|
||
<img class="sx0"
|
||
:src="imgUrl.sx0"
|
||
alt />
|
||
<img class="d0"
|
||
:src="imgUrl.d0"
|
||
v-if="zt != 0" />
|
||
<img class="d1"
|
||
:src="imgUrl.d1"
|
||
v-if="zt == 0" />
|
||
<!-- 审核中 -->
|
||
<img class="sx1"
|
||
:src="imgUrl.sx1"
|
||
alt />
|
||
<img class="d0"
|
||
:src="imgUrl.d0"
|
||
v-if="zt != 1" />
|
||
<img class="d1"
|
||
:src="imgUrl.d1"
|
||
v-if="zt == 1" />
|
||
<!-- 审核通过 -->
|
||
<img class="sx1"
|
||
:src="imgUrl.sx1"
|
||
alt />
|
||
<img class="d0"
|
||
:src="imgUrl.d0"
|
||
v-if="zt != 2" />
|
||
<img class="d1"
|
||
:src="imgUrl.d1"
|
||
v-if="zt == 2" />
|
||
<!-- 评审中 -->
|
||
<img class="sx1"
|
||
:src="imgUrl.sx1"
|
||
alt />
|
||
<img class="d0"
|
||
:src="imgUrl.d0"
|
||
v-if="zt != 3" />
|
||
<img class="d1"
|
||
:src="imgUrl.d1"
|
||
v-if="zt == 3" />
|
||
<!-- 评审通过 -->
|
||
<img class="sx1"
|
||
:src="imgUrl.sx1"
|
||
alt />
|
||
<img class="d0"
|
||
:src="imgUrl.d0"
|
||
v-if="zt != 4" />
|
||
<img class="d1"
|
||
:src="imgUrl.d1"
|
||
v-if="zt == 4" />
|
||
<!-- end -->
|
||
<img class="sx1"
|
||
:src="imgUrl.sx1"
|
||
alt />
|
||
</div>
|
||
<div class="bb">
|
||
<div class="o">
|
||
<span>项目已申报</span>
|
||
<img class="oo"
|
||
:src="imgUrl.d0"
|
||
alt />
|
||
</div>
|
||
<div>
|
||
<span>初筛审核中</span>
|
||
<img class="oo"
|
||
:src="imgUrl.d0"
|
||
alt />
|
||
</div>
|
||
<div class="div-v">
|
||
<span>初筛审核通过</span>
|
||
<img class="oo"
|
||
:src="imgUrl.d0"
|
||
alt />
|
||
<section>
|
||
<span style="color:#e60012;font-size:20px;">总分: 71分</span>
|
||
<span style="color:#999;font-size:16px;">（及格分数: 70）</span>
|
||
</section>
|
||
</div>
|
||
<div>
|
||
<span>立项评审中</span>
|
||
<img class="oo"
|
||
:src="imgUrl.d0"
|
||
alt />
|
||
</div>
|
||
<div>
|
||
<span>立项评审通过</span>
|
||
<img class="oo"
|
||
:src="imgUrl.d0"
|
||
alt />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<p>项目流程说明</p>
|
||
<ul>
|
||
<li v-for="(list,index) in text"
|
||
:key="index">{{list}}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 项目信息 -->
|
||
<div class="boxx"
|
||
v-if="sub == 1">
|
||
<h3>一、基本信息</h3>
|
||
<div class="one-o">
|
||
<ul v-for="(item,index) in arr"
|
||
:key="index">
|
||
<template v-for="(item,index) in text1">
|
||
<li :key="index">{{item}}</li>
|
||
</template>
|
||
</ul>
|
||
</div>
|
||
<h3>二、申报单位简介:</h3>
|
||
<div class="one-e">
|
||
<p>我国仍处于井将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来看,我国當富煤少油缺气?的资源禀赋,决定了煤炭在较长一个时期内作为我国主体能源的地位不会发玍变化,这就婓求我们坚持从煤炭资源丰富的囯情出发,切实抓好煤炭清洁高效利用。”章建华</p>
|
||
</div>
|
||
<h3>三、项目简介</h3>
|
||
<div class="one-e">
|
||
<p>我国仍处于井将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来看,我国當富煤少油缺气?的资源禀赋,决定了煤炭在较长一个时期内作为我国主体能源的地位不会发玍变化,这就婓求我们坚持从煤炭资源丰富的囯情出发,切实抓好煤炭清洁高效利用。”章建华</p>
|
||
</div>
|
||
<h3>四、项目论证</h3>
|
||
<div class="one-e">
|
||
<p>我国仍处于井将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来看,我国當富煤少油缺气?的资源禀赋,决定了煤炭在较长一个时期内作为我国主体能源的地位不会发玍变化,这就婓求我们坚持从煤炭资源丰富的囯情出发,切实抓好煤炭清洁高效利用。”章建华</p>
|
||
</div>
|
||
<h3>五、经费预算:</h3>
|
||
<div class="one-e">
|
||
<p>我国仍处于井将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来看,我国當富煤少油缺气?的资源禀赋,决定了煤炭在较长一个时期内作为我国主体能源的地位不会发玍变化,这就婓求我们坚持从煤炭资源丰富的囯情出发,切实抓好煤炭清洁高效利用。”章建华</p>
|
||
</div>
|
||
<h3>六、申报单位承诺:</h3>
|
||
<div class="one-e">
|
||
<p>我们确认项目中报内容的真实性,并愿意承担相应的责任</p>
|
||
</div>
|
||
<h3>七、项目主责单位意见 :</h3>
|
||
<div class="one-e">
|
||
<p>
|
||
<span>
|
||
<span>下载</span>
|
||
|
|
||
<span>预览</span>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer-nav class="footer"></footer-nav>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
/* eslint-disable */
|
||
import HeaderNav from "../../components/HeaderNav";
|
||
/* eslint-disable */
|
||
import FooterNav from "../../components/FooterNav";
|
||
|
||
export default {
|
||
components: {
|
||
HeaderNav,
|
||
FooterNav
|
||
},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
index_num: 2,
|
||
sub: 0,
|
||
imgUrl: {
|
||
tg: require("../../../static/img/tg.png"),
|
||
btg: require("../../../static/img/btg.png"),
|
||
shz: require("../../../static/img/shz.png"),
|
||
zxz: require("../../../static/img/zxz.png"),
|
||
sx0: require("../../../static/img/sx0.png"),
|
||
sx1: require("../../../static/img/sx1.png"),
|
||
d0: require("../../../static/img/d0.png"),
|
||
d1: require("../../../static/img/d1.png")
|
||
},
|
||
state: 0,
|
||
zt: 2,
|
||
arr: [1, 2, 3],
|
||
text: [
|
||
"第一步：填写并提交项目申报书",
|
||
"第二步：线上初筛审核",
|
||
"第三步：项目初筛结果查询",
|
||
"第四步：线下立项评审",
|
||
"第五步：立项结果查询"
|
||
],
|
||
text1: [
|
||
"项目名称：世界婚会",
|
||
"项目申报单位：劳动社会组织",
|
||
"项目类型：活动",
|
||
"项目落地区域：北区",
|
||
"一级项目方向：婚礼",
|
||
"一级项目方向：婚礼",
|
||
"项目服务领域：北区",
|
||
"项目有效期：2019-09-02至2019-09-23",
|
||
"申报单位属性：国企",
|
||
"通讯地址：北京市海涟区",
|
||
"电子信箱：15901401996@qq.com",
|
||
"传真电话：81223221",
|
||
"邮政编码：100000"
|
||
]
|
||
};
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
methods: {
|
||
btn(index) {
|
||
let s = this.sub;
|
||
s = index;
|
||
this.sub = s;
|
||
}
|
||
},
|
||
created() {},
|
||
mounted() {}
|
||
};
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.wrapper {
|
||
min-width: 1280px;
|
||
box-sizing: border-box;
|
||
|
||
#box {
|
||
margin: 40px auto 0;
|
||
width: 1200px;
|
||
background-color: #ffffff;
|
||
padding: 35px 30px 100px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
.boxx {
|
||
margin-top: 68px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
|
||
.one-e {
|
||
width: 100%;
|
||
margin-top: 27px;
|
||
margin-bottom: 60px;
|
||
|
||
p {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 39px;
|
||
letter-spacing: 0px;
|
||
color: #666666;
|
||
}
|
||
|
||
span {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 39px;
|
||
letter-spacing: 0px;
|
||
color: #7471ef;
|
||
}
|
||
}
|
||
|
||
.one-o {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 30px;
|
||
margin-bottom: 60px;
|
||
|
||
ul {
|
||
width: 350px;
|
||
height: 674px;
|
||
box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
|
||
border-radius: 5px;
|
||
padding: 30px 0 0 20px;
|
||
box-sizing: border-box;
|
||
|
||
li {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
margin-bottom: 28px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
h3 {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 20px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.bobb {
|
||
margin-top: 110px;
|
||
width: 100%;
|
||
height: 974px;
|
||
padding: 0 40px 0 11px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.left {
|
||
width: 419px;
|
||
height: 974px;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: flex-start;
|
||
|
||
.time {
|
||
width: 120px;
|
||
height: 734px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
margin-top: 72px;
|
||
|
||
.span {
|
||
display: inline-block;
|
||
width: 119px;
|
||
height: 18px;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 22px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.jdt {
|
||
width: 32px;
|
||
height: 974px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.sx0 {
|
||
width: 3px;
|
||
height: 79px;
|
||
}
|
||
|
||
.sx1 {
|
||
width: 3px;
|
||
height: 153px;
|
||
}
|
||
|
||
.wzx {
|
||
width: 20px;
|
||
height: 21px;
|
||
}
|
||
|
||
.zx {
|
||
width: 20px;
|
||
height: 21px;
|
||
}
|
||
}
|
||
|
||
.bb {
|
||
margin-top: 70px;
|
||
width: 180px;
|
||
height: 750px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
|
||
.o {
|
||
padding-left: 5px;
|
||
box-sizing: border-box;
|
||
width: 170px;
|
||
height: 36px;
|
||
position: relative;
|
||
border-bottom: 2px solid #b0c3cd;
|
||
|
||
img {
|
||
width: 10px;
|
||
height: 10px;
|
||
position: absolute;
|
||
right: 0%;
|
||
bottom: -16%;
|
||
}
|
||
}
|
||
|
||
div {
|
||
padding-left: 5px;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 36px;
|
||
position: relative;
|
||
border-bottom: 2px solid #b0c3cd;
|
||
|
||
img {
|
||
width: 10px;
|
||
height: 10px;
|
||
position: absolute;
|
||
right: 0%;
|
||
bottom: -16%;
|
||
}
|
||
|
||
section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
width: 132%;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
font-family: "MicrosoftYaHei";
|
||
position: absolute;
|
||
left: -8%;
|
||
bottom: -100%;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
span {
|
||
display: inline-block;
|
||
width: 135px;
|
||
height: 22px;
|
||
text-align: center;
|
||
line-height: 22px;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 22px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
padding: 35px 30px;
|
||
box-sizing: border-box;
|
||
width: 535px;
|
||
height: 698px;
|
||
box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
|
||
border-radius: 10px;
|
||
|
||
ul {
|
||
margin-top: 48px;
|
||
|
||
li {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 48px;
|
||
letter-spacing: 0px;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
p {
|
||
text-align: center;
|
||
width: 100%;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 24px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 31px;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.img {
|
||
width: 119px;
|
||
height: 95px;
|
||
position: absolute;
|
||
right: 0%;
|
||
top: 1%;
|
||
img {
|
||
width: 119px;
|
||
height: 95px;
|
||
}
|
||
}
|
||
|
||
.top {
|
||
width: 1140px;
|
||
height: 38px;
|
||
border-bottom: 1px solid #ccc;
|
||
padding-left: 12px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.daochu {
|
||
width: 96px;
|
||
height: 32px;
|
||
background-image: linear-gradient(
|
||
69deg,
|
||
#cc263f 0%,
|
||
#f42b47 100%,
|
||
#ed162d 100%,
|
||
#e60012 100%
|
||
),
|
||
linear-gradient(#e60012, #e60012);
|
||
background-blend-mode: normal, normal;
|
||
border-radius: 4px;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
letter-spacing: 0px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.span {
|
||
span {
|
||
margin-right: 40px;
|
||
display: inline-block;
|
||
width: 120px;
|
||
height: 38px;
|
||
text-align: center;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 20px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
|
||
.style {
|
||
color: #e60012;
|
||
position: relative;
|
||
&::after {
|
||
content: "";
|
||
width: 120px;
|
||
height: 2px;
|
||
background-color: #e60012;
|
||
position: absolute;
|
||
bottom: 0%;
|
||
left: 0%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
margin-top: 80px;
|
||
}
|
||
}
|
||
</style>
|