huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-30 03:01:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: 格式化代码

Browse Source
This commit is contained in:
xingyu4j 2022-08-06 00:59:24 +08:00
parent baf5d87d32
commit 48427994d4
5 changed files with 1308 additions and 1292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
yudao-ui-admin-uniapp/components/verifition/Verify.vue
View File

@ -1,5 +1,5 @@
<template>
<view :class="mode=='pop'?'mask':''" v-show="showBox">
<view :class="mode=='pop'?'mask':''" v-show="showBox">
<view :class="mode=='pop'?'verifybox':''" :style="{'max-width':parseInt(imgSize.width)+30+'px'}">
<view class="verifybox-top" v-if="mode=='pop'">
请完成安全验证
@ -11,42 +11,19 @@
<!-- 验证码容器 -->
<!-- 滑动 -->
<view v-if="componentType=='VerifySlide'">
<VerifySlide
@success="success"
:captchaType="captchaType"
:type="verifyType"
:figure="figure"
:arith="arith"
:mode="mode"
:vSpace="vSpace"
:explain="explain"
:imgSize="imgSize"
:blockSize="blockSize"
:barSize="barSize"
:defaultImg = "defaultImg"
ref="instance"
></VerifySlide>
<VerifySlide @success="success" :captchaType="captchaType" :type="verifyType" :figure="figure"
:arith="arith" :mode="mode" :vSpace="vSpace" :explain="explain" :imgSize="imgSize"
:blockSize="blockSize" :barSize="barSize" :defaultImg="defaultImg" ref="instance"></VerifySlide>
</view>
<!-- 点选 -->
<view v-if="componentType=='VerifyPoints'">
<VerifyPoint
:captchaType="captchaType"
:type="verifyType"
:figure="figure"
:arith="arith"
:mode="mode"
:vSpace="vSpace"
:explain="explain"
:imgSize="imgSize"
:blockSize="blockSize"
:barSize="barSize"
:defaultImg = "defaultImg"
ref="instance"
></VerifyPoint>
<VerifyPoint :captchaType="captchaType" :type="verifyType" :figure="figure" :arith="arith"
:mode="mode" :vSpace="vSpace" :explain="explain" :imgSize="imgSize" :blockSize="blockSize"
:barSize="barSize" :defaultImg="defaultImg" ref="instance"></VerifyPoint>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
/**
@ -59,9 +36,9 @@
export default {
name: 'Vue2Verify',
props: {
captchaType:{
type:String,
required:true
captchaType: {
type: String,
required: true
},
figure: {
type: Number
@ -71,11 +48,11 @@
},
mode: {
type: String,
default:'pop'
default: 'pop'
},
vSpace: {
type: Number,
default:5
default: 5
},
explain: {
type: String,
@ -83,7 +60,7 @@
},
imgSize: {
type: Object,
default() {
default () {
return {
width: '310px',
height: '155px'
@ -92,7 +69,7 @@
},
blockSize: {
type: Object,
default() {
default () {
return {
width: '50px',
height: '50px'
@ -106,7 +83,7 @@
data() {
return {
// showBox:true,
clickShow:false,
clickShow: false,
// 内部类型
verifyType: undefined,
// 所用组件类型
@ -129,14 +106,14 @@
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
var slider = 'slider'+ '-'+s.join("");
var point = 'point'+ '-'+s.join("");
var slider = 'slider' + '-' + s.join("");
var point = 'point' + '-' + s.join("");
// 判断下是否存在 slider
if(!uni.getStorageSync('slider')) {
if (!uni.getStorageSync('slider')) {
uni.setStorageSync('slider', slider)
}
if(!uni.getStorageSync('point')) {
uni.setStorageSync("point",point);
if (!uni.getStorageSync('point')) {
uni.setStorageSync("point", point);
}
},
success(e) {
@ -151,8 +128,8 @@
this.instance.refresh()
}
},
show(){
if (this.mode=="pop") {
show() {
if (this.mode == "pop") {
this.clickShow = true;
}
}
@ -161,16 +138,16 @@
instance() {
return this.$refs.instance || {}
},
showBox(){
if (this.mode=='pop') {
showBox() {
if (this.mode == 'pop') {
return this.clickShow
}else{
} else {
return true;
}
}
},
watch: {
captchaType:{
captchaType: {
immediate: true,
handler(captchaType) {
switch (captchaType.toString()) {
@ -193,18 +170,19 @@
}
</script>
<style>
.verifybox{
.verifybox {
position: relative;
box-sizing: border-box;
border-radius: 2px;
border: 1px solid #e4e7eb;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.3);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
left: 50%;
top:50%;
transform: translate(-50%,-50%);
top: 50%;
transform: translate(-50%, -50%);
}
.verifybox-top{
.verifybox-top {
padding: 0 15px;
height: 50px;
line-height: 50px;
@ -214,11 +192,13 @@
border-bottom: 1px solid #e4e7eb;
box-sizing: border-box;
}
.verifybox-bottom{
.verifybox-bottom {
/* padding: 15px; */
box-sizing: border-box;
}
.verifybox-close{
.verifybox-close {
position: absolute;
top: 13px;
right: 9px;
@ -227,33 +207,40 @@
text-align: center;
cursor: pointer;
}
.mask{
.mask {
position: fixed;
top: 0;
left:0;
left: 0;
z-index: 1001;
width: 100%;
height: 100vh;
background: rgba(0,0,0,.3);
background: rgba(0, 0, 0, .3);
/* display: none; */
transition: all .5s;
}
.verify-tips{
.verify-tips {
position: absolute;
left: 0px;
bottom:0px;
bottom: 0px;
width: 100%;
height: 30px;
background-color:rgb(231, 27, 27,.5);
line-height:30px;
background-color: rgb(231, 27, 27, .5);
line-height: 30px;
color: #fff;
}
.tips-enter,.tips-leave-to{
.tips-enter,
.tips-leave-to {
bottom: -30px;
}
.tips-enter-active,.tips-leave-active{
.tips-enter-active,
.tips-leave-active {
transition: bottom .5s;
}
/* ---------------------------- */
/*常规验证码*/
.verify-code {

7
yudao-ui-admin-uniapp/components/verifition/utils/ase.js
View File

@ -3,9 +3,12 @@ import CryptoJS from 'crypto-js'
* @word 要加密的内容
* @keyWord String 服务器随机返回的关键字
* */
export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){
export function aesEncrypt(word, keyWord = "XwKsGlMcdPMEhR1B") {
var key = CryptoJS.enc.Utf8.parse(keyWord);
var srcs = CryptoJS.enc.Utf8.parse(word);
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
var encrypted = CryptoJS.AES.encrypt(srcs, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
}

10
yudao-ui-admin-uniapp/components/verifition/utils/request.js
View File

@ -1,15 +1,15 @@
import config from '@/config'
const baseUrl = config.baseUrl
export const myRequest = (option={})=>{
return new Promise((reslove,reject)=>{
export const myRequest = (option = {}) => {
return new Promise((reslove, reject) => {
uni.request({
url: baseUrl + option.url,
data :option.data,
method:option.method || "GET",
data: option.data,
method: option.method || "GET",
success: (result) => {
reslove(result)
},
fail:(error)=>{
fail: (error) => {
reject(error)
}
})

67
yudao-ui-admin-uniapp/components/verifition/verifyPoint/verifyPoint.vue
View File

@ -1,24 +1,16 @@
<template>
<view style="position: relative"
>
<view class="verify-image-out"
v-show="showImage"
>
<view style="position: relative">
<view class="verify-image-out" v-show="showImage">
<view class="verify-image-panel" :style="{'width': imgSize.width,
'height': imgSize.height,
'margin-bottom': vSpace + 'px'}"
>
'margin-bottom': vSpace + 'px'}">
<view class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh">
<text class="iconfont icon-refresh"></text>
</view>
<image :src="pointBackImgBase?('data:image/png;base64,'+pointBackImgBase):defaultImg"
id="image"
ref="canvas"
style="width:100%;height:100%;display:block"
@click=" bindingClick? canvasClick($event): undefined"
></image>
<view v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area"
:style="{
<image :src="pointBackImgBase?('data:image/png;base64,'+pointBackImgBase):defaultImg" id="image"
ref="canvas" style="width:100%;height:100%;display:block"
@click=" bindingClick? canvasClick($event): undefined"></image>
<view v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area" :style="{
'background-color':'#1abd6c',
color:'#fff',
'z-index':9999,
@ -36,8 +28,7 @@
</view>
</view>
<!-- 'height': this.barSize.height, -->
<view class="verify-bar-area"
:style="{'width': imgSize.width,
<view class="verify-bar-area" :style="{'width': imgSize.width,
'color': barAreaColor,
'border-color': barAreaBorderColor,
'line-height':'40px'}">
@ -265,18 +256,19 @@
</script>
<style scoped>
.verifybox{
.verifybox {
position: relative;
box-sizing: border-box;
border-radius: 2px;
border: 1px solid #e4e7eb;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.3);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
left: 50%;
top:50%;
transform: translate(-50%,-50%);
top: 50%;
transform: translate(-50%, -50%);
}
.verifybox-top{
.verifybox-top {
padding: 0 15px;
height: 50px;
line-height: 50px;
@ -286,11 +278,13 @@
border-bottom: 1px solid #e4e7eb;
box-sizing: border-box;
}
.verifybox-bottom{
.verifybox-bottom {
/* padding: 15px; */
box-sizing: border-box;
}
.verifybox-close{
.verifybox-close {
position: absolute;
top: 13px;
right: 9px;
@ -299,33 +293,40 @@
text-align: center;
cursor: pointer;
}
.mask{
.mask {
position: fixed;
top: 0;
left:0;
left: 0;
z-index: 1001;
width: 100%;
height: 100vh;
background: rgba(0,0,0,.3);
background: rgba(0, 0, 0, .3);
/* display: none; */
transition: all .5s;
}
.verify-tips{
.verify-tips {
position: absolute;
left: 0px;
bottom:0px;
bottom: 0px;
width: 100%;
height: 30px;
background-color:rgb(231, 27, 27,.5);
line-height:30px;
background-color: rgb(231, 27, 27, .5);
line-height: 30px;
color: #fff;
}
.tips-enter,.tips-leave-to{
.tips-enter,
.tips-leave-to {
bottom: -30px;
}
.tips-enter-active,.tips-leave-active{
.tips-enter-active,
.tips-leave-active {
transition: bottom .5s;
}
/* ---------------------------- */
/*常规验证码*/
.verify-code {

211
yudao-ui-admin-uniapp/components/verifition/verifySlider/verifySlider.vue
View File

@ -1,17 +1,16 @@
<template>
<view style="position: relative;">
<view v-if="type === '2'" class="verify-img-out"
:style="{height: (parseInt(imgSize.height) + vSpace) + 'px'}"
>
<view v-if="type === '2'" class="verify-img-out" :style="{height: (parseInt(imgSize.height) + vSpace) + 'px'}">
<view class="verify-img-panel" :style="{width: imgSize.width,
height: imgSize.height,}">
<image :src="backImgBase?('data:image/png;base64,'+backImgBase):defaultImg" alt="" style="width:100%;height:100%;display:block"></image>
<image :src="backImgBase?('data:image/png;base64,'+backImgBase):defaultImg" alt=""
style="width:100%;height:100%;display:block"></image>
<view class="verify-refresh" @click="refresh" v-show="showRefresh">
<text class="iconfont icon-refresh"></text>
</view>
<transition name="tips">
<text class="verify-tips" v-if="tipWords" :class="passFalg ? 'suc-bg':'err-bg'" >{{tipWords}}</text>
<text class="verify-tips" v-if="tipWords" :class="passFalg ? 'suc-bg':'err-bg'">{{tipWords}}</text>
</transition>
</view>
</view>
@ -24,21 +23,15 @@
<view class="verify-left-bar"
:style="{width: leftBarWidth?leftBarWidth:'40px', height: '40px', 'border-color': leftBarBorderColor, transaction: transitionWidth}">
<text class="verify-msg" v-text="finishText"></text>
<view class="verify-move-block"
@touchstart="start"
@touchend ="end"
@touchmove ="move"
<view class="verify-move-block" @touchstart="start" @touchend="end" @touchmove="move"
:style="{width:'40px', height: '40px', 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}">
<text :class="['verify-icon iconfont', iconClass]"
:style="{color: iconColor}"></text>
<view v-if="type === '2'"
class="verify-sub-block"
:style="{'width':Math.floor(parseInt(imgSize.width)*47/310)+ 'px' ,
<text :class="['verify-icon iconfont', iconClass]" :style="{color: iconColor}"></text>
<view v-if="type === '2'" class="verify-sub-block" :style="{'width':Math.floor(parseInt(imgSize.width)*47/310)+ 'px' ,
'height': imgSize.height,
'top':'-' + (parseInt(imgSize.height) + vSpace) + 'px',
}"
>
<image :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block"></image>
}">
<image :src="'data:image/png;base64,'+blockBackImgBase" alt=""
style="width:100%;height:100%;display:block"></image>
</view>
</view>
</view>
@ -50,13 +43,17 @@
* VerifySlide
* @description 滑块
* */
import {aesEncrypt} from "./../utils/ase.js"
import {myRequest} from "../utils/request.js"
import {
aesEncrypt
} from "./../utils/ase.js"
import {
myRequest
} from "../utils/request.js"
export default {
name: 'VerifySlide',
props: {
captchaType:{
type:String,
captchaType: {
type: String,
},
type: {
type: String,
@ -77,7 +74,7 @@
},
imgSize: {
type: Object,
default() {
default () {
return {
width: '310px',
height: '155px'
@ -86,7 +83,7 @@
},
blockSize: {
type: Object,
default() {
default () {
return {
width: '50px',
height: '50px'
@ -95,7 +92,7 @@
},
barSize: {
type: Object,
default() {
default () {
return {
width: '100%',
height: '40px'
@ -109,17 +106,17 @@
},
data() {
return {
secretKey:'', //后端返回的加密秘钥 字段
passFalg:false, //请求通过与否
backImgBase:'', //验证码背景图片
blockBackImgBase:'', //验证滑块的背景图片
backToken:"", //后端返回的唯一token值
startMoveTime:"", //移动开始的时间
endMovetime:'', //移动结束的时间
tipsBackColor:'', //提示词的北京颜色
tipWords:'',
secretKey: '', //后端返回的加密秘钥 字段
passFalg: false, //请求通过与否
backImgBase: '', //验证码背景图片
blockBackImgBase: '', //验证滑块的背景图片
backToken: "", //后端返回的唯一token值
startMoveTime: "", //移动开始的时间
endMovetime: '', //移动结束的时间
tipsBackColor: '', //提示词的北京颜色
tipWords: '',
text: '',
finishText:'',
finishText: '',
setSize: {
imgHeight: 0,
imgWidth: 0,
@ -152,7 +149,7 @@
},
//鼠标按下
start: function (e) {
start: function(e) {
this.startMoveTime = new Date().getTime(); //开始滑动的时间
if (this.isEnd == false) {
this.text = ''
@ -164,26 +161,28 @@
}
},
//鼠标移动
move: function (e) {
move: function(e) {
var query = uni.createSelectorQuery().in(this);
this.barArea = query.select('.verify-bar-area')
var bar_area_left,barArea_offsetWidth;
var bar_area_left, barArea_offsetWidth;
this.barArea.boundingClientRect(data => {
bar_area_left = Math.ceil(data.left)
barArea_offsetWidth =Math.ceil(data.width)
barArea_offsetWidth = Math.ceil(data.width)
if (this.status && this.isEnd == false) {
if (!e.touches) { //兼容移动端
var x =Math.ceil(e.clientX);
var x = Math.ceil(e.clientX);
} else { //兼容PC端
var x =Math.ceil(e.touches[0].pageX) ;
var x = Math.ceil(e.touches[0].pageX);
}
// var bar_area_left = this.getLeft(this.barArea);
var move_block_left = x - bar_area_left //小方块相对于父元素的left值
if (this.type !== '1') { //图片滑动
if (move_block_left >= barArea_offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2) {
move_block_left = barArea_offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2;
if (move_block_left >= barArea_offsetWidth - parseInt(parseInt(this.blockSize
.width) / 2) - 2) {
move_block_left = barArea_offsetWidth - parseInt(parseInt(this.blockSize
.width) / 2) - 2;
}
}
@ -192,34 +191,48 @@
}
//拖动后小方块的left值
this.moveBlockLeft = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2) ) + "px"
this.leftBarWidth = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) + "px"
this.moveBlockLeft = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
"px"
this.leftBarWidth = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
"px"
}
}).exec();
},
//鼠标松开
end: function () {
this.endMovetime =new Date().getTime();
end: function() {
this.endMovetime = new Date().getTime();
var _this = this;
// 判断是否重合
// 判断是否重合
if (this.status && this.isEnd == false) {
if (this.type !== '1') { //图片滑动
var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''));
moveLeftDistance = moveLeftDistance * 310/ parseInt(this.imgSize.width)
moveLeftDistance = moveLeftDistance * 310 / parseInt(this.imgSize.width)
var captchaVerification = this.secretKey ?aesEncrypt(this.backToken+'---'+JSON.stringify({x:moveLeftDistance,y:5.0}),this.secretKey):this.backToken+'---'+JSON.stringify({x:moveLeftDistance,y:5.0})
var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify({
x: moveLeftDistance,
y: 5.0
}), this.secretKey) : this.backToken + '---' + JSON.stringify({
x: moveLeftDistance,
y: 5.0
})
let data = {
captchaType:this.captchaType,
"pointJson":this.secretKey ? aesEncrypt(JSON.stringify({x:moveLeftDistance,y:5.0}),this.secretKey):JSON.stringify({x:moveLeftDistance,y:5.0}),
"token":this.backToken
captchaType: this.captchaType,
"pointJson": this.secretKey ? aesEncrypt(JSON.stringify({
x: moveLeftDistance,
y: 5.0
}), this.secretKey) : JSON.stringify({
x: moveLeftDistance,
y: 5.0
}),
"token": this.backToken
}
myRequest({
url: `/captcha/check`,
data,
method:"POST",
method: "POST",
}).then((result) => {
let res = result.data
if (res.repCode == "0000") {
@ -229,40 +242,43 @@
this.iconClass = 'icon-check'
this.showRefresh = true
this.isEnd = true;
setTimeout(()=>{
if (this.mode=='pop') {
setTimeout(() => {
if (this.mode == 'pop') {
this.$parent.clickShow = false;
}
this.refresh();
},1500)
}, 1500)
this.passFalg = true
this.tipWords = `${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
setTimeout(()=>{
this.tipWords =
`${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
setTimeout(() => {
this.tipWords = ""
this.$emit('success', {captchaVerification})
this.$emit('success', {
captchaVerification
})
// this.$parent.$emit('success', {captchaVerification})
},1000)
}else{
}, 1000)
} else {
this.moveBlockBackgroundColor = '#d9534f'
this.leftBarBorderColor = '#d9534f'
this.iconColor = '#fff'
this.iconClass = 'icon-close'
this.passFalg = false
setTimeout(()=>{
setTimeout(() => {
this.refresh();
}, 1000);
this.$parent.$emit('error',this)
this.$parent.$emit('error', this)
this.tipWords = "验证失败"
setTimeout(()=>{
setTimeout(() => {
this.tipWords = ""
},1000)
}, 1000)
}
})
}
this.status = false;
}
},
refresh: function () {
refresh: function() {
this.showRefresh = true
this.finishText = ''
this.transitionLeft = 'left .3s'
@ -283,7 +299,7 @@
},
//获取left值
getLeft: function (node) {
getLeft: function(node) {
let leftValue = 0;
while (node) {
leftValue += node.offsetLeft;
@ -294,16 +310,16 @@
},
// 请求背景图片和验证图片
getPictrue(){
getPictrue() {
let data = {
captchaType:this.captchaType,
captchaType: this.captchaType,
clientUid: uni.getStorageSync('slider'),
ts: Date.now(), // 现在的时间戳
}
myRequest({
url: '/captcha/get', //仅为示例，并非真实接口地址。
data,
method:"POST",
method: "POST",
}).then((result) => {
let res = result.data
if (res.repCode == "0000") {
@ -313,7 +329,7 @@
this.secretKey = res.repData.secretKey
}
// 判断接口请求次数是否失效
if(res.repCode == '6201') {
if (res.repCode == '6201') {
this.backImgBase = null
this.blockBackImgBase = null
}
@ -329,23 +345,23 @@
}
}
},
mounted() {
},
mounted() {},
}
</script>
<style scoped>
.verifybox{
.verifybox {
position: relative;
box-sizing: border-box;
border-radius: 2px;
border: 1px solid #e4e7eb;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.3);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
left: 50%;
top:50%;
transform: translate(-50%,-50%);
top: 50%;
transform: translate(-50%, -50%);
}
.verifybox-top{
.verifybox-top {
padding: 0 15px;
height: 50px;
line-height: 50px;
@ -355,11 +371,13 @@
border-bottom: 1px solid #e4e7eb;
box-sizing: border-box;
}
.verifybox-bottom{
.verifybox-bottom {
/* padding: 15px; */
box-sizing: border-box;
}
.verifybox-close{
.verifybox-close {
position: absolute;
top: 13px;
right: 9px;
@ -368,44 +386,51 @@
text-align: center;
cursor: pointer;
}
.mask{
.mask {
position: fixed;
top: 0;
left:0;
left: 0;
z-index: 1001;
width: 100%;
height: 100vh;
background: rgba(0,0,0,.3);
background: rgba(0, 0, 0, .3);
/* display: none; */
transition: all .5s;
}
.verify-tips{
.verify-tips {
position: absolute;
left: 0px;
bottom:0px;
bottom: 0px;
width: 100%;
height: 30px;
background-color:rgb(231, 27, 27,.5);
line-height:30px;
background-color: rgb(231, 27, 27, .5);
line-height: 30px;
color: #fff;
}
.suc-bg{
background-color:rgba(92, 184, 92,.5);
.suc-bg {
background-color: rgba(92, 184, 92, .5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
}
.err-bg{
background-color:rgba(217, 83, 79,.5);
.err-bg {
background-color: rgba(217, 83, 79, .5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
}
.tips-enter,.tips-leave-to{
.tips-enter,
.tips-leave-to {
bottom: -30px;
}
.tips-enter-active,.tips-leave-active{
.tips-enter-active,
.tips-leave-active {
transition: bottom .5s;
}
/* ---------------------------- */
/*常规验证码*/
.verify-code {