content_detail.html 12.4 KB
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>广告商城</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/advDetail.css">
</head>

<body>
    <div class="adv_detail clearfix">
        <!-- 详情内容 -->
        <div class="detail_top">
            <!-- 标题 -->
            <div class="detail_title">{$data.goods_name}</div>
            <!-- 日期 -->
            <div class="detail_date">截止日期:<i class="end_day">{:date('Y/m/d',$vo['end_time'])}</i></div>
            <!-- 描述 -->
            <div class="detail_word_wrap">
                {$data.content}
            </div>
        </div>
        <!-- 答题 -->
        <div class="detail_qust">
            <!-- 单选题 -->
            <div class="quest_box quest_ans">
                <div class="quest_title">题目</div>
                <div class="quest_single">
                    <div class="question">
                        1、方面便是什么味道
                    </div>
                    <div class="answer layout align_center flex_row">
                        <div class="layout align_center flex_row ans_single" data-index="1">
                            <div class="ans_img">
                                <img src="img/sun_07@2x.png" alt="" class="choice_img">
                            </div>
                            <div class="answer_word choice_ans">老坛酸菜牛肉面</div>
                        </div>
                        <div class="layout align_center flex_row ans_single" data-index="2">
                            <div class="ans_img">
                                <img src="img/sun_06@2x.png" alt="" class="choice_img">
                            </div>
                            <div class="answer_word">红烧牛肉鸡蛋面</div>
                        </div>
                        <div class="layout align_center flex_row ans_single" data-index="3">
                            <div class="ans_img">
                                <img src="img/sun_06@2x.png" alt="" class="choice_img">
                            </div>
                            <div class="answer_word">黑椒牛排酸菜牛肉面</div>
                        </div>
                        <div class="layout align_center flex_row ans_single" data-index="4">
                            <div class="ans_img">
                                <img src="img/sun_06@2x.png" alt="" class="choice_img">
                            </div>
                            <div class="answer_word">牛骨酸菜牛肉面</div>
                        </div>
                    </div>
                </div>
                <div class="quest_single">
                    <div class="question">
                        2、方面便是什么味道
                    </div>
                    <div class="answer layout align_center flex_row">
                        <div class="layout align_center flex_row ans_single" data-index="5">
                            <div class="ans_img">
                                <img src="img/sun_07@2x.png" alt="" class="choice_img">
                            </div>
                            <div class="answer_word choice_ans">老坛酸菜牛肉面</div>
                        </div>
                        <div class="layout align_center flex_row ans_single" data-index="6">
                            <div class="ans_img">
                                <img src="img/sun_06@2x.png" alt="" class="choice_img">
                            </div>
                            <div class="answer_word">红烧牛肉鸡蛋面</div>
                        </div>
                        <div class="layout align_center flex_row ans_single" data-index="7">
                            <div class="ans_img">
                                <img src="img/sun_06@2x.png" alt="" class="choice_img">
                            </div>
                            <div class="answer_word">黑椒牛排酸菜牛肉面</div>
                        </div>
                        <div class="layout align_center flex_row ans_single" data-index="8">
                            <div class="ans_img">
                                <img src="img/sun_06@2x.png" alt="" class="choice_img">
                            </div>
                            <div class="answer_word">牛骨酸菜牛肉面</div>
                        </div>
                    </div>
                </div>
                <div class="quest_single">
                    <div class="question">
                        3、大家好才是()。
                    </div>
                    <div class="answer_fill">答案:真的好</div>
                    <div class="answer_input_box">
                        <input type="text" class="answer_input" placeholder="请输入答案" />
                    </div>
                </div>
                <div class="btn right_btn" onclick="submit()">提交答案</div>
                <div class="btn error_btn">重新答题(<i class="new_time"></i></div>
            </div>
            <!-- 未满足答题条件 -->
            <div class="quest_box quest_condition">
                <div class="quest_title">对不起,您未满足当前题目答题条件</div>
                <div class="btn_group layout align_center flex_row justify">
                    <div class="btn_l btn_msg">完善信息</div>
                    <div class="btn_l btn_more">查看更多</div>
                </div>
            </div>
        </div>
        <!-- 弹窗 -->
        <div class="submit_modal"></div>
        <!-- 弹窗内容 -->
        <div class="submit_modal_box layout align_center justify_center">
            <!-- 提交 -->
            <div class="submit_either">
                <div class="submit_either_wrap">
                    <div class="submit_wrap_title">
                        提示
                    </div>
                    <!-- 是否提交 -->
                    <!-- <div>
                        <div class="submit_sure">确认提交问题答案</div>
                        <div class="submit_btn_group layout align_center justify flex_row">
                            <div class="submit_btn_cancle submit_btn_all">取消</div>
                            <div class="submit_btn_sure submit_btn_all">确认</div>
                        </div>
                    </div> -->
                    <!-- 答题成功 -->
                    <!-- <div>
                        <div class="submit_suc">
                            <div class="submit_succ">答题成功</div>
                            <div class="submit_succ">恭喜您答对了全部题目</div>
                        </div>
                        <div class="submit_coupon">获得红包劵:800</div>
                        <div class="submit_more">查看更多</div>
                    </div> -->
                    <!-- 答题失败 -->
                    <div>
                        <div class="submit_suc">
                            <div class="submit_succ">答题失败</div>
                            <div class="submit_succ">很遗憾您未能正确回答全部题目</div>
                        </div>
                        <div class="submit_more" onclick="checkMore()">查看更多</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部链接 -->
        <div class="detail_bottom clearfix layout  flex_row">
            <div class="bottom_link layout align_center flex_row justify_center" onclick="Jump()">
                <div class="link_img">
                    <img src="img/sun_10@2x.png" alt="">
                </div>
                <a class="jump_a">https://www.baidu.com/</a>
            </div>
            <div class="bottom_collect layout align_center justify_center flex_diection">
                <div class="collect_img">
                    <img src="img/sun_05@2x.png" alt="" class="collect_img_link">
                </div>
                <div>收藏</div>
            </div>
        </div>
    </div>
    <script src="js/base.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/toast.js"></script>
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    <script>
        // 截止日期
        var endDay = 212321312312; //后台时间戳
        $(".end_day").text(showYear(endDay));

        // 图文显示
        var contenTimer = null;
        let timer = 3000;
        contenTimer = setInterval(function() {
            $(".detail_qust").show();
            $(".quest_box").removeClass("quest_ans");
            // 重新答题
            $(".error_btn").hide();
            // 未满足答题条件
            // $(".quest_condition").hide();
            $(".detail_top").css("margin-bottom", "0");
            clearInterval(contenTimer);
        }, timer)



        function showQuest(satisfy) {
            // 是否满足答题条件
            var satisfy = 2;
            if (satisfy == 1) {
                // 满足
                $(".quest_ans").show()
            } else {
                $(".quest_condition").show()
            }
        };

        // 判断是否完善信息
        var either = 1;
        if (either == 1) {
            // 未完善信息
            $(".btn_msg").click(function() {
                window.location.href = "personalMsg.html"
            })
        } else {
            $(".btn_msg").addClass("btn_all");
        }

        // 查看更多 完善信息
        $(".btn_more").click(function() {
            window.location.href = "index.html"
        })

        // 选择答案
        $(".ans_single").click(function() {
            $(this).find(".answer_word").addClass("choice_ans");
            $(this).find(".choice_img").attr("src", "img/sun_07@2x.png");
            $(this).siblings().find(".answer_word").removeClass("choice_ans");
            $(this).siblings().find(".choice_img").attr("src", "img/sun_06@2x.png");
        })



        // 提交答案
        function submit() {
            $(".adv_detail").css('height', "100vh")
            $(".submit_modal").show();
            $(".submit_modal_box").show();
        }
        // 查看更多 答题错误
        function checkMore() {
            // 弹窗消失
            $(".adv_detail").css('height', "auto");
            $(".submit_modal").hide();
            $(".submit_modal_box").hide();
            // 重新答题
            $(".error_btn").show();
            $(".right_btn").hide();
            // 重新答题倒计时
            let newTime = 300;
            let newTimer = setInterval(function() {
                newTime--;
                $(".new_time").text(changeTime(newTime));
                if (newTime == 0) {
                    clearInterval(newTimer);
                    window.location.reload();
                }
            }, 1000);
        }




        // 底部链接跳转
        function Jump() {
            var webSite = $(".jump_a").text();
            window.location.href = webSite;
        };

        // 是否收藏

        var isCollect = 2;
        $(".bottom_collect").click(function() {

        })
        if (isCollect == 1) {
            // 收藏
            let url = "img/sun_08@2x.png";
            $(".collect_img_link").attr("src", url);
            $(".bottom_collect").css("color", "#FB7A17");
        } else {
            let url = "img/sun_05@2x.png";
            $(".collect_img_link").attr("src", url);
        }
    </script>
    <script>
        // 地图定位
        var geolocation = new qq.maps.Geolocation("LQNBZ-F3L34-EQMUR-DILMD-LBR4Q-GDFOH", "myapp");
        var positionNum = 0;
        var options = {
            timeout: 5000
        };

        function showPosition(position) {
            var city = position.city; //城市
            var addr = position.addr; //详细地址
            var lat = position.lat; //
            var lng = position.lng; //经纬度
        }

        function showErr() {
            Toast.init();
            Toast.show('定位失败', 'success', null);
            setTimeout(function() {
                Toast.hide();
            }, 20000);
        };
        $(function() { //定位
            geolocation.getLocation(showPosition, showErr, options);
        })
    </script>
    <style>
        .btn {
            margin-top: 0.64rem
        }
    </style>
</body>


</html>