.template {
  height: 100%;
}
.main-card {
  height: 100%;
}
.config-box {
  height: 100%;
}
.content {
  height: 100%;
}


/* ==================== 通用布局样式 ==================== */
 
/* 主内容区域样式 */
.el-main {
    padding-top: 90px;      /* 顶部内边距 */
    padding-left: 30px;     /* 左侧内边距 */
    padding-right: 30px;    /* 右侧内边距 */
}
 
/* 模板标题样式 */
.template > .tit {
    margin: 0 !important;               /* 清除默认外边距 */
    margin-bottom: 0.23rem !important;  /* 底部外边距 */
}
 
/* 云服务相关样式 */
.mf-cloud {
    padding: 15px 0 1.2rem !important;  /* 上下内边距设置 */
}
 
/* 通用配置标题样式 */
.common-config .config-tit {
    font-size: 14px !important;      /* 字体大小 */
    margin-bottom: 20px !important;  /* 底部外边距 */
}
 
/* 点击选择项样式 */
.common-config .click-select .item {
    width: auto !important;          /* 宽度自适应 */
    padding: 0 20px !important;      /* 左右内边距 */
    border-radius: 4px !important;   /* 圆角边框 */
}
 
/* ==================== 移动端响应式样式 ==================== */
 
@media screen and (max-width: 750px) {
    
    /* 主内容区域移动端适配 */
    .el-main {
        padding-top: 1.66rem;     /* 顶部内边距 */
        padding-left: 0.3rem;     /* 左侧内边距 */
        padding-right: 0.3rem;    /* 右侧内边距 */
        padding-bottom: 0.3rem;   /* 底部内边距 */
        font-size: 13px !important; /* 字体大小 */
        overflow: hidden;         /* 隐藏溢出内容 */
        height: 100%;             /* 高度100% */
    }
    
    /* 标签页项样式 */
    .el-tabs .el-tabs__item {
        font-size: 15px !important;    /* 字体大小 */
        padding: 0 0 10px 0 !important; /* 内边距 */
        margin-bottom: 0 !important;   /* 清除底部外边距 */
    }
    
    /* 模板标题移动端适配 */
    .template > .tit {
        font-size: 20px !important;    /* 字体大小 */
    }
    
    /* 云服务移动端适配 */
    .mf-cloud {
        padding: 10px 0 1.2rem !important;  /* 上下内边距 */
    }
    
    /* 通用标题移动端适配 */
    .com-tit {
        font-size: 14px !important;    /* 字体大小 */
    }
    
    /* 表单标签样式调整 */
    .el-form-item__label {
        float: none !important;        /* 取消浮动 */
    }
    
    /* 表单内容样式调整 */
    .el-form-item__content {
        margin-left: 0 !important;     /* 清除左侧外边距 */
    }
    
    /* 表单单选按钮和流式布局样式 */
    .el-form .el-radio-button__inner, 
    .el-form .flow-bw {
        min-width: 110px !important;   /* 最小宽度 */
        height: 40px !important;       /* 高度 */
        line-height: 40px !important;  /* 行高 */
    }
    
    /* 提示信息隐藏 */
    .s-tip {
        display: none;                 /* 隐藏元素 */
    }
    
    /* 云服务盒子顶部样式 */
    .cloud-box .cloud-item .top {
        line-height: 39px !important;  /* 行高 */
        padding: 0 15px !important;    /* 左右内边距 */
        font-size: 14px !important;    /* 字体大小 */
    }
    
    /* 云服务信息名称样式 */
    .cloud-box .info .name {
        width: 100px !important;       /* 固定宽度 */
    }
    
    /* 图片项样式 */
    .image-item {
        width: 100% !important;        /* 宽度100% */
        height: 55px !important;       /* 固定高度 */
    }
    
    /* 图片项名称样式 */
    .image-item .name {
        font-size: 14px !important;    /* 字体大小 */
    }
    
    /* 图片项版本样式 */
    .image-item .version {
        font-size: 14px !important;    /* 字体大小 */
    }
    
    /* 空图片图标样式 */
    .empty-image i {
        font-size: 14px !important;    /* 字体大小 */
    }
    
    /* 输入框内部样式 */
    .el-input__inner {
        height: 30px !important;       /* 固定高度 */
        font-size: 13px !important;    /* 字体大小 */
    }
    
    /* 输入框图标样式 */
    .el-input__icon {
        line-height: 30px !important;  /* 行高 */
    }
    
    /* 下拉菜单项样式 */
    .el-select-dropdown__item {
        font-size: 14px !important;    /* 字体大小 */
    }
    
    /* 数字输入框增减按钮样式 */
    .el-input-number__decrease, 
    .el-input-number__increase {
        height: 28px !important;       /* 固定高度 */
    }
    
    /* 数字输入框样式 */
    .el-input-number {
        width: 2.5rem !important;      /* 固定宽度 */
        line-height: 30px !important;  /* 行高 */
    }
    
    /* 订单中间部分样式 */
    .f-order .mid {
        display: flex !important;              /* 弹性布局 */
        align-items: flex-start !important;    /* 顶部对齐 */
        justify-content: space-between !important; /* 两端对齐 */
        width: 100% !important;                /* 宽度100% */
        padding: 10px 0;                       /* 上下内边距 */
    }
    
    /* 当前内容项样式 */
    .cur-content .c-item {
        line-height: 29px !important;  /* 行高 */
        font-size: 14px !important;    /* 字体大小 */
        width: 100% !important;        /* 宽度100% */
    }
    
    /* 免费内容样式 */
    .free-content {
        width: 90% !important;         /* 宽度90% */
    }
    
    /* 免费内容项样式 */
    .free-content .c-item {
        line-height: 29px !important;  /* 行高 */
        font-size: 14px !important;    /* 字体大小 */
        width: 100% !important;        /* 宽度100% */
    }
    
    /* 免费内容文本样式 */
    .free-content .c-item .l-txt {
        max-width: 100% !important;    /* 最大宽度100% */
    }
    
    /* 订单底部价格样式 */
    .f-order .bot-price {
        font-size: 20px !important;    /* 字体大小 */
    }
    
    /* 订单底部新价格样式 */
    .f-order .bot-price .new span {
        font-size: 20px !important;    /* 字体大小 */
    }
    
    /* 折扣文本样式 */
    .discount-text {
        font-size: 14px !important;    /* 字体大小 */
    }
    
    /* 折扣按钮样式 */
    .discount-content .discount-btn {
        font-size: 15px;               /* 字体大小 */
        width: 58px;                   /* 固定宽度 */
        height: 30px;                  /* 固定高度 */
        line-height: 8px;              /* 行高 */
        padding-left: 15px;            /* 左侧内边距 */
    }
    
    /* 订单右侧样式 - 居中对齐 */
    .f-order .right {
        display: flex !important;              /* 弹性布局 */
        align-items: center !important;        /* 垂直居中 */
        justify-content: center !important;    /* 居中对齐 - 修改这里 */
        width: 100% !important;                /* 宽度100% */
        gap: 15px;                             /* 按钮间距 */
    }
    
    /* 购买按钮样式 */
    .f-order .right .buy {
        width: 100px !important;       /* 固定宽度 */
        line-height: 35px !important;  /* 行高 */
        font-size: 15px !important;    /* 字体大小 */
        border-radius: 4px !important; /* 圆角边框 */
        margin: 0 8px;                 /* 左右外边距 - 可选 */
    }
    
    /* 加入购物车按钮样式 */
    .f-order .right .add-cart {
        width: 100px !important;       /* 固定宽度 */
        height: 35px !important;       /* 固定高度 */
        border-radius: 4px !important; /* 圆角边框 */
        margin: 0 8px;                 /* 左右外边距 - 可选 */
    }
    
    /* 工具提示样式 */
    .el-tooltip__popper.is-light {
        font-size: 13px !important;    /* 字体大小 */
    }
    
    /* 订单主卡片样式 */
    .f-order .main-card {
        padding: 15px 0 !important;    /* 上下内边距 */
        font-size: 14px;               /* 字体大小 */
        /* padding: 0.4rem 0 3.2rem !important; */ /* 注释掉的备用样式 */
    }
    
    /* 订单主卡片左侧样式 */
    .f-order .main-card .left {
        justify-content: space-between !important; /* 两端对齐 */
        width: 100% !important;        /* 宽度100% */
    }
    
    /* 产品标题样式 */
    .common-config .pro-tit {
        font-size: 20px !important;    /* 字体大小 */
    }
    
    /* 配置标题样式 */
    .common-config .config-tit {
        font-size: 14px !important;    /* 字体大小 */
    }
    
    /* 订单右侧信息描述样式 */
    .common-config .order-right .info .des {
        font-size: 14px !important;    /* 字体大小 */
    }
    
    /* 订单右侧整体样式 */
    .common-config .order-right {
        width: 100% !important;        /* 宽度100% */
        height: auto !important;       /* 高度自适应 */
        right: 0 !important;           /* 右侧对齐 */
        bottom: 0 !important;          /* 底部对齐 */
        top: unset !important;         /* 清除顶部定位 */
        position: relative !important; /* 相对定位 */
        padding: 25px !important;      /* 内边距 */
        margin-top: 20px !important;   /* 顶部外边距 */
    }
    
    /* 订单右侧标题样式 */
    .common-config .order-right .right-title {
        font-size: 16px !important;    /* 字体大小 */
    }
    
    /* 按钮样式 */
    .common-config .f-btn .el-button {
        height: 39px !important;       /* 固定高度 */
    }
    
    /* 配置项描述样式 */
    .common-config .config-item .des {
        font-size: 14px !important;    /* 字体大小 */
    }
    
    /* 点击选择区域样式 */
    .common-config .click-select {
        margin-top: -15px !important;  /* 负上边距 */
    }
    
    /* 左侧配置区域样式 */
    .common-config .l-config {
        margin-right: 0 !important;    /* 清除右侧外边距 */
    }
    
    /* 点击选择项样式 */
    .common-config .click-select .item {
        padding: 6px 25px !important;  /* 内边距 */
    }
    
    /* 周期选择项样式 */
    .common-config .cycle .item {
        min-width: auto !important;        /* 最小宽度自适应 */
        margin-right: 12px !important;     /* 右侧外边距 */
        border-radius: 4px !important;     /* 圆角边框 */
        padding: 5px 18px !important;      /* 内边距 */
        font-size: 15px !important;        /* 字体大小 */
        margin-bottom: 16px !important;    /* 底部外边距 */
    }
    
    /* 周期选择区域网格布局 */
    .common-config .cycle {
        display: grid !important;                  /* 网格布局 */
        grid-template-columns: repeat(3, 1fr) !important; /* 三列等宽 */
    }
    
    /* 勾选图标样式 */
    .el-icon-check:before {
        font-size: 13px !important;    /* 字体大小 */
    }
    
    /* 通用激活状态样式 */
    .common-config .com-active::after {
        border-bottom: 20px solid #0058ff !important;  /* 底部边框 */
        border-left: 20px solid transparent !important; /* 左侧透明边框 */
    }
    
    /* 通用盒子布局 */
    .common-config .common-box {
        display: flex;                  /* 弹性布局 */
        justify-content: space-between; /* 两端对齐 */
        flex-direction: column;         /* 垂直方向排列 */
    }
    
    /* 商品变更盒子样式 */
    .goods-change-box {
        max-width: 84% !important;      /* 最大宽度84% */
    }
    
    /* 商品组名称样式 */
    .goods-group-name {
        font-size: 13px !important;     /* 字体大小 */
    }
    
    /* 选项名称样式 */
    .option-name {
        font-size: 11px !important;     /* 字体大小 */
    }
    
    /* 商品组信息网格布局 */
    .goods-change-box .goods-item-box .goods-group-item .goods-group-info {
        grid-template-columns: repeat(3, 1fr); /* 三列等宽网格 */
    }
    
    /* 数字输入框内部样式 */
    .el-input-number .el-input__inner {
        padding: 0 !important;          /* 清除内边距 */
    }
    
    /* MF-DCIM图片项高度自适应 */
    .mf-dcim .image-item {
        height: auto !important;        /* 高度自适应 */
    }
    
    /* 通用图片项高度自适应 */
    .image-item {
        height: auto !important;        /* 高度自适应 */
    }
    
    /* 订单左侧空白区域 */
    .f-order .l-empty {
        width: 0px !important;          /* 宽度为0 */
    }
    
    /* 订单整体高度自适应 */
    .f-order {
        height: auto !important;        /* 高度自适应 */
    }
    
    /* 订单主卡片垂直排列 */
    .f-order .main-card {
        flex-direction: column;         /* 垂直方向排列 */
    }
    
    .mf-cloud .cloud-box .cloud-item {
        width: 100%!important;
    }
    
    .mf-cloud .cloud-box .info p {
        line-height: 0.4rem!important;
    }
}
 
/* ==================== 特定样式修复 ==================== */
 
/* 名称样式 - 透明背景 */
.name {
    background: transparent !important; /* 透明背景 */
}
 
/* 侧边栏宽度调整 */
.el-aside {
    width: 190px !important;            /* 固定宽度 */
}
 
/* 菜单项图标宽度自适应 */
.el-menu-item i {
    width: auto !important;             /* 宽度自适应 */
}