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

.member {
  // background-color: #282c34;
  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

    .user-profile {
      padding 10px 20px 20px 20px
      width 300px
      background-color var(--chat-bg)
      color var(--text-theme-color)
      border-radius 10px
      //height 100vh

      .el-form-item__label {
        color var(--text-theme-color)
        justify-content start
      }

      .user-opt {
        .el-col {
          padding 10px

          .el-button {
            width 100%
          }
        }
      }
    }


    .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
                padding 0

                .icon-alipay,.icon-wechat-pay {
                  color var(--text-theme-color)
                }
                .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像素 */
          }
        }
      }

      .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
    }
  }
}