vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）
vue的图片上传
这个页面实现的主要是实现创建球队功能，里面包含队徽，球队类型，球队名称，所属地址
这里除了图片上传还有一个地址的三级联动功能，这里我把这个页面都贴上来了。这个项目中使用vux作为ui库——本文主要是项目的纪录。
本项目除了图片的上传还有选取图片后图片被旋转的问题主要用到 exif-js 插件 （可以使用npm安装 npm install exif-js --save ）具体方法可以查看其文档
**备注：这里是我们调用接口写的共用部分，每个人做项目肯定不一样。**
var _this = this;
var timeStamp = new Date().getTime();
var randomKey = Math.random();
var sign = getSign('1.0.0',timeStamp,randomKey,{},md5);
this.axios({
method: '这里是调用接口的方法', // 比如get 、post
url: `这里存放其对类型接口地址`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded', // 请求类型
'X-Request-AppType': 'public',
'X-Request-Id': 've.shareh5',
'X-Request-AppVersion': '1.0.0',
'X-Request-Time': timeStamp,
'X-Request-Nonce': randomKey,
'X-Request-Sign': sign,
'X-Request-Token':localStorage.token //项目中的token值
}
})
.then(function (res) {
})
图片上传js代码
//获取图片文件
handleFile(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.avator = e.target.files[0];
this.imgPreview(this.avator);
},
/**
* 将以base64的图片url数据转换为Blob
* @param urlData 图片base64数据
* @name convertBase64UrlToBlob
*/
convertBase64UrlToBlob(urlData) {
var bytes=window.atob(urlData.split(',')[1]);
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/*'});
},
imgPreview(file){ //base64 格式
let that = this;
let Orientation;
// //去获取拍照时的信息，解决拍出来的照片旋转问题
Exif.getData(file, function(){
Orientation = Exif.getTag(this, 'Orientation');
});
// 看支持不支持FileReader
if (!file || !window.FileReader) return;
if(/^image/.test(file.type)){
// 创建一个reader
let reader = new FileReader();
// 将上传的图片将转成 base64 格式
reader.readAsDataURL(file);
// 读取成功后的回调
reader.onload = function(e) {
let img = new Image();
img.src = this.result;
//判断图片是否大于100K,是就直接上传，反之压缩图片
if (this.result.length <= (100 * 1024)) {
// that.$vux.toast.text("图片不能超过2M");
that.avatorImg =this.result;
}else {
img.onload = function () {
let data = that.compress(img,Orientation);
that.avatorImg = data;
}
}
}
}
},
rotateImg (img, direction,canvas) {
//最小与最大旋转方向，图片旋转4次后回到原方向
const min_step = 0;
const max_step = 3;
if (img == null)return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
let height = img.height;
let width = img.width;
let step = 2;
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//旋转到原位置，即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//旋转角度以弧度值为参数
let degree = step * 90 * Math.PI / 180;
let ctx = canvas.getContext('2d');
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
},
compress(img,Orientation) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext('2d');
//瓦片canvas
let tCanvas = document.createElement("canvas");
let tctx = tCanvas.getContext("2d");
let initSize = img.src.length;
let width = img.width;
let height = img.height;
//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
let ratio;
if ((ratio = width * height / 4000000) > 1) {
// console.log("大于400万像素")
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
// 铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//如果图片像素大于100万则使用瓦片绘制
let count;
if ((count = width * height / 1000000) > 1) {
// console.log("超过100W像素");
count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
// 计算每块瓦片的宽和高
let nw = ~~(width / count);
let nh = ~~(height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for (let i = 0; i < count; i++) {
for (let j = 0; j < count; j++) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
//修复ios上传图片的时候 被旋转的问题
if(Orientation != "" && Orientation != 1){
switch(Orientation){
case 6://需要顺时针（向左）90度旋转
this.rotateImg(img,'left',canvas);
break;
case 8://需要逆时针（向右）90度旋转
this.rotateImg(img,'right',canvas);
break;
case 3://需要180度旋转
this.rotateImg(img,'right',canvas);//转两次
this.rotateImg(img,'right',canvas);
break;
}
}
//进行最小压缩
let ndata = canvas.toDataURL('image/jpeg', 0.1);
// let ndata = canvas;
// console.log('压缩前：' + initSize);
// console.log('压缩后：' + ndata.length);
// console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
},
//触发图片输入框的点击实践
setAvatar() {
this.$refs.avatarInput.click();
},
页面完整代码
<template>
<div id="team-create">
<div class="app-header">
<span class="iconfont icon-fanhui" @click="clickBack"></span>
<span class="title">新建球队</span>
</div>
<div class="team-create-mainBox">
<!-- 球队上传 -->
<div class="upload">
<div class="team-logo" @click.stop="setAvatar">
<input type="file" accept="image/*" @change="handleFile($event)" class="hiddenInput" ref="avatarInput">
<img :src="avatorImg" alt="" :"defaultImg">
</div>
<p>上传队徽</p>
</div>
<div class="team-create-info">
<div class="teamType sameInputDiv">
<group label-width="4.5em" label-margin-right="2em" label-align="right">
<popup-picker title="球队类型" placeholder="选定后不可更改" :show-name="true" :data="list" v-model="sportsTypeId" value-text-align="left"></popup-picker>
</group>
<i class="iconfont icon-xiayibu"></i>
</div>
<div class="teamName inputdiv sameInputDiv">
<label>球队名称</label>
<input type="text" placeholder="名称长度2-20个汉字" v-model="teamName" @blur="teamNameBlur" @focus="teamNameFocus">
<span class="iconfont icon-shanchuwenben" v-if="isShowClear" @click="clearInputText"></span>
</div>
<div class="addressSelect inputdiv sameInputDiv" @click="choseAdd">
<label>所属地区</label>
<div class="addressSelect-input">
<input disabled="disabled" type="text" placeholder="请选择球队所属地区" v-model="teamAddress">
<em></em>
</div>
<i class="iconfont icon-xiayibu"></i>
</div>
</div>
</div>
<p class="team-create-point"><i class="iconfont icon-tishi"></i>球队创建人可管理球队</p>
<button class="team-create-btn" @click="addTeam">创建球队</button>
<!-- 地址三级联动选项 start-->
<section class="address" :class="{toggHeight:istoggHeight}">
<section class="title">
<div class="cancle" @click="cancleAddress">取消</div>
<div class="determine" @click="determine()" v-if="isChooseAddressAll">确定</div>
</section>
<div class="address-box">
<ul class="proJuli">
<li class="addList" v-for="(item,index) in provinces" @click="chooseProvience(item, 1)" :key="index" :class="{active : selected1 === item.id}"><span>{{item.name}}</span></li>
</ul>
<ul class="citJuli">
<li class="addList" v-for="(item,index) in showCityList" @click="chooseProvience(item, 2)" :key="index" :class="{active : selected2 === item.id}"><span>{{item.name}}</span></li>
</ul>
<ul class="disJuli">
<li class="addList" v-for="(item,index) in showDistrictList" @click="chooseQu(item)" :key="index" :class="{active : selected3 === item.id}"><span>{{item.name}}</span></li>
</ul>
</div>
</section>
<!-- 地址三级联动选项 end-->
<div class="layout" :class="{layoutBg:islayout}" @click="closeAdd()"></div>
<loading :show="isShowLoading" text=""></loading>
</div>
</template>
<script>
import { Group, XInput, PopupPicker ,Toast , Loading } from 'vux'
import qs from 'qs'
import md5 from 'md5-node' // 这个是为了使用md5加密引入的
import Exif from 'exif-js' //在移动端调用拍照功能时，会发生图片旋转，为了解决这个问题引入了exif去判断拍照时的信息再去处理图片 可以直接通过npm 安装这个插件
export default{
components: {
Group,
XInput,
PopupPicker,
Toast,
Loading
},
data () {
return {
teamAddress : '', // 球队地址
sportsTypeId: [], //球队类型数组
list: [],
avator: '', // 保存上传队徽的图片文件
defaultImg: 'this.src="' + require('../../assets/img/uploadImg.jpg') + '"',
avatorImg: '', //队徽图片
teamName: '', // 球队名称
createType: null, //进入创建球队的页面 1.选择参赛球队 2.我的球队
showAddress: false,
isShowClear: false, // 是否显示清除按钮
islayout: false,
istoggHeight: false,
provinces: [],
showCityList: [],
showDistrictList: [],
// 点击选中省市区
selected1: null,
selected2: null,
selected3: null,
// 点击省市区高亮名
curProName: '',
curCityName: '',
curDistrictName: '',
chooseProName: '',
chooseCityName: '',
chooseDistrictName: '',
isChooseAddressAll: false, //地区选择确定按钮的显示,省市区全部选择后才会显示
isShowLoading: false,
}
},
created() {
this.chooseInit();
var _this = this;
var timeStamp = new Date().getTime();
var randomKey = Math.random();
var sign = getSign('1.0.0',timeStamp,randomKey,{},md5);
// 球队类型接口
this.axios({
method: 'GET',
url: `这里存放其对类型接口地址`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Request-AppType': 'public',
'X-Request-Id': 've.shareh5',
'X-Request-AppVersion': '1.0.0',
'X-Request-Time': timeStamp,
'X-Request-Nonce': randomKey,
'X-Request-Sign': sign,
'X-Request-Token':localStorage.token
}
})
.then(function (res) {
let sportsType = [];
let data = res.data.data;
data.map(item => {
const newObj={
name: String(item.comment),
value: String(item.val)
}
sportsType.push(newObj);
})
let newArr = [sportsType]
_this.list = newArr;
})
},
methods:{
// 点击back按钮
clickBack(){
this.$router.go(-1)
},
chooseInit(){
// 获取三级城市联动数据
// 通过省份接口获取省份
var _this = this;
var timeStamp = new Date().getTime();
var randomKey = Math.random();
var sign = getSign('1.0.0',timeStamp,randomKey,{},md5);
this.axios({
method: 'GET',
url: `通过省份接口获取省份`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Request-AppType': 'public',
'X-Request-Id': 've.shareh5',
'X-Request-AppVersion': '1.0.0',
'X-Request-Time': timeStamp,
'X-Request-Nonce': randomKey,
'X-Request-Sign': sign,
'X-Request-Token':localStorage.token
}
})
.then(function (res) {
_this.provinces = res.data.data;
})
},
choseAdd: function () { // 选择地址弹层，打开弹层
this.islayout = true
this.istoggHeight = true
},
closeAdd: function () { // 关闭弹层
this.istoggHeight = false
this.islayout = false
},
//球队输入框失去焦点事件
teamNameBlur() {
this.isShowClear = false
},
//球队输入框获取焦点事件
teamNameFocus() {
this.isShowClear = true;
},
// 清除input内容
clearInputText () {
this.teamName = ''
if (this.teamName !== '') {
this.isShowClear = true
} else {
this.isShowClear = false
}
},
//获取图片文件
handleFile(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.avator = e.target.files[0];
this.imgPreview(this.avator);
},
/**
* 将以base64的图片url数据转换为Blob
* @param urlData 图片base64数据
* @name convertBase64UrlToBlob
*/
convertBase64UrlToBlob(urlData) {
var bytes=window.atob(urlData.split(',')[1]);
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/*'});
},
imgPreview(file){
let that = this;
let Orientation;
// //去获取拍照时的信息，解决拍出来的照片旋转问题
// console.log(file)
Exif.getData(file, function(){
Orientation = Exif.getTag(this, 'Orientation');
});
// 看支持不支持FileReader
if (!file || !window.FileReader) return;
if(/^image/.test(file.type)){
let reader = new FileReader();
reader.readAsDataURL(file);
// console.log(reader)
reader.onload = function(e) {
// console.log(e);
let img = new Image();
img.src = this.result;
//图片不能超过2M
// console.log("resultLen:"+this.result.length);
if (this.result.length <= (100 * 1024)) {
// that.$vux.toast.text("图片不能超过2M");
// return false;
that.avatorImg =this.result;
}else {
img.onload = function () {
let data = that.compress(img,Orientation);
that.avatorImg = data;
}
}
}
}
},
rotateImg (img, direction,canvas) {
//最小与最大旋转方向，图片旋转4次后回到原方向
const min_step = 0;
const max_step = 3;
if (img == null)return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
let height = img.height;
let width = img.width;
let step = 2;
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//旋转到原位置，即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//旋转角度以弧度值为参数
let degree = step * 90 * Math.PI / 180;
let ctx = canvas.getContext('2d');
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
},
//压缩图片
compress(img,Orientation) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext('2d');
//瓦片canvas
let tCanvas = document.createElement("canvas");
let tctx = tCanvas.getContext("2d");
let initSize = img.src.length;
let width = img.width;
let height = img.height;
//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
let ratio;
if ((ratio = width * height / 4000000) > 1) {
// console.log("大于400万像素")
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
// 铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//如果图片像素大于100万则使用瓦片绘制
let count;
if ((count = width * height / 1000000) > 1) {
// console.log("超过100W像素");
count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
// 计算每块瓦片的宽和高
let nw = ~~(width / count);
let nh = ~~(height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for (let i = 0; i < count; i++) {
for (let j = 0; j < count; j++) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
//修复ios上传图片的时候 被旋转的问题
if(Orientation != "" && Orientation != 1){
switch(Orientation){
case 6://需要顺时针（向左）90度旋转
this.rotateImg(img,'left',canvas);
break;
case 8://需要逆时针（向右）90度旋转
this.rotateImg(img,'right',canvas);
break;
case 3://需要180度旋转
this.rotateImg(img,'right',canvas);//转两次
this.rotateImg(img,'right',canvas);
break;
}
}
//进行最小压缩
let ndata = canvas.toDataURL('image/jpeg', 0.1);
// let ndata = canvas;
// console.log('压缩前：' + initSize);
// console.log('压缩后：' + ndata.length);
// console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
},
//触发图片输入框的点击
setAvatar() {
this.$refs.avatarInput.click();
},
// 获取省份函数，通过点击省份得到市，然后通过点击市获取县
chooseProvience(item,type) {
var _this = this;
if(type === 1){
if(item.id === _this.selected1){ //点击过后，再去点击已经点击过的省或者县达到拦截请求
return false;
}
_this.selected1 = item.id;
}else{
if(item.id === _this.selected2){
return false;
}
_this.selected2 = item.id
}
// _this.selected1 = type === 1 ? item.id;
// 获取市县
var timeStamp = new Date().getTime();
var randomKey = Math.random();
var sign = getSign('1.0.0',timeStamp,randomKey,{pid:item.id},md5);
_this.axios({
method: 'get',
url: `获取市和区的接口`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Request-AppType': 'public',
'X-Request-Id': 've.shareh5',
'X-Request-AppVersion': '1.0.0',
'X-Request-Time': timeStamp,
'X-Request-Nonce': randomKey,
'X-Request-Sign': sign,
'X-Request-Token':localStorage.token
},
params:{
pid:item.id
}
})
.then(function (res) {
if (type === 1) {
// console.log(res.data)
// 获取当前省 下的所有市
_this.showCityList = '';
_this.showDistrictList = '';
_this.twoac = true;
_this.twoshow = true;
_this.selected2 = '';
_this.selected3 = '';
_this.showCityList = res.data.data;
_this.isChooseAddressAll = false;
// 获取选中的省
_this.chooseProName = item.name;
// console.log(_this.curProName);
} else if (type === 2) {
// 当前市下的所有区
_this.showDistrictList = '';
_this.selected3 = '';
_this.threeshow = true;
_this.threeac = true;
_this.showDistrictList = res.data.data;
_this.isChooseAddressAll = false;
// 获取选中的市
_this.chooseCityName = item.name
}
// console.log(res.data);
})
},
// 获取所选区
chooseQu(item){
this.selected3 = item.id
this.chooseDistrictName = item.name
this.isChooseAddressAll =true;
},
// 地址弹窗确定按钮
determine() {
this.curProName = this.chooseProName ;
this.curCityName = this.chooseCityName;
this.curDistrictName = this.chooseDistrictName;
// this.teamAddress = this.curProName +this. curCityName + this.curDistrictName;
this.teamAddress = this. curCityName + this.curDistrictName;
this.istoggHeight = false;
this.islayout = false;
this.isChooseAddressAll =false;
},
// 地址取消确定按钮
cancleAddress() {
this.istoggHeight = false;
this.islayout = false;
},
// 验证球队类型
validateTeamType () {
if (this.sportsTypeId.length <= 0) {
this.$vux.toast.text('球队类型不能为空');
return false;
}else{
return true;
}
},
// 验证球队类型
validateLogo () {
// console.log(this.sportsTypeId.length);
if (this.avatorImg === '') {
this.$vux.toast.text('请上传队徽');
return false;
}else{
return true;
}
},
// 验证名称，只能输入2-20个字
validateTeamName () {
if (this.teamName === '') {
this.$vux.toast.text('球队名称不能为空');
return false
} else {
// 测试修改后
let flag = /^[\u4e00-\u9fa5\w-]{2,20}$/.test(this.teamName);
if (!flag) {
this.$vux.toast.text('请输入2-20个字的球队名称');
return false;
}else{
return true;
}
}
},
// 验证地址
validateTeamAddress () {
if (this.teamAddress === '') {
this.$vux.toast.text('请选择球队所属地区');
return false
} else {
return true;
}
},
// 创建球队按钮
addTeam() {
var _this = this;
if(_this.validateLogo() && _this.validateTeamType() && _this.validateTeamName() && _this.validateTeamAddress() ){
_this.isShowLoading = true;
let param = new FormData(); //创建form对象
// 为form添加参数
param.append('logo',_this.convertBase64UrlToBlob(_this.avatorImg));
param.append('name',_this.teamName);
param.append('province',_this.curProName);
param.append('sportType',_this.sportsTypeId[0]);
param.append('city',_this.curCityName);
param.append('district',_this.curDistrictName);
var timeStamp = new Date().getTime();
var randomKey = Math.random();
var sign = getSign('1.0.0',timeStamp,randomKey,{},md5);
// 创建球队接口
_this.axios({
method: 'post',
url: `创建球队接口`, // 一般的也是上传接口
data: param,
headers: {
'Content-Type': "multipart/form-data",
'X-Request-AppType': 'public',
'X-Request-Id': 've.shareh5',
'X-Request-AppVersion': '1.0.0',
'X-Request-Time': timeStamp,
'X-Request-Nonce': randomKey,
'X-Request-Sign': sign,
'X-Request-Token':localStorage.token
}
})
.then(function (res) {
if(res.data.status == 1){
_this.isShowLoading = false;
_this.$vux.toast.text("创建球队成功");
}else{
_this.$vux.toast.text("创建球队成功");
_this.$router.go(-1)
}
}else{
_this.isShowLoading = false;
_this.$vux.toast.text(res.data.tip);
}
})
}
}
}
}
</script>
<style lang="scss">
#team-create{
background: #edf1f6;
.app-header{
.icon-fanhui{
left: 0;
padding: 0 0.12rem;
}
.icon-quxiao{
left: 0;
padding: 0 0.12rem;
}
}
.team-create-mainBox{
position: relative;
background: #fff;
.upload{
padding-top: 0.36rem;
height: 1.75rem;
box-sizing: border-box;
.team-logo{
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
margin: 0 auto;
input{
display: none;
}
img{
display: block;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
}
// .icon-tianjiatouxiang{
// width: 0.75rem;
// height: 0.75rem;
// display: block;
// font-size: 0.75rem;
// color: #d3d3d3;
// border-radius: 50%;
// }
}
p{
margin-top: 0.1rem;
font-size: 0.16rem;
color: #011013;
text-align: center;
}
}
.team-create-info{
.sameInputDiv{
border-top: 1px solid #edf1f6;
}
.inputdiv{
padding: 0 15px;
height: 0.5rem;
line-height: 0.5rem;
position: relative;
display: flex;
label{
display: block;
width: 4.5em;
text-align: left;
margin-right: 2em;
float: left;
font-size: 0.14rem;
color: #333333;
}
input{
flex: 1;
border: none;
outline: none;
line-height: 0.2rem;
font-size: 0.14rem;
color: #333333;
background: none;
opacity: 1;
-webkit-text-fill-color:#333;
-webkit-opacity:1;
opacity: 1;
}
input::-webkit-input-placeholder{
font-size: 0.14rem;
color: #d3d3d3 !important;
-webkit-text-fill-color:#d3d3d3;
}
input:-ms-input-placeholder{
font-size: 0.14rem;
color: #d3d3d3 !important;
-webkit-text-fill-color:#d3d3d3;
}
input::-moz-placeholder{
font-size: 0.14rem;
color: #d3d3d3 !important;
-webkit-text-fill-color:#d3d3d3;
}
&.teamName{
span{
position: absolute;
right: 15px;
display: block;
line-height: 0.5rem;
top: 0;
color: #999999;
font-size: 0.1rem;
}
}
&.addressSelect{
.addressSelect-input{
flex: 1;
position: relative;
input{
width: 100%;
}
em{
display: block;
height: 0.5rem;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
}
}
}
.inputdiv::after{
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
color: #D9D9D9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.teamType{
position: relative;
.vux-cell-value{
color: #333 !important;
}
.weui-cells:before{
border-top: none;
}
.weui-cells::after{
border-bottom: none !important;
}
}
i{
position: absolute;
right: 15px;
display: block;
line-height: 0.5rem;
top: 0;
color: #999999;
font-size: 0.1rem;
}
.weui-cells{
margin-top: 0;
.weui-cell{
padding: 0 15px !important;
line-height: 0.5rem !important;
line-height: 0.5rem !important;
}
.weui-label{
text-align: left !important;
font-size: 0.14rem;
color: #333333;
}
.vux-popup-picker-placeholder{
font-size: 0.14rem;
color: #d3d3d3;
}
.vux-popup-picker-value{
font-size: 0.14rem;
color: #d3d3d3;
}
.weui-input{
font-size: 0.14rem;
color: #d3d3d3;
}
.weui-input::-webkit-input-placeholder{
color: #d3d3d3;
}
.weui-cell{
padding: 13px 15px;
}
.weui-cell::before{
left: 0;
}
.vux-cell-box::before{
left: 0;
}
.weui-cell__ft{
display: none;
}
}
}
}
.team-create-point{
margin-top: 0.11rem;
padding: 0 0.12rem 0 0.34rem;
font-size: 0.12rem;
color: #666666;
line-height: 0.18rem;
position: relative;
.icon-tishi{
font-size: 0.14rem;
position: absolute;
left: 0.12rem;
color: #999999;
}
}
.team-create-btn{
display: block;
width: 2rem;
height: 0.4rem;
line-height: 0.4rem;
text-align: center;
background: #0cb0eb;
border:none;
border-radius: 0.4rem;
font-size: 0.16rem;
color: #ffffff;
margin: 1rem auto 0;
padding: 0;
bottom: 0.5rem;
outline: none;
}
.address{
position:absolute;
bottom:0;
left:0;
z-index:121;
background:#fff;
width:100%;
height: 0;
overflow: hidden;
transition: height .5s;
&.toggHeight{
height: 3.7rem;
}
.title{
overflow: hidden;
height: .52rem;
border-bottom: .01rem solid #d3d3d3;
.area{
float: left;
display:inline-block;
font-size:0.16rem;
height: .4rem;
line-height:.4rem;
margin-left:0.3rem;
color:#262e31;
margin-top: .1rem;
max-width: calc(100% - 80%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cancle{
float: left;
height: .52rem;
line-height: .52rem;
color: #333333;
margin-left: .3rem;
font-size: .18rem;
}
.determine{
float: right;
height: .52rem;
line-height: .52rem;
margin-right: .3rem;
color: #333;
font-size: .18rem;
}
}
.address-box{
display: flex;
flex-direction: row;
height: calc(100% - .52rem);
}
.addList{
margin-left: .22rem;
font-size:0.16rem;
line-height:0.4rem;
color:#262e31;
}
ul{
flex: 1;
// width: 33.3333%;
height: 100%;
overflow:auto;
// float: left;
li{
padding: 0 0.06rem;
&.active{
color:#0cb0eb;
}
}
}
}
.layout{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:120;
opacity: 0;
transition: all .5s;
background:rgb(53, 58, 60);
visibility: hidden;
&.layoutBg{
opacity: .7;
visibility: visible;
}
}
}
.vux-popup-header-right{
color: #0cb0eb !important;
}
</style>