1. 实现效果
实现要点:
- 处理小数点后两位字体大小;
-
实现点击轮播效果
image.png
image.png
image.png
2. 代码如下
1.html
<!-- 可提示金额 -->
<div slot="bill" class="top-money">
<div class="top-money-left">
<div class="withdrawal-top">
<div>可提现金额 ¥</div>
<div class="go-withdrawal" @click="applyWithdrawalBill"><span>去提现</span> <i class="el-icon-arrow-right"></i></div>
</div>
<div class="withdrawal-cont" v-html="billCashList.canBillCash">{{billCashList.canBillCash}}</div>
<div class="withdrawal-calculate">{{billCashList.totalBillCash}} - {{billCashList.refundBillCash}} - {{billCashList.breachBillCash}}</div>
<div class="withdrawal-calculate">可提现 = 待提现 - 售后待退 - 违约抵扣</div>
</div>
<div class="top-money-right">
<div class="top-money-right-all">
<div class="top-money-right-item" v-for="(item, index) in billCashData" :key="index">
<div class="money-title">{{item.title}} ¥</div>
<div class="money-num" v-html="item.str">{{item.str}}</div>
<div class="money-time">更新时间: {{updateTime | unixToDate}}</div>
</div>
</div>
<div class="arrow-left" @click="handleArrowLeft()" v-if="isShowLeft">
<i class="el-icon-arrow-left"></i>
</div>
<div class="arrow-right" @click="handleArrowRight()" v-if="isShowRight">
<i class="el-icon-arrow-right"></i>
</div>
</div>
</div>
2. js
data() {
return {
rightAllWidthA: '',
/** 显示/隐藏 右箭头 */
isShowRight: false,
/** 显示/隐藏 左箭头 */
isShowLeft: false,
/** 索引 */
index: 0,
/** 右边可视区域的宽 */
boxWidth: '',
/** 每一项的宽 */
boxWidthItem: 271,
/** 点击箭头-移动的距离 */
mobileWidth: 0,
/** 列表loading状态 */
loading: false,
/** 列表参数 */
params: {
pageNum: 1,
pageSize: 10
// isPrepay: 0 // 是否预付款账单 0否 1是
},
/** 列表数据 */
tableData: '',
/** 创建提现申请账单 dialog */
dialogApplyWithdrawalBillVisible: false,
/** 提现账单信息 已处理 */
billCashData: [],
/** 提现账单信息 未处理 */
billCashList: '',
updateTime: ''
}
},
watch: {
mobileWidth: function(newVal) {
if (Math.abs(newVal) > 0) {
this.isShowLeft = true
} else if (Math.abs(newVal) === 0) {
this.isShowLeft = false
}
this.isShowRight = Math.abs(newVal) <= this.rightAllWidthA - this.boxWidth
}
},
methods: {
getRedWidth() {
this.boxWidth = document.querySelector('.top-money-right').offsetWidth
// this.boxWidthItem = document.querySelector('.top-money-right-item').offsetWidth
},
/** 左箭头 */
handleArrowLeft() {
this.index++
this.mobileWidth = this.boxWidthItem * this.index
let rightAllWidth = document.querySelector('.top-money-right-all')
this.rightAllWidthA = rightAllWidth.offsetWidth
rightAllWidth.style.transform = 'translateX' + '(' + this.mobileWidth + 'px' + ')'
},
/** 右箭头 */
handleArrowRight(index) {
this.index--
this.mobileWidth = this.boxWidthItem * this.index
let rightAllWidth = document.querySelector('.top-money-right-all')
this.rightAllWidthA = rightAllWidth.offsetWidth
rightAllWidth.style.transform = 'translateX' + '(' + this.mobileWidth + 'px' + ')'
},
/** 获取账单提现信息 */
GET_BillCashInfo() {
this.loading = true
API_Finance.getBillCashInfo().then(response => {
this.loading = false
this.billCashList = this.MixinClone(response)
this.billCashList.totalBillCash = this.billCashList.totalBillCash.toFixed(2)
this.billCashList.refundBillCash = this.billCashList.refundBillCash.toFixed(2)
this.billCashList.breachBillCash = this.billCashList.breachBillCash.toFixed(2)
this.updateTime = this.billCashList.updateTime
for (let i in response) {
if (i !== 'canBillCash' && i !== 'updateTime' && i !== 'isCashAmount' && i !== 'isMissContract') {
let obj_ = {
key: i,
value: response[i].toFixed(2),
title: '',
str: ''
}
if (i === 'totalBillCash') {
obj_.title = '待提现金额'
} else if (i === 'noBillCash') {
obj_.title = '未出账金额'
} else if (i === 'inRefundBillCash') {
obj_.title = '售后未完成金额'
} else if (i === 'refundBillCash') {
obj_.title = '售后待退金额'
} else if (i === 'breachBillCash') {
obj_.title = '违约代扣金额'
}
let splitPrice = obj_.value.split('.')
obj_.str = `${splitPrice[0]}<span style="font-size:16px; font-weight: 400;">.${splitPrice[1]}</span>`
this.billCashData.push(obj_)
}
if (i === 'canBillCash') {
let splitPrice = response[i].toFixed(2).split('.')
this.billCashList.canBillCash = `${splitPrice[0]}<span style="font-size:16px; font-weight: 400;">.${splitPrice[1]}</span>`
}
}
// 判断初始页面是否显示右箭头
this.isShowRight = this.billCashData.length > Math.ceil(this.boxWidth / this.boxWidthItem)
}).catch(() => { this.loading = false })
},
}
3.css
<style type="text/scss" lang="scss" scoped>
.top-money {
// overflow-x: auto;
display: flex;
height: 200px;
width: 100%;
background-color: #f5f5f5;
border-bottom: 1px solid #e6ebf5;
font-family: PingFangSC, PingFangSC-Regular;
// margin-bottom: 20px;
// background-color: #fff;
.top-money-left {
padding: 17px 20px 20px 20px;
min-width: 340px;
height: 180px;
background: linear-gradient(165deg,#2e80ec 0%, #073be1 100%);
border-radius: 8px;
box-shadow: 0px 2px 4px 0px #8099dd, 0px 0px 15px 0px rgba(0,0,0,0.02);
color: #fff;
.withdrawal-top {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 400;
text-align: left;
line-height: 28px;
letter-spacing: 0.26px;
text-shadow: 0px 2px 4px 0px #8099dd;
.go-withdrawal {
width: 90px;
height: 28px;
border: 1px solid #ffffff;
border-radius: 4px;
// box-shadow: 0px 2px 4px 0px #8099dd;
border: 1px solid #e6ebf5;
text-align: center;
cursor: pointer;
}
}
.withdrawal-cont {
margin-top: 5px;
margin-bottom: 10px;
height: 56px;
font-size: 40px;
font-family: PingFangSC, PingFangSC-Semibold;
font-weight: 600;
// text-align: center;
color: #ffffff;
line-height: 56px;
letter-spacing: 0.68px;
text-shadow: 0px 2px 4px 0px #8099dd;
}
.withdrawal-calculate {
height: 24px;
font-size: 14px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: left;
color: #9fb7f4;
line-height: 24px;
letter-spacing: 0.26px;
text-shadow: 0px 2px 4px 0px #8099dd;
}
}
}
.top-money-right {
position: relative;
// padding: 24px 40px;
padding: 24px 0;
flex: 1;
margin-left: 24px;
// min-width: 996px;
// width: 996px;
width: 100%;
height: 180px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.02);
overflow: hidden;
.top-money-right-all {
// min-width: 996px;
width: 1460px;
height: 100%;
display: flex;
// justify-content: space-evenly;
.top-money-right-item {
height: 100%;
// min-width: 176px;
width: 292px;
text-align: center;
border-right: 1px solid #e6ebf5;
.money-title {
height: 20px;
font-size: 14px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: center;
color: #999999;
line-height: 20px;
letter-spacing: 0.26px;
}
.money-num {
padding-top: 10px;
height: 45px;
font-size: 32px;
font-family: PingFangSC, PingFangSC-Semibold;
font-weight: 600;
color: #333333;
line-height: 45px;
letter-spacing: 0.55px;
}
.money-time {
height: 17px;
font-size: 12px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: center;
color: #999999;
line-height: 17px;
letter-spacing: 0.22px;
padding-top: 39px;
}
}
}
.arrow-left {
width: 35px;
height: 180px;
background: rgba(94,94,94,0.25);
backdrop-filter: blur(3px);
position: absolute;
left: 0;
top: 0px;
line-height: 180px;
text-align: center;
cursor: pointer;
}
.arrow-right {
width: 35px;
height: 180px;
background: rgba(94,94,94,0.25);
backdrop-filter: blur(3px);
position: absolute;
right: 0;
top: 0;
line-height: 180px;
text-align: center;
cursor: pointer;
}
}
</style>
