page {
  overflow: auto;
  /* height: 100%; */
  /* #ifdef H5 */
  padding-top: 140upx;
  /* #endif */
  /* #ifdef APP-PLUS */
  padding-top: calc(var(--status-bar-height) + 100upx);
  /* #endif */
}

.integral {
  padding: 0 32upx;
  height: inherit;
}

.container {
  width: 100%;
  display: flex;
  height: inherit;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #C3C8D3;
  border-top-left-radius: 12upx;
  border-top-right-radius: 12upx;
}

.header {
  padding: 32upx 32upx 20upx;
  height: 240upx;
  display: flex;
  color: #8C8E97;
  font-size: 24upx;
  box-sizing: border-box;
}

.avatar image {
  width: 68upx;
  height: 68upx;
}

.content {
  flex: 1;
  margin-left: 10upx;
}

.content .content-title {
  font-size: 32upx;
  color: #2A426B;
  margin-bottom: 16upx;
  text-shadow: 2upx 4upx 12upx rgba(0, 0, 0, 0.5);
}

.content .content-text {
  display: flex;
}

.content .content-text .text {
  text-align: left;
  margin-right: 20upx;
  font-size: 20upx;
  /* transform: scale(0.8); */
}

.content .divider {
  position: relative;
  margin-top: 76upx;
  width: 260upx;
  height: 4upx;
  background-color: #fff;
  border-radius: 4upx;
}

.divider-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 130upx;
  height: 4upx;
  background-color: #2A426B;
  border-radius: 4upx;
}

.divider-unm {
  position: absolute;
  top: 0;
  right: 50%;
  color: #2A426B;
  transform: translate(50%, -110%);
}

.divider-level {
  position: absolute;
  top: 0;
  right: 0;
  color: #2A426B;
  transform: translate(130%, -50%);
}

.classification {
  position: relative;
  display: flex;
  flex-direction: column;
}

.classification-image {
  position: absolute;
  width: 90upx;
  height: 135upx;
  transform: translateY(-30upx);
}

.log-menu {
  margin-top: auto;
  text-align: right;
  color: #8A8E96;
}

.menu-item {
  font-size: 24upx;
  margin-top: 10upx;
}

.main {
  overflow: hidden;
  flex: 1;
  height: calc(100% - 240upx);
  background-color: #fff;
  border-top-left-radius: 18upx;
  border-top-right-radius: 18upx;
  box-shadow: -2px 0px 12px 0 rgba(0, 0, 0, 0.1)
}

.main-nav {
  display: flex;
  width: 100%;
  height: 80upx;
  align-items: center;
  justify-content: space-around;
  background-color: #D1D5E1;
  box-sizing: border-box;
}

.nav-item {
  flex: 1;
  display: flex;
  height: 80upx;
  font-size: 28upx;
  color: #3F4044;
  align-items: center;
  justify-content: center;
  border: 0;
}

.nav-active1 {
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 80% 0%);
  /* clip-path: path('M 0 0 H 80 Q 100 0 100 20 V 100 H 0 Z'); */
  font-weight: 600;
  background-color: #fff !important;
  color: #000 !important;
  position: relative;
  overflow: hidden;
}

.nav-active2 {
  clip-path: polygon(20% 0%, 0% 100%, 100% 100%, 100% 0%);
  /* clip-path: path('M 0 0 H 80 Q 100 0 100 20 V 100 H 0 Z'); */
  font-weight: 600;
  background-color: #fff !important;
  color: #000 !important;
  position: relative;
  overflow: hidden;
}

.main-content {
  height: calc(100% - 80upx);
  box-sizing: border-box;
}
