|
|
<!DOCTYPE html>
|
|
|
<html lang="zh">
|
|
|
{include file="public/head"}
|
|
|
<style>
|
|
|
li{
|
|
|
list-style-type: none;
|
|
|
}
|
|
|
.content{
|
|
|
width: 100%;
|
|
|
font-size: 0;
|
|
|
background: rgba(249,249,249,1);
|
|
|
}
|
|
|
.content .titleImgContent{
|
|
|
width: 100%;
|
|
|
height: 146px;
|
|
|
}
|
|
|
.content .titleImgContent img{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
/*主要内容区域样式*/
|
|
|
.content .contentBox{
|
|
|
width: 100%;
|
|
|
font-size: 18px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
line-height: 25px;
|
|
|
color: rgba(91,94,99,1);
|
|
|
background: rgba(249,249,249,1);
|
|
|
margin-bottom: 193px;
|
|
|
}
|
|
|
.content .contentBox .workerShowBox{
|
|
|
width: 100%;
|
|
|
height: 306px;
|
|
|
margin-bottom: 12px;
|
|
|
background: rgba(255,255,255,1);
|
|
|
}
|
|
|
.content .contentBox .workerShowBox .workerShowMain{
|
|
|
width: 1200px;
|
|
|
height: 306px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.content .contentBox .workerShowBox .workerShowMain .workerShowList{
|
|
|
position: relative;
|
|
|
height: 234px;
|
|
|
}
|
|
|
.content .contentBox .workerShowBox .workerShowMain .workerShowList .swiper-container{
|
|
|
width: 1100px;
|
|
|
height: 100%;
|
|
|
}
|
|
|
.content .contentBox .workerShowBox .workerShowMain .workerShowList .swiper-container .swiper-wrapper .swiper-slide{
|
|
|
padding: 0 5px;
|
|
|
}
|
|
|
.content .contentBox .workerShowBox .workerShowMain .workerShowList .swiper-container .swiper-wrapper .swiper-slide p{
|
|
|
width: 100%;
|
|
|
height: 20px;
|
|
|
line-height: 20px;
|
|
|
text-align: center;
|
|
|
margin-top: 10px;
|
|
|
font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: rgba(6,18,30,1);
|
|
|
}
|
|
|
.swiper-scrollbar{
|
|
|
height: 0!important;
|
|
|
}
|
|
|
.swiper-button-next, .swiper-button-prev{
|
|
|
width: 26px;
|
|
|
height: 26px;
|
|
|
background-size: 26px;
|
|
|
-webkit-background-size: 26px;
|
|
|
}
|
|
|
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
|
|
|
background-image: url("images/right_icon.png");
|
|
|
}
|
|
|
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
|
|
|
background-image: url("images/left_icon.png");
|
|
|
}
|
|
|
|
|
|
/*title样式*/
|
|
|
.titleBox{
|
|
|
width: 1200px;
|
|
|
height: 62px;
|
|
|
line-height: 62px;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.titleBox span:first-child{
|
|
|
display: inline-block;
|
|
|
float: left;
|
|
|
width: 6px;
|
|
|
height: 20px;
|
|
|
margin-top: 21px;
|
|
|
background: rgba(0,159,142,1);
|
|
|
border-radius: 2px;
|
|
|
}
|
|
|
.titleBox span:last-child{
|
|
|
height: 22px;
|
|
|
line-height: 22px;
|
|
|
float: left;
|
|
|
margin-top: 20px;
|
|
|
padding-left: 12px;
|
|
|
font-size: 16px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: rgba(0,159,142,1);
|
|
|
}
|
|
|
|
|
|
/*维修师傅详细介绍样式*/
|
|
|
.content .contentBox .personalShowBox{
|
|
|
width: 100%;
|
|
|
background: rgba(255,255,255,1);
|
|
|
}
|
|
|
.content .contentBox .personalShowBox .personalShowMain{
|
|
|
width: 1200px;
|
|
|
min-height: 100px;
|
|
|
margin: 0 auto;
|
|
|
padding-bottom: 50px;
|
|
|
}
|
|
|
|
|
|
/*在线客服按钮样式*/
|
|
|
.rightButtons{
|
|
|
position: fixed;
|
|
|
width: 64px;
|
|
|
top: 400px;
|
|
|
right: 0;
|
|
|
background: rgba(0,159,142,1);
|
|
|
}
|
|
|
.rightButtons span{
|
|
|
display: block;
|
|
|
width: 48px;
|
|
|
margin: 0 auto;
|
|
|
border-top: 1px solid rgba(255,255,255,1);
|
|
|
}
|
|
|
.rightButtons a{
|
|
|
display: block;
|
|
|
width: 64px;
|
|
|
height: 64px;
|
|
|
text-align: center;
|
|
|
font-size: 12px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight:500;
|
|
|
color: rgba(255,255,255,1);
|
|
|
}
|
|
|
.rightButtons a img{
|
|
|
display: block;
|
|
|
margin: 10px auto 8px auto;
|
|
|
}
|
|
|
|
|
|
/*我要维修弹窗样式*/
|
|
|
.modal-dialog{
|
|
|
width: 423px;
|
|
|
height: 709px;
|
|
|
}
|
|
|
.modal-header{
|
|
|
height: 80px;
|
|
|
border: 0;
|
|
|
}
|
|
|
.modal-body{
|
|
|
padding: 10px 24px 20px 24px;
|
|
|
max-height: none;
|
|
|
}
|
|
|
.modal-title{
|
|
|
height: 50px;
|
|
|
line-height: 50px;
|
|
|
text-align: center;
|
|
|
font-size: 20px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: rgba(6,18,30,1);
|
|
|
}
|
|
|
form{
|
|
|
font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color:rgba(61,68,77,1);
|
|
|
}
|
|
|
form .form-group{
|
|
|
width: 100%;
|
|
|
height: 54px;
|
|
|
margin: 0 0 12px 0;
|
|
|
}
|
|
|
form .desBox{
|
|
|
height: 124px;
|
|
|
}
|
|
|
form .form-group .form-control{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
form .form-group:nth-child(3),form .form-group:nth-child(5){
|
|
|
position: relative;
|
|
|
}
|
|
|
form .form-group:nth-child(3) span{
|
|
|
display: inline-block;
|
|
|
position: absolute;
|
|
|
top: 15px;
|
|
|
right: 20px;
|
|
|
font-size: 16px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: rgba(140,145,152,1);
|
|
|
}
|
|
|
form .form-group:nth-child(5) span{
|
|
|
display: inline-block;
|
|
|
position: absolute;
|
|
|
top: 35px;
|
|
|
left: 12px;
|
|
|
font-size: 16px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
line-height: 22px;
|
|
|
color: rgba(140,145,152,1);
|
|
|
}
|
|
|
form p{
|
|
|
height: 22px;
|
|
|
padding-left: 9px;
|
|
|
font-size: 16px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
line-height: 22px;
|
|
|
color: rgba(6,18,30,1);
|
|
|
}
|
|
|
form button{
|
|
|
width: 100%;
|
|
|
height: 51px;
|
|
|
border: 0!important;
|
|
|
background: rgba(0,159,142,1)!important;
|
|
|
border-radius: 2px!important;
|
|
|
font-size: 18px!important;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400!important;
|
|
|
color: rgba(255,255,255,1)!important;
|
|
|
}
|
|
|
form .imgBox{
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
/*placeholser样式*/
|
|
|
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
|
font-size: 16px!important;
|
|
|
font-family: PingFang SC!important;
|
|
|
font-weight: 500!important;
|
|
|
color: rgba(6,18,30,1)!important;
|
|
|
}
|
|
|
::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
|
font-size: 16px!important;
|
|
|
font-family: PingFang SC!important;
|
|
|
font-weight: 500!important;
|
|
|
color: rgba(6,18,30,1)!important;
|
|
|
}
|
|
|
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
|
|
|
font-size: 16px!important;
|
|
|
font-family: PingFang SC!important;
|
|
|
font-weight: 500!important;
|
|
|
color: rgba(6,18,30,1)!important;
|
|
|
}
|
|
|
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
|
|
|
font-size: 16px!important;
|
|
|
font-family: PingFang SC!important;
|
|
|
font-weight: 500!important;
|
|
|
color: rgba(6,18,30,1)!important;
|
|
|
}
|
|
|
/*上传图片重置*/
|
|
|
.imgFileUploade{
|
|
|
padding: 0 0 16px 0;
|
|
|
}
|
|
|
</style>
|
|
|
<body>
|
|
|
{include file="public/header"}
|
|
|
<!--主要内容-->
|
|
|
<div class="content">
|
|
|
{include file="public/nav"}
|
|
|
<!--标题图片-->
|
|
|
<div class="titleImgContent">
|
|
|
<img src="__CDN__/assets/store/images/repairImg.png" alt="img">
|
|
|
</div>
|
|
|
<!--主要内容-->
|
|
|
<div class="contentBox">
|
|
|
<!--维修师傅展示-->
|
|
|
<div class="workerShowBox">
|
|
|
<div class="workerShowMain">
|
|
|
<div class="titleBox">
|
|
|
<span></span>
|
|
|
<span>维修师傅简介</span>
|
|
|
</div>
|
|
|
<div class="workerShowList">
|
|
|
<div class="swiper-container">
|
|
|
<div class="swiper-wrapper">
|
|
|
{volist name="maintainer" id="vo"}
|
|
|
<div class="swiper-slide">
|
|
|
<img src="{$vo.thumbnail}" alt="img">
|
|
|
<p>{$vo.name}</p>
|
|
|
</div>
|
|
|
{/volist}
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 如果需要导航按钮 -->
|
|
|
<div class="swiper-button-prev"></div>
|
|
|
<div class="swiper-button-next"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--维修师傅个人介绍-->
|
|
|
<div class="personalShowBox">
|
|
|
<div class="personalShowMain">
|
|
|
<div class="titleBox">
|
|
|
<span></span>
|
|
|
<span>维修服务</span>
|
|
|
</div>
|
|
|
<div id="personalShowText">
|
|
|
{$maintain.content}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--右侧功能按钮-->
|
|
|
<div class="rightButtons">
|
|
|
<a href="tencent://message/?uin={$site.service_qq}&Site=baidu.com&Menu=yes">
|
|
|
<img src="__CDN__/assets/store/images/onlineService.png" alt="onlineService">
|
|
|
在线客服
|
|
|
</a>
|
|
|
<span></span>
|
|
|
<a href="javascript:void(0);" onclick="showModel()">
|
|
|
<img src="__CDN__/assets/store/images/wrench_icon.png" alt="onlineService">
|
|
|
我要维修
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
<!--我要维修模态窗-->
|
|
|
<div class="modal fade" id="repairInfoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
|
|
<img src="__CDN__/assets/store/images/close_icon.png" alt="close">
|
|
|
</button>
|
|
|
<h4 class="modal-title" id="myModalLabel">
|
|
|
我要维修
|
|
|
</h4>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<form>
|
|
|
<div class="form-group">
|
|
|
<input type="text" class="form-control" id="userName" placeholder="姓名">
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<input type="text" class="form-control" id="phoneNum" placeholder="手机号">
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<select id="address" class="form-control" placeholder="地址">
|
|
|
<option>1</option>
|
|
|
<option>2</option>
|
|
|
<option>3</option>
|
|
|
<option>4</option>
|
|
|
<option>5</option>
|
|
|
</select>
|
|
|
<span>选择省/市/区</span>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<input type="text" class="form-control" id="addressDetail" placeholder="详细地址">
|
|
|
</div>
|
|
|
<div class="form-group desBox">
|
|
|
<textarea class="form-control" id="demandDes" placeholder="需求描述" onfocus="textareaFocus()" onblur="textareaBlur()"></textarea>
|
|
|
<span id="textareaTips" onclick="textareaTipsClick()">告诉我们如何为你提供帮助</span>
|
|
|
</div>
|
|
|
<p>上传图片</p>
|
|
|
<div class="uploadBox imgBox" style="width: 100%;height: 100px">
|
|
|
<!--<img src="images/repairModalImg.png" alt="img">-->
|
|
|
</div>
|
|
|
<button type="button" class="btn btn-submit" onclick="sendRepairInfo()">发送</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{include file="public/footer"}
|
|
|
<script>
|
|
|
$(function () {
|
|
|
getPersonalIntroduction();
|
|
|
initSwiper();
|
|
|
initUploadImg();
|
|
|
});
|
|
|
|
|
|
//上传图片
|
|
|
function initUploadImg() {
|
|
|
var initUploadImg = new ImgUploadeFiles('.imgBox',function(e){
|
|
|
this.init({
|
|
|
MAX : 3, //限制个数
|
|
|
MH : 5800, //像素限制高度
|
|
|
MW : 5900, //像素限制宽度
|
|
|
callback : function(arr){
|
|
|
console.log(arr)
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
//初始化swiper
|
|
|
function initSwiper() {
|
|
|
var mySwiper = new Swiper ('.swiper-container', {
|
|
|
loop: true,
|
|
|
slidesPerView: 6,
|
|
|
// 如果需要分页器
|
|
|
// pagination: '.swiper-pagination',
|
|
|
// 如果需要前进后退按钮
|
|
|
nextButton: '.swiper-button-next',
|
|
|
prevButton: '.swiper-button-prev',
|
|
|
// 如果需要滚动条
|
|
|
// scrollbar: '.swiper-scrollbar',
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//我要维修
|
|
|
function showModel() {
|
|
|
$('#repairInfoModal').modal();
|
|
|
}
|
|
|
|
|
|
//发送维修信息
|
|
|
function sendRepairInfo() {
|
|
|
|
|
|
}
|
|
|
|
|
|
//文本域获得焦点
|
|
|
function textareaFocus() {
|
|
|
$('#textareaTips').hide();
|
|
|
}
|
|
|
|
|
|
//文本域失去焦点
|
|
|
function textareaBlur() {
|
|
|
if($('#demandDes').val() == ''){
|
|
|
$('#textareaTips').show();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//文本域提示点击
|
|
|
function textareaTipsClick() {
|
|
|
$('#demandDes').click();
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
|
|
\ No newline at end of file |
...
|
...
|
|