index.html 7.9 KB
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../assets/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="../assets/css/weui.min.css">
    <script src="../assets/js/base.js" type="text/javascript"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_939574_y53dl3ge47d.css">
    <link rel="stylesheet" href="../assets/css/style.css">
    <style>
        body {
            padding: 0 0 1.4rem 0;
        }
    </style>
    <title>首页</title>
</head>
<body>
<div class="container">
    <div class="topmain" style="background-image: url('../assets/imgs/aicon_02@2x.png')">
        <div class="topmian_left">
            <div class="headerimg">
                <img src="../assets/imgs/aicon_03@2x.png" alt="">
            </div>
            <div>张晓晓</div>
        </div>
        <a class="topmian_rigth" href="my.html"><i class="iconfont icon-tubiao09"></i> 修改信息</a>
    </div>
    <div class="info">
        <span class="info_txt"><i class="iconfont icon-yinpin"></i> 通知:</span>
        <div class="info_y">
            <div class="scroll">
                <span>因阿里云价格上调,本公司的服务器费用也相应上调</span><span>因阿里云价格上调,本公司的服务器费用也相应上调</span><span>因阿里云价格上调,本公司的服务器费用也相应上调</span>
            </div>
        </div>
    </div>
    <div class="index_nav">
        <div class="index_navitem active">我的项目</div>
        <div class="index_navitem"><a href="keep.html">我的报修</a></div>
    </div>
    <div class="index_cell" >
        <div class="titlebox">
            <div class="title">项目名称:小牛牛英语公众号</div>
            <div class="title_subtxt">报修</div>
        </div>
        <div class="cellmain">
            <div>域名:https://shop.zbj.com/12225860/sid-贵公司自备.</div>
            <div>到期时间:2018年6月30</div>
            <div>服务器价钱:2000元/年</div>
            <div>服务器配置:XXXXXXXX</div>
            <div>到期时间:2018年6月30日</div>
            <div class="cellmain_btn">立即续费</div>
        </div>
    </div>
    <div class="index_cell" >
        <div class="titlebox">
            <div class="title">项目名称:小牛牛英语公众号</div>
            <div class="title_subtxt">报修</div>
        </div>
        <div class="cellmain">
            <div>域名:https://shop.zbj.com/12225860/sid-贵公司自备.</div>
            <div>到期时间:2018年6月30</div>
            <div>服务器价钱:2000元/年</div>
            <div>服务器配置:XXXXXXXX</div>
            <div>到期时间:2018年6月30日</div>
            <div class="cellmain_btn">立即续费</div>
        </div>
    </div>
    <div class="index_cell" >
        <div class="titlebox">
            <div class="title">项目名称:小牛牛英语公众号</div>
            <div class="title_subtxt">报修</div>
        </div>
        <div class="cellmain">
            <div>域名:https://shop.zbj.com/12225860/sid-贵公司自备.</div>
            <div>到期时间:2018年6月30</div>
            <div>服务器价钱:2000元/年</div>
            <div>服务器配置:XXXXXXXX</div>
            <div>到期时间:2018年6月30日</div>
            <div class="cellmain_btn">立即续费</div>
        </div>
    </div>
    <a class="bottom_btn"  href="binding_info.html" >添加项目</a>

</div>
<!--续费-->
<div class="inputmold">
    <div class="inputmold_mian">
        <div class="inputmold_txt xvfei_txt">
            <div>合同编号:</div>
            <div class="input_txtbox">
                <span> <span class="choose_span">1</span></span>
                <span class="span_a">
                        <img src="../assets/imgs/dwon.png" alt="">
                    </span>
            </div>
        </div>
        <div class="pricebox">
            <div class="price">价格:2000元</div>
            <div>续费时间越长越优惠</div>
        </div>
        <div class="mold_btnbox inputmold_btn">
            <div class="mold_btn index_mold_btn">确定</div>
        </div>
    </div>
</div>

<!--付款成功-->
<div class="index_success">
    <div class="inputmold_mian">
        <div class="success_box">
            <div class="success_icon">
                <img src="../assets/imgs/yes.png" alt="">
            </div>
            <div class="success_txt">
                <div class="success_title">付款成功</div>
                <div>请联系客服签署协议</div>
            </div>
        </div>

        <div class="mold_btnbox inputmold_btn ">
            <div class="mold_btn  success_btn">确定</div>
        </div>
    </div>
</div>

<!--报修-->
<div class="index_err">
    <div class="inputmold_mian">
        <div class="success_box">
            <div class="success_icon">
                <img src="../assets/imgs/aicon_05@2x.png" alt="">
            </div>
            <div class="success_txt">
                <div class="success_title">您已成功提交报修</div>
                <div>售后会在2个工作日内反馈您的问题,请您注意查收,祝您生活愉快!</div>
            </div>
        </div>
        <div class="mold_btnbox inputmold_btn ">
            <div class="mold_btn ">确定</div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../assets/js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../assets/js/weui.min.js"></script>
<script type="text/javascript" src="../assets/js/swiper-3.4.2.jquery.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
    });
    //文字滚动
    var num = 0;

    function goLeft() {
        //750是根据你给的尺寸,可变的
        if (num == -750) {
            num = 0;
        }
        num -= 1;
        $(".scroll").css({
            left: num
        })
    }

    //设置滚动速度
    var timer = setInterval(goLeft, 50);
    //设置鼠标经过时滚动停止
    $(".scroll span").hover(function () {
            clearInterval(timer);
        },
        function () {
            timer = setInterval(goLeft, 50);
        })
    $('.cellmain_btn').click(function (e) {
        e.stopPropagation();
        $('.inputmold').show();
    })
    $('.inputmold').click(function () {
        $('.inputmold').hide();
    })
    $('.inputmold_mian').click(function (e) {
        e.stopPropagation();
    })
    $('.xvfei_txt').on('click', function () {
        weui.picker([{
            label: '1年',
            value: 1
        }, {
            label: '2年',
            value: 2
        }, {
            label: '3年',
            value: 3
        }, {
            label: '4年',
            disabled: true,
            value: 4
        }, {
            label: '5年',
            value: 5
        }], {
            onChange: function (result) {
                console.log(result);
            },
            onConfirm: function (result) {
                console.log(result);
                $('.choose_span').html(result[0].value);
            }
        });
    });
    $('.index_mold_btn').click(function () {
        $('.inputmold').hide();
        $('.index_success').show();
    })
    $('.success_btn').click(function () {
        $('.index_success').hide();
    })
    //保修
    $('.title_subtxt').click(function (e) {
        e.stopPropagation();
        $('.index_err').show();
    })
    $('.index_err').click(function () {
        $('.index_err').hide();
    })
    $('.mold_btn ').click(function () {
        $('.index_err').hide();
    })
    $('.index_cell').click(function () {
        window.location.href = "keep_detail.html";
    })
</script>
</body>
</html>