宜呗小程序--微信小程序
Lzk
2025-08-05 b7bcaf556aa2424e808b6e6426ab22df9cfe11c1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
 
<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>