master

分支 (1)

管理

管理

master

big-website
/
problem.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合官网</title>
    <!--公共样式-->
    <link rel="stylesheet" href="css/base.css">
    <!--本页面css-->
    <link rel="stylesheet" href="css/problem.css">
    <!--导航栏css-->
    <link rel="stylesheet" href="css/style.css">
    <!--公用样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--swiper-->
    <link rel="stylesheet" href="lib/swiper/swiper.min.css">
</head>
<body style>

<!--回到顶部-->
<div class="backtop">
    <a href="#" class="">
        TOP
    </a>

</div>

<!--头部开始-->
<header>
    <div class="w header-w">
        <!--logo部分-->
        <div class="logo">
            <h1>
                <a href="/">

                </a>
            </h1>
        </div>

        <!--搜索框-->
        <div id="search" class="">
            <div class="search-m">
                <div class="form">
                    <button class="search-btn">
                        搜索
                    </button>
                    <input type="" name="" class="search-inp" style="color: rgb(153,153,153);"
                           placeholder="炸鸡、汉堡、麻辣烫...">

                </div>
            </div>
            <!--搜索热词-->
            <div class="search-word">
                <a href="javascript:void(0);">投资金额：</a>
                <a href="javascript:void(0);">3-5万</a>
                <a href="javascript:void(0);">5-10万</a>
                <a href="javascript:void(0);">15-20万</a>
                <a href="javascript:void(0);">20-30万</a>
            </div>
        </div>

        <!--三个图标-->
        <div class="join">
            <a href="javascript:void(0);">
                <img src="images/index/join01.png" alt="">
                <p>项目库</p>
            </a>
            <a href="javascript:void(0);">
                <img src="images/index/join02.png" alt="">
                <p>招商发布</p>
            </a>
            <a href="javascript:void(0);">
                <img src="images/index/join03.png" alt="">
                <p>展商入驻</p>
            </a>
        </div>
    </div>
</header>
<div id="swiper-container1">

</div>
<!--头部结束-->

<!--面包屑开始-->

<div class="bread ww">
    <a href="/"><i class="iconfont">&#xe6a2;</i>首页</a>
    <span class="iconfont">&#xe603;</span>
    <a href="/qapage.html">创业问答</a>
    <span class="iconfont">&#xe603;</span>
    <a href="javascript:void(0);">提问</a>
</div>

<!--面包屑结束-->

<!--顶部图片开始-->

<div class="top_img">
    <a href="javascript:void(0);">
        <img src="images/problem/yu_top.png" alt="">
    </a>
</div>

<!--顶部图片结束-->

<!--正文开始-->
<main class="ww">
    <div class="m-left">
        <!--问题表单-->
        <div class="ml-pro">
            <!--提问题-->
            <form action="">
                <input type="text" name="user_question" placeholder="请用一句话描述您的疑问。">
                <div class="filebox">
                    <label for="user_img" class="sure_file">问题描述（图片宽高不超过500像素，大小不超过1 M）</label>
                    <input type="file" name="user_img" id="user_img"
                           accept="image/png, image/jpeg, image/gif, image/jpg">
                    <div class="cbox">
                        <img src="" alt="">
                    </div>
                </div>
                <div class="bot-box">
                    <div class="bot">
                        <input type="checkbox" id="nm"><label for="nm" class="nm-cls">匿名</label>
                    </div>
                    <input type="submit" value="提交">
                </div>
            </form>

            <!--热门问题-->
            <div class="hot-problem">
                <!--标题-->
                <h2 class="hp-title">热门问题</h2>
                <ul class="hp-nav">
                    <li>
                        <a href="/answer.html">
                            <span>2019-1-10</span>
                            <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                            <span><i>0</i>回答</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <span>2019-1-10</span>
                            <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                            <span><i>0</i>回答</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <span>2019-1-10</span>
                            <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                            <span><i>0</i>回答</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <span>2019-1-10</span>
                            <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                            <span><i>0</i>回答</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <span>2019-1-10</span>
                            <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                            <span><i>0</i>回答</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!--用户信息-->
        <div class="ml-form">
            <!--顶部图片-->
            <div class="service">
                <a href="javascript:void(0);">
                    <img src="images/problem/concact_img.png" alt="">
                </a>
            </div>

            <h2>留言咨询 <i>（24小时内获得企业快速回复）</i></h2>
            <form action="" id="info-form">
                <div>
                    <label for="username" class="username-lab"><i>*</i>姓名：</label>
                    <input type="text" id="username">
                    <p class="tips hide">123</p>
                </div>
                <div class="radiobox">
                    <input type="radio" value="男" name="gender" checked="checked" id="gentleman" class="rad">先生
                    <input type="radio" value="女" name="gender" id="lady" class="rad">女士
                </div>
                <div>
                    <label for="usertel" class="usertel-lab"><i>*</i>联系方式：</label>
                    <input type="tel" id="usertel">
                    <p class="tips tipstel hide">456</p>
                </div>
                <div class="address-box">
                    <label for="useraddress" class="useraddress-lab">联系地址：</label>
                    <input type="text" id="useraddress">
                </div>
                <div>
                    <label for="usermsg" class="usermsg-lab">留言信息：</label>
                    <textarea id="usermsg"></textarea>
                </div>
                <div class="own-information">
                    <span>是否自愿资讯其他项目：</span>
                    <input type="radio" value="男" name="own" checked="checked" id="yes" class="rad">是
                    <input type="radio" value="女" name="own" id="no" class="rad">不是
                </div>
                <input type="submit" value="提交留言" id="submit-btn">
                <span class="spantip err hide">请务必输入带*的内容</span>
                <span class="spantip succ hide">提交成功，我们会尽快与您联系</span>
            </form>
            <!--快捷留言-->
            <div class="quick-msg">
                <p>快捷留言</p>
                <ul id="quick-nav">
                    <li>我想加盟，请电话联系我。</li>
                    <li>具体加盟条件有哪些？</li>
                    <li>我想到贵公司考察。</li>
                    <li>近期加盟有什么优惠吗？</li>
                    <li>贵公司都有哪些品牌呢？</li>
                    <li>加盟这个品牌需要多少加盟费呢？</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="m-right">
        <!--品牌推荐-->
        <div class="mr-recommend">
            <div class="mrr-title">

            </div>
            <ul>
                <li>
                    <a href="javascript:void(0);">
                        <img src="images/problem/re01.png" alt="">
                        <div>
                            <p>煲百味</p>
                            <p>加盟费：<i>1-5万</i></p>
                            <p>已有：1245人申请加盟</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="images/problem/re02.png" alt="">
                        <div>
                            <p>煲百味</p>
                            <p>加盟费：<i>1-5万</i></p>
                            <p>已有：1245人申请加盟</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="images/problem/re03.png" alt="">
                        <div>
                            <p>煲百味</p>
                            <p>加盟费：<i>1-5万</i></p>
                            <p>已有：1245人申请加盟</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="images/problem/re04.png" alt="">
                        <div>
                            <p>煲百味</p>
                            <p>加盟费：<i>1-5万</i></p>
                            <p>已有：1245人申请加盟</p>
                        </div>
                    </a>
                </li>
            </ul>
            <a href="javascript:void(0);" class="huan">
                <img src="images/problem/huan.png" alt="">
                <i>换一批</i>
            </a>
        </div>
        <!--最新资讯-->
        <div class="mr-news">
            <div class="mrn-title">

            </div>
            <ul>
                <li>
                    <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                </li>
                <li>
                    <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                </li>
                <li>
                    <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                </li>
                <li>
                    <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                </li>
                <li>
                    <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                </li>
                <li>
                    <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                </li>
                <li>
                    <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                </li>
            </ul>
        </div>
    </div>
</main>

<script src="lib/jq/jquery-1.10.2.min.js"></script>

<!--导航栏的js-->
<script src="js/tab.js"></script>
<!--swiper-->
<script src="lib/swiper/swiper.min.js"></script>
<script src="js/common.js"></script>
<script>
    $(function () {
        setTimeout(function () {
            $("#swiper-container1").animate({height: "10px"})
        }, 500)

        $(".huan").on("click", function () {
            $(".huan img").addClass("runanimation")
            setTimeout(function () {
                $(".huan img").removeClass("runanimation")
            }, 2000)
        })

        // 图片上传
        function fileUp() {
            $("#user_img").on("change", function (e) {
                var files = this.files;
                var reader = new FileReader();
                reader.readAsDataURL(files[0]);
                reader.onload = function (e) {
                    var dx = (e.total / 1024) / 1024;
                    if (dx >= 1) {
                        alert("文件大小大于1M");
                        return;
                    }
                    $(".cbox img").attr("src", e.target.result)
                }
            })
        }

        fileUp()


        // if ($(".cbox").children("img").length === 0) {
        //     console.log(123)
        //     fileUp()
        // } else {
        //     console.log(789)
        //
        // }

        // 快捷回复
        function quick() {
            $("#quick-nav").on("click", "li", function (e) {
                var tar = $(e.target)
                $("#usermsg").val(tar.html())
            })
        }

        quick()

        var flag = false
        var nameSure = false
        var telSure = false

        // 表单的验证
        function formValidation() {

            // 为姓名和联系方式输入框注册失去焦点事件
            $("#username").on("blur", function () {

                // 获取用户的输入的内容
                var username = $(this).val().trim(),
                    // 设置提示内容
                    tipMsg = "",
                    nameReg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{1,8}$/,
                    tipBox = $(this).parent().children(".tips");
                if (username.length === 0) {
                    tipMsg = "请输入您的姓名"
                    tipBox.fadeIn(300).html(tipMsg)
                } else if (!nameReg.test(username)) {
                    tipMsg = "请输入正确的姓名"
                    tipBox.fadeIn(300).html(tipMsg)
                    return tipMsg
                } else {
                    tipBox.fadeOut()
                    nameSure = true
                    return
                }


            })
            $("#usertel").on("blur", function () {

                // 获取用户输入的联系方式
                var userTel = $(this).val().trim(),
                    // 号码正则
                    telReg = /(^1\d{10}$)|(^[0-9]\d{7}$)/,
                    // 提示信息
                    tipMsg = "",
                    tipBox = $(this).parent().children(".tips");
                if (!telReg.test(userTel)) {
                    tipMsg = "请输入正确的手机号码";
                    tipBox.fadeIn(300).html(tipMsg)
                    return tipMsg
                } else if (userTel.length === 0) {
                    tipMsg = "请输入手机号码";
                    tipBox.fadeIn(300).html(tipMsg)
                    return tipMsg
                } else {
                    tipBox.fadeOut();
                    telSure = true
                    return
                }
            })

        }

        $("#info-form").on("submit", function (e) {
            console.log(nameSure, telSure, flag)
            if (nameSure && telSure) {
                flag = true
                console.log(flag)
            }
            if(flag){
                console.log("ok")
            }else {
                console.log("no")
            }
            if (!flag) {
                e.preventDefault();
                $(".spantip.err").fadeIn(300)
            }else {
                $(".spantip.succ").fadeIn(300)
            }
        })
        formValidation()


        // $(window).on('scroll', function () {
        //     // 判断显示还是隐藏按钮
        //     if($(this).scrollTop()>=$(this).height()){
        //         $('.backtop').fadeIn('slow');
        //     }else {
        //         $('.backtop').fadeOut('slow');
        //     }
        //
        // });
        // $('#top').on('click',function () {
        //     // 设置滚动动画，这里注意使用的是$('body')不是$(window)
        //     $('body').animate({scrollTop:'0'},500);
        // });
    })
</script>
</body>
</html>