帮我用vue 和css写一个微信通讯录界面

好的，以下是一个简单的微信通讯录界面的代码示例，使用Vue和CSS实现：

HTML部分：

<template>
  <div class="wechat-contact">
    <div class="search-box">
      <i class="iconfont icon-sousuo"></i>
      <input type="text" placeholder="搜索">
    </div>
    <div class="contact-list">
      <div class="group-title">A</div>
      <div class="contact-item">
        <div class="avatar"><img src="./avatar.png"></div>
        <div class="info">
          <div class="name">Anna</div>
          <div class="desc">Hello, I'm Anna.</div>
        </div>
      </div>
      <div class="contact-item">
        <div class="avatar"><img src="./avatar.png"></div>
        <div class="info">
          <div class="name">Alex</div>
          <div class="desc">Hi, I'm Alex.</div>
        </div>
      </div>
      <div class="group-title">B</div>
      <div class="contact-item">
        <div class="avatar"><img src="./avatar.png"></div>
        <div class="info">
          <div class="name">Bob</div>
          <div class="desc">Hey, I'm Bob.</div>
        </div>
      </div>
      <div class="contact-item">
        <div class="avatar"><img src="./avatar.png"></div>
        <div class="info">
          <div class="name">Bill</div>
          <div class="desc">Hello, I'm Bill.</div>
        </div>
      </div>
    </div>
  </div>
</template>

CSS部分：

.wechat-contact {
  padding: 20px;
  background-color: #f5f5f5;
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.search-box input {
  flex: 1;
  border: none;
  outline: none;
  margin-left: 10px;
}
.search-box i {
  font-size: 18px;
  color: #999;
}
.contact-list {
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
}
.group-title {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
  margin-bottom: 5px;
}
.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info {
  flex: 1;
}
.name {
  font-size: 16px;
  font-weight: bold;
}
.desc {
  font-size: 14px;
  color: #999;
}

在Vue组件中引入上述代码即可实现一个简单的微信通讯录界面。当然，你可以根据实际需求进行修改和完善，例如从后台获取联系人信息、实现搜索功能等。