【小程序开发】基本信息页面源码（头像、二维码上传，省市县地区选择，公司选择，名字输入等）
wxml：
<!--上传头像 -->
<view class="section">
<view class='left'>头像</view>
<view class='middle'>
<!--图片展示 -->
<view bindtap='upEwm' data-which='1'>
<image style='width:80rpx;height:80rpx;background-color:red;border-radius:50%' src='{{headImg}}'></image>
</view>
</view>
<view class='right'>></view>
</view>
<!--姓名 -->
<view class="section">
<view class='left'>姓名</view>
<view class='middle'>
<!--input-->
<input type='text' name="name" placeholder='请输入姓名'></input>
</view>
<view class='right'>></view>
</view>
<!--公司 -->
<view class="section" bindtap='selectCompany' >
<view class='left'>公司</view>
<view class='middle'>
<!--input-->
{{companySelected}}
</view>
<view class='right'>></view>
</view>
<!--职务 -->
<view class="section">
<view class='left'>职务</view>
<view class='middle'>
<!--input-->
<input type='text' name="name" placeholder='请输入职位'></input>
</view>
<view class='right'>></view>
</view>
<!--上传地区 -->
<view class="section">
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
<view class='left'>所在地区：</view>
<view class='middle'> {{region[0]}}-{{region[1]}}-{{region[2]}}</view>
<view class='right'>></view>
</view>
</picker>
</view>
<!--上传二维码 -->
<view class="section">
<view class='left'>个人二维码</view>
<view class='middle'>
<!--图片展示 -->
<view bindtap='upEwm' data-which='2'>
<image style='width:80rpx;height:80rpx;background-color:red' src='{{ewmImg}}'></image>
</view>
</view>
<view class='right'>></view>
</view>
<!--裁剪图片浮层-->
<view class='fixed-upimg' wx:if="{{imageFixed}}">
<view class="wx-content-info">
<!-- <view class="wx-content-info" wx:if="{{imageSrc}}"> -->
<view wx:if="{{isShowImg}}" class="wx-corpper" style="width:{{cropperInitW}}rpx;height:{{cropperInitH}}rpx;background:#000">
<view bindtap='upLoad' class="wx-corpper-content" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;left:{{cropperL}}rpx;top:{{cropperT}}rpx">
<image src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx"></image>
<view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing" style="width:{{cutW}}rpx;height:{{cutH}}rpx;left:{{cutL}}rpx;top:{{cutT}}rpx">
<view class="wx-cropper-view-box">
<!-- <view class="wx-cropper-viewer">
<image src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;left:{{cropperL - cutL}}rpx;top:{{cropperT - cutT}}rpx"></image>
</view> -->
<view class="wx-cropper-dashed-h"></view>
<view class="wx-cropper-dashed-v"></view>
<view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-tr" data-drag="topTight"></view>
<view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view>
<view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-lt" data-drag="leftTop"></view>
</view>
</view>
</view>
<!-- <view class="wx-cropper-drag-box"></view> -->
</view>
<canvas canvas-id="myCanvas" style="position:absolute;border: 1px solid red; width:{{imageW}}rpx;height:{{imageH}}rpx;top:-9999px;left:-9999px;"></canvas>
<button type="primary" bindtap="getImageInfo" style="position:fixed;bottom:120rpx;width:90%;left:50%;transform:translate3d(-50%,0,0)"> 确认提交 </button>
</view>
</view>
<!--选择公司 -->
<!--选择公司弹窗-->
<view class="company_fixed_list" wx:if="{{dialogComapny}}">
<view class="company_new_fixed">
<view class="company_new_area">
<view class="line_x"></view>
<view class="company_lists" id="commend_list">
<!-- <li class="selected_css" id="selected_comp"></li> -->
<text class="comp {{beforeSelect == 1?'selected_css':''}}">{{companySelected}}</text>
<text data-num="{{index}}" data-company="{{item}}" class="comp {{_num == index?'selected_css':''}}" wx:for="{{companyList}}" bindtap="menuClick" >{{item}}</text>
</view>
<view class="title_line_x">A-F</view>
<view class="company_lists" id="company_af">
<text class="comp">中国人保</text>
<text class="comp">中国人保</text>
<text class="comp">中国人保</text>
<text class="comp">中国人保</text>
</view>
<view class="title_line_x">G-L</view>
<view class="company_lists" id="company_gl">
</view>
<view class="title_line_x">M-R</view>
<view class="company_lists" id="company_mr">
</view>
<view class="title_line_x">S-Z</view>
<view class="company_lists" id="company_sz">
<text class="comp">中国人保</text>
<text class="comp">中国人保</text>
<text class="comp">中国人保</text>
<text class="comp">中国人保</text>
<text class="comp">中国人保</text>
<text class="comp">中国人保</text>
</view>
<view class="writer_input" bindtap='moreCompany' >找不到我的公司，点这里>></view>
</view>
</view>
</view>
<!---->
<!--手动输入公司弹窗 -->
<view class="write_dialog" wx:if="{{writeComapny}}" >
<view class="dialog-wrap">
<view class="dialog-mask"></view>
<view class="dialog-ct">
<view class="dialog-hd">手动输入</view>
<view class="dialog-bd">
<input type="text" bindinput="bindcomInput" name="text-company" maxlength="10" placeholder="请输入公司名字，10个字内"></input>
</view>
<view class="dialog-ft clearfix">
<button type="submit" class="phone-submit-btn" bindtap='subCompany' >确定</button>
</view>
<view class="dialog-close-btn" bindtap='close'>
<text class="i-close"></text>
</view>
</view>
</view>
</view>
<!---->
js：
// Page({
// data: {
// // index: 0,
// // multiIndex: [0, 0, 0],
// region: ['广东省', '广州市', '海珠区'],
// // customItem: '全部'
// },
// bindPickerChange: function (e) {
// console.log('picker发送选择改变，携带值为', e.detail.value)
// this.setData({
// index: e.detail.value
// })
// },
// bindMultiPickerChange: function (e) {
// console.log('picker发送选择改变，携带值为', e.detail.value)
// this.setData({
// multiIndex: e.detail.value
// })
// },
// bindRegionChange: function (e) {
// console.log('picker发送选择改变，携带值为', e.detail.value)
// this.setData({
// region: e.detail.value
// })
// }
// })
// pages/wx-cropper/index.js
// 手机的宽度
var windowWRPX = 750
// 拖动时候的 pageX
var pageX = 0
// 拖动时候的 pageY
var pageY = 0
var pixelRatio = wx.getSystemInfoSync().pixelRatio
// 调整大小时候的 pageX
var sizeConfPageX = 0
// 调整大小时候的 pageY
var sizeConfPageY = 0
var initDragCutW = 0
var initDragCutL = 0
var initDragCutH = 0
var initDragCutT = 0
// 移动时 手势位移与 实际元素位移的比
var dragScaleP = 2
Page({
/**
* 页面的初始数据
*/
data: {
imageNum: '', //上传的图片id
headImg: '', //头像上传
ewmImg: '', //二维码上传
imageFixed: false, //裁剪浮层
// imageSrc: 'http://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/images/testimg2.jpeg',
imageSrc: '', //要裁剪的图片
returnImage: '',
isShowImg: false,
// 初始化的宽高
cropperInitW: windowWRPX,
cropperInitH: windowWRPX,
// 动态的宽高
cropperW: windowWRPX,
cropperH: windowWRPX,
// 动态的left top值
cropperL: 0,
cropperT: 0,
// 图片缩放值
scaleP: 0,
imageW: 0,
imageH: 0,
// 裁剪框 宽高
cutW: 400,
cutH: 400,
cutL: 0,
cutT: 0,
region: ['广东省', '广州市', '海珠区'],
writeComapny:false,
dialogComapny:false,
companyList:['中国平安','太平洋公司','富的生命人寿保险'],
_num:'-1',
companySelected:'', //最终选中的公司
beforeSelect:1, //之前选中的0为未选中1为选中
},
/**
* 生命周期函数--监听页面加载
*/
onReady: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onLoad: function () {
var _this = this
// wx.showLoading({
// title: '图片加载中...',
// })
wx.getImageInfo({
src: _this.data.imageSrc,
success: function success(res) {
var innerAspectRadio = res.width / res.height;
console.log(innerAspectRadio)
// 根据图片的宽高显示不同的效果 保证图片可以正常显示
if (innerAspectRadio >= 1) {
_this.setData({
cropperW: windowWRPX,
cropperH: windowWRPX / innerAspectRadio,
// 初始化left right
cropperL: Math.ceil((windowWRPX - windowWRPX) / 2),
cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2),
// 裁剪框 宽高
// cutW: windowWRPX - 200,
// cutH: windowWRPX / innerAspectRadio - 200,
cutL: Math.ceil((windowWRPX - windowWRPX + 340) / 2),
cutT: Math.ceil((windowWRPX / innerAspectRadio - (windowWRPX / innerAspectRadio - 20)) / 2),
// 图片缩放值
scaleP: res.width * pixelRatio / windowWRPX,
// 图片原始宽度 rpx
imageW: res.width * pixelRatio,
imageH: res.height * pixelRatio
})
} else {
_this.setData({
cropperW: windowWRPX * innerAspectRadio,
cropperH: windowWRPX,
// 初始化left right
cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2),
cropperT: Math.ceil((windowWRPX - windowWRPX) / 2),
// 裁剪框的宽高
// cutW: windowWRPX * innerAspectRadio - 66,
// cutH: 400,
cutL: Math.ceil((windowWRPX * innerAspectRadio - (windowWRPX * innerAspectRadio - 20)) / 2),
cutT: Math.ceil((windowWRPX - 340) / 2),
// 图片缩放值
scaleP: res.width * pixelRatio / windowWRPX,
// 图片原始宽度 rpx
imageW: res.width * pixelRatio,
imageH: res.height * pixelRatio
})
}
_this.setData({
isShowImg: true
})
wx.hideLoading()
}
})
},
// 拖动时候触发的touchStart事件
contentStartMove(e) {
pageX = e.touches[0].pageX
pageY = e.touches[0].pageY
},
// 拖动时候触发的touchMove事件
contentMoveing(e) {
var _this = this
// _this.data.cutL + (e.touches[0].pageX - pageX)
// console.log(e.touches[0].pageX)
// console.log(e.touches[0].pageX - pageX)
var dragLengthX = (pageX - e.touches[0].pageX) * dragScaleP
var dragLengthY = (pageY - e.touches[0].pageY) * dragScaleP
var minX = Math.max(_this.data.cutL - (dragLengthX), 0)
var minY = Math.max(_this.data.cutT - (dragLengthY), 0)
var maxX = _this.data.cropperW - _this.data.cutW
var maxY = _this.data.cropperH - _this.data.cutH
this.setData({
cutL: Math.min(maxX, minX),
cutT: Math.min(maxY, minY),
})
console.log(`${maxX} ----- ${minX}`)
pageX = e.touches[0].pageX
pageY = e.touches[0].pageY
},
// 获取图片
getImageInfo() {
var _this = this
console.log('shengcheng:' + _this.data.imageSrc)
wx.showLoading({
title: '图片生成中...',
})
// wx.downloadFile({
// url:_this.data.imageSrc, //仅为示例，并非真实的资源
// success: function (res) {
// 将图片写入画布
const ctx = wx.createCanvasContext('myCanvas')
// ctx.drawImage(res.tempFilePath)
ctx.drawImage(_this.data.imageSrc)
ctx.draw(true, () => {
// 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题
var canvasW = (_this.data.cutW / _this.data.cropperW) * (_this.data.imageW / pixelRatio)
var canvasH = (_this.data.cutH / _this.data.cropperH) * (_this.data.imageH / pixelRatio)
var canvasL = (_this.data.cutL / _this.data.cropperW) * (_this.data.imageW / pixelRatio)
var canvasT = (_this.data.cutT / _this.data.cropperH) * (_this.data.imageH / pixelRatio)
console.log(`canvasW:${canvasW} --- canvasH: ${canvasH} --- canvasL: ${canvasL} --- canvasT: ${canvasT} -------- _this.data.imageW: ${_this.data.imageW} ------- _this.data.imageH: ${_this.data.imageH} ---- pixelRatio ${pixelRatio}`)
wx.canvasToTempFilePath({
x: canvasL,
y: canvasT,
width: canvasW,
height: canvasH,
destWidth: canvasW,
destHeight: canvasH,
canvasId: 'myCanvas',
success: function (res) {
wx.hideLoading()
// 成功获得地址的地方
console.log('end:' + res.tempFilePath)
// 判断时上传头像还是二维码
_this.setData({
imageFixed: false,
})
if (_this.data.imageNum == '1') {
_this.setData({
headImg: res.tempFilePath
})
} else if (_this.data.imageNum == '2') {
_this.setData({
ewmImg: res.tempFilePath
})
}
}
})
})
// }
// })
},
// 设置大小的时候触发的touchStart事件
dragStart(e) {
var _this = this
sizeConfPageX = e.touches[0].pageX
sizeConfPageY = e.touches[0].pageY
initDragCutW = _this.data.cutW
initDragCutL = _this.data.cutL
initDragCutT = _this.data.cutT
initDragCutH = _this.data.cutH
},
// 设置大小的时候触发的touchMove事件
dragMove(e) {
var _this = this
var dragType = e.target.dataset.drag
switch (dragType) {
case 'right':
var dragLength = (sizeConfPageX - e.touches[0].pageX) * dragScaleP
if (initDragCutW >= dragLength) {
// 如果 移动小于0 说明是在往下啦 放大裁剪的高度 这样一来 图片的高度 最大 等于 图片的top值加 当前图片的高度 否则就说明超出界限
if (dragLength < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) {
this.setData({
cutW: initDragCutW - dragLength
})
}
// 如果是移动 大于0 说明在缩小 只需要缩小的距离小于原本裁剪的高度就ok
if (dragLength > 0) {
this.setData({
cutW: initDragCutW - dragLength
})
}
else {
return
}
} else {
return
}
break;
case 'left':
var dragLength = (dragLength = sizeConfPageX - e.touches[0].pageX) * dragScaleP
console.log(dragLength)
if (initDragCutW >= dragLength && initDragCutL > dragLength) {
if (dragLength < 0 && Math.abs(dragLength) >= initDragCutW) return
this.setData({
cutL: initDragCutL - dragLength,
cutW: initDragCutW + dragLength
})
} else {
return;
}
break;
case 'top':
var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
if (initDragCutH >= dragLength && initDragCutT > dragLength) {
if (dragLength < 0 && Math.abs(dragLength) >= initDragCutH) return
this.setData({
cutT: initDragCutT - dragLength,
cutH: initDragCutH + dragLength
})
} else {
return;
}
break;
case 'bottom':
var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
// console.log(_this.data.cropperH > _this.data.cutT + _this.data.cutH)
console.log(dragLength)
console.log(initDragCutH >= dragLength)
console.log(_this.data.cropperH > initDragCutT + _this.data.cutH)
// 必须是 dragLength 向上缩小的时候必须小于原本的高度
if (initDragCutH >= dragLength) {
// 如果 移动小于0 说明是在往下啦 放大裁剪的高度 这样一来 图片的高度 最大 等于 图片的top值加 当前图片的高度 否则就说明超出界限
if (dragLength < 0 && _this.data.cropperH > initDragCutT + _this.data.cutH) {
this.setData({
cutH: initDragCutH - dragLength
})
}
// 如果是移动 大于0 说明在缩小 只需要缩小的距离小于原本裁剪的高度就ok
if (dragLength > 0) {
this.setData({
cutH: initDragCutH - dragLength
})
}
else {
return
}
} else {
return
}
break;
case 'rightBottom':
var dragLengthX = (sizeConfPageX - e.touches[0].pageX) * dragScaleP
var dragLengthY = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
if (initDragCutH >= dragLengthY && initDragCutW >= dragLengthX) {
// bottom 方向的变化
if ((dragLengthY < 0 && _this.data.cropperH > initDragCutT + _this.data.cutH) || (dragLengthY > 0)) {
this.setData({
cutH: initDragCutH - dragLengthY
})
}
// right 方向的变化
if ((dragLengthX < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) || (dragLengthX > 0)) {
this.setData({
cutW: initDragCutW - dragLengthX
})
}
else {
return
}
} else {
return
}
break;
default:
break;
}
},
// 图片上传
upLoad: function () {
},
upEwm: function (e) {
var _this = this
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
// var mode = parseFloat(e.currentTarget.dataset.current);
console.log('shangchuan:' + tempFilePaths)
console.log(e.currentTarget.dataset.which);
_this.setData({
imageFixed: true,
imageSrc: tempFilePaths.join(),
imageNum: e.currentTarget.dataset.which
})
// start
wx.getImageInfo({
src: _this.data.imageSrc,
success: function success(res) {
var innerAspectRadio = res.width / res.height;
console.log('bili' + innerAspectRadio)
// 根据图片的宽高显示不同的效果 保证图片可以正常显示
if (innerAspectRadio == '1') {
console.log('zhengfangxingtu')
_this.setData({
imageFixed: false,
})
// 判断时上传头像还是二维码
if (_this.data.imageNum == '1') {
_this.setData({
headImg: tempFilePaths.join()
})
} else if (_this.data.imageNum == '2') {
_this.setData({
ewmImg: tempFilePaths.join()
})
}
} else if (innerAspectRadio > 1) {
_this.setData({
cropperW: windowWRPX,
cropperH: windowWRPX / innerAspectRadio,
// 初始化left right
cropperL: Math.ceil((windowWRPX - windowWRPX) / 2),
cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2),
// 裁剪框 宽高
// cutW: windowWRPX - 200,
// cutH: windowWRPX / innerAspectRadio - 200,
cutL: Math.ceil((windowWRPX - windowWRPX + 340) / 2),
cutT: Math.ceil((windowWRPX / innerAspectRadio - (windowWRPX / innerAspectRadio - 20)) / 2),
// 图片缩放值
scaleP: res.width * pixelRatio / windowWRPX,
// 图片原始宽度 rpx
imageW: res.width * pixelRatio,
imageH: res.height * pixelRatio
})
} else {
_this.setData({
cropperW: windowWRPX * innerAspectRadio,
cropperH: windowWRPX,
// 初始化left right
cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2),
cropperT: Math.ceil((windowWRPX - windowWRPX) / 2),
// 裁剪框的宽高
// cutW: windowWRPX * innerAspectRadio - 66,
// cutH: 400,
cutL: Math.ceil((windowWRPX * innerAspectRadio - (windowWRPX * innerAspectRadio - 20)) / 2),
cutT: Math.ceil((windowWRPX - 340) / 2),
// 图片缩放值
scaleP: res.width * pixelRatio / windowWRPX,
// 图片原始宽度 rpx
imageW: res.width * pixelRatio,
imageH: res.height * pixelRatio
})
}
_this.setData({
isShowImg: true
})
wx.hideLoading()
}
})
// end
}
})
},
// 地区选择
bindRegionChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
},
// 公司自定义输入
bindcomInput: function(e){
this.setData({
companySelected: e.detail.value
})
},
// 点击选择公司
selectCompany: function(e){
this.setData({
dialogComapny:true
})
},
// 自定义输入公司
moreCompany: function(e){
this.setData({
writeComapny: true
})
},
//自定义公司确定提交
subCompany: function(e){
this.setData({
writeComapny: false,
dialogComapny: false
})
},
// 关闭弹窗
close: function(){
this.setData({
writeComapny:false
})
},
// 点击公司选中
menuClick: function(e){
this.setData({
_num: e.target.dataset.num,
companySelected: e.target.dataset.company,
dialogComapny: false,
beforeSelect:0
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
wxss：
@import "../lib/weui.wxss";
/*
设计稿750px宽度
是 1px = 1rpx
设计稿640px宽度
需要转换一下 1px = 750/640 rpx=1.171875rpx; */
.picker{
background-color: #FFFFFF;
}
/*裁剪图片*/
/* pages/wx-cropper/index.wxss */
.fixed-upimg{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 11;
}
.wx-content-info{
position: fixed;
top: 130rpx;
left: 0;
right: 0;
bottom: 0;
}
.wx-corpper{
position: relative;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
box-sizing: border-box;
}
.wx-corpper-content{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.wx-corpper-content image {
display: block;
width: 100%;
min-width: 0 !important;
max-width: none !important;
height: 100%;
min-height: 0 !important;
max-height: none !important;
image-orientation: 0deg !important;
margin: 0 auto;
}
/* 移动图片效果 */
.wx-cropper-drag-box{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: move;
background: rgba(0,0,0,0.6);
z-index: 1;
}
/* 内部的信息 */
.wx-corpper-crop-box{
position: absolute;
width: 500rpx;
height: 500rpx;
background: rgba(255,255,255,0.3);
z-index: 2;
}
.wx-corpper-crop-box .wx-cropper-view-box {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: visible;
outline: 1px solid #69f;
outline-color: rgba(102, 153, 255, .75)
}
/* 横向虚线 */
.wx-cropper-dashed-h{
position: absolute;
top: 33.33333333%;
left: 0;
width: 100%;
height: 33.33333333%;
border-top: 1px dashed rgba(255,255,255,0.5);
border-bottom: 1px dashed rgba(255,255,255,0.5);
}
/* 纵向虚线 */
.wx-cropper-dashed-v{
position: absolute;
left: 33.33333333%;
top: 0;
width: 33.33333333%;
height: 100%;
border-left: 1px dashed rgba(255,255,255,0.5);
border-right: 1px dashed rgba(255,255,255,0.5);
}
/* 四个方向的线 为了之后的拖动事件*/
.wx-cropper-line-t{
position: absolute;
display: block;
width: 100%;
background-color: #69f;
top: 0;
left: 0;
height: 1px;
opacity: 0.1;
cursor: n-resize;
}
.wx-cropper-line-t::before{
content: '';
position: absolute;
top: 50%;
right: 0rpx;
width: 100%;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
bottom: 0;
height: 41rpx;
background: transparent;
z-index: 11;
}
.wx-cropper-line-r{
position: absolute;
display: block;
background-color: #69f;
top: 0;
right: 0px;
width: 1px;
opacity: 0.1;
height: 100%;
cursor: e-resize;
}
.wx-cropper-line-r::before{
content: '';
position: absolute;
top: 0;
left: 50%;
width: 41rpx;
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
bottom: 0;
height: 100%;
background: transparent;
z-index: 11;
}
.wx-cropper-line-b{
position: absolute;
display: block;
width: 100%;
background-color: #69f;
bottom: 0;
left: 0;
height: 1px;
opacity: 0.1;
cursor: s-resize;
}
.wx-cropper-line-b::before{
content: '';
position: absolute;
top: 50%;
right: 0rpx;
width: 100%;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
bottom: 0;
height: 41rpx;
background: transparent;
z-index: 11;
}
.wx-cropper-line-l{
position: absolute;
display: block;
background-color: #69f;
top: 0;
left: 0;
width: 1px;
opacity: 0.1;
height: 100%;
cursor: w-resize;
}
.wx-cropper-line-l::before{
content: '';
position: absolute;
top: 0;
left: 50%;
width: 41rpx;
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
bottom: 0;
height: 100%;
background: transparent;
z-index: 11;
}
.wx-cropper-point{
width: 5px;
height: 5px;
background-color: #69f;
opacity: .75;
position: absolute;
z-index: 3;
}
.point-t{
top: -3px;
left: 50%;
margin-left: -3px;
cursor: n-resize;
}
.point-tr{
top: -3px;
left: 100%;
margin-left: -3px;
cursor: n-resize;
}
.point-r{
top: 50%;
left:100%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-rb{
left: 100%;
top: 100%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
cursor: n-resize;
width: 24rpx;
height: 24rpx;
background-color: #69f;
position: absolute;
z-index: 1112;
opacity: 1;
}
.point-b{
left:50%;
top: 100%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-bl{
left:0%;
top: 100%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-l{
left:0%;
top: 50%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-lt{
left:0%;
top: 0%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
/* 裁剪框预览内容 */
.wx-cropper-viewer{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.wx-cropper-viewer image{
position: absolute;
z-index: 2;
}
/*页面样式 */
.section{
width: 94%;
margin-left: 6%;
font-size: 30rpx;
border-bottom: solid 1px #999;
height: 100rpx;
line-height: 100rpx;
overflow: hidden;
}
.left{
float: left;
width: 40%;
text-align: left;
}
.middle{
width: 52%;
float: left;
text-align: right
}
.right{
width: 8%;
float: right;
text-align: center
}
.middle input{
width: 100%;
height: 50rpx;
text-align: right;
margin-top: 25rpx;
}
.middle image{
margin-top: 10rpx;
}
/*选择公司的弹窗 */
/*新增公司库弹窗*/
.company_fixed_list{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f1f1f1;
z-index:7;
}
.company_new_fixed{
position: absolute;
top:30rpx;
left: 0;
width: 100%;
height: 100%;
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
.company_new_area{
/*overflow:scroll;
-webkit-overflow-scrolling:touch;*/
position: absolute;
width: 100%;
}
.company_fixed_list .company_lists{
overflow: hidden;
}
.company_fixed_list .line_x{
width: 95%;
margin: auto;
height: 1px;
background-color: #dcdcdc;
margin-top: 20rpx;
}
.company_fixed_list .title_line_x{
width: 95%;
margin: auto;
color: #666;
font-size: 32rpx;
border-bottom: 1px solid #999;
margin-top: 26rpx;
}
.company_fixed_list .writer_input{
color: #666;
font-size: 30rpx;
text-decoration: underline;
text-align: center;
margin-bottom: 50rpx;
margin-top: 80rpx;
}
.company_fixed_list .company_lists .selected_css{
color: #fff;
background-color: #F04E33!important;
}
.company_fixed_list .company_lists .comp{
font-size: 28rpx;
float: left;
width: 30%;
height: 66rpx;
line-height: 66rpx;
margin-left: 2.4%;
background-color: #fff;
border-radius: 1px;
text-align: center;
margin-top: 20rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor:pointer
}
/*新增输入公司弹窗*/
.write_dialog .dialog-ct{
width: 80%;
height: 380rpx;
margin-top: -190rpx;
margin-left: -40%;
}
.write_dialog input[name="text-company"] {
display: block;
width: 80%;
height: 80rpx;
line-height: 80rpx;
margin: 40rpx auto 0;
box-sizing: border-box;
padding: 20rpx;
font-size: 26rpx;
color: #333;
background: #e6e6e6;
text-align: left;
}
.write_dialog .phone-submit-btn {
font-size: 28rpx;
display: block;
width: 300rpx;
height: 66rpx;
line-height: 66rpx;
margin: 30rpx auto 0;
color: #fff;
text-align: center;
border-radius: 15rpx;
background: #f05e5e;
}
.basic-info-wrap #company-select{
float: right;
width: 400rpx;
height: 100%;
text-align: right;
color: #999;
direction: rtl;
text-transform: none;
font-size:28rpx;
}
/*end*/
.dialog-wrap {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 991;
}
.dialog-wrap .dialog-mask {
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.dialog-wrap.active {
display: block
}
.dialog-wrap .dialog-ct {
position: absolute;
top: 50%;
left: 50%;
background: #fff
}
.dialog-wrap .dialog-hd {
height: 82rpx;
line-height:82rpx;
text-align: center;
font-size: 28rpx;
background: #f8b349;
color: #fff
}
.dialog-wrap .dialog-ft {
padding: 12rpx 0
}
.dialog-wrap .dialog-close-btn {
position: absolute;
top: 0;
right: 0;
display: block;
width: 50rpx;
height: 50rpx;
margin-top: -25rpx;
margin-right: -25rpx;
border-radius: 50%;
background: #fff url("https://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/images/special/16110301/i-o-close.png") no-repeat center center;
-webkit-background-size: 25rpx 25rpx;
background-size: 25rpx 25rpx
}
效果图：
本文来自博客园，作者：JeckHui；
个人主页：前端实用站点推荐； 热榜资讯早读：热榜资讯-导航；
转载请注明原文链接：https://www.cnblogs.com/xiaohuizhang/p/8991454.html
浙公网安备 33010602011771号