<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静态展开联系方式</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  *{
    padding: 0px;
    margin: 0;
  }

  /*字体*/

  @font-face {
  font-family: "iconfont";
  src: url('/wp-content/themes/kadence/assets/iconfont/font/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
}

  .contact-bar {
    position: fixed;
    top: 25%;
    right: 0;
    z-index: 9999;
  }

  .contact-item {
    position: absolute;
    width: 200px;         /* 每个按钮都是展开状态 */
    border-radius: 6px 0 0 6px;
    align-items: center;
    color: #fff;
    text-decoration: none;
    right: -140px;
    transition: right 0.5s ease;
    box-sizing: border-box; 
  }

  .contact-item:hover{
    right: 0px;
  }



  .contact-bar  .side1{
    width: 270px;
  }

  .contact-bar  .side1 .contact-text {
    width: 210px;
  }



.contact-bar .side2{
  top: 80px;
}

.contact-bar .side3{
  top: 160px;
}
  .contact-icon {
    display: inline-block;
    width: 60px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 40px;
    background: #c10d3a;
    flex-shrink: 0;
    border-radius: 15px 0 0 15px;
    vertical-align: middle;
        float: left;
        color: white
  }


  .contact-text {
    display: inline-block; 
    width: 140px;
    height: 70px;
    line-height: 70px;
    padding-left: 10px;
    font-size: 14px;
    white-space: nowrap;
    color: white;
    background-color: black;
    box-sizing: border-box; 
    vertical-align: middle;
  }
</style>
</head>
<body>

<div class="contact-bar">
  <div class="contact-item side1">
    <a href="mailto:milo@text.wmcps.com">
      <i class="contact-icon iconfont">
         &#xe908;
      </i>
      <span class="contact-text">milo@text.wmcps.com</span>
    </a>
  </div>
  <div class="contact-item side2">
    <a href="https://wa.me/8615564355155" target="_blank">
      <i class="contact-icon iconfont">
        &#xe927;
      </i>
      <span class="contact-text">+86 15564355155</span>
    </a>
  </div>
  <div class="contact-item side3">
    <a href="tel:+8615564355155">
      <i class="contact-icon iconfont">
        &#xe64c;
      </i>
      <span class="contact-text">+86 15564355155</span>
    </a>
  </div>
</div>

</body>
</html>