parent
a0b52f8a4c
commit
dfbafd8ea8
11 changed files with 1171 additions and 207 deletions
@ -0,0 +1,18 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
export default{ |
||||
getByPage(data) { |
||||
return request({ |
||||
url: `/oil-finance/xoilSiteElectronicStatement/getByPage`, |
||||
method: 'post', |
||||
data |
||||
}) |
||||
}, |
||||
update(data) { |
||||
return request({ |
||||
url: `/oil-finance/xoilSiteElectronicStatement/update`, |
||||
method: 'PUT', |
||||
data |
||||
}) |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
/** |
||||
* 判断是否未数值 |
||||
* @param {Object} val |
||||
*/ |
||||
export function isNumber(val) { |
||||
return !isNaN(Number(val)) |
||||
} |
||||
|
||||
/** |
||||
* 处理大小单位 |
||||
* @param {Object} val |
||||
*/ |
||||
export function formatSize(val, unit = 'rpx') { |
||||
return isNumber(val) ? `${val}${unit}` : val |
||||
} |
||||
|
||||
@ -0,0 +1,320 @@ |
||||
<template> |
||||
<view class="signature-wrap"> |
||||
<canvas |
||||
:canvas-id="cid" |
||||
:id="cid" |
||||
@touchstart="onTouchStart" |
||||
@touchmove="onTouchMove" |
||||
@touchend="onTouchEnd" |
||||
disable-scroll |
||||
:style="[ |
||||
{ |
||||
width: width && formatSize(width), |
||||
height: height && formatSize(height) |
||||
}, |
||||
customStyle |
||||
]" |
||||
></canvas> |
||||
<slot /> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
/** |
||||
* sign canvas 手写签名 |
||||
* @description 设置线条宽度、颜色，撤回，清空 |
||||
* @tutorial |
||||
* @property {String} cid canvas id 不设置则默认为 v-sign-时间戳 |
||||
* @property {String, Number} width canvas 宽度 |
||||
* @property {String, Number} height canvas 高度 |
||||
* @property {bgColor} bgColor 画布背景颜色 |
||||
* @property {Object} customStyle canvas 自定义样式 |
||||
* @property {String} lineWidth 画笔大小，权重小于 v-sign-pen 组件设置的画笔大小 |
||||
* @property {Number} lineColor 画笔颜色，权重小于 v-sign-pen 组件设置的画笔大小 |
||||
* @event {Function} init 当创建完 canvas 实例后触发，向外提供 canvas实例，撤回，清空方法 |
||||
* @example <v-sign @init="signInit"></v-sign> |
||||
*/ |
||||
import { formatSize } from './index.js' |
||||
|
||||
export default { |
||||
name: 'my-sign', |
||||
props: { |
||||
// canvas id |
||||
cid: { |
||||
type: String, |
||||
default: `v-sign-${Date.now()}` |
||||
// required: true |
||||
}, |
||||
// canvas 宽度 |
||||
width: { |
||||
type: [String, Number] |
||||
}, |
||||
// canvas 高度 |
||||
height: { |
||||
type: [String, Number] |
||||
}, |
||||
// 画笔大小，权重小于 v-sign-pen 组件设置的画笔大小 penLineWidth |
||||
lineWidth: { |
||||
type: Number, |
||||
default: 4 |
||||
}, |
||||
// 线颜色，权重小于 v-sign-color 组件设置的画笔颜色 penLineColor |
||||
lineColor: { |
||||
type: String, |
||||
default: '#333' |
||||
}, |
||||
// 画布背景颜色 |
||||
bgColor: { |
||||
type: String, |
||||
default: '#fff' |
||||
}, |
||||
// canvas自定义样式 |
||||
customStyle: { |
||||
type: Object, |
||||
default: () => ({}) |
||||
} |
||||
}, |
||||
provide() { |
||||
return { |
||||
getSignInterface: this.provideSignInterface |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
formatSize, |
||||
lineData: [], |
||||
winWidth: 0, |
||||
winHeight: 0, |
||||
penLineWidth: null, // v-sign-pen 组件设置的画笔大小 |
||||
penLineColor: null // v-sign-color 组件设置的颜色 |
||||
} |
||||
}, |
||||
created() { |
||||
// 获取窗口宽高 |
||||
const { windowWidth, windowHeight } = uni.getSystemInfoSync() |
||||
this.winWidth = windowWidth |
||||
this.winHeight = windowHeight |
||||
}, |
||||
mounted() { |
||||
this.canvasCtx = uni.createCanvasContext(this.cid, this) |
||||
// h5 需延迟绘制，否则绘制失败 |
||||
// #ifdef H5 |
||||
setTimeout(() => { |
||||
// #endif |
||||
this.setBackgroundColor(this.bgColor) |
||||
// #ifdef H5 |
||||
}, 10) |
||||
// #endif |
||||
// 初始化完成，触发 init 事件 |
||||
this.$emit('init', this.provideSignInterface()) |
||||
}, |
||||
methods: { |
||||
onTouchStart(e) { |
||||
const pos = e.touches[0] |
||||
this.lineData.push({ |
||||
style: { |
||||
color: this.penLineColor || this.lineColor, |
||||
width: this.penLineWidth || this.lineWidth |
||||
}, |
||||
// 屏幕坐标 |
||||
coordinates: [ |
||||
{ |
||||
type: e.type, |
||||
x: pos.x, |
||||
y: pos.y |
||||
} |
||||
] |
||||
}) |
||||
this.drawLine() |
||||
}, |
||||
onTouchMove(e) { |
||||
const pos = e.touches[0] |
||||
this.lineData[this.lineData.length - 1].coordinates.push({ |
||||
type: e.type, |
||||
x: pos.x, |
||||
y: pos.y |
||||
}) |
||||
this.drawLine() |
||||
}, |
||||
onTouchEnd(e) { |
||||
this.$emit('end', this.lineData) |
||||
}, |
||||
// 清空画布 |
||||
clear() { |
||||
this.lineData = [] |
||||
this.canvasCtx.clearRect(0, 0, this.winWidth, this.winHeight) |
||||
this.canvasCtx.draw() |
||||
this.setBackgroundColor(this.bgColor) |
||||
this.$emit('clear') |
||||
}, |
||||
// 撤销 |
||||
revoke() { |
||||
this.setBackgroundColor(this.bgColor) |
||||
this.lineData.pop() |
||||
this.lineData.forEach((item, index) => { |
||||
this.canvasCtx.beginPath() |
||||
this.canvasCtx.setLineCap('round') |
||||
this.canvasCtx.setStrokeStyle(item.style.color) |
||||
this.canvasCtx.setLineWidth(item.style.width) |
||||
if (item.coordinates.length < 2) { |
||||
const pos = item.coordinates[0] |
||||
this.canvasCtx.moveTo(pos.x, pos.y) |
||||
this.canvasCtx.lineTo(pos.x + 1, pos.y) |
||||
} else { |
||||
item.coordinates.forEach(pos => { |
||||
if (pos.type == 'touchstart') { |
||||
this.canvasCtx.moveTo(pos.x, pos.y) |
||||
} else { |
||||
this.canvasCtx.lineTo(pos.x, pos.y) |
||||
} |
||||
}) |
||||
} |
||||
this.canvasCtx.stroke() |
||||
}) |
||||
this.canvasCtx.draw(true) |
||||
this.$emit('revoke', this.lineData) |
||||
}, |
||||
// 绘制线条 |
||||
drawLine() { |
||||
const lineDataLen = this.lineData.length |
||||
if (!lineDataLen) return |
||||
const currentLineData = this.lineData[lineDataLen - 1] |
||||
const coordinates = currentLineData.coordinates |
||||
const coordinatesLen = coordinates.length |
||||
if (!coordinatesLen) return |
||||
let startPos |
||||
let endPos |
||||
if (coordinatesLen < 2) { |
||||
// only start, no move event |
||||
startPos = coordinates[coordinatesLen - 1] |
||||
endPos = { |
||||
x: startPos.x + 1, |
||||
y: startPos.y |
||||
} |
||||
} else { |
||||
startPos = coordinates[coordinatesLen - 2] |
||||
endPos = coordinates[coordinatesLen - 1] |
||||
} |
||||
|
||||
const style = currentLineData.style |
||||
this.canvasCtx.beginPath() |
||||
this.canvasCtx.setLineCap('round') |
||||
this.canvasCtx.setStrokeStyle(style.color) |
||||
this.canvasCtx.setLineWidth(style.width) |
||||
this.canvasCtx.moveTo(startPos.x, startPos.y) |
||||
this.canvasCtx.lineTo(endPos.x, endPos.y) |
||||
// const P1 = this.caculateBezier(startPos, endPos, centerPos) |
||||
// console.log(P1.x, P1.y) |
||||
// this.canvasCtx.moveTo(startPos.x, startPos.y) |
||||
// this.canvasCtx.quadraticCurveTo(P1.x, P1.y, endPos.x, endPos.y) |
||||
this.canvasCtx.stroke() |
||||
this.canvasCtx.draw(true) |
||||
}, |
||||
// 保存png图片，文件名配置 filename 仅支持 h5 |
||||
async saveImage(filename = '签名') { |
||||
const tempFilePath = await this.canvasToTempFilePath() |
||||
return new Promise((resolve, reject) => { |
||||
// #ifdef H5 |
||||
try { |
||||
const a = document.createElement('a') |
||||
a.href = tempFilePath |
||||
a.download = filename |
||||
document.body.appendChild(a) |
||||
a.click() |
||||
a.remove() |
||||
resolve({ |
||||
errMsg: 'saveImageH5:ok' |
||||
}) |
||||
} catch (e) { |
||||
console.error(e) |
||||
reject(e) |
||||
} |
||||
// #endif |
||||
// #ifndef H5 |
||||
uni.saveImageToPhotosAlbum({ |
||||
filePath: tempFilePath, |
||||
success(resObj) { |
||||
resolve(resObj) |
||||
}, |
||||
fail(err) { |
||||
reject(err) |
||||
} |
||||
}) |
||||
// #endif |
||||
}) |
||||
}, |
||||
// canvas 保存为临时图片路径，h5返回 base64 |
||||
canvasToTempFilePath(conf = {}) { |
||||
return new Promise((resolve, reject) => { |
||||
uni.canvasToTempFilePath( |
||||
{ |
||||
canvasId: this.cid, |
||||
...conf, |
||||
success: res => { |
||||
resolve(res.tempFilePath) |
||||
}, |
||||
fail: err => { |
||||
console.log('fail', err) |
||||
reject(err) |
||||
} |
||||
}, |
||||
this |
||||
) |
||||
}) |
||||
}, |
||||
setBackgroundColor(color = '#fff') { |
||||
this.canvasCtx.beginPath() |
||||
this.canvasCtx.setFillStyle(color) |
||||
this.canvasCtx.fillRect(0, 0, this.winWidth, this.winHeight) |
||||
this.canvasCtx.fill() |
||||
this.canvasCtx.draw(true) |
||||
}, |
||||
setLineWidth(numberVal) { |
||||
this.penLineWidth = numberVal |
||||
}, |
||||
setLineColor(strValue) { |
||||
this.penLineColor = strValue |
||||
}, |
||||
// 向外暴露内部方法 |
||||
provideSignInterface() { |
||||
return { |
||||
cid: this.cid, |
||||
ctx: this.canvasCtx, |
||||
clear: this.clear, |
||||
revoke: this.revoke, |
||||
saveImage: this.saveImage, |
||||
canvasToTempFilePath: this.canvasToTempFilePath, |
||||
setLineWidth: this.setLineWidth, |
||||
setLineColor: this.setLineColor, |
||||
setBackgroundColor: this.setBackgroundColor, |
||||
getLineData: () => this.lineData |
||||
} |
||||
}, |
||||
/** |
||||
* 计算二次贝塞尔曲线 控制点 P1 |
||||
* 起点 P0(x0,y0)、控制点P1(x1, y1)、P2(x2, y2)、曲线上任意点B(x, y) |
||||
* 二次贝塞尔公式：B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2 |
||||
* 代入坐标得： |
||||
* x = (1-t)²*x0 + 2t(1-t)*x1 + t²*x2 |
||||
* y = (1-t)²*y0 + 2t(1-t)*y1 + t²*y2 |
||||
*/ |
||||
caculateBezier(P0, P2, B, t = 0.5) { |
||||
const { x: x0, y: y0 } = P0 |
||||
const { x: x2, y: y2 } = P2 |
||||
const { x, y } = B |
||||
let x1 = (x - (1 - t) * (1 - t) * x0 - t * t * x2) / (2 * t * (1 - t)) |
||||
let y1 = (y - (1 - t) * (1 - t) * y0 - t * t * y2) / (2 * t * (1 - t)) |
||||
return { |
||||
x: x1, |
||||
y: y1 |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.signature-wrap { |
||||
position: relative; |
||||
} |
||||
</style> |
||||
@ -1,8 +1,192 @@ |
||||
<template> |
||||
<view class="sign-contain"> |
||||
<view class="sign-top"> |
||||
请在空白处签字 |
||||
</view> |
||||
<my-sign @init="onSignInit" @end="endConfirm" bgColor="#fff" width="100%" :height="signHeight"> |
||||
</my-sign> |
||||
|
||||
<!-- 按钮 --> |
||||
<view class="signBtn-box"> |
||||
<view class="signBtn-item1"> |
||||
<button type="default" plain="true" class="lnvestor-btn" hover-class="hover" |
||||
@click="cancelBtn">取消</button> |
||||
</view> |
||||
<view class="signBtn-item2"> |
||||
<button type="default" plain="true" class="lnvestor-btn1" hover-class="hover" |
||||
@click="clear">清空重写</button> |
||||
<button type="primary" class="lnvestor-btn2" hover-class="hover" |
||||
@click="submitBtn" :disabled="vsignDisabled">提交签名</button> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import utils from '@/utils/encode' |
||||
export default { |
||||
data() { |
||||
return { |
||||
signHeight: '375px', |
||||
vsignDisabled: true, |
||||
detailsData:{} |
||||
} |
||||
}, |
||||
onLoad(option) { |
||||
if(option!='{}'){ |
||||
let stationData = JSON.parse(option.data) |
||||
this.detailsData = stationData |
||||
} |
||||
var that = this; |
||||
uni.getSystemInfo({ |
||||
success: function(res) { |
||||
console.log('屏幕信息', res) |
||||
that.signHeight = (res.windowHeight-130)+"px"; |
||||
} |
||||
}) |
||||
}, |
||||
methods: { |
||||
submitBtn(){ |
||||
let File = this.signCtx.canvasToTempFilePath() |
||||
let imageUrl = '' |
||||
File.then(res=>{ |
||||
let _that = this |
||||
const JSESSIONID = utils.uuid() |
||||
uni.uploadFile({ |
||||
url: 'http://uat.xingoil.com/adminapi/oil-oss/obejct/uploadFile', |
||||
filePath: res, |
||||
formData: { |
||||
ossKey: 'xingyou', |
||||
pathKey: 'publicxingyou', |
||||
encrypt: 'PUBLIC', |
||||
}, |
||||
name: 'file', |
||||
header: { |
||||
"Content-Type": "multipart/form-data", |
||||
"Authorization": uni.getStorageSync('Authorization'), |
||||
'dataSources': 'MP', |
||||
"imei": uni.getStorageSync('unionid'), |
||||
"openId": uni.getStorageSync('openid'), |
||||
'JSESSIONID': JSESSIONID, |
||||
'token': utils.md5Salt(JSESSIONID) |
||||
}, |
||||
success(e) { |
||||
let obj = JSON.parse(e.data), |
||||
imageUrl = obj.data.publicUrl |
||||
_that.getImage(imageUrl) |
||||
}, |
||||
fail(err) {} |
||||
}) |
||||
|
||||
}) |
||||
|
||||
|
||||
|
||||
}, |
||||
getImage(imageUrl){ |
||||
this.detailsData.signatureUrl = imageUrl |
||||
let stationInfo = JSON.stringify(this.detailsData) |
||||
uni.redirectTo({ |
||||
url: `../reconciliationDetails/index?data=${stationInfo}` |
||||
}) |
||||
}, |
||||
// 取消 |
||||
cancelBtn(){ |
||||
uni.navigateBack({ |
||||
delta: 1 |
||||
}) |
||||
}, |
||||
// 清除 |
||||
clear() { |
||||
this.signCtx.clear(); |
||||
this.vsignDisabled = true; |
||||
}, |
||||
onSignInit(signCtx) { |
||||
this.signCtx = signCtx |
||||
}, |
||||
// 绘画结束触发 |
||||
endConfirm() { |
||||
this.vsignDisabled = false; |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
<style lang="scss"> |
||||
.sign-contain { |
||||
padding-left: 35rpx; |
||||
padding-right: 35rpx; |
||||
|
||||
.sign-top { |
||||
width: 100%; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
font-size: 16px; |
||||
text-align: center; |
||||
color: #999999; |
||||
} |
||||
|
||||
.signBtn-box { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.signBtn-item1 { |
||||
|
||||
// 按钮样式 |
||||
.lnvestor-btn { |
||||
margin-top: 11px; |
||||
width: 94px; |
||||
height: 40px; |
||||
border-radius: 20px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.hover { |
||||
border: 1px solid #ccc !important; |
||||
color: #ccc !important; |
||||
font-size: 16px !important; |
||||
} |
||||
} |
||||
|
||||
.signBtn-item2 { |
||||
display: flex; |
||||
|
||||
// 按钮样式 |
||||
.lnvestor-btn1 { |
||||
margin-top: 11px; |
||||
width: 128px; |
||||
height: 40px; |
||||
border-radius: 20px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 16px; |
||||
margin-right: 16px; |
||||
} |
||||
|
||||
.lnvestor-btn2 { |
||||
margin-top: 11px; |
||||
width: 128px; |
||||
height: 40px; |
||||
border-radius: 20px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background: #b99c65; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.hover { |
||||
border: 1px solid #ccc !important; |
||||
color: #ccc !important; |
||||
font-size: 16px !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
|
||||
@ -1,8 +1,198 @@ |
||||
<template> |
||||
<view class="container"> |
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil"> |
||||
<block slot="backText">返回</block> |
||||
<block slot="content">对账单详情</block> |
||||
</cu-custom> |
||||
<view class="body"> |
||||
<view class="borderItem"> |
||||
<text>结算周期：</text> |
||||
<view>{{detailsData.beginReconciliationTime}}至 {{detailsData.endReconciliationTime}}</view> |
||||
</view> |
||||
<view class="borderItem"> |
||||
<text>上期结转金额：</text>{{detailsData.lastBalance}} |
||||
</view> |
||||
<view class="borderItem"> |
||||
<text>打款金额：</text>{{detailsData.amount}} |
||||
</view> |
||||
<view class="borderItem"> |
||||
<text>消耗体积：</text>{{detailsData.volume}} |
||||
</view> |
||||
<view class="borderItem"> |
||||
<text>结算金额：</text>{{detailsData.statementAmount}} |
||||
</view> |
||||
<view class="borderItem"> |
||||
<text>余额：</text>{{detailsData.balance}} |
||||
</view> |
||||
<view class="borderItem"> |
||||
<text>充值应返返利金额：</text>{{detailsData.rechargeRebateAmount?detailsData.rechargeRebateAmount:0}} |
||||
</view> |
||||
<view class="borderItem"> |
||||
<text>充值已返返利金额：</text>{{detailsData.realRechargeRebateAmount?detailsData.realRechargeRebateAmount:0}} |
||||
</view> |
||||
<view class="borderItem"> |
||||
<text>消费应返返利金额：</text>{{detailsData.consumeRebateAmount?detailsData.consumeRebateAmount:0}} |
||||
</view> |
||||
<view class="borderItem"> |
||||
<text>消费已返返利金额：</text>{{detailsData.realConsumeRebateAmount?detailsData.realConsumeRebateAmount:0}} |
||||
</view> |
||||
<view class="borderarea"> |
||||
<view>备注：</view> |
||||
<view class="uni-textarea" style="height: 100rpx;"> |
||||
<textarea style="height: 100rpx;" v-model="detailsData.remark" /> |
||||
</view> |
||||
</view> |
||||
<view v-if="detailsData.signatureUrl"> |
||||
<image :src="detailsData.signatureUrl" style="height: 240rpx;"></image> |
||||
</view> |
||||
<view> |
||||
<view class="footer"> |
||||
<view v-if="detailsData.status==1" class="button" @click="updateStatus(3)">金额有误</view> |
||||
<view v-if="!detailsData.signatureUrl&&detailsData.status==1" class="button" @click="toAutograph">确认无误并签字</view> |
||||
<view v-if="detailsData.signatureUrl&&detailsData.status==1" class="button" @click="updateStatus(2)">保存并提交</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import serve from '@/api/packageElectron/packageElectron.js' |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
detailsData:{} |
||||
} |
||||
}, |
||||
|
||||
onLoad(option) { |
||||
if(option!='{}'){ |
||||
let stationData = JSON.parse(option.data) |
||||
this.detailsData = stationData |
||||
} |
||||
|
||||
}, |
||||
|
||||
methods: { |
||||
toAutograph(){ |
||||
let stationInfo = JSON.stringify(this.detailsData) |
||||
uni.redirectTo({ |
||||
url: `../components/autograph?data=${stationInfo}` |
||||
}) |
||||
}, |
||||
updateStatus(val){ |
||||
if(val==3){ |
||||
this.detailsData.signatureUrl = '' |
||||
delete this.detailsData.signatureUrl |
||||
} |
||||
this.detailsData.status = val |
||||
serve.update(this.detailsData).then(res=>{ |
||||
if (res.code === 20000) { |
||||
uni.showToast({ |
||||
title: res.msg, |
||||
icon: 'none' |
||||
}) |
||||
wx.redirectTo({ |
||||
url: `../index` |
||||
}) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
<style lang="scss" scoped> |
||||
.container { |
||||
height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
background: #f1f2f7 !important; |
||||
|
||||
.body { |
||||
height: calc(100vh - 48rpx); |
||||
margin: 24rpx; |
||||
background: #ffffff; |
||||
padding: 30rpx; |
||||
border-radius: 20rpx; |
||||
|
||||
.borderItem { |
||||
border-bottom: 1px solid #aaaaaa; |
||||
margin: 15rpx 0; |
||||
>text{ |
||||
display: inline-block; |
||||
width: 300rpx; |
||||
} |
||||
} |
||||
|
||||
>view:nth-child(1) { |
||||
margin: 0; |
||||
padding: 0 0 30rpx 0; |
||||
font-size: 32rpx; |
||||
} |
||||
|
||||
.borderarea { |
||||
display: flex; |
||||
|
||||
>view:nth-child(1) { |
||||
|
||||
width: 100rpx; |
||||
} |
||||
|
||||
>view:nth-child(2) { |
||||
|
||||
width: 550rpx; |
||||
|
||||
>textarea { |
||||
width: 550rpx; |
||||
height: 300rpx; |
||||
border: 1px solid #aaaaaa; |
||||
} |
||||
} |
||||
} |
||||
.footer { |
||||
position: relative; |
||||
height: 58rpx; |
||||
line-height: 58rpx; |
||||
padding: 0 34rpx 40rpx; |
||||
font-size: 32rpx; |
||||
color: #000; |
||||
font-weight: 550; |
||||
margin-top: 40rpx; |
||||
|
||||
.button { |
||||
position: absolute; |
||||
top: 0; |
||||
width: 220rpx; |
||||
height: 58rpx; |
||||
line-height: 58rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
color: #fff; |
||||
border-radius: 10rpx; |
||||
} |
||||
|
||||
>.button { |
||||
&:nth-of-type(1) { |
||||
right: 260rpx; |
||||
background: #d9001b; |
||||
} |
||||
|
||||
&:nth-of-type(2) { |
||||
right: 0rpx; |
||||
background: #169bd5; |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue