388 lines
8.9 KiB
Vue
388 lines
8.9 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: 605px;
|
||
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: 1000px;
|
||
height: 150px;
|
||
margin: 0 auto;
|
||
/* border: 2px solid red; */
|
||
}
|
||
.ke-fu .box-top h4 {
|
||
/* position: absolute;
|
||
top: 220px;
|
||
left: 300px; */
|
||
width: 500px;
|
||
font-size: 30px;
|
||
color: #74491a;
|
||
margin-bottom: 10px;
|
||
}
|
||
.ke-fu .box-top p {
|
||
/* position: absolute;
|
||
top: 270px;
|
||
left: 300px; */
|
||
width: 500px;
|
||
font-size: 16px;
|
||
letter-spacing: 5px;
|
||
color: #9a7148;
|
||
}
|
||
.ke-fu .box-bottom {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 400px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.ke-fu .box-bottom .box {
|
||
position: absolute;
|
||
/* display: flex;
|
||
justify-content:center; */
|
||
top: -200px;
|
||
/* left: 18%; */
|
||
display: flex;
|
||
width: 1000px;
|
||
height: 550px;
|
||
/* 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: 680px;
|
||
margin-right: 10px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
margin: 25px;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub h4 {
|
||
font-size: 18px;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search {
|
||
display: flex;
|
||
justify-content: end;
|
||
/* width: 350px; */
|
||
height: 50px;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #txtInput {
|
||
display: inline-block;
|
||
margin: auto 0;
|
||
padding-left: 14px;
|
||
height: 34px;
|
||
width: 280px;
|
||
font-size: 13px;
|
||
color: #333;
|
||
border: 1px solid #ededed;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #txtInput:focus {
|
||
border: 1px solid #febe54;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #search {
|
||
display: inline-block;
|
||
margin: auto 0;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
width: 60px;
|
||
font-size: 13px;
|
||
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: 140px;
|
||
margin: 25px;
|
||
margin-top: 0;
|
||
margin-bottom: 40px;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul li {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 280px;
|
||
height: 120px;
|
||
margin: 10px auto;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul li .headline {
|
||
display: flex;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
margin-bottom: 5px;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul li .headline i {
|
||
display: block;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin: auto 10px;
|
||
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: 16px;
|
||
font-weight: 700;
|
||
}
|
||
.ke-fu .box-bottom .box .left-box ul li p {
|
||
height: 30px;
|
||
margin: 5px 0 0 0;
|
||
font-size: 14px;
|
||
}
|
||
.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: 78px;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
text-align: center;
|
||
margin-right: 10px;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
|
||
|
||
.ke-fu .box-bottom .box .right-box {
|
||
width: 310px;
|
||
/* margin-right: 2%; */
|
||
background-color: #fff;
|
||
border-top-left-radius: 10px;
|
||
border-top-right-radius:10px;
|
||
}
|
||
.ke-fu .box-bottom .box .right-box h5 {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
background-color: #febe54;
|
||
border-radius: 10px;
|
||
color: #FFF;
|
||
}
|
||
.ke-fu .box-bottom .box .right-box ul {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 15px 5px 0 10px;
|
||
}
|
||
.ke-fu .box-bottom .box .right-box ul li{
|
||
display: flex;
|
||
align-content: center;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
margin-bottom: 10px;
|
||
/* 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: 80px;
|
||
/* padding: 2px 5px; */
|
||
border-radius: 12px;
|
||
background-color: #febe54;
|
||
font-size: 13px;
|
||
}
|
||
.ke-fu .box-bottom .box .right-box ul li i {
|
||
margin: auto 0;
|
||
width: 100%;
|
||
padding: 0 25px;
|
||
border-top-left-radius: 10px;
|
||
border-bottom-left-radius: 10px;
|
||
background-color: #ebebeb;
|
||
color: #8f673d;
|
||
}
|
||
.ke-fu .box-bottom .box .right-box .rengong-kefu {
|
||
position: absolute;
|
||
right: 20px;
|
||
bottom: 0;
|
||
width: 220px;
|
||
height: 280px;
|
||
/* border: 1px solid red; */
|
||
}
|
||
</style> |