/* 基础样式 */
body {
    margin: 0;
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
}

/* 统一容器样式 */
.appel {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#dinga {
    display: block;
    width: 100%;
    padding: 0;
    font-size: 0;
    line-height: 0;
    border: 0;
}

/* 内容项样式 - 桌面端 */
.display-widget-item {
    width: 100%;
    height: 60px; /* 桌面端：980x60 */
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    overflow: hidden;
    display: block;
    background: #fff;
    box-shadow: none;
}

/* iframe样式 */
.display-widget-iframe {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    display: block;
    vertical-align: top;
    background: transparent;
    outline: 0;
}

/* 移动端适应 - 按比例缩放（980:60的比例） */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .appel {
        max-width: 100%;
    }
    
    .display-widget-item {
        height: calc(100vw * 60 / 980); /* 动态计算：屏幕宽度 * (60/980) */
        max-height: 47px; /* 768px对应的高度 */
        margin: 0;
        padding: 0;
    }
    
    .display-widget-iframe {
        height: 100%;
    }
}

@media (max-width: 480px) {
    body {
        padding: 5px;
    }
    
    .display-widget-item {
        height: calc(100vw * 60 / 980); /* 动态计算高度 */
        max-height: 29px; /* 480px对应的高度 */
        margin: 0;
        padding: 0;
    }
    
    .display-widget-iframe {
        height: 100%;
    }
}

@media (max-width: 360px) {
    body {
        padding: 3px;
    }
    
    .display-widget-item {
        height: calc(100vw * 60 / 980); /* 动态计算高度 */
        max-height: 22px; /* 360px对应的高度 */
        margin: 0;
        padding: 0;
    }
    
    .display-widget-iframe {
        height: 100%;
    }
}