copyright-official-website/src/components/KeFu.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="">&emsp;在线咨询</a></p>
              <p>样本服务（付费搜集答辩）<a href="">&emsp;在线咨询</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>