用h5简单实现APP帮助中心(FAQ)，下次也可以用

最新推荐文章于 2024-07-25 14:15:14 发布

换个名字显得不一样

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量737

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/sinat_25884075/article/details/128055848

版权

先看效果：

功能：

列表点击可以打开

点击下面的链接可以跳转到在线IM客服页面

页面功能简单，但是却常用，下面是代码

首页要引入2个js文件

<script src="./static/js/jquery-1.11.0.min.js"></script>
<script src="./static/js/jquery.collapse.js"></script>

这2个库需要的可以网上找一下下载

下面是整体实现代码，可以直接复制使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <script src="./static/js/jquery-1.11.0.min.js"></script>
    <script src="./static/js/jquery.collapse.js"></script>
    <title>在线客服</title>
    <script>
        $(function() {
            $("#dowebok").collapse()
        })
    </script>
    <style>
        *{
            padding: 0;
            border: 0;
            margin: 0;
        }
        a{
            text-decoration:none;
        }
       body{
           background-color: #eeeded;
           padding: 15px;
       }
       .head-title{
           display: flex;
           align-items: center;

       }
       .h3-title{
           font-size: 14px;
           background-color: #ff5b69;
           color: #fff;
           border-radius: 10px;
           padding: 5px 10px;
       }
       .question{
           margin: 20px 20px 10px 20px;
       }
       .example{
            background-color: #FFFFFF;
            border-radius: 10px;
            padding: 5px 5px 5px 10px;
           font-size: 14px;

       }
       .example h3{
           height: 40px;
           line-height: 40px;
       }
        .example a{
            color: #1a1a1a;
            font-weight: normal;
            font-size: 14px;
            width: 100%;
            display: block;
        }
        .example div{
            color: #999999;
        }
        .kefu{
            text-align: center;
            margin-top: 50%;
        }
        .kefu a{
            background-color: #b13d86;
            color: #FFFFFF;
            font-size: 14px;
            border-radius: 20px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
<div class="head-title">
    <div class="h3-title">常见问题可以点击下方展开。有其他疑问可以点击下方在线客服联系我们！</div>
    <svg t="1669450712989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1501" width="64" height="64"><path d="M584.704 998.4H439.296c-228.352 0-413.696-185.344-413.696-413.696V439.296c0-228.352 185.344-413.696 413.696-413.696h145.408c228.352 0 413.696 185.344 413.696 413.696v145.408c0 228.352-185.344 413.696-413.696 413.696z" fill="#FF4958" p-id="1502"></path><path d="M998.4 584.704V439.296c0-228.352-185.344-413.696-413.696-413.696H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 228.352 185.344 413.696 413.696 413.696h145.408c13.312 0 26.624-1.024 38.912-2.048 162.816-61.44 294.912-185.344 368.64-342.016 4.096-22.528 6.144-46.08 6.144-69.632z" fill="#FF4958" p-id="1503"></path><path d="M998.4 506.88v-67.584c0-228.352-185.344-413.696-413.696-413.696H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 219.136 169.984 398.336 385.024 412.672 288.768-11.264 527.36-217.088 587.776-490.496z" fill="#FF4F5D" p-id="1504"></path><path d="M584.704 25.6H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 143.36 72.704 269.312 183.296 343.04 56.32 17.408 115.712 27.648 178.176 27.648 322.56 0 584.704-262.144 584.704-584.704 0-34.816-3.072-67.584-9.216-100.352C898.048 125.952 752.64 25.6 584.704 25.6z" fill="#FF5463" p-id="1505"></path><path d="M584.704 25.6H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 96.256 32.768 185.344 88.064 256 81.92 48.128 177.152 74.752 279.552 73.728 296.96-4.096 538.624-250.88 535.552-547.84-1.024-75.776-17.408-147.456-46.08-212.992C807.936 74.752 702.464 25.6 584.704 25.6z" fill="#FF5A68" p-id="1506"></path><path d="M874.496 490.496c34.816-153.6 0-294.912-77.824-406.528-61.44-36.864-134.144-58.368-210.944-58.368H439.296C210.944 26.624 25.6 211.968 25.6 440.32v145.408c0 59.392 12.288 114.688 34.816 165.888 126.976 109.568 313.344 157.696 503.808 90.112 156.672-55.296 273.408-189.44 310.272-351.232z" fill="#FF606D" p-id="1507"></path><path d="M439.296 25.6C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 26.624 3.072 53.248 7.168 77.824C116.736 764.928 244.736 829.44 387.072 829.44c252.928 0 458.752-204.8 458.752-458.752 0-128-52.224-243.712-137.216-326.656-38.912-12.288-79.872-18.432-122.88-18.432H439.296z" fill="#FF6672" p-id="1508"></path><path d="M25.6 439.296v139.264c70.656 123.904 204.8 207.872 357.376 208.896 228.352 2.048 418.816-185.344 419.84-414.72 0-144.384-71.68-270.336-182.272-345.088-12.288-1.024-23.552-2.048-35.84-2.048H439.296C210.944 25.6 25.6 210.944 25.6 439.296z" fill="#FF6B78" p-id="1509"></path><path d="M529.408 25.6h-90.112C210.944 25.6 25.6 210.944 25.6 439.296v29.696c43.008 158.72 188.416 276.48 361.472 276.48 206.848 0 373.76-167.936 373.76-373.76C760.832 215.04 665.6 81.92 529.408 25.6z" fill="#FF717D" p-id="1510"></path><path d="M384 41.984c-33.792 0-66.56 5.12-97.28 14.336-74.752 29.696-139.264 79.872-186.368 144.384-30.72 50.176-48.128 109.568-48.128 173.056 0 183.296 148.48 331.776 331.776 331.776s331.776-148.48 331.776-331.776S567.296 41.984 384 41.984z" fill="#FF7782" p-id="1511"></path><path d="M384 374.784m-289.792 0a289.792 289.792 0 1 0 579.584 0 289.792 289.792 0 1 0-579.584 0Z" fill="#FF7D87" p-id="1512"></path><path d="M136.192 374.784a247.808 247.808 0 1 0 495.616 0 247.808 247.808 0 1 0-495.616 0Z" fill="#FF828D" p-id="1513"></path><path d="M384 374.784m-205.824 0a205.824 205.824 0 1 0 411.648 0 205.824 205.824 0 1 0-411.648 0Z" fill="#FF8892" p-id="1514"></path><path d="M510.976 381.952c92.16 0 167.936 74.752 167.936 167.936 0 6.144 0 12.288-1.024 18.432-19.456 9.216-39.936 15.36-61.44 20.48-19.456 4.096-38.912 7.168-60.416 9.216-5.12-9.216-15.36-15.36-26.624-15.36h-33.792c-16.384 0-29.696 13.312-29.696 29.696 0 16.384 13.312 29.696 29.696 29.696h33.792c12.288 0 23.552-7.168 27.648-18.432 22.528-2.048 44.032-5.12 64.512-10.24 17.408-4.096 32.768-9.216 49.152-15.36-20.48 68.608-83.968 118.784-159.744 118.784-92.16 0-167.936-74.752-167.936-167.936s75.776-166.912 167.936-166.912z m2.048-74.752c-67.584 0-128 27.648-172.032 71.68-28.672 28.672-49.152 63.488-61.44 102.4h-8.192c-19.456 0-35.84 16.384-35.84 35.84v55.296c0 19.456 16.384 35.84 35.84 35.84h47.104v-122.88c10.24-30.72 27.648-58.368 50.176-79.872 36.864-36.864 88.064-60.416 145.408-60.416s107.52 22.528 145.408 60.416c21.504 21.504 37.888 47.104 48.128 75.776v126.976h46.08c19.456 0 35.84-16.384 35.84-35.84v-56.32c0-19.456-16.384-35.84-35.84-35.84h-7.168c-11.264-38.912-32.768-73.728-61.44-102.4-44.032-43.008-105.472-70.656-172.032-70.656z" fill="#FFFFFF" opacity=".8" p-id="1515"></path></svg>
</div>

<div class="question">常见问题</div>
<div class="example" id="dowebok">
    <h3>1、为什么需要金币才能聊天</h3>
    <div>
        您好，为了营造良好诚信的交友平台分为，也为了避免女性用户被过度骚扰，平台采取消耗金币的聊天交友模式，金币让对方了解您的实力，付费聊天能主动追求您喜欢的人并且得到及时回应，可靠高效哦。
    </div>
    <h3>2、性别选错怎么办？</h3>
    <div>
        您好，性别选择错误，请进入【我的】-【我的认证】-【实人认证】操作，实人认证后，性别将跟随身份证性别而变化
    </div>
    <h3>3、亲密度有什么用？</h3>
    <div>
        您好，亲密度是双方爱意的体现，互动越频繁，亲密度越高，达到15度后，将自动成为亲密好友，上线会及时收到上线通知。
    </div>
    <h3>4、遇到诈骗如何处理？</h3>
    <div>
        您好，抱歉给您不好的体验，若您在平台内遇到诈骗，请点击改用户资料，选择点击右上角-点击举报，并且协商诈骗经过。我们会有工作人员跟进处理，我们会不断优化用户体验。
    </div>
    <h3>5、如何举报用户？</h3>
    <div>
        "您好，如果您觉得对方用户有违规行为，您可以点击对方的个人资料-点击右上角-点击举报处理的哦。
        如有其他疑问可以“联系客服-提交反馈”为您解答"
    </div>
    <h3>6、为什么提示内容违规？</h3>
    <div>
        您好，系统已接入第三方检测系统，系统会自动检测内容是否违规，如显示内容违规建议您换其他内容进行发布。
    </div>
    <h3>7、如何删除聊天记录？</h3>
    <div>
        "1）、删除单个用户的聊天记录：
        长按该用户对话-【删除】即可删除聊天记录
        2）、右上角删除也可以删除非亲密好友的聊天记录"
    </div>
    <h3>8、送多少礼物才可获得联系方式</h3>
    <div>
        "您好，送礼本身语解锁联系方式无关，但为保障您的安全，建议您在平台内进行交友互动；
        如在使用过程中有遇到异常问题，可联系在线客服反馈。"
    </div>
</div>
<div class="kefu">
 <a id="kefu_url" href="">联系在线客服</a>
</div>
<script>
    //获取url参数
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    var kefu_url = getQueryVariable("kefu_url");
    $("#kefu_url").attr('href',kefu_url);
</script>
</body>
</html>