body{ background: #3A87A5; } .bg{ width: 100vw; height: 50.625vw; background:url(../images/tvbg.jpg)no-repeat; background-size: 100% 100%; margin: 0 auto; margin-top: -0.3vw; } .tv-top{ width: 100vw; height: 7.3vw; position: relative; img{ width: 20vw; left: 2.8vw; position: absolute; top: 1.3vw; } p{ color: #84FFFE; font-size: 1.9vw; position: absolute; right: 3.5vw; top: 3vw; } // background:pink; } .tv-content{ height: 39vw; width: 95vw; margin: 0 auto; margin-top: 1.8vw; position: relative; } .tv-left-box1{ width: 28.5vw; height: 12.5vw; // background: pink; position: absolute; } .tv-left-box2{ width: 28.5vw; height: 12.5vw; // background: pink; position: absolute; top: 13.15vw; } .tv-left-box3{ width: 28.5vw; height: 12.5vw; // background: pink; position: absolute; top: 26.3vw; } .tv-left-p1{ color: #47FEFC; font-size: 1.6vw; position: absolute; left: 2.3vw; top: 1.2vw; } .tv-left-p2{ font-size: 4.5vw; font-weight: 700; color: #fff; position: absolute; left: 2.1vw; top: 3.7vw; } .tv-left-p3{ position: absolute; color: #3EFFF9; left: 19.5vw; line-height: 2.1vw; font-size: 1.1vw; top: 2.3vw; span{ color: #E0413B; } img{ vertical-align: middle; width: 0.85vw; margin-top: -0.2vw; margin-left: 0.4vw; margin-right: 0.2vw; } } .tv-left-p4{ position: absolute; color: #3EFFF9; left: 19.5vw; line-height: 2.1vw; font-size: 1.1vw; top: 5.1vw; span{ color: #E0413B; } img{ vertical-align: middle; width: 0.85vw; margin-top: -0.2vw; margin-left: 0.4vw; margin-right: 0.25vw; } } .tv-left-p5{ position: absolute; color: #3EFFF9; left: 19.5vw; line-height: 2.1vw; font-size: 1.1vw; top: 7.9vw; span{ color: #E0413B; } img{ vertical-align: middle; width: 0.85vw; margin-top: -0.2vw; margin-left: 0.4vw; margin-right: 0.2vw; } } .tv-right-box1{ width: 65.5vw; left: 29.3vw; height: 19vw; top: 0; // background: pink; position: absolute; } .tv-right-box2{ width: 65.5vw; left: 29.3vw; height: 19vw; top: 19.8vw; // background: pink; position: absolute; } .tv-right-title{ color: #46FEFE; font-size: 2vw; text-align: center; line-height: 5.5vw; } .tv-right-content1{ width: 50%; height: 7.5vw; // background:pink; float: left; text-align: center; font-size: 2.2vw; color: #46FEFE; line-height: 7.5vw; span{ color: #FEFEFF; font-size: 4.4vw; font-weight: 700; } } .tv-right-ul1{ width: 28vw; height: 4vw; position: absolute; left: 3vw; top: 13.2vw; li{ width: 9.33vw; float: left; height: 4vw; line-height: 4vw; text-align: center; font-size: 1.2vw; color: #4CFFFA; img{ vertical-align: middle; width: 0.9vw; margin-top: -0.3vw; margin-left: 0.2vw; } span{ color: #E03C3A; } } } .tv-right-ul3{ width: 55vw; height: 4vw; position: absolute; left: 5vw; top: 13.2vw; li{ width: 18.33vw; float: left; height: 4vw; line-height: 4vw; text-align: center; font-size: 1.2vw; color: #4CFFFA; img{ vertical-align: middle; width: 0.9vw; margin-top: -0.3vw; margin-left: 0.2vw; } span{ color: #E03C3A; } } } .tv-right-ul2{ width: 28vw; height: 4vw; position: absolute; right: 2vw; top: 13.2vw; li{ width: 9.33vw; float: left; height: 4vw; line-height: 4vw; text-align: center; font-size: 1.2vw; color: #4CFFFA; img{ vertical-align: middle; width: 0.9vw; margin-top: -0.3vw; margin-left: 0.2vw; } span{ color: #E03C3A; } } } .tv-right-content2{ width: 50%; height: 7.5vw; // background:pink; float: left; text-align: center; font-size: 2.2vw; color: #46FEFE; line-height: 7.5vw; span{ color: #FEFEFF; font-size: 4.4vw; font-weight: 700; } } .tv-right-content{ width: 40vw; height: 7vw; line-height: 5vw; font-size: 4.4vw; font-weight: 700; color: #fff; text-align: center; margin: 0 auto; } .day-bar{ width: 22vw; height: 0.35vw; background: #1D7384; border-radius: 5vw; margin: 0 auto; margin-top: 0.9vw; overflow: hidden; div{ transition: 0.35s all; width: 0%; height: 0.35vw; background: #1AF5D5; border-radius: 5vw; } }