Skip to content

libai / guodong

Go to a project
Commit dca3091b by libai
Options

测试

parent de2b0b0d
Expand all
Inline Side-by-side
Showing with 697 additions and 0 deletions
css/tv.css 0 → 100644
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;
}
.tv-top img {
width: 20vw;
left: 2.8vw;
position: absolute;
top: 1.3vw;
}
.tv-top p {
color: #84FFFE;
font-size: 1.9vw;
position: absolute;
right: 3.5vw;
top: 3vw;
}
.tv-content {
height: 39vw;
width: 95vw;
margin: 0 auto;
margin-top: 1.8vw;
position: relative;
}
.tv-left-box1 {
width: 28.5vw;
height: 12.5vw;
position: absolute;
}
.tv-left-box2 {
width: 28.5vw;
height: 12.5vw;
position: absolute;
top: 13.15vw;
}
.tv-left-box3 {
width: 28.5vw;
height: 12.5vw;
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;
}
.tv-left-p3 span {
color: #E0413B;
}
.tv-left-p3 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;
}
.tv-left-p4 span {
color: #E0413B;
}
.tv-left-p4 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;
}
.tv-left-p5 span {
color: #E0413B;
}
.tv-left-p5 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;
position: absolute;
}
.tv-right-box2 {
width: 65.5vw;
left: 29.3vw;
height: 19vw;
top: 19.8vw;
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;
float: left;
text-align: center;
font-size: 2.2vw;
color: #46FEFE;
line-height: 7.5vw;
}
.tv-right-content1 span {
color: #FEFEFF;
font-size: 4.4vw;
}
.tv-right-ul1 {
width: 28vw;
height: 4vw;
position: absolute;
left: 3vw;
top: 13.2vw;
}
.tv-right-ul1 li {
width: 9.33vw;
float: left;
height: 4vw;
line-height: 4vw;
text-align: center;
font-size: 1.2vw;
color: #4CFFFA;
}
.tv-right-ul1 li img {
vertical-align: middle;
width: 0.9vw;
margin-top: -0.3vw;
margin-left: 0.2vw;
}
.tv-right-ul1 li span {
color: #E03C3A;
}
.tv-right-ul3 {
width: 55vw;
height: 4vw;
position: absolute;
left: 5vw;
top: 13.2vw;
}
.tv-right-ul3 li {
width: 18.33vw;
float: left;
height: 4vw;
line-height: 4vw;
text-align: center;
font-size: 1.2vw;
color: #4CFFFA;
}
.tv-right-ul3 li img {
vertical-align: middle;
width: 0.9vw;
margin-top: -0.3vw;
margin-left: 0.2vw;
}
.tv-right-ul3 li span {
color: #E03C3A;
}
.tv-right-ul2 {
width: 28vw;
height: 4vw;
position: absolute;
right: 2vw;
top: 13.2vw;
}
.tv-right-ul2 li {
width: 9.33vw;
float: left;
height: 4vw;
line-height: 4vw;
text-align: center;
font-size: 1.2vw;
color: #4CFFFA;
}
.tv-right-ul2 li img {
vertical-align: middle;
width: 0.9vw;
margin-top: -0.3vw;
margin-left: 0.2vw;
}
.tv-right-ul2 li span {
color: #E03C3A;
}
.tv-right-content2 {
width: 50%;
height: 7.5vw;
float: left;
text-align: center;
font-size: 2.2vw;
color: #46FEFE;
line-height: 7.5vw;
}
.tv-right-content2 span {
color: #FEFEFF;
font-size: 4.4vw;
}
.tv-right-content {
width: 40vw;
height: 7vw;
line-height: 5vw;
font-size: 4.4vw;
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;
}
.day-bar div {
transition: 0.35s all;
width: 0%;
height: 0.35vw;
background: #1AF5D5;
border-radius: 5vw;
}
css/tv.less 0 → 100644
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;
}
}
.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;
}
}
.tv-right-content{
width: 40vw;
height: 7vw;
line-height: 5vw;
font-size: 4.4vw;
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;
}
}
\ No newline at end of file
tvShow.html 0 → 100644
This diff is collapsed. Click to expand it.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment