geekai/web/src/assets/css/member.styl

.member {
  height 100%

  .title {
    text-align center
    background-color #25272d
    font-size 24px
    color var(--text-theme-color)
    padding 10px
    border-bottom 1px solid #3c3c3c
  }

  .inner {
    color var(--text-theme-color)
    padding 15px 0 15px 15px
    overflow-x hidden
    overflow-y visible
    display flex
    flex-flow row

    .profile-card {
      max-width 300px
      border-radius 18px
      box-shadow 0 4px 8px rgba(0,0,0,0.08)
      padding 24px 16px
      background var(--panel-bg)
      position relative
      z-index 1
      margin-bottom 24px
    }
    .profile-title {
      font-size 18px
      font-weight bold
      margin-bottom 18px
      color #2d8cf0
      letter-spacing 2px
      text-align center
    }
    .profile-btn {
      width 100%
      margin-bottom 12px
      font-size 16px
      font-weight 500
      display flex
      align-items center
      justify-content center
      border none
      border-radius 8px
      background linear-gradient(90deg, #6dd5ed 0%, #2193b0 100%)
      color #fff
      transition all 0.3s
      i {
        margin-right 8px
        font-size 20px
      }
      &:hover {
        box-shadow 0 2px 12px #2193b0aa
        transform translateY(-2px) scale(1.03)
        background linear-gradient(90deg, #2193b0 0%, #6dd5ed 100%)
      }
    }
    .profile-btn.email {
      background linear-gradient(90deg, #f7971e 0%, #ffd200 100%)
    }
    .profile-btn.mobile {
      background linear-gradient(90deg, #43cea2 0%, #185a9d 100%)
    }
    .profile-btn.third {
      background linear-gradient(90deg, #ff512f 0%, #dd2476 100%)
    }
    .profile-btn.password {
      background linear-gradient(90deg, #1d4350 0%, #a43931 100%)
    }
    .profile-btn.redeem {
      background linear-gradient(90deg, #00c6ff 0%, #0072ff 100%)
    }
    .profile-bg {
      position absolute
      left 0
      top 0
      width 100%
      height 100%
      z-index 0
      background url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="%23e0eaff"/><circle cx="300" cy="60" r="40" fill="%23f0f7ff"/><circle cx="320" cy="180" r="30" fill="%23e0eaff"/></svg>') no-repeat center/cover
      opacity 0.08
      pointer-events none
    }

    .product-box {
      padding 0 20px
      width 100%

      .info {
        .el-alert__description {
          font-size 14px !important
          margin 0
        }
        padding 0 0 20px 0
      }

      .list-box {
        .product-item {
          // border 1px solid #666666
          background-color var(--chat-bg)
          border-radius 6px
          overflow hidden
          cursor pointer
          transition: all 0.3s ease; /* 添加过渡效果 */
          margin-bottom 20px

          .image-container {
            display flex
            justify-content center

            .el-image {
              padding 6px

              .el-image__inner {
                border-radius 10px
              }
            }
          }

          .product-title {
            display flex
            padding 10px

            .name {
              width 100%
              text-align center
              font-size 16px
              font-weight bold
              color var( --el-color-primary)
            }
          }

          .product-info {
            padding 10px 20px
            font-size 14px
            color #999999

            .info-line {
              display flex
              width 100%
              padding 5px 0

              .label {
                display flex
                width 100%
              }

              .price, .expire, calls {
                display flex
                width 90px
                justify-content right
              }

              .discount {
                color #f56c6c
                font-size 20px
              }

              .expire {
                color #409eff
              }

              .power {
                color #F2CB51
              }
            }


            .pay-way {
              padding 10px 0
              display flex
              justify-content: center
              flex-wrap wrap

              .el-button {
                margin 10px 5px 0 5px
                height 32px
                filter: none;

                .icon-alipay,.icon-wechat-pay {
                  color #ffffff
                }
                .icon-qq {
                  color #15A6E8
                  font-size 24px
                }
                .icon-jd-pay {
                  color var(--text-theme-color)
                  font-size 24px
                }
                .icon-douyin {
                  color #0a0a0a
                  font-size 22px
                }
                .icon-paypal {
                  font-size 14px
                  color #009CDE
                }
              }
            }
          }

          &:hover {
            // box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
            transform: translateY(-10px); /* 向上移动10像素 */
            box-shadow: 0 0 10px var(--shadow-color);
            background-color: var(--hover-deep-color)
          }
        }
      }

      .headline {
        padding 0 20px 20px 0
      }

      .user-order {
        padding 0 20px 20px 0
      }
    }
  }

}

.pay-dialog {
  .product-info {
    text-align center
    color #333333
    font-size 16px

    .price {
      color #f56c6c
      font-weight 700
    }
  }
}