175 lines
4.6 KiB
Vue
175 lines
4.6 KiB
Vue
<template>
|
|
<view class="component">
|
|
<view class="layout-model">
|
|
<view class="index-h2">
|
|
<view class="big">交易模式</view>
|
|
<view class="more">更多</view>
|
|
</view>
|
|
<view class="model-box flex justify-between flex-wrap">
|
|
<view class="w-50p">
|
|
<view class="item" @click="jump('/pages/article/info?id=6583beb165234188b3be6732')">
|
|
<view class="model flex justify-center align-center">
|
|
<view class="icon">
|
|
<image class="full" src="/static/img/abc-1.jpg" mode=""></image>
|
|
</view>
|
|
<view class="name">自主交易</view>
|
|
</view>
|
|
<view class="text">贷款直付销售商</view>
|
|
<view class="text">双方平台保证金</view>
|
|
<view class="link">交易流程></view>
|
|
</view>
|
|
</view>
|
|
<view class="w-50p">
|
|
<view class="item" @click="jump('/pages/article/info?id=6583bec8189f86d49ba8a58a')">
|
|
<view class="model flex justify-center align-center">
|
|
<view class="icon">
|
|
<image class="full" src="/static/img/abc-2.jpg" mode=""></image>
|
|
</view>
|
|
<view class="name">金久信公正</view>
|
|
</view>
|
|
<view class="text">贷款直付销售商</view>
|
|
<view class="text">交易成功后支付至销售商</view>
|
|
<view class="link">交易流程></view>
|
|
</view>
|
|
</view>
|
|
<view class="w-50p">
|
|
<view class="item" @click="jump('/pages/article/info?id=6583bee1fe975f47a5931867')">
|
|
<view class="model flex justify-center align-center">
|
|
<view class="icon">
|
|
<image class="full" src="/static/img/nav-8-0.png" mode=""></image>
|
|
</view>
|
|
<view class="name">信誉采购</view>
|
|
</view>
|
|
<view class="text">平台接受信誉采购的销售商</view>
|
|
<view class="text">进行交易、到期后结算</view>
|
|
<view class="link">交易流程></view>
|
|
</view>
|
|
</view>
|
|
<view class="w-50p">
|
|
<view class="item" @click="jump('/pages/article/info?id=6583bef3f08210d4b8a10e8a')">
|
|
<view class="model flex justify-center align-center">
|
|
<view class="icon">
|
|
<image class="full" src="/static/img/nav-1-0.png" mode=""></image>
|
|
</view>
|
|
<view class="name">金久信自营</view>
|
|
</view>
|
|
<view class="text">贷款直付平台</view>
|
|
<view class="text">交易成功后支付至销售商</view>
|
|
<view class="link">交易流程></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLogin: false,
|
|
}
|
|
},
|
|
methods: {
|
|
jump(url) {
|
|
vk.navigateTo(url)
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.layout-model {
|
|
// width: 690rpx;
|
|
padding: 10rpx 30rpx;
|
|
|
|
.model-box {
|
|
padding: 10rpx 0;
|
|
|
|
.item {
|
|
margin: 10rpx;
|
|
//width: 294rpx;
|
|
// min-height: 160rpx;
|
|
height: 270rpx;
|
|
//padding: 20rpx;
|
|
background: #ffffff;
|
|
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.12);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
flex-direction: column;
|
|
|
|
&:nth-last-of-type(1) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&:nth-last-of-type(2) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ing {
|
|
width: 120rpx;
|
|
height: 44rpx;
|
|
padding-left: 6rpx;
|
|
color: #ffffff;
|
|
background: url('~@/static/img/ing.png') center no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
color: #999999;
|
|
text-align: center;
|
|
}
|
|
|
|
.link {
|
|
margin: 10rpx auto 0;
|
|
width: 140rpx;
|
|
height: 44rpx;
|
|
font-size: 24rpx;
|
|
line-height: 44rpx;
|
|
text-align: center;
|
|
color: #A92924;
|
|
border: 1px solid #A92924;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.model {
|
|
padding: 6rpx 0;
|
|
margin-bottom: 10rpx;
|
|
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.name {
|
|
position: relative;
|
|
padding-left: 20rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
line-height: 48rpx;
|
|
color: #101010;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -1px;
|
|
z-index: 9;
|
|
margin-left: -30rpx;
|
|
content: '';
|
|
width: 60rpx;
|
|
height: 2px;
|
|
background: #A92924;
|
|
}
|
|
}
|
|
}
|
|
</style>
|