.product { width: 1200px; text-align: center; margin: 0 auto; padding: 40px 0 20px 0; } .product-pictuer { display: flex; flex-wrap:wrap; } .product-pictuer-list{ width:49%; height:400px; position: relative; margin-bottom:24px; margin-right:2%; } .product-pictuer-list p { position: absolute; bottom: 12%; left: 4%; font-size: 24px; color: #F7F7F7; z-index: 10; font-weight: 600; } .product-pictuer-list span { position: absolute; bottom: 4%; left: 4%; font-size: 14px; color: #F7F7F7; z-index: 10; } .product-pictuer-list img{ width:100%; height:100%; box-shadow: 0 0 5px #eee; box-sizing: border-box; } /* .product-pictuer-list:nth-child(1){ width:66%; margin-right:2%; } */ .product-pictuer-list:nth-child(2), .product-pictuer-list:nth-child(5){ margin-right: 0; } .imgShadow{ position: absolute; width:100%; height:100%; background: #000; opacity: 0.1; z-index: 5; } /*鍚庨潰鏂板鐨勬柊闂绘牱寮?/ .mixed-group { display: flex; justify-content: space-between; width: 1200px; margin: 0 auto; padding-bottom: 40px; box-sizing: border-box; } .video-box { width: 700px; height: 410px; } .video-box video { width: 100%; height: 100%; } .news-box { width: 460px; } .news-box .news-title { color: #101010; font-size: 16px; width: 100%; height: 36px; line-height: 36px; border-bottom: 2px solid #1784C6; } .news-content-list a { padding: 10px 0; border-bottom: 1px solid rgba(228, 228, 228, 0.49); display: flex; justify-content: space-between; } .news-content-list .news-content-date { text-align: center; width: 42px; margin-right: 16px; } .news-content-list .news-content-date .date-month { width: 42px; height: 42px; color: #ffffff; font-size: 14px; line-height: 42px; background-color: #1784C6; } .news-content-list .news-content-date .date-year { width: 40px; height: 28px; font-size: 14px; text-align: center; line-height: 28px; border: 1px solid rgba(187, 187, 187, 0.28); border-radius: 0px 0px 5px 5px; } .news-content-list .news-content-message { width: 84%; padding: 5px; } .news-content-list .news-content-message>div { font-size: 14px; color: #101010; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 10px; } .news-content-list .news-content-message>p { font-size: 12px; color: #666666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media screen and (max-width: 1200px) { .mixed-group { flex-wrap: wrap; width: 100%; padding: 10px 20px; } .video-box { width: 100%; height: 200px; } .video-box video { width: 100%; height: 100%; } .news-box { width: 100%; } .news-box .news-title { font-size: 18px; height: 20px; line-height: 20px; border-bottom: none; text-align: center; margin: 22px 0 12px; position: relative; } .news-box .news-title::before { content: ''; position: absolute; bottom: -4px; width: 20px; height: 2px; left: 50%; transform: translateX(-50%); background-color: #1784c6; } }