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: 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>