@keyframes rotateIcon {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.mine {
  height: 100vh;
  overflow-y: auto;
  font-size: 0.37333rem;
  position: relative;
  padding-bottom: 3.25333rem;
}
.mine .icon {
  width: 0.42667rem;
  height: 0.42667rem;
}
.mine .icon:active {
  opacity: 0.8;
}
.mine-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--main_gradient_color);
  height: 4.77333rem;
  border-radius: 0 0 1.6rem 1.6rem;
  color: var(--text_btn_main);
  margin-top: -0.53333rem;
}
.mine-header--name,
.mine-header--id {
  display: inline-flex;
  align-items: center;
  gap: 0.10667rem;
}
.mine-header--info {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  margin: 0 0.4rem;
}
.mine-header--detail {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.21333rem;
}
.mine-header--detail img {
  margin-left: 0.05333rem;
}
.mine-header--portrait {
  width: 1.73333rem;
  height: 1.73333rem;
  border-radius: 50%;
  position: relative;
  background: var(--svg_color_3);
  flex-shrink: 0;
}
.mine-header--portrait > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}
.mine-header--headTop {
  display: flex;
  flex-flow: column;
}
.mine-header-level {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.mine-header-level--vip {
  width: 1.33333rem;
}
.mine-header-level--name {
  width: 1.33333rem;
  height: 0.37333rem;
  display: flex;
  padding: 0 0.16rem;
  margin-top: 0.05333rem;
  justify-content: center;
  align-items: center;
  gap: 0.13333rem;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 0.66667rem;
  background: var(--secondary_color1, #ffe1e1);
  color: var(--main_color, #f13f39);
  font-family: Poppins;
  font-size: 0.32rem;
  font-style: normal;
  font-weight: 500;
  line-height: 0.32rem;
}
.mine-header + div {
  margin-top: -0.97333rem;
}
.mine-account {
  margin: 0 0.4rem 0.42667rem;
  border-radius: 0.26667rem;
  height: 1.94667rem;
  background: var(--bg_color_L2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;
}
.mine-account--refresh {
  font-size: 0.34667rem;
}
.mine-account--refresh.active {
  animation: rotateIcon 1s linear infinite;
}
.mine-account--balance {
  color: var(--main_color, #f13f39);
  font-family: Poppins;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.16rem;
}
.mine-account-function {
  display: flex;
  gap: 0.53333rem;
  text-align: center;
}
.mine-account-function > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.16rem;
  cursor: pointer;
}
.mine-account-function > div .icon {
  width: 0.85333rem;
  height: 0.85333rem;
}
.mine-account-function--name {
  color: var(--text_secondary, #768096);
  text-align: center;
  font-family: Poppins;
  font-size: 0.32rem;
  font-style: normal;
  font-weight: 400;
  line-height: 0.37333rem;
}
.mine-category {
  display: flex;
  padding: 0.32rem 0.42667rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.26667rem;
  align-self: stretch;
  margin: 0 0.4rem;
  border-radius: 0.26667rem;
  background: var(--bg_color_L2, #fff);
}
.mine-category-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.21333rem;
  width: 100%;
  border-bottom: 0.01333rem solid var(--Dividing_line_color);
  padding-bottom: 0.21333rem;
}
.mine-category-item--icon {
  font-size: 0.66667rem;
}
.mine-category-item--name {
  color: var(--text_primary, #1e2637);
  font-family: Poppins;
  font-size: 0.37333rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.mine-category-item--tips {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mine-category-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.mine-badge {
  color: var(--text_btn_main, #fff);
  text-align: center;
  font-family: Poppins;
  font-size: 0.32rem;
  font-style: normal;
  font-weight: 400;
  line-height: 0.32rem;
  display: inline-block;
  padding: 0.05333rem 0.26667rem;
  background: var(--main_gradient_color);
  border-radius: 0.26667rem;
}
.mine-desc {
  color: var(--text_secondary, #768096);
  font-family: Poppins;
  font-size: 0.37333rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.mine-loginout {
  margin: 1.33333rem 0.4rem 0;
  display: block;
  width: 9.2rem;
  border: 0.02667rem solid var(--main_color, #f13f39);
  border-radius: 0.58667rem;
  color: var(--main_color, #f13f39);
  background: transparent;
  text-align: center;
  font-family: Poppins;
  font-size: 0.37333rem;
  font-style: normal;
  font-weight: 400;
  line-height: 0.56rem;
  padding: 0.2rem 0;
}
.mine-loginout:active {
  background: var(--bg_color_L2, #f13f39);
  opacity: 1.3;
}