vue全家桶app贷款项目

其他 2018-08-07 22:06:22 阅读次数: 0 
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>&gt;</p>
        </li>
        <li>
                <div class="lizuo"  @click="list2()">
                    <span class="iconfont icon-liulan"></span><i>我的钱袋</i>
                </div>
                <p>&gt;</p>
        </li>
        <li>
            <div class="lizuo">
                <span class="iconfont icon-shezhi"></span><i>设置</i>
            </div>
            <p>&gt;</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>

猜你喜欢

转载自blog.csdn.net/QQ_Empire/article/details/81452867
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022