388 lines
9.1 KiB
Vue
388 lines
9.1 KiB
Vue
<template>
|
||
<div class="ke-fu">
|
||
<div class="box-top">
|
||
<div class="title">
|
||
<h4>AI著作权·客服中心</h4>
|
||
<p>灵活搭建更高效的著作权办理平台</p>
|
||
</div>
|
||
</div>
|
||
<div class="box-bottom">
|
||
<div class="box">
|
||
<div class="left-box">
|
||
<div class="kefu-sub">
|
||
<h4>客服中心</h4>
|
||
<div class="kefu-search">
|
||
<!-- <input type="text" name="" id="txtInput" placeholder="请输入问题的关键字，如：排序题" v-model="searchQuery"> -->
|
||
<input type="text" name="" id="txtInput" placeholder="请输入问题的关键字，如：排序题" v-model="searchQuery">
|
||
<input type="submit" name value="搜索" id="search" @click="search">
|
||
</div>
|
||
</div>
|
||
<ul>
|
||
<li>
|
||
<div class="headline">
|
||
<i>
|
||
</i>
|
||
<h5>在线客服</h5>
|
||
</div>
|
||
<p>企业服务<a href=""> 在线咨询</a></p>
|
||
<p>样本服务（付费搜集答辩）<a href=""> 在线咨询</a></p>
|
||
</li>
|
||
<li>
|
||
<div class="headline">
|
||
<i>
|
||
</i>
|
||
<h5>售前咨询</h5>
|
||
</div>
|
||
<p>企业服务：<em> 400-086-1633 </em></p>
|
||
</li>
|
||
</ul>
|
||
<ul>
|
||
<li>
|
||
<div class="headline">
|
||
<i>
|
||
</i>
|
||
<h5>申请协助</h5>
|
||
</div>
|
||
<p>
|
||
<span><a href="">申请协助</a></span>
|
||
回复后会有短信通知您
|
||
</p>
|
||
|
||
</li>
|
||
<li>
|
||
<div class="headline">
|
||
<i>
|
||
</i>
|
||
<h5>在线客服</h5>
|
||
</div>
|
||
<p>kefu#tenlion.com.cn</p>
|
||
<p>发送邮件时请将 # 替换为 @</p>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
<div class="right-box">
|
||
<h5>客服服务时间</h5>
|
||
<ul>
|
||
<li>
|
||
<em>上午</em>
|
||
<i>08:30-12:00</i>
|
||
</li>
|
||
<li>
|
||
<em>中午</em>
|
||
<i>12:00-14:00</i>
|
||
</li>
|
||
<li>
|
||
<em>下午</em>
|
||
<i>14:00-18:00</i>
|
||
</li>
|
||
<li>
|
||
<em>晚间</em>
|
||
<i>18:00-21:00</i>
|
||
</li>
|
||
</ul>
|
||
<div class="rengong-kefu">
|
||
<a href="#">
|
||
<img src="/assets/img/kefu-rengong.png" alt="">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import { ref } from 'vue';
|
||
// import { useRouter } from 'vue-router';
|
||
export default {
|
||
// setup() {
|
||
// const searchQuery = ref('')
|
||
// const router = useRouter()
|
||
|
||
// const search = () => {
|
||
// router.push({
|
||
// name: 'HelpCenter',
|
||
// query: { q: searchQuery.value}
|
||
// })
|
||
// }
|
||
// return {
|
||
// searchQuery,
|
||
// search
|
||
// }
|
||
// }
|
||
|
||
data() {
|
||
return {
|
||
searchQuery: ''
|
||
};
|
||
},
|
||
methods: {
|
||
search() {
|
||
if (this.searchQuery) {
|
||
this.$router.push({
|
||
name: 'HelpCenter',
|
||
query: { q: this.searchQuery }
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
vertical-align: middle;
|
||
border: 0px solid transparent !important ;
|
||
}
|
||
.ke-fu {
|
||
position: relative;
|
||
}
|
||
.ke-fu .box-top {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 7.5625rem;
|
||
background: url(/assets/img/kefu-bj.png) no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.ke-fu .box-top .title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
width: 12.5rem;
|
||
height: 1.875rem;
|
||
margin: 0 auto;
|
||
/* border: 2px solid red; */
|
||
}
|
||
.ke-fu .box-top h4 {
|
||
/* position: absolute;
|
||
top: 220px;
|
||
left: 300px; */
|
||
width: 6.25rem;
|
||
font-size: .375rem;
|
||
color: #74491a;
|
||
margin-bottom: .125rem;
|
||
}
|
||
.ke-fu .box-top p {
|
||
/* position: absolute;
|
||
top: 270px;
|
||
left: 300px; */
|
||
width: 6.25rem;
|
||
font-size: .2rem;
|
||
letter-spacing: .0625rem;
|
||
color: #9a7148;
|
||
}
|
||
.ke-fu .box-bottom {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 5rem;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.ke-fu .box-bottom .box {
|
||
position: absolute;
|
||
/* display: flex;
|
||
justify-content:center; */
|
||
top: -2.5rem;
|
||
/* left: 18%; */
|
||
display: flex;
|
||
width: 12.5rem;
|
||
height: 6.875rem;
|
||
/* border: 2px solid red; */
|
||
/* background-color: #FFF; */
|
||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||
}
|
||
.ke-fu .box-bottom .box .left-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 8.5rem;
|
||
margin-right: .125rem;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: .625rem;
|
||
line-height: .625rem;
|
||
margin: .3125rem;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub h4 {
|
||
font-size: .225rem;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search {
|
||
display: flex;
|
||
justify-content: end;
|
||
/* width: 350px; */
|
||
height: .625rem;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #txtInput {
|
||
display: inline-block;
|
||
margin: auto 0;
|
||
padding-left: .175rem;
|
||
height: .425rem;
|
||
width: 3.5rem;
|
||
font-size: .1625rem;
|
||
color: #333;
|
||
border: .0125rem solid #ededed;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #txtInput:focus {
|
||
border: .0125rem solid #febe54;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #search {
|
||
display: inline-block;
|
||
margin: auto 0;
|
||
height: .425rem;
|
||
line-height: .425rem;
|
||
width: .75rem;
|
||
font-size: .1625rem;
|
||
background-color: #fda633;
|
||
color: #FFF;
|
||
border: none;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #search:hover {
|
||
cursor: pointer;
|
||
opacity: 0.8;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul {
|
||
display: flex;
|
||
height: 1.75rem;
|
||
margin: .3125rem;
|
||
margin-top: 0;
|
||
margin-bottom: .5rem;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul li {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 3.5rem;
|
||
height: 1.5rem;
|
||
margin: .125rem auto;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul li .headline {
|
||
display: flex;
|
||
height: .375rem;
|
||
line-height: .375rem;
|
||
margin-bottom: .0625rem;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul li .headline i {
|
||
display: block;
|
||
width: .25rem;
|
||
height: .25rem;
|
||
margin: auto .125rem;
|
||
background: url(/assets/img/kefu-1.png) no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul li:nth-child(2) .headline i {
|
||
background: url(/assets/img/kefu-2.png) no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul:last-child li:nth-child(1) .headline i {
|
||
background: url(/assets/img/kefu-3.png) no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul:last-child li:nth-child(2) .headline i {
|
||
background: url(/assets/img/kefu-4.png) no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
|
||
|
||
.ke-fu .box-bottom .box .left-box ul li .headline h5 {
|
||
font-size: .2rem;
|
||
font-weight: 700;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul li p {
|
||
height: .375rem;
|
||
margin: .0625rem 0 0 0;
|
||
font-size: .175rem;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul li p a {
|
||
color: #0095ff;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul li p a:hover {
|
||
color: #0086e6;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul li p em {
|
||
color: #0095ff;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul:last-child li:first-child p span {
|
||
display: inline-block;
|
||
width: .975rem;
|
||
height: .35rem;
|
||
line-height: .35rem;
|
||
text-align: center;
|
||
margin-right: .125rem;
|
||
border: .0125rem solid #d9d9d9;
|
||
}
|
||
|
||
|
||
.ke-fu .box-bottom .box .right-box {
|
||
width: 3.875rem;
|
||
/* margin-right: 2%; */
|
||
background-color: #fff;
|
||
border-top-left-radius: .125rem;
|
||
border-top-right-radius:.125rem;
|
||
}
|
||
.ke-fu .box-bottom .box .right-box h5 {
|
||
height: .5rem;
|
||
line-height: .5rem;
|
||
text-align: center;
|
||
font-size: .175rem;
|
||
background-color: #febe54;
|
||
border-radius: .125rem;
|
||
color: #FFF;
|
||
}
|
||
.ke-fu .box-bottom .box .right-box ul {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: .1875rem .0625rem 0 .125rem;
|
||
}
|
||
.ke-fu .box-bottom .box .right-box ul li{
|
||
display: flex;
|
||
align-content: center;
|
||
height: .375rem;
|
||
line-height: .375rem;
|
||
margin-bottom: .125rem;
|
||
/* background-color: pink; */
|
||
/* border: 2px solid red; */
|
||
}
|
||
.ke-fu .box-bottom .box .right-box ul li em {
|
||
text-align: center;
|
||
margin: auto 0;
|
||
/* line-height: 30px; */
|
||
width: 1rem;
|
||
/* padding: 2px 5px; */
|
||
border-radius: .15rem;
|
||
background-color: #febe54;
|
||
font-size: .1625rem;
|
||
}
|
||
.ke-fu .box-bottom .box .right-box ul li i {
|
||
margin: auto 0;
|
||
width: 100%;
|
||
padding: 0 .3125rem;
|
||
border-top-left-radius: .125rem;
|
||
border-bottom-left-radius: .125rem;
|
||
background-color: #ebebeb;
|
||
color: #8f673d;
|
||
}
|
||
.ke-fu .box-bottom .box .right-box .rengong-kefu {
|
||
position: absolute;
|
||
right: .25rem;
|
||
bottom: 0;
|
||
width: 2.75rem;
|
||
height: 3.5rem;
|
||
/* border: 1px solid red; */
|
||
}
|
||
</style> |