AcidificationModel/pages/Staff/Staff.wxss

/* 页面和视图容器样式 */
page,
view {
  display: flex;
}

page {
  background-color: #f8f8f8;
}

.center {
  flex-direction: column;
}

/* Logo容器样式 */
.logo {
  width: 750rpx;
  height: 240rpx;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #a9c6b6;
  flex-direction: row;
  align-items: center;
}

.logo-hover {
  opacity: 0.8;
}

.logo-img {
  width: 150rpx;  /* 设置图片的大小 */
  height: 150rpx;  /* 设置图片的大小 */
  border-radius: 150rpx; /* 圆形边框 */
}

/* Logo标题样式 */
.logo-title {
  height: 150rpx;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  margin-left: 20rpx;
  text-align: center;  /* 确保昵称水平居中 */
}

/* 用户名样式 */
.uer-name {
  font-size: 38rpx;
  color: #FFFFFF;
  line-height: 10rpx;  /* 让文本垂直居中，但不会影响水平居中 */
  margin: 0;  /* 移除上下间距 */
}

.go-login {
    height: 40rpx; /* 设置箭头图片的高度 */
    width: 40rpx;  /* 设置箭头图片的宽度 */
    line-height: 90rpx; /* 图片垂直居中 */
    margin-left: 10rpx; /* 设置箭头和文本之间的间距 */
    object-fit: contain; /* 保证图片不被拉伸 */
}

.login-title {
  height: 150rpx;
  align-items: self-start;
  justify-content: center;
  flex-direction: column;
  margin-left: 20rpx;
}

/* 中心列表样式 */
.center-list {
  background-color: #FFFFFF;
  margin-top: 20rpx;
  width: 750rpx;
  flex-direction: column;
}

/* 列表项样式 */
.center-list-item {
  height: 90rpx;
  width: 750rpx;
  box-sizing: border-box;
  flex-direction: row;
  padding: 0 20rpx;
  display: flex;
  justify-content: center; /* 图片和文本水平居中 */
  align-items: center;     /* 图片和文本垂直居中 */
}

/* 边框样式 */
.border-bottom {
  border-bottom-width: 1rpx;
  border-color: #c8c7cc;
  border-bottom-style: solid;
}

/* 图片图标样式 */
.list-icon {
  width: 40rpx;  /* 设置图片宽度 */
  height: 40rpx;  /* 设置图片高度 */
  margin-right: 10rpx; /* 图标和文本之间的间距 */
  object-fit: contain; /* 保证图片不被拉伸 */
}

/* 列表文字样式 */
.list-text {
  height: 90rpx;
  line-height: 90rpx;
  font-size: 34rpx;
  color: #555;
  flex: 1;
  text-align: left;  /* 使文字水平居中 */
}

/* 导航箭头样式 */
.navigat-arrow {
  width: 40rpx;  /* 设置箭头图片的宽度 */
  height: 40rpx; /* 设置箭头图片的高度 */
  margin-left: 10rpx; /* 设置箭头和文本之间的间距 */
  object-fit: contain; /* 保证图片不被拉伸 */
}