429 lines
13 KiB
HTML
429 lines
13 KiB
HTML
<!DOCTYPE html
|
|
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=0.28,user-scalable=no" />
|
|
<title>{$eyou.field.seo_title}</title>
|
|
<meta name="description" content="{$eyou.field.seo_description}" />
|
|
<meta name="keywords" content="{$eyou.field.seo_keywords}" />
|
|
<link href="{eyou:global name='web_ico' /}" rel="shortcut icon" type="image/x-icon" />
|
|
{eyou:static file="skin/css/base.css" /}
|
|
{eyou:static file="skin/css/style.css" /}
|
|
{eyou:static file="skin/js/jquery.tools.min.js" /}
|
|
{eyou:static file="skin/js/jquery.kinMaxShow-1.0.min.js" /}
|
|
|
|
{eyou:static file="/public/static/common/js/jquery.min.js"/}
|
|
{eyou:static file="/public/plugins/layer-v3.1.0/layer.js"/}
|
|
{eyou:static file="users/skin/js/global.js" /}
|
|
</head>
|
|
<style>
|
|
/* 美化后的样式 */
|
|
.container-wrapper {
|
|
max-width: 600px;
|
|
margin: 60px auto 0;
|
|
}
|
|
|
|
.search-container {
|
|
padding: 40px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.header_title {
|
|
margin-bottom: 30px;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
position: relative;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.header_title:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60px;
|
|
height: 3px;
|
|
background: #bd2a15;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 25px;
|
|
text-align: left;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #555;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 14px 15px;
|
|
font-size: 16px;
|
|
color: #333;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
transition: all 0.3s;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #bd2a15;
|
|
box-shadow: 0 0 0 3px rgba(189, 42, 21, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
.search-btn {
|
|
width: 100%;
|
|
padding: 14px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background: #bd2a15;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.search-btn:hover {
|
|
background: #a52513;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(189, 42, 21, 0.3);
|
|
}
|
|
|
|
.result-container {
|
|
padding: 30px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
|
display: none;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.result-title {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 25px;
|
|
text-align: center;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.result-item {
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.result-item:last-child {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.result-label {
|
|
width: 120px;
|
|
font-weight: 600;
|
|
color: #555;
|
|
}
|
|
|
|
.result-value {
|
|
flex: 1;
|
|
color: #333;
|
|
}
|
|
|
|
.qrcode-container {
|
|
max-width: 800px;
|
|
margin: 0 auto 40px;
|
|
padding: 30px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
|
|
.other-services {
|
|
margin-top: 30px;
|
|
text-align: left;
|
|
background: #f9f9f9;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.other-services h4 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.services-list {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
max-height: 960px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* 自定义滚动条样式 */
|
|
.services-list::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.services-list::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.services-list::-webkit-scrollbar-thumb {
|
|
background: #bd2a15;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.services-list::-webkit-scrollbar-thumb:hover {
|
|
background: #a52513;
|
|
}
|
|
|
|
.service-item {
|
|
padding: 12px 15px;
|
|
border-bottom: 1px solid #eee;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.service-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.service-name {
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.service-tag {
|
|
font-size: 14px;
|
|
padding: 4px 10px;
|
|
border-radius: 12px;
|
|
background: #bd2a15;
|
|
color: white;
|
|
}
|
|
|
|
.service-tag.match {
|
|
background: #28a745;
|
|
}
|
|
|
|
.qrcode-img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
margin-bottom: 20px;
|
|
border: 1px solid #eee;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.close-btn {
|
|
display: inline-block;
|
|
padding: 10px 25px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #bd2a15;
|
|
background: #fff;
|
|
border: 2px solid #bd2a15;
|
|
border-radius: 30px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
background: #bd2a15;
|
|
color: #fff;
|
|
}
|
|
|
|
.content-wrap {
|
|
background: none;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.content-inner {
|
|
background: url(../template/pc/skin/images/map.png) no-repeat center 20px;
|
|
min-height: 960px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container-wrapper {
|
|
margin: 30px 15px;
|
|
}
|
|
|
|
.search-container,
|
|
.result-container,
|
|
.qrcode-container {
|
|
padding: 25px 20px;
|
|
}
|
|
|
|
.form-control {
|
|
padding: 12px 12px;
|
|
}
|
|
|
|
.search-btn {
|
|
padding: 12px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<!--头部--star-->
|
|
{eyou:include file="header.htm" /}
|
|
<!--头部---end-->
|
|
<!---layui--->
|
|
{eyou:include file="layui.htm" /}
|
|
<!---layui--->
|
|
<div class="content-wrap">
|
|
<div class="content-inner">
|
|
<div class="content">
|
|
<div class="container-wrapper">
|
|
<div class="search-container">
|
|
<h2 class="header_title">服务商查询</h2>
|
|
<form class="layui-form" name='theForm' id="theForm" method="post">
|
|
<div class="form-group">
|
|
<label class="form-label">关键词：</label>
|
|
<input type="text" name="realname" class="form-control" placeholder="请输入服务商名称关键词">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">查询密码：</label>
|
|
<input type="password" name="password" class="form-control" placeholder="请输入查询密码">
|
|
</div>
|
|
<input type="button" name="submit" class="search-btn" value="搜索" />
|
|
</form>
|
|
</div>
|
|
|
|
<div class="result-container" id="show">
|
|
<h3 class="result-title">查询结果</h3>
|
|
<div class="result-item">
|
|
<div class="result-label">关键词：</div>
|
|
<div class="result-value" id="name"></div>
|
|
</div>
|
|
<div class="result-item">
|
|
<div class="result-label">申请状态：</div>
|
|
<div class="result-value">可申请</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="qrcode-container" id="showqrcode">
|
|
<h3 class="result-title">二维码</h3>
|
|
<img src="" id="imgs" class="qrcode-img">
|
|
|
|
<div class="other-services" id="otherServices">
|
|
<h4>相关服务商列表</h4>
|
|
<ul class="services-list" id="servicesList"></ul>
|
|
</div>
|
|
|
|
<button type="button" class="close-btn" id="close" style="margin-top: 20px;">关闭</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$('#close').click(function () {
|
|
$('#showqrcode').hide();
|
|
$('#theForm').show();
|
|
$('.search-container').show();
|
|
})
|
|
|
|
$(function () {
|
|
$('input[name=submit]').on('click', function () {
|
|
var realname = $('input[name=realname]');
|
|
var password = $('input[name=password]');
|
|
|
|
if (realname.val() == '') {
|
|
layer.msg('请输入关键词！', { time: 1500, icon: 5 });
|
|
realname.focus();
|
|
return false;
|
|
}
|
|
|
|
if (password.val() == '') {
|
|
layer.msg('密码不能为空！', { time: 1500, icon: 5 });
|
|
password.focus();
|
|
return false;
|
|
}
|
|
|
|
var url = "{eyou:url link='api/Ajax/projectsearch' /}";
|
|
// layer_loading('正在处理');
|
|
var data = {
|
|
realname: realname.val(),
|
|
password: password.val(),
|
|
type: 1
|
|
}
|
|
|
|
// 发送Ajax请求
|
|
$.ajax({
|
|
// async:false,
|
|
url: url,
|
|
data: data,
|
|
type: 'post',
|
|
dataType: 'json',
|
|
success: function (res) {
|
|
if (res.code < 0) {
|
|
layer.msg(res.msg, { time: 1500, icon: 5 });
|
|
} else if (0 == res.code) {
|
|
layer.msg('服务商不存在', { time: 1500, icon: 5 });
|
|
} else {
|
|
$('#imgs').attr('src', res.img)
|
|
|
|
// 显示其他服务商列表
|
|
if (res.service_names && res.service_names.length > 0) {
|
|
var servicesHtml = '';
|
|
for (var i = 0; i < res.service_names.length; i++) {
|
|
servicesHtml += '<li class="service-item">';
|
|
servicesHtml += '<span class="service-name">' + res.service_names[i] + '</span>';
|
|
servicesHtml += '<span class="service-tag ' + (i === 0 ? 'match' : '') + '">' + (i === 0 ? '匹配项' : '相关项') + '</span>';
|
|
servicesHtml += '</li>';
|
|
}
|
|
$('#servicesList').html(servicesHtml);
|
|
$('#otherServices').show();
|
|
} else {
|
|
$('#servicesList').html('<li class="service-item" style="justify-content: center; color: #999;">暂无其他相关服务商</li>');
|
|
$('#otherServices').show();
|
|
}
|
|
|
|
$('#showqrcode').show();
|
|
$('#theForm').hide();
|
|
$('.search-container').hide();
|
|
}
|
|
},
|
|
error: function (e) {
|
|
layer.closeAll();
|
|
showErrorAlert(e.responseText);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!--底部-star-->
|
|
{eyou:include file="footer.htm" /}
|
|
<!--底部--end-->
|
|
|
|
</body>
|
|
|
|
</html> |