|
|
<template>
|
<view style="background: #F7F7F7;min-height: 100vh">
|
|
<view class="content">
|
<view class="li">
|
<view class="col-1">
|
<image class="log" src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" mode=""></image>
|
<view class="title">趣享花</view>
|
</view>
|
<view class="col-2">
|
<view class="left-2">200,000</view>
|
<view class="right-2"> 3 <view style="font-size: 34rpx;display: flex;justify-content: end;margin-left: 8rpx;">%起</view></view>
|
</view>
|
<view class="col-3">
|
<view class="left-3">最高额度(元)</view>
|
<view class="right-3">月利率</view>
|
</view>
|
<button class="but">立即申请</button>
|
</view>
|
<view class="li">
|
<view class="col-1">
|
<image class="log" src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" mode=""></image>
|
<view class="title">趣享花</view>
|
</view>
|
<view class="col-2">
|
<view class="left-2">200,000</view>
|
<view class="right-2"> 3 <view style="font-size: 34rpx;display: flex;justify-content: end;margin-left: 8rpx;">%起</view></view>
|
</view>
|
<view class="col-3">
|
<view class="left-3">最高额度(元)</view>
|
<view class="right-3">月利率</view>
|
</view>
|
<button class="but">立即申请</button>
|
</view>
|
|
</view>
|
<uv-tabbar :value="value" @change="index=>value = index">
|
<uv-tabbar-item text="首页" icon="home-fill"></uv-tabbar-item>
|
<uv-tabbar-item text="合作机构" :icon="`${$images}/static/img/tabbar/cooperate-active.png`"></uv-tabbar-item>
|
<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
|
</uv-tabbar>
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
value: 1
|
};
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
|
.content{
|
padding: 0 20rpx;
|
.li{
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
background: #FFFFFF;
|
padding: 40rpx 20rpx 40rpx 40rpx;
|
position: relative;
|
margin-top: 30rpx;
|
.col-1{
|
display: flex;
|
flex-direction: row;
|
.log{
|
width: 50rpx;
|
height: 50rpx;
|
}
|
.title{
|
color: #252938;
|
font-size: 30rpx;
|
margin-left: 20rpx;
|
}
|
}
|
.col-2{
|
display: flex;
|
flex-direction: row;
|
margin: 14rpx 0;
|
font-weight: bold;
|
color: #252938;
|
.left-2,.right-2{
|
flex: 1;
|
display: flex;
|
flex-direction: row;
|
font-size: 60rpx;
|
line-height: 70rpx;
|
}
|
}
|
.col-3{
|
display: flex;
|
flex-direction: row;
|
|
color: #252938;
|
.left-3, .right-3{
|
flex: 1;
|
font-size: 28rpx;
|
color: #8B8D96;
|
}
|
}
|
|
.but{
|
position: absolute;
|
bottom: 70rpx;
|
right: 20rpx;
|
height: 70rpx;
|
width: 168rpx;
|
background: #4766FE;
|
border-radius: 41rpx 41rpx 41rpx 41rpx;
|
color: white;
|
font-size: 28rpx;
|
}
|
|
}
|
}
|
</style>
|