10 changed files with 623 additions and 1 deletions
@ -0,0 +1,66 @@ |
|||||
|
// subpages/index/checkOutConfirm/index/index.js
|
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad(options) { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage() { |
||||
|
|
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,11 @@ |
|||||
|
{ |
||||
|
"navigationStyle": "custom", |
||||
|
"usingComponents": { |
||||
|
"navigationBar": "/components/navigationBar/navigationBar", |
||||
|
"van-image": "@vant/weapp/image/index", |
||||
|
"van-button": "@vant/weapp/button/index", |
||||
|
"van-tab": "@vant/weapp/tab/index", |
||||
|
"van-tabs": "@vant/weapp/tabs/index", |
||||
|
"van-divider": "@vant/weapp/divider/index" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,2 @@ |
|||||
|
<!--subpages/index/checkOutConfirm/index/index.wxml--> |
||||
|
<navigationBar title="退房确认" isSowArrow titleAlign="center"></navigationBar> |
||||
@ -0,0 +1 @@ |
|||||
|
/* subpages/index/checkOutConfirm/index/index.wxss */ |
||||
@ -0,0 +1,446 @@ |
|||||
|
// subpages/index/checkOutConfirm/sign/sign.js
|
||||
|
|
||||
|
|
||||
|
Page({ |
||||
|
data: { |
||||
|
canvasName: 'signCanvas', |
||||
|
ctx: '', |
||||
|
canvas: '', |
||||
|
canvasWidth: 0, |
||||
|
canvasHeight: 0, |
||||
|
transparent: 1, |
||||
|
selectColor: 'black', |
||||
|
lineColor: '#1A1A1A', |
||||
|
lineSize: 1.5, |
||||
|
lineMin: 0.5, |
||||
|
lineMax: 4, |
||||
|
pressure: 1, |
||||
|
smoothness: 60, |
||||
|
currentPoint: {}, |
||||
|
currentLine: [], |
||||
|
firstTouch: true, |
||||
|
radius: 1, |
||||
|
cutArea: { top: 0, right: 0, bottom: 0, left: 0 }, |
||||
|
bethelPoint: [], |
||||
|
lastPoint: 0, |
||||
|
chirography: [], |
||||
|
currentChirography: {}, |
||||
|
linePrack: [], |
||||
|
isDraw: false, |
||||
|
upPageNumber: 0, |
||||
|
offCanvas: '', |
||||
|
offCtx: '', |
||||
|
dpr: '' |
||||
|
}, |
||||
|
|
||||
|
onLoad: function (options) { |
||||
|
this.data.dpr = wx.getSystemInfoSync().pixelRatio |
||||
|
const query = wx.createSelectorQuery() |
||||
|
query |
||||
|
.select('.handCenter') |
||||
|
.boundingClientRect(rect => { |
||||
|
this.data.canvasWidth = rect.width * this.data.dpr |
||||
|
this.data.canvasHeight = rect.height * this.data.dpr |
||||
|
}) |
||||
|
.exec() |
||||
|
const query1 = wx.createSelectorQuery() |
||||
|
query1 |
||||
|
.select('#signCanvas') |
||||
|
.fields({ node: true, size: true }) |
||||
|
.exec(res => { |
||||
|
const canvas = res[0].node |
||||
|
this.data.ctx = canvas.getContext('2d') |
||||
|
canvas.width = this.data.canvasWidth |
||||
|
canvas.height = this.data.canvasHeight |
||||
|
|
||||
|
this.data.canvas = canvas |
||||
|
|
||||
|
this.data.ctx.scale(this.data.dpr, this.data.dpr) |
||||
|
this.setCanvasBg('#fff') |
||||
|
}) |
||||
|
const query2 = wx.createSelectorQuery() |
||||
|
query2 |
||||
|
.select('#offCanvas') |
||||
|
.fields({ node: true, size: true }) |
||||
|
.exec(res => { |
||||
|
const canvas = res[0].node |
||||
|
const ctx = canvas.getContext('2d') |
||||
|
canvas.width = this.data.canvasHeight |
||||
|
canvas.height = this.data.canvasWidth |
||||
|
this.data.offCanvas = canvas |
||||
|
this.data.offCtx = ctx |
||||
|
this.data.offCtx.scale(this.data.dpr, this.data.dpr) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
retDraw() { |
||||
|
this.data.ctx.clearRect(0, 0, 700, 730) |
||||
|
this.setCanvasBg('#fff') |
||||
|
this.data.isDraw = false |
||||
|
this.data.currentPoint = {} |
||||
|
}, |
||||
|
|
||||
|
pointToLine(line) { |
||||
|
this.calcBethelLine(line) |
||||
|
return |
||||
|
}, |
||||
|
|
||||
|
uploadScaleStart(e) { |
||||
|
if (e.type != 'touchstart') return false |
||||
|
let ctx = this.data.ctx |
||||
|
ctx.fillStyle = this.data.lineColor |
||||
|
ctx.globalAlpha = this.data.transparent |
||||
|
let currentPoint = { |
||||
|
x: e.touches[0].x, |
||||
|
y: e.touches[0].y |
||||
|
} |
||||
|
let currentLine = this.data.currentLine |
||||
|
currentLine.unshift({ |
||||
|
time: new Date().getTime(), |
||||
|
dis: 0, |
||||
|
x: currentPoint.x, |
||||
|
y: currentPoint.y |
||||
|
}) |
||||
|
this.setData({ |
||||
|
currentPoint |
||||
|
}) |
||||
|
if (this.data.firstTouch) { |
||||
|
this.setData({ |
||||
|
cutArea: { |
||||
|
top: currentPoint.y, |
||||
|
right: currentPoint.x, |
||||
|
bottom: currentPoint.y, |
||||
|
left: currentPoint.x |
||||
|
}, |
||||
|
firstTouch: false |
||||
|
}) |
||||
|
} |
||||
|
this.pointToLine(currentLine) |
||||
|
}, |
||||
|
|
||||
|
uploadScaleMove(e) { |
||||
|
if (e.type != 'touchmove') return false |
||||
|
if (e.cancelable) { |
||||
|
|
||||
|
if (!e.defaultPrevented) { |
||||
|
e.preventDefault() |
||||
|
} |
||||
|
} |
||||
|
let point = { |
||||
|
x: e.touches[0].x, |
||||
|
y: e.touches[0].y |
||||
|
} |
||||
|
|
||||
|
if (point.y < this.data.cutArea.top) { |
||||
|
this.data.cutArea.top = point.y |
||||
|
} |
||||
|
if (point.y < 0) this.data.cutArea.top = 0 |
||||
|
|
||||
|
if (point.x > this.data.cutArea.right) { |
||||
|
this.data.cutArea.right = point.x |
||||
|
} |
||||
|
if (this.data.canvasWidth - point.x <= 0) { |
||||
|
this.data.cutArea.right = this.data.canvasWidth |
||||
|
} |
||||
|
if (point.y > this.data.cutArea.bottom) { |
||||
|
this.data.cutArea.bottom = point.y |
||||
|
} |
||||
|
if (this.data.canvasHeight - point.y <= 0) { |
||||
|
this.data.cutArea.bottom = this.data.canvasHeight |
||||
|
} |
||||
|
if (point.x < this.data.cutArea.left) { |
||||
|
this.data.cutArea.left = point.x |
||||
|
} |
||||
|
if (point.x < 0) this.data.cutArea.left = 0 |
||||
|
|
||||
|
this.setData({ |
||||
|
lastPoint: this.data.currentPoint, |
||||
|
currentPoint: point |
||||
|
}) |
||||
|
let currentLine = this.data.currentLine |
||||
|
currentLine.unshift({ |
||||
|
time: new Date().getTime(), |
||||
|
dis: this.distance(this.data.currentPoint, this.data.lastPoint), |
||||
|
x: point.x, |
||||
|
y: point.y |
||||
|
}) |
||||
|
// this.setData({
|
||||
|
// currentLine
|
||||
|
// })
|
||||
|
this.pointToLine(currentLine) |
||||
|
}, |
||||
|
|
||||
|
uploadScaleEnd(e) { |
||||
|
if (e.type != 'touchend') return 0 |
||||
|
let point = { |
||||
|
x: e.changedTouches[0].x, |
||||
|
y: e.changedTouches[0].y |
||||
|
} |
||||
|
this.setData({ |
||||
|
lastPoint: this.data.currentPoint, |
||||
|
currentPoint: point |
||||
|
}) |
||||
|
let currentLine = this.data.currentLine |
||||
|
currentLine.unshift({ |
||||
|
time: new Date().getTime(), |
||||
|
dis: this.distance(this.data.currentPoint, this.data.lastPoint), |
||||
|
x: point.x, |
||||
|
y: point.y |
||||
|
}) |
||||
|
// this.setData({
|
||||
|
// currentLine
|
||||
|
// })
|
||||
|
if (currentLine.length > 2) { |
||||
|
var info = |
||||
|
(currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length |
||||
|
} |
||||
|
|
||||
|
this.pointToLine(currentLine) |
||||
|
var currentChirography = { |
||||
|
lineSize: this.data.lineSize, |
||||
|
lineColor: this.data.lineColor |
||||
|
} |
||||
|
var chirography = this.data.chirography |
||||
|
chirography.unshift(currentChirography) |
||||
|
this.setData({ |
||||
|
chirography |
||||
|
}) |
||||
|
var linePrack = this.data.linePrack |
||||
|
linePrack.unshift(this.data.currentLine) |
||||
|
this.setData({ |
||||
|
linePrack, |
||||
|
currentLine: [] |
||||
|
}) |
||||
|
this.data.isDraw = true |
||||
|
}, |
||||
|
|
||||
|
calcBethelLine(line) { |
||||
|
if (line.length <= 1) { |
||||
|
line[0].r = this.data.radius |
||||
|
return |
||||
|
} |
||||
|
let x0, |
||||
|
x1, |
||||
|
x2, |
||||
|
y0, |
||||
|
y1, |
||||
|
y2, |
||||
|
r0, |
||||
|
r1, |
||||
|
r2, |
||||
|
len, |
||||
|
lastRadius, |
||||
|
dis = 0, |
||||
|
time = 0, |
||||
|
curveValue = 0.5 |
||||
|
if (line.length <= 2) { |
||||
|
x0 = line[1].x |
||||
|
y0 = line[1].y |
||||
|
x2 = line[1].x + (line[0].x - line[1].x) * curveValue |
||||
|
y2 = line[1].y + (line[0].y - line[1].y) * curveValue |
||||
|
x1 = x0 + (x2 - x0) * curveValue |
||||
|
y1 = y0 + (y2 - y0) * curveValue |
||||
|
} else { |
||||
|
x0 = line[2].x + (line[1].x - line[2].x) * curveValue |
||||
|
y0 = line[2].y + (line[1].y - line[2].y) * curveValue |
||||
|
x1 = line[1].x |
||||
|
y1 = line[1].y |
||||
|
x2 = x1 + (line[0].x - x1) * curveValue |
||||
|
y2 = y1 + (line[0].y - y1) * curveValue |
||||
|
} |
||||
|
|
||||
|
len = this.distance({ x: x2, y: y2 }, { x: x0, y: y0 }) |
||||
|
lastRadius = this.data.radius |
||||
|
for (let n = 0; n < line.length - 1; n++) { |
||||
|
dis += line[n].dis |
||||
|
time += line[n].time - line[n + 1].time |
||||
|
if (dis > this.data.smoothness) break |
||||
|
} |
||||
|
this.setData({ |
||||
|
radius: |
||||
|
Math.min((time / len) * this.data.pressure + this.data.lineMin, this.data.lineMax) * |
||||
|
this.data.lineSize |
||||
|
}) |
||||
|
line[0].r = this.data.radius |
||||
|
|
||||
|
if (line.length <= 2) { |
||||
|
r0 = (lastRadius + this.data.radius) / 2 |
||||
|
r1 = r0 |
||||
|
r2 = r1 |
||||
|
} else { |
||||
|
r0 = (line[2].r + line[1].r) / 2 |
||||
|
r1 = line[1].r |
||||
|
r2 = (line[1].r + line[0].r) / 2 |
||||
|
} |
||||
|
let n = 5 |
||||
|
let point = [] |
||||
|
for (let i = 0; i < n; i++) { |
||||
|
let t = i / (n - 1) |
||||
|
let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2 |
||||
|
let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2 |
||||
|
let r = lastRadius + ((this.data.radius - lastRadius) / n) * i |
||||
|
point.push({ x: x, y: y, r: r }) |
||||
|
if (point.length == 3) { |
||||
|
let a = this.ctaCalc( |
||||
|
point[0].x, |
||||
|
point[0].y, |
||||
|
point[0].r, |
||||
|
point[1].x, |
||||
|
point[1].y, |
||||
|
point[1].r, |
||||
|
point[2].x, |
||||
|
point[2].y, |
||||
|
point[2].r |
||||
|
) |
||||
|
a[0].color = this.data.lineColor |
||||
|
this.bethelDraw(a, 1) |
||||
|
point = [{ x: x, y: y, r: r }] |
||||
|
} |
||||
|
} |
||||
|
this.setData({ |
||||
|
currentLine: line |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
distance(a, b) { |
||||
|
let x = b.x - a.x |
||||
|
let y = b.y - a.y |
||||
|
return Math.sqrt(x * x + y * y) |
||||
|
}, |
||||
|
|
||||
|
ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) { |
||||
|
let a = [], |
||||
|
vx01, |
||||
|
vy01, |
||||
|
norm, |
||||
|
n_x0, |
||||
|
n_y0, |
||||
|
vx21, |
||||
|
vy21, |
||||
|
n_x2, |
||||
|
n_y2 |
||||
|
vx01 = x1 - x0 |
||||
|
vy01 = y1 - y0 |
||||
|
norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2 |
||||
|
vx01 = (vx01 / norm) * r0 |
||||
|
vy01 = (vy01 / norm) * r0 |
||||
|
n_x0 = vy01 |
||||
|
n_y0 = -vx01 |
||||
|
vx21 = x1 - x2 |
||||
|
vy21 = y1 - y2 |
||||
|
norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2 |
||||
|
vx21 = (vx21 / norm) * r2 |
||||
|
vy21 = (vy21 / norm) * r2 |
||||
|
n_x2 = -vy21 |
||||
|
n_y2 = vx21 |
||||
|
a.push({ mx: x0 + n_x0, my: y0 + n_y0, color: '#1A1A1A' }) |
||||
|
a.push({ |
||||
|
c1x: x1 + n_x0, |
||||
|
c1y: y1 + n_y0, |
||||
|
c2x: x1 + n_x2, |
||||
|
c2y: y1 + n_y2, |
||||
|
ex: x2 + n_x2, |
||||
|
ey: y2 + n_y2 |
||||
|
}) |
||||
|
a.push({ |
||||
|
c1x: x2 + n_x2 - vx21, |
||||
|
c1y: y2 + n_y2 - vy21, |
||||
|
c2x: x2 - n_x2 - vx21, |
||||
|
c2y: y2 - n_y2 - vy21, |
||||
|
ex: x2 - n_x2, |
||||
|
ey: y2 - n_y2 |
||||
|
}) |
||||
|
a.push({ |
||||
|
c1x: x1 - n_x2, |
||||
|
c1y: y1 - n_y2, |
||||
|
c2x: x1 - n_x0, |
||||
|
c2y: y1 - n_y0, |
||||
|
ex: x0 - n_x0, |
||||
|
ey: y0 - n_y0 |
||||
|
}) |
||||
|
a.push({ |
||||
|
c1x: x0 - n_x0 - vx01, |
||||
|
c1y: y0 - n_y0 - vy01, |
||||
|
c2x: x0 + n_x0 - vx01, |
||||
|
c2y: y0 + n_y0 - vy01, |
||||
|
ex: x0 + n_x0, |
||||
|
ey: y0 + n_y0 |
||||
|
}) |
||||
|
a[0].mx = a[0].mx.toFixed(1) |
||||
|
a[0].mx = parseFloat(a[0].mx) |
||||
|
a[0].my = a[0].my.toFixed(1) |
||||
|
a[0].my = parseFloat(a[0].my) |
||||
|
for (let i = 1; i < a.length; i++) { |
||||
|
a[i].c1x = a[i].c1x.toFixed(1) |
||||
|
a[i].c1x = parseFloat(a[i].c1x) |
||||
|
a[i].c1y = a[i].c1y.toFixed(1) |
||||
|
a[i].c1y = parseFloat(a[i].c1y) |
||||
|
a[i].c2x = a[i].c2x.toFixed(1) |
||||
|
a[i].c2x = parseFloat(a[i].c2x) |
||||
|
a[i].c2y = a[i].c2y.toFixed(1) |
||||
|
a[i].c2y = parseFloat(a[i].c2y) |
||||
|
a[i].ex = a[i].ex.toFixed(1) |
||||
|
a[i].ex = parseFloat(a[i].ex) |
||||
|
a[i].ey = a[i].ey.toFixed(1) |
||||
|
a[i].ey = parseFloat(a[i].ey) |
||||
|
} |
||||
|
return a |
||||
|
}, |
||||
|
|
||||
|
bethelDraw(point, is_fill, color) { |
||||
|
let ctx = this.data.ctx |
||||
|
ctx.beginPath() |
||||
|
ctx.moveTo(point[0].mx, point[0].my) |
||||
|
if (undefined != color) { |
||||
|
ctx.fillStyle = color |
||||
|
ctx.strokeStyle = color |
||||
|
} else { |
||||
|
ctx.fillStyle = point[0].color |
||||
|
ctx.strokeStyle = point[0].color |
||||
|
} |
||||
|
for (let i = 1; i < point.length; i++) { |
||||
|
ctx.bezierCurveTo( |
||||
|
point[i].c1x, |
||||
|
point[i].c1y, |
||||
|
point[i].c2x, |
||||
|
point[i].c2y, |
||||
|
point[i].ex, |
||||
|
point[i].ey |
||||
|
) |
||||
|
} |
||||
|
ctx.stroke() |
||||
|
if (undefined != is_fill) { |
||||
|
ctx.fill() |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
setCanvasBg(color) { |
||||
|
this.data.ctx.rect(0, 0, this.data.canvasWidth, this.data.canvasHeight - 4) |
||||
|
this.data.ctx.fillStyle = color |
||||
|
this.data.ctx.fill() |
||||
|
}, |
||||
|
|
||||
|
subCanvas() { |
||||
|
if (Object.keys(this.data.currentPoint).length == 0) { |
||||
|
wx.showModal({ |
||||
|
title: "提示", |
||||
|
content: "签名内容不能为空！", |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} else { |
||||
|
console.log('========sub') |
||||
|
let imgSrc = this.data.canvas.toDataURL('image/png', 1) |
||||
|
console.log(imgSrc); |
||||
|
wx.showLoading({ |
||||
|
title: '正在跳转', |
||||
|
}) |
||||
|
setTimeout(function () { |
||||
|
wx.hideLoading() |
||||
|
wx.navigateTo({ |
||||
|
url: '/subpages/index/checkOutConfirm/index/index', |
||||
|
}) |
||||
|
}, 1500) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
}) |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,18 @@ |
|||||
|
<!--subpages/index/checkOutConfirm/sign/sign.wxml--> |
||||
|
|
||||
|
|
||||
|
<view class="container"> |
||||
|
<view class="handleBtn py-3 me-2"> |
||||
|
<button bindtap="retDraw" class="clear" type="default">重写</button> |
||||
|
<button bindtap="subCanvas" class="confirm" type="primary">完成</button> |
||||
|
</view> |
||||
|
<view class="handCenter"> |
||||
|
<canvas class="handWriting" disable-scroll="true" bindtouchstart="uploadScaleStart" bindtouchmove="uploadScaleMove" bindtouchend="uploadScaleEnd" type="2d" id="signCanvas"></canvas> |
||||
|
</view> |
||||
|
<view class="handRight"> |
||||
|
<view class="handTitle">请签字</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="position:absolute;left:0rpx;top:0;"> |
||||
|
<canvas type="2d" id="offCanvas" style="width: 100%; height: 100vh;"></canvas> |
||||
|
</view> |
||||
@ -0,0 +1,66 @@ |
|||||
|
/* subpages/index/checkOutConfirm/sign/sign.wxss */ |
||||
|
|
||||
|
|
||||
|
.container { |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
padding: 30rpx 0; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
align-content: center; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
font-size: 28rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.handleBtn { |
||||
|
display: inline-flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
align-content: space-between; |
||||
|
flex: 1; |
||||
|
padding-right: 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.handleBtn button { |
||||
|
text-align: center; |
||||
|
transform: rotate(90deg); |
||||
|
} |
||||
|
.handleBtn button:not([size="mini"]) { |
||||
|
width: 160rpx; |
||||
|
margin-top: 130rpx; |
||||
|
margin-bottom: 130rpx; |
||||
|
} |
||||
|
.handleBtn .clear { |
||||
|
margin-right:32rpx; |
||||
|
background-color: #eee; |
||||
|
} |
||||
|
|
||||
|
.handleBtn .confirm { |
||||
|
color: #fff; |
||||
|
background-color: #42d9d3; |
||||
|
} |
||||
|
.handCenter { |
||||
|
border: 4rpx dashed #e9e9e9; |
||||
|
flex: 5; |
||||
|
overflow: hidden; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.handRight { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.handRight .handTitle { |
||||
|
transform: rotate(90deg); |
||||
|
flex: 1; |
||||
|
color: #666; |
||||
|
} |
||||
|
.handWriting { |
||||
|
background: #fff; |
||||
|
width: 100%; |
||||
|
height: 95vh; |
||||
|
flex: 2; |
||||
|
} |
||||
Loading…
Reference in new issue