index.wxss

.header {
  padding: 80rpx;
  line-height: 1;
}
.title {
  font-size: 52rpx;
}
.desc {
  margin-top: 10rpx;
  color: #888888;
  font-size: 28rpx;
}
.menu-list {
  display: flex;
  flex-direction: column;
  background-color: #fbf9fe;
  margin-top: 10rpx;
}
.menu-item {
  color: #000000;
  display: flex;
  background-color: #fff;
  margin: 10rpx 30rpx;
  flex-direction: column;
}
.menu-item-main {
  display: flex;
  padding: 40rpx;
  border-radius: 10rpx;
  align-items: center;
  font-size: 32rpx;
  justify-content: space-between;
}
.menu-item-arrow {
  width: 32rpx;
  height: 32rpx;
  transition: 400ms;
}
.menu-item-arrow.open {
  transform: rotate(-90deg);
}
.menu-item-arrow.close {
  transform: rotate(90deg);
}
.menu-item-arrow.url {
  transform: rotate(0deg);
}

.menu-item-api-list {
  transition: 200ms;
  height: auto;
  border-top: 1px solid #d8d8d8;
}
.menu-item-api-list.close {
  display: none;
  height: 0;
}
.menu-item-api-item {
  display: flex;
  justify-content: space-between;
  height: 80rpx;
  padding: 20rpx 20rpx 20rpx 0;
  margin-left: 40rpx;
  align-items: center;
  border-top: 1px solid #f0f0f0;
}
.menu-item-api-item-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.menu-item-api-item-text-zhname {
  font-size: 30rpx;
}
.menu-item-api-item-text-enname {
  font-size: 26rpx;
  color: #6b6b6b;
}
.menu-item-api-item-arrow {
  width: 32rpx;
  height: 32rpx;
}