<template>
	<div class="home">
		<el-row class="m-b-10 m-t-20">
			<el-col :xl="{span:14,offset:5}" :lg="{span:14,offset:5}" :md="{span:16,offset:4}" :sm="{span:20,offset:2}"
				:xs="{span:24}">
				<div class="pd-10 hidden-sm-and-up" style="padding-bottom: 0;">
					<img src="../assets/images/logo.png" alt="" style="width:100%;"/>
				</div>
				<img src="../assets/images/logo.png" alt="" style="width:50%;" class="hidden-xs-only" />
			</el-col>
		</el-row>
		<el-row class="m-b-20">
			<el-col :span="24" style="background-color: #3084C2;" class=" hidden-xs-only">
				<el-row>
					<el-col :xl="{span:14,offset:5}" :lg="{span:14,offset:5}" :md="{span:16,offset:4}"
						:sm="{span:20,offset:2}" :xs="{span:24}" style="position: relative;" class="banner">
						<div
							style="height: 100%;background: linear-gradient(to right, #3084C2 , transparent);position: absolute;top: 0;left: 0;z-index: 99;width: 20%;">
						</div>
						<!-- <img src="../assets/images/login-bg.jpg" alt="" style="width:100%;height: 360px;" /> -->
						<div
							style="height: 100%;background: linear-gradient(to left, #3084C2 , transparent);position: absolute;top: 0;right: 0;z-index: 99;width: 20%;">
						</div>
						<div class="loginBox" style="">

							<div class="flex-ac-jb">
								<div class=" tabBox" :class="active == 'qy'?'':'notActive'" @click="choose('qy')">
									企业登录
								</div>
								<div class=" tabBox" :class="active == 'qy'?'notActive':''" @click="choose('jy')">
									网络教育登录
								</div>
							</div>
							<div class="pd-20" v-if="active == 'qy'">
								<el-form ref="loginForm" :model="form" :rules="loginRules">
									<el-form-item prop="username">
										<el-input v-model="form.username" placeholder="用户名">
											<svg-icon slot="prefix" icon-class="user"
												class="el-input__icon input-icon" />
										</el-input>
									</el-form-item>
									<el-form-item prop="password">
										<el-input v-model="form.password" type="password" placeholder="密码">
											<svg-icon slot="prefix" icon-class="password"
												class="el-input__icon input-icon" />
										</el-input>
									</el-form-item>
									<el-form-item prop="code">
										<el-input v-model="form.code" auto-complete="off" placeholder="验证码"
											style="width: 63%" @keyup.enter.native="onSubmit">
											<svg-icon slot="prefix" icon-class="validCode"
												class="el-input__icon input-icon" />
										</el-input>
										<div class="login-code">
											<img :src="codeUrl" @click="getCode" class="login-code-img" />
										</div>
									</el-form-item>
									<div class="m-b-10">
										<router-link class="link-type"  :to="'/register'" v-if="active == 'qy'" style="color: #fff;">找回密码</router-link>
									</div>
									<div class="flex-ac-jb">
										<el-button type="primary" @click="onSubmit('qy')" style="width: 45%;">登录</el-button>
										<el-button type="warning" @click="zhuce" style="width: 45%;">注册</el-button>
									</div>
								</el-form>
							</div>
							<div class="pd-20" v-else>
								<el-form ref="userForm" :model="userForm" :rules="userRules">
									<el-form-item prop="username">
										<el-input v-model="userForm.username" placeholder="身份证号">
											<i slot="prefix" class="el-icon-postcard"></i>
										</el-input>
									</el-form-item>
									<el-form-item prop="password">
										<el-input v-model="userForm.password" placeholder="证书编号">
											<i slot="prefix" class="el-icon-tickets"></i>
										</el-input>
									</el-form-item>
									<el-form-item prop="code">
										<el-input v-model="userForm.code" auto-complete="off" placeholder="验证码"
											style="width: 63%" @keyup.enter.native="onSubmit">
											<svg-icon slot="prefix" icon-class="validCode"
												class="el-input__icon input-icon" />
										</el-input>
										<div class="login-code">
											<img :src="codeUrl" @click="getCode" class="login-code-img" />
										</div>
									</el-form-item>
									<div style="color: #fff;"  class="m-b-10">
										监理工程师网络教育登录入口
									</div>
									<div class="flex-ac-jb">
										<el-button type="primary" @click="onSubmit('jy')" style="width: 100%;">登录</el-button>
									</div>
								</el-form>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="24" style="background-color: #3084C2;" class="hidden-sm-and-up">
				<div class="loginBox2" style="">
					<div class="flex-ac-jb">
						<div class=" tabBox" :class="active == 'qy'?'':'notActive'" @click="choose('qy')">
							企业登录
						</div>
						<div class=" tabBox" :class="active == 'qy'?'notActive':''" @click="choose('jy')">
							网络教育登录
						</div>
					</div>
					<div class="pd-20" v-if="active == 'qy'">
						<el-form ref="loginForm" :model="form" :rules="loginRules">
							<el-form-item prop="username">
								<el-input v-model="form.username" placeholder="用户名">
									<svg-icon slot="prefix" icon-class="user"
										class="el-input__icon input-icon" />
								</el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input v-model="form.password" placeholder="密码">
									<svg-icon slot="prefix" icon-class="password"
										class="el-input__icon input-icon" />
								</el-input>
							</el-form-item>
							<el-form-item prop="code">
								<el-input v-model="form.code" auto-complete="off" placeholder="验证码"
									style="width: 63%" @keyup.enter.native="onSubmit">
									<svg-icon slot="prefix" icon-class="validCode"
										class="el-input__icon input-icon" />
								</el-input>
								<div class="login-code">
									<img :src="codeUrl" @click="getCode" class="login-code-img" />
								</div>
							</el-form-item>
							<div class="m-b-10">
								<router-link class="link-type"  :to="'/register'" v-if="active == 'qy'" style="color: #fff;">找回密码</router-link>
							</div>
							<div class="flex-ac-jb">
								<el-button type="primary" @click="onSubmit('qy')" style="width: 45%;">登录</el-button>
								<el-button type="warning" @click="zhuce" style="width: 45%;">注册</el-button>
							</div>
						</el-form>
					</div>
					<div class="pd-20" v-else>
						<el-form ref="userForm" :model="userForm" :rules="userRules">
							<el-form-item prop="username">
								<el-input v-model="userForm.username" placeholder="身份证号">
									<i slot="prefix" class="el-icon-postcard"></i>
								</el-input>
							</el-form-item>
							<el-form-item prop="password"> 
								<el-input v-model="userForm.password" placeholder="证书编号">
									<i slot="prefix" class="el-icon-tickets"></i>
								</el-input>
							</el-form-item>
							<el-form-item prop="code">
								<el-input v-model="userForm.code" auto-complete="off" placeholder="验证码"
									style="width: 63%" @keyup.enter.native="onSubmit">
									<svg-icon slot="prefix" icon-class="validCode"
										class="el-input__icon input-icon" />
								</el-input>
								<div class="login-code">
									<img :src="codeUrl" @click="getCode" class="login-code-img" />
								</div>
							</el-form-item>
							<div style="color: #fff;"  class="m-b-10">
								监理工程师网络教育登录入口
							</div>
							<div class="flex-ac-jb">
								<el-button type="primary" @click="onSubmit('jy')" style="width: 100%;">登录</el-button>
							</div>
						</el-form>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row class="m-b-20">
			<el-col :xl="{span:14,offset:5}" :lg="{span:14,offset:5}" :md="{span:16,offset:4}" :sm="{span:20,offset:2}"
				:xs="{span:24}" class="hidden-xs-only">
				<el-row>
					<el-col :span="24" >
						<div style="border-bottom: 1px solid #34a150;" class="flex-ac m-b-20">
							<div class="pd-10 "
								style="border-bottom: 2px solid #34a150;font-size: 20px;padding-left: 0;">
								网络继续教育安排
							</div>
						</div>
						<div class="jxjy">
							<el-table :data="jxjyList" border style="width: 100%">
								<el-table-column prop="date" label="期次" width="100" align="center">
									<template slot-scope="scope">
										<div >
											{{scope.row.QiciYear+"年"+scope.row.QiCi+"期"}}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="ZcsZhuanYe" label="类别" width="100" align="center">
									<template slot-scope="scope">
										<div >
											{{scope.row.ZhuanYeType == null?scope.row.ZcsZhuanYe:scope.row.ZcsZhuanYe+"("+scope.row.ZhuanYeType+")"}}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="TrainName" label="继续教育安排"></el-table-column>
								<el-table-column prop="time" label="报名截止" width="100" align="center">
									<template slot-scope="scope">
										<div >
											{{parseTime(scope.row.BmEndDate, '{y}-{m}-{d}') }}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="bmnum" label="已报人数" width="80" align="center">
									<template slot-scope="scope">
										<div style="color: #F56C6C;">
											{{scope.row.BmNum}}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="sxnum" label="报名上限" width="80" align="center">
									<template slot-scope="scope">
										<div style="color: #F56C6C;">
											{{scope.row.BmNumMax}}
										</div>
									</template>
								</el-table-column>
								<el-table-column label="报名" width="80" align="center">
									<template slot-scope="scope">
										<el-button type="success" size="small" @click="classSignUp(scope.row)" v-if="Number(scope.row.BmNum) < Number(scope.row.BmNumMax) && new Date(scope.row.BmEndDate) > new Date()">
											报 名
										</el-button>
										<el-button size="small" disabled v-else>
											结 束
										</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-col>
					<el-col :span="24" class="m-t-20">
						<div style="border-bottom: 1px solid #3084C2;" class="flex-ac m-b-20">
							<div class="pd-10 "
								style="border-bottom: 2px solid #3084C2;font-size: 20px;padding-left: 0;">
								资格考试安排
							</div>
						</div>
						<div class="zgks">
							<el-table :data="jlksList" border style="width: 100%">
								<el-table-column prop="address" label="资格考试期次安排">
									<template slot-scope="scope">
										<div>
											<el-link icon="el-icon-document"></el-link>
											{{scope.row.TrainName}}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="time" label="报名截止" width="100" align="center">
									<template slot-scope="scope">
										<div >
											{{parseTime(scope.row.BmEndDate, '{y}-{m}-{d}') }}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="address" label="考试地点" width="180">
									<template slot-scope="scope">
										<div >
											<el-select v-model="scope.row.address" readonly placeholder="请选择地点">
												<el-option :label="v" :value="i" :key="i" v-for="(v,i) in scope.row.dishi.split('|')">
													{{v}}
												</el-option>
											</el-select>
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="bmnum" label="已报人数" width="80" align="center">
									<template slot-scope="scope">
										<div style="color: #F56C6C;">
											<div v-if="scope.row.address == undefined">
												{{scope.row.BmNum.split('|').reduce((accumulator, currentValue) => accumulator + Number(currentValue), 0)}}
											</div>
											<div v-else>
												{{scope.row.BmNum.split('|')[scope.row.address]}}
											</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="sxnum" label="报名上限" width="80" align="center">
									<template slot-scope="scope">
										<div style="color: #F56C6C;">
											<div v-if="scope.row.address == undefined">
												{{scope.row.BmNumMax.split('|').reduce((accumulator, currentValue) => accumulator + Number(currentValue), 0)}}
											</div>
											<div v-else>
												{{scope.row.BmNumMax.split('|')[scope.row.address]}}
											</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column label="报名" width="160" align="center">
									<template slot-scope="scope">
										<el-row :gutter="5">
											<el-col :span="12" >
												<el-button type="success" size="small" v-if="Number(scope.row.BmNum) < Number(scope.row.BmNumMax) && new Date(scope.row.BmEndDate) > new Date()" @click="kaoshiBm(scope.row)" >
													报名
												</el-button>
												<el-button v-else size="small" disabled>
													结 束
												</el-button>
											</el-col>
											<el-col :span="12">
												<el-button type="primary" size="small" @click="search(scope.row)">
													查询
												</el-button>
											</el-col>
										</el-row>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="24" class="hidden-sm-and-up p-l-20 p-r-20" >
				<div>
					<div style="border-bottom: 1px solid #34a150;" class="flex-ac m-b-20">
						<div class="pd-10 "
							style="border-bottom: 2px solid #34a150;font-size: 20px;padding-left: 0;">
							网络继续教育安排
						</div>
					</div>
					<div>
						<el-card class="box-card m-b-20" v-for="(v,i) in tableData" :key="i">
							<div slot="header" class="clearfix">
								<span>{{v.date}}</span>
								<el-button style="float: right; padding: 8px;" type="success" @click="classSignUpH5(v,'ks')">报名</el-button>
							</div>
							<div>
								<div class="m-b-10">
									类别：{{v.name}}
								</div>
								<div class="m-b-10">
									继续教育安排：{{v.address}}
								</div>
								<div class="m-b-10">
									报名截止：{{v.time}}
								</div>
								<div>
									报名人数：
									<span style="color: #F56C6C;">
										{{v.bmnum+'/'+v.sxnum}}
									</span>
								</div>
							</div>
						</el-card>
					</div>
				</div>
				<div>
					<div style="border-bottom: 1px solid #3084C2;" class="flex-ac m-b-20">
						<div class="pd-10 "
							style="border-bottom: 2px solid #3084C2;font-size: 20px;padding-left: 0;">
							资格考试安排
						</div>
					</div>
					<div>
						<el-card class="box-card m-b-20" v-for="(v,i) in tableData" :key="i">
							<div slot="header" class="clearfix">
								<span>{{v.date+v.address}}</span>
							</div>
							<div>
								<div class="m-b-10">
									考试地点：
									<!-- <el-select v-model="value" placeholder="请选择">
										<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
									</el-select> -->
								</div>
								<div class="m-b-10">
									报名截止：{{v.time}}
								</div>
								<div>
									报名人数：
									<span style="color: #F56C6C;">
										{{v.bmnum+'/'+v.sxnum}}
									</span>
								</div>
								<div class="p-b-20">
									<el-button style="float: right; padding: 8px;" type="success">报名</el-button>
									<el-button style="float: right; padding: 8px;margin-right: 10px;" type="primary">查询</el-button>
								</div>
							</div>
						</el-card>
					</div>
				</div>
			</el-col>
		</el-row>
		<div style="width: 8vw;position: fixed;top: 20vh;right: 0;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 6px 0 0 6px;overflow: hidden;"
			class="box-hover hidden-xs-only">
			<img src="../assets/images/cx.jpg" style="width: 100%;" />
		</div>
		<el-dialog title="监理工程师继续教育报名" :visible.sync="show" width="70%" :close-on-click-modal="false">
			<div style="height: 74vh;overflow-y: auto;overflow-x: hidden;padding-top: 0;" class="pd-10">
				<kaoshi ref="kaoshi" :info="jxjyInfo"  @submitSuccess="submitSuccess"></kaoshi>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">报 名</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog :title="title" :visible.sync="showH5" width="96%">
			<div style="height: 74vh;overflow-y: auto;overflow-x: hidden;padding-top: 0;" class="pd-10">
				<kaoshi-h5></kaoshi-h5>
			</div>
		</el-dialog>
		<el-dialog title="资格考试报名查询" :visible.sync="searchShow" width="40%">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="姓名">
					<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="身份证号">
					<el-input v-model="form.name" placeholder="请输入身份证号"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="searchShow = false">取 消</el-button>
				<el-button type="primary" @click="searchShow = false">查询</el-button>
			</span>
		</el-dialog>
		<div class="footer hidden-xs-only" >
			<div class="in">
				<p><span>Copyright © 中国铁道工程建设协会建设监理专业委员会&nbsp;&nbsp;&nbsp;&nbsp;版权所有</span></p>
				<p><span>技术支持：石家庄亿网科技发展有限公司 &nbsp;&nbsp;QQ群1：273181486 QQ群2：379067534 QQ群3：684421906
						客服QQ：3564246643&nbsp;&nbsp;<a rel="nofollow" href="https://beian.miit.gov.cn" target="_blank">
							网站备案号：京ICP备13011762号-1
						</a></span></p>
			</div>
		</div>
		<div class="footer hidden-sm-and-up" >
			<div class="in2 pd-20">
				<p><span>Copyright © 中国铁道工程建设协会建设监理专业委员会&nbsp;&nbsp;&nbsp;&nbsp;版权所有</span></p>
				<p><span>技术支持：石家庄亿网科技发展有限公司 &nbsp;&nbsp;QQ群1：273181486 QQ群2：379067534 QQ群3：684421906
						客服QQ：3564246643&nbsp;&nbsp;<a rel="nofollow" href="https://beian.miit.gov.cn" target="_blank">
							网站备案号：京ICP备13011762号-1
						</a></span></p>
			</div>
		</div>
	</div>
</template>

<script>
	import kaoshi from "./components/baoming/kaoshi.vue"
	import kaoshiH5 from "./components/baoming/H5.vue"
	
	import { getCodeImg } from "@/api/login";
	import { getJxjy } from "@/api/userIndex";
	export default {
		name: "userIndex",
		components: {
			kaoshi,kaoshiH5
		},
		data() {
			return {
				jxjyList:[],
				jlksList:[],
				form: {
					username: "",
					password: "",
					rememberMe: false,
					code: "",
					uuid: "",
					type:null
				},
				userForm:{
					username: "",
					password: "",
					rememberMe: false,
					code: "",
					uuid: "",
					type:null
				},
				loginRules: {
					username: [{
						required: true,
						trigger: "blur",
						message: "请输入您的账号"
					}],
					password: [{
						required: true,
						trigger: "blur",
						message: "请输入您的密码"
					}],
					code: [{
						required: true,
						trigger: "blur",
						message: "请输入验证码"
					}]
				},
				userRules: {
					username: [{
						required: true,
						trigger: "blur",
						message: "请输入身份证号"
					}],
					password: [{
						required: true,
						trigger: "blur",
						message: "请输入证书编号"
					}],
					code: [{
						required: true,
						trigger: "change",
						message: "请输入验证码"
					}]
				},
				show: false, //报名、考试对话框
				type: null, //当前对话框状态
				title: null, ///对话框标头
				searchShow: false, //资格考试查询
				codeUrl: "",//验证码路径
				active:'qy',//当前选中状态
				showH5:false,//h5弹窗展示
				captchaEnabled:true,
				loading:false,
				redirect:null,
				jxjyInfo:null
			};
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect;
				},
				immediate: true
			}
		},
		created() {
			this.getCode()
			this.getJxjyList()
		},
		methods: {
			//获取继续教育列表
			getJxjyList(){
				getJxjy().then(res=>{
					for(let i in res.data){
						if(i<10){
							this.jxjyList.push(res.data[i])
						}else{
							this.jlksList.push(res.data[i])
						}
					}
				})
			},
			//pc报名
			classSignUp(row) {
				this.jxjyInfo = row
				this.show = true
			},
			//考试报名
			kaoshiBm(row){
				console.log(row)
				console.log(row.address)
				
			},
			//H5报名
			classSignUpH5(row, type) {
				this.type = type
				if (type == 'kc') {
					this.title = '监理工程师继续教育报名'
				} else {
					this.title = '监理工程师资格考试报名'
				}
				this.showH5 = true
			},
			//考试查询
			search(row) {
				this.searchShow = true
			},
			getCode() {
			  getCodeImg().then(res => {
			    this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
			    if (this.captchaEnabled) {
			      this.codeUrl = "data:image/gif;base64," + res.img;
			      this.form.uuid = res.uuid;
			      this.userForm.uuid = res.uuid;
			    }
			  });
			},
			choose(v){
				this.active = v
				if(v == 'qy'){
					this.form = {
						username: "",
						password: "",
						rememberMe: false,
						code: "",
					}
					setTimeout(()=>{
						this.$refs.loginForm.clearValidate()
						console.log(2)
					},500)
				}else{
					this.userForm = {
						username: "",
						password: "",
						rememberMe: false,
						code: "",
					}
					setTimeout(()=>{
						this.$refs.userForm.clearValidate()
						console.log(1)
					},500)
				}
				
			},
			//注册企业账号
			zhuce(){
				this.$router.push({
					path:"/register"
				})
			},
			//登陆
			onSubmit(type){
				if(type=='qy'){
					this.$refs.loginForm.validate(valid => {
						if (valid) {
							this.loading = true
							this.form.type = '0'
							this.$store.commit('setType', '0');
							this.$store.dispatch("Login", this.form).then(() => {
								this.$router.push({
									path: this.redirect || "/"
								}).catch(() => {});
							}).catch((error) => {
								this.loading = false;
								if (this.captchaEnabled) {
									// this.$message({
									// 	type:"error",
									// 	message:error.msg
									// })
									this.getCode();
								}
							})
						}
					});
				}else{
					this.$refs.userForm.validate(valid => {
						if (valid) {
							this.loading = true
							this.form.type = '1'
							this.$store.commit('setType', '1');
							this.$store.dispatch("Login", this.userForm).then(() => {
								this.$router.push({
									path: this.redirect || "/"
								}).catch(() => {});
							}).catch(() => {
								this.loading = false;
								if (this.captchaEnabled) {
									// this.$message({
									// 	type:"error",
									// 	message:error.msg
									// })
									this.getCode();
								}
							});
							
						}
					});
				} 
			},
			submitForm(){
				this.$refs.kaoshi.submit()
			},
			submitSuccess(e){
				this.show = e
				
			},
			cancel(){
				this.$refs.kaoshi.reset()
				this.show = false
			}
		}
	};
</script>

<style scoped lang="scss">
	::v-deep .jxjy .el-table__header-wrapper th {
		background-color: #34a150;
		/* 举例颜色 */
		color: #fff;
		font-weight: bold;
	}

	::v-deep .zgks .el-table__header-wrapper th {
		background-color: #3084C2;
		/* 举例颜色 */
		color: #fff;
		font-weight: bold;
	}

	.footer {
		margin: 0;
		border: 0;
		padding: 0;
		list-style: none;
		font-size: 14px;
		color: #333;
		font-family: "Microsoft YaHei Mono", "微软雅黑";
		background-color: #3084C2;
	}

	.in {
		width: 80vw;
		margin: 0 auto;
		text-align: center;
		padding: 15px 0;
		color: #fff
	}
	.in2 {
		margin: 0 auto;
		text-align: center;
		color: #fff
	}
	.loginBox {
		width: 300px;
		position: absolute;
		z-index: 100;
		top: 50%;
		transform: translateY(-50%);
		right: 0%;
		background-color: rgba(28, 107, 115, 0.6);
		border-radius: 6px;
		color: #fff;
		overflow: hidden;
	}
	.loginBox2 {
		width: 100%;
		background-color: rgba(28, 107, 115, 0.6);
		border-radius: 6px;
		color: #fff;
		overflow: hidden;
	}
	.tabBox {
		padding: 15px;
		text-align: center;
		font-size: 18px;
		width: 50%;
		box-sizing: border-box;
	}
	.tabBox:hover{
		cursor: pointer;
	}
	.notActive {
		background-color: #619395;
	}
	.login-code {
	  width: 33%;
	  height: 36px;
	  float: right;
	  img {
	    cursor: pointer;
	    vertical-align: middle;
	  }
	}
	.login-code-img {
	  height: 36px;
	}
	.banner{
		height: 360px;
		background-image: url("../assets/images/login-bg.jpg");
		background-size: cover;
		background-position: center;  
		background-repeat: no-repeat; 
	}
</style>