Html流量充值页面效果_html充值页面代码-CSDN博客

change.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>充流量</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body style="background:#f3f3f3">
    <div id="change">
        <div class="change_top">
            <div class="change_top_num">
                <div class="fr num_close" v-show="fillIn" @click="cancleNum">
                    <img src="image/close.png" alt="">
                </div>
                <div class="num_input" @input="telNum">
                    <input type="text" placeholder="请输入手机号码(移动、联通、电信均支持!)" v-model="tel" @blur="telBlur">
                </div>
                <div class="clear"></div>
            </div>
            <p class="change_top_addre" v-cloak>{{provice}}{{city}} <span class="num_ower">{{numOwer}}</span></p>
        </div>
        <div class="change_middle">
            <p class="change_middle_title">全国可用,即时生效!</p>
            <ul class="change_middle_choose">
                <li v-cloak v-for="(item,index) in chooseList" @click="chooseRechange(index)">
                    <div class="choose_classify" :class="{bgColor:item.checked}">
                        <p v-cloak>{{item.classify}}M</p>
                        <p v-cloak>售价{{item.money}}元</p>
                    </div>
                </li>
                <div class="clear"></div>
            </ul>
            <div class="change_middle_money">
                <p v-cloak>{{nowPrice}}元 <span class="choose_special" v-cloak>原价:{{prePrice}}元</span></p>
                <p><span class="choose_range" v-cloak>{{range}}</span>全国流量,即时生效,月底失效</p>
            </div>
        </div>
        <div class="change_btn">
            <button>支付</button>
        </div>
    </div>
</body>
</html>
<script src="js/change.js"></script>

style.css

*{
    padding: 0;
    margin: 0;
    list-style: none;
    font-family:'Helvetica Neue', 'Microsoft Jhenghei', Helvetica, sans-serif;
    color: #303030;
}
html,body {
    width:100%;
    height:100%;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.clear{
    clear: both;
}
input,button{
    outline: none;
}
[v-cloak] {
    display: none;
}
.change_top{
    background: #fff;
    /*padding:0 15px;*/
    margin-bottom: 10px;
}
.num_ower{
    margin-left: 8px;
    color: #666666;
}
.change_top_num{
    border-bottom: 1px solid #dcdcdc;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
}
::-webkit-input-placeholder {
    color: #b8b8b8;
}
:-moz-placeholder {
    color: #b8b8b8;
}
::-moz-placeholder {
    color: #b8b8b8;
}
:-ms-input-placeholder {
    color: #b8b8b8;
}
.num_close{
    width: 19px;
    height: 19px;
    margin-top: 5px;
}
.num_close>img{
    width: 100%;
}
.num_input{
    margin-right: 25px;
    height: 40px;
}
.num_input>input{
    width:100%;
    height:100%;
    box-sizing: border-box;
    border:none;
    font-size: 16px;
}
.change_top_addre{
    line-height: 35px;
    color: #666666;
    font-size: 12px;
    padding:0 15px;
}
.change_middle{
    background: #fff;
}
.change_middle_title{
    padding:0 15px;
    line-height: 50px;
    font-size: 14px;
    border-bottom: 1px solid #dcdcdc;
}
.change_middle_choose{
    padding: 15px;
    border-bottom: 1px solid #dcdcdc;
}
.change_middle_choose>li{
    width:33.33%;
    margin-bottom: 20px;
    float: left;
}
.choose_classify{
    width:90px;
    margin: 0 auto;
    border:1px solid #34a9e3;
    border-radius: 5px;
}
.choose_classify>p{
    text-align: center;
    color: #34a9e3;
}
.choose_classify>p:first-child{
    font-size:14px;
    line-height: 25px;
}
.choose_classify>p:last-child{
    font-size:12px;
    line-height: 20px;
}
.change_middle_money{
    padding: 5px 15px;
}
.change_middle_money>p{
    font-size: 15px;
    line-height: 30px;
}
.change_middle_money>p:last-child{
    color: #666666;
}
.choose_special{
    color: #999999;
    text-decoration: line-through;
    margin-left: 20px;
}
.choose_range{
    display: inline-block;
    width: 40px;
    height:20px;
    line-height: 20px;
    -webkit-border-radius:;
    -moz-border-radius:;
    border-radius:5px;
    background: #0194dc;
    color: #fff;
    font-size:12px;
    text-align: center;
    margin-right: 20px;
}
.change_btn{
    position: fixed;
    margin: 0 auto;
    bottom: 20px;
    left:0;
    right:0;
    text-align: center;
}
.change_btn>button{
    height:40px;
    width:80%;
    background:#0194dc;
    color: #fff;
    font-size:14px;
    border-radius:5px;
    border:none;
}
.bgColor{
    background:#34a9e3;
}
.bgColor>p{
    color: #fff;
}

change.js

var change = new Vue({
    el:'#change',
    data:function(){
        return{
            tel:'',
            chooseList:[
                {classify:10,money:2.8,checked:false},
                {classify:10,money:3.5,checked:false},
                {classify:10,money:4.5,checked:false},
                {classify:10,money:5.5,checked:false},
                {classify:10,money:6.5,checked:false},
                {classify:10,money:7.5,checked:false}
            ],
            nowPrice:2.5,
            prePrice:'3.00',
            range:'全国',
            provice:'',
            city:'',
            numOwer:'',
            fillIn:false,
            tab_index:0
        }
    },
    methods:{
        ready:function(){
              var this_obj = this;
              var tab_index = this_obj.tab_index;
              this_obj.chooseList[tab_index].checked = true;
              this_obj.nowPrice = this_obj.chooseList[tab_index].money;
          },
        telNum:function(){
            var this_obj = this;
            this_obj.fillIn = true;
            if(this_obj.tel == ''){
                this_obj.fillIn = false;
                this_obj.provice = '';
            }
        },
        telBlur:function(){
            var this_obj = this;
            var reg = /^1(3|4|5|7|8)\d{9}$/;
            if(this_obj.tel == ''){
                this_obj.provice = '';
            }else if(!reg.test(this_obj.tel)){
                this_obj.provice = '请输入正确手机号';
                $(".change_top_addre").css("color","red");
            }else{
                this_obj.provice = '北京-';
                this_obj.city = '北京';
                this_obj.numOwer = '移动';
            }
        },
        cancleNum:function(){
            this.tel = '';
            this.fillIn = false;
            this.provice = '';
            this.city = '';
            this.numOwer = '';
        },
        chooseRechange:function(index){
            var this_obj = this;
            this_obj.nowPrice = this_obj.chooseList[index].money;
            for(var i = 0;i < this_obj.chooseList.length;i++){
                this_obj.chooseList[i].checked = false;
            }
            this_obj.chooseList[index].checked = true;
        }
    }
})
change.ready();