index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from "../components/home.vue"
import Dai from "../components/dai.vue"
import Xin from "../components/xin.vue"
import Mine from "../components/mine.vue"
import Regist from "../components/regist.vue"
import List from "../components/list.vue"
import Login from "../components/login.vue"
import Pub from "../components/pub.vue"
import Tuijian from "../components/tuijian.vue"
import Wodeqian from "../components/wodeqian.vue"
import Bs from 'bootstrap'
Vue.use(Router)
Vue.use(Bs)
//路由页面
export default new Router({
routes: [
{
path:"/list",
component:List
},
{
path:"/wodeqian",
component:Wodeqian
},
{
path:"/tuijian",
component:Tuijian
},
{
path:"/regist",
component:Regist
},
{
path:"/login",
component:Login
},
{
path:"/pub",
component:Pub,
children:[{
path:"/mine",
component:Mine
},
{
path:"/home",
component:Home
},
{
path:"/dai",
component:Dai
},
{
path:"/xin",
component:Xin
}]
},
{
path:"/",
redirect:"/home"
}
]
})
store.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0,
sjh:"",
title1:"",
lixi:""
},
mutations:{
add(a){
a.count++
},
jian(a){
a.count--
},
login(a,b){
a.sjh = b
},
title(a,b){
a.title1 = b
},lixi(a,b){
a.lixi = b
}
}
})
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store/store"
import "./font/iconfont.css"
import "./font/style.css"
import "./font/reset.css"
import "./font/payment.css"
import "./font/wodeqian.css"
import "./font/payment.js"
// import "./font/jquery-1.10.2.js"
import Bs from 'bootstrap'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
dai.vue
<template>
<div id="daiaaa">
<header>
<div class="dai">
<span>贷款</span>
<span class="iconfont icon-sanheng"></span>
</div>
<ul>
<li>职业:<span>000</span></li>
<li>金额:<span>111</span></li>
<li>期限:<span>333</span></li>
</ul>
</header>
<!-- 推荐 -->
<section>
<div id="tuijian">
<div class="moban">
<div class="inner" v-for = "(item,index) in msg">
<div class="aa" @click="list(index)">
<div class="in_le">
<img src="static/shang.jpg">
</div>
<div class="in_ri" >
<h4 >{{item.tit}}</h4>
<p>优质小额现金贷,无需抵押,便捷方便。</p>
<ul>
<li >申请<span >{{item.shenqing}}人</span></li>
<li>日利率<span class="lixi">{{item.lixi}}%</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
import axios from "axios"
import $ from "jquery"
export default {
name: 'Dai',
data () {
return {
str:"贷款",
msg: '',
title:""
}
},
methods:{
list(index){
var _this=this
$(function(){
var title = $(".aa").eq(index).find("h4").text();
var lixi = $(".aa").eq(index).find(".lixi").text();
console.log(title)
_this.$store.commit("title",title)
_this.$store.commit("lixi",lixi)
_this.$router.push("/tuijian")
})
// console.log(index)
// console.log(this.title,this.shenqing,this.lixi)
// alert(index)
}
},
mounted(){
this.$emit("toparent",this.str)
var that = this
axios({
method:"post",
url:"http://localhost:3000/xinxi",
}).then(function(data){
//console.log(data.data)
that.msg=data.data
})
}
}
</script>
<style scoped>
#daiaaa{display: flex;flex-direction: column;height: 100vh}
section{flex: 1}
/* header{height:1.9rem;background:#fff;color:#000;} */
header{height: 1.9rem;display: flex;justify-content: center;flex-direction: column;background:#fff;color:#000;}
header .dai{padding:0 .2rem;display: flex;justify-content: space-between;color: #8b8a8a;height:.9rem;border-bottom: 1px solid #f0f1f2;font-size: .34rem}
header ul{height: 1rem;display: flex;justify-content: space-around}
header ul li{height: 1rem;width:2.42rem ;list-style: none;font-size: .4rem}
header ul li span{color: #4ca7fc}
#tuijian{min-height: 5rem;height: auto!important;background: #fff;margin-top: .25rem}
#tuijian .tui{height: 1rem;border-bottom: 1px solid #f0f1f2;display: flex;justify-content: space-between;align-items: center;margin-right: .25rem}
#tuijian .tui img{width: 1.66rem;height: .42rem;}
#tuijian .moban{height: 2.22rem;border-bottom:1px solid #f0f1f2;}
#tuijian .moban .inner>div{height: 1.5rem;display: flex;justify-content: space-between;background: #fff;border-bottom: 1px solid #ccc}
#tuijian .moban .inner .in_le{height: 1.5rem;width: 1.5rem;display: flex;justify-content: center;align-items: center}
#tuijian .moban .inner .in_le img{height: 1rem;width: 1rem;}
#tuijian .moban .inner .in_ri{height: 1.5rem;width: 4.16rem;}
#tuijian .moban .inner .in_ri h4{color: #747474;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#tuijian .moban .inner .in_ri p{color: #747474;font-size: .26rem;height: .4rem;width: 4.16rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: .1rem;}
#tuijian .moban .inner .in_ri ul{height:.4rem;width: 4.16rem;display: flex;justify-content: space-between;margin-top: 0.15rem;color: #747474;}
#tuijian .moban .inner .in_ri li{list-style: none;height: .4rem;width: 2.08rem;font-size: .26rem}
#tuijian .moban .inner .in_ri li:nth-of-type(1){border-right:2px solid gray}
#tuijian .moban .inner .in_ri li:nth-of-type(2){padding-left: .2rem}
#tuijian .moban .inner .in_ri li span{color: orange}
</style>
home.vue
<template>
<div class="hello">
<!-- 图片 -->
<div id="pic">
<img src="static/timg.jpg">
</div>
<div id="box">
<div id="dai">
<div class="left">
<img src="static/00.jpg">
</div>
<div class="right">
<img src="static/22.jpg" @click="tuijian()">
</div>
</div>
<!-- 贷款大盘点 -->
<div id="pan">
<div class="zuo">
<img src="static/shuqian.gif">
</div>
<div class="you">
<p>贷款大盘点</p>
<div>
123****8910在贷款花成功借款30000元
</div>
</div>
</div>
<!-- 推荐 -->
<div id="tuijian">
<div class="tui">
<img src="static/tuijian.jpg">
<img src="static/huan.jpg" >
</div>
<div class="moban">
<div class="inner" v-for = "item in msg">
<div class="in_le">
<img src="static/mao.png">
</div>
<div class="in_ri">
<h4>{{item.tit}}</h4>
<p>优质小额现金贷,无需抵押,便捷方便。</p>
<ul>
<li>申请<span>{{item.shenqing}}人</span></li>
<li>日利率<span>{{item.lixi}}%</span></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 信用卡 -->
<div id="tuijian1">
<div class="tui">
<img src="static/xin.jpg">
</div>
<div class="moban">
<div class="innero">
<div class="in_leo">
<img src="static/pingan.png">
</div>
<div class="in_rio">
<h4>平安海淘卡</h4>
<ul>
<li>淘宝享积分</li>
<li>消费多重安全</li>
</ul>
<p>申请成功<span>12345人</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios"
export default {
name: 'Home',
data () {
return {
str:"首页",
msg: ""
}
},
mounted(){
this.$emit("toparent",this.str)
var that = this
axios({
method:"post",
url:"http://localhost:3000/xinxi",
}).then(function(data){
// console.log(data.data)
that.msg=data.data
})
},
methods:{
tuijian(){
if(this.$store.state.sjh==""){
this.$router.push("/login")
}else{
this.$router.push("/tuijian")
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shou{height: 1rem;width: 1rem;display: flex;justify-content: center;flex-direction: column;align-items: center;}
.shou span:nth-child(1){font-size: .45rem}
.shou span:nth-child(2){font-size: .1rem}
#pic{height: 3.5rem;width:100%;background: green}
#pic img{display: block;height: 3.5rem;width:100%;}
#box{min-height: 5rem;height: auto!important;padding:0 .25rem}
#dai{height: 2.18rem;display: flex;justify-content: space-around;align-items: center;background: #fff}
#dai div{height: 1.7rem;width: 3.36rem;display: flex;justify-content: center}
#dai .left{border-right: 1px solid #eeeeee}
#dai .left img{height: 1.7rem;}
#dai .right img{height: 1.7rem;}
#pan{height: 2.18rem;display: flex;justify-content: space-around;align-items: center;margin-top: .25rem;background: #fff}
#pan .zuo{height: 2.18rem;width: 1.87rem;display: flex;padding-left: .2rem}
#pan .zuo img{height: 1.87rem;width: 1.87rem;}
#pan .you{height: 2.18rem;width: 4.5rem;padding:.25rem;box-sizing: border-box}
#pan .you p{color: #4b4b4b;font-size: .38rem}
#pan .you>div{height: .9rem;width:3.6rem;color: #9e9e9e;margin-top: .25rem;font-size: .25rem}
#tuijian{min-height: 8rem;height: auto!important;margin-top: .25rem;background: #fff;overflow: auto}
#tuijian .tui{height: 1rem;border-bottom: 1px solid #f0f1f2;display: flex;justify-content: space-between;align-items: center;margin-right: .25rem;padding: .2rem}
#tuijian .tui img{width: 1.66rem;height: .42rem;}
#tuijian .moban{height: 2.22rem;border-bottom:1px solid #f0f1f2;}
#tuijian .moban .inner{height: 1.5rem;display: flex;justify-content: space-between;background: #fff;border-bottom: 1px solid #ccc}
#tuijian .moban .inner .in_le{padding-left: .2rem;;height: 1.5rem;width: 1.5rem;display: flex;justify-content: center;align-items: center}
#tuijian .moban .inner .in_le img{height: 1rem;width: 1rem;}
#tuijian .moban .inner .in_ri{height: 1.5rem;width: 4.16rem;}
#tuijian .moban .inner .in_ri h4{color: #747474;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#tuijian .moban .inner .in_ri p{color: #747474;font-size: .26rem;height: .4rem;width: 4.16rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: .1rem;}
#tuijian .moban .inner .in_ri ul{height:.4rem;width: 4.16rem;display: flex;justify-content: space-between;margin-top: 0.15rem;color: #747474;}
#tuijian .moban .inner .in_ri li{list-style: none;height: .4rem;width: 2.08rem;font-size: .26rem}
#tuijian .moban .inner .in_ri li:nth-of-type(1){border-right:2px solid gray}
#tuijian .moban .inner .in_ri li:nth-of-type(2){padding-left: .2rem}
#tuijian .moban .inner .in_ri li span{color: orange}
#tuijian1{min-height: 5rem;height: auto!important;background: #fff;margin-top: .25rem}
#tuijian1 .moban .innero{height: 1.5rem;display: flex;justify-content: space-between;background: #ffff}
#tuijian1 .moban .innero .in_leo{padding-left: .2rem;height: 1.36rem;width: 2.18rem;display: flex;justify-content: center;align-items:center;}
#tuijian1 .moban .innero .in_leo img{display: block;height: 1.36rem;width: 2.18rem;}
#tuijian1 .moban .innero .in_rio{height: 1.5rem;width: 3.78rem;padding-left: .2rem;box-sizing: border-box}
#tuijian1 .moban .innero .in_rio h4{color: #747474;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#tuijian1 .moban .innero .in_rio p{color: #747474;font-size: .24rem;height: .4rem;width:3rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: .1rem;}
#tuijian1 .moban .innero .in_rio ul{height:.45rem;width: 3rem;display: flex;justify-content: space-between;margin-top: 0.15rem;color: #747474;overflow: hidden}
#tuijian1 .moban .innero .in_rio li{list-style: none;height: .4rem;font-size: .24rem;border: 1px solid #8ec8ff;border-radius: .05rem;color: #8ec8ff;text-align: center;line-height: .4rem;}
#tuijian1 .moban .innero .in_rio p span{color: orange}
</style>
list.vue
<template>
<div>
<header id="he">
<span class="iconfont icon-you" @click="fandai()"></span>
<span>贷款记录</span>
</header>
<ul id="xia">
<div id="top"><span>公司名称</span><span>金额(元)</span><span>利率</span><span>操作</span></div>
<li v-for="(item,i) in msg">
<span>{{item.gs}}</span>
<span>{{item.money}}</span>
<span>{{item.lixi}}</span>
<span @click="huan(i)">还款</span>
</li>
</ul>
</div>
</template>
<script>
import axios from "axios"
export default {
name: 'List',
data () {
return {
msg:"",
}
},
methods:{
deng(){
this.$router.push("/login")
},
zhu(){
this.$router.push("/regist")
},
fandai(){
this.$router.push("/mine")
},
huan(i){
alert(i)
}
},
mounted:function(){
var that = this
axios({
method:"post",
url:"http://localhost:3000/goback1",
params:{pn:this.$store.state.sjh}
}).then(function(data){
that.msg = data.data
console.log(data.data)
})
},
}
</script>
<style scoped="">
#tuijian{display: flex;flex-direction: column;height: 100vh;background: #f0f1f2;}
#he{background:#fff;color:#7b7b7b;font-size: .3rem;height: .9rem;line-height: .9rem;display: flex;justify-content: flex-start}
#he span{margin-right: 2rem;font-weight: bold}
#bj{height: 3.94rem;width: 100%;background:url(../../static/bj.jpg) no-repeat;display: flex;justify-content: center;align-items: center}
#bj .tou{width: 1.82rem;height: 2.3rem;display: flex;justify-content: center;flex-wrap: wrap;}
#bj .tou .pic{width:1.45rem;height: 1.45rem;border-radius: 50%;border:1px solid red;background: url(../../static/222.jpg)center no-repeat/cover ;}
#bj .tou ul{width: 1.7rem;height: .52rem;display: flex;justify-content: space-between;font-size: .3rem;color:#fff}
#bj .tou li{list-style: none;}
#xia{height: 3.76rem;background: #fff;margin: .2rem;}
#xia li{height: 1.22rem;display: flex;justify-content: space-between;line-height: 1rem;font-size: .32rem;border-bottom: 1px solid gray;background: #fff;padding:0 .2rem;color: orange}
#xia li i{font-style: normal}
#xia li span{font-size: .3rem;line-height: 1.22rem}
#xia li .lizuo{height: 1.22rem;width:2.38rem;display: flex;justify-content: flex-start}
#top{height: 1rem;width: 100%;display: flex;justify-content: space-between;line-height: 1rem;border-bottom:1px solid #ccc ;padding: 0 .25rem}
#top span{font-size:.25rem;color: #000;font-weight: bold}
</style>
login.vue
<template>
<div class="login">
<div id="head">
<div class="left">
<span class="iconfont icon-you" @click="fan()"></span><span>登录</span>
</div>
<p @click="zhu()">注册</p>
</div>
<div id="wrop">
<div id="qie">
<div class="lee " @click="show" :class="{'bj1':style1}">短信快捷登录</div>
<div class="ree" @click="show2" :class="{'bj1':style2}">账号密码登录</div>
</div>
</div>
<!-- 登录1 -->
<div id="suru" v-if="aa">
<input type="text" placeholder="请输入手机号" id="aaa" v-model="phonenumber">
<input type="text" placeholder="请输入验证码" id="bbb" v-model="yzhm"><span @click="yzm()">获取验证码</span>
<button @click="send()">登录</button>
</div>
<!-- 登录2 -->
<div id="suru2" v-if="bb">
<input type="text" placeholder="请输入手机号" id="aaa" v-model="phonenumber2">
<input type="text" placeholder="请输入密码" id="bbb" v-model="pass2">
<button @click="send2()">登录</button>
</div>
</div>
</template>
<script>
import axios from "axios"
export default {
name: 'Login',
data:function(){
return {
aa:true,
bb:false,
style1:true,
style2:false,
phonenumber:"",
yzhm:"",
phonenumber2:"",
pass2:"",
}
},
methods:{
add(){
this.$store.commit("add")
},
jian(){
this.$store.commit("jian")
},
// login(){
// console.log("aaaaaaaaaaa")
// this.$store.commit("login",this.phonenumber)
// }
// ,
show(){
this.aa = true,
this.bb = false,
this.style1 = true,
this.style2 = false
},
show2(){
this.bb = true,
this.aa = false,
this.style2 = true,
this.style1 = false
} ,
zhu(){
this.$router.push("/regist")
},
fan(){
this.$router.push("/mine")
},
yzm(){
var that = this;
axios({
method:"post",
url:"http://localhost:3000/login",
params:{phoneNunber:that.phonenumber,id:1}
}).then(function(data){
console.log(data.data)
})
},
send(){
this.$store.commit("login",this.phonenumber)
var that = this;
this.$store.commit()
axios({
method:"post",
url:"http://localhost:3000/login",
params:{PhoneNumber:that.phonenumber,yzm:that.yzhm}
}).then(function(data){
console.log(data.data)
if(data.data=="登录成功"){
alert("登录成功")
that.$router.push("/mine")
}else if(data.data=="验证码不对"){
alert("验证码不对")
}else if(data.data=="用户名不存在"){
alert("用户名不存在")
}
})
}
,
send2(){
var that = this;
axios({
method:"post",
url:"http://localhost:3000/login",
params:{PhoneNumber:that.phonenumber2,pass:that.pass2}
}).then(function(data){
console.log(data.data)
if(data.data=="用户名或密码错误"){
alert("用户名或密码错误")
}else{
alert("登录成功")
that.$router.push("/mine")
}
})
this.$store.commit("login",this.phonenumber2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped="">
*{margin: 0;padding: 0}
.login{height: 100vh;background: #efefef}
#head{height: .9rem;background: #fff;display: flex;justify-content: space-between;align-items: center}
#head .left{width:3.4rem;height: .66rem;font-size: .3rem;color: #818080;line-height: .66rem}
#head .left span{margin-left:.3rem}
#head p{width:1rem;height: .66rem;font-size: .3rem;color: #818080;line-height: .66rem}
#wrop{height: .9rem;display: flex;justify-content: center;margin-top: .4rem}
#qie{height: .9rem;border-radius: .2rem;border: 1px solid orange;font-size: .3rem;display: flex;justify-content: space-around;line-height: .9rem;text-align: center;}
#qie .lee{width:2.75rem;height: .9rem;}
#qie .ree{width:2.75rem;height: .9rem;}
#suru{height:2rem;background: #fff; margin-top: .88rem;position: relative}
#suru span{font-size: .3rem;padding: .5rem;position:absolute;top: 1.3rem;left: 3.3rem;display: block;border: 1px solid orange;padding: .1rem;color: orange}
#aaa{height: 1rem;width:100%;margin: 0;padding:0;;float: left;font-size: .3rem;text-indent: .86rem;outline: none;border: 0;border-bottom: 1px solid gray;margin-top: .1rem}
#bbb{height: 1rem;width:100%;margin: 0;padding:0;float: left;font-size: .3rem;text-indent: .86rem;outline: none;border: 0}
button{height: .82rem;width: 100%;background:orange;outline: none;border: 0;border-radius: .1rem;color: #fff;font-size: .3rem}
#suru2{height:2rem;background: #fff; margin-top: .88rem;position: relative;}
#suru2 span{font-size: .3rem;padding: .5rem;position:absolute;top: 1.3rem;left: 3.3rem;display: block;border: 1px solid orange;padding: .1rem;color: orange}
.bj1{background: orange;color: #fff}
.bj2{background: #efefef;color: orange;}
</style>
mine.vue
<template>
<div>
<div id="bj">
<div class="tou">
<div class="pic">
</div>
<ul >
<span>{{this.$store.state.sjh}}</span>
</ul>
<ul id="show" v-if="show" >
<li @click="deng()">登录</li>|
<li @click="zhu()">注册</li>
</ul>
</div>
</div>
<ul id="xia">
<li>
<div class="lizuo" @click="list()">
<span class="iconfont icon-wodexiaoxi"></span><i >贷款信息</i>
</div>
<p>></p>
</li>
<li>
<div class="lizuo" @click="list2()">
<span class="iconfont icon-liulan"></span><i>我的钱袋</i>
</div>
<p>></p>
</li>
<li>
<div class="lizuo">
<span class="iconfont icon-shezhi"></span><i>设置</i>
</div>
<p>></p>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Mine',
data () {
return {
user:"",
show:true,
}
},
methods:{
deng(){
this.$router.push("/login")
},
zhu(){
this.$router.push("/regist")
},
list(){
this.$router.push("/list")
},
list2(){
this.$router.push("/wodeqian")
}
},mounted() {
if(this.$store.state.sjh!==""){
this.show = false
}else{
this.show = true
}
},
}
</script>
<style scoped="">
#bj{height: 3.94rem;width: 100%;background:url(../../static/bj.jpg) no-repeat;display: flex;justify-content: center;align-items: center}
#bj .tou{width: 1.82rem;height: 2.3rem;display: flex;justify-content: center;flex-wrap: wrap;}
#bj .tou .pic{width:1.45rem;height: 1.45rem;border-radius: 50%;border:1px solid red;background: url(../../static/222.jpg)center no-repeat/cover ;}
#bj .tou ul{width: 1.7rem;height: .52rem;display: flex;justify-content: space-between;font-size: .3rem;color:#fff}
#bj .tou li{list-style: none;}
#xia{height: 3.76rem;background: #fff;margin: .2rem;padding: .2rem}
#xia li{height: 1.22rem;display: flex;justify-content: space-between;line-height: 1.22rem;font-size: .32rem;border-bottom: 1px solid gray}
#xia li i{font-style: normal}
#xia li span{font-size: .6rem;line-height: 1.22rem}
#xia li .lizuo{height: 1.22rem;width:2.38rem;display: flex;justify-content: flex-start}
</style>
pub.vue
<template>
<div id="app1">
<!-- <img src="./assets/logo.png">-->
<!-- <header>{{tit}}</header> -->
<section>
<router-view @toparent="getdata"></router-view>
</section>
<footer>
<router-link to="/home" tag="span"><div class="shou"><span class="iconfont icon-yemian"></span><span>首页</span></div></router-link>
<router-link to="/dai" tag="span"><div class="shou"><span class="iconfont icon-qian3"></span><span>贷款</span></div></router-link>
<router-link to="/xin" tag="span"><div class="shou"><span class="iconfont icon-qian2"></span><span>信用卡</span></div></router-link>
<router-link to="/mine" tag="span"><div class="shou"><span class="iconfont icon-wode"></span><span>我的</span></div></router-link>
</footer>
</div>
</template>
<script>
var bw = (document.documentElement.clientWidth/6.4)+"px";
var htmlTag = document.getElementsByTagName("html")[0];
htmlTag.style.fontSize=bw;
var classid = location.search.split("=")[1];
export default {
name: 'Pub',
data:function(){
return {tit:"首页"}
},
methods:{
getdata(msg){
this.tit = msg
},
}
}
</script>
<style>
li{list-style: none}
body{ font-size:16px;}
#app1 {
font-family: "微软雅黑",'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*{margin:0;padding:0}
#app1{
height:100vh;
display:flex;
flex-direction:column;
}
header{height:.9rem;background:#000;text-align:center;line-height:.9rem;font-size:.4rem;color:#fff}
footer{height:1rem;background:#fff;border-top: 1px solid #a5a3a2;text-align:center;font-size:.4rem;color:#a5a3a2;display:flex;justify-content:space-around;align-items: center}
section{flex:1;overflow: auto;background: #f0f1f2}
.router-link-active{
color:orange;
}
.shou{height: 1rem;width: 1rem;display: flex;justify-content: center;flex-direction: column;align-items: center;}
.shou span:nth-child(1){font-size: .45rem}
.shou span:nth-child(2){font-size: .2rem}
/* #pic{height: 3.5rem;width:100%;background: green}
#pic img{display: block;height: 3.5rem;width:100%;}
#box{min-height: 5rem;height: auto!important;padding:0 .25rem}
#dai{height: 2.18rem;display: flex;justify-content: space-around;align-items: center;background: #fff}
#dai div{height: 1.7rem;width: 3.36rem;display: flex;justify-content: center}
#dai .left{border-right: 1px solid #eeeeee}
#dai .left img{height: 1.7rem;}
#dai .right img{height: 1.7rem;}
#pan{height: 2.18rem;display: flex;justify-content: space-around;align-items: center;background: #fff;margin-top: .25rem}
#pan .zuo{} */
</style>
regist.vue
<template>
<div class="login">
<div id="head">
<div class="left">
<span class="iconfont icon-you" @click="deng()"></span><span >注册页面</span>
</div>
<p @click="deng()">登录</p>
</div>
<!-- 登录 -->
<div id="suru">
<input type="text" placeholder="请输入手机号" id="aaa" v-model="pn">
<input type="text" placeholder="请设置密码" id="bbb" v-model="pass">
<input type="text" placeholder="请输入验证码" id="bbb" v-model="yzhm"><span @click="yzm()">获取验证码</span>
<button @click="register()">注册</button>
</div>
</div>
</template>
<script>
import axios from "axios"
import $ from "jquery"
export default {
name: 'Regist',
data () {
return {
pn:"",
pass:"",
yzhm:""
}
},
methods:{
yzm(){
var that = this;
axios({
method:"post",
url:"http://localhost:3000/regist",
params:{phoneNumber:that.pn,id:1}
}).then(function(data){
console.log(data.data)
})
},
register(){
var that = this;
console.log(that.pn)
axios({
method:"post",
url:"http://localhost:3000/regist",
params:{
PN:that.pn,id:2,pass:that.pass,yzm:that.yzhm
}
}).then(function(data){
console.log(data.data)
if(data.data=="注册成功"){
alert("注册成功")
that.$router.push("/home")
}else if(data.data=="用户名已存在"){
alert("用户名已存在")
}else if(data.data=="验证码不对"){
alert("验证码不对")
}
})
},
deng(){
this.$router.push("/login")
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped="">
*{margin: 0;padding: 0}
.login{height: 100vh;background: #efefef}
#head{height: .9rem;background: #fff;display: flex;justify-content: space-between;align-items: center}
#head .left{width:3.4rem;height: .66rem;font-size: .3rem;color: #818080;line-height: .66rem}
#head .left span{margin-left:.3rem}
#head p{width:1rem;height: .66rem;font-size: .3rem;color: #818080;line-height: .66rem}
#wrop{height: .9rem;display: flex;justify-content: center;margin-top: .4rem}
#qie{width: 5.5rem;height: .9rem;border-radius: .2rem;background: #fff;font-size: .3rem;display: flex;justify-content: space-around;line-height: .9rem;text-align: center}
#qie .lee{width:2.75rem;height: .9rem;color: orange}
#qie .ree{width:2.75rem;height: .9rem;;background: orange;color: #fff}
#suru{height:2rem;background: #fff; margin-top: .88rem;position: relative}
#suru span{font-size: .3rem;padding: .5rem;position:absolute;top: 2.3rem;left: 3.3rem;display: block;border: 1px solid orange;padding: .1rem;color: orange}
#aaa{height: 1rem;width:100%;margin: 0;padding:0;;float: left;font-size: .3rem;text-indent: .86rem;outline: none;border: 0;border-bottom: 1px solid gray;margin-top: .1rem}
#bbb{height: 1rem;width:100%;margin: 0;padding:0;float: left;font-size: .3rem;text-indent: .86rem;outline: none;border: 0}
button{height: .82rem;width: 100%;background:orange;outline: none;border: 0;border-radius: .1rem;color: #fff;font-size: .3rem}
</style>
tuijian.vue
<template>
<div id="tuijian">
<header id="he">
<span class="iconfont icon-you" @click="fandai()"></span>
<span>我要贷款</span>
</header>
<!-- 借款金额 -->
<div id="wrap" >
<div class="wrap">
<div class="payment_time">
<div id="bg">
</div>
<div class="payment_time_mask jie1">
<ul>
<li>1000</li>
<li>3000</li>
<li>5000</li>
<li>10000</li>
<li>50000</li>
<li>80000</li>
<li>100000</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 期限 -->
<div id="wrap" >
<div class="wrap">
<div class="payment_time">
<div id="bg">
</div>
<div class="payment_time_mask qixian">
<ul>
<li>3个月</li>
<li>6个月</li>
<li>12个月</li>
<li>18个月</li>
<li>24个月</li>
<li>30个月</li>
<li>36个月</li>
<li>42个月</li>
<li>48个月</li>
<li>60个月</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 职业 -->
<div id="wrap" >
<div class="wrap">
<div class="payment_time">
<div id="bg">
</div>
<div class="payment_time_mask zhiye">
<ul>
<li>上班族</li>
<li>个体户</li>
<li>屌丝</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 城市 -->
<div id="wrap" >
<div class="wrap">
<div class="payment_time">
<div id="bg">
</div>
<div class="payment_time_mask city">
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>郑州</li>
<li>南京</li>
<li>西安</li>
<li>武汉</li>
<li>合肥</li>
<li>汉城</li>
<li>河内</li>
<li>金边</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 信用卡-->
<div id="wrap" >
<div class="wrap">
<div class="payment_time">
<div id="bg">
</div>
<div class="payment_time_mask xinyong">
<ul>
<li>有</li>
<li>木有</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 手机号时间-->
<!-- <div id="wrap" >
<div class="wrap">
<div class="payment_time">
<div id="bg">
</div>
<div class="payment_time_mask sj">
<ul>
<li>1-5个月</li>
<li>6-12个月</li>
<li>1-2年</li>
<li>2-3年</li>
<li>3年以上</li>
</ul>
</div>
</div>
</div>
</div> -->
<!-- 推荐 -->
<section>
<div id="main">
<div class="xuqiu">
<p>您好,您将在<span>{{this.$store.state.title1}}</span>借款</p>
<div class="jie">借款金额:<input type="Number" v-model="money" id="aa" > 元</div>
<div class="qi">借款期限:<input type="Number" v-model="time" id="bb">月</div>
</div>
<div class="name">
<div class="list">
<span class="iconfont icon-wode"></span>
<p>姓名:</p><input type="text" placeholder="请输入姓名" v-model="name">
</div>
<div class="list">
<span class="iconfont icon-wode"></span>
<p>身份证:</p><input type="text" placeholder="请输入身份证号" v-model="num">
</div>
<div class="list">
<span class="iconfont icon-wode"></span>
<p>职业身份</p><p id="zhiye" v-text="zhi">请选择</p>
</div>
<div class="list">
<span class="iconfont icon-wode"></span>
<p>所在城市</p><p id="city" v-text="city">请选择</p>
</div>
<div class="list">
<span class="iconfont icon-wode"></span>
<p>是否有信用卡</p><p id="xinyong" v-text="xin">请选择</p>
</div>
<div class="list">
<span class="iconfont icon-wode" ></span>
<p>手机号码:</p><input v-model="shou"/>
</div>
<button @click="go()">我要贷款</button>
</div>
</div>
</section>
</div>
</template>
<script>
import axios from "axios"
import $ from "jquery"
export default {
name: 'Tuijian',
data () {
return {
money:"",
time:"",
name:"",
num:"",
zhi:"",
city:"",
xin:"",
shou:"",
msg:"",
gs:this.$store.state.title1,
lixi:this.$store.state.lixi
}
},methods:{
fandai(){
this.$router.push("/dai")
},
bbb:function(event){
this.money = event.currentTarget.getAttribute('pay-money');
},
go(){
var that = this;
// console.log(that.money)
axios({
method:"post",
url:"http://localhost:3000/list",
params:{money:that.money,time:that.time,name:that.name,num:that.num,shou:that.shou,gs:that.gs,lixi:that.lixi}
}).then(function(data){
console.log(data.data)
})
$.post("http://localhost:3000/go2",{money:that.money,time:that.time,
name:that.name,num:that.num,zhi:that.zhi,city:that.city,xin:that.xin,shou:that.shou
},function(data){
that.msg = Number(data[0].money)+Number(that.money)
$.post("http://localhost:3000/go",{money:that.msg,time:that.time,
name:that.name,num:that.num,shou:that.shou
},function(data){
//console.log(data)
if(data=="成功"){
alert("数据更新成功")
that.$router.push("/wodeqian")
}else{
alert("数据更新失败")
}
})
})
}
}
}
</script>
<style scoped="">
#tuijian{display: flex;flex-direction: column;height: 100vh;background: #f0f1f2;}
#he{background:#fff;color:#7b7b7b;font-size: .3rem;height: .9rem;line-height: .9rem;display: flex;justify-content: flex-start}
#he span{margin-right: 2rem;font-weight: bold}
section{flex: 1;padding: .2rem}
#main{min-height: 5rem;height: auto!important;background: #fff}
#main span{color: orange}
#main .xuqiu{height: 3.69rem;background: #fff;border-bottom: 1px solid #f0f1f2;font-size: .3rem;color: gray;padding-top: .1rem}
#main .xuqiu p{margin: .3rem}
#jiekuan{display: inline-block;height:.5rem;width: 1.5rem; }
#qixian{display: inline-block;height:.5rem;width: 1.5rem;}
#aa{height:.5rem;width: 1.5rem; border: 1px solid #ccc}
#bb{height:.5rem;width: 1.5rem; border: 1px solid #ccc}
#main .xuqiu .jie{height: 1.06rem;border: 1px solid #f0f1f2;line-height: 1rem;}
#main .xuqiu .qi{height: 1.06rem;border: 1px solid #f0f1f2;line-height: 1rem;}
#main .name .list{height: 1rem;border-bottom: 1px solid #f0f1f2;display: flex;justify-content: space-between;line-height: 1rme}
#main .name .list span{font-size: .6rem;margin-right: .2rem;line-height: 1rem;}
#main .name .list input{height: 1rem;width: 100%;font-size: .3rem;text-indent: .2rem;border: 0;outline: none;border-bottom: 1px solid #f0f1f2}
#main .name p{font-size: .3rem;width: 5rem;height: 1rem;line-height: 1rem;color: #2b2b2b}
button{width: 100%;height: .8rem;margin:.2rem 0;background: orange;color:#fff;font-size: .4rem;outline: none;border:0;border-radius: .1rem}
</style>
wodeqian.vue
<template>
<div id="app">
<section class="aui-flexView">
<header class="aui-navBar aui-navBar-fixed">
<div class="aui-center">
<span class="iconfont icon-you" @click="fan()"></span>
<span class="aui-center-title">我的账户</span>
</div>
</header>
<section class="aui-scrollView">
<div class="aui-panel">
<a href="javascript:void(0);" class="aui-panel-cell">
<div class="aui-panel-cell-hd">
</div>
<div class="aui-panel-cell-bd">
<h4>{{msg.name}}</h4>
</div>
</a>
</div>
<div class="aui-amount-red">
<div class="aui-amount-text">
<p class="aui-title-e">{{msg.money}}</p>
<p class="aui-title-u">
余额(元)
<em>
<img src="images/icon-eye.png" alt="">
</em>
</p>
</div>
</div>
<div class="divHeight"></div>
<div class="aui-card-list">
<a href="javascript:void(0);" class="aui-panel-well" >
<div class="aui-panel-well-hd">
<img src="images/icon-card001.png" alt="">
</div>
<div class="aui-panel-well-bd">
<h4>银行卡</h4>
</div>
<div class="aui-panel-well-fr">1张</div>
</a>
<a href="javascript:void(0);" class="aui-panel-well" style="margin-left:.1rem;text-decoration:none;padding-top:.5rem " >
<div class="aui-panel-well-hd">
<img src="images/icon-card002.png" alt="">
</div>
<div class="aui-panel-well-bd">
<input v-model="tixiane" placeholder="提现金额" type="number" style ="width: 4rem;height: .8rem;font-size: .3rem;text-decoration:none">
</div>
</a>
<div class="divHeight"></div>
<a href="javascript:void(0);" class="aui-panel-well" style="margin-left:.1rem;text-decoration:none;padding-top:.8rem " >
<div class="aui-panel-well-hd">
<img src="images/icon-card002.png" alt="">
</div>
<div class="aui-panel-well-bd">
<input v-model="sjh" placeholder="手机号" type="number" style ="width: 4rem;height: .8rem;font-size: .3rem;text-decoration:none">
</div>
<button @click="tixian()" style ="width: 1.5rem;height: .8rem;font-size: .3rem;font-weight: bold;background: green;color: #fff">提现</button>
</a>
<a href="javascript:void(0);" class="aui-panel-well">
<div class="aui-panel-well-hd">
<img src="images/icon-card004.png" alt="">
</div>
<div class="aui-panel-well-bd">
<h4>我要反馈</h4>
</div>
<div class="aui-panel-well-fr"></div>
</a>
<a href="javascript:void(0);" class="aui-panel-well">
<div class="aui-panel-well-hd">
<img src="images/icon-card005.png" alt="">
</div>
<div class="aui-panel-well-bd">
<h4>设置</h4>
</div>
<div class="aui-panel-well-fr">
<span class="aui-badge"></span>
</div>
</a>
</div>
</section>
</section>
</div>
</template>
<script>
import axios from "axios"
export default {
name: 'Wodeqian',
data:function() {
return {
msg:"",
tixiane:"",
sjh:""
}
},methods:{
fan(){
this.$router.push("/tuijian")
},
tixian(){
var totelmoney = this.msg.money;
var yuer = totelmoney - this.tixiane;
axios({
method:"post",
url:"http://localhost:3000/shengyu",
params:{money:yuer,sjh:this.sjh}
}).then(function(data){
console.log(data.data)
this.msg = data.data
})
}
},
mounted:function(){
var that = this
axios({
method:"post",
url:"http://localhost:3000/goback",
params:{pn:this.$store.state.sjh}
}).then(function(data){
var mess = data.data
console.log(mess[mess.length-1])
that.msg=mess[mess.length-1]
})
},
}
</script>
<style>
</style>
xin.vue
<template>
<div id="daikuan">
<header>
<div class="dai">
<span class="iconfont icon-location" >郑州市</span>
<span>查询进度</span>
</div>
</header>
<section>
<div id="tu">
<img src="static/banner.jpg">
</div>
<!-- 推荐 -->
<div id="xinyong">
<ul id="bank">
<li>
<div class="tupian">
<img src="static/xing.jpg">
</div>
<div class="you">
<span>兴业银行</span><i>热门</i>
<p>特惠双重礼遇</p>
</div>
</li>
<li>
<div class="tupian">
<img src="static/xing.jpg">
</div>
<div class="you">
<span>兴业银行</span><i>热门</i>
<p>特惠双重礼遇</p>
</div>
</li>
<li>
<div class="tupian">
<img src="static/xing.jpg">
</div>
<div class="you">
<span>兴业银行</span><i>热门</i>
<p>特惠双重礼遇</p>
</div>
</li>
<li>
<div class="tupian">
<img src="static/xing.jpg">
</div>
<div class="you">
<span>兴业银行</span><i>热门</i>
<p>特惠双重礼遇</p>
</div>
</li>
<li>
<div class="tupian">
<img src="static/xing.jpg">
</div>
<div class="you">
<span>兴业银行</span><i>热门</i>
<p>特惠双重礼遇</p>
</div>
</li>
<li>
<div class="tupian">
<img src="static/xing.jpg">
</div>
<div class="you">
<span>兴业银行</span><i>热门</i>
<p>特惠双重礼遇</p>
</div>
</li>
<li>
<div class="tupian">
<img src="static/xing.jpg">
</div>
<div class="you">
<span>兴业银行</span><i>热门</i>
<p>特惠双重礼遇</p>
</div>
</li>
<li>
<div class="tupian">
<img src="static/xing.jpg">
</div>
<div class="you">
<span>兴业银行</span><i>热门</i>
<p>特惠双重礼遇</p>
</div>
</li>
</ul>
</div>
<!-- 信用卡 -->
<div id="tuijian">
<div class="tui">
<img src="static/555.jpg">
</div>
<div class="moban1">
<div class="zhuti">
<ul>
<li>
<div class="left">
<p>新手办卡</p>
<span>快速批卡精选</span>
</div>
<div class="right">
<img src="static/pi.jpg" alt="">
</div>
</li>
<li>
<div class="left">
<p>高额取现</p>
<span>额度高优惠多</span>
</div>
<div class="right">
<img src="static/qu.jpg" alt="">
</div>
</li>
<li>
<div class="left">
<p>网购剁手党</p>
<span>买、买、买!</span>
</div>
<div class="right">
<img src="static/wang.jpg" alt="">
</div>
</li>
<li>
<div class="left">
<p>商务旅游</p>
<span>尊享贵宾服务</span>
</div>
<div class="right">
<img src="static/shang.jpg" alt="">
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 信用卡 -->
<div id="tuijian">
<div class="tui">
<img src="static/666.jpg">
</div>
<div class="moban">
<div class="innero">
<div class="in_leo">
<img src="static/pingan.png">
</div>
<div class="in_rio">
<h4>平安海淘卡</h4>
<ul>
<li>淘宝享积分</li>
<li>消费多重安全</li>
</ul>
<p>申请成功<span>12345人</span></p>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
</script>
<style scoped="">
#daikuan{display: flex;flex-direction: column;height: 100vh;;}
header{height:.9rem;background:#fff;color:#000;}
/* header{height:.9rem;display: flex;justify-content: center;flex-direction: column;background:#fff;color:#000;} */
section{flex: 1}
header .dai{padding:0 .2rem;display: flex;justify-content: space-between;color:#000;height:.9rem;border-bottom: 1px solid #f0f1f2;font-size: .34rem}
#tu {height: 2.26rem;background: red;}
#tu img{height: 2.26rem;width: 100%;}
#xinyong{min-height: 4rem;height: auto!important;padding:.25rem}
#bank{min-height: 4rem;height: auto!important;background: #fff;padding:0.05rem;overflow: hidden}
#bank li{width:2.85rem;height:1rem;display: flex;justify-content: space-between;border:1px solid gray;float: left}
#bank .tupian{width: .8rem;;display: flex;justify-content: space-around;align-items: center}
#bank .tupian img{width: .8rem;}
#bank .you{width: 2.2rem;height: 1.3rem;}
#bank .you span{font-size: .3rem;color: #000;}
#bank .you i{font-size: .22rem;color: #fff;background: orange;font-style: normal;padding:0 0.06rem;border-radius: 0.05rem;margin-left: 0.05rem}
#bank .you p{font-size: .24rem;color: gray;height: .4rem;line-height: .4rem}
#tuijian{min-height: 4rem;height: auto!important;background: #fff;margin-top: .25rem}
#tuijian .tui{height: 1rem;border-bottom: 1px solid #f0f1f2;display: flex;justify-content: space-between;align-items: center;margin-right: .25rem;padding:.25rem}
#tuijian .tui img{width: 1.66rem;height: .42rem;}
#tuijian .moban{width:5.66rem;height: 2.22rem;border-bottom:1px solid #f0f1f2;display: flex;justify-content: center;align-items: center}
#tuijian .moban .innero{height: 1.5rem;width: 5.66rem;display: flex;justify-content: space-between;}
#tuijian .moban .innero .in_leo{padding-left: .2rem;height: 1.36rem;width: 2.18rem;display: flex;justify-content: center;align-items:center;}
#tuijian .moban .innero .in_leo img{display: block;height: 1.36rem;width: 2.18rem;}
#tuijian .moban .innero .in_rio{height: 1.5rem;width: 3.78rem;padding-left: .2rem;box-sizing: border-box}
#tuijian .moban .innero .in_rio h4{color: #747474;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#tuijian .moban .innero .in_rio p{color: #747474;font-size: .24rem;height: .4rem;width:3rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: .1rem;}
#tuijian .moban .innero .in_rio ul{height:.45rem;width: 3rem;display: flex;justify-content: space-between;margin-top: 0.15rem;color: #747474;overflow: hidden}
#tuijian .moban .innero .in_rio li{list-style: none;height: .4rem;font-size: .24rem;border: 1px solid #8ec8ff;border-radius: .05rem;color: #8ec8ff;text-align: center;line-height: .4rem;}
#tuijian .moban .innero .in_rio p span{color: orange}
.moban1 .zhuti ul{padding: .1rem;box-sizing: border-box;overflow: hidden;}
.moban1 .zhuti li{height: 1.76rem;width: 3rem;border: 1px solid gray;float:left;display: flex;justify-content: space-between}
.moban1 .zhuti li .left{height: 1.76rem;width: 1.9rem ;padding:.3rem .1rem;box-sizing: border-box}
.moban1 .zhuti li .right{height: 1.76rem;width: 1.2rem;display: flex;justify-content: center;align-items: center}
.moban1 .zhuti li .right img{height: 1.2rem;width: 100%}
.moban1 .zhuti li .left p{height: .5rem;width: 1.58rem;font-size: .3rem;color: dodgerblue;margin-bottom: .15rem}
.moban1 .zhuti li .left span{height: .5rem;width: 1.58rem;font-size: .24rem;color: gray;}
</style>