taiheEhu/src/pages/mine/index.scss

.mine-page {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--top-safe-height, 0px) + 34rpx) 24rpx 170rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, #1f2534 0%, #171d29 100%);
  overflow: hidden;
}

.mine-page__halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.mine-page__halo--large {
  top: -110rpx;
  right: -34rpx;
  width: 360rpx;
  height: 360rpx;
  background:
    radial-gradient(circle, rgba(54, 228, 170, 0.06) 0 24%, transparent 25% 42%, rgba(110, 121, 151, 0.14) 43% 62%, transparent 63%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 72%);
}

.mine-page__halo--small {
  top: 90rpx;
  right: 88rpx;
  width: 150rpx;
  height: 110rpx;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.04), transparent 70%);
}

.mine-page__header-card {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 34rpx 28rpx 30rpx;
  margin-bottom: 22rpx;
  border-radius: 0 0 28rpx 28rpx;
  background: rgba(39, 46, 64, 0.96);
  box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.03);
}

.mine-page__header-main {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.mine-page__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104rpx;
  height: 104rpx;
  margin-right: 24rpx;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(170, 177, 192, 0.55) 0%, rgba(131, 141, 159, 0.75) 100%);
}

.mine-page__avatar-placeholder {
  position: relative;
  width: 56rpx;
  height: 56rpx;
}

.mine-page__avatar-head,
.mine-page__avatar-body {
  position: absolute;
  left: 50%;
  background: rgba(238, 240, 244, 0.72);
  transform: translateX(-50%);
}

.mine-page__avatar-head {
  top: 0;
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
}

.mine-page__avatar-body {
  bottom: 0;
  width: 48rpx;
  height: 26rpx;
  border-radius: 26rpx 26rpx 20rpx 20rpx;
}

.mine-page__identity {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.mine-page__name {
  color: #f4f7fb;
  font-size: 34rpx;
  font-weight: 600;
}

.mine-page__phone {
  margin-top: 10rpx;
  color: #c2cad9;
  font-size: 24rpx;
}

.mine-page__vip-row {
  display: flex;
  align-items: center;
  margin-top: 12rpx;
  gap: 10rpx;
}

.mine-page__vip-badge {
  color: #f4a55c;
  font-size: 22rpx;
  font-style: italic;
}

.mine-page__vip-text,
.mine-page__vip-count {
  color: #11d1ba;
  font-size: 20rpx;
}

.mine-page__header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-left: 18rpx;
  padding-right: calc(var(--menu-safe-width, 0px) + 6rpx);
}

.mine-page__icon-actions {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.mine-page__circle-action {
  position: relative;
  width: 34rpx;
  height: 34rpx;
  opacity: 0.9;
}

.mine-page__circle-action::before,
.mine-page__circle-action::after {
  position: absolute;
  content: "";
}

.mine-page__circle-action--support::before {
  inset: 7rpx 4rpx 10rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.84);
  border-bottom: 0;
  border-radius: 20rpx 20rpx 0 0;
}

.mine-page__circle-action--support::after {
  left: 12rpx;
  right: 12rpx;
  bottom: 6rpx;
  height: 10rpx;
  border-left: 2rpx solid rgba(255, 255, 255, 0.84);
  border-right: 2rpx solid rgba(255, 255, 255, 0.84);
  border-radius: 0 0 10rpx 10rpx;
}

.mine-page__circle-action--settings::before {
  inset: 8rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.84);
  border-radius: 50%;
}

.mine-page__circle-action--settings::after {
  inset: 3rpx;
  border: 2rpx dashed rgba(255, 255, 255, 0.56);
  border-radius: 50%;
}

.mine-page__profile-link {
  margin-top: 56rpx;
  color: #1ac9c0;
  font-size: 24rpx;
}

.mine-page__menu-card {
  position: relative;
  z-index: 1;
  border-radius: 24rpx;
  background: rgba(39, 46, 64, 0.96);
  box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.mine-page__menu-item {
  display: flex;
  align-items: center;
  min-height: 96rpx;
  padding: 0 24rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.05);
}

.mine-page__menu-item--first {
  border-top: 0;
}

.mine-page__menu-icon {
  position: relative;
  width: 28rpx;
  height: 28rpx;
  margin-right: 18rpx;
}

.mine-page__menu-icon::before,
.mine-page__menu-icon::after {
  position: absolute;
  content: "";
  border-color: #19d3be;
}

.mine-page__menu-icon--device::before {
  inset: 4rpx;
  border: 2rpx solid #19d3be;
  border-radius: 6rpx;
}

.mine-page__menu-icon--device::after {
  left: 6rpx;
  right: 6rpx;
  top: 12rpx;
  height: 2rpx;
  background: #19d3be;
}

.mine-page__menu-icon--repair::before {
  left: 4rpx;
  top: 12rpx;
  width: 20rpx;
  height: 2rpx;
  background: #19d3be;
  transform: rotate(45deg);
}

.mine-page__menu-icon--repair::after {
  left: 10rpx;
  top: 6rpx;
  width: 10rpx;
  height: 14rpx;
  border: 2rpx solid #19d3be;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}

.mine-page__menu-icon--feedback::before {
  inset: 4rpx;
  border: 2rpx solid #19d3be;
  border-radius: 50%;
}

.mine-page__menu-icon--feedback::after {
  left: 12rpx;
  top: 8rpx;
  width: 2rpx;
  height: 12rpx;
  background: #19d3be;
  box-shadow: 0 10rpx 0 #19d3be;
}

.mine-page__menu-icon--video::before {
  inset: 5rpx 3rpx;
  border: 2rpx solid #19d3be;
  border-radius: 6rpx;
}

.mine-page__menu-icon--video::after {
  top: 9rpx;
  right: 7rpx;
  width: 0;
  height: 0;
  border-top: 5rpx solid transparent;
  border-bottom: 5rpx solid transparent;
  border-left: 8rpx solid #19d3be;
}

.mine-page__menu-icon--follow::before {
  left: 4rpx;
  top: 8rpx;
  width: 10rpx;
  height: 16rpx;
  border: 2rpx solid #19d3be;
  border-right: 0;
  border-radius: 12rpx 0 0 12rpx;
}

.mine-page__menu-icon--follow::after {
  right: 4rpx;
  top: 8rpx;
  width: 10rpx;
  height: 16rpx;
  border: 2rpx solid #19d3be;
  border-left: 0;
  border-radius: 0 12rpx 12rpx 0;
}

.mine-page__menu-icon--version::before {
  inset: 4rpx;
  border: 2rpx solid #19d3be;
  border-radius: 50%;
}

.mine-page__menu-icon--version::after {
  left: 12rpx;
  top: 8rpx;
  width: 2rpx;
  height: 8rpx;
  background: #19d3be;
  box-shadow: 0 12rpx 0 #19d3be;
}

.mine-page__menu-label {
  flex: 1;
  color: #edf2f7;
  font-size: 30rpx;
}

.mine-page__menu-trailing {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.mine-page__menu-value {
  color: #707b92;
  font-size: 24rpx;
}

.mine-page__menu-arrow {
  color: #7d869d;
  font-size: 26rpx;
}

.mine-page__tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: space-around;
  padding: 16rpx 24rpx calc(20rpx + env(safe-area-inset-bottom));
  background: rgba(30, 35, 48, 0.98);
  box-shadow: 0 -8rpx 24rpx rgba(4, 8, 20, 0.34);
}

.mine-page__tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 88rpx;
}

.mine-page__tabbar-icon {
  position: relative;
  width: 34rpx;
  height: 34rpx;
  margin-bottom: 8rpx;
  border-radius: 10rpx;
  border: 2rpx solid #8f97a9;
  opacity: 0.86;
}

.mine-page__tabbar-icon::before,
.mine-page__tabbar-icon::after {
  position: absolute;
  content: "";
}

.mine-page__tabbar-icon::before {
  left: 8rpx;
  right: 8rpx;
  top: 10rpx;
  height: 2rpx;
  background: #8f97a9;
}

.mine-page__tabbar-icon::after {
  left: 8rpx;
  right: 8rpx;
  bottom: 10rpx;
  height: 2rpx;
  background: #8f97a9;
}

.mine-page__tabbar-icon--active {
  border-color: #36e4aa;
  background: rgba(54, 228, 170, 0.12);
}

.mine-page__tabbar-icon--active::before,
.mine-page__tabbar-icon--active::after {
  background: #36e4aa;
}

.mine-page__tabbar-badge {
  position: absolute;
  top: -4rpx;
  right: -4rpx;
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: #ff4d4f;
  box-shadow: 0 0 0 4rpx rgba(30, 35, 48, 0.98);
}

.mine-page__tabbar-label {
  color: #b0b6c4;
  font-size: 20rpx;
}

.mine-page__tabbar-label--active {
  color: #36e4aa;
}