Real case of front-end uniapp request (with source code)

Directory

    • Case number one
    • Case 2
    • at last

Case 1

<template>
<view class="box">
<!-- <view class="title-back" @click="backPrivious"> & amp;lt;</view> -->
<!--
<view class="title-back" @click="backPrivious">
< </view> -->

<view class="currentLimit">
<!-- All -->
<view class="currentLimit-half" v-if="itemIndex === 1">
The current loan amount that can be applied for is <text>{<!-- -->{money2}}</text> yuan
</view>
<!-- half -->
<view class="currentLimit-half" v-if="itemIndex === 2">
The current loan amount that can be applied for is <text>{<!-- -->{money2}}</text> yuan
</view>
<!-- a quarter a quarter-->

<view class="currentLimit-half" v-if="itemIndex === 3">
The current loan amount that can be applied for is <text>{<!-- -->{money2}}</text> yuan
</view>

<!-- <view class="currentLimitImg" v-if="bank_open">
<image src="../../static/withdrawalimg.png" mode="aspectFill"></image>
</view> -->
<view class="currentLimit-txt">
<view class="currentLimit-txt-btm">
I want to raise the amount
</view>
<view class="currentLimit-txt-lft">
If you want a higher loan limit, try raising it!
</view>
</view>

<view class="currentLimit-ipt">
<text>¥</text> <input v-model="money" class="unir" type="number"
placeholder-class="currentLimit-ipt-placeholder" placeholder="" />
<image src="../../static/delete.png" mode="aspectFill" @click="getClear"></image>
</view>

<view class="currentLimit-tab">
<view class="currentLimit-tab1" :class="{active:itemIndex == 1}" @click="get1(1)">
Apply in full
</view>
<view class="currentLimit-tab1 currentLimit-tab2" :class="{active:itemIndex == 2}" @click="get1(2)">
1/2
</view>
<view class="currentLimit-tab1 currentLimit-tab2" :class="{active:itemIndex == 3}" @click="get1(3)">
1/4
</view>
</view>
</view>
<!-- annualcargo -->
<view class="annualcargo">
<view class="annualcargo-list">
<view class="annualcargo-list-lft">
loan term
</view>
<view class="annualcargo-list-rgt">
<!-- Please select <image src="../../static/right.png" mode="aspectFill"></image> -->
<uni-data-select v-model="value1" :localdata="term_listArray" @change="change">
</uni-data-select>
<image src="/static/right.png" mode="aspectFill"></image>
</view>
</view>
<view class="annualcargo-list">
<view class="annualcargo-list-lft">
Annualized interest rate<image src="../../static/access.png" mode="aspectFill"></image>
</view>
<view class="annualcargo-list-rgt2">
{<!-- -->{interest_rate}}%
</view>
</view>
<view class="annualcargo-list">
<view class="annualcargo-list-lft">
Loan signing account number
</view>
<view class="annualcargo-list-rgt">
<!-- Please select <image src="../../static/right.png" mode="aspectFill"></image> -->
\t\t\t\t\t
<uni-data-select v-model="value2" :localdata="account_listArray" @change="change">
</uni-data-select>
<!-- Please select -->
<image src="/static/right.png" mode="aspectFill"></image>
</view>
</view>
<view class="annualcargo-list">
<view class="annualcargo-list-lft">
\t\t\t\t\tUse of the loan
</view>
<view class="annualcargo-list-rgt3">
Production and operation
</view>
</view>
</view>

<!--statement -->
<view class="statement">
<view class="statement-txt">
Purpose Commitment Statement: The company promises that the borrowings will only be used for daily production and operation turnover.
Not used for stock market and securities investment, financial derivatives, equity investment, fixed asset investment
Or production, business areas and other consumption and investment activities prohibited by relevant national laws, regulations and rules.
<text>Copy and paste</text>
</view>
<view class="statement-textarea">
Please copy the previous paragraph into this text box before proceeding to the next step.
</view>
</view>

<view class="statementTey">
\t\t\tNext step
</view>
<view class="statementTeyTop">

</view>
</view>
</view>
</template>

<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
money: '',
money2: '',
itemIndex: 1,
money: '',
bank_open: '',
interest_rate: '',
value1: '',
value2: '',
range: [{<!-- -->
value: 0,
text: "USD($)"
},
{<!-- -->
value: 1,
text: "Renminbi (CNY)"
},

],
term_listArray: [],
account_listArray: []
}
},
onLoad() {<!-- -->
this.getCurrentMoney()
},
methods: {<!-- -->
change(e) {<!-- -->
console.log("e:", e);
this.money_type = e;
},
backPrivious() {<!-- -->
uni.navigateBack({<!-- -->
delta: 1
});
},
get1(index) {<!-- -->
this.itemIndex = index;
\t\t\t\t
if(index == 1){<!-- -->
this.money = this.money2
}else if(index == 2){<!-- -->
this.money = this.money/2
}else if(index == 3){<!-- -->
this.money = this.money/2
}
},
getCurrentMoney() {<!-- -->
let self = this;
uni.request({<!-- -->
url: 'http://dkmoni.yunjingwl.com/index.php/api/index/getGeti',
method: 'POST',
data: {<!-- -->},
success: (res) => {<!-- -->
console.log(res.data.data.val, 'ressssssssss');
self.money = res.data.data.val.money;
self.money2 = res.data.data.val.money;
\t\t\t\t\t\t
\t\t\t\t\t\t
self.bank_open = res.data.data.val.bank_open;
self.interest_rate = res.data.data.val.interest_rate;

// self.term_list = res.data.data.val.term_list;

// console.log(res.data.data.val.term_list, 'res.data.data.val.term_lis');
let term_listArray = [];
res.data.data.val.term_list.forEach((item, index) => {<!-- -->
term_listArray.push({<!-- -->
value: index,
text:item
})
// console.log(item,'itemmm');
// console.log(term_listArray, 'term_listArray');
})
self.term_listArray = term_listArray;
// console.log(term_listArray,'term_listArray');




// self.account_list = res.data.data.val.account_list;
let account_listArray = [];
res.data.data.val.account_list.forEach((item, index) => {<!-- -->
account_listArray.push({<!-- -->
value: index,
text:item
})
// console.log(item,'itemmm');
// console.log(term_listArray, 'term_listArray');
})
self.account_listArray = account_listArray;




// if (res.data & amp; & amp; res.statusCode === 200) {<!-- -->
// // Request successfully processed
// } else {<!-- -->
// // Request failure handling
// console.error('Request failed', res);
// }
},
});
},
getClear(){<!-- -->
this.money = ''
}
}
}
</script>

<style scoped>
page {<!-- -->
background-color: #F8F9FA;
}

.box {<!-- -->}

.currentLimit {<!-- -->
width: 100vw !important;
background-color: #FFF;
}

.currentLimit-half {<!-- -->
padding: 20rpx 30rpx 10rpx 30rpx;
box-sizing: border-box;
font-size: 28rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #666666;
line-height: 50rpx;
}

.currentLimit-half text {<!-- -->
font-size: 28rpx;
font-family: ;
/* font-family: Source Han Sans CN-Regular, Source Han Sans CN; */
font-weight: 400;
color: #4E73D4;
line-height: 50rpx;
}

.currentLimitImg {<!-- -->
width: 182rpx;
height: 40rpx;
margin-left: 30rpx;
}

.currentLimitImg image {<!-- -->
width: 182rpx;
height: 40rpx;
}

.currentLimit-txt {<!-- -->
/* float: right; */
display: flex;
align-items: center;
padding-right: 20rpx;
flex-direction: row-reverse;
}

.currentLimit-txt-lft {<!-- -->
font-size: 26rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #9B9B9B;
line-height: 32rpx;
}

.currentLimit-txt-btm {<!-- -->
width: 160rpx;
height: 60rpx;
background: #4A7AE0;
border-radius: 232rpx 232rpx 232rpx 232rpx;
opacity: 1;
font-size: 28rpx;
font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
font-weight: normal;
color: #FFFFFF;
line-height: 40rpx;
display: flex;
justify-content: center;
align-items: center;
margin-left: 10rpx;
}

.currentLimit-ipt {<!-- -->
/* height: 150rpx; */
height: 120rpx;
opacity: 1;
display: flex;
align-items: center;
padding-left: 20rpx;
border-bottom: 2rpx solid #F4F4F4;
}

.currentLimit-ipt text {<!-- -->
font-size: 56rpx;
font-family: MicrosoftYaHei-, MicrosoftYaHei;
font-weight: normal;
color: #000000;
line-height: 32rpx;
}

.currentLimit-ipt input {<!-- -->
font-size: 90rpx;
font-family: HarmonyOS Naskh Arabic UI-Regular, HarmonyOS Naskh Arabic UI;
font-weight: 400;
color: #000000;
line-height: 0rpx;
}

.currentLimit-tab {<!-- -->
padding: 24rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
margin-left: 16rpx;
}

.currentLimit-tab1 {<!-- -->
width: 144rpx;
height: 44rpx;
background: #F8F9FA;
border-radius: 74rpx 74rpx 74rpx 74rpx;
opacity: 1;
font-size: 24rpx;
font-family: MicrosoftYaHei-, MicrosoftYaHei;
font-weight: normal;
color: #999999;
line-height: 32rpx;
display: flex;
justify-content: center;
align-items: center;
border: 2rpx solid #F8F9FA;
}

.active {<!-- -->
width: 144rpx;
height: 44rpx;
background: #EEF2FE;
border-radius: 74rpx 74rpx 74rpx 74rpx;
opacity: 0.5;
border: 2rpx solid #4A7AE0;
font-size: 24rpx;
font-family: MicrosoftYaHei-, MicrosoftYaHei;
font-weight: normal;
color: #5D77BA;
display: flex;
justify-content: center;
align-items: center;
}



.currentLimit-tab2 {<!-- -->
margin-left: 32rpx;
}

.annualcargo {<!-- -->
margin-top: 24rpx;
background-color: #FFF;
}

.annualcargo-list {<!-- -->
/* padding: 34rpx 32rpx 32rpx 30rpx; */
padding: 34rpx 22rpx 32rpx 30rpx;
display: flex;
justify-content: space-between;
border-bottom: 2rpx solid #F4F4F4;
}

.statement {<!-- -->
margin-top: 24rpx;
background-color: #FFF;
padding-bottom: 12rpx;
}

.statement-txt {<!-- -->
padding: 30rpx 38rpx 32rpx 30rpx;
box-sizing: border-box;
font-size: 24rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #666666;
line-height: 36rpx;
}

.statement-txt text {<!-- -->
font-size: 24rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #408ACB;
line-height: 44rpx;
border-bottom: 1rpx solid #408ACB;
float: right;
}

.statement-textarea {<!-- -->
margin: 5rpx 32rpx 32rpx 32rpx;
padding-bottom: 32rpx;

width: 686rpx;
height: 336rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
border: 2rpx solid #999999;
}

.statementTey {<!-- -->
width: 714rpx;
height: 84rpx;
background: #4A7AE0;
border-radius: 137rpx 137rpx 137rpx 137rpx;
opacity: 1;
font-size: 32rpx;
font-family: MicrosoftYaHei-, MicrosoftYaHei;
font-weight: normal;
color: #FFFFFF;
line-height: 36rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 32rpx auto;
}

.statementTeyTop {<!-- -->
height: 44rpx;
}

.annualcargo-list-lft {<!-- -->
display: flex;
align-items: center;
font-size: 32rpx;
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
font-weight: normal;
color: #3D3D3D;
line-height: 50rpx;
}

.annualcargo-list-lft image {<!-- -->
width: 24rpx;
height: 24rpx;
margin-left: 10rpx;
}

.statement-textarea {<!-- -->
font-size: 28rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #666666;
/* line-height: 44rpx; */
padding-top: 28rpx;
padding-left: 22rpx;
box-sizing: border-box;
}

.annualcargo-list-rgt {<!-- -->
font-size: 28rpx;
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
font-weight: normal;
color: #999999;
line-height: 50rpx;
display: flex;
align-items: center;
}

/deep/.annualcargo-list-rgt .uni-select {<!-- -->
border: none;
/* width: 130rpx; */
position: relative;
left: 10rpx;


}

/deep/ .annualcargo-list-rgt .uni-select__input-placeholder {<!-- -->
font-size: 28rpx !important;
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular !important;
font-weight: normal !important;
color: #999999 !important;
line-height: 50rpx !important;
}
\t
/deep/ .annualcargo-list-rgt .uni-select__input-text{<!-- -->
font-size: 28rpx;
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
font-weight: normal;
color: #3D3D3D;
line-height: 50rpx;
}

.annualcargo-list-rgt image {<!-- -->
/* border: 1rpx solid red; */
width: 40rpx;
height: 40rpx;
position: relative;
/* left: 3rpx; */
}

.annualcargo-list-rgt2 {<!-- -->
font-size: 28rpx;
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
font-weight: normal;
color: #3D3D3D;
line-height: 50rpx;
margin-right: 10rpx;
}

.annualcargo-list-rgt3 {<!-- -->
font-size: 28rpx;
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
font-weight: normal;
color: #3D3D3D;
line-height: 50rpx;
margin-right: 10rpx;
}

.currentLimit-ipt input {<!-- -->
width: 620rpx;
}

.currentLimit-ipt image {<!-- -->
width: 40rpx;
height: 40rpx;
}
</style>

Case 2

<template>
<view class="box">
<!-- <view class="title-back" @click="backPrivious"> & amp;lt;</view> -->
<!--
<view class="title-back" @click="backPrivious">
< </view> -->

<view class="currentLimit">
<!-- All -->
<view class="currentLimit-half" v-if="itemIndex === 1">
The current loan amount that can be applied for is <text>{<!-- -->{money2}}</text> yuan
</view>
<!-- half -->
<view class="currentLimit-half" v-if="itemIndex === 2">
The current loan amount that can be applied for is <text>{<!-- -->{money2}}</text> yuan
</view>
<!-- a quarter a quarter-->

<view class="currentLimit-half" v-if="itemIndex === 3">
The current loan amount that can be applied for is <text>{<!-- -->{money2}}</text> yuan
</view>

<view class="currentLimitImg" v-if="bank_open">
<image src="../../static/withdrawalimg.png" mode="aspectFill"></image>
</view>
<view class="currentLimit-txt">
<view class="currentLimit-txt-btm">
I want to raise the amount
</view>
<view class="currentLimit-txt-lft">
If you want a higher loan limit, try raising it!
</view>
</view>

<view class="currentLimit-ipt">
<text>¥</text> <input v-model="money" class="unir" type="number"
placeholder-class="currentLimit-ipt-placeholder" placeholder="" />
<image src="../../static/delete.png" mode="aspectFill" @click="getClear"></image>
</view>

<view class="currentLimit-tab">
<view class="currentLimit-tab1" :class="{active:itemIndex == 1}" @click="get1(1)">
Apply in full
</view>
<view class="currentLimit-tab1 currentLimit-tab2" :class="{active:itemIndex == 2}" @click="get1(2)">
1/2
</view>
<view class="currentLimit-tab1 currentLimit-tab2" :class="{active:itemIndex == 3}" @click="get1(3)">
1/4
</view>
</view>
</view>
<!-- annualcargo -->
<view class="annualcargo">
<view class="annualcargo-list">
<view class="annualcargo-list-lft">
\t\t\t\t\tRepayment
</view>
<view class="annualcargo-list-rgt">
<!-- Please select <image src="../../static/right.png" mode="aspectFill"></image> -->
<uni-data-select v-model="value2" :localdata="give_account_listArray" @change="change">
</uni-data-select>
<image src="/static/right.png" mode="aspectFill"></image>
</view>
</view>
<view class="annualcargo-list">
<view class="annualcargo-list-lft">
loan term
</view>
<view class="annualcargo-list-rgt">
<!-- Please select <image src="../../static/right.png" mode="aspectFill"></image> -->
<uni-data-select v-model="value1" :localdata="term_listArray" @change="change">
</uni-data-select>
<image src="/static/right.png" mode="aspectFill"></image>
</view>
</view>
<view class="annualcargo-list">
<view class="annualcargo-list-lft">
Annualized interest rate<image src="../../static/access.png" mode="aspectFill"></image>
</view>
<view class="annualcargo-list-rgt2">
{<!-- -->{interest_rate}}%
</view>
</view>
<!-- <view class="annualcargo-list">
<view class="annualcargo-list-lft">
Loan signing account number
</view>
<view class="annualcargo-list-rgt">
\t\t\t
\t\t\t\t\tplease choose
<image src="/static/right.png" mode="aspectFill"></image>
</view>
</view> -->
<view class="annualcargo-list">
<view class="annualcargo-list-lft">
loan origination account
</view>
<view class="annualcargo-list-rgt3">
{<!-- -->{give_account}}
</view>
</view>
<view class="annualcargo-list">
<view class="annualcargo-list-lft">
\t\t\t\t\tUse of the loan
</view>
<view class="annualcargo-list-rgt3">
Production and operation
</view>
</view>
</view>

<!--statement -->
<view class="statement">
<view class="statement-txt">
Usage Commitment Statement: The enterprise promises that the borrowings will only be used for daily production and operation turnover and will not be used for stock market and securities investment, financial derivatives, equity investment, fixed asset investment, or production, business areas and other consumption prohibited by relevant national laws, regulations and rules. investment behavior. If the use of funds does not meet the above requirements, your bank has the right to withdraw the loan, reduce the credit limit, and pursue corresponding legal liabilities.
<text>Copy and paste</text>
</view>
<view class="statement-textarea">
Please copy the previous paragraph into this text box before proceeding to the next step.
</view>
</view>

<view class="statementTey">
\t\t\tNext step
</view>
<view class="statementTeyTop">

</view>
</view>
</view>
</template>

<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
money: '',
itemIndex: 1,
money: '',
money2: '',
bank_open: '',
interest_rate: '',
value1: '',
value2: '',
range: [{<!-- -->
value: 0,
text: "USD($)"
},
{<!-- -->
value: 1,
text: "Renminbi (CNY)"
},

],
term_listArray: [],
give_account_listArray: [],
give_account: ''
}
},
onLoad() {<!-- -->
this.getCurrentMoney()
},
methods: {<!-- -->
change(e) {<!-- -->
console.log("e:", e);
this.money_type = e;
},
backPrivious() {<!-- -->
uni.navigateBack({<!-- -->
delta: 1
});
},
get1(index) {<!-- -->
this.itemIndex = index

if (index == 1) {<!-- -->
this.money = this.money2
} else if (index == 2) {<!-- -->
this.money = this.money / 2
} else if (index == 3) {<!-- -->
this.money = this.money / 2
}

},
getCurrentMoney() {<!-- -->
let self = this;
uni.request({<!-- -->
url: 'http://dkmoni.yunjingwl.com/index.php/api/index/getCredit',
method: 'POST',
data: {<!-- -->},
success: (res) => {<!-- -->
self.money = res.data.data.val.money;
self.money2 = res.data.data.val.money;


self.bank_open = res.data.data.val.bank_open;
self.interest_rate = res.data.data.val.interest_rate;


// console.log(res.data.data.val, 'ressssssssss');
self.give_account = res.data.data.val.give_account.slice(0, 3) + '*'.repeat(3) + res.data.data.val.give_account.slice(6);



// self.term_list = res.data.data.val.term_list;

// console.log(res.data.data.val.term_list, 'res.data.data.val.term_lis');
let term_listArray = [];
res.data.data.val.term_list.forEach((item, index) => {<!-- -->
term_listArray.push({<!-- -->
value: index,
text:item
})
// console.log(item,'itemmm');
// console.log(term_listArray, 'term_listArray');
})
self.term_listArray = term_listArray;
// console.log(term_listArray,'term_listArray');




// self.account_list = res.data.data.val.account_list;
\t\t\t\t\t\t
let account_listArray = [];
res.data.data.val.term_list.forEach((item, index) => {<!-- -->
account_listArray.push({<!-- -->
value: index,
text:item
})
})
self.account_listArray = account_listArray;


\t\t\t\t
console.log(res.data.data.val.repayment_list, 'ressssssssss');
let give_account_listArray = [];
res.data.data.val.repayment_list.forEach((item, index) => {<!-- -->
give_account_listArray.push({<!-- -->
value: index,
text:item
})
})
self.give_account_listArray = give_account_listArray;



// if (res.data & amp; & amp; res.statusCode === 200) {<!-- -->
// // Request successfully processed
// } else {<!-- -->
// // Request failure handling
// console.error('Request failed', res);
// }
},
});
},
getClear() {<!-- -->
this.money = ''
}
}
}
</script>

<style scoped>
page {<!-- -->
background-color: #F8F9FA;
}

.box {<!-- -->}

.currentLimit {<!-- -->
width: 100vw !important;
background-color: #FFF;
}

.currentLimit-half {<!-- -->
padding: 20rpx 30rpx 10rpx 30rpx;
box-sizing: border-box;
font-size: 28rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #666666;
line-height: 50rpx;
}

.currentLimit-half text {<!-- -->
font-size: 28rpx;
font-family: ;
/* font-family: Source Han Sans CN-Regular, Source Han Sans CN; */
font-weight: 400;
color: #4E73D4;
line-height: 50rpx;
}

.currentLimitImg {<!-- -->
width: 182rpx;
height: 40rpx;
margin-left: 30rpx;
}

.currentLimitImg image {<!-- -->
width: 182rpx;
height: 40rpx;
}

.currentLimit-txt {<!-- -->
/* float: right; */
display: flex;
align-items: center;
padding-right: 20rpx;
flex-direction: row-reverse;
}

.currentLimit-txt-lft {<!-- -->
font-size: 26rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #9B9B9B;
line-height: 32rpx;
}

.currentLimit-txt-btm {<!-- -->
width: 160rpx;
height: 60rpx;
background: #4A7AE0;
border-radius: 232rpx 232rpx 232rpx 232rpx;
opacity: 1;
font-size: 28rpx;
font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
font-weight: normal;
color: #FFFFFF;
line-height: 40rpx;
display: flex;
justify-content: center;
align-items: center;
margin-left: 10rpx;
}

.currentLimit-ipt {<!-- -->
/* height: 150rpx; */
height: 120rpx;
opacity: 1;
display: flex;
align-items: center;
padding-left: 20rpx;
border-bottom: 2rpx solid #F4F4F4;
}

.currentLimit-ipt text {<!-- -->
font-size: 56rpx;
font-family: MicrosoftYaHei-, MicrosoftYaHei;
font-weight: normal;
color: #000000;
line-height: 32rpx;
}

.currentLimit-ipt input {<!-- -->
font-size: 90rpx;
font-family: HarmonyOS Naskh Arabic UI-Regular, HarmonyOS Naskh Arabic UI;
font-weight: 400;
color: #000000;
line-height: 0rpx;
}

.currentLimit-tab {<!-- -->
padding: 24rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
margin-left: 16rpx;
}

.currentLimit-tab1 {<!-- -->
width: 144rpx;
height: 44rpx;
background: #F8F9FA;
border-radius: 74rpx 74rpx 74rpx 74rpx;
opacity: 1;
font-size: 24rpx;
font-family: MicrosoftYaHei-, MicrosoftYaHei;
font-weight: normal;
color: #999999;
line-height: 32rpx;
display: flex;
justify-content: center;
align-items: center;
border: 2rpx solid #F8F9FA;
}

.active {<!-- -->
width: 144rpx;
height: 44rpx;
background: #EEF2FE;
border-radius: 74rpx 74rpx 74rpx 74rpx;
opacity: 0.5;
border: 2rpx solid #4A7AE0;
font-size: 24rpx;
font-family: MicrosoftYaHei-, MicrosoftYaHei;
font-weight: normal;
color: #5D77BA;
display: flex;
justify-content: center;
align-items: center;
}



.currentLimit-tab2 {<!-- -->
margin-left: 32rpx;
}

.annualcargo {<!-- -->
margin-top: 24rpx;
background-color: #FFF;
}

.annualcargo-list {<!-- -->
/* padding: 34rpx 32rpx 32rpx 30rpx; */
padding: 34rpx 22rpx 32rpx 30rpx;
display: flex;
justify-content: space-between;
border-bottom: 2rpx solid #F4F4F4;
}

.statement {<!-- -->
margin-top: 24rpx;
background-color: #FFF;
padding-bottom: 12rpx;
}

.statement-txt {<!-- -->
padding: 30rpx 38rpx 32rpx 30rpx;
box-sizing: border-box;
font-size: 24rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #666666;
line-height: 36rpx;
}

.statement-txt text {<!-- -->
font-size: 24rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #408ACB;
line-height: 44rpx;
border-bottom: 1rpx solid #408ACB;
float: right;
}

.statement-textarea {<!-- -->
margin: 5rpx 32rpx 32rpx 32rpx;
padding-bottom: 32rpx;

width: 686rpx;
height: 336rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
border: 2rpx solid #999999;
}

.statementTey {<!-- -->
width: 714rpx;
height: 84rpx;
background: #4A7AE0;
border-radius: 137rpx 137rpx 137rpx 137rpx;
opacity: 1;
font-size: 32rpx;
font-family: MicrosoftYaHei-, MicrosoftYaHei;
font-weight: normal;
color: #FFFFFF;
line-height: 36rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 32rpx auto;
}

.statementTeyTop {<!-- -->
height: 44rpx;
}

.annualcargo-list-lft {<!-- -->
display: flex;
align-items: center;
font-size: 32rpx;
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
font-weight: normal;
color: #3D3D3D;
line-height: 50rpx;
}

.annualcargo-list-lft image {<!-- -->
width: 24rpx;
height: 24rpx;
margin-left: 10rpx;
}

.statement-textarea {<!-- -->
font-size: 28rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #666666;
/* line-height: 44rpx; */
padding-top: 28rpx;
padding-left: 22rpx;
box-sizing: border-box;
}

.annualcargo-list-rgt {<!-- -->
font-size: 28rpx;
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
font-weight: normal;
color: #999999;
line-height: 50rpx;
display: flex;
align-items: center;
}

/deep/.annualcargo-list-rgt .uni-select {<!-- -->
border: none;
/* width: 130rpx; */
position: relative;
left: 10rpx;


}

/deep/ .annualcargo-list-rgt .uni-select__input-placeholder {<!-- -->
font-size: 28rpx !important;
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular !important;
font-weight: normal !important;
color: #999999 !important;
line-height: 50rpx !important;
}

/deep/ .annualcargo-list-rgt .uni-select__input-text {<!-- -->
font-size: 28rpx;
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
font-weight: normal;
color: #3D3D3D;
line-height: 50rpx;
}

.annualcargo-list-rgt image {<!-- -->
/* border: 1rpx solid red; */
width: 40rpx;
height: 40rpx;
position: relative;
/* left: 3rpx; */
}

.annualcargo-list-rgt2 {<!-- -->
font-size: 28rpx;
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
font-weight: normal;
color: #3D3D3D;
line-height: 50rpx;
margin-right: 10rpx;
}

.annualcargo-list-rgt3 {<!-- -->
font-size: 28rpx;
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
font-weight: normal;
color: #3D3D3D;
line-height: 50rpx;
margin-right: 10rpx;
}

.currentLimit-ipt input {<!-- -->
width: 620rpx;
}

.currentLimit-ipt image {<!-- -->
width: 40rpx;
height: 40rpx;
}
</style>

Finally

If you think the article is good, remember to give it a thumbs up, follow it, and add it to your favorites. Please correct me if there are any mistakes. If you need to reprint it, please indicate the source. Thank you! ! !