762 lines
20 KiB
Vue
762 lines
20 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<header-nav :index_num="index_num"></header-nav>
|
|
<div id="box">
|
|
<h3>项目创建</h3>
|
|
<!-- 导航 -->
|
|
<div class="box">
|
|
<div :class="sub == 0 ? 'color' : ''"
|
|
:style="{'background-image': sub == 0 ? 'url('+imgUrl.bg0+')' : 'url('+imgUrl.bg1+')'}">1 填写基本信息</div>
|
|
<div :class="sub == 1 ? 'color' : ''"
|
|
:style="{'background-image': sub == 1 ? 'url('+imgUrl.bg0+')' : 'url('+imgUrl.bg1+')'}">2 填写详细信息</div>
|
|
</div>
|
|
<form action
|
|
onsubmit="return false">
|
|
<div v-if="sub == 0">
|
|
<h4>一、基本信息</h4>
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>项目名称:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>项目申报单位:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>项目类型:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>项目落地区域:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>一级项目方向:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>二级项目方向:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>项目服务领域:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>申报单位属性:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>申请日期:</label>
|
|
<select name
|
|
id>
|
|
<option value>2019-01-31</option>
|
|
<option value>2019-01-20</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for>截止日期:</label>
|
|
<select name
|
|
id>
|
|
<option value>2019-01-31</option>
|
|
<option value>2019-01-20</option>
|
|
</select>
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>通讯地址:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>邮政编码:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>电子信箱:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>传真电话:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>法定代表人:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>法人代码:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>负责人姓名:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>职务:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>办公电话:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>手机:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<aside>
|
|
<div>
|
|
<label for>联系人姓名:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>职务:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>办公电话:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>手机:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<div class="btn"
|
|
@click="btn(1)">下一步</div>
|
|
</div>
|
|
<div v-if="sub == 1">
|
|
<div class="cc">
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>项目主责单位:</label>
|
|
<input class="i-i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>项目名称:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>邮政编码:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>电子信箱:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>传真电话:</label>
|
|
<input type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<!-- start -->
|
|
<aside>
|
|
<div>
|
|
<label for>负责人姓名:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>职务:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>办公电话:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>手机:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
<aside>
|
|
<div>
|
|
<label for>联系人姓名:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>职务:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>办公电话:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
<div>
|
|
<label for>手机:</label>
|
|
<input class="i"
|
|
type="text"
|
|
name
|
|
id />
|
|
</div>
|
|
</aside>
|
|
<!-- end -->
|
|
</div>
|
|
<div>
|
|
<div class="xx">
|
|
<h5>二、申报单位简介</h5>
|
|
<textarea name
|
|
id></textarea>
|
|
</div>
|
|
<div class="xx">
|
|
<h5>三、项目简介</h5>
|
|
<textarea name
|
|
id></textarea>
|
|
</div>
|
|
<div class="xx">
|
|
<h5>四、项目论证</h5>
|
|
<textarea name
|
|
id></textarea>
|
|
</div>
|
|
<div class="xx">
|
|
<h5>五、经费预算</h5>
|
|
<textarea name
|
|
id></textarea>
|
|
</div>
|
|
<div class="xxx">
|
|
<h5>六、申报单位承诺</h5>
|
|
<div class="plpl">
|
|
<span @click="thf()"
|
|
:class="thff ? 'ic' : ''"
|
|
class="iconfont icon-fuxuankuang_xuanzhong"></span>
|
|
<label for>我们确认项目中报内容的真实性,并愿意承担相应的责任</label>
|
|
</div>
|
|
</div>
|
|
<div class="xxx">
|
|
<h5>七、项目主责单位意见</h5>
|
|
<div class="btnn">
|
|
<label id="uploadFile">
|
|
上传文件
|
|
<input id="uploadFile"
|
|
v-show="false"
|
|
type="file"
|
|
@change="getFile($event)" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ll">
|
|
<div>保存</div>
|
|
<input type="submit"
|
|
name="submit"
|
|
value="提交" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</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,
|
|
file: "",
|
|
imgUrl: {
|
|
bg0: require("../../../static/img/bg0.png"),
|
|
bg1: require("../../../static/img/bg1.png"),
|
|
xa: require("../../../static/img/xa.png")
|
|
},
|
|
thff: false
|
|
};
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
methods: {
|
|
thf() {
|
|
this.thff = !this.thff;
|
|
},
|
|
btn(index) {
|
|
let s = this.sub;
|
|
s = index;
|
|
this.sub = s;
|
|
},
|
|
getFile(event) {
|
|
this.file = event.target.files[0];
|
|
console.log(this.file);
|
|
}
|
|
},
|
|
created() {},
|
|
mounted() {}
|
|
};
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.wrapper {
|
|
width: 1280px;
|
|
box-sizing: border-box;
|
|
|
|
#box {
|
|
margin: 40px auto 0;
|
|
padding: 34px 32px 100px 28px;
|
|
box-sizing: border-box;
|
|
width: 1200px;
|
|
background-color: #ffffff;
|
|
|
|
form {
|
|
.ll {
|
|
margin-top: 80px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
div {
|
|
margin-right: 152px;
|
|
width: 197px;
|
|
height: 63px;
|
|
background-color: #ff9800;
|
|
border-radius: 5px;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 26px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
line-height: 63px;
|
|
letter-spacing: 0px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
|
|
input[type="submit"] {
|
|
width: 197px;
|
|
height: 63px;
|
|
background-color: #e60012;
|
|
border-radius: 5px;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 26px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
line-height: 63px;
|
|
text-align: center;
|
|
letter-spacing: 0px;
|
|
color: #ffffff;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.xxx {
|
|
margin-top: 60px;
|
|
width: 100%;
|
|
height: 72px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
|
|
.plpl {
|
|
display: flex;
|
|
align-items: center;
|
|
label {
|
|
margin-left: 16px;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
line-height: 25px;
|
|
letter-spacing: 0px;
|
|
color: #323232;
|
|
}
|
|
|
|
.iconfont {
|
|
font-size: 22px;
|
|
color: #999;
|
|
}
|
|
.ic {
|
|
color: #e60012;
|
|
}
|
|
}
|
|
|
|
.btnn {
|
|
cursor: pointer;
|
|
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;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
label {
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xx {
|
|
margin-top: 60px;
|
|
width: 100%;
|
|
height: 188px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
|
|
textarea {
|
|
width: 1139px;
|
|
height: 138px;
|
|
background-color: #ffffff;
|
|
border: solid 1px #c7c7c7;
|
|
resize: none;
|
|
}
|
|
|
|
h5 {
|
|
width: 100%;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.cc {
|
|
width: 1140px;
|
|
margin: 0 auto 0px;
|
|
aside {
|
|
width: 100%;
|
|
height: 43px;
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
label {
|
|
display: inline-block;
|
|
width: 101px;
|
|
height: 43px;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
line-height: 43px;
|
|
text-align: right;
|
|
letter-spacing: 0px;
|
|
color: #323232;
|
|
}
|
|
|
|
.i-i {
|
|
width: 1009px;
|
|
height: 43px;
|
|
background-color: #ffffff;
|
|
border: solid 1px #c7c7c7;
|
|
outline: none;
|
|
margin-left: 30px;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #323232;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
margin: 60px auto 0;
|
|
width: 230px;
|
|
height: 63px;
|
|
background-color: #e60012;
|
|
border-radius: 5px;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 26px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
line-height: 63px;
|
|
letter-spacing: 0px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
aside {
|
|
width: 1138px;
|
|
height: 43px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 25px;
|
|
|
|
label {
|
|
display: inline-block;
|
|
width: 101px;
|
|
height: 43px;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
line-height: 43px;
|
|
text-align: right;
|
|
letter-spacing: 0px;
|
|
color: #323232;
|
|
}
|
|
|
|
select {
|
|
/* 清除默认的箭头样式 */
|
|
appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
/* 右侧添加小箭头的背景图 */
|
|
background: url("../../../static/img/xa.png") 360px center no-repeat;
|
|
background-size: 14px 8px;
|
|
width: 386px;
|
|
height: 43px;
|
|
background-color: #ffffff;
|
|
border: solid 1px #c7c7c7;
|
|
padding-left: 83px;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
margin-left: 30px;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #323232;
|
|
}
|
|
|
|
input {
|
|
box-sizing: border-box;
|
|
width: 386px;
|
|
height: 43px;
|
|
background-color: #ffffff;
|
|
border: solid 1px #c7c7c7;
|
|
outline: none;
|
|
margin-left: 30px;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #323232;
|
|
}
|
|
|
|
.i {
|
|
width: 151px;
|
|
height: 43px;
|
|
background-color: #ffffff;
|
|
border: solid 1px #c7c7c7;
|
|
outline: none;
|
|
margin-left: 30px;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #323232;
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
width: 1138px;
|
|
height: 38px;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
padding-left: 30px;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #ccc;
|
|
margin-bottom: 54px;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
width: 395px;
|
|
height: 34px;
|
|
margin: 44px auto 70px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
div {
|
|
width: 192px;
|
|
height: 34px;
|
|
background-size: 100% 100%;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
line-height: 34px;
|
|
text-align: center;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
}
|
|
|
|
.color {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
width: 89px;
|
|
height: 23px;
|
|
margin: 0 auto;
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 22px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 80px;
|
|
}
|
|
}
|
|
</style>
|