新版式

This commit is contained in:
duanliang
2025-11-24 23:17:46 +08:00
parent 9d78158b77
commit 5c17235581
55 changed files with 973 additions and 731 deletions

View File

@@ -119,11 +119,11 @@
.info {
margin-top: vh(120);
width: vw(626);
height: vh(950);
// height: vh(950);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
&-header {
padding: vh(12) vw(12);
height: vh(167);
height: vh(330);
box-sizing: border-box;
display: flex;
align-items: flex-start;
@@ -137,7 +137,7 @@
margin-left: vw(20);
> h2 {
font-weight: 800;
font-size: vw(20);
font-size: font-vw(24);
color: #ffffff;
margin-bottom: vh(12);
margin-top: vh(10);
@@ -155,13 +155,14 @@
}
&__text {
font-weight: 400;
font-size: vw(16);
font-size: font-vw(20);
color: #0096ff;
line-height: 2;
}
}
.statistic {
&-box {
height: vh(94);
height: vh(194);
margin: 0 vw(26);
gap: vw(20);
display: flex;
@@ -172,19 +173,19 @@
flex: 1;
}
&-item__label {
margin-bottom: vh(16);
margin-bottom: vh(26);
display: flex;
align-items: center;
> span {
font-weight: 400;
font-size: vw(14);
font-size: font-vw(16);
color: #ffffff;
margin-left: vw(4);
}
}
&-item__value {
width: vw(100);
height: vh(30);
width: vw(200);
height: vh(60);
padding-left: vw(12);
padding-bottom: vh(12);
display: flex;
@@ -193,11 +194,11 @@
background-size: 100% 100%;
.countup-wrap {
font-weight: bold;
font-size: vw(28);
font-size: font-vw(42);
color: #02f9fa;
}
> span {
font-size: vw(12);
font-size: font-vw(24);
color: #02f9fa;
margin-left: vw(4);
}
@@ -219,11 +220,11 @@
margin: vh(20) 0 0 vw(20);
padding-right: vw(20);
overflow-y: auto;
height: vh(200);
height: vh(920);
font-weight: 400;
font-size: vw(16);
font-size: font-vw(22);
color: #ffffff;
line-height: vw(26);
line-height: 2;
text-align: justify;
/* 滚动条整体样式 */
&::-webkit-scrollbar {

View File

@@ -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>