.header { width: 100%; height: 2.5rem; background-color: #000000; opacity: 0.7; position: fixed; left: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 0.6rem; box-sizing: border-box; } .open { width: 3.6rem; height: 1.3rem; background-color: #d0302c; border-radius: 0.2rem; font-family: PingFangSC-Medium; font-size: 0.6rem; color: #ffffff; text-align: center; line-height: 1.3rem; } .header img { height: 1.625rem; } .content { margin-top: 50px; } .video { height: 211px; } .video .banner { width: 100%; } .video_info { position: relative; } .video_info::after { content: ""; position: absolute; width: 100%; transform: scaleY(0.5); height: 1px; bottom: -10px; left: 0; background: #e5e5e5; } .video_info .title{ font-family: PingFangSC-Bold; font-size: 0.9rem; line-height: 1.425rem; color: #333333; margin-top: 1.475rem; margin-bottom: 0.75rem; } .video_info .time{ font-family: PingFangSC-Medium; font-size: 0.575rem; color: #999999; margin-bottom: 0.675rem; } .video_info .video_action{ display: flex; justify-content: space-between; } .video_action .action_left{ display: flex; } .video_action img{ width: 0.65rem; vertical-align: middle; } .video_action span{ font-family: PingFangSC-Medium; font-size: 0.6rem; color: #999; } .video_action .collect{ margin-right: 1.5rem; } .about{} .about .title{ height: 2.5rem; line-height: 2.5rem; margin-top: 0.45rem; } .about .content_1{ overflow-x: scroll; } .about .content_1 ul{ display: flex; } .about .content_1 ul li{ width: 6.85rem; margin-right: 0.275rem; } .about .content_1 .pic{ position: relative; width: 6.85rem; height: 3.9rem; } .about .content_1 .pic img{ width: 100%; height: 100%; } .about .content_1 .pic span{ position: absolute; font-family: PingFangSC-Medium; font-size: 0.55rem; color: #ffffff; right: 0.325rem; bottom: 0.325rem; } .about .content_1 .mess{ font-size: 0.7rem; line-height: 1.175rem; color: #666; margin-top: 0.6rem; }