<template>
|
<div class="loan-info-box">
|
<x-header slot="header" style="width:100%;height:46px;background-color: #ec6758" :title="'证明材料'"
|
:left-options="{backText: '', preventGoBack:true}" @on-click-back="goBackPage"></x-header>
|
<flow class="progressState">
|
<flow-state state="1" title="个人信息" is-done></flow-state>
|
<flow-line is-done></flow-line>
|
<flow-state state="2" title="工作及居住信息" is-done></flow-state>
|
<flow-line is-done></flow-line>
|
<flow-state state="3" title="绑定银行卡" is-done></flow-state>
|
<flow-line is-done></flow-line>
|
<flow-state state="4" title="证明材料" class="currentStep"></flow-state>
|
</flow>
|
<group>
|
<group-title slot="title">
|
<div class="groupTitle">
|
<span>*</span>
|
<label>身份证照片</label>
|
</div>
|
<div style="font-size: 12px;padding-left: 6px;">请拍摄并上传您的身份证原件照片</div>
|
</group-title>
|
</group>
|
<flexbox class="IDcardFlexbox">
|
<flexbox-item>
|
<div class="flex-demo">
|
<img-upload butName="上传人像面" defaultImg="./static/Idcardf.jpg" :currentImg="Idcard.positive"
|
v-on:select-complete="secelted('IDFront', $event)"></img-upload>
|
</div>
|
</flexbox-item>
|
<flexbox-item>
|
<div class="flex-demo">
|
<img-upload butName="上传国徽面" defaultImg="./static/Idcardz.jpg" :currentImg="Idcard.reverse"
|
v-on:select-complete="secelted('IDBack', $event)"></img-upload>
|
</div>
|
</flexbox-item>
|
</flexbox>
|
<!--身份证拍摄要求-->
|
<group class="IDcardsampleGroup">
|
<cell is-link :border-intent="false" :arrow-direction="showIDcardSample ? 'up' : 'down'"
|
@click.native="showIDcardSample = !showIDcardSample">
|
<div slot="title" class="IDcardsampleINfo">身份证照片拍摄要求</div>
|
</cell>
|
<flexbox class="IDcardSampleList animate" v-if="showIDcardSample">
|
<flexbox-item>
|
<span class="cardsampleItem">
|
<img src="../../assets/img/ok.png" alt="">
|
<p>正常拍摄</p>
|
</span>
|
</flexbox-item>
|
<flexbox-item>
|
<span class="cardsampleItem">
|
<img src="../../assets/img/error1.png" alt="">
|
<p>边框缺失</p>
|
</span>
|
</flexbox-item>
|
<flexbox-item>
|
<span class="cardsampleItem">
|
<img src="../../assets/img/error2.png" alt="">
|
<p>照片迷糊</p>
|
</span>
|
</flexbox-item>
|
<flexbox-item>
|
<span class="cardsampleItem">
|
<img src="../../assets/img/error3.png" alt="">
|
<p>闪光强烈</p>
|
</span>
|
</flexbox-item>
|
</flexbox>
|
</group>
|
|
<group>
|
<group-title slot="title">
|
<div class="groupTitle">
|
<span>*</span>
|
<label>手持身份证照片</label>
|
</div>
|
<div class="groupSmallTitle">请保持身份证与头像清晰</div>
|
</group-title>
|
</group>
|
<div class="photoItem">
|
<div class="handIDItem figureBlock">
|
<img src="../../assets/img/handID.jpg" alt="">
|
</div>
|
<div class="handIDItem">
|
<img @click="MaximizeImg(handIDImg)" :src=handIDImg v-if="handIDImg" alt="">
|
<icon type="clear" class="closePhoto " v-if="handIDImg"
|
@click.native="deleteAssignImg(handIDImg,'handID')"></icon>
|
</div>
|
<div class="handIDItem cameraIcon">
|
<div class="cameraIconDiv">
|
<i class="iconfont icon-camerafill"></i>
|
<input class="PhotoChangeInput" type="file" @change="handIDPhotoChange($event)" capture="camera"
|
accept="image/*">
|
</div>
|
</div>
|
</div>
|
<!--工作证明-->
|
<group>
|
<group-title slot="title">
|
<div class="groupTitle">
|
<span>*</span>
|
<label>工作证明</label>
|
</div>
|
<div class="groupSmallTitle">单位盖章文件</div>
|
</group-title>
|
</group>
|
<div class="photoItem">
|
<div class="handIDItems">
|
<scroller lock-y :scrollbar-x=false>
|
<div class="handIDItemsbox">
|
<div v-for="(workItem, index) in workCertImages" class="workPhtotoItem">
|
<img @click="MaximizeImg(workItem)" :src=workItem alt="">
|
<icon type="clear" class="closePhoto" v-if="workItem"
|
@click.native="deleteCurrentImg($event,index)"></icon>
|
</div>
|
</div>
|
</scroller>
|
</div>
|
<div class="workPhtotoLoadBut cameraIcon">
|
<div class="cameraIconDiv">
|
<i class="iconfont icon-camerafill"></i>
|
<input class="PhotoChangeInput" type="file" @change="workPhotoChange($event)" capture="camera"
|
accept="image/*">
|
</div>
|
</div>
|
</div>
|
<!--居住证明-->
|
<group>
|
<group-title slot="title">
|
<div class="groupTitle">
|
<span>*</span>
|
<label>居住证明</label>
|
</div>
|
<div class="groupSmallTitle">电子发票/红旗小票/居委会证明/租房协议/房产证</div>
|
</group-title>
|
</group>
|
<div class="photoItem">
|
<div class="handIDItem">
|
<img @click="MaximizeImg(residenceCertImage)" :src=residenceCertImage v-if="residenceCertImage" alt="">
|
<icon type="clear" class="closePhoto" v-if="residenceCertImage"
|
@click.native="deleteAssignImg(residenceCertImage,'residenceCert')"></icon>
|
</div>
|
|
<div class="handIDItem cameraIcon">
|
<div class="cameraIconDiv" @click="lifePhotoChangeClick($event)">
|
<i class="iconfont icon-camerafill"></i>
|
<input class="PhotoChangeInput" type="file" @change="lifePhotoChange($event)" capture="camera"
|
accept="image/*">
|
</div>
|
</div>
|
</div>
|
<div style="height: 20px"></div>
|
<div style="margin: 0 15px" class="photoDivFooter">
|
<x-button class="photoSubBut" @click.native="photoInfoSubmit">提交</x-button>
|
</div>
|
<div style="height: 20px"></div>
|
<div>
|
<x-dialog v-model="showImageMaximize" class="MaximizeImgdialog" hide-on-blur>
|
<div class="img-box">
|
<img @click="showImageMaximize=false" :src="currentMaximize" style="max-width:100%">
|
</div>
|
</x-dialog>
|
</div>
|
<div>
|
<x-dialog v-model="imageSync" class="MaximizeImgdialog" hide-on-blur>
|
|
</x-dialog>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import upload from '../../components/upload/uploadImg.vue';
|
import EXIF from 'exif-js';
|
import store from '../../store/index';
|
import SystApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
import {
|
Scroller,
|
XHeader,
|
Group,
|
GroupTitle,
|
Cell,
|
XInput,
|
XButton,
|
Flexbox,
|
Flow,
|
FlowState,
|
FlowLine,
|
FlexboxItem,
|
XImg,
|
XDialog,
|
Icon
|
} from 'vux';
|
|
export default {
|
name: 'photoinfo',
|
data() {
|
return {
|
imageSync: false, // 图片同步模态窗显示
|
showImageMaximize: false, // 做大化图片Dialog 对象
|
currentMaximize: '', // 当前最大化图片对象
|
showIDcardSample: false,
|
Idcard: {
|
reverse: '', // 反面国徽面
|
positive: '' // 正面头像面
|
},
|
handIDImg: '', // 手持身份证照
|
residenceCertImage: '', // 居住证明
|
workCertImages: [] // 工作证明
|
};
|
},
|
methods: {
|
goBackPage: function () {
|
// store.commit('updateDirection', {direction: 'out'})
|
this.$router.back();
|
},
|
validateTip(errorMsg) {
|
return this.$vux.toast.show({
|
width: 'auto',
|
type: 'text',
|
text: errorMsg,
|
time: 2000,
|
position: 'middle'
|
});
|
},
|
// 图片最大化模态 显示
|
MaximizeImg: function (imgobj) {
|
this.currentMaximize = imgobj;
|
this.showImageMaximize = true;
|
},
|
// 删除固定图片
|
deleteAssignImg: function (url, type) {
|
// 删除指定图片对象
|
let _this = this;
|
let par = {
|
prodId: this.$route.query.prodId,
|
fileType: type,
|
fileUrl: url
|
};
|
SystApi.deleteImageFile(par).then(
|
function (res) {
|
if (res.errorCode === 0) {
|
if (type === 'residenceCert') {
|
_this.residenceCertImage = null;
|
} else if (type === 'handID') {
|
_this.handIDImg = null;
|
}
|
}
|
},
|
function (error) {
|
statusCodeManage.showTipOfStatusCode(error, _this);
|
}
|
);
|
},
|
photoInfoSubmit: function () {
|
// 提交图片按钮
|
let _this = this;
|
let submitInfo = {
|
prodId: this.$route.query.prodId
|
};
|
SystApi.incomeSubmit(submitInfo).then(
|
response => {
|
if (response.errorCode === 0) {
|
_this.$router.push({
|
path: '/incomeLoan/auditResults',
|
query: {prodId: this.$route.query.prodId}
|
});
|
}
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error);
|
}
|
);
|
},
|
// 手持身份证上传
|
handIDPhotoChange: function (evt) {
|
// 手持身份证图片上传
|
if (this.handIDImg) {
|
this.validateTip('最多上传 1 张');
|
return false;
|
}
|
// loading 显示加载中
|
store.commit('updateLoadingStatus', {isLoading: true});
|
const files = Array.prototype.slice.call(evt.target.files);
|
let that = this;
|
files.forEach(function (file, i) {
|
var orientation;
|
if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
|
// 读取图片的元信息
|
EXIF.getData(file, function () {
|
orientation = EXIF.getTag(this, 'Orientation');
|
});
|
let reader = new FileReader();
|
reader.onload = function () {
|
// 使用exif
|
that.getImgData(this.result, orientation, function (data) {
|
// 这里可以使用校正后的图片data了
|
var img = new Image();
|
img.src = data;
|
// 图片加载完毕之后进行压缩，然后上传
|
if (img.complete) {
|
callback();
|
} else {
|
img.onload = callback;
|
}
|
|
function callback() {
|
let data = that.compress(img);
|
let post = {
|
file: data,
|
extName: 'jpeg',
|
oldFileUrl: that.handIDImg
|
};
|
// that.handIDImg = data;
|
that.uploadImgByUnified('handID', post);
|
// 发送后台请求
|
}
|
});
|
};
|
reader.readAsDataURL(file);
|
});
|
},
|
// 工作照上传
|
workPhotoChange: function (evt) {
|
// 工作证件图片上传
|
if (this.workCertImages.length > 4) {
|
this.validateTip('最多上传 5 张');
|
return false;
|
}
|
const files = Array.prototype.slice.call(evt.target.files);
|
let that = this;
|
files.forEach(function (file, i) {
|
let orientation;
|
if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
|
// 读取图片的元信息
|
EXIF.getData(file, function () {
|
orientation = EXIF.getTag(this, 'Orientation');
|
});
|
let reader = new FileReader();
|
reader.onload = function () {
|
// 使用exif
|
that.getImgData(this.result, orientation, function (data) {
|
// 这里可以使用校正后的图片data了
|
let img = new Image();
|
img.src = data;
|
// 图片加载完毕之后进行压缩，然后上传
|
if (img.complete) {
|
callback();
|
} else {
|
img.onload = callback;
|
}
|
|
function callback() {
|
var data = that.compress(img);
|
let post = {
|
file: data,
|
extName: 'jpeg',
|
oldFileUrl: ''
|
};
|
// that.workCertImages.push(data);
|
that.uploadImgByUnified('workCert', post);
|
// 发送后台请求
|
}
|
});
|
};
|
reader.readAsDataURL(file);
|
});
|
},
|
// 删除当前选择的图片
|
deleteCurrentImg: function (evt, index) {
|
// 删除图片
|
let _this = this;
|
let par = {
|
prodId: this.$route.query.prodId,
|
fileType: 'workCert',
|
fileUrl: _this.workCertImages[index]
|
};
|
SystApi.deleteImageFile(par).then(
|
function (res) {
|
if (res.errorCode === 0) {
|
_this.workCertImages.splice(index, 1);
|
}
|
},
|
function (error) {
|
if (error.response) {
|
}
|
}
|
);
|
},
|
lifePhotoChangeClick: function (evt) {
|
let htmlNode = evt.target.getElementsByTagName('input')[0];
|
if (htmlNode) {
|
htmlNode.click();
|
}
|
// console.log(evt.target.getElementsByTagName("input")[0].click());
|
// this.$refs._testFile.dispatchEvent(new MouseEvent('click'))
|
},
|
// 居住证明
|
lifePhotoChange: function (evt) {
|
// 居住证件图片上传
|
if (this.residenceCertImage) {
|
this.validateTip('最多上传 1 张');
|
return false;
|
}
|
// loading 显示加载中
|
store.commit('updateLoadingStatus', {isLoading: true});
|
const files = Array.prototype.slice.call(evt.target.files);
|
let that = this;
|
files.forEach(function (file, i) {
|
let orientation;
|
if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
|
// 读取图片的元信息
|
EXIF.getData(file, function () {
|
orientation = EXIF.getTag(this, 'Orientation');
|
});
|
let reader = new FileReader();
|
reader.onload = function () {
|
// 使用exif
|
that.getImgData(this.result, orientation, function (data) {
|
// 这里可以使用校正后的图片data了
|
var img = new Image();
|
img.src = data;
|
// 图片加载完毕之后进行压缩，然后上传
|
if (img.complete) {
|
callback();
|
} else {
|
img.onload = callback;
|
}
|
|
function callback() {
|
var data = that.compress(img);
|
let post = {
|
file: data,
|
extName: 'jpeg',
|
oldFileUrl: that.residenceCertImage
|
};
|
// that.residenceCertImage = data;
|
that.uploadImgByUnified('residenceCert', post);
|
// 发送后台请求
|
}
|
});
|
};
|
reader.readAsDataURL(file);
|
});
|
},
|
secelted: function (type, imgobj) {
|
// 跳转到下一步
|
if (type === 'IDFront') {
|
imgobj.oldFileUrl = this.Idcard.positive;
|
} else if (type === 'IDBack') {
|
imgobj.oldFileUrl = this.Idcard.reverse;
|
}
|
this.uploadImgByUnified(type, imgobj);
|
},
|
uploadImgByUnified: function (type, par) {
|
let _this = this;
|
_this.imageSync = true;
|
par.fileType = type;
|
par.extName = 'jpeg';
|
par.file = par.file.split(',')[1];
|
par.prodId = this.$route.query.prodId;
|
SystApi.upLoadImg(par).then(
|
function (res) {
|
_this.imageSync = false;
|
store.commit('updateLoadingStatus', {isLoading: false});
|
if (res.errorCode === 0) {
|
if (type === 'IDFront') {
|
_this.Idcard.positive = res.body;
|
} else if (type === 'IDBack') {
|
_this.Idcard.reverse = res.body;
|
} else if (type === 'handID') {
|
_this.handIDImg = res.body;
|
} else if (type === 'residenceCert') {
|
_this.residenceCertImage = res.body;
|
} else if (type === 'workCert') {
|
_this.workCertImages.push(res.body);
|
}
|
}
|
},
|
function (error) {
|
_this.imageSync = false;
|
store.commit('updateLoadingStatus', {isLoading: false});
|
statusCodeManage.showTipOfStatusCode(error);
|
}
|
);
|
},
|
// 图片旋转处理
|
getImgData: function (img, dir, next) {
|
// @param {string} img 图片的base64
|
// @param {int} dir exif获取的方向信息
|
// @param {function} next 回调方法，返回校正方向后的base64
|
var image = new Image();
|
let canvas = document.createElement('canvas');
|
let ctx = canvas.getContext('2d');
|
image.onload = function () {
|
let resultWidth = 0;
|
let resultHeight = 0;
|
let maxWidthOrHeight = 1024;
|
let drawWidth = this.naturalWidth;
|
let drawHeight = this.naturalHeight;
|
// 以下改变图片大小，控制最大宽度为1024
|
var maxSide = Math.max(drawWidth, drawHeight);
|
if (maxSide > maxWidthOrHeight) {
|
let minSide = Math.min(drawWidth, drawHeight);
|
minSide = minSide / maxSide * maxWidthOrHeight;
|
maxSide = maxWidthOrHeight;
|
if (drawWidth > drawHeight) {
|
resultWidth = maxSide;
|
resultHeight = minSide;
|
} else {
|
resultWidth = minSide;
|
resultHeight = maxSide;
|
}
|
}
|
if (dir === 3) {
|
canvas.width = resultWidth;
|
canvas.height = resultHeight;
|
ctx.translate(resultWidth, resultHeight);
|
ctx.rotate(Math.PI);
|
} else if (dir === 6) {
|
canvas.width = resultHeight;
|
canvas.height = resultWidth;
|
ctx.translate(resultHeight, 0);
|
ctx.rotate(Math.PI / 2);
|
} else if (dir === 8) {
|
canvas.width = resultHeight;
|
canvas.height = resultWidth;
|
ctx.translate(0, resultWidth);
|
ctx.rotate(-Math.PI / 2);
|
} else {
|
canvas.width = resultWidth;
|
canvas.height = resultHeight;
|
}
|
ctx.drawImage(this, 0, 0, resultWidth, resultHeight);
|
// 返回校正图片
|
next(canvas.toDataURL('image/jpeg', 0.8));
|
};
|
image.src = img;
|
},
|
// 压缩图片
|
compress: function (img) {
|
// 用于压缩图片的canvas
|
let canvas = document.createElement('canvas');
|
let ctx = canvas.getContext('2d');
|
// 瓦片canvas
|
var tCanvas = document.createElement('canvas');
|
var tctx = tCanvas.getContext('2d');
|
let width = img.width;
|
let height = img.height;
|
// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
|
var ratio;
|
if ((ratio = width * height / 4000000) > 1) {
|
ratio = Math.sqrt(ratio);
|
width /= ratio;
|
height /= ratio;
|
} else {
|
ratio = 1;
|
}
|
canvas.width = width * 2;
|
canvas.height = height * 2;
|
// 铺底色
|
ctx.fillStyle = '#fff';
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
// 如果图片像素大于100万则使用瓦片绘制
|
var count;
|
if ((count = width * height / 1000000) > 1) {
|
count = ~~(Math.sqrt(count) + 1); // 计算要分成多少块瓦片
|
// 计算每块瓦片的宽和高
|
var nw = ~~(width / count);
|
var nh = ~~(height / count);
|
tCanvas.width = nw;
|
tCanvas.height = nh;
|
for (var i = 0; i < count; i++) {
|
for (var j = 0; j < count; j++) {
|
tctx.drawImage(
|
img,
|
i * nw * ratio,
|
j * nh * ratio,
|
nw * ratio * 2,
|
nh * ratio * 2,
|
0,
|
0,
|
nw,
|
nh
|
);
|
ctx.drawImage(tCanvas, i * nw, j * nh, nw * 2, nh * 2);
|
}
|
}
|
} else {
|
ctx.drawImage(img, 0, 0, width * 2, height * 2);
|
}
|
// 进行最小压缩
|
let ndata = canvas.toDataURL('image/jpeg', 0.8);
|
return ndata;
|
},
|
inItPage: function () {
|
let _this = this;
|
let submitInfo = {
|
prodId: this.$route.query.prodId
|
};
|
SystApi.initMaterialInfo(submitInfo).then(
|
response => {
|
if (response.errorCode === 0) {
|
let _body = response.body;
|
_this.Idcard.positive = _body.idFrontImage;
|
_this.Idcard.reverse = _body.idBackImage;
|
_this.handIDImg = _body.handIDImage;
|
_this.residenceCertImage = _body.residenceCertImage;
|
_this.workCertImages = _body.workCertImages
|
? _body.workCertImages
|
: [];
|
}
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error, _this);
|
}
|
);
|
}
|
},
|
components: {
|
Scroller,
|
XHeader,
|
Group,
|
GroupTitle,
|
Cell,
|
XInput,
|
XButton,
|
Flexbox,
|
FlexboxItem,
|
FlowLine,
|
XImg,
|
Flow,
|
FlowState,
|
XDialog,
|
Icon,
|
'img-upload': upload
|
},
|
activated: function () {
|
store.commit('updateDirection', {direction: 'in'});
|
this.inItPage();
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@import '../../style/mixin.less';
|
|
.loan-info-box {
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
}
|
background-color: @color-background-default;
|
.closePhoto {
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
font-size: 20px;
|
color: #ff4d53;
|
background: transparent;
|
}
|
|
.progressState div p {
|
font-size: @font-size-tiny;
|
}
|
.weui-wepay-flow__state {
|
width: 16px;
|
height: 16px;
|
top: -1px;
|
padding-top: 1px;
|
}
|
.currentStep .weui-wepay-flow__state {
|
width: 16px;
|
height: 16px;
|
padding-top: 1px;
|
border: 1px solid @color-primary;
|
color: @color-primary;
|
border-radius: 50%;
|
background-color: @color-white;
|
}
|
.weui-input {
|
height: 28px;
|
line-height: 28px;
|
}
|
.weui-wepay-flow,
|
.weui-wepay-flow-auto {
|
padding: 10px 40px 30px;
|
background: @color-white;
|
}
|
.weui-wepay-flow__li_done .weui-wepay-flow__state,
|
.weui-wepay-flow__process {
|
background-color: @color-primary;
|
}
|
.IDCardUpLoadBut {
|
font-size: @font-size-small;
|
border-radius: 15px;
|
}
|
}
|
|
.header-space {
|
height: 46px;
|
}
|
|
.left-arrow:before {
|
border-color: @color-white !important;
|
}
|
|
.weui-btn_default {
|
color: @color-white !important;
|
}
|
|
.weui-wepay-flow__title-bottom {
|
font-size: 12px !important;
|
}
|
|
.IDcardbgDiv {
|
height: 80px;
|
}
|
|
.loan-info-box .weui-cell_select .weui-select {
|
padding-right: 2.5rem;
|
direction: rtl;
|
}
|
|
.loan-info-box .weui-input {
|
text-align: right;
|
}
|
|
.loan-info-box .weui-btn_primary {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
}
|
|
.IDcardFlexbox {
|
background-color: @color-white;
|
padding-top: 15px;
|
}
|
|
.upload {
|
width: 66%;
|
margin-left: 17%;
|
}
|
|
.IDcardSampleList {
|
box-sizing: border-box;
|
padding: 0 12px;
|
}
|
|
.IDcardSampleList img {
|
width: 90%;
|
}
|
|
.figureBlock {
|
vertical-align: top;
|
}
|
|
.IDcardsampleGroup .weui-cells {
|
margin-top: 0;
|
padding-top: 6px;
|
}
|
|
.IDcardsampleGroup .weui-cells:before {
|
display: none;
|
}
|
|
.IDcardsampleGroup .weui-cell_access .weui-cell__ft {
|
right: 27%;
|
}
|
|
.IDcardsampleGroup .weui-cell_access .weui-cell__ft:after {
|
border-color: @color-primary;
|
}
|
|
.IDcardsampleGroup .weui-cell_access .weui-cell__ft {
|
right: 20%;
|
margin-top: -3px;
|
}
|
|
.IDcardsampleINfo {
|
text-align: center;
|
font-size: 16px;
|
color: @color-primary;
|
}
|
|
.groupTitle {
|
font-size: 14px;
|
}
|
|
.groupTitle span {
|
color: @color-text-placeholder-red;
|
}
|
|
.groupSmallTitle {
|
font-size: 10px;
|
padding-left: 6px;
|
}
|
|
.cardsampleItem {
|
display: inline-block;
|
text-align: center;
|
font-size: 10px;
|
width: 85%;
|
}
|
|
.handIDItemsbox {
|
height: 90px;
|
width: 450px;
|
position: relative;
|
top: 10px;
|
}
|
|
.handIDItems {
|
display: inline-block;
|
width: 70%;
|
}
|
|
.workPhtotoItem {
|
position: relative;
|
float: left;
|
display: inline-block;
|
margin-left: 10px;
|
width: 80px;
|
height: 80px;
|
}
|
|
.workPhtotoItem:nth-child(1) {
|
margin-left: 0;
|
}
|
|
.workPhtotoItem img {
|
width: 80px;
|
height: 80px;
|
}
|
|
.workPhtotoLoadBut {
|
display: inline-block;
|
width: 80px;
|
padding-top: 10px;
|
text-align: center;
|
}
|
|
.handIDItem {
|
width: 80px;
|
margin-top: 10px;
|
/*height: ;*/
|
}
|
|
.handIDItem img {
|
width: 100%;
|
max-height: 80px;
|
}
|
|
.handIDItem div {
|
text-align: center;
|
}
|
|
.photoItem {
|
height: 100px;
|
padding: 10px 15px;
|
background-color: @color-white;
|
}
|
|
.photoItem .handIDItem {
|
position: relative;
|
display: inline-block;
|
}
|
|
.cameraIcon {
|
float: right;
|
/*padding-top: 10px;*/
|
}
|
|
.cameraIcon .cameraIconDiv {
|
position: relative;
|
height: 80px;
|
width: 80px;
|
line-height: 80px;
|
vertical-align: middle;
|
border: 1px dashed @color-primary;
|
}
|
|
.PhotoChangeInput {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
/*width: 1px;*/
|
/*height: 1px;*/
|
opacity: 0;
|
}
|
|
.cameraIcon .icon-camerafill {
|
font-size: 30px;
|
color: @color-primary;
|
}
|
|
.photoDivFooter .photoSubBut {
|
color: #fff;
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
}
|
|
.MaximizeImgdialog .weui-dialog {
|
background-color: transparent;
|
}
|
</style>
|
