*{margin: 0; padding: 0; box-sizing: border-box; font-family: "PingFang SC", "Microsoft YaHei", sans-serif;} /* 公告栏容器 */ .tencent-announcement-container{position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); animation: fadeIn 0.3s ease-out forwards;} @keyframes fadeIn{from{opacity: 0;} to{opacity: 1;} } /* 圆角主题优化 - 主公告框 */ .tencent-announcement{width: 90%; max-width: 900px; max-height: 90vh; background: white; border-radius: 24px; /* 增大圆角 */ box-shadow: 0 12px 40px rgba(24, 144, 255, 0.25); /* 柔和阴影 */ position: relative; display: flex; flex-direction: column; transform: translateY(20px); animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; overflow: hidden;} @keyframes slideUp{to{transform: translateY(0);} } /* 头部样式 */ .announcement-header{padding: 20px 30px; background: linear-gradient(120deg, #e6f7ff 0%, #f0faff 100%); border-bottom: 1px solid #e8f4ff; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; position: sticky; top: 0; z-index: 1; border-radius: 24px 24px 0 0; /* 顶部圆角 */} .header-left{display: flex; flex-direction: column; gap: 8px;} .header-title{display: flex; align-items: center; gap: 12px;} .header-title i{font-size: 24px; color: #1890ff;} .header-title h2{font-size: 22px; font-weight: 600; color: #1890ff;} /* 圆角优化 - 更新时间标签 */ .update-time{display: flex; align-items: center; gap: 8px; font-size: 14px; color: #595959; background: rgba(255, 255, 255, 0.7); padding: 6px 12px; border-radius: 24px; /* 增大圆角 */ width: fit-content; border: 1px solid #e8f4ff;} .update-time i{color: #1890ff; font-size: 12px;} .tencent-logo{display: flex; align-items: center; gap: 8px; color: #1890ff; font-weight: 500; font-size: 14px;} .tencent-logo .logo-circle{width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #1890ff, #36a9ff); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px;} /* 内容区域布局 */ .announcement-container{display: flex; overflow: hidden; flex: 1;} .announcement-content{padding: 30px; flex: 1; overflow-y: auto;} .content-section{margin-bottom: 30px;} .content-section h3{font-size: 18px; color: #262626; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 10px;} .content-section h3 i{color: #1890ff; font-size: 16px;} .content-section p{font-size: 15px; color: #595959; line-height: 1.8; margin-bottom: 15px;} .info-list{padding-left: 25px; margin: 15px 0;} .info-list li{margin-bottom: 12px; position: relative; padding-left: 25px; color: #595959; line-height: 1.7;} .info-list li:before{content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #1890ff;} /* 圆角优化 - 标签样式 */ .priority-tag{display: inline-block; padding: 6px 16px; border-radius: 24px; /* 增大圆角 */ font-size: 13px; font-weight: 500; margin-top: 5px;} .high-priority{background: #fff2e8; color: #fa541c; border: 1px solid #ffd8bf;} .medium-priority{background: #f6ffed; color: #52c41a; border: 1px solid #d9f7be;} /* 二维码区域 - 改为真实图片 */ .qr-section{width: 260px; background: linear-gradient(to bottom, #f8fbff, #f0f9ff); border-left: 1px solid #e8f4ff; padding: 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; position: relative; border-radius: 0 0 24px 0;} .qr-title{font-size: 18px; color: #1890ff; font-weight: 600; text-align: center;} .qr-code{width: 180px; height: 180px; border-radius: 16px; /* 二维码圆角 */ overflow: hidden; position: relative; box-shadow: 0 8px 20px rgba(24, 144, 255, 0.2); border: 1px solid #e6f7ff;} .qr-code img{width: 100%; height: 100%; object-fit: cover; display: block;} .qr-text{position: absolute; bottom: 15px; width: 100%; text-align: center; font-size: 14px; font-weight: 500; color: white; background: rgba(24, 144, 255, 0.85); padding: 5px 0; backdrop-filter: blur(2px);} .qr-hint{font-size: 14px; color: #595959; text-align: center; line-height: 1.6; max-width: 200px;} .qr-hint strong{color: #1890ff;} /* 底部区域 - 圆角优化 */ .announcement-footer{padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; background: #fafafa; border-top: 1px solid #f0f0f0; position: sticky; bottom: 0; border-radius: 0 0 24px 24px;} .footer-info{font-size: 13px; color: #8c8c8c; display: flex; align-items: center; gap: 8px;} .footer-info i{color: #1890ff;} /* 圆角优化 - 按钮样式 */ .close-b{padding: 10px 24px; background: linear-gradient(to right, #1890ff, #40a9ff); color: white; border: none; border-radius: 12px; /* 增大圆角 */ font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(24, 144, 255, 0.25);} .close-b:hover{transform: translateY(-2px); box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);} .close-b:active{transform: translateY(0);} /* 响应式设计 */ @media (max-width: 768px){.announcement-container{flex-direction: column;} .qr-section{width: 100%; border-left: none; border-top: 1px solid #e8f4ff; padding: 20px; border-radius: 0 0 24px 24px;} .announcement-header{padding: 15px 20px; flex-direction: column; align-items: flex-start; gap: 15px;} .announcement-content{padding: 20px;} .header-title h2{font-size: 19px;} .content-section h3{font-size: 17px;} .announcement-footer{padding: 15px 20px; flex-direction: column; gap: 15px; align-items: flex-start;} .close-b{align-self: flex-end;} } /* 动画效果 */ .scale-out{animation: scaleOut 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;} @keyframes scaleOut{from{transform: scale(1); opacity: 1;} to{transform: scale(0.9); opacity: 0;} } .fade-out{animation: fadeOut 0.4s forwards;} @keyframes fadeOut{from{opacity: 1;} to{opacity: 0;} }