/* 全局样式 */
.ad-banner {
position: relative;
width: 100%;
max-width: 920px;
margin: 10px auto;
border: 2px solid #000;
border-radius: 12px;
background: #fff;
font-family: "Microsoft YaHei", sans-serif;
box-sizing: border-box;
overflow: hidden;
}
/* PC 横版 */
.ad-pc {
display: flex;
align-items: center;
padding: 18px 22px;
gap: 20px;
}
/* 图标 */
.ad-icon {
width: 60px;
height: 60px;
flex-shrink: 0;
/* 在这里替换你的图标地址 */
background: url("https://via.placeholder.com/60") center/contain no-repeat;
}
/* 文字区域 */
.ad-text {
flex: 1;
}
.ad-text h3 {
margin: 0 0 6px;
font-size: 22px;
font-weight: bold;
color: #000;
}
.ad-text p {
margin: 0 0 4px;
font-size: 15px;
color: #000;
line-height: 1.4;
}
.ad-text .red {
color: #e53935;
font-weight: bold;
}
/* 按钮组 */
.ad-buttons {
display: flex;
align-items: center;
background: #f2f2f2;
border-radius: 10px;
padding: 4px;
gap: 0;
}
.ad-btn {
border: none;
font-size: 15px;
padding: 10px 22px;
cursor: pointer;
font-weight: bold;
border-radius: 8px;
}
.btn-black {
background: #000;
color: #fff;
}
.btn-gray {
background: transparent;
color: #000;
}
/* ====================== 手机布局 ====================== */
@media (max-width: 767px) {
.ad-pc {
display: block !important;
padding: 16px;
}
/* 手机：图标左上 */
.ad-icon {
float: left;
width: 50px;
height: 50px;
margin-right: 14px;
margin-bottom: 10px;
}
/* 文字右侧 */
.ad-text {
overflow: hidden;
}
.ad-text h3 {
font-size: 18px;
margin-bottom: 4px;
}
.ad-text p {
font-size: 14px;
}
/* 按钮通宽 */
.ad-buttons {
width: 100%;
margin-top: 14px;
padding: 5px;
}
.ad-btn {
flex: 1;
font-size: 16px;
padding: 12px 0;
text-align: center;
}
}
