Skip to content

F
fns_front_2
Commit 38ba0bc4 authored by Zhang Xiaojie's avatar Zhang Xiaojie
Browse files
Options

update:loan UI

parent a8f65574
Hide whitespace changes
Inline Side-by-side
Showing with 28 additions and 228 deletions
src/assets/img/loan_detail_bg.png
View replaced file @ a8f65574 View file @ 38ba0bc4
src/assets/img/loan_detail_bg.png

205 KB | W: | H:

src/assets/img/loan_detail_bg.png

157 KB | W: | H:

src/assets/img/loan_detail_bg.png
src/assets/img/loan_detail_bg.png
src/assets/img/loan_detail_bg.png
src/assets/img/loan_detail_bg.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Loan/LoanCard2/index.vue
View file @ 38ba0bc4
...@@ -60,9 +60,6 @@ export default defineComponent({ ...@@ -60,9 +60,6 @@ export default defineComponent({
justify-content: flex-end; justify-content: flex-end;
padding-bottom: 24px; padding-bottom: 24px;
align-items: center; align-items: center;
position: absolute;
left: 20px;
top: 222px;
.bd12 { .bd12 {
z-index: 15; z-index: 15;
height: 40px; height: 40px;
......
src/views/LoanDetail/index.less
View file @ 38ba0bc4
...@@ -11,96 +11,17 @@ ...@@ -11,96 +11,17 @@
width: 375px; width: 375px;
.block1 { .block1 {
z-index: 3; z-index: 3;
height: 390px;
background: url('../../assets/img/loan_detail_bg.png');
background-size: cover;
width: 375px;
.bd1 { .bd1 {
z-index: 4; z-index: 4;
height: 390px; background: url('../../assets/img/loan_detail_bg.png');
background-size: cover;
width: 375px; width: 375px;
height: 311px;
margin-top: -20px;
.section1 { .section1 {
z-index: auto; z-index: auto;
width: 375px; width: 375px;
height: 390px;
.block2 {
z-index: 37;
height: 88px;
width: 375px;
.section2 {
z-index: auto;
width: 358px;
height: 18px;
margin: 13px 0 0 3px;
.word1 {
z-index: 54;
width: 54px;
display: block;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 15px;
letter-spacing: -0.30000001192092896px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 15px;
text-align: center;
}
.wrap1 {
z-index: 48;
width: 17px;
height: 11px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng39aeef61ebf4c04e189be0f880a1d512b1f31f81101ab4916ee829da20fbd661) -1px -1px
no-repeat;
margin: 5px 0 0 237px;
}
.wrap2 {
z-index: 44;
width: 16px;
height: 11px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8b86eb1dc9460d0dbc2bca7ceceed1b7dcd69dd2157029edccb420d28cf9b047) -1px
0px no-repeat;
margin: 5px 0 0 5px;
}
.icon1 {
z-index: 41;
width: 23px;
height: 8px;
margin: 6px 0 0 6px;
}
}
.section3 {
z-index: auto;
width: 197px;
height: 22px;
margin: 23px 0 0 23px;
.icon2 {
z-index: 62;
width: 10px;
height: 16px;
margin-top: 3px;
}
.icon3 {
z-index: 57;
width: 16px;
height: 16px;
margin: 3px 0 0 33px;
}
.info1 {
z-index: 38;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
margin-left: 73px;
}
}
}
.word2 { .word2 {
z-index: 6; z-index: 6;
display: block; display: block;
...@@ -111,99 +32,6 @@ ...@@ -111,99 +32,6 @@
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
align-self: center; align-self: center;
margin-top: 70px;
}
.block3 {
z-index: 34;
width: 335px;
height: 0px;
border-bottom: 1px solid rgba(167, 178, 227, 0.3);
align-self: center;
margin-top: 22px;
}
.block4 {
z-index: auto;
width: 323px;
height: 20px;
margin: 8px 0 0 26px;
.label1 {
z-index: 22;
width: 16px;
height: 16px;
}
.word3 {
z-index: 19;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(167, 178, 227, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-left: 7px;
}
.label2 {
z-index: 26;
width: 16px;
height: 16px;
margin: 0px 0 0 40px;
}
.info2 {
z-index: 20;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(167, 178, 227, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-left: 12px;
}
.label3 {
z-index: 30;
width: 16px;
height: 16px;
margin: 0px 0 0 41px;
}
.word4 {
z-index: 21;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(167, 178, 227, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-left: 7px;
}
}
.block5 {
z-index: 35;
width: 336px;
height: 0px;
border-bottom: 1px solid rgba(167, 178, 227, 0.3);
align-self: center;
margin-top: 7px;
}
.info3 {
z-index: 7;
display: block;
overflow-wrap: break-word;
color: rgba(167, 178, 227, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-end;
margin: 0 auto;
margin-top: 19px;
} }
} }
} }
......
src/views/LoanDetail/index.vue
View file @ 38ba0bc4
...@@ -144,47 +144,21 @@ export default defineComponent({ ...@@ -144,47 +144,21 @@ export default defineComponent({
onClickSecondIcon={clickChatIcon} onClickSecondIcon={clickChatIcon}
occupyPosition={false} occupyPosition={false}
/> />
<div class="block1 flex-col"> <div class="block1 relative">
<div class="bd1 flex-col"> <div class="bd1 flex-col">
<div class="section1 flex-col"> <div class="section1 flex-col relative">
<span class="word2 w-full break-all">{product_name.value}</span> <span class="word2 w-full break-all mt-24">{product_name.value}</span>
<div class="block3 flex-col" /> <LoanCard2
<div class="block4 flex-row items-center"> class=" absolute mt-36 right-0 left-0 mx-auto"
<icon min_amount={min_amount.value}
class="label1 flex items-center justify-center" max_amount={max_amount.value}
name="icon-gouxuanyangshi" rate_lower={rate_lower.value}
color="#A7B2E3" rate_upper={rate_upper.value}
size="17" setRef={(el: HTMLElement) => {
/> applyEl.value = el;
<span class="word3">额度更优</span> }}
<icon />
class="label2 flex items-center justify-center"
name="icon-gouxuanyangshi"
color="#A7B2E3"
size="17"
/>
<span class="info2">分秒批贷</span>
<icon
class="label3 flex items-center justify-center"
name="icon-gouxuanyangshi"
color="#A7B2E3"
size="17"
/>
<span class="word4">随借随还</span>
</div>
<div class="block5 flex-col" />
<span class="info3">小微企业/个体工商户专属</span>
</div> </div>
<LoanCard2
class=" -mt-4"
min_amount={min_amount.value}
max_amount={max_amount.value}
rate_lower={rate_lower.value}
rate_upper={rate_upper.value}
setRef={(el: HTMLElement) => {
applyEl.value = el;
}}
/>
</div> </div>
</div> </div>
<div class="block7 flex-row"> <div class="block7 flex-row">
......
src/views/withMenu/Loan/index.less
View file @ 38ba0bc4
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
width: 375px; width: 375px;
justify-content: flex-end; justify-content: flex-end;
padding-top:49px; padding-top:49px;
padding-bottom: 17px; padding-bottom: 7px;
align-items: center; align-items: center;
} }
......
src/views/withMenu/Loan/index.vue
View file @ 38ba0bc4
...@@ -23,17 +23,17 @@ ...@@ -23,17 +23,17 @@
> >
</div> </div>
</div> </div>
<div class="main8 flex-col" v-if="eLoanMode.personal === mode"> <!-- <div class="main8 flex-col" v-if="eLoanMode.personal === mode">
<div class=" text-white text-lg flex items-center mt-5 justify-center"> <div class=" text-white text-lg flex items-center mt-5 justify-center">
<div class=" border-b border-white w-14 mr-4 border-opacity-25"></div> <div class=" border-b border-white w-14 mr-4 border-opacity-25"></div>
个人小额借款（元） 个人小额借款（元）
<div class=" border-b border-white w-14 ml-4 border-opacity-25"></div> <div class=" border-b border-white w-14 ml-4 border-opacity-25"></div>
</div> </div>
<!-- <div class="outer4 flex-row"> <div class="outer4 flex-row">
<div class="outer5 flex-col"></div> <div class="outer5 flex-col"></div>
<span class="word26">个人小额借款（元）</span> <span class="word26">个人小额借款（元）</span>
<div class="outer6 flex-col"></div> <div class="outer6 flex-col"></div>
</div> --> </div>
<div class="outer7 flex-row"> <div class="outer7 flex-row">
<div class="section8 flex-col"> <div class="section8 flex-col">
<span class="paragraph1"> <span class="paragraph1">
...@@ -62,15 +62,16 @@ ...@@ -62,15 +62,16 @@
<div class="main22 flex-col"></div> <div class="main22 flex-col"></div>
<span class="word35">灵活快捷</span> <span class="word35">灵活快捷</span>
</div> </div>
</div> </div> -->
<LoanHotSwipe :loanMode="mode" class=" absolute top-0 bottom-0" />
</div> </div>
<!-- 热门贷款 --> <!-- 热门贷款 -->
<GroupTitle title="热门贷款" class="mt-2.5" v-if="count" iconName="" /> <!-- <GroupTitle title="热门贷款" class="mt-2.5" v-if="count" iconName="" /> -->
<LoanHotSwipe :loanMode="mode" class="mt-5" />
<!-- 非热门贷款 --> <!-- 非热门贷款 -->
<GroupTitle <GroupTitle
title="贷款精选" title="贷款精选"
v-if="state.allProductList" v-if="state.allProductList"
class=" mt-24"
@seeMore="$router.push({ name: 'LoanList', params: { mode: mode } })" @seeMore="$router.push({ name: 'LoanList', params: { mode: mode } })"
/> />
<Skeleton <Skeleton
...@@ -208,7 +209,7 @@ const fetchList = () => { ...@@ -208,7 +209,7 @@ const fetchList = () => {
// 取前7贷款产品遍历 // 取前7贷款产品遍历
skeLoading.value = true; skeLoading.value = true;
queryLoanProductList({ queryLoanProductList({
limit: 7, limit: 8,
loan_type: mode.value, loan_type: mode.value,
offset: 0, offset: 0,
}).then((ret) => { }).then((ret) => {
...@@ -224,7 +225,7 @@ const fetchList = () => { ...@@ -224,7 +225,7 @@ const fetchList = () => {
product_name, product_name,
product_status, product_status,
} = ret.data; } = ret.data;
if (count.value < 4) { if (count.value < 5) {
if (product_status == 2) { if (product_status == 2) {
count.value = count.value + 1; count.value = count.value + 1;
state.allProductList.push({ state.allProductList.push({
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment