2. AIUI应用配置

<div class="aiui-service-container" style="width: 100%; margin: 0 auto; box-sizing: border-box;">
    
    <details class="aiui-details" open style="width: 100%; margin: 8px 0 15px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.08); background-color: white;">
        
        <summary class="aiui-summary" style="display: flex; list-style: none; cursor: pointer; outline: none; transition: all 0.3s ease;">
            <div style="display: flex; width: 100%;">
                
                <div style="background-color: #0969DA90; padding: 16px; display: flex; align-items: center; justify-content: center; min-width: 60px; font-size: 33px; color: white; transition: background-color 0.3s ease;">
                    ♨ 
                </div>
                
                <div style="flex: 1; padding: 16px; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff !important; transition: background-color 0.3s ease;">
                    <div>
                        <h2 style="font-size: 1.25rem; font-weight: 600; color: #0969DA; margin: 0 0 5px 0;">通用配置</h2>
                        <p style="color: #36548B; margin: 0; line-height: 1.5;">不区分应用类型，通用的配置说明</p>
                    </div>
                    
                    <span class="aiui-arrow" style="display: inline-block; width: 20px; height: 20px; transition: transform 0.3s ease; color: #0969DA;">▼</span>
                </div>
            </div>
        </summary>
        
        
        <div class="aiui-grid" style="display: grid; grid-template-columns: 1fr; gap: 12px; padding: 10px; max-width: 100%; margin: 0 auto; border-top: 1px solid #f0f7ff;">
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-4/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">应用发布</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">介绍AIUI应用情景模式的作用，并说明应用发布与否与情景模式参数取值的关系。</p>
                    </div>
                </div>
            </a>
            
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-18/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">语义精简协议介绍</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">针对小内存设置,AIUI平台服务针对结构化语义协议做精简处理，减少端侧解析压力。</p>
                    </div>
                </div>
            </a>
        </div>
    </details>
</div>

/* 移除默认箭头并优化折叠样式 */
.aiui-details > .aiui-summary::-webkit-details-marker {
    display: none;
}

/* 展开状态下的箭头旋转效果 */
.aiui-details[open] > .aiui-summary .aiui-arrow {
    transform: rotate(180deg);
}

/* 卡片悬停效果 */
.aiui-card {
    min-width: 300px;
    width: 100%; /* 配合网格自适应 */
	transition: all 0.3s ease;
}

.aiui-card:hover {
    box-shadow: 0 8px 16px rgba(9, 105, 218, 0.2);
    transform: translateY(-2px);
    border-left-color: #0969DA90 !important;
}

/* 确保网格行内卡片高度一致 */
.aiui-grid {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

/* 响应式调整 - 仅作用于当前组件的网格 */
@media (max-width: 600px) {
    .aiui-card {
        border-left-width: 4px !important;
    }
    .aiui-card > div[style*="padding: 15px 18px"] {
        padding: 12px 15px !important;
    }
    .aiui-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .aiui-grid {
        grid-template-columns: 1fr !important;
		max-width: 800px; /* 可选：限制最大宽度避免过宽 */
        margin: 0 auto; /* 居中显示 */
    }
}

@media (min-width: 1024px) {
    .aiui-grid {
        grid-template-columns: 1fr 1fr !important;
		max-width: 1200px; /* 可选：增加最大宽度 */
        margin: 0 auto;
    }
}
</style>

<div class="aiui-service-container1" style="width: 100%; margin: 0 auto; box-sizing: border-box;">
    
    <details class="aiui-details1" open style="width: 100%; margin: 8px 0 15px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.08); background-color: white;">
        
        <summary class="aiui-summary1" style="display: flex; list-style: none; cursor: pointer; outline: none; transition: all 0.3s ease;">
            <div style="display: flex; width: 100%;">
                
                <div style="background-color: #0969DA90; padding: 16px; display: flex; align-items: center; justify-content: center; min-width: 60px; font-size: 33px; color: white; transition: background-color 0.3s ease;">
                    ♫ 
                </div>
                
                <div style="flex: 1; padding: 16px; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff !important; transition: background-color 0.3s ease;">
                    <div>
                        <h2 style="font-size: 1.25rem; font-weight: 600; color: #0969DA; margin: 0 0 5px 0;">极速应用类配置</h2>
                        <p style="color: #36548B; margin: 0; line-height: 1.5;">基于AIUI平台最新的极速超拟人应用，做配置说明</p>
                    </div>
                    
                    <span class="aiui-arrow" style="display: inline-block; width: 20px; height: 20px; transition: transform 0.3s ease; color: #0969DA;">▼</span>
                </div>
            </div>
        </summary>
        
        
        <div class="aiui-grid1" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 10px; max-width: 100%; margin: 0 auto; border-top: 1px solid #f0f7ff;">
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-773/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card1" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">基础配置</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">支持识别引擎选型、兜底回复大模型选型、回复角色选型。</p>
                    </div>
                </div>
            </a>
            
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-774/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card1" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">语义模型配置</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">极速交互链路下技能和大模型能力融合配置项，支持传统语义技能、新智能体、文档问答等能力配置。</p>
                    </div>
                </div>
            </a>
			            
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-775/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card1" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">回复角色配置</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">介绍全链路合成播报发音人配置。</p>
                    </div>
                </div>
            </a>
			
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-776/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card1" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">语音识别配置</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">介绍识别引擎效果参数设置。</p>
                    </div>
                </div>
            </a>
			            
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-5/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card1" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">应用后处理配置</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">支持配置客户自有服务地址，接受AIUI交互中服务数据转发云云对接。</p>
                    </div>
                </div>
            </a>
            
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-590/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card1" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">三方大模型配置</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">配置第三方大模型接入参数，包括API密钥、请求超时设置及模型选择。</p>
                    </div>
                </div>
            </a>
        </div>
    </details>
</div>

/* 移除默认箭头并优化折叠样式 */
.aiui-details1 > .aiui-summary::-webkit-details-marker {
    display: none;
}

/* 展开状态下的箭头旋转效果 */
.aiui-details1[open] > .aiui-summary .aiui-arrow {
    transform: rotate(180deg);
}

/* 卡片悬停效果 */
.aiui-card1 {
    transition: all 0.3s ease;
}

.aiui-card1:hover {
    box-shadow: 0 8px 16px rgba(9, 105, 218, 0.2);
    transform: translateY(-2px);
    border-left-color: #0969DA90 !important;
}

/* 确保网格行内卡片高度一致 */
.aiui-grid1 {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

/* 响应式调整 - 保持每行两个卡片 */
@media (max-width: 600px) {
    .aiui-card1 {
        border-left-width: 4px !important;
    }
    .aiui-card1 > div[style*="padding: 15px 18px"] {
        padding: 12px 15px !important;
    }
}
</style>

<div class="aiui-service-container2" style="width: 100%; margin: 0 auto; box-sizing: border-box;">
    
    <details class="aiui-details2" open style="width: 100%; margin: 8px 0 15px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.08); background-color: white;">
        
        <summary class="aiui-summary2" style="display: flex; list-style: none; cursor: pointer; outline: none; transition: all 0.3s ease;">
            <div style="display: flex; width: 100%;">
                
                <div style="background-color: #0969DA90; padding: 16px; display: flex; align-items: center; justify-content: center; min-width: 60px; font-size: 33px; color: white; transition: background-color 0.3s ease;">
                    ♪ 
                </div>
                
                <div style="flex: 1; padding: 16px; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff !important; transition: background-color 0.3s ease;">
                    <div>
                        <h2 style="font-size: 1.25rem; font-weight: 600; color: #0969DA; margin: 0 0 5px 0;">传统应用类配置</h2>
                        <p style="color: #36548B; margin: 0; line-height: 1.5;">基于AIUI平台最新的极速超拟人应用，做配置说明</p>
                    </div>
                    
                    <span class="aiui-arrow2" style="display: inline-block; width: 20px; height: 20px; transition: transform 0.3s ease; color: #0969DA;">▼</span>
                </div>
            </div>
        </summary>
        
        
        <div class="aiui-grid2" style="display: grid; grid-template-columns: 1fr; gap: 12px; padding: 10px; max-width: 100%; margin: 0 auto; border-top: 1px solid #f0f7ff;">
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-776/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card2" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">语音识别配置</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">介绍AIUI语音识别引擎选型，以及引擎效果参数设置使用方式。</p>
                    </div>
                </div>
            </a>
            
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-90/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card2" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">结构化语义配置</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">介绍传统语义技能及问答库配置，并就官方技能支持信源做汇总说明。</p>
                    </div>
                </div>
            </a>
			            
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-778/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card2" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">星火大模型配置</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">通用大模型链路服务开关项，开启后可进行大模型链路下文档问答、旧智能体等能力配置。</p>
                    </div>
                </div>
            </a>
			
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-779/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card2" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">语音合成配置</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">介绍全链路合成播报发音人配置。</p>
                    </div>
                </div>
            </a>
			            
            
            <a href="https://aiui-doc.xf-yun.com/project-1/doc-5/" target="_blank" style="text-decoration: none; color: #0969DA; display: block;">
                <div class="aiui-card2" style="display: flex; flex-direction: column; height: 100%; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.3s ease; cursor: pointer; border-left: 5px solid #e6f0ff;">
                    <div style="flex-grow: 1; padding: 15px 18px; display: flex; flex-direction: column; line-height: 1.6;">
                        <h3 style="font-size: 1.1rem; font-weight: 600; color: #666; margin: 0 0 6px 0;">应用后处理配置</h3>
                        <p style="color: #666; margin: 0; flex-grow: 1; line-height: 1.4;">支持配置客户自有服务地址，接受AIUI交互中服务数据转发云云对接。</p>
                    </div>
                </div>
            </a>
        </div>
    </details>
</div>

/* 移除默认箭头并优化折叠样式 */
.aiui-details2 > .aiui-summary::-webkit-details-marker {
    display: none;
}

/* 展开状态下的箭头旋转效果 */
.aiui-details2[open] > .aiui-summary .aiui-arrow {
    transform: rotate(180deg);
}

/* 卡片悬停效果 */
.aiui-card2 {
    transition: all 0.3s ease;
}

.aiui-card2:hover {
    box-shadow: 0 8px 16px rgba(9, 105, 218, 0.2);
    transform: translateY(-2px);
    border-left-color: #0969DA90 !important;
}

/* 确保网格行内卡片高度一致 */
.aiui-grid2 {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

/* 响应式调整 - 仅作用于当前组件的网格 */
@media (max-width: 600px) {
    .aiui-card2 {
        border-left-width: 4px !important;
    }
    .aiui-card2 > div[style*="padding: 15px 18px"] {
        padding: 12px 15px !important;
    }
    .aiui-grid2 {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .aiui-grid2 {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (min-width: 1024px) {
    .aiui-grid2 {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}
</style>