/* 新闻列表样式 */ .news-container { max-width: 1400px; margin: 0 auto; padding: 20px 0; } .news-wrapper { display: flex; gap: 30px; } /* 左侧主新闻 */ .main-news { flex: 1; max-width: 50%; } .main-news1 { flex: 1; max-width: 50%; } /* 右侧新闻列表 */ .side-news { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* 公共图片样式 */ .image-container { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 比例 */ overflow: hidden; border-radius: 8px; background-color: #f0f0f0; } .image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } /* 主新闻样式 */ .main-news .title { font-size: 28px; color: #000; margin: 15px 0 10px; transition: color 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main-news .summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 50px; /* 两行高度 */ transition: color 0.3s ease; flex-grow: 1; color: #7e7e7e; font-size: 16px; line-height: 1.5; margin: 20px 0; } /* 右侧新闻项 */ .news-item .title { font-size: 18px; color: #000; margin: 18px 0 5px; transition: color 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 324px; font-weight: 500; } .news-item .date { color: #9e9e9e; font-size: 14px; } /* 悬停效果 */ .news-item:hover .title { color: #ff0000; cursor: pointer; } .news-item:hover .image-container img { transform: scale(1.05); } .main-news:hover .title { color: #ff0000; cursor: pointer; } .main-news:hover .image-container img { transform: scale(1.05); } .views { display: flex; align-items: center; gap: 0.3rem; } /* 元信息 */ .meta { display: flex; align-items: center; justify-content: space-between; align-items: center; color: #9e9e9e; font-size: 14px; margin-top: auto; /* 底部对齐 */ } .news-item .meta { margin-top: 18px; } .titles { /* max-width: 1400px; margin: 0 auto; padding: 20px 0; */ font-size: 24px; /* margin-top: 30px; */ } .soutitmu { max-width: 1400px; margin: 30px auto 0; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; } .soutitmu a { color: #333; font-size: 15px; } .soutitmu a:hover { color: #e94740; } /* 新闻列表样式end */ /* 视频列表样式 */ .video-list-container { max-width: 1400px; margin: 0 auto; padding: 20px 0; } /* 视频列表布局 */ .video-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .video-item { text-decoration: none; color: inherit; transition: transform 0.3s ease; } /* 图片容器 */ /* .image-container { position: relative; border-radius: 8px; overflow: hidden; background: #000; padding-top: 56.25%; } */ .video-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; } /* 播放图标 */ .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-43%, -50%); width: 60px; height: 60px; color: white; opacity: 0.9; transition: opacity 0.3s; } .play-icon .iconfont { font-size: 33px; } /* 信息遮罩层 */ .info-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 15px; background: rgba(0, 0, 0, 0.4); /* background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); */ color: #fff; } .video-title { font-size: 16px; margin: 0 0 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s; } .video-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; opacity: 0.9; } .views { display: flex; align-items: center; gap: 0.3rem; } .video-item:hover .video-cover { opacity: 0.8; } .video-item:hover .play-icon { opacity: 1; } /* 骨架屏样式 */ .skeleton-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .skeleton-item { background: #f0f0f0; border-radius: 8px; overflow: hidden; } .skeleton-image { padding-top: 56.25%; background: #e0e0e0; animation: skeleton-loading 1.5s infinite; } .skeleton-info { height: 50px; padding: 16px; background: #f0f0f0; animation: skeleton-loading 1.5s infinite; } /* 新闻焦点图 */ /* 新闻轮播样式 */ .news-container1 { width: 100%; height: 100%; position: relative; margin-bottom: 30px; overflow: hidden; } .news-slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; display: flex; flex-direction: column; visibility: hidden; } .news-slide.active { opacity: 1; visibility: visible; } .news-slide .news-content .news-title:hover { color: #ff0000; } .news-slide .news-image { /* width: 100%; height: 100%; position: relative; */ position: relative; border-radius: 8px; overflow: hidden; /* background: #000; */ padding-top: 57%; } .news-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .news-dots { position: absolute; bottom: 10px; right: 10px; display: flex; z-index: 10; } .news-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); margin: 0 5px; cursor: pointer; } .news-dot.active { background: white; } .news-content { /* padding: 15px; */ flex: 1; display: flex; flex-direction: column; } .news-title { font-size: 28px; color: #000; margin: 15px 0 10px; transition: color 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* font-size: 18px; font-weight: bold; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */ } .news-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 50px; transition: color 0.3s ease; flex-grow: 1; color: #7e7e7e; font-size: 16px; line-height: 27px; margin: 20px 0; } .news-footer { display: flex; justify-content: space-between; color: #9e9e9e; font-size: 14px; } .news-views { display: flex; align-items: center; } .news-views i { margin-right: 5px; } /* 新闻焦点图 end*/ /* 首页焦点图圆点 */ .newpagjd { bottom: 10px !important; text-align: right; padding-right: 20px; } .newpagjd .swiper-pagination-bullet { width: 11px; height: 11px; background-color: rgba(255, 255, 255, 0.5); opacity: 1; margin: 0 5px !important; } .newpagjd .swiper-pagination-bullet:hover { cursor: pointer; } .newpagjd .swiper-pagination-bullet-active { background-color: #fff; } @keyframes skeleton-loading { 0% { opacity: 1 } 50% { opacity: 0.5 } 100% { opacity: 1 } } /* 网格布局容器 */ .news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .news-itemyx { display: flex; flex-direction: column; } /* 图片容器(16:9) */ .news-itemyx .image-box { position: relative; width: 100%; padding-top: 56.25%; border-radius: 8px; overflow: hidden; background-color: #f0f0f0; } .news-itemyx .news-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .news-itemyx:hover .news-image { transform: scale(1.05); } /* 标题样式 */ .news-itemyx .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 18px; line-height: 1.5; color: #000; margin: 15px 0; min-height: 54px; /* 两行高度 */ transition: color 0.3s ease; cursor: pointer; flex-grow: 1; font-weight: 500; } .news-itemyx:hover .title { color: #ff0000; } /* 元信息 */ .news-itemyx .meta { display: flex; align-items: center; justify-content: space-between; align-items: center; color: #9e9e9e; font-size: 14px; margin-top: auto; /* 底部对齐 */ } /* 视频滑动 */ .slider-container { position: relative; overflow: hidden; } .slider-wrapper { display: flex; transition: transform 0.3s ease; will-change: transform; touch-action: pan-y; } .slider-item { flex: 0 0 calc(95.8% / 3); padding: 0 30px 0 0; position: relative; } .video-thumb { position: relative; width: 100%; padding-top: 56.25%; background: #ddd; border-radius: 4px; overflow: hidden; cursor: pointer; } .video-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .slider-item:hover .video-thumb img { opacity: 0.8; } .play-iconhda { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.8); font-size: 33px; z-index: 1; transition: all 0.3s; } .video-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background: rgba(0, 0, 0, 0.6); color: #fff; transition: all 0.3s; } /* .video-title { font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; } */ /* .video-meta { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, 0.8); } */ .view-count { display: flex; align-items: center; } .view-count i { margin-right: 5px; } .slider-nav { position: absolute; top: 50%; transform: translatey(-50%); width: 40px; height: 40px; background: rgba(0, 0, 0, 0.5); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s; opacity: 0; visibility: hidden; } .slider-container:hover .slider-nav { opacity: 1; visibility: visible; } .slider-nav:hover { background: rgba(0, 0, 0, 0.8); } .slider-prev { left: 10px; } .slider-next { right: 10px; } /* 视频直播 */ .containervsw { max-width: 1400px; margin: 0 auto 0; background-color: white; padding: 20px 0; box-sizing: border-box; } .video-swiper { width: 100%; padding: 0; } .video-swiper .swiper-slide { width: 335px; cursor: pointer; position: relative; } .video-cover1 { width: 100%; height: 0; padding-bottom: 129.25%; /* 16:9 比例 */ position: relative; overflow: hidden; background-color: #333; } .video-cover1 i { font-size: 33px; } .video-cover1 img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 50px; opacity: 0.8; transition: all 0.3s; } /* .imgpr{background-color: #f0f0f0;} */ .video-info1 { position: absolute; bottom: 0; left: 0; right: 0; padding: 15px; background: rgba(0, 0, 0, 0.6); color: white; } .video-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .video-meta1 { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, 0.8); } .view-count1 { display: flex; align-items: center; } .view-count1 i { margin-right: 5px; font-size: 22px; } .video-swiper .swiper-slide:hover .video-cover1 img { transform: scale(1.05); } .video-swiper .swiper-slide:hover .play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } .video-tag { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; color: white; z-index: 2; } .tag-live { background-color: #ff4d4f; } .tag-replay { background-color: #1890ff; } .tag-video { background-color: #52c41a; } /* 头部banner */ .containersoubanner { max-width: 1400px; margin: 50px auto 0; background-color: white; padding: 0; box-sizing: border-box; } .content-wrappersou { display: flex; justify-content: space-between; height: 520px; } .containersoubanner .news-column { width: 995px; height: 100%; position: relative; } .containersoubanner .ad-column { width: 380px; height: 100%; background-color: #f0f0f0; } .ad-column img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; } .containersoubanner .swiper-container { width: 100%; height: 520px; position: relative; } .containersoubanner .swiper-slide { cursor: pointer; position: relative; } .containersoubanner .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } .containersoubanner .news-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: rgba(0, 0, 0, 0.6); color: white; } .news-titlesou { font-size: 22px; font-weight: bold; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-descsou { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; } /* .swiper-pagination { position: absolute; bottom: 80px; left: 50%; transform: translatex(-50%); display: flex; z-index: 10; } .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 5px; background-color: rgba(255, 255, 255, 0.5); opacity: 1; border-radius: 50%; } .swiper-pagination-bullet-active { background-color: #fff; } */ /* 视频滑动end */ /* 新闻轮播swiper */ .swiper-container { width: 100%; height: 100%; } .newlb .swiper-slide { display: flex; flex-direction: column; cursor: pointer; } .newlb .news-image { width: 100%; height: 390px; object-fit: cover; margin-bottom: 5px; border-radius: 8px; background-color: #f0f0f0; } .newlb .news-title { font-size: 24px; font-weight: bold; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .newlb .news-title:hover { color: #ff0000; } .newlb .news-desc { font-size: 16px; color: #666; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 48px; line-height: 24px; } .newlb .news-footer { display: flex; justify-content: space-between; font-size: 14px; color: #999; } .newlb .read-count { display: flex; align-items: center; } .newlb .read-count i { margin-right: 5px; } .newlb .swiper-pagination { position: absolute; bottom: 20px !important; right: 10px; width: auto !important; left: auto !important; } .newlb .swiper-pagination-bullet { width: 11px; height: 11px; background-color: #c6c6c6; opacity: 1; margin: 0 5px !important; } .newlb .swiper-pagination-bullet-active { background-color: #fff; } .newlb .ad-image { width: 100%; height: 100%; object-fit: cover; cursor: pointer; } /* 新闻轮播swiper--end */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 下推广告 */ .containerbigban { width: 100%; max-width: 1400px; height: 0; overflow: hidden; transition: height 1.9s cubic-bezier(0.25, 0.1, 0.25, 1); /* margin-top: 45px; */ display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; text-align: center; position: relative; } .containersmallban { width: 100%; max-width: 1400px; height: 0; overflow: hidden; transition: height 1s cubic-bezier(0.25, 0.1, 0.25, 1); /* transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1); */ /* margin-top: 45px; */ display: flex; align-items: center; justify-content: center; } .countdowna { position: absolute; top: 0; right: 0; width: 35px; height: 30px; line-height: 30px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: white; letter-spacing: 1px; z-index: 10; } .countdowna i { font-size: 18px; font-style: normal; padding-bottom: 5px; } /* 下推广告end */ /* 底部浮动广告条 */ .bombannersmall { position: fixed; bottom: 0; width: 100%; display: flex; justify-content: center; z-index: 99; transform-origin: bottom; } .bombannersmall .bomcenter { width: 100%; max-width: 1400px; height: 0; overflow: hidden; position: relative; transition: height 1s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: bottom; } .bombannersmall .bomcenter img { width: 100%; height: auto; display: block; } .close-btnbm { position: absolute; top: 15px; right: 15px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: all 0.3s ease; z-index: 10; } .close-btnbm:hover { background: rgba(255, 255, 255, 0.5); transform: scale(1.1); } .close-btnbm::before, .close-btnbm::after { content: ''; position: absolute; width: 16px; height: 2px; background: white; } .close-btnbm::before { transform: rotate(45deg); } .close-btnbm::after { transform: rotate(-45deg); } /* ai浮动窗口 */ /* 浮动助手容器 */ .ai-assistant-container { position: fixed; bottom: 50px; right: 20px; z-index: 1000; transition: all 0.3s ease; } /* 输入区域 */ .ai-input-area { display: flex; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-radius: 25px; overflow: hidden; } /* 输入框样式 */ .ai-input-wrapper { position: relative; flex: 1; } .ai-input { width: 100%; padding: 12px 15px 12px 44px; border: 1px solid #e6e8ea; border-right: none; border-radius: 25px 0 0 25px; outline: none; font-size: 14px; color: #333333; background-color: white; box-sizing: border-box; height: 45px; } .ai-input::placeholder { color: #9e9e9e; } .ai-icon { position: absolute; left: 15px; top: 50%; transform: translatey(-50%); color: #9e9e9e; font-size: 16px; width: 26px; height: auto; } /* 提交按钮 */ .ai-submit-btn { padding: 0 20px; background-color: #a00000; color: white; border: none; border-radius: 0 25px 25px 0; cursor: pointer; font-size: 14px; font-weight: bold; transition: all 0.3s ease; height: 45px; display: flex; align-items: center; justify-content: center; } .ai-submit-btn:hover { background-color: #f8f8f8; color: #b80000; } .messtextcss { white-space: pre-wrap; font-size: 15px; } /* 后面新加只有标题的新闻列表 */ .news-gridtitlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 45px; } .news-item-tit { position: relative; padding: 10px 0 10px 20px; /* border-bottom: 1px solid #eee; */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s ease; } /* 标题前的小圆点 */ .news-item-tit::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background-color: #333; /* background-color: #3498db; */ border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translatey(-50%); } .news-item-tit:hover .news-titless { color: #ff0000; cursor: pointer; } .news-item-tit:hover.news-item-tit::before { background-color: #ff0000; } .news-titless { color: #000; font-size: 18px; text-decoration: none; } /* 后面新加只有标题的新闻列表end */ /* 新加直播列表 */ .video-list-live { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; /* margin-bottom: 40px; */ } .video-item-live { position: relative; cursor: pointer; } /* .video-item:hover { transform: translatey(-5px); } */ .video-item-live img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s; } .image-container-live { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 比例 */ overflow: hidden; border-radius: 4px; background-color: #333; transition: transform 0.3s ease } .image-container-live:hover { transform: translatey(-5px); } .video-cover-live { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .play-icon-live { position: absolute; top: 43%; left: 50%; transform: translate(-43%, -50%); width: 60px; height: 60px; color: white; opacity: 0.9; transition: opacity 0.3s; } .video-item-live:hover .play-icon { opacity: 1; } .video-item-live .iconfont { font-size: 35px; } .video-info-live { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 15px; background: rgba(0, 0, 0, 0.4); /* background: linear-gradient(transparent, rgba(0,0,0,0.9)); */ color: white; } .title-live { font-size: 16px; margin: 0 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meta-live { display: flex; justify-content: space-between; align-items: center; font-size: 12px; opacity: 0.9; } .views-live { display: flex; align-items: center; gap: 0.3rem; } .views-live .iconfont { font-size: 18px; margin-right: 0; } .video-tagss { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; color: white; z-index: 2; } .tag-1 { background-color: #ff4d4f; } .tag-3 { background-color: #1890ff; } .tag-2 { background-color: #52c41a; } /* 新加直播列表end */ @media (max-width: 1400px) { .full-banner, .small-banner { width: 100%; height: auto; } } @media (max-width: 1200px) { .video-list, .skeleton-container { grid-template-columns: repeat(2, 1fr); } } /* 视频列表样式end */ @media (max-width: 992px) { .news-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } .iconfont { font-size: 18px; } .slider-item { flex: 0 0 50%; } } @media (max-width: 768px) { .news-wrapper { flex-direction: column; gap: 10px; } .meta { font-size: 13px; } .main-news { max-width: 100%; margin-bottom: 30px; transition: transform 0.3s; } .main-news1 { max-width: 100%; transition: transform 0.3s; } .side-news { grid-template-columns: 1fr; gap: 40px; } .main-news .title { font-size: 20px; } .news-item .title { font-size: 16px; } .video-list, .skeleton-container { grid-template-columns: 1fr; } .video-item { margin-bottom: 20px; } .news-grid { gap: 40px; } .titles { font-size: 20px; } .news-itemyx .title { min-height: auto; } .news-container1 { padding-bottom: 73%; margin-bottom: 0; /* 4:3 比例 */ } .news-title { font-size: 20px; } .news-desc, .news-footer { display: none; } .containersoubanner { width: 100%; } .content-wrappersou { height: 300px; } .containersoubanner .swiper-container { height: 300px; } .containersoubanner .news-overlay { padding: 15px; } .containersoubanner .news-title { font-size: 18px; } .containersoubanner .news-desc { font-size: 14px; } .full-banner { height: 150px; } .small-banner { height: 65px; } .countdown { width: 40px; height: 40px; font-size: 16px; } /* 后面新加只有标题的新闻列表 */ .news-gridtitlist { grid-template-columns: 1fr; gap: 15px 15px; } .news-item-tit { padding: 10px 8px; } /* 后面新加只有标题的新闻列表end */ } @media (max-width: 576px) { .news-grid { grid-template-columns: 1fr; gap: 40px; } .image-box { border-radius: 6px; } .slider-item { flex: 0 0 100%; } .slider-nav { opacity: 1; visibility: visible; } .containersoubanner .news-column { width: 100%; } .containersoubanner .ad-column { width: 100%; margin-top: 30px; } .news-titlesou { font-size: 18px; } .news-descsou { font-size: 12px; } .containersoubanner { margin-top: 30px; } .content-wrappersou { flex-direction: column; height: auto; } .soutitmu { padding: 20px 15px; margin-top: 10px; } .news-container { padding: 20px 15px; } .newlb .news-title { font-size: 18px; } .newlb .news-desc, .newlb .news-footer, .newlb .news-title { font-size: 13px; display: none; } .main-news1 { padding-bottom: 20px; } .close-btnbm { top: 5px; right: 5px; width: 20px; height: 20px; } } @media (max-width: 480px) { .titles { font-size: 18px; } .soutitmu a { font-size: 13px; } .newlb .swiper-pagination-bullet { width: 8px; height: 8px; } .newlb .news-image { height: 200px; } }