fe / yohobuywap-node · Commits

Go to a project

Authored by lijing
Commit 9f3c5c453ae600928725a693d980c97100cf99eb 1 parent ddacbe7f

客服列表详情页

Inline Side-by-side
Showing 11 changed files with 519 additions and 328 deletions
... ... @@ -43,4 +43,21 @@ exports.qaSearch = (req, res, next) => {
res.render('chat/qa-search', responseData);
};
exports.qaDetail = (req, res, next) => {
let headerData = headerModel.setNav({
navTitle: '问题详情'
});
let responseData = {
pageHeader: headerData,
module: 'service',
page: 'chat-qa',
title: 'Yoho!Buy有货 | 潮流购物逛不停',
width750: true
};
res.render('chat/qa-detail', responseData);
};
... ...
... ... @@ -18,5 +18,6 @@ router.get('/im/', chat.page);
router.get('/chatQaList', chatQa.qaList); // 问题搜索列表页
router.get('/qaSearch', chatQa.qaSearch); // 问题搜索页
router.get('/qaDetail', chatQa.qaDetail); // 问题详情页
module.exports = router;
... ...
... ... @@ -132,31 +132,5 @@
</div>
</div>
<div class="list-title">没有解决问题</div>
<div class="list-group">
<div class="list clearfix">
<i class="gm-ico icon"></i>
<div>
<p class="title">在线客服</p>
<p class="tip">服务时间9:00－22:30</p>
</div>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="list clearfix">
<i class="advice-ico icon"></i>
<div>
<p class="title">意见反馈</p>
<p class="tip">界面问题、功能问题</p>
</div>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="list clearfix">
<i class="tel-ico icon"></i>
<div>
<p class="title">热线客服</p>
<p class="tip">服务时间9:00－22:30</p>
</div>
<span>400-886-9646</span>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
</div>
{{> chat/chat-gm}}
</div>
\ No newline at end of file
... ...
<div class="qa-detail-c">
<div class="qa-c clearfix">
<div class="q-c clearfix">
<div class="pic q"></div>
<div class="text">购买商品时应该如何选取尺码？</div>
</div>
<div class="a-c clearfix">
<div class="pic a"></div>
<div class="text">商品来自不同国家不同品牌，尺码具有一定的差异，在商品详情页有相关的尺码信息，请在购买的时候仔细查看尺码信息，选择合适的尺码购买。注：因尺码信息来自海外官网，我们无法有实物测量，可能会有少量误差，购买时请注意
<img src="http://img10.static.yhbimg.com/yhb-img01/2016/11/29/10/0153a52b666c7d85a0e240ab533e86914b.jpg" />
</div>
</div>
</div>
{{> chat/chat-gm}}
</div>
\ No newline at end of file
... ...
... ... @@ -28,5 +28,10 @@
<i class="arr-ico iconfont">&#xe604;</i>
</div>
</div>
<div class="no-result">
<div class="pic"></div>
<p>抱歉，没有找到与“哈哈”相关的问题，</p>
<p>您可以换个词再试试</p>
</div>
<div class="fix-tip">没有相关问题，请联系<a>在线客服</a></div>
</div>
\ No newline at end of file
... ...
<div class="list-group">
<div class="list clearfix">
<i class="gm-ico icon"></i>
<div>
<p class="title">在线客服</p>
<p class="tip">服务时间9:00－22:30</p>
</div>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="list clearfix">
<i class="advice-ico icon"></i>
<div>
<p class="title">意见反馈</p>
<p class="tip">界面问题、功能问题</p>
</div>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="list clearfix">
<i class="tel-ico icon"></i>
<div>
<p class="title">热线客服</p>
<p class="tip">服务时间9:00－22:30</p>
</div>
<span>
<a href="tel:400-886-9646">400-886-9646</a>
</span>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -27,7 +27,10 @@ $('.cancel-btn').click(
$('.get-qa').keyup(
function() {
var searchText = $(this).val();
$('.list-group').html('<div class="common-item">' +
if (searchText === '') {
$('.list-group').empty();
} else {
$('.list-group').html('<div class="common-item">' +
'<p>111<span>' + searchText + '</span></p>' +
'<i class="arr-ico iconfont">&#xe604;</i>' +
'</div>' +
... ... @@ -47,5 +50,6 @@ $('.get-qa').keyup(
'<p>555<span>' + searchText + '</span></p>' +
'<i class="arr-ico iconfont">&#xe604;</i>' +
'</div>');
}
}
);
... ...
.chat-qa-c {
width: 100%;
position: relative;
.search-c {
height: 92px;
padding-top: 17px;
border-bottom: solid 1px #e0e0e0;
a {
display: block;
width: 718px;
height: 57px;
background-color: #eaebed;
margin: 0 auto;
border-radius: 10px;
padding: 10px 30px;
.search-icon {
color: #8e8e93;
font-size: 30px;
}
input {
height: 37px;
line-height: 37px;
border: 0px;
color: #8e8e93;
font-size: 28px;
background: none;
width: 600px;
padding-left: 20px;
}
}
}
.list-title {
font-size: 28px;
color: #b0b0b0;
width: 100%;
height: 70px;
line-height: 70px;
padding: 0 30px;
background-color: #f0f0f0;
}
.list-group {
border-top: solid 1px #e0e0e0;
border-bottom: solid 1px #e0e0e0;
.highlight {
background-color: #eee;
}
.list {
min-height: 120px;
position: relative;
.icon {
width: 100px;
height: 120px;
float: left;
background-repeat: no-repeat;
background-size: auto 50%;
background-position: center center;
}
.order-ico {
background-image: resolve("service/chat/order-ico.png");
}
.car-ico {
background-image: resolve("service/chat/car-ico.png");
}
.pay-ico {
background-image: resolve("service/chat/pay-ico.png");
}
.reback-ico {
background-image: resolve("service/chat/reback-ico.png");
}
.acc-ico {
background-image: resolve("service/chat/acc-ico.png");
}
.good-ico {
background-image: resolve("service/chat/good-ico.png");
}
.gm-ico {
background-image: resolve("service/chat/gm-ico.png");
}
.advice-ico {
background-image: resolve("service/chat/advice-ico.png");
}
.tel-ico {
background-image: resolve("service/chat/tel-ico.png");
}
.arr-ico {
line-height: 120px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
div {
min-height: 120px;
padding: 25px 80px 20px 0;
width: 650px;
float: left;
border-bottom: solid 1px #e0e0e0;
.title {
line-height: 40px;
font-size: 32px;
}
.tip {
line-height: 35px;
font-size: 24px;
color: #b0b0b0;
}
}
span {
color: #444;
font-size: 28px;
position: absolute;
top: 0;
right: 70px;
line-height: 120px;
}
&:last-child div {
width: 100%;
position: relative;
.search-c {
height: 92px;
padding-top: 17px;
border-bottom: solid 1px #e0e0e0;
a {
display: block;
width: 718px;
height: 57px;
background-color: #eaebed;
margin: 0 auto;
border-radius: 10px;
padding: 10px 30px;
.search-icon {
color: #8e8e93;
font-size: 30px;
}
input {
height: 37px;
line-height: 37px;
border: 0;
color: #8e8e93;
font-size: 28px;
background: none;
width: 600px;
padding-left: 20px;
}
}
}
.list-title {
font-size: 28px;
color: #b0b0b0;
width: 100%;
height: 70px;
line-height: 70px;
padding: 0 30px;
background-color: #f0f0f0;
}
.list-group {
border-top: solid 1px #e0e0e0;
border-bottom: solid 1px #e0e0e0;
.highlight {
background-color: #eee;
}
.list {
min-height: 120px;
position: relative;
.icon {
width: 100px;
height: 120px;
float: left;
background-repeat: no-repeat;
background-size: auto 50%;
background-position: center center;
}
.order-ico {
background-image: resolve("service/chat/order-ico.png");
}
.car-ico {
background-image: resolve("service/chat/car-ico.png");
}
.pay-ico {
background-image: resolve("service/chat/pay-ico.png");
}
.reback-ico {
background-image: resolve("service/chat/reback-ico.png");
}
.acc-ico {
background-image: resolve("service/chat/acc-ico.png");
}
.good-ico {
background-image: resolve("service/chat/good-ico.png");
}
.gm-ico {
background-image: resolve("service/chat/gm-ico.png");
}
.advice-ico {
background-image: resolve("service/chat/advice-ico.png");
}
.tel-ico {
background-image: resolve("service/chat/tel-ico.png");
}
.arr-ico {
line-height: 120px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
div {
min-height: 120px;
padding: 25px 80px 20px 0;
width: 650px;
float: left;
border-bottom: solid 1px #e0e0e0;
.title {
line-height: 40px;
font-size: 32px;
}
.tip {
line-height: 35px;
font-size: 24px;
color: #b0b0b0;
}
}
span {
color: #444;
font-size: 28px;
position: absolute;
top: 0;
right: 70px;
line-height: 120px;
}
&:last-child div {
border-bottom: 0;
}
}
.active div{
border-bottom: 0;
}
.down-item {
display: none;
margin-top: -1px;
border-bottom: solid 1px #e0e0e0;
div {
padding: 0 30px;
position: relative;
line-height: 90px;
border-top: solid 1px #e0e0e0;
background-color: #f0f0f0;
p {
font-size: 32px;
color: #444;
}
.arr-ico {
line-height: 90px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
}
}
.common-item {
position: relative;
line-height: 90px;
padding: 0 30px;
border-bottom: solid 1px #e6e6e6;
p {
font-size: 32px;
width: 650px;
}
.arr-ico {
line-height: 90px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
&:last-child {
}
.active div {
border-bottom: 0;
}
.down-item {
display: none;
margin-top: -1px;
border-bottom: solid 1px #e0e0e0;
div {
padding: 0 30px;
position: relative;
line-height: 90px;
border-top: solid 1px #e0e0e0;
background-color: #f0f0f0;
p {
font-size: 32px;
color: #444;
}
.arr-ico {
line-height: 90px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
}
}
.common-item {
position: relative;
line-height: 90px;
padding: 0 30px;
border-bottom: solid 1px #e6e6e6;
p {
font-size: 32px;
width: 650px;
}
.arr-ico {
line-height: 90px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
&:last-child {
border-bottom: 0;
}
}
}
}
}
}
.qa-search-c {
width: 100%;
position: relative;
.search-c {
height: 92px;
padding-top: 17px;
border-bottom: solid 1px #e0e0e0;
div {
display: block;
width: 600px;
height: 57px;
background-color: #eaebed;
border-radius: 10px;
padding: 10px 30px;
margin-left: 30px;
float: left;
.search-icon {
color: #8e8e93;
font-size: 30px;
}
input {
height: 37px;
line-height: 37px;
border: 0px;
color: #8e8e93;
font-size: 28px;
background: none;
width: 480px;
padding-left: 20px;
}
}
.cancel-btn {
float: left;
line-height: 57px;
color: #b0b0b0;
margin-left: 20px;
font-size: 32px;
}
}
.list-group {
border-bottom: solid 1px #e0e0e0;
.highlight {
background-color: #eee;
}
.common-item {
position: relative;
line-height: 90px;
padding: 0 30px;
border-bottom: solid 1px #e6e6e6;
p {
font-size: 32px;
width: 650px;
span {
color: #d0021b;
}
}
.arr-ico {
line-height: 90px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
&:last-child {
width: 100%;
position: relative;
.search-c {
height: 92px;
padding-top: 17px;
border-bottom: solid 1px #e0e0e0;
div {
display: block;
width: 600px;
height: 57px;
background-color: #eaebed;
border-radius: 10px;
padding: 10px 30px;
margin-left: 30px;
float: left;
.search-icon {
color: #8e8e93;
font-size: 30px;
}
input {
height: 37px;
line-height: 37px;
border: 0;
color: #8e8e93;
font-size: 28px;
background: none;
width: 480px;
padding-left: 20px;
}
}
.cancel-btn {
float: left;
line-height: 57px;
color: #b0b0b0;
margin-left: 20px;
font-size: 32px;
}
}
.list-group {
.highlight {
background-color: #eee;
}
.common-item {
position: relative;
line-height: 90px;
padding: 0 30px;
border-bottom: solid 1px #e6e6e6;
p {
font-size: 32px;
width: 650px;
span {
color: #d0021b;
}
}
.arr-ico {
line-height: 90px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
}
}
.fix-tip {
width: 100%;
height: 70px;
line-height: 70px;
background-color: #000;
color: #fff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 24px;
z-index: 9;
opacity: 0.8;
a {
background-color: #f00;
color: #fff;
padding: 3px 8px;
border-radius: 5px;
margin-left: 20px;
}
}
.no-result {
.pic {
width: 204px;
height: 204px;
display: block;
margin: 90px auto 30px;
background-image: resolve("service/chat/no-result.png");
background-size: 100%;
}
p {
line-height: 45px;
color: #b0b0b0;
font-size: 24px;
text-align: center;
}
}
}
.qa-detail-c {
background-color: #f0f0f0;
.qa-c {
background-color: #fff;
width: 100%;
margin-bottom: 30px;
border-bottom: solid 1px #e0e0e0;
font-size: 28px;
.pic {
width: 70px;
height: 70px;
margin-left: 5px;
float: left;
background-position: center center;
background-size: 50% auto;
background-repeat: no-repeat;
}
.q-c {
.q {
background-image: resolve("service/chat/q.png");
}
.text {
float: left;
width: 675px;
border-bottom: solid 1px #e0e0e0;
padding: 20px 30px 20px 0;
line-height: 30px;
}
}
.a-c {
.a {
background-image: resolve("service/chat/a.png");
}
.text {
float: left;
width: 675px;
padding: 20px 30px 20px 0;
color: #b0b0b0;
img {
margin-top: 20px;
}
}
}
}
.list-group {
background-color: #fff;
border-top: solid 1px #e0e0e0;
border-bottom: solid 1px #e0e0e0;
.highlight {
background-color: #eee;
}
.list {
min-height: 120px;
position: relative;
.icon {
width: 100px;
height: 120px;
float: left;
background-repeat: no-repeat;
background-size: auto 50%;
background-position: center center;
}
.gm-ico {
background-image: resolve("service/chat/gm-ico.png");
}
.advice-ico {
background-image: resolve("service/chat/advice-ico.png");
}
.tel-ico {
background-image: resolve("service/chat/tel-ico.png");
}
.arr-ico {
line-height: 120px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
div {
min-height: 120px;
padding: 25px 80px 20px 0;
width: 650px;
float: left;
border-bottom: solid 1px #e0e0e0;
.title {
line-height: 40px;
font-size: 32px;
}
.tip {
line-height: 35px;
font-size: 24px;
color: #b0b0b0;
}
}
span {
color: #444;
font-size: 28px;
position: absolute;
top: 0;
right: 70px;
line-height: 120px;
}
&:last-child div {
border-bottom: 0;
}
}
}
.fix-tip {
width: 100%;
height: 70px;
line-height: 70px;
background-color: #000;
color: #fff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 24px;
z-index: 9;
opacity: 0.8;
a {
background-color: #f00;
color: #fff;
padding: 3px 8px;
border-radius: 5px;
margin-left: 20px;
}
}
}
\ No newline at end of file
}
}
}
... ...