个人中心实现

头像昵称样式

列表样式

.toolitem {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 17px;
  background: white;
  border-bottom: 1px solid gainsboro;
}

画个css箭头

.rightarrow{
    border: solid black;
    border-width: 0 3px 3px 0;
    padding: 3px;
    position: absolute;
    right: 15px;
    /* margin-left: 66%; */
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

将button伪装成text,清除样式

.button-text{
  width: 100%;
  background: white;
  border: none;
  text-align: left;
  padding: 0rpx;
  margin: 0rpx;
  line-height: 1.3;
  font-size: 36rpx;
}

//小程序边框清除要通过afte引用
.ToolList button::after{
  border: none;
  border-radius: 0;
}


.button-hover{
  color: #000000;
  background-color: white;
}