375 lines
10 KiB
Vue
375 lines
10 KiB
Vue
<template>
|
||
<div class="wrapper" :style="{'background-image':'url('+imgUrl.registered+')'}">
|
||
<div class="box">
|
||
<div class="boxx">
|
||
<h3>立 即 注 冊</h3>
|
||
<form action method onsubmit="return false" enctype="multipart/form-data">
|
||
<!-- 请输入组织名称 -->
|
||
<label>
|
||
<span class="one">
|
||
<span class="iconfont icon-ren"></span>
|
||
<span class="iconfont icon-vertical_line"></span>
|
||
</span>
|
||
<input
|
||
class="input"
|
||
type="text"
|
||
placeholder="请输入组织名称"
|
||
required
|
||
pattern
|
||
oninvalid="setCustomValidity('不能为空')"
|
||
oninput="setCustomValidity('')"
|
||
/>
|
||
<span class="span1">注：组织名称将用于用户登录</span>
|
||
</label>
|
||
<!-- 请输入密码 -->
|
||
<label>
|
||
<span class="two">
|
||
<span class="iconfont icon-suo"></span>
|
||
<span class="iconfont icon-vertical_line"></span>
|
||
</span>
|
||
<input
|
||
class="input"
|
||
type="password"
|
||
placeholder="请输入密码"
|
||
required
|
||
pattern
|
||
oninvalid="setCustomValidity('不能为空')"
|
||
oninput="setCustomValidity('')"
|
||
/>
|
||
</label>
|
||
<!-- 请再次输入密码 -->
|
||
<label>
|
||
<span class="two">
|
||
<span class="iconfont icon-suo"></span>
|
||
<span class="iconfont icon-vertical_line"></span>
|
||
</span>
|
||
<input
|
||
class="input"
|
||
type="password"
|
||
placeholder="请再次输入密码"
|
||
required
|
||
pattern
|
||
oninvalid="setCustomValidity('不能为空')"
|
||
oninput="setCustomValidity('')"
|
||
/>
|
||
</label>
|
||
<!-- 请输入统一社会信用代码 -->
|
||
<label>
|
||
<span class="two">
|
||
<img :src="imgUrl.yy" alt style="width:20px;height:20px;margin-top:0px;" />
|
||
<span class="iconfont icon-vertical_line"></span>
|
||
</span>
|
||
<input
|
||
class="input"
|
||
type="password"
|
||
placeholder="请输入统一社会信用代码"
|
||
required
|
||
pattern
|
||
oninvalid="setCustomValidity('不能为空')"
|
||
oninput="setCustomValidity('')"
|
||
/>
|
||
</label>
|
||
<!-- 请输入法人代表 -->
|
||
<label>
|
||
<span class="two">
|
||
<span class="iconfont icon-fuzeren"></span>
|
||
<span class="iconfont icon-vertical_line"></span>
|
||
</span>
|
||
<input
|
||
class="input"
|
||
type="text"
|
||
placeholder="请输入法人代表"
|
||
required
|
||
pattern
|
||
oninvalid="setCustomValidity('不能为空')"
|
||
oninput="setCustomValidity('')"
|
||
/>
|
||
</label>
|
||
<!-- 请输入单位属性 -->
|
||
<label>
|
||
<span class="two">
|
||
<span class="iconfont icon-icon-test"></span>
|
||
<span class="iconfont icon-vertical_line"></span>
|
||
</span>
|
||
<input
|
||
class="input"
|
||
type="text"
|
||
placeholder="请输入单位属性"
|
||
required
|
||
pattern
|
||
oninvalid="setCustomValidity('不能为空')"
|
||
oninput="setCustomValidity('')"
|
||
/>
|
||
</label>
|
||
<!-- 请输入业务主管单位名称 -->
|
||
<label>
|
||
<span class="two">
|
||
<span class="iconfont icon-zhuzhuangtu"></span>
|
||
<span class="iconfont icon-vertical_line"></span>
|
||
</span>
|
||
<input
|
||
class="input"
|
||
type="text"
|
||
placeholder="请输入业务主管单位名称"
|
||
required
|
||
pattern
|
||
oninvalid="setCustomValidity('不能为空')"
|
||
oninput="setCustomValidity('')"
|
||
/>
|
||
</label>
|
||
<!-- 请输入负责人姓名 -->
|
||
<label>
|
||
<span class="two">
|
||
<span class="iconfont icon-renxiang-"></span>
|
||
<span class="iconfont icon-vertical_line"></span>
|
||
</span>
|
||
<input
|
||
class="input"
|
||
type="text"
|
||
placeholder="请输入负责人姓名"
|
||
required
|
||
pattern
|
||
oninvalid="setCustomValidity('不能为空')"
|
||
oninput="setCustomValidity('')"
|
||
/>
|
||
</label>
|
||
<!-- 请输入负责人职务 -->
|
||
<label>
|
||
<span class="two">
|
||
<span class="iconfont icon-lingdai"></span>
|
||
<span class="iconfont icon-vertical_line"></span>
|
||
</span>
|
||
<input
|
||
class="input"
|
||
type="text"
|
||
placeholder="请输入负责人职务"
|
||
required
|
||
pattern
|
||
oninvalid="setCustomValidity('不能为空')"
|
||
oninput="setCustomValidity('')"
|
||
/>
|
||
</label>
|
||
<!-- 请输入负责人电话 -->
|
||
<label>
|
||
<span class="two">
|
||
<span class="iconfont icon-dianhua"></span>
|
||
<span class="iconfont icon-vertical_line"></span>
|
||
</span>
|
||
<input
|
||
class="input"
|
||
type="tel"
|
||
placeholder="请输入负责人电话"
|
||
required
|
||
pattern
|
||
oninvalid="setCustomValidity('不能为空')"
|
||
oninput="setCustomValidity('')"
|
||
/>
|
||
</label>
|
||
<!-- 管理平台协 -->
|
||
<label class="label">
|
||
<input
|
||
class="checkout"
|
||
type="checkbox"
|
||
required
|
||
oninvalid="setCustomValidity('不能为空')"
|
||
oninput="setCustomValidity('')"
|
||
/>
|
||
<span class="span2">
|
||
我已阅读并接受
|
||
<span class="span3">《管理平台协议》</span>
|
||
</span>
|
||
</label>
|
||
<label class="s">
|
||
<input type="submit" class="sub" value="立即注册" />
|
||
</label>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
data () {
|
||
return {
|
||
imgUrl: {
|
||
registered: require('../../../static/img/registered.png'),
|
||
yy: require('../../../static/img/yy.png')
|
||
}
|
||
}
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
methods: {},
|
||
created () {},
|
||
mounted () {}
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
/** 无效 */
|
||
input:required:invalid {
|
||
border-color: #ccc !important;
|
||
}
|
||
/** 有效 */
|
||
input:required:valid {
|
||
border-color: green !important;
|
||
}
|
||
.wrapper {
|
||
width: 1280px;
|
||
height: 1398px;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.box {
|
||
width: 736px;
|
||
height: 1167px;
|
||
background-color: rgba($color: #fff, $alpha: 0.5);
|
||
box-shadow: 0px 3px 29px 0px rgba(0, 0, 0, 0.18);
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.boxx {
|
||
width: 474px;
|
||
height: 980px;
|
||
|
||
h3 {
|
||
font-family: "HanWangKaiBold-Gb5";
|
||
font-size: 26px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 24px;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
text-align: center;
|
||
margin-bottom: 33px;
|
||
}
|
||
|
||
form {
|
||
.s {
|
||
width: 100%;
|
||
text-align: center;
|
||
.sub {
|
||
margin: 0 auto;
|
||
width: 218px;
|
||
height: 56px;
|
||
background-color: #e60012;
|
||
box-shadow: 3px 5px 9px 0px rgba(252, 142, 142, 0.47);
|
||
border-radius: 28px;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 56px;
|
||
text-align: center;
|
||
letter-spacing: 0px;
|
||
color: #ffffff;
|
||
outline: none;
|
||
}
|
||
}
|
||
|
||
.label {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 15px;
|
||
|
||
.checkout {
|
||
width: 14px;
|
||
height: 14px;
|
||
background-image: linear-gradient(0deg, #e5e2e2 0%, #ffffff 100%);
|
||
border-radius: 3px;
|
||
border: solid 1px #bfbfbf;
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.span2 {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 62px;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
|
||
.span3 {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
letter-spacing: 0px;
|
||
color: #e60012;
|
||
}
|
||
}
|
||
label {
|
||
position: relative;
|
||
margin-bottom: 25px;
|
||
display: inline-block;
|
||
|
||
.two {
|
||
position: absolute;
|
||
left: 4%;
|
||
top: 33%;
|
||
display: flex;
|
||
|
||
.iconfont {
|
||
font-size: 20px;
|
||
font-weight: 900;
|
||
color: #000;
|
||
}
|
||
}
|
||
|
||
.one {
|
||
position: absolute;
|
||
left: 4%;
|
||
top: 24%;
|
||
display: flex;
|
||
|
||
.iconfont {
|
||
font-size: 20px;
|
||
font-weight: 900;
|
||
color: #000;
|
||
}
|
||
}
|
||
.input {
|
||
width: 474px;
|
||
height: 56px;
|
||
border-radius: 28px;
|
||
border: solid 1px #a5acbb;
|
||
opacity: 0.8;
|
||
outline: none;
|
||
padding: 0 60px;
|
||
box-sizing: border-box;
|
||
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 88px;
|
||
letter-spacing: 0px;
|
||
color: #666666;
|
||
}
|
||
|
||
.span1 {
|
||
display: inline-block;
|
||
margin-top: 8px;
|
||
margin-left: 25px;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|