Files
chaoyangpc/src/views/project/Application.vue
沈学坤 7758865732 kun
2019-10-31 11:27:00 +08:00

1221 lines
36 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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 method enctype="multipart/form-data" onsubmit="return false">
<div v-show="sub == 0">
<h4>基本信息</h4>
<!-- start -->
<aside>
<div>
<label>项目名称:</label>
<input type="text" name="name" value v-model="name" required />
</div>
<div>
<label>项目申报单位:</label>
<input type="text" name="company" v-model="company" value required />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label>项目类型:</label>
<select name="tid" v-model="tid">
<template v-for="(type,index) in types">
<option :key="index" :value="index">{{type}}</option>
</template>
</select>
</div>
<div>
<label>项目落地区域:</label>
<select name="rid" v-model="rid">
<template v-for="(list,index) in area">
<option :key="index" :value="index">{{list}}</option>
</template>
</select>
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label>一级项目方向:</label>
<input type="text" name="first_level" v-model="first_level" value required />
</div>
<div>
<label>二级项目方向:</label>
<input type="text" name="secondary" v-model="secondary" value required />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label>项目服务领域:</label>
<input type="text" name="fieldeara" v-model="fieldeara" value required />
</div>
<div>
<label>申报单位属性:</label>
<input type="text" name="attribute" v-model="attribute" value required />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label>申请日期:</label>
<input type="date" name="aterm" v-model="aterm" value required />
<!-- <select name="aterm">
<option value>2019-01-31</option>
<option value>2019-01-20</option>
</select>-->
</div>
<div>
<label>截止日期:</label>
<input type="date" name="fterm" v-model="fterm" value required />
<!-- <select name="fterm">
<option value>2019-01-31</option>
<option value>2019-01-20</option>
</select>-->
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label>通讯地址:</label>
<input type="text" name="postaladdress" v-model="postaladdress" value required />
</div>
<div>
<label>邮政编码:</label>
<input type="text" name="postalcode" v-model="postalcode" value required />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label>电子信箱:</label>
<input type="text" name="pmail" v-model="pmail" value required />
</div>
<div>
<label>传真电话:</label>
<input type="text" placeholder="非必填" name="fax_tel" v-model="fax_tel" value />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label>法定代表人:</label>
<input type="text" name="plegal" v-model="plegal" value required />
</div>
<div>
<label>法人代码:</label>
<input type="text" name="plcode" v-model="plcode" value required />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label>负责人姓名:</label>
<input class="i" type="text" name="pname" v-model="pname" value required />
</div>
<div>
<label>职务:</label>
<input class="i" type="text" name="poster" v-model="poster" value required />
</div>
<div>
<label>办公电话:</label>
<input class="i" type="text" name="poffice_tel" v-model="poffice_tel" value required />
</div>
<div>
<label>手机:</label>
<input class="i" type="text" name="aphone" v-model="aphone" value required />
</div>
</aside>
<!-- end -->
<aside>
<div>
<label>联系人姓名:</label>
<input class="i" type="text" name="cname" v-model="cname" value required />
</div>
<div>
<label>职务:</label>
<input class="i" type="text" name="cpost" v-model="cpost" value required />
</div>
<div>
<label>办公电话:</label>
<input class="i" type="text" name="coffice_tel" v-model="coffice_tel" value required />
</div>
<div>
<label>手机:</label>
<input class="i" type="text" name="cphone" v-model="cphone" value required />
</div>
</aside>
<!-- end -->
<div class="btn" @click="btn(1)">下一页</div>
</div>
<div v-show="sub == 1">
<div class="cc">
<!-- start -->
<aside>
<div>
<label>项目主责单位:</label>
<input class="i-i" type="text" name="prespo" v-model="prespo" value required />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label>通讯地址:</label>
<input type="text" name="respoadd" v-model="respoadd" value required />
</div>
<div>
<label>邮政编码:</label>
<input type="text" name="respopcode" v-model="respopcode" value required />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label>电子信箱:</label>
<input type="text" name="respomail" v-model="respomail" value required />
</div>
<div>
<label>传真电话:</label>
<input type="text" placeholder="非必填" name="respophone" v-model="respophone" value />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label>负责人姓名:</label>
<input class="i" type="text" name="respopname" v-model="respopname" value required />
</div>
<div>
<label>职务:</label>
<input class="i" type="text" name="respopost" v-model="respopost" value required />
</div>
<div>
<label>办公电话:</label>
<input
class="i"
type="text"
name="respoophone"
v-model="respoophone"
value
required
/>
</div>
<div>
<label>手机:</label>
<input class="i" type="text" name="respoptel" v-model="respoptel" value required />
</div>
</aside>
<!-- end -->
<aside>
<div>
<label>联系人姓名:</label>
<input class="i" type="text" name="respocname" v-model="respocname" value required />
</div>
<div>
<label>职务:</label>
<input class="i" type="text" name="respocpost" v-model="respocpost" value required />
</div>
<div>
<label>办公电话:</label>
<input
class="i"
type="text"
name="respocophone"
v-model="respocophone"
value
required
/>
</div>
<div>
<label>手机:</label>
<input class="i" type="text" name="respoctel" v-model="respoctel" value required />
</div>
</aside>
<!-- end -->
</div>
<div>
<div class="xx">
<h5>申报单位简介</h5>
<textarea value name="decldes" v-model="decldes" required></textarea>
</div>
<div class="xx">
<h5>项目简介</h5>
<textarea value name="prodes" v-model="prodes" required></textarea>
</div>
<div class="xx">
<h5>项目论证</h5>
<h3>() 项目实施的必要性可行性</h3>
<textarea value name="prodemo" v-model="prodemo" required></textarea>
<h3>() 项目实施的已有基础具体方法和途径及进度安排预期效果及完成时间</h3>
<p>1.项目实施的已有基础</p>
<textarea
value
name="prodemojc"
v-model="prodemojc"
required
placeholder="(说明:包括但不限于项目实施已有的相关经验或有助于项目实施的资源支持等)"
></textarea>
<p>2.具体方法和途径</p>
<textarea
name="prodemotj"
value
v-model="prodemotj"
required
placeholder="(说明:包括项目实施的具体方式、途径。明确项目的具体组成内容(子项目、各类服务等),每类、每次活动的具体内容、形式、对象、次数、人数等)"
></textarea>
<p>3.进度安排</p>
<textarea
name="prodemojd"
value
v-model="prodemojd"
required
placeholder="(说明:可单独作为一部分,也可与“具体方法和途径”一并细化到子项目中说明。建议时间单元为月,不建议简单表述为“年内”、“上半年”“下半年”、“第*季度”等。)"
></textarea>
<p>4.预期效果</p>
<textarea
value
name="prodemoxg"
v-model="prodemoxg"
placeholder="(说明:具体明确项目实施所要达到的目标或预期的效果以及)"
></textarea>
<p>5.项目团队及分工</p>
<textarea
value
required
v-model="prodemofg"
name="prodemofg"
placeholder="(说明:包括项目实施的组织管理机构组成,各子项目或各项服务活动的具体承接单位和负责人,各有关协作单位等。如有以主责单位名义申报的综合性、联合性项目,要细化各子项目的组织实施体系。如有涉及到委托管理(如财务委托管理)的,要在组织架构中予以说明。要把可能引起转包怀疑的所有事项交代清楚,避免在检查、审计和评估中产生误解。)"
></textarea>
<h3>() 项目实施涵盖的范围实施的规模服务的人群创新之处等</h3>
<textarea required name="prodemotwo" v-model="prodemotwo" value></textarea>
</div>
<div class="xx">
<h5>经费预算</h5>
<!-- <textarea name="funds" v-model="funds" required value></textarea> -->
<div id="rich">
<rich-text-one @quillVal="getContent"></rich-text-one>
</div>
</div>
<div class="xxx">
<h5>申报单位承诺</h5>
<div class="plpl">
<span
@click="thf()"
:class="thff ? 'ic' : ''"
class="iconfont icon-fuxuankuang_xuanzhong"
></span>
<label>我们确认项目申报内容的真实性,并愿意承担相应的责任</label>
</div>
</div>
<div class="xxx">
<h5>项目主责单位意见</h5>
<div class="xxxx">
<div class="btnn">
<!-- @change="getFile($event)" -->
<label>
上传文件
<input type="file" @change="getFile($event)" v-show="false" name="file" />
</label>
</div>
<span for>只能上传一张不同的图片</span>
</div>
</div>
</div>
<template v-if="file">
<img class="img-img" :src="file" alt />
<!-- <iframe class="img-img" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" :src="src"></iframe> -->
</template>
<div class="ll">
<button type="button" @click="btn(0)">上一页</button>
<button v-if="0" type="button" @click="submit(0)">保存</button>
<button type="submit" @click="submit(1)">提交</button>
</div>
</div>
</form>
<div class="queren" v-if="popupStatus">
<div>
<p>是否确认申报项目</p>
<div>
<span @click="popupStatus = !popupStatus"></span>
<span @click="submitYes"></span>
</div>
</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";
import RichTextOne from "../../components/RichTextOne";
// import RegisteredVue from '../Registered.vue';
const T_T = new Date()
var preD = function (e) {
e.preventDefault()
}
export default {
components: {
HeaderNav,
FooterNav,
RichTextOne
},
props: {},
data() {
return {
index_num: 2,
sub: 0,
imgUrl: {
bg0: require("../../../static/img/bg0.png"),
bg1: require("../../../static/img/bg1.png"),
xa: require("../../../static/img/xa.png")
},
popupStatus: false,
thff: false,
types: [],
area: [],
name: '',
company: '',
tid: Number,
rid: Number,
first_level: '',
secondary: '',
fieldeara: '',
attribute: '',
aterm: '',
fterm: '',
postaladdress: '',
postalcode: '',
pmail: '',
fax_tel: '',
plegal: '',
plcode: '',
pname: '',
poster: '',
poffice_tel: '',
aphone: '',
cname: '',
cpost: '',
coffice_tel: '',
cphone: '',
prespo: '',
respoadd: '',
respopcode: '',
respomail: '',
respophone: '',
respoctel: '',
respopname: '',
respopost: '',
respoophone: '',
respoptel: '',
respocname: '',
respocpost: '',
respocophone: '',
decldes: '',
prodes: '',
prodemo: '',
prodemojc: '',
prodemotj: '',
prodemojd: '',
prodemoxg: '',
prodemofg: '',
prodemotwo: '',
funds: '',
proimages: '',
file: '',
subStatus: 0,
src: '',
pictureHeight: ''
};
},
computed: {},
watch: {
popupStatus(val) {
if (val) {
document.body.style.overflow = 'hidden'
document.addEventListener('touchmove', preD, {
passive: false
}) /** 禁止页面滑动 */
} else {
document.body.style.overflow = '' /**出现滚动条 */
document.removeEventListener('touchmove', preD, { passive: false })
}
}
},
methods: {
/** 获取富文本内容 */
getContent(data) {
this.funds = data
},
/** 申报单位承诺 */
thf() {
this.thff = !this.thff;
},
/** 下一步 */
btn(index) {
let regd = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
let regs = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
let s = this.sub;
s = index;
if (s == 0) {
this.sub = s
}
// this.sub = s
let aterm = new Date(this.aterm).getTime()
let fterm = new Date(this.fterm).getTime()
// if (!regs.test(this.aphone) || !regs.test(this.cphone)) {
// alert('请填写正确的手机号码!')
// return
// }else{
// alert('yes')
// }
if (s == 1) {
if (this.name == '' || this.company == '' || this.tid == '' ||
this.rid == '' || this.first_level == '' || this.secondary == '' ||
this.fieldeara == '' || this.attribute == '' || this.aterm == '' ||
this.fterm == '' || this.postaladdress == '' || this.postalcode == '' ||
this.pmail == '' || this.plegal == '' || this.plcode == '' ||
this.pname == '' || this.poster == '' || this.poffice_tel == '' ||
this.aphone == '' || this.cname == '' || this.cpost == '' || this.coffice_tel == '' ||
this.cphone == ''
) {
alert('以上内容不可为空!')
return
} else if (this.aterm > this.fterm) {
alert('截止日期应比申请日期晚')
return
} else if (!regd.test(this.poffice_tel) || !regd.test(this.coffice_tel)) {
alert('请填写正确的电话号码!')
return
} if (!regs.test(this.aphone) || !regs.test(this.cphone)) {
alert('请填写正确的手机号码!')
return
} else {
this.sub = s
}
}
},
/** 上传文件 */
getFile(event) {
let filetypes = [".jpg", ".png", ".jpeg"]
let filepath = event.target.value
if (filepath) {
var isnext = false;
var fileend = filepath.substring(filepath.lastIndexOf("."));
if (filetypes && filetypes.length > 0) {
for (var i = 0; i < filetypes.length; i++) {
if (filetypes[i] == fileend) {
isnext = true;
break;
}
}
}
if (!isnext) {
alert("不接受此文件类型!");
return false;
}
}
let filemaxsize = 1024;//1M
let fileSize = event.target.files[0].size / 1024;
if (fileSize > filemaxsize) {
alert("附件大小不能大于" + filemaxsize / 1024 + "M");
return false;
}
let _this = this
let file = event.target.files[0];
/*
let reader = new FileReader()
reader.readAsDataURL(file) // 这里是最关键的一步,转换就在这里
reader.onloadend = function () {
_this.src = this.result
}
*/
let param = new FormData(); //创建form对象
param.append('file', file);//通过append向form对象添加数据
// console.log(param.get('file')); //FormData私有类对象访问不到可以通过get判断值是否传进去
let config = {
headers: { 'Content-Type': 'multipart/form-data' }
}; //添加请求头
this.$http.post('v1/file/files', param, config)
.then(response => {
let url = response.data.data.url
this.file = url
})
},
/** 保存和提交 */
submit(index) {
let regd = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
let regs = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
if (this.sub == 1) {
if (this.prespo == '' || this.respoadd == '' || this.respopcode == '' ||
this.respomail == '' || this.respopname == '' ||
this.respopost == '' || this.respoophone == '' || this.respoptel == '' ||
this.respocname == '' || this.respocpost == '' || this.respocophone == '' ||
this.respoctel == '' || this.decldes == '' || this.prodes == '' ||
this.prodemo == '' || this.prodemojc == '' || this.prodemotj == '' ||
this.prodemojd == '' || this.prodemoxg == '' || this.prodemofg == '' ||
this.prodemotwo == '' || this.funds == ''
) {
alert('以上内容不可为空!')
return
} else if (!regd.test(this.respoophone) || !regd.test(this.respocophone)) {
alert('请填写正确的电话号码!')
return
} if (!regs.test(this.respoptel) || !regs.test(this.respoctel)) {
alert('请填写正确的手机号码!')
return
} else if (this.thff == false) {
alert('请同意:申报单位承诺')
return
} else if (this.file == '') {
alert('未上传文件!')
return
}
} else {
alert('数据出错!')
return
}
let s = this.subStatus;
s = index;
this.subStatus = s
this.proimages = this.file
if (this.proimages === '') {
alert('文件还未上传!')
return
}
this.popupStatus = true
},
/** 申报项目 */
submitYes() {
this.popupStatus = false
let _this = this
this.$http({
method: 'post',
url: 'v1/project/apply',
data: {
subStatus: _this.subStatus,
name: _this.name,
company: _this.company,
tid: _this.tid,
rid: _this.rid,
first_level: _this.first_level,
secondary: _this.secondary,
fieldeara: _this.fieldeara,
attribute: _this.attribute,
aterm: _this.aterm,
fterm: _this.fterm,
postaladdress: _this.postaladdress,
postalcode: _this.postalcode,
pmail: _this.pmail,
fax_tel: _this.fax_tel,
plegal: _this.plegal,
plcode: _this.plcode,
pname: _this.pname,
poster: _this.poster,
poffice_tel: _this.poffice_tel,
aphone: _this.aphone,
cname: _this.cname,
cpost: _this.cpost,
coffice_tel: _this.coffice_tel,
cphone: _this.cphone,
prespo: _this.prespo,
respoadd: _this.respoadd,
respopcode: _this.respopcode,
respomail: _this.respomail,
respophone: _this.respophone,
respoctel: _this.respoctel,
respopname: _this.respopname,
respopost: _this.respopost,
respoophone: _this.respoophone,
respoptel: _this.respoptel,
respocname: _this.respocname,
respocpost: _this.respocpost,
respocophone: _this.respocophone,
decldes: _this.decldes,
prodes: _this.prodes,
prodemo: _this.prodemo,
prodemojc: _this.prodemojc,
prodemotj: _this.prodemotj,
prodemojd: _this.prodemojd,
prodemoxg: _this.prodemoxg,
prodemofg: _this.prodemofg,
prodemotwo: _this.prodemotwo,
funds: _this.funds,
proimages: _this.proimages
}
}).then(res => {
if (res.data.code === 200) {
alert(res.data.data.msg)
_this.proimages = ''
_this.$router.push({
name: 'project'
})
} else {
alert(res.data.message)
}
})
// eslint-disable-next-line handle-callback-err
.catch(err => {
console.log(err)
})
},
/** 获取下拉框的数据 */
getData() {
let _this = this
this.$http({
method: 'get',
url: 'v1/project/get-info',
data: {}
}).then(res => {
if (res.data.code === 200) {
_this.types = res.data.data.type
_this.area = res.data.data.area
} else {
_this.$message.error('请求数据有问题!')
}
})
// eslint-disable-next-line handle-callback-err
.catch(err => {
console.log(err)
})
},
/** 判断是否有权限进行项目申报 */
status() {
let id = sessionStorage.id
let _this = this
this.$http({
method: 'post',
url: 'v1/society/get-status',
data: { id: id }
}).then(res => {
if (res.data.code === 200) {
if (res.data.data.status === 0) {
alert('您当前的社会状态为:黑名单!')
_this.$router.push({
name: 'project'
})
} else if (res.data.data.status === 3) {
alert('您当前的社会状态为:待审核!')
_this.$router.push({
name: 'project'
})
} else {
_this.getData()
}
} else {
_this.$message.error('请求数据有问题!')
}
})
// eslint-disable-next-line handle-callback-err
.catch(err => {
console.log(err)
})
}
},
created() { },
mounted() {
this.status()
}
};
</script>
<style lang='scss' scoped>
#rich {
width: 100%;
margin: 30px auto 30px;
}
.img-img {
margin-top: 25px;
width: 150px;
height: auto;
&::-webkit-scrollbar {
width: 0px;
height: 0px;
}
}
.wrapper {
min-width: 1280px;
box-sizing: border-box;
.queren {
width: 100%;
height: 100%;
position: fixed;
left: 0%;
top: 0%;
background-color: rgba($color: #000, $alpha: 0.56);
display: flex;
align-items: center;
justify-content: center;
& > div {
width: 500px;
height: 400px;
background: #fff;
border-radius: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 100px 0 100px;
box-sizing: border-box;
& > p {
font-size: 32px;
font-weight: 600;
}
& > div {
width: 100%;
padding: 32px;
box-sizing: border-box;
margin: 20px auto 0;
display: flex;
justify-content: space-between;
align-items: center;
span {
font-size: 30px;
cursor: pointer;
}
}
}
}
#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;
button[type='button'] {
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;
outline: none;
border: 0;
}
button[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;
border: 0;
}
}
.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;
}
}
.xxxx {
display: flex;
align-items: center;
justify-content: flex-start;
span {
display: inline-block;
height: 32px;
line-height: 32px;
text-align: center;
margin-left: 25px;
font-family: 'MicrosoftYaHei';
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #000;
}
}
.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: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
textarea {
margin-top: 30px;
width: 1139px;
height: 138px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
resize: none;
font-family: 'MicrosoftYaHei';
font-size: 18px;
font-weight: normal;
font-stretch: normal;
line-height: 39px;
letter-spacing: 0px;
color: #999999;
}
p {
margin-top: 38px;
font-family: 'MicrosoftYaHei';
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
h5 {
width: 100%;
font-family: 'MicrosoftYaHei';
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
h3 {
width: 100%;
font-family: 'MicrosoftYaHei';
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
margin-top: 38px;
}
}
.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;
white-space: nowrap;
}
.i-i {
width: 1009px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
outline: none;
margin-left: 20px;
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: 30px;
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;
white-space: nowrap;
}
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: 20px;
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: 20px;
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: 20px;
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>