在线求助 - 获取专业维修帮助 - 常规

<p>&lt;%@ page language='java' import='com.hdfix.action.CaptchaServlet' pageEncoding='UTF-8'%&gt;
&lt;%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core' %&gt;
&lt;%@ taglib prefix='fn' uri='http://java.sun.com/jsp/jstl/functions' %&gt;
&lt;%@ taglib uri='http://java.sun.com/jsp/jstl/fmt' prefix='fmt' %&gt;
&lt;%
String path = request.getContextPath();
String basePath = request.getScheme()+'://'+request.getServerName()+':'+request.getServerPort()+path+'/';
%&gt;</p>
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
	<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
	<meta name='description' content='维修互助'>
	<meta name='keywords' content='维修互助'>
	<meta charset='UTF-8'>
	<title>在线求助 - 获取专业维修帮助</title>
	<link href='http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css' rel='stylesheet'>
	<!--font-awesome 核心CSS文件-->
	<link href='//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'>
	<!-- 在bootstrap.min.js 之前引入 jquery -->
	<script src='http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js'></script>
	<!-- Bootstrap 核心js文件 -->
	<script src='http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js'></script>
	<style type='text/css'>
		.qr-code {
			width: 200px;
			height: 200px;
			margin: 20px;
		}
		.txt {
			text-align: center;
		}
	</style>
    <script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js'></script>
    <script src='https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js'></script>
    <script src='https://cdn.bootcss.com/vue-slider-component/3.0.0/vue-slider-component.umd.min.js'></script>
    <link rel='stylesheet' href='https://cdn.bootcss.com/vue-slider-component/3.0.0/vue-slider-component.css'>
</head>
<body>
<jsp:include page='header.jsp' flush='true'/>
<div class='container'>
	<div class='row'>
		<div class='col-md-6'>
			<form action='help!writesave' method='post'>
				<form>
					<div class='form-group'>
						<label for='title'>问题简述</label>
						<input type='text' class='form-control' id='title' name='title'>
					</div>
					<div class='form-group'>
						<label for='phone'>联系方式</label>
						<input type='phone' class='form-control' id='phone' name='phone'>
					</div>
					<div class='form-group'>
						<label for='message'>遇到的问题:</label>
						<textarea class='form-control' id='message'  name='info' rows='5'></textarea>
					</div>
                    <div id='captcha' style='width: 200px; height: 50px;'></div>
					<button type='submit' class='btn btn-primary' onclick='return checkForm()'>提交</button>
<pre><code>			&lt;/form&gt;
		&lt;/form&gt;
	&lt;/div&gt;

	&lt;%--右侧的三张图片--%&gt;
	&lt;div class='col-md-6'&gt;
		&lt;div class='row'&gt;
			&lt;div class='col-md-12'&gt;
				&lt;img src='common/pic/gzhcode.jpg' alt='QR Code' class='qr-code'&gt;
				&lt;a style='font-size: 20px'&gt;扫描左侧二维码关注我们&lt;/a&gt;
				&lt;p class=txt&gt;扫描二维码,关注我们。&lt;/p&gt;
			&lt;/div&gt;
			&lt;div class='col-md-6'&gt;
				&lt;img src='common/pic/code2.png' alt='Mini Program Code' class='qr-code'&gt;
				&lt;p class=txt&gt;简二维码生成器&lt;/p&gt;
			&lt;/div&gt;
			&lt;div class='col-md-6'&gt;
				&lt;img src='https://via.placeholder.com/200x200' alt='Mini Program Code' class='qr-code'&gt;
				&lt;p class=txt&gt;扫描小程序码，进入小程序。&lt;/p&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
<script>
    Vue.component('vue-slider', window['vue-slider-component']);
    new Vue({
        el: '#captcha',
        data: {
            sliderValue: 0,
            sliderOptions: {
                width: 200,
                height: 50,
                dotSize: 20,
                event: {
                    slide: function (event) {
                        // 获取滑动验证码的值
                        console.log(event);
                    }
                }
            }
        },
        methods: {
            checkForm() {
                var captcha = this.sliderValue;
                if (captcha == 0) {
                    alert('请滑动验证码！');
                    return false;
                }
                return true;
            }
        }
    });
</script>
<p>&lt;jsp:include page='footer.jsp' flush='true'/&gt;</p>
</body>
</html>