新版式
This commit is contained in:
@@ -469,7 +469,7 @@
|
||||
display:flex;
|
||||
align-items: center;
|
||||
font-size:vw(40);
|
||||
height:vh(750);
|
||||
// height:vh(750);
|
||||
justify-content: center;
|
||||
text-align:center;
|
||||
width:100%;
|
||||
@@ -497,7 +497,7 @@
|
||||
> span {
|
||||
margin: 0 vw(16);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
.pause {
|
||||
@@ -510,7 +510,7 @@
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
height: vh(950);
|
||||
// height: vh(950);
|
||||
margin-top: vh(120);
|
||||
margin-left: vw(10);
|
||||
padding: vh(34) vw(26);
|
||||
@@ -542,7 +542,7 @@
|
||||
> span {
|
||||
padding-left: vw(20);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #ffffff;
|
||||
line-height: vh(40);
|
||||
}
|
||||
@@ -571,7 +571,7 @@
|
||||
padding: vh(10) vw(30);
|
||||
position: absolute;
|
||||
right: vw(30);
|
||||
bottom: vh(20);
|
||||
bottom: vh(50);
|
||||
}
|
||||
}
|
||||
&-list {
|
||||
@@ -584,7 +584,7 @@
|
||||
position: relative;
|
||||
// width: vw(720);
|
||||
width:33%;
|
||||
height: vh(380);
|
||||
height: vh(880);
|
||||
padding: vh(10) vw(10);
|
||||
background-image: url('/src/assets/images/item-primary.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -606,7 +606,7 @@
|
||||
text-align: center;
|
||||
line-height: vh(24);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
color: #ffffff;
|
||||
background-image: url('@/assets/images/unfollow.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -618,15 +618,16 @@
|
||||
|
||||
&-item__inner {
|
||||
position: relative;
|
||||
height:100%;
|
||||
}
|
||||
&-item__title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: vh(10) vw(10);
|
||||
padding: vh(20) vw(20);
|
||||
color: #fff;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -634,15 +635,18 @@
|
||||
}
|
||||
&-item__title--error {
|
||||
@extend .video-item__title;
|
||||
font-size:vw(20);
|
||||
background-color: rgba(226, 27, 27, 0.72);
|
||||
}
|
||||
&-item__title--primary {
|
||||
@extend .video-item__title;
|
||||
font-size:font-vw(20);
|
||||
background-color: rgba(4, 30, 69, 0.72);
|
||||
}
|
||||
&-item__video {
|
||||
width: 100%;
|
||||
height: vh(366);
|
||||
height:100%;
|
||||
// height: vh(1860);
|
||||
object-fit: fill;
|
||||
}
|
||||
&-detail {
|
||||
@@ -654,7 +658,7 @@
|
||||
position: relative;
|
||||
padding: vh(40) vw(50);
|
||||
width: vw(2060);
|
||||
height: vh(960);
|
||||
height: vh(1960);
|
||||
// background-image: url('/src/assets/images/one-video-bg.png');
|
||||
// background-size: 100% 100%;
|
||||
}
|
||||
@@ -665,7 +669,7 @@
|
||||
top: 40 (vh);
|
||||
z-index: 9;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #ffffff;
|
||||
padding: vw(20);
|
||||
display: flex;
|
||||
@@ -674,14 +678,14 @@
|
||||
}
|
||||
&-detail__video {
|
||||
width: 100%;
|
||||
height: vh(780);
|
||||
height: vh(1780);
|
||||
object-fit: contain;
|
||||
background-color: #000;
|
||||
}
|
||||
&-right {
|
||||
margin-left: vw(8);
|
||||
width: vw(440);
|
||||
height: vh(890);
|
||||
height: vh(1890);
|
||||
background: #082f5a;
|
||||
.back-box {
|
||||
cursor: pointer;
|
||||
@@ -695,14 +699,14 @@
|
||||
}
|
||||
& > span {
|
||||
font-weight: bold;
|
||||
font-size: vw(20);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: vh(870);
|
||||
height: vh(1870);
|
||||
padding: vw(8);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
@@ -738,20 +742,23 @@
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: vw(10);
|
||||
padding: vw(20);
|
||||
color: #fff;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(22);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
z-index: 999;
|
||||
}
|
||||
&-title--error {
|
||||
@extend .item-title;
|
||||
// @extend .item-title;
|
||||
font-size:vw(22);
|
||||
background-color: rgba(226, 27, 27, 0.72);
|
||||
}
|
||||
&-title--primary {
|
||||
@extend .item-title;
|
||||
// @extend .item-title;
|
||||
font-size:vw(20);
|
||||
padding:vw(10);
|
||||
background-color: rgba(4, 30, 69, 0.72);
|
||||
}
|
||||
&-img {
|
||||
@@ -803,7 +810,7 @@
|
||||
span {
|
||||
margin-left: vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(15);
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
@@ -835,7 +842,7 @@
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #ffffff;
|
||||
padding: vw(20);
|
||||
text-align: left;
|
||||
@@ -855,15 +862,15 @@
|
||||
}
|
||||
.left-nav {
|
||||
margin: 0 vw(8);
|
||||
width: vw(250);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
|
||||
width: vw(450);
|
||||
// background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
|
||||
.bom-box {
|
||||
margin-top: vh(20);
|
||||
margin-top: vh(40);
|
||||
.search-box {
|
||||
border-radius: vw(2);
|
||||
height: vh(36);
|
||||
height: vh(56);
|
||||
border: 1px solid #0096ff;
|
||||
margin: vh(10) auto;
|
||||
margin: vh(20) auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -877,7 +884,7 @@
|
||||
|
||||
.tree-box {
|
||||
position: relative;
|
||||
height: vh(750);
|
||||
height: vh(1750);
|
||||
padding: 0 vw(20);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
@@ -920,7 +927,7 @@
|
||||
padding: 0 vw(20);
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(24);
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
@@ -951,7 +958,7 @@
|
||||
cursor: pointer;
|
||||
color: rgb(192,216,254);
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(22);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -978,7 +985,7 @@
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
height: vh(36);
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user