<template>
|
<div class="loan-detail" v-if="needProdInfo.length>=1">
|
<x-header :left-options="{backText: '', preventGoBack: true}" @on-click-back="goBackPage">{{
|
needProdInfo[0].name}}
|
|
</x-header>
|
<!--产品的基本介绍-->
|
<div class="prod-intro">
|
<div class="logo">
|
<img :src="needProdInfo[0].attrs[0]">
|
</div>
|
<div class="prod-info">
|
<div class="prod-title">
|
{{ needProdInfo[0].attrs[1] }}
|
<span v-if="needProdInfo[0].attrs[2]" class="prod-tag">{{ needProdInfo[0].attrs[2]}}</span>
|
</div>
|
<div class="loan-time">{{ needProdInfo[0].attrs[3] }}</div>
|
<div class="loan-persons">{{ prodDetailInfo.unit.showNumPrefix + prodDetailInfo.unit.showNum }}</div>
|
</div>
|
</div>
|
<!--chart图表的上面的输入框-->
|
<div class="calc-form">
|
<group class="amount">
|
<x-input title="金额" novalidate text-align="right" @input.native="handleInputMoney" :max="5"
|
:show-clear="false" v-model="money" @on-blur="numChange">
|
</x-input>
|
</group>
|
<group class="deadLine">
|
<selector title="期限" :options="termRangeList" v-model="loanTerm" @on-change="monChange"></selector>
|
</group>
|
</div>
|
<!--chart的图表计算-->
|
<div class="loan-scope">
|
<div>额度范围：
|
<span>{{ loanAmtRange }}</span>
|
</div>
|
<div>期限范围：
|
<span>{{ loanTermRange }}</span>
|
</div>
|
</div>
|
<div class="charts">
|
<div class="chart-box">
|
<div class="animate" id="main"></div>
|
<div class="monPayment">{{ timeLimitUnit }}供<br/>{{ monPayment }}元</div>
|
</div>
|
<div class="charts-info">
|
<div>贷款：{{ showMoney }}万元/{{ showLoanTerm }}{{ timeLimitUnit | chartMonth }}</div>
|
<div>利息：{{ showInterest }}元({{ accMulti(showInterestRate, 100)}}%/{{ timeLimitUnit }})</div>
|
<div>服务费：{{ showServerMon }}</div>
|
</div>
|
</div>
|
<!--利率详情的点击按钮，展示详情-->
|
<div class="show-hide" v-show="!showRateDetail" @click="handleExpandClick">
|
{{ needProdInfo[1].name}}
|
<i class="iconfont icon-unfold"></i>
|
</div>
|
<!--利率详情的展示内容-->
|
<div v-show="showRateDetail">
|
<!--利率说明-->
|
<div class="interest-rate">
|
<p class="words-title">{{ needProdInfo[2].name }}</p>
|
<img class="auditInfo" :src="needProdInfo[2].attrs[0]">
|
</div>
|
<!--提前还款-->
|
<div class="prepayment" v-if="needProdInfo[3].attrs[0]">
|
<p class="words-title">{{ needProdInfo[3].name }}</p>
|
<div class="words-content">{{ needProdInfo[3].attrs[0] }}</div>
|
</div>
|
<!--几种费用的区别，这个是固定的，在最后的-->
|
<div class="difference">
|
<p class="words-title">{{ needProdInfo[4].name }}</p>
|
<div class="words-content">
|
<p v-for="(item,index) in needProdInfo[4].attrs" :key="item">{{ item }}</p>
|
</div>
|
</div>
|
</div>
|
<!--利率详情的收起按钮-->
|
<div class="show-hide" @click="handleCollapseClick" v-show="showRateDetail">收起
|
<i class="iconfont icon-fold"></i>
|
</div>
|
<FSpace type="small"></FSpace>
|
<!--申请条件，所学材料，其他说明-->
|
<div class="loan-swiper-box">
|
<tab class="loan-detail-tab" active-color="#0092f1" :line-width="2" v-model="swiperIndex"
|
custom-bar-width="64px" bar-active-color="#0092f1">
|
<tab-item v-for="(item,index) in swiperList"
|
v-if="item.attrs.length && item.attrs[0].info!==''"
|
:key="index"
|
:selected="'申请条件' === item">{{ item.name }}
|
</tab-item>
|
</tab>
|
<swiper v-model="swiperIndex" :show-dots="false">
|
<swiper-item>
|
<p class="swiper-item-content" v-for="(i, index) in swiperList[0].attrs">
|
<span>{{ i.title }}</span>
|
<span>{{ i.info }}</span>
|
</p>
|
</swiper-item>
|
<swiper-item>
|
<p class="swiper-item-content" v-for="(a, index) in swiperList[1].attrs">
|
<label>{{ a.info }}</label><br/>
|
</p>
|
</swiper-item>
|
<swiper-item v-if="swiperList[2].attrs.length && swiperList[2].attrs[0].info!==''">
|
<p class="swiper-item-content" v-for="(b, index) in swiperList[2].attrs">
|
<span>{{ b.info }}</span>
|
</p>
|
</swiper-item>
|
</swiper>
|
</div>
|
<FSpace type="small"></FSpace>
|
<!--申请攻略-->
|
<div class="apply-intro" v-if="needProdInfo[8].attrs[0]!=null">
|
<p class="words-title vux-1px-b">{{ needProdInfo[8].name }}</p>
|
<img class="apply-intro-img" @click="handleApplyRaiders(needProdInfo[8].attrs[0])"
|
:src="needProdInfo[8].attrs[1]">
|
</div>
|
<!--为你优选-->
|
<div class="more-prod" v-if="pushProdList.length">
|
<p class="words-title vux-1px-b">为你优选</p>
|
<FProdList :lists="pushProdList" :showNone="showNone" @on-click-prodItem="handleProductJump"></FProdList>
|
</div>
|
<!--立即申请-->
|
<FButton :isBorderRadius="false" @on-click-button="handleApplyJump" :text="buttonMsg" class="btn">
|
<div slot="sbIphoneX" class="sbIphoneX"></div>
|
</FButton>
|
<FSpace type="large"></FSpace>
|
</div>
|
</template>
|
|
<script>
|
/**
|
* Created by 吴彦祖 on 2018/3/22.
|
* 贷款详情
|
*/
|
import {
|
XHeader,
|
Group,
|
XInput,
|
Selector,
|
Tab,
|
TabItem,
|
Swiper,
|
SwiperItem
|
} from 'vux';
|
import FSpace from '../../components/common/FSpace';
|
import FProdList from '../../components/common/FProdList.vue';
|
import FButton from '../../components/common/FButton.vue';
|
import echarts from 'echarts';
|
import systemApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
import productJump from '../../tool/productRequestJump';
|
import goBackCont from '../common/goBackControl';
|
import pageBack from '../../tool/pageBackByAndroid';
|
|
export default {
|
name: 'f-loan-detail',
|
components: {
|
XHeader,
|
Group,
|
XInput,
|
Selector,
|
FSpace,
|
Tab,
|
TabItem,
|
Swiper,
|
SwiperItem,
|
FProdList,
|
FButton
|
},
|
data() {
|
return {
|
charts: '',
|
isMark: false,
|
opinion: ['贷款', '利息'],
|
opinionData: [
|
{value: 234, name: '利息'},
|
{value: 1548, name: '贷款'}
|
],
|
prodType: null,
|
prodDetailInfo: null, // 产品详情信息
|
pushProductInfos: null, // 为你优选
|
needProdInfo: [], // 组装后的产品详情信息
|
swiperList: [], // 申请条件，所需条件，其他说明数据组装
|
swiperIndex: 0, // swiper初始化选中的值
|
pushProdList: [], // 组装后的为你优选列表
|
showNone: false, //产品列表空白页
|
loanTerm: '', // 贷款的期数
|
showRateDetail: false, // 是否显示利率显示
|
money: '', //用户输入的金额
|
//用于显示图标旁边的贷款金额和贷款期限，不直接绑定输入框的值是防止用户在输入的时候动态的改变
|
showMoney: '', //显示的金额
|
showLoanTerm: '', //显示的期限
|
showInterestRate: '', //显示的利率
|
showInterest: '', //总利息
|
showServerMon: '', //服务费
|
monPayment: '', //月供
|
buttonMsg: '立即申请', // 立即申请四个字由后台返回
|
timeLimitUnit: '' //显示的事件单位
|
};
|
},
|
filters: {
|
// 图表里面的贷款改成个月
|
chartMonth(initVal) {
|
let monthIndex = initVal.indexOf('月');
|
if (monthIndex !== -1) {
|
initVal = initVal.substring(0, monthIndex) + '个月';
|
}
|
return initVal;
|
}
|
},
|
computed: {
|
// 图表上面的额度范围
|
loanAmtRange() {
|
let basic = 10000;
|
let mixLoanAmt =
|
this.prodDetailInfo.unit.mixLoanAmt / basic + '万-';
|
let maxLoanAmt = this.prodDetailInfo.unit.maxLoanAmt / basic + '万';
|
return mixLoanAmt + maxLoanAmt;
|
},
|
// 图表上面的期限范围
|
loanTermRange() {
|
let timeLimitList = this.prodDetailInfo.unit.timeLimitList;
|
let unit = '';
|
this.prodDetailInfo.unit.timeLimitUnit === 1
|
? (unit = '天')
|
: (unit = '个月');
|
return (
|
timeLimitList[0] +
|
`${unit}-` +
|
timeLimitList[timeLimitList.length - 1] +
|
`${unit}`
|
);
|
},
|
// 期限的下拉列表
|
termRangeList() {
|
let termList = [];
|
let unit = '';
|
this.prodDetailInfo.unit.timeLimitUnit === 1
|
? (unit = '天')
|
: (unit = '个月');
|
this.prodDetailInfo.unit.timeLimitList.forEach(function (item) {
|
termList.push({
|
key: item,
|
value: item + unit
|
});
|
});
|
return termList;
|
}
|
},
|
methods: {
|
goBackPage() {
|
goBackCont.goBackFun(this);
|
},
|
accDivision(num1, num2) {
|
let baseNum1 = 0;
|
let baseNum2 = 0;
|
let baseNum3;
|
let baseNum4;
|
try {
|
baseNum1 = num1.toString().split('.')[1].length;
|
} catch (e) {
|
baseNum1 = 0;
|
}
|
try {
|
baseNum2 = num2.toString().split('.')[1].length;
|
} catch (e) {
|
baseNum2 = 0;
|
}
|
baseNum3 = Number(num1.toString().replace('.', ''));
|
baseNum4 = Number(num2.toString().replace('.', ''));
|
return baseNum3 / baseNum4 * Math.pow(10, baseNum2 - baseNum1);
|
},
|
// 处理前端乘法的精度丢失的方法
|
accMulti(arg1, arg2) {
|
let m = 0;
|
let s1 = arg1.toString();
|
let s2 = arg2.toString();
|
try {
|
m += s1.split('.')[1].length;
|
} catch (e) {
|
}
|
try {
|
m += s2.split('.')[1].length;
|
} catch (e) {
|
return (
|
Number(s1.replace('.', '')) *
|
Number(s2.replace('.', '')) /
|
Math.pow(10, m)
|
);
|
}
|
},
|
// 申请攻略的跳转
|
// 申请攻略的type为1为链接，type为2的话是图片
|
// 申请攻略这四个字一定存在，但是showEles不一定存在可能为null
|
// 可能是图片+链接，或者只有图片没链接，或者没有图片和链接，不能是文字
|
handleApplyRaiders(jumpLink) {
|
if (jumpLink) {
|
window.location.href = jumpLink;
|
}
|
return false;
|
},
|
// 用户只能输入点与数字
|
handleInputMoney() {
|
let _this = this;
|
setTimeout(function () {
|
if (_this.money) {
|
// 未超过字符的话，可以其他非要求字符转换为空字符串
|
if (_this.money.length > 5) {
|
_this.money = _this.money.substring(0, 5);
|
} else {
|
_this.money = _this.money.replace(/[^\d.]/g, '');
|
}
|
}
|
}, 50);
|
},
|
// 处理产品跳转
|
handleProductJump(item) {
|
// 极速贷款或者银行卡
|
let _this = this;
|
if (
|
item.productType === 40000005 ||
|
item.productType === 40000006
|
) {
|
this.$router.push({
|
path: '/f-loan-detail',
|
query: {
|
id: item.prodId,
|
t: new Date().getTime()
|
}
|
});
|
// 如果是 当前页面 就是路由跳转后 重新去拉去数据
|
_this.init(item.prodId);
|
// 信用卡
|
} else if (item.productType === 40000007) {
|
this.$router.push({
|
path: '/f-credit-detail',
|
query: {
|
id: item.prodId
|
}
|
});
|
}
|
},
|
drawCharts(id) {
|
this.charts = echarts.init(document.getElementById(id));
|
this.charts.setOption({
|
color: ['#ffa21f', '#ff4d53'],
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a}<br/>{b}:{c} ({d}%)'
|
},
|
legend: {
|
orient: 'vertical',
|
x: 'left',
|
data: this.opinion
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: ['60%', '99%'],
|
avoidLabelOverlap: false,
|
hoverAnimation: false,
|
label: {
|
normal: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
show: false,
|
textStyle: {
|
fontSize: '30',
|
fontWeight: 'blod'
|
}
|
}
|
},
|
labelLine: {
|
normal: {
|
show: false
|
}
|
},
|
data: this.opinionData
|
}
|
]
|
});
|
},
|
numChange() {
|
this.calculateFn();
|
},
|
//用户输入后的计算方法
|
calculateFn() {
|
let reg = /^([1-9]\d{0,7}|0)(\.\d{1,3})?$/;
|
if (!reg.test(this.money)) {
|
this.$vux.toast.text('请输入正确的金额', 'middle');
|
return;
|
}
|
if (
|
Number(this.money) >
|
this.prodDetailInfo.unit.maxLoanAmt / 10000 ||
|
Number(this.money) < this.prodDetailInfo.unit.mixLoanAmt / 10000
|
) {
|
this.$vux.toast.text('请输入额度范围内的金额！', 'middle');
|
return;
|
}
|
//金额
|
this.showMoney = this.money;
|
//期限
|
this.showLoanTerm = this.loanTerm;
|
//总利息
|
this.showInterest = Number(
|
(
|
Number(this.money) *
|
10000 *
|
Number(this.loanTerm) *
|
Number(this.showInterestRate)
|
).toFixed(2)
|
);
|
//图表中心显示的月供或日供
|
this.monPayment = (
|
(Number(this.money) * 10000 + Number(this.showInterest)) /
|
Number(this.loanTerm)
|
).toFixed();
|
let opinionData = [
|
{value: this.showInterest, name: '利息'},
|
{value: this.showMoney * 10000, name: '贷款'}
|
];
|
this.opinionData = JSON.parse(JSON.stringify(opinionData));
|
this.$nextTick(() => {
|
this.drawCharts('main');
|
});
|
},
|
monChange() {
|
this.calculateFn();
|
},
|
// 点击展示详情
|
handleExpandClick() {
|
this.showRateDetail = true;
|
},
|
// 点击收起详情
|
handleCollapseClick() {
|
this.showRateDetail = false;
|
},
|
// 立即申请按钮事件, 此时不需要弹窗点击跳转到登录或实名认证页面
|
// 直接跳转到登录与实名认证的页面
|
handleApplyJump() {
|
let sessionId = window.sessionStorage.getItem('newSid');
|
let isRealName = parseInt(
|
window.sessionStorage.getItem('newClientState')
|
);
|
let _this = this;
|
// 未登录，直接跳转到登录页面
|
if (sessionId === null) {
|
window.sessionStorage.setItem(
|
'newGoBackPage',
|
window.location.hash.split('#')[1]
|
);
|
this.$router.push({name: 'f-login'});
|
// 未实名，直接跳转到实名页面
|
} else if (isRealName === 0) {
|
window.sessionStorage.setItem(
|
'newGoBackPage',
|
window.location.hash.split('#')[1]
|
);
|
this.$router.push({name: 'f-auth'});
|
} else {
|
// 已登录与已实名
|
let _prodId = _this.$route.query.id;
|
let _url = window.location.href;
|
let infoPage = _this.$route.fullPath;
|
_url = encodeURI(_url);
|
systemApi
|
.getVisitUrl({prodId: _prodId, redirectUrl: _url})
|
.then(
|
response => {
|
productJump(response, _this, infoPage);
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error, _this);
|
}
|
);
|
}
|
},
|
/**
|
* 标题与文字的组合，例如icon与文字，左边标题与文字的组合
|
* @param attrList 属性列表
|
* @param titleKey { String } 组合后的titleKey
|
* @param infoKey { String } 组合后的infoKey
|
* @return {Array}
|
*/
|
getCombList(attrList, titleKey, infoKey) {
|
let combList = [];
|
let titleList = [];
|
let infoList = [];
|
// index是奇数的话，那么就是标题，是偶数的话，那么就是文字的
|
attrList.forEach(function (item, index) {
|
// 如果是偶数的话
|
if (index % 2 === 0) {
|
titleList.push(item);
|
// 奇数的话
|
} else {
|
infoList.push(item);
|
}
|
});
|
titleList.forEach(function (item, index) {
|
combList.push({
|
[titleKey]: item,
|
[infoKey]: infoList[index]
|
});
|
});
|
return combList;
|
},
|
/**
|
*
|
* @param attrList
|
* @param titleKey
|
* @param infoKey
|
* @returns {Array}
|
*/
|
getCombListVal(attrList, titleKey, infoKey) {
|
let combList = [];
|
attrList.forEach(function (item, index) {
|
combList.push({
|
[infoKey]: attrList[index]
|
});
|
});
|
return combList;
|
},
|
// 申请条件，所需条件，其他说明数据组装
|
assemblySwiperList(prodInfoList) {
|
let _this = this;
|
let swiperList = [];
|
prodInfoList.forEach(function (item, index) {
|
// key val 格式
|
if (index === 5) {
|
swiperList.push({
|
name: item.name,
|
attrs: _this.getCombList(item.attrs, 'title', 'info')
|
});
|
}
|
// 只有 val 格式
|
if (index === 6 || index === 7) {
|
swiperList.push({
|
name: item.name,
|
attrs: _this.getCombListVal(item.attrs, 'title', 'info')
|
});
|
}
|
});
|
return swiperList;
|
},
|
// 获取Attr的列表, prodElements产品组件的元素列表
|
getAttrList(prodElements) {
|
// 获取用户修改的数据
|
let attrList = [];
|
if (prodElements instanceof Array) {
|
prodElements.map(function (listItem) {
|
listItem.attrs.forEach(function (item) {
|
attrList.push(item.value);
|
});
|
});
|
}
|
return attrList;
|
},
|
// 记录产品的点击次数
|
productClickNumber(productId) {
|
let submitInfo = {
|
prodId: productId
|
};
|
systemApi.fetchProdRec(submitInfo).then(
|
res => {
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error, this);
|
}
|
);
|
},
|
// 初始化产品详情
|
init(productId) {
|
let _this = this;
|
let submitInfo = {
|
prodId: productId
|
};
|
systemApi.fetchProdDetail(submitInfo).then(
|
res => {
|
_this.prodType = res.body.prodDetailInfo.unit.prodType;
|
_this.$nextTick(function () {
|
_this.prodDetailInfo = res.body.prodDetailInfo;
|
_this.pushProductInfos = res.body.pushProductInfos;
|
// 立即申请的四个字
|
_this.buttonMsg = res.body.buttonMsg;
|
// 一定要清空数据，不然页面缓存会导致数据没任何变化
|
_this.needProdInfo = [];
|
if (_this.prodDetailInfo.unit.completeCost) {
|
this.showServerMon = '有';
|
} else {
|
this.showServerMon = '无';
|
}
|
// 组装产品详情需要的数据格式
|
if (_this.prodDetailInfo.unit.timeLimitUnit === 1) {
|
_this.showInterestRate =
|
_this.accDivision(
|
_this.prodDetailInfo.unit.loanRate,
|
30
|
) + '';
|
// 由于js浮点数的精度问题，所以除法的时候，保留小数点户五位，百分百三位
|
if (_this.showInterestRate.indexOf('.') !== -1) {
|
let dotIndex = _this.showInterestRate.indexOf(
|
'.'
|
);
|
let lastIndex =
|
_this.showInterestRate.length - 1;
|
if (lastIndex - dotIndex > 5) {
|
let interLen = dotIndex + 6;
|
_this.showInterestRate = _this.showInterestRate.substring(
|
0,
|
interLen
|
);
|
}
|
}
|
_this.timeLimitUnit = '天';
|
} else {
|
_this.showInterestRate =
|
_this.prodDetailInfo.unit.loanRate;
|
_this.timeLimitUnit = '月';
|
}
|
_this.prodDetailInfo.components.forEach(function (item) {
|
_this.needProdInfo.push({
|
name: item.name,
|
attrs: _this.getAttrList(item.showEles)
|
});
|
});
|
// 申请条件，所需条件，其他说明数据组装
|
_this.swiperList = _this.assemblySwiperList(
|
_this.needProdInfo
|
);
|
// 为你优选的数据的组装
|
_this.pushProdList = [];
|
_this.pushProductInfos.forEach(function (item) {
|
_this.pushProdList.push({
|
prodId: item.unit.prodId,
|
content: _this.getAttrList(item.showEles),
|
productType: item.unit.prodType,
|
applyNumber:
|
item.unit.showNumPrefix + item.unit.showNum
|
});
|
});
|
//为EACHERT给上默认值
|
_this.money = _this.showMoney =
|
_this.prodDetailInfo.unit.mixLoanAmt / 10000;
|
//如果期限可选的有两个及以上，就采用第二个作为默认值，否则采用第一个
|
if (
|
_this.prodDetailInfo.unit.timeLimitList.length >= 2
|
) {
|
_this.loanTerm = _this.showLoanTerm =
|
_this.prodDetailInfo.unit.timeLimitList[1];
|
} else {
|
_this.loanTerm = _this.showLoanTerm =
|
_this.prodDetailInfo.unit.timeLimitList[0];
|
}
|
});
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error, _this);
|
}
|
);
|
}
|
},
|
activated: function () {
|
console.log('===========1================')
|
let _this = this;
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'in'});
|
this.swiperIndex = 0;
|
this.swiperList = [];
|
let productId = this.$route.query.id;
|
this.init(productId);
|
this.productClickNumber(productId);
|
this.showRateDetail = false; // 初始化的时候需要不显示
|
window.backPageByAndroid = function (obj) {
|
// 如果是详情界面,就调用详情界面的返回方法
|
goBackCont.goBackFun(_this);
|
};
|
},
|
deactivated: function () {
|
this.needProdInfo = [];
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'none'});
|
pageBack.androidBackBtn();
|
},
|
beforeRouteEnter(to, from, next) {
|
// 如果是从以下界面过来的,走逻辑返回，否则走正常返回
|
goBackCont.gotoNext(to, from, next);
|
},
|
beforeRouteUpdate(to, from, next) {
|
next(); // 主要就是这一步 这里通过router 参数的变化 强制刷新当前界面，并去获取数据
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@import '../../style/mixin.less';
|
|
.weui-dialog__btn_primary {
|
color: @color-primary !important;
|
}
|
|
.loan-detail {
|
position: relative;
|
background: @color-white;
|
.loan-detail-tab {
|
margin-bottom: 4px;
|
}
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-title {
|
font-size: 18px;
|
}
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
.vux-header-right {
|
color: @color-white !important;
|
}
|
}
|
.vux-slider > .vux-swiper > .vux-swiper-item {
|
overflow: auto;
|
}
|
.vux-swiper {
|
.flexLayout(flex-start, flex-start, row);
|
min-height: 190px !important;
|
height: auto !important;
|
.vux-swiper-item {
|
min-height: 190px !important;
|
/*height: auto !important;*/
|
}
|
}
|
.swiper-item-content {
|
.flexLayout(flex-start, flex-start, row);
|
padding: 0 12px;
|
font-size: @font-size-medium;
|
color: @color-text-primary;
|
span {
|
line-height: 27px;
|
&:first-child {
|
margin-right: 10px;
|
font-size: @font-size-medium;
|
color: @color-text-third;
|
}
|
&:last-child {
|
flex: 1;
|
font-size: @font-size-medium;
|
color: @color-text-primary;
|
}
|
}
|
}
|
.words-title {
|
font-size: @font-size-medium;
|
color: @color-text-primary;
|
}
|
.words-content {
|
font-size: @font-size-small;
|
color: @color-text-third;
|
}
|
.prod-intro {
|
.flexLayout(flex-start, center, row);
|
margin: 20px 27px 0;
|
.logo {
|
width: 64px;
|
height: 64px;
|
border-radius: 7.5px;
|
overflow: hidden;
|
text-align: center;
|
img {
|
width: 64px;
|
height: 64px;
|
}
|
}
|
.prod-info {
|
margin-left: 15px;
|
.prod-title {
|
font-size: @font-size-medium;
|
/*margin-bottom:5px;*/
|
.prod-tag {
|
color: @color-primary-light;
|
border: 1px solid @color-primary-light;
|
padding: 2px 2px 1px;
|
font-size: @font-size-tiny;
|
margin-left: 10px;
|
vertical-align: middle;
|
}
|
}
|
.loan-time,
|
.loan-persons {
|
margin-top: 3px;
|
font-size: @font-size-small;
|
color: @color-text-third;
|
}
|
}
|
}
|
.calc-form {
|
.flexLayout(space-between, center, row);
|
margin: 30px 27px 0;
|
.amount {
|
.weui-cell {
|
position: relative;
|
padding: 0;
|
&:after {
|
content: '万';
|
font-size: @font-size-medium;
|
color: @color-text-primary;
|
position: absolute;
|
top: 7.5px;
|
right: 15px;
|
}
|
}
|
.weui-cells {
|
margin-top: 0;
|
&:before,
|
&:after {
|
border: none;
|
}
|
}
|
.weui-label {
|
font-size: @font-size-medium;
|
color: @color-text-primary;
|
}
|
.weui-input {
|
width: 100px;
|
height: 33px;
|
box-sizing: border-box;
|
padding-left: 15px;
|
color: @color-primary;
|
font-size: @font-size-medium;
|
text-align: right;
|
padding-right: 37px;
|
border: 1px solid @color-divider-regular;
|
border-radius: 7.5px;
|
}
|
}
|
.deadLine {
|
.weui-label {
|
font-size: @font-size-medium;
|
color: @color-text-primary;
|
}
|
.weui-cells {
|
margin-top: 0;
|
&:before,
|
&:after {
|
border: none;
|
}
|
}
|
.weui-label {
|
width: 40px;
|
}
|
.weui-select {
|
width: 100px;
|
height: 33px;
|
box-sizing: border-box;
|
color: @color-primary;
|
font-size: @font-size-medium;
|
border: 1px solid @color-divider-regular;
|
border-radius: 7.5px;
|
padding-left: 16px;
|
line-height: 32px;
|
}
|
}
|
}
|
.loan-scope {
|
.flexLayout(space-between, center, row);
|
margin: 9px 27px 0;
|
div {
|
font-size: @font-size-small;
|
color: @color-text-third;
|
span {
|
color: @color-text-placeholder-red;
|
}
|
}
|
}
|
.charts {
|
.flexLayout(space-between, center, row);
|
box-sizing: border-box;
|
margin-top: 33px;
|
.chart-box {
|
margin-left: 27px;
|
position: relative;
|
.animate {
|
width: 128px;
|
height: 128px;
|
background-color: transparent;
|
}
|
.monPayment {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
font-size: @font-size-tiny;
|
color: @color-text-primary;
|
text-align: center;
|
}
|
}
|
.charts-info {
|
.flexLayout(space-between, flex-start, column);
|
box-sizing: border-box;
|
/*padding-left: 20px;*/
|
font-size: @font-size-small;
|
color: @color-text-third;
|
div {
|
width: 190px;
|
text-align: left;
|
&:first-child {
|
&:before {
|
background-color: #ff4d53;
|
}
|
}
|
&:nth-child(2) {
|
margin: 20px 0;
|
&:before {
|
background-color: #ffa21f;
|
}
|
}
|
&:last-child {
|
&:before {
|
background-color: #21bddf;
|
}
|
}
|
&:before {
|
content: '';
|
width: 8px;
|
height: 8px;
|
display: inline-block;
|
border-radius: 50%;
|
vertical-align: middle;
|
margin-right: 12px;
|
}
|
}
|
}
|
}
|
.interest-rate {
|
box-sizing: border-box;
|
margin-top: 19px;
|
padding: 0 12px;
|
.auditInfo {
|
width: 100%;
|
}
|
}
|
.prepayment {
|
box-sizing: border-box;
|
margin-top: 15px;
|
padding: 0 12px;
|
}
|
.difference {
|
box-sizing: border-box;
|
margin-top: 15px;
|
padding: 0 12px;
|
}
|
.show-hide {
|
margin: 12px 0;
|
text-align: center;
|
font-size: @font-size-medium;
|
color: @color-primary;
|
}
|
.tab-swiper {
|
height: 151px;
|
margin: 12px;
|
.flexLayout(space-between, flex-start, column);
|
p {
|
font-size: @font-size-medium;
|
color: @color-text-third;
|
}
|
}
|
.apply-intro {
|
p {
|
padding: 10px 12px;
|
font-size: @font-size-primary;
|
color: @color-text-primary;
|
}
|
div {
|
box-sizing: border-box;
|
padding: 12px;
|
div {
|
height: 80px;
|
background-color: @color-gradient-darkBlue-right;
|
}
|
}
|
.apply-intro-img {
|
width: 100%;
|
}
|
}
|
.more-prod {
|
p {
|
padding: 10px 12px;
|
font-size: @font-size-primary;
|
color: @color-text-primary;
|
}
|
}
|
.btn {
|
position: fixed;
|
bottom: 0;
|
height: 44px;
|
z-index: 10;
|
width: 100%;
|
}
|
.f-button {
|
margin: 0;
|
}
|
}
|
|
@media only screen and (min-device-width: 320px) and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {
|
.loan-detail {
|
.prod-intro {
|
margin: 20px 12px 0 12px;
|
}
|
.calc-form {
|
.deadLine {
|
.weui-select {
|
width: 90px;
|
}
|
}
|
}
|
.charts {
|
.chart-box {
|
margin-left: 15px;
|
}
|
.charts-info {
|
padding-left: 5px;
|
div {
|
width: 170px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
