小程序上实现房贷计算
- 功能：实现房贷计算，区分等额本息，等额本金，查看月供详情
- 效果图
![]()
组件
-
存放路径 components/h-chosen
-
使用 Vant Weapp：https://vant-contrib.gitee.io/vant-weapp/#/home
-
index.wxml
{{name || '请选择'}}
-
index.ts
Component({
/**
* 组件的属性列表
*/
properties: {
actions: {
type: Array,
value: [],
},
value: {
type: String,
value: "",
},
title: {
type: String,
value: "标题",
},
required: {
type: Boolean,
value: false,
},
readonly: {
type: Boolean,
value: false,
},
},/**
* 组件的初始数据
*/
data: {
name: "",
show: false,
},/**
* 组件的方法列表
*/
methods: {
onClickCell() {
this.triggerEvent("click");
if(!this.properties.readonly) {
this.setData({
show: !this.data.show,
});
}
},onClose() {
this.setData({ show: false });
this.triggerEvent("close");},
onSelect(event:any) {
this.triggerEvent("change", event.detail.value);
},
onCancel() {
this.triggerEvent("change", '');
this.setData({ show: false });
}
},observers: {
"value,actions": function (value, actions) {
const Id = String(value);
let name = "";
if (value && actions.length) {
const find = actions.find((el: any) => {
const elId = String(el.value);
return elId === Id;
});
if (find) {
name = find.name;
}
}
this.setData({
name: name || "",
});
},
},
}); -
index.scss
.main-color {
color: #333;
} -
index.json
{
"component": true,
"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-action-sheet": "@vant/weapp/action-sheet/index"
}
}
房贷计算
-
mortgage/index
-
index.wxml
公积金贷款金额(万元)
公积金贷款利率(%)
{{form.loanType === 3 ? '商业贷款金额' : '贷款总额'}}(万元)
利率(%)
开始计算
-
index.ts
Page({
/**
* 页面的初始数据
*/
data: {
form: {
loanType: 1, // 贷款类型
calculationName: '', // 计算方式
total: '', // 贷款金额
commercial: '', // 商贷年限
rate: '', // 利率
repaymentName: '', // 还款方式
accumulationTotal: '', // 公积金金额
accumulationRate: '', // 公积金利率
accumulationYear: '', // 公积金年限
},
loanList: [
{
value: 1,
name: '商业'
},
{
value: 2,
name: '公积金'
},
{
value: 3,
name: '组合贷款'
}
],
calculationList: [
{
value: 1,
name: '按贷款总额'
},
{
value: 2,
name: '按首月还款额计算'
},
],
repaymentList: [
{
value: '等额本息',
name: '等额本息'
},
{
value: '等额本金',
name: '等额本金'
},
],
yearList: [],
benxiObj: {}, // 本息
benjinObj: {}, // 本金
},/**
* 生命周期函数--监听页面加载
*/
onLoad(options: any) {
if (wx.getStorageSync("token") || options?.token) {
if (options?.token) {
wx.setStorageSync("token", JSON.stringify(options.token));
}
this.getData()
}},
getData() {
const newArray: any = []
for (var i = 0; i < 30; i++) {
const num = i + 1
const list = {
value: num,
name: num + '年(' + 12 * num + ')月'
}
newArray.push(list)
}
this.setData({
yearList: newArray
})
},
onChangeName(e: any) {
const { detail, currentTarget } = e;
const { key } = currentTarget.dataset;
this.setData({
...this.data.form,
[key]: detail
})
},
toPercent(point: any) {
var str = Number(point / 100).toFixed(1);
return str;
},
onSubmit() {
const form: any = this.data.form;
if (!form.total) {
wx.showToast({
title: "请输入贷款总额",
icon: 'none'
});
return;
} else if (!form.commercial) {
wx.showToast({
title: "请选择贷款年限",
icon: 'none'
});
return;
} else if (!form.rate) {
wx.showToast({
title: "请输入利率",
icon: 'none'
});
return;
}else if (form.loanType === 3 && !form.accumulationTotal) {
wx.showToast({
title: "请输入公积金贷款金额",
icon: 'none'
});
return;
}else if (form.loanType === 3 && !form.accumulationRate) {
wx.showToast({
title: "请输入公积金贷款利率",
icon: 'none'
});
return;
}else if (form.loanType === 3 && !form.accumulationYear) {
wx.showToast({
title: "请输入公积金贷款年限",
icon: 'none'
});
return;
}
if (form.loanType === 1 || form.loanType === 2) {
// 商业
const benxiObj:any = this.benxi(form.total, form.commercial, form.rate);
const newBenxiObj = {
totalDknum: benxiObj.totalDknum,
year: benxiObj.year,
totalLixi: benxiObj.totalLixi.toFixed(2),
totalPrice: benxiObj.totalPrice.toFixed(2),
yuegong: benxiObj.yuegong.toFixed(2),
monthdataArray: benxiObj.monthdataArray.length > 0 ? benxiObj.monthdataArray.map((el:any) => ({
monthName: el.monthName,
leftFund: el.leftFund.toFixed(2),
yuebenjin: el.yuebenjin.toFixed(2),
yuelixi: el.yuelixi.toFixed(2),
yuegong: (el.yuebenjin + el.yuelixi).toFixed(2),
})) : []
}
const benjinObj:any = this.benjin(form.total, form.commercial, form.rate);
const newBenjinObj = {
totalDknum: benjinObj.totalDknum,
year: benjinObj.year,
totalLixi: benjinObj.totalLixi.toFixed(2),
totalPrice: benjinObj.totalPrice.toFixed(2),
yuegong: benjinObj.yuegong.toFixed(2),
monthdataArray: benjinObj.monthdataArray.length > 0 ? benjinObj.monthdataArray.map((el:any) => ({
monthName: el.monthName,
leftFund: el.leftFund.toFixed(2),
yuebenjin: el.yuebenjin.toFixed(2),
yuelixi: el.yuelixi.toFixed(2),
yuegong: (el.yuebenjin + el.yuelixi).toFixed(2),})) : []
}
this.setData({
benxiObj:newBenxiObj,
benjinObj: newBenjinObj
})
if(form.loanType === 1) {
wx.navigateTo({
url:/homeInfo/pages/calculationResults/index?benxiObj=${JSON.stringify(newBenxiObj)}&benjinObj=${JSON.stringify(newBenjinObj)}&sdlilv=${form.rate}&sdyear=${form.commercial}&sdnum=${form.total}&active=${form.repaymentName}
});
}else {
wx.navigateTo({
url:/homeInfo/pages/calculationResults/index?benxiObj=${JSON.stringify(newBenxiObj)}&benjinObj=${JSON.stringify(newBenjinObj)}&gjjlilv=${form.rate}&gjjyear=${form.commercial}&gjjnum=${form.total}&active=${form.repaymentName}
});
}} else if (form.loanType === 3) {
const benxiObj:any = this.zuhe(1, form.total, form.accumulationTotal, form.commercial, form.accumulationYear, form.rate, form.accumulationRate);
const newBenxiObj = {
totalDknum: benxiObj.totalDknum,
year: benxiObj.year,
totalLixi: benxiObj.totalLixi.toFixed(2),
totalPrice: benxiObj.totalPrice.toFixed(2),
yuegong: benxiObj.yuegong.toFixed(2),
monthdataArray: benxiObj.monthdataArray.length > 0 ? benxiObj.monthdataArray.map((el:any) => ({
monthName: el.monthName,
leftFund: el.leftFund.toFixed(2),
yuebenjin: el.yuebenjin.toFixed(2),
yuelixi: el.yuelixi.toFixed(2),
yuegong: (el.yuebenjin + el.yuelixi).toFixed(2),})) : []
}
const benjinObj:any = this.zuhe(2, form.total, form.accumulationTotal, form.commercial, form.accumulationYear, form.rate, form.accumulationRate);
const newBenjinObj = {
totalDknum: benjinObj.totalDknum,
year: benjinObj.year,
totalLixi: benjinObj.totalLixi.toFixed(2),
totalPrice: benjinObj.totalPrice.toFixed(2),
yuegong: benjinObj.yuegong.toFixed(2),
monthdataArray: benjinObj.monthdataArray.length > 0 ? benjinObj.monthdataArray.map((el:any) => ({
monthName: el.monthName,
leftFund: el.leftFund.toFixed(2),
yuebenjin: el.yuebenjin.toFixed(2),
yuelixi: el.yuelixi.toFixed(2),
yuegong: (el.yuebenjin + el.yuelixi).toFixed(2),})) : []
}this.setData({
benxiObj: newBenxiObj,
benjinObj: newBenjinObj
})
wx.navigateTo({
url:/homeInfo/pages/calculationResults/index?benxiObj=${JSON.stringify(newBenxiObj)}&benjinObj=${JSON.stringify(newBenjinObj)}&sdlilv=${form.rate}&sdyear=${form.commercial}&sdnum=${form.total}&gjjlilv=${form.accumulationRate}&gjjyear=${form.accumulationYear}&gjjnum=${form.accumulationTotal}&active=${form.repaymentName}
});}
},
/**
* 组合贷款计算
* @param type 还款方式
* @param sdnum 商业贷款金额
* @param gjjnum 公积金贷款金额
* @param sdyear 商贷年限
* @param gjjyear 公积金年限
* @param sdlilv 贷款利率
* @param gjjlilv 公积金利率
*/
zuhe(type: number, sdnum: number, gjjnum: number, sdyear: number, gjjyear: number, sdlilv: number, gjjlilv: number) {
var _this = this,
year = sdyear > gjjyear ? sdyear : gjjyear;
if (type == 1) {
var sdObj: any = _this.benxi(sdnum, sdyear, sdlilv);
var gjjObj: any = _this.benxi(gjjnum, gjjyear, gjjlilv);
if (sdObj.monthdataArray.length > gjjObj.monthdataArray.length) {
var mergemonthdataArray = sdObj.monthdataArray.map((item: any, index: number) => {
if (index < gjjObj.monthdataArray.length) {
return {
monthName: item.monthName,
yuelixi: item.yuelixi + gjjObj.monthdataArray[index].yuelixi,
yuebenjin: item.yuebenjin + gjjObj.monthdataArray[index].yuebenjin,
leftFund: item.leftFund + gjjObj.monthdataArray[index].leftFund,
};
} else {
return {
monthName: item.monthName,
yuelixi: item.yuelixi,
yuebenjin: item.yuebenjin,
leftFund: item.leftFund,
};
}
});
} else {
var mergemonthdataArray = gjjObj.monthdataArray.map((item: any, index: number) => {
if (index < sdObj.monthdataArray.length) {
return {
monthName: item.monthName,
yuelixi: item.yuelixi + sdObj.monthdataArray[index].yuelixi,
yuebenjin: item.yuebenjin + sdObj.monthdataArray[index].yuebenjin,
leftFund: item.leftFund + sdObj.monthdataArray[index].leftFund,
};
} else {
return {
monthName: item.monthName,
yuelixi: item.yuelixi,
yuebenjin: item.yuebenjin,
leftFund: item.leftFund,
};
}
});
}
return {
yuegong: sdObj.yuegong + gjjObj.yuegong,
totalLixi: sdObj.totalLixi + gjjObj.totalLixi,
totalPrice: sdObj.totalPrice + gjjObj.totalPrice,
monthdataArray: mergemonthdataArray,
totalDknum: parseFloat(sdObj.totalDknum) + parseFloat(gjjObj.totalDknum),
year: year,
};
} else if (type == 2) {
var sdObj: any = _this.benjin(sdnum, sdyear, sdlilv);
var gjjObj: any = _this.benjin(gjjnum, gjjyear, gjjlilv);
if (sdObj.monthdataArray.length > gjjObj.monthdataArray.length) {
var mergemonthdataArray = sdObj.monthdataArray.map((item: any, index: number) => {
if (index < gjjObj.monthdataArray.length) {
return {
monthName: item.monthName,
yuelixi: item.yuelixi + gjjObj.monthdataArray[index].yuelixi,
yuebenjin: item.yuebenjin + gjjObj.monthdataArray[index].yuebenjin,
leftFund: item.leftFund + gjjObj.monthdataArray[index].leftFund,
};
} else {
return {
monthName: item.monthName,
yuelixi: item.yuelixi,
yuebenjin: item.yuebenjin,
leftFund: item.leftFund,
};
}
});
} else {
var mergemonthdataArray = gjjObj.monthdataArray.map((item: any, index: number) => {
if (index < sdObj.monthdataArray.length) {
return {
monthName: item.monthName,
yuelixi: item.yuelixi + sdObj.monthdataArray[index].yuelixi,
yuebenjin: item.yuebenjin + sdObj.monthdataArray[index].yuebenjin,
leftFund: item.leftFund + sdObj.monthdataArray[index].leftFund,
};
} else {
return {
monthName: item.monthName,
yuelixi: item.yuelixi,
yuebenjin: item.yuebenjin,
leftFund: item.leftFund,
};
}
});
}
return {
yuegong: sdObj.yuegong + gjjObj.yuegong,
totalLixi: sdObj.totalLixi + gjjObj.totalLixi,
totalPrice: sdObj.totalPrice + gjjObj.totalPrice,
yuegongdijian: sdObj.yuegongdijian + gjjObj.yuegongdijian,
totalDknum: parseFloat(sdObj.totalDknum) + parseFloat(gjjObj.totalDknum),
year: year,
monthdataArray: mergemonthdataArray,
};
}},
// 房贷分两种支付方式：等额本息和等额本金，具体公式如下：等额本息：〔贷款本金×月利率×（1＋月利率）＾还款月数〕÷〔（1＋月利率）＾还款月数－1〕等额本金：每月还款金额 = （贷款本金 / 还款月数）+（本金 — 已归还本金累计额）×每月利率其中＾符号表示乘方。2个月就是2次方。
//等额本息计算
benxi(num: any, year: any, lilv: any) {
//每月月供额=〔贷款本金×月利率×(1＋月利率)＾还款月数〕÷〔(1＋月利率)＾还款月数-1〕
var lilvnum: any = Number(Number(lilv / 100).toLocaleString(undefined));
var mouth = parseInt(year) * 12,
mouthlilv = parseFloat(lilvnum) / 12,
dknum = parseFloat(num) * 10000;
//每月月供
var yuegong = (dknum * mouthlilv * Math.pow((1 + mouthlilv), mouth)) / (Math.pow((1 + mouthlilv), mouth) - 1);
//总利息=还款月数×每月月供额-贷款本金
var totalLixi = mouth * yuegong - dknum;
//还款总额 总利息+贷款本金
var totalPrice = totalLixi + dknum,
leftFund = totalLixi + dknum;//循环月份
var monthdataArray = [],
nowmouth = new Date().getMonth(),
realmonth = 0;for (var i = 1; i <= mouth; i++) {
realmonth = nowmouth + i;
var yearlist = Math.floor(i / 12);realmonth = realmonth - 12 * yearlist;
if (realmonth > 12) {
realmonth = realmonth - 12
}
//console.log(realmonth)
//每月应还利息=贷款本金×月利率×〔(1+月利率)还款月数-(1+月利率)(还款月序号-1)〕÷〔(1+月利率)^还款月数-1〕
var yuelixi = dknum * mouthlilv * (Math.pow((1 + mouthlilv), mouth) - Math.pow((1 + mouthlilv), i - 1)) / (Math.pow((1 + mouthlilv), mouth) - 1);
//每月应还本金=贷款本金×月利率×(1+月利率)(还款月序号-1)÷〔(1+月利率)还款月数-1〕
var yuebenjin = dknum * mouthlilv * Math.pow((1 + mouthlilv), i - 1) / (Math.pow((1 + mouthlilv), mouth) - 1);
leftFund = leftFund - (yuelixi + yuebenjin);
if (leftFund < 0) {
leftFund = 0
}
monthdataArray[i - 1] = {
monthName: realmonth + "月",
yuelixi: yuelixi,
yuebenjin: yuebenjin,
//剩余还款
leftFund: leftFund
}
}
return {
yuegong: yuegong,
totalLixi: totalLixi,
totalPrice: totalPrice,
monthdataArray: monthdataArray,
totalDknum: num,
year: year
};
},
//等额本金计算
benjin(num: any, year: any, lilv: any) {
var lilvnum: any = Number(Number(lilv / 100).toLocaleString(undefined));
var mouth = parseInt(year) * 12,
mouthlilv = parseFloat(lilvnum) / 12,
dknum = parseFloat(num) * 10000,
yhbenjin = 0; //首月还款已还本金金额是0
//每月应还本金=贷款本金÷还款月数
var everymonthyh = dknum / mouth
//每月月供额=(贷款本金÷还款月数)+(贷款本金-已归还本金累计额)×月利率
var yuegong = everymonthyh + (dknum - yhbenjin) * mouthlilv;
//每月月供递减额=每月应还本金×月利率=贷款本金÷还款月数×月利率
var yuegongdijian = everymonthyh * mouthlilv;
//总利息=〔(总贷款额÷还款月数+总贷款额×月利率)+总贷款额÷还款月数×(1+月利率)〕÷2×还款月数-总贷款额
var totalLixi = ((everymonthyh + dknum * mouthlilv) + dknum / mouth * (1 + mouthlilv)) / 2 * mouth - dknum;
//还款总额 总利息+贷款本金
var totalPrice = totalLixi + dknum,
leftFund = totalLixi + dknum;//循环月份
var monthdataArray = [],
nowmouth = new Date().getMonth(),
realmonth = 0;for (var i = 1; i <= mouth; i++) {
realmonth = nowmouth + i;
var yearlist = Math.floor(i / 12);realmonth = realmonth - 12 * yearlist;
if (realmonth > 12) {
realmonth = realmonth - 12
}
yhbenjin = everymonthyh * (i - 1);
var yuebenjin = everymonthyh + (dknum - yhbenjin) * mouthlilv;
//每月应还利息=剩余本金×月利率=(贷款本金-已归还本金累计额)×月利率
var yuelixi = (dknum - yhbenjin) * mouthlilv;
leftFund = leftFund - yuebenjin;
if (leftFund < 0) {
leftFund = 0
}
monthdataArray[i - 1] = {
monthName: realmonth + "月",
// yuelixi: yuelixi.toFixed(2),
// //每月本金
// yuebenjin: everymonthyh.toFixed(2),
// //剩余还款
// leftFund: leftFund.toFixed(2)
yuelixi: yuelixi,
//每月本金
yuebenjin: everymonthyh,
//剩余还款
leftFund: leftFund
}
}
return {
// yuegong: yuegong.toFixed(2),
// totalLixi: totalLixi.toFixed(2),
// totalPrice: totalPrice.toFixed(2),
// yuegongdijian: yuegongdijian.toFixed(2),
yuegong: yuegong,
totalLixi: totalLixi,
totalPrice: totalPrice,
yuegongdijian: yuegongdijian,
monthdataArray: monthdataArray,
totalDknum: num,
year: year
}},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return {
path:/homeInfo/pages/mortgage/index,
}
},
onShareTimeline: function () {
return {
query:/homeInfo/pages/mortgage/index?test=1&token=${wx.getStorageSync("token")},
}
}})
-
index.scss
.mortgage-page {
.van-cell {
padding: 13px;
font-size: 16px;
margin-top: 5px;
}
.van-field__label ,.van-field__control {
color: #333 !important;
}
.mortgage-btn {
padding: 24px 13px 24px 12px;
}
} -
index.json
{
"navigationBarTitleText": "房贷计算",
"usingComponents": {
"van-field": "@vant/weapp/field/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-button": "@vant/weapp/button/index",
"HChosen": "/components/h-chosen/index"
}
}
计算结果
-
calculationResults/index
-
index.wxml
贷款总额（万元）
{{benxiObj.totalDknum}}
利息总额（万元）
{{benxiObj.totalLixi}}
还款总额（万元）
{{benxiObj.totalPrice}}
贷款总额（万元）
{{benjinObj.totalDknum}}
利息总额（万元）
{{benjinObj.totalLixi}}
还款总额（万元）
{{benjinObj.totalPrice}}
商业贷款
每月还款（元）
{{ active === '等额本息' ? benxiObj.yuegong : benjinObj.yuegong }}
贷款金额（万元）
{{sdnum}}
利率（%）
{{sdlilv}}
贷款年限（年）
{{sdyear}}
公积金贷款
每月还款（元）
{{benxiObj.yuegong}}
贷款金额（万元）
{{gjjnum}}
利率（%）
{{gjjlilv}}
贷款年限（年）
{{gjjyear}}
以上结果仅供参考，请以当地实际情况为主
查看月供详情
-
index.ts
Page({
/**
* 页面的初始数据
*/
data: {
sdyear: '',
sdnum: '',
sdlilv: '',
gjjyear: '',
gjjlilv: '',
gjjnum: '',
benxiObj: {},
benjinObj: {},
active: '等额本息'
},/**
* 生命周期函数--监听页面加载
*/
onLoad(options:any) {
if(options.sdlilv || options.gjjlilv) {
this.setData({
sdlilv: options.sdlilv,
sdnum: options.sdnum,
sdyear: options.sdyear,
gjjyear: options.gjjyear,
gjjlilv: options.gjjlilv,
gjjnum: options.gjjnum,
active: options.active ? options.active : this.data.active,
benxiObj: JSON.parse(options.benxiObj),
benjinObj: JSON.parse(options.benjinObj),
})
}},
/**
* 生命周期函数--监听页面显示
*/
onShow() {},
onChange(e:any) {
this.setData({
active: e.detail.name
})},
onDetail() {
const tmp:any = this.data;
const monthdataArray = this.data.active === '等额本息' ? tmp.benxiObj.monthdataArray : tmp.benjinObj.monthdataArray;
wx.navigateTo({
url:/homeInfo/pages/monthlySupply/index?monthdataArray=${JSON.stringify(monthdataArray)}
});},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {},
}) -
index.scss
.calculationResults {
.calculationResults-top {
padding: 10px;
margin-top: 5px;
&.calculationResults-top {
margin-bottom: 15px;}
.calculation-type {
margin-bottom: 5px;
}
view {
line-height: 22px;
}
.calculation-total {
margin-bottom: 10px;
}
.gjj-box {
margin-top: 15px;
}}
.title {
padding-left: 10px;
}
.calculationResults-btn {
padding: 24px 13px 24px 12px;
}}
-
index.json
{
"navigationBarTitleText": "计算结果",
"usingComponents": {
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index",
"van-button": "@vant/weapp/button/index",
"van-row": "@vant/weapp/row/index",
"van-col": "@vant/weapp/col/index"
}
}
月供详情
-
monthlySupply/index
-
index.wxml
{{attrItem.title}}
{{item.monthName}}
{{item.yuegong}}
{{item.yuebenjin}}
{{item.yuelixi}}
{{item.leftFund}}
-
index.ts
Page({
/**
* 页面的初始数据
*/
data: {
monthdataArray: [],dataAttribute: [
{
title: '月份',
},
{
title: '月供(元)',
},
{
title: '本金(元)',
},
{
title: '利息(元)',
},
{
title: '剩余贷款(元)',
},],
// tableHeight: (20 + 1) * 96,
// tableWidth: 200 * 6 + 60},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options:any) {
if(options.monthdataArray) {
this.setData({
monthdataArray: JSON.parse(options.monthdataArray)
})
}
},/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {},
/**
* 生命周期函数--监听页面显示
*/
onShow() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {}
}) -
index.scss
.table{
display: block;
position: relative;
overflow: scroll;
width: 100%;
height: 100%;.table__head{
height: 96rpx;
white-space: nowrap;
position: sticky;
top: 0rpx;
z-index: 100;
height: 88rpx;
font-size: 24rpx;
line-height: 88rpx;
color: #aaabbd;
background-color: #f8f8f8;
border-bottom: 2rpx solid #ecf1f8;
background-color: #fff;
white-space: nowrap;
display: flex;
}
.table__head__td{
width: 25%;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #fff;
box-sizing: border-box;
position: relative;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
&:first-child {
padding-left: 10px;
box-sizing: border-box;
}
}.table__head__td__text{
display: inline;
}
.table__row{
position: relative;
height: 96rpx;
white-space: nowrap;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 2rpx solid #ecf1f8;
}
.table__row__td{
white-space: nowrap;
width: 25%;
display: inline-block;
background-color: #fff;
box-sizing: border-box;
font-size: 26rpx;
line-height: 96rpx;
position: relative;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
&:first-child {
padding-left: 10px;
box-sizing: border-box;
}
}
} -
index.json
{
"navigationBarTitleText": "月供详情",
"usingComponents": {}
}
浙公网安备 33010602011771号