/* 浮动按钮样式 */
.app-float-tab {
    position: fixed;          /* 固定定位 */
    bottom: 290px;            /* 距离底部290px */
    right: 0;                  /* 放置在左侧 */
    width: 41px;
    background: #3a73fb;      /* 背景颜色 */
    border-radius: 10px 0 0 10px; /* 圆角 */
    font-size: 14px;
    color: #fff;              /* 白色文字 */
    opacity: 0;               /* 初始透明度 */
    padding: 21px 13px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease; /* 平滑过渡效果 */
}

/* 浮动按钮内部圆形数字或图标 */
.app-float-tab > div {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    width: 17px;
    height: 17px;
    border-radius: 50%;      /* 圆形 */
    text-align: center;
    line-height: 17px;
    color: #3a73fb;
    background-color: #fff;  /* 背景为白色 */
}

/* 弹出模态框样式 */
.app-float-modal-contain {
    position: fixed;
    top: 48%;                /* 垂直居中 */
    transform: translateY(-50%);
    right: 100px;             /* 距离左边132px */
    z-index: -1;             /* 初始为隐藏层 */
    opacity: 0;              /* 初始透明度 */
    transition: opacity 0.3s ease, z-index 0.3s ease; /* 平滑过渡 */
}

/* 模态框容器样式 */
.app-float-modal {
    width: 174px;
    background: #3a73fb;
    opacity: 1;
    padding: 13px;
    color: #fff;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 关闭按钮样式 */
.app-float-modal-close {
    position: absolute;
    top: -13px;
    left: -11px;
    width: 29px;
    background: #030303;
    opacity: .5;
    border-radius: 50%;      /* 圆形按钮 */
    cursor: pointer;
}

/* 模态框内的内容区域 */
.app-float-modal > div {
    width: 146px;
    height: 157px;
    background: #fff;
    border-radius: 4px 4px 10px 10px; /* 圆角 */
    margin-top: 12px;
    font-size: 12px;
    color: #00116a;
    text-align: center;
    padding: 10px 17px 17px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 模态框中的二维码 */
.app-float-modal > div .app-float-modal-code {
    width: 110px;
    height: 110px;
    border-radius: 4px;     /* 圆角 */
}
/* 按钮样式 */
.app-float-modal button {
    width: 100%;                     /* 按钮占满容器宽度 */
    padding: 10px;                   /* 内边距 */
    background-color:#ffffff;       /* 背景色 */
    color: #2c48b3;                     /* 文字颜色 */
    border: none;                    /* 无边框 */
    border-radius: 8px;              /* 圆角 */
    font-size: 16px;                 /* 字体大小 */
    cursor: pointer;                /* 鼠标悬停时显示手型 */
    transition: background-color 0.3s ease, transform 0.2s ease;  /* 平滑过渡效果 */
    font-weight: bold;
}

/* 按钮悬停效果 */
.app-float-modal button:hover {
    background-color: #e32727;       /* 悬停时背景色变暗 */
    transform: scale(1.05);/* 悬停时略微放大 */
    color: #fff;
}

/* 按钮点击效果 */
.app-float-modal button:active {
    background-color: #1f478d;       /* 点击时背景色变更 */
    transform: scale(1);              /* 点击时恢复原状 */
}